/**
 * DreamCloud section blocks.
 *
 * Loads on the front end and inside the editor (registered as the blocks'
 * `style`), so previews match the real thing. Colours come from the same
 * custom properties as the header and footer — see machis-header-footer.css.
 */

/* -------------------------------------------------------------------------
 * 1. Section shell — theme and spacing
 * ---------------------------------------------------------------------- */

.dcs-section {
	--dcs-fg: var(--machis-fg, #0e0e10);
	--dcs-bg: transparent;
	--dcs-muted: var(--machis-muted, #5b5b63);
	--dcs-line: rgba(14, 14, 16, 0.12);
	--dcs-card: var(--machis-bg-alt, #f7f7f9);
	--dcs-accent: var(--machis-accent, #d9008a);
	--dcs-on-accent: #ffffff;
	--dcs-pad: clamp(2.5rem, 6vw, 4.5rem);

	position: relative;
	box-sizing: border-box;
	margin-block: 0;
	padding-block: var(--dcs-pad);
	background-color: var(--dcs-bg);
	color: var(--dcs-fg);
	font-family: var(--machis-font, inherit);
}

.dcs-section * {
	box-sizing: border-box;
}

.dcs-theme-light {
	--dcs-bg: var(--machis-bg, #ffffff);
}

.dcs-theme-dark {
	--dcs-fg: var(--machis-bg, #ffffff);
	--dcs-bg: var(--machis-fg, #0e0e10);
	--dcs-muted: rgba(255, 255, 255, 0.68);
	--dcs-line: rgba(255, 255, 255, 0.16);
	--dcs-card: rgba(255, 255, 255, 0.06);

	/*
	 * On ink the deepened magenta goes muddy, so dark sections switch to the
	 * raw logo magenta and flip anything sitting on top of it back to ink.
	 */
	--dcs-accent: var(--machis-magenta, #fe21ad);
	--dcs-on-accent: var(--machis-fg, #0e0e10);
}

/*
 * Derive the supporting tones from whatever the text colour ends up being.
 * This is what lets a custom Background/Text pair in the sidebar restyle the
 * whole section — muted copy, rules, card tints — instead of only the two
 * colours you picked. The values above stay as the fallback for browsers
 * without color-mix().
 */
@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.dcs-section {
		--dcs-muted: color-mix(in srgb, var(--dcs-fg) 70%, transparent);
		--dcs-line: color-mix(in srgb, var(--dcs-fg) 16%, transparent);
		--dcs-card: color-mix(in srgb, var(--dcs-fg) 7%, transparent);
	}
}

.dcs-space-none {
	--dcs-pad: 0rem;
}

.dcs-space-small {
	--dcs-pad: clamp(1.25rem, 3vw, 2.25rem);
}

.dcs-space-large {
	--dcs-pad: clamp(4rem, 9vw, 7rem);
}

.dcs-section__inner {
	max-width: var(--machis-max, 1280px);
	margin-inline: auto;
	padding-inline: var(--machis-gutter, clamp(1rem, 4vw, 2.5rem));
}

/* Section header ---------------------------------------------------------- */

.dcs-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.dcs-section__head-text {
	max-width: 62ch;
}

.dcs-section__title {
	margin: 0;
	font-family: var(--machis-font-heading, inherit);
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: inherit;
}

.dcs-section__subtitle {
	margin: 0.5rem 0 0;
	color: var(--dcs-muted);
	font-size: 0.98rem;
	line-height: 1.55;
}

.dcs-section__more {
	flex: none;
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.dcs-section__more:hover,
.dcs-section__more:focus {
	color: var(--dcs-accent);
}

/* -------------------------------------------------------------------------
 * 2. Placeholders (shown before there is any data)
 * ---------------------------------------------------------------------- */

.dcs-placeholder__notice {
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	background-color: var(--dcs-card);
	border-left: 3px solid var(--dcs-accent);
	border-radius: 0 var(--machis-radius-sm, 6px) var(--machis-radius-sm, 6px) 0;
	color: var(--dcs-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.dcs-placeholder__notice--center {
	margin: 0;
	border-left: 0;
	border-radius: var(--machis-radius, 10px);
	text-align: center;
}

.dcs-placeholder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.dcs-placeholder__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.dcs-placeholder__media {
	aspect-ratio: 1;
	background-color: var(--dcs-card);
	border: 1px dashed var(--dcs-line);
	border-radius: var(--machis-radius, 10px);
}

.dcs-placeholder--category .dcs-placeholder__media {
	width: 84px;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 50%;
}

.dcs-placeholder--category .dcs-placeholder__item {
	align-items: center;
	text-align: center;
}

.dcs-placeholder__line {
	height: 10px;
	background-color: var(--dcs-card);
	border-radius: 999px;
}

.dcs-placeholder__line--short {
	width: 55%;
}

.dcs-placeholder--category .dcs-placeholder__line {
	width: 80%;
}

.dcs-placeholder--category .dcs-placeholder__line--short {
	width: 45%;
}

/* -------------------------------------------------------------------------
 * 3. Hero slider
 * ---------------------------------------------------------------------- */

/* Remove the page gutters only on pages containing a full-width hero. */
.wp-site-blocks:has(.machis-hero, .dcs-section--hero) {
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
	padding-inline: 0;
}

:where(.wp-block-post-content, main.wp-block-group):has(.machis-hero, .dcs-section--hero),
:where(.is-layout-constrained):has(> .machis-hero, > .dcs-section--hero) {
	max-width: none;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.machis-hero,
.dcs-section--hero {
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.dcs-section.dcs-section--hero {
	padding: 0;
}

.dcs-section--hero .dcs-section__inner {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.dcs-slider {
	position: relative;
	overflow: hidden;
}

.dcs-slider__viewport {
	overflow: hidden;
}

.dcs-slider__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.dcs-slider__slide {
	flex: 0 0 100%;
	min-width: 100%;
	min-height: 0;
}

/* Text-only Covers retain a minimum height until artwork is added. */
.dcs-slider__slide > .wp-block-cover {
	min-height: var(--dcs-slide-height, 460px);
	margin: 0;
}

/* Cover artwork also keeps its proportions, with editable copy overlaid. */
.dcs-slider__slide > .wp-block-cover:has(> .wp-block-cover__image-background) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0 !important;
	height: auto;
	aspect-ratio: auto !important;
	padding: 0;
}

.dcs-slider__slide > .wp-block-cover > .wp-block-cover__image-background {
	position: relative;
	inset: auto;
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain;
}

.dcs-slider__slide > .wp-block-cover:has(> .wp-block-cover__image-background) > .wp-block-cover__inner-container {
	grid-area: 1 / 1;
	min-width: 0;
}

.dcs-slider__slide > .wp-block-image {
	width: 100%;
	max-width: none;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
}

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

.dcs-slider--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background-color: var(--dcs-card);
	border: 1px dashed var(--dcs-line);
}

/* Arrows ------------------------------------------------------------------ */

.dcs-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	color: #111;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.dcs-slider__arrow:hover {
	background-color: #fff;
	color: var(--dcs-accent);
}

.dcs-slider__arrow--prev {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.dcs-slider__arrow--next {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

/* The icon is a chevron-down, rotated into place. */
.dcs-slider__arrow--prev .machis-icon {
	transform: rotate(90deg);
}

.dcs-slider__arrow--next .machis-icon {
	transform: rotate(-90deg);
}

/* Dots -------------------------------------------------------------------- */

.dcs-slider__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 3;
	display: flex;
	gap: 0.5rem;
	transform: translateX(-50%);
}

.dcs-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.25s ease;
}

.dcs-slider__dot.is-current {
	width: 26px;
	border-radius: 999px;
	background-color: #fff;
}

/* -------------------------------------------------------------------------
 * 4. Product sections
 * ---------------------------------------------------------------------- */

.dcs-products-wrap {
	position: relative;
}

/* Grid — overrides WooCommerce's float layout. */
.dcs-section .products.dcs-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcs-section .products.dcs-products::before,
.dcs-section .products.dcs-products::after {
	content: none;
	display: none;
}

.dcs-section .products.dcs-products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	position: relative;
	text-align: left;
}

/*
 * Column counts step up with the viewport. A card needs roughly 200px before
 * its title, price and button row stop overflowing, so four and five columns
 * wait for the width that gives them that — below it the grid falls back to
 * the auto-fill rule above rather than forcing the asked-for count.
 */
@media (min-width: 782px) {
	.dcs-section[data-columns="2"] .dcs-products--grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.dcs-section[data-columns="3"] .dcs-products--grid,
	.dcs-section[data-columns="4"] .dcs-products--grid,
	.dcs-section[data-columns="5"] .dcs-products--grid,
	.dcs-section[data-columns="6"] .dcs-products--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.dcs-section[data-columns="4"] .dcs-products--grid,
	.dcs-section[data-columns="5"] .dcs-products--grid,
	.dcs-section[data-columns="6"] .dcs-products--grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1180px) {
	.dcs-section[data-columns="5"] .dcs-products--grid,
	.dcs-section[data-columns="6"] .dcs-products--grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 1360px) {
	.dcs-section[data-columns="6"] .dcs-products--grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Carousel ---------------------------------------------------------------- */

.dcs-section .products.dcs-products--carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	overscroll-behavior-x: contain;
}

.dcs-section .products.dcs-products--carousel::-webkit-scrollbar {
	display: none;
}

.dcs-section .products.dcs-products--carousel li.product {
	flex: 0 0 auto;
	width: 70% !important;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.dcs-section .products.dcs-products--carousel li.product {
		width: 40% !important;
	}
}

@media (min-width: 900px) {
	.dcs-section[data-columns="3"] .dcs-products--carousel li.product {
		width: calc((100% - 2 * 2rem) / 3) !important;
	}

	.dcs-section[data-columns="4"] .dcs-products--carousel li.product {
		width: calc((100% - 3 * 2rem) / 4) !important;
	}

	.dcs-section[data-columns="5"] .dcs-products--carousel li.product {
		width: calc((100% - 4 * 2rem) / 5) !important;
	}

	.dcs-section[data-columns="6"] .dcs-products--carousel li.product {
		width: calc((100% - 5 * 2rem) / 6) !important;
	}
}

/* Only rendered in carousel mode, so no conditional display needed. */
.dcs-rail__arrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: var(--machis-bg, #fff);
	border: 1px solid var(--dcs-line);
	border-radius: 50%;
	color: var(--machis-fg, #0e0e10);
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.dcs-rail__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.dcs-rail__arrow--prev {
	left: -18px;
}

.dcs-rail__arrow--next {
	right: -18px;
}

.dcs-rail__arrow--prev .machis-icon {
	transform: rotate(90deg);
}

.dcs-rail__arrow--next .machis-icon {
	transform: rotate(-90deg);
}

@media (max-width: 900px) {
	.dcs-rail__arrow {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 4b. Product cards
 *
 * Written without relying on the `woocommerce` body class, which WordPress
 * only adds on shop/cart/product pages — not on the page this block sits on.
 * ---------------------------------------------------------------------- */

.dcs-section .dcs-products li.product {
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* No underlines anywhere in a card: the title, price and sale flash all sit
   inside WooCommerce's product link. */
.dcs-section .dcs-products li.product a,
.dcs-section .dcs-products li.product a:hover,
.dcs-section .dcs-products li.product a:focus,
.dcs-section .dcs-products li.product a:visited {
	text-decoration: none;
	box-shadow: none;
}

/*
 * The image/title/price link grows so the button lines up across the row.
 * Scoped to .woocommerce-LoopProduct-link on purpose: the add-to-cart button
 * is also a direct <a> child of the <li>, and if it grows too the spare height
 * is split between the two and the buttons stop aligning.
 */
.dcs-section .dcs-products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
}

/* WooCommerce appends an accessibility description after the button. */
.dcs-section .dcs-products li.product .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dcs-section .dcs-products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 0.85rem;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--machis-radius, 10px);
	background-color: var(--dcs-card);
	transition: opacity 0.25s ease;
}

.dcs-section .dcs-products li.product:hover img {
	opacity: 0.88;
}

.dcs-section .dcs-products li.product .woocommerce-loop-product__title,
.dcs-section .dcs-products li.product h2,
.dcs-section .dcs-products li.product h3 {
	margin: 0 0 0.35rem;
	padding: 0;
	font-family: var(--machis-font, inherit);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--dcs-fg);
}

.dcs-section .dcs-products li.product .star-rating {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	color: var(--dcs-accent);
}

/* margin-top:auto aligns prices along a common baseline in each row. */
.dcs-section .dcs-products li.product .price {
	display: block;
	margin: auto 0 0;
	padding-top: 0.35rem;
	color: var(--dcs-fg);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.dcs-section .dcs-products li.product .price del {
	margin-inline-end: 0.4rem;
	opacity: 0.5;
	font-weight: 400;
}

.dcs-section .dcs-products li.product .price ins {
	text-decoration: none;
	color: var(--dcs-accent);
}

/* Sale flash ------------------------------------------------------------- */

.dcs-section .dcs-products li.product .onsale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.28rem 0.65rem;
	background-color: var(--dcs-accent);
	border-radius: 999px;
	color: var(--dcs-on-accent);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Add to cart ------------------------------------------------------------ */

/*
 * Full width, fixed height. WooCommerce labels each button differently
 * ("Add to cart", "Select options", "Read more") so sizing to the text gives a
 * ragged row; stretching them makes every card identical.
 */
.dcs-section .dcs-products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 0 0 auto;
	width: 100%;
	min-height: 42px;
	margin: 0.85rem 0 0;
	padding: 0.6rem 1rem;
	background-color: var(--dcs-fg);
	border: 1px solid var(--dcs-fg);
	border-radius: var(--machis-radius-sm, 6px);
	color: var(--dcs-bg);
	font-family: var(--machis-font, inherit);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dcs-section .dcs-products li.product .button:hover,
.dcs-section .dcs-products li.product .button:focus,
.dcs-section .dcs-products li.product .added_to_cart:hover {
	background-color: var(--dcs-accent);
	border-color: var(--dcs-accent);
	color: var(--dcs-on-accent);
}

/* The "View cart" link that appears after an AJAX add — a link, not a button. */
.dcs-section .dcs-products li.product .added_to_cart {
	display: block;
	margin: 0.5rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--dcs-muted);
	font-size: 0.82rem;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dark sections ---------------------------------------------------------- */

.dcs-theme-dark .dcs-products li.product .woocommerce-loop-product__title,
.dcs-theme-dark .dcs-products li.product h2,
.dcs-theme-dark .dcs-products li.product h3,
.dcs-theme-dark .dcs-products li.product .price,
.dcs-theme-dark .dcs-products li.product a {
	color: var(--dcs-fg);
}

.dcs-theme-dark .dcs-products li.product .price del {
	opacity: 0.55;
}

.dcs-theme-dark .dcs-products li.product .button {
	background-color: var(--dcs-fg);
	border-color: var(--dcs-fg);
	color: var(--machis-fg, #0e0e10);
}

/* -------------------------------------------------------------------------
 * 5. Category tiles
 * ---------------------------------------------------------------------- */

.dcs-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.dcs-section[data-columns="4"] .dcs-cats {
		grid-template-columns: repeat(4, 1fr);
	}

	.dcs-section[data-columns="5"] .dcs-cats {
		grid-template-columns: repeat(5, 1fr);
	}

	.dcs-section[data-columns="6"] .dcs-cats {
		grid-template-columns: repeat(6, 1fr);
	}

	.dcs-section[data-columns="7"] .dcs-cats {
		grid-template-columns: repeat(7, 1fr);
	}

	.dcs-section[data-columns="8"] .dcs-cats {
		grid-template-columns: repeat(8, 1fr);
	}
}

.dcs-cats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.dcs-cats__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 104px;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--dcs-card);
	border: 1px solid var(--dcs-line);
	transition: transform 0.25s var(--machis-ease, ease), border-color 0.2s ease, box-shadow 0.25s ease;
}

.dcs-cats--circle .dcs-cats__media {
	border-radius: 50%;
}

.dcs-cats--square .dcs-cats__media {
	border-radius: var(--machis-radius, 10px);
}

.dcs-cats__link:hover .dcs-cats__media,
.dcs-cats__link:focus .dcs-cats__media {
	transform: translateY(-3px);
	border-color: var(--dcs-accent);
	box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.55);
}

.dcs-cats__media img,
.dcs-cats__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dcs-cats__initial {
	font-family: var(--machis-font-heading, inherit);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--dcs-muted);
}

.dcs-cats__name {
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.3;
}

.dcs-cats__count {
	color: var(--dcs-muted);
	font-size: 0.78rem;
}

/* -------------------------------------------------------------------------
 * 6. How to order steps
 * ---------------------------------------------------------------------- */

.dcs-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dcs-step;
}

@media (min-width: 782px) {
	.dcs-section[data-columns="2"] .dcs-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.dcs-section[data-columns="3"] .dcs-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.dcs-section[data-columns="4"] .dcs-steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.dcs-section[data-columns="5"] .dcs-steps {
		grid-template-columns: repeat(5, 1fr);
	}
}

.dcs-steps__item {
	position: relative;
	padding-top: 1.25rem;
	border-top: 2px solid var(--dcs-fg);
}

.dcs-steps__num {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--dcs-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.dcs-steps__body > * {
	margin-block: 0;
}

.dcs-steps__body :where(h2, h3, h4) {
	margin: 0 0 0.4rem;
	font-family: var(--machis-font, inherit);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.dcs-steps__body :where(p) {
	margin: 0;
	color: var(--dcs-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * 7. FAQ
 * ---------------------------------------------------------------------- */

.dcs-faq--split {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.dcs-faq--split {
		grid-template-columns: 0.62fr 1fr;
		align-items: start;
	}
}

.dcs-faq--split .dcs-section__head {
	margin-bottom: 0;
	display: block;
}

.dcs-faq__list > .wp-block-details {
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--dcs-line);
}

.dcs-faq__list > .wp-block-details:first-child {
	border-top: 1px solid var(--dcs-line);
}

.dcs-faq__list summary {
	cursor: pointer;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.4;
	color: inherit;
	list-style-position: outside;
}

.dcs-faq__list summary:hover {
	color: var(--dcs-accent);
}

.dcs-faq__list .wp-block-details > :not(summary) {
	margin-top: 0.75rem;
	color: var(--dcs-muted);
	font-size: 0.94rem;
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * 8. Editor-only helpers
 * ---------------------------------------------------------------------- */

.dcs-editor-hint {
	margin: 0 0 0.75rem;
	padding: 0.4rem 0.7rem;
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	color: #555;
	font-size: 0.78rem;
	font-style: italic;
}

.dcs-editor-slider .dcs-editor-hint,
.dcs-editor-steps .dcs-editor-hint,
.dcs-editor-faq .dcs-editor-hint {
	max-width: 100%;
}

.dcs-editor-preview {
	min-height: 60px;
}

/* -------------------------------------------------------------------------
 * 9. Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dcs-slider__track,
	.dcs-slider__dot,
	.dcs-cats__media,
	.dcs-rail__arrow,
	.dcs-section__more {
		transition-duration: 0.01ms !important;
	}

	.dcs-section .products.dcs-products--carousel {
		scroll-behavior: auto;
	}
}
/* Finished empty states for visitors; editor previews retain their skeletons. */
.dcs-empty {
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--dcs-line, #e8e8ee);
	border-radius: 16px;
	background: var(--dcs-card, #f9f9fc);
	text-align: center;
}
.dcs-empty p { margin: 0.5rem auto; max-width: 48ch; }
.dcs-empty__title { font-size: 1.25rem; font-weight: 700; }
.dcs-empty__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 0.5rem; font-weight: 600; }

/* Category artwork needs no downloads; custom WooCommerce photos replace it. */
.dcs-cats__art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #f4edff;
	color: #6436aa;
}
.dcs-cats__art .machis-icon { width: 42%; height: 42%; stroke-width: 1.25; }
.dcs-cats__art--shirt, .dcs-cats__art--palette { background: #fff0f6; color: #a42766; }
.dcs-cats__art--printer, .dcs-cats__art--star { background: #e7f7fa; color: #16677b; }
.dcs-cats__art--layers { background: #fff5df; color: #886116; }
.dcs-cats__art--sign, .dcs-cats__art--banner { background: #eaf5ee; color: #286b49; }