/**
 * Machis storefront.
 *
 * Loaded after machis-header-footer.css and allowed to override it. Covers the
 * three-row storefront header, the footer bottom bar, and every section of the
 * Magica TechnoPrint homepage.
 *
 * Colours all resolve through the tokens defined in machis-header-footer.css,
 * which in turn read theme.json — so a palette change restyles this file too.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */
.wp-block-image img{
	width:100%;
}
:root {
	--machis-announce-h: 34px;
	--machis-utility-h: 72px;
	--machis-navrow-h: 48px;

	/*
	 * Section grounds, sampled straight off the approved design. They are
	 * washed-out relatives of the logo inks rather than the inks themselves,
	 * which is what stops five saturated CMYK sections fighting each other.
	 */
	--machis-hero-pink: #fdf0f7;
	--machis-cyan-wash: #88e3f0;
	--machis-cream: #fef5db;
	--machis-tint: #f9f9fc;

	--machis-pill: 999px;
}

/*
 * The base module sizes the sticky offset from a single-row header. The
 * storefront stacks three, so re-derive it or anchor links land under the bar.
 */
html {
	scroll-padding-top: calc(var(--machis-announce-h) + var(--machis-utility-h) + var(--machis-navrow-h) + 1rem);
}

/* -------------------------------------------------------------------------
 * 2. Announcement bar
 * ---------------------------------------------------------------------- */

.machis-announce {
	background-color: var(--machis-fg);
	color: var(--machis-bg);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
}

.machis-announce__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--machis-max);
	min-height: var(--machis-announce-h);
	margin-inline: auto;
	padding-inline: var(--machis-gutter);
}

.machis-announce__text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 600;
	text-transform: uppercase;
}

.machis-announce__text .machis-icon {
	flex: none;
	opacity: 0.85;
}

.machis-announce__links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: none;
}

.machis-announce__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.machis-announce__link:hover,
.machis-announce__link:focus {
	opacity: 1;
	color: var(--machis-cyan);
}

/* A hairline divider between the two utility links. */
.machis-announce__link + .machis-announce__link {
	position: relative;
	padding-left: 1.25rem;
}

.machis-announce__link + .machis-announce__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 12px;
	background-color: currentColor;
	opacity: 0.3;
	transform: translateY(-50%);
}

@media (max-width: 782px) {
	.machis-announce__inner {
		justify-content: center;
	}

	.machis-announce__links {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Utility row — logo, search, actions
 * ---------------------------------------------------------------------- */

.machis-header--storefront {
	position: relative;
	background-color: var(--machis-bg);
}

.machis-header--storefront .machis-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--machis-max);
	margin-inline: auto;
	padding-inline: var(--machis-gutter);
}

.machis-header__utility {
	background-color: var(--machis-bg);
	border-bottom: 1px solid var(--machis-line-soft);
}

.machis-header__utility .machis-header__inner {
	min-height: var(--machis-utility-h);
}

.machis-header--storefront .machis-header__brand {
	flex: none;
}

.machis-header--storefront .machis-brand__logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: auto;
	max-height: 56px;
}

/* Search ------------------------------------------------------------------ */

.machis-header--storefront .machis-header__search {
	flex: 1 1 auto;
	max-width: 460px;
}

.machis-header--storefront .machis-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.machis-header--storefront .machis-search__input {
	width: 100%;
	height: 42px;
	padding: 0 3rem 0 1.1rem;
	background-color: var(--machis-bg);
	border: 1px solid var(--machis-line);
	border-radius: var(--machis-pill);
	color: var(--machis-fg);
	font-family: inherit;
	font-size: 0.88rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.machis-header--storefront .machis-search__input::placeholder {
	color: var(--machis-faint);
}

.machis-header--storefront .machis-search__input:focus {
	outline: none;
	border-color: var(--machis-accent);
	box-shadow: 0 0 0 3px rgba(217, 0, 138, 0.12);
}

.machis-header--storefront .machis-search__submit {
	position: absolute;
	right: 4px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--machis-muted);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.machis-header--storefront .machis-search__submit:hover,
.machis-header--storefront .machis-search__submit:focus {
	background-color: var(--machis-bg-alt);
	color: var(--machis-accent);
}

/* The phone-only search row, hidden until the utility row runs out of space. */
.machis-header__search-mobile {
	display: none;
	padding: 0.65rem var(--machis-gutter);
	background-color: var(--machis-bg);
	border-bottom: 1px solid var(--machis-line-soft);
}

/* Actions ----------------------------------------------------------------- */

.machis-header--storefront .machis-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2vw, 1.75rem);
	flex: none;
	margin-left: auto;
}

.machis-action {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--machis-fg);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.machis-action:hover,
.machis-action:focus {
	color: var(--machis-accent);
}

.machis-action__icon {
	position: relative;
	display: inline-flex;
	flex: none;
}

.machis-action__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.machis-action__label {
	font-size: 0.8rem;
	font-weight: 700;
}

.machis-action__sub {
	color: var(--machis-muted);
	font-size: 0.72rem;
}

.machis-action:hover .machis-action__sub,
.machis-action:focus .machis-action__sub {
	color: inherit;
}

/* The count bubble on the wishlist heart and the bag. */
.machis-action__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background-color: var(--machis-accent);
	border-radius: var(--machis-pill);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
}

.machis-action__badge[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * 4. Navigation row
 * ---------------------------------------------------------------------- */

.machis-header__navrow {
	background-color: var(--machis-bg);
	border-bottom: 1px solid var(--machis-line-soft);
}

.machis-header__navrow-inner {
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--machis-navrow-h);
	padding-block: 0.4rem;
}

/* Shop by category button ------------------------------------------------- */

.machis-catmenu {
	position: relative;
	flex: none;
}

.machis-catmenu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 40px;
	padding: 0 1.1rem;
	background-color: var(--machis-accent);
	border: 0;
	border-radius: var(--machis-pill);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.machis-catmenu__toggle:hover,
.machis-catmenu__toggle:focus {
	background-color: var(--machis-magenta);
}

.machis-catmenu__bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 15px;
}

.machis-catmenu__bars span {
	display: block;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.machis-catmenu__toggle .machis-icon {
	transition: transform 0.2s var(--machis-ease);
}

.machis-catmenu__toggle[aria-expanded="true"] .machis-icon {
	transform: rotate(180deg);
}

.machis-catmenu__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 60;
	min-width: 260px;
	padding: 0.5rem;
	background-color: var(--machis-bg);
	border: 1px solid var(--machis-line);
	border-radius: var(--machis-radius);
	box-shadow: 0 18px 40px -18px rgba(14, 14, 16, 0.35);
}

.machis-catmenu__panel[hidden] {
	display: none;
}

.machis-catmenu__list,
.machis-catmenu__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.machis-catmenu__list a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: var(--machis-radius-sm);
	color: var(--machis-fg);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.machis-catmenu__list a:hover,
.machis-catmenu__list a:focus {
	background-color: var(--machis-bg-alt);
	color: var(--machis-accent);
}

.machis-catmenu__list ul a {
	padding-left: 1.5rem;
	color: var(--machis-muted);
	font-size: 0.8rem;
}

/* Primary menu ------------------------------------------------------------ */

.machis-header--storefront .machis-nav {
	flex: 1 1 auto;
}

.machis-header--storefront .machis-menu--horizontal {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.machis-header--storefront .machis-menu--horizontal > li > a {
	position: relative;
	display: block;
	padding: 0.55rem 0;
	color: var(--machis-fg);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.machis-header--storefront .machis-menu--horizontal > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--machis-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s var(--machis-ease);
}

.machis-header--storefront .machis-menu--horizontal > li > a:hover,
.machis-header--storefront .machis-menu--horizontal > li > a:focus,
.machis-header--storefront .machis-menu--horizontal > .current-menu-item > a,
.machis-header--storefront .machis-menu--horizontal > .current_page_item > a {
	color: var(--machis-accent);
	text-decoration: none;
}

.machis-header--storefront .machis-menu--horizontal > li > a:hover::after,
.machis-header--storefront .machis-menu--horizontal > li > a:focus::after,
.machis-header--storefront .machis-menu--horizontal > .current-menu-item > a::after,
.machis-header--storefront .machis-menu--horizontal > .current_page_item > a::after {
	transform: scaleX(1);
}

/* Burger is desktop-hidden; the drawer is a phone and tablet affordance. */
.machis-header--storefront .machis-burger {
	display: none;
	flex: none;
	order: -1;
}

.machis-offcanvas__label {
	margin: 1.25rem 0 0.4rem;
	color: var(--machis-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1024px) {
	.machis-header--storefront .machis-header__search,
	.machis-header__utility .machis-catmenu,
	.machis-header__navrow {
		display: none;
	}

	.machis-header__search-mobile {
		display: block;
	}

	.machis-header--storefront .machis-burger {
		display: inline-flex;
	}

	.machis-header--storefront .machis-header__brand {
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.machis-action__text {
		display: none;
	}

	.machis-header--storefront .machis-header__actions {
		gap: 1.1rem;
	}

	.machis-header--storefront .machis-brand__logo {
		max-width: 150px;
		max-height: 44px;
	}
}

/* -------------------------------------------------------------------------
 * 5. Shared section furniture
 * ---------------------------------------------------------------------- */

.machis-section {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	background-color: var(--machis-bg);
}

/*
 * The section blocks nested inside carry their own light background. Let the
 * wrapper's colour show through instead, so a section reads as one band.
 */
.machis-section .dcs-section,
.machis-section .dcs-theme-light {
	background-color: transparent;
}

.machis-section__inner {
	max-width: var(--machis-max);
	margin-inline: auto;
	padding-inline: var(--machis-gutter);
}

.machis-sechead {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
}

.machis-sechead__title {
	margin: 0;
	color: var(--machis-fg);
	font-family: var(--machis-font);
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.machis-sechead__sub {
	margin: 0.6rem auto 0;
	max-width: 60ch;
	color: var(--machis-muted);
	font-size: 0.95rem;
}

/* Pill buttons ------------------------------------------------------------ */

.machis-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--machis-pill);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--machis-ease);
}

.machis-pill--solid {
	background-color: var(--machis-accent);
	border-color: var(--machis-accent);
	color: #fff;
}

.machis-pill--solid:hover,
.machis-pill--solid:focus {
	background-color: var(--machis-fg);
	border-color: var(--machis-fg);
	color: #fff;
	transform: translateY(-1px);
}

.machis-pill--ghost {
	background-color: transparent;
	border-color: var(--machis-accent);
	color: var(--machis-accent);
}

.machis-pill--ghost:hover,
.machis-pill--ghost:focus {
	background-color: var(--machis-accent);
	color: #fff;
}

.machis-section__cta {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 6. Hero
 * ---------------------------------------------------------------------- */

.machis-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	align-items: center;
	gap: 0;
	overflow: hidden;
	background: linear-gradient(90deg, #f4e1ea 0%, var(--machis-hero-pink) 55%);
}

/* The image stays in normal flow so its original proportions set its height. */
.machis-hero__media {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	z-index: 1;
	width: 100%;
	min-width: 0;
}

.machis-hero .wp-block-image img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: none;
	aspect-ratio: auto !important;
	object-fit: contain;
}

/* An image-only hero uses the entire row, including replacement banner art. */
.machis-hero:not(:has(.machis-hero__inner)) {
	grid-template-columns: minmax(0, 1fr);
}

.machis-hero:not(:has(.machis-hero__inner)) > .wp-block-image {
	grid-column: 1;
	width: 100%;
	margin: 0;
}

.machis-hero:not(:has(.machis-hero__inner)) .machis-hero__media::after {
	display: none;
}

/* Feathers the photo's left edge into the pink so the cut is invisible. */
.machis-hero__media::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 90px;
	background: linear-gradient(90deg, var(--machis-hero-pink) 0%, rgba(253, 240, 247, 0) 100%);
}

.machis-hero__inner {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: clamp(2rem, 4vw, 3rem) 0;
}

.machis-hero__title {
	margin: 0;
	font-family: var(--machis-font);
	font-size: clamp(2.4rem, 6vw, 3.9rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.02;
	text-transform: uppercase;
}

.machis-hero__title span {
	display: block;
}

/*
 * The colour lands on the title element itself (each line is its own block so
 * it stays individually editable); the descendant form is kept for any markup
 * that still nests spans.
 */
.machis-hero__title.is-cyan,
.machis-hero__title .is-cyan {
	color: #12c7d8;
}

.machis-hero__title.is-magenta,
.machis-hero__title .is-magenta {
	color: var(--machis-accent);
}

.machis-hero__title.is-yellow,
.machis-hero__title .is-yellow {
	color: #f2c500;
}

.machis-hero__text {
	max-width: 34ch;
	margin: 1.25rem 0 0;
	color: var(--machis-fg);
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	line-height: 1.6;
}

.machis-hero__actions {
	margin-top: 1.6rem;
}

/* The yellow "owners" tag in the bottom-right of the artwork. */
.machis-hero__tag {
	position: absolute;
	right: clamp(1rem, 4vw, 3rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 3;
	padding: 0.55rem 1.5rem;
	background-color: var(--machis-yellow);
	border-radius: 6px;
	color: var(--machis-fg);
	text-align: center;
	transform: rotate(-2deg);
	box-shadow: 0 8px 20px -12px rgba(14, 14, 16, 0.5);
}

.machis-hero__tag strong {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
}

.machis-hero__tag span {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * On phones the uncropped artwork follows the copy at its natural height.
 */
@media (max-width: 860px) {
	.machis-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.machis-hero__inner {
		grid-column: 1;
		grid-row: 1;
	}

	.machis-hero__media {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: auto;
	}

	.machis-hero:not(:has(.machis-hero__inner)) > .wp-block-image {
		grid-row: 1;
	}

	.machis-hero__media::after {
		display: none;
	}

	.machis-hero__tag {
		position: static;
		display: inline-block;
		margin-top: 1.5rem;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 7. USP strip
 * ---------------------------------------------------------------------- */

.machis-usp {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	background-color: var(--machis-bg);
}

.machis-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	max-width: var(--machis-max);
	margin-inline: auto;
	padding-inline: var(--machis-gutter);
}

.machis-usp__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.machis-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #fff;
}

.machis-usp__icon--magenta {
	background-color: var(--machis-accent);
}

.machis-usp__icon--cyan {
	background-color: #21c9dc;
}

.machis-usp__icon--yellow {
	background-color: var(--machis-yellow);
	color: var(--machis-fg);
}

.machis-usp__title {
	margin: 0 0 0.15rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.25;
	text-transform: uppercase;
}

.machis-usp__text {
	margin: 0;
	color: var(--machis-muted);
	font-size: 0.78rem;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.machis-usp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.machis-usp__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 8. Category cards
 * ---------------------------------------------------------------------- */

.machis-catgrid-section {
	position: relative;
	overflow: hidden;
	background-color: var(--machis-tint);
}

/*
 * The scattered yellow dots in the top-right of the design. Drawn with a
 * radial-gradient tile so it costs no image request.
 */
.machis-catgrid-section::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 170px;
	height: 70px;
	background-image: radial-gradient(var(--machis-yellow) 1.6px, transparent 1.7px);
	background-size: 14px 14px;
	opacity: 0.85;
	pointer-events: none;
}

/*
 * Card treatment for the live Category Tiles block. Adding the `machis-cards`
 * class to that block turns its tiles into the design's white cards; the block
 * keeps pulling real categories out of WooCommerce.
 */
.machis-cards .dcs-cats {
	gap: clamp(0.75rem, 1.8vw, 1.35rem);
}

.machis-cards .dcs-cats__link {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	background-color: var(--machis-bg);
	border: 1px solid var(--machis-line-soft);
	border-radius: 14px;
	color: var(--machis-fg);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 18px -14px rgba(14, 14, 16, 0.4);
	transition: transform 0.2s var(--machis-ease), box-shadow 0.2s ease, border-color 0.2s ease;
}

.machis-cards .dcs-cats__link:hover,
.machis-cards .dcs-cats__link:focus {
	transform: translateY(-4px);
	border-color: var(--machis-accent);
	box-shadow: 0 14px 30px -18px rgba(217, 0, 138, 0.55);
}

.machis-cards .dcs-cats__media {
	width: 100%;
	max-width: none;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--machis-bg-alt);
	border: 0;
	border-radius: 0;
}

.machis-cards .dcs-cats__media img,
.machis-cards .dcs-cats__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--machis-ease);
}

.machis-cards .dcs-cats__link:hover .dcs-cats__img {
	transform: scale(1.05);
}

/* Categories with no image fall back to a brand-tinted initial. */
.machis-cards .dcs-cats__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--machis-cyan) 0%, var(--machis-lemon) 100%);
	color: var(--machis-fg);
	font-size: 2.5rem;
	font-weight: 800;
}

/*
 * The label band is sized so a two-word category and a four-word one give the
 * same card height, which is what keeps the row even.
 */
.machis-cards .dcs-cats__name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.2rem;
	padding: 0.7rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* When counts are on, the name gives up its lower half to them. */
.machis-cards .dcs-cats__name:not(:last-child) {
	min-height: 0;
	padding-bottom: 0.15rem;
}

.machis-cards .dcs-cats__count {
	padding: 0 0.6rem 0.85rem;
	color: var(--machis-muted);
	font-size: 0.68rem;
}

@media (max-width: 600px) {
	.machis-catgrid-section::before {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 9. About
 * ---------------------------------------------------------------------- */

.machis-about {
	position: relative;
	overflow: hidden;
	background-color: var(--machis-cream);
}

.machis-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.machis-about__title {
	margin: 0 0 1rem;
	font-size: clamp(1.2rem, 2.6vw, 1.6rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-transform: uppercase;
}

.machis-about__text p {
	margin: 0 0 1rem;
	color: var(--machis-fg);
	font-size: 0.92rem;
	line-height: 1.65;
}

.machis-about__points {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.9rem;
}

.machis-about__point {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.machis-about__point .machis-usp__icon {
	width: 34px;
	height: 34px;
}

/* Photo -------------------------------------------------------------------- */

.machis-about__media {
	position: relative;
	justify-self: center;
}

.machis-about__photo {
	position: relative;
	display: block;
	padding: 10px 10px 12px;
	background-color: #fff;
	transform: rotate(-2deg);
	box-shadow: 0 18px 40px -20px rgba(14, 14, 16, 0.5);
}

.machis-about__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Washi-tape corners, matching the crafting theme of the design. */
.machis-about__photo::before,
.machis-about__photo::after {
	content: "";
	position: absolute;
	width: 74px;
	height: 22px;
	opacity: 0.8;
}

.machis-about__photo::before {
	top: -10px;
	left: -16px;
	background-color: var(--machis-magenta);
	transform: rotate(-28deg);
}

.machis-about__photo::after {
	top: -8px;
	right: -16px;
	background-color: var(--machis-cyan);
	transform: rotate(24deg);
}

/* The stacked caption banners under the photo. */
.machis-about__banners {
	position: relative;
	z-index: 2;
	margin-top: -1.5rem;
	margin-left: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.machis-about__banner {
	padding: 0.35rem 1.1rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.machis-about__banner--accent {
	background-color: var(--machis-accent);
	color: #fff;
}

.machis-about__banner--dark {
	background-color: var(--machis-fg);
	color: #fff;
}

.machis-about__banner--small {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}

@media (max-width: 860px) {
	.machis-about__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * 10. Newsletter
 * ---------------------------------------------------------------------- */

.machis-newsletter {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	background-color: var(--machis-cyan-wash);
}

.machis-newsletter__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--machis-max);
	margin-inline: auto;
	padding-inline: var(--machis-gutter);
}

.machis-newsletter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 62px;
	height: 62px;
	background-color: var(--machis-accent);
	border-radius: 50%;
	color: #fff;
}

.machis-newsletter__text {
	flex: 1 1 auto;
}

.machis-newsletter__title {
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.machis-newsletter__sub {
	margin: 0;
	max-width: 46ch;
	color: rgba(14, 14, 16, 0.75);
	font-size: 0.82rem;
	line-height: 1.45;
}

.machis-newsletter__form {
	display: flex;
	gap: 0.5rem;
	flex: none;
	width: min(440px, 100%);
}

.machis-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 1.1rem;
	background-color: #fff;
	border: 0;
	border-radius: 4px;
	color: var(--machis-fg);
	font-family: inherit;
	font-size: 1rem;
}

.machis-newsletter__input::placeholder {
	color: var(--machis-faint);
}

.machis-newsletter__input:focus {
	outline: 2px solid var(--machis-accent);
	outline-offset: 1px;
}

.machis-newsletter__submit {
	flex: none;
	height: 44px;
	padding: 0 1.6rem;
	background-color: var(--machis-accent);
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.machis-newsletter__submit:hover,
.machis-newsletter__submit:focus {
	background-color: var(--machis-fg);
}

.machis-newsletter__note {
	margin: 0.5rem 0 0;
	max-width: 32ch;
	font-size: 0.9rem;
	line-height: 1.6;
}

.machis-newsletter__note a { display: inline-block; font-weight: 700; text-underline-offset: 0.2em; }

@media (max-width: 980px) {
	.machis-newsletter__inner {
		flex-wrap: wrap;
	}

	.machis-newsletter__form {
		width: 100%;
	}
}

@media (max-width: 520px) {
	.machis-newsletter__icon {
		display: none;
	}

	.machis-newsletter__form {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
 * 11. Footer additions
 * ---------------------------------------------------------------------- */

.machis-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.machis-pay {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
}

.machis-pay__label {
	margin-right: 0.25rem;
	font-size: 0.72rem;
	opacity: 0.7;
}

.machis-pay__mark {
	display: inline-flex;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
}

/* Social icons keep their brand colours on the dark footer. */
.machis-social--footer .machis-social__link {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	opacity: 1;
}

.machis-social--footer .machis-social__link:hover,
.machis-social--footer .machis-social__link:focus {
	background-color: var(--machis-accent);
	color: #fff;
}

/*
 * The base module knocks the footer logo out to white, which assumes a
 * single-colour mark. The Magica logo is full-colour CMYK blocks, so inverting
 * it destroys it — keep it as-is.
 */
.machis-footer--dark .machis-brand--footer .machis-brand__logo {
	filter: none;
}

.machis-footer__col--brand .machis-brand__logo {
	max-width: 170px;
	height: auto;
}

.machis-footer__tagline {
	margin: 0.9rem 0 1.1rem;
	max-width: 34ch;
	font-size: 0.78rem;
	line-height: 1.6;
	opacity: 0.75;
}

.machis-footer__heading {
	margin: 0 0 0.9rem;
	font-family: var(--machis-font);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.machis-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.6rem;
	font-size: 0.8rem;
	line-height: 1.5;
}

.machis-footer__contact .machis-icon {
	flex: none;
	margin-top: 2px;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * 12. Product card additions (wishlist heart beside Add to cart)
 * ---------------------------------------------------------------------- */

/*
 * The design frames each product in a bordered white card and puts Add to cart
 * beside a wishlist heart. The base block styles give an unframed card with a
 * full-width dark button, so both are overridden here.
 */
.dcs-section .dcs-products li.product {
	padding: 0.75rem 0.75rem 0.9rem;
	background-color: var(--machis-bg);
	border: 1px solid var(--machis-line-soft);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dcs-section .dcs-products li.product:hover {
	border-color: var(--machis-line);
	box-shadow: 0 12px 26px -20px rgba(14, 14, 16, 0.5);
}

/*
 * Titles run to one or two lines depending on the product. Reserving two
 * lines keeps the prices and buttons on a common baseline across the row —
 * without it, a two-line title pushes that one card's button out of line.
 */
.dcs-section .dcs-products li.product .woocommerce-loop-product__title,
.dcs-section .dcs-products li.product h2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	font-size: 0.82rem;
	line-height: 1.3;
}

.dcs-section .dcs-products li.product .price {
	margin-top: auto;
	color: var(--machis-accent);
	font-size: 0.92rem;
	font-weight: 700;
}

/* Add to cart and the heart share one row. */
.machis-product-actions {
	display: flex;
	align-items: stretch;
	gap: 0.45rem;
	margin-top: 0.7rem;
}

/* Reset the base block's full-width, top-margined button for the flex row. */
.dcs-section .dcs-products li.product .machis-product-actions .button {
	flex: 1 1 auto;
	width: auto;
	min-height: 36px;
	margin: 0;
	padding: 0.5rem 0.6rem;
	background-color: var(--machis-accent);
	border-color: var(--machis-accent);
	border-radius: 6px;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dcs-section .dcs-products li.product .machis-product-actions .button:hover,
.dcs-section .dcs-products li.product .machis-product-actions .button:focus {
	background-color: var(--machis-fg);
	border-color: var(--machis-fg);
	color: #fff;
}

.machis-product-actions .added_to_cart {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
}

.machis-wish {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 36px;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--machis-line);
	border-radius: 6px;
	color: var(--machis-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.machis-wish:hover,
.machis-wish:focus {
	border-color: var(--machis-accent);
	color: var(--machis-accent);
}

.machis-wish.is-active {
	background-color: var(--machis-accent);
	border-color: var(--machis-accent);
	color: #fff;
}

.machis-wish.is-active .machis-icon {
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * 13. Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.machis-cat,
	.machis-cat__media img,
	.machis-pill,
	.machis-catmenu__toggle .machis-icon {
		transition: none;
	}

	.machis-cat:hover,
	.machis-pill--solid:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 14. Class-driven icons
 *
 * The homepage is built from core blocks so every heading and paragraph is
 * click-to-edit. Core blocks cannot carry inline SVG, so an icon is a CSS mask
 * over `currentColor` on an otherwise empty element: one class, no markup.
 *
 * Each icon class only sets `--machis-icon`. Both a bare `.machis-ico` and the
 * `::before` of a `.machis-circle` consume that variable, so the same class
 * works standalone or inside a coloured disc.
 * ---------------------------------------------------------------------- */

.machis-ico,
.machis-circle::before {
	content: "";
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-image: var(--machis-icon);
	mask-image: var(--machis-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* The coloured disc behind an icon. */
.machis-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px;
	height: 52px;
	min-height: 0;
	border-radius: 50%;
	color: #fff;
}

.machis-circle--magenta {
	background-color: var(--machis-accent);
}

.machis-circle--cyan {
	background-color: #21c9dc;
}

.machis-circle--yellow {
	background-color: var(--machis-yellow);
	color: var(--machis-fg);
}

.machis-circle--sm {
	width: 34px;
	height: 34px;
}

.machis-circle--sm::before {
	width: 16px;
	height: 16px;
}

.machis-circle--lg {
	width: 62px;
	height: 62px;
}

.machis-circle--lg::before {
	width: 28px;
	height: 28px;
}

.machis-ico--truck {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.machis-ico--award {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
}

.machis-ico--palette {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
}

.machis-ico--heart {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.machis-ico--star {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.machis-ico--mail {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.machis-ico--bag {
	--machis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}


/* -------------------------------------------------------------------------
 * 15. Core block wrappers
 *
 * The homepage is core blocks carrying these class names, so the layouts above
 * have to win against core's own `.wp-block-*` rules. That is the whole cost of
 * making the page click-to-edit, and it is paid here rather than by wrapping
 * everything in raw HTML.
 * ---------------------------------------------------------------------- */

/* Core groups add block padding/margins the section layouts set themselves. */
.wp-block-group.machis-hero,
.wp-block-group.machis-usp,
.wp-block-group.machis-about,
.wp-block-group.machis-newsletter {
	margin-block: 0;
}

/* The hero artwork arrives as an Image block, so its figure is the media slot. */
figure.machis-hero__media {
	margin: 0;
}

figure.machis-hero__media img {
	border-radius: 0;
}

/* Columns default to flex; the service strip and About need the grid rules. */
.wp-block-columns.machis-usp__grid {
	display: grid;
	margin-bottom: 0;
}

.wp-block-columns.machis-about__grid {
	display: grid;
	margin-bottom: 0;
}

/* Core gives every column a flex-basis that fights an explicit grid. */
.machis-usp__grid > .wp-block-column,
.machis-about__grid > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

/* Stop core's column stacking from overriding the section's own breakpoints. */
@media (max-width: 781px) {
	.wp-block-columns.machis-usp__grid,
	.wp-block-columns.machis-about__grid {
		flex-wrap: initial;
	}
}

/* Paragraphs used as hero display type keep the heading treatment. */
p.machis-hero__title {
	margin: 0;
}

/* The About bullet list is a core list; icons sit in the marker slot. */
ul.machis-about__points {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

/* Buttons block wrapping the ghost pill. */
.machis-section__cta .wp-block-buttons,
.wp-block-buttons.machis-section__cta {
	justify-content: center;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * The pill classes are applied to the Button block's outer div, but the visible
 * control is the inner link — push the styling down to it.
 */
.wp-block-button.machis-pill--ghost .wp-block-button__link {
	padding: 0.7rem 1.6rem;
	background-color: transparent;
	border: 2px solid var(--machis-accent);
	border-radius: var(--machis-pill);
	color: var(--machis-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.wp-block-button.machis-pill--ghost .wp-block-button__link:hover,
.wp-block-button.machis-pill--ghost .wp-block-button__link:focus {
	background-color: var(--machis-accent);
	color: #fff;
}

.wp-block-button.machis-pill--solid .wp-block-button__link {
	padding: 0.8rem 1.8rem;
	background-color: var(--machis-accent);
	border: 2px solid var(--machis-accent);
	border-radius: var(--machis-pill);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.wp-block-button.machis-pill--solid .wp-block-button__link:hover,
.wp-block-button.machis-pill--solid .wp-block-button__link:focus {
	background-color: var(--machis-fg);
	border-color: var(--machis-fg);
	color: #fff;
}

/* The pill wrappers must not also paint themselves. */
.wp-block-button.machis-pill--ghost,
.wp-block-button.machis-pill--solid {
	padding: 0;
	background: none;
	border: 0;
}

/* Readable labels and comfortable controls outside the unchanged banners. */
.machis-cards .dcs-cats__name {
	min-height: 3.8rem;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}
.machis-usp__text { font-size: 0.85rem; line-height: 1.5; }
.machis-usp__item > .wp-block-group { min-width: 0; }
.machis-wish,
.dcs-section .dcs-products li.product .machis-product-actions .button { min-height: 44px; }
.machis-wish { min-width: 44px; }
.machis-catmenu__toggle:focus-visible,
.machis-catmenu__panel a:focus-visible,
.machis-cards .dcs-cats__link:focus-visible,
.machis-wish:focus-visible,
.machis-section__cta a:focus-visible,
.machis-newsletter a:focus-visible,
.machis-newsletter__submit:focus-visible {
	outline: 3px solid var(--machis-fg);
	outline-offset: 4px;
}
@media (min-width: 601px) and (max-width: 900px) {
	.dcs-section.machis-cards[data-columns] .dcs-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.dcs-section.machis-cards[data-columns] .dcs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.machis-newsletter__inner > .wp-block-group { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.machis-cards .dcs-cats__link,
	.machis-cards .dcs-cats__img { transition: none; }
	.machis-cards .dcs-cats__link:hover,
	.machis-cards .dcs-cats__link:focus,
	.machis-cards .dcs-cats__link:hover .dcs-cats__img { transform: none; }
}