/*
 * etchWoo — core component styles.
 *
 * Native CSS nesting (no Sass/Less). Every component is scoped under a single
 * root class so nothing leaks globally. Configurable custom properties are
 * exposed at the top of each block, mirroring Etch's native component pattern.
 *
 * Colours, spacing, radius and type scale pull from AutomaticCSS variables
 * (--primary, --accent, --danger, --base-*, --white, --space-*, --radius,
 * --text-*, --border-dark). AutomaticCSS is a hard dependency — these vars are
 * referenced without fallbacks. The one exception is --etchwoo-admin-bar-height,
 * which defaults to 0 so the drawer sits flush when no admin bar is present.
 */

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Visual styling (colour, padding, radius, hover) comes entirely from the
   design-system button classes on the markup: .btn--primary (add to cart +
   checkout), .btn--success (buy now), .btn--primary-light (view cart) — used
   without the base .btn class. etchWoo contributes only width + the
   busy/spinner behaviour (add-to-cart overrides width to sit beside qty). */
.etchwoo-button {
	width: 100%;
	position: relative;

	&[aria-busy="true"] .etchwoo-button__label,
	&[aria-busy="true"] .etchwoo-button__icon {
		visibility: hidden;
	}

	&[aria-busy="true"] .etchwoo-button__spinner {
		display: block;
	}

	/* Buy-now bolt: sized to the label, never shrinks. */
	& .etchwoo-button__icon {
		flex-shrink: 0;
		width: auto;
		height: 1.25em;
	}

	& .etchwoo-button__spinner {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1em;
		height: 1em;
		margin: -0.5em 0 0 -0.5em;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: etchwoo-spin 0.6s linear infinite;
	}
}

.etchwoo-button__label {
	position: relative;
}

@keyframes etchwoo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Add-to-cart / buy-now form ─────────────────────────────────────── */
.etchwoo-add-to-cart,
.etchwoo-buy-now {
	--etchwoo-form-gap: var(--space-s);

	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--etchwoo-form-gap);
}

/* Add-to-cart: keep the quantity input and button on one row (any variation
   selects still take their own row above via flex-basis: 100%). The button
   grows into the remaining space instead of dropping full-width below. */
.etchwoo-add-to-cart {
	& .etchwoo-quantity {
		flex: 0 0 auto;
		/* Match the add-to-cart button's height (whatever ACSS makes it). */
		align-self: stretch;
	}

	& .etchwoo-button {
		flex: 1 1 auto;
		width: auto;
	}
}

/* Buy-now button spans the full form width, overriding the ACSS button class
   default (which otherwise wins over the base .etchwoo-button width). */
.etchwoo-buy-now .etchwoo-button {
	width: 100%;
}

/* Stepper: input on the left (full height) with + over − stacked on the right.
   Flexbox (not grid) so the two buttons reliably split the input's height. */
.etchwoo-quantity {
	display: inline-flex;
	align-items: stretch;
	border: var(--border-dark);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--neutral-ultra-light);

	& .etchwoo-quantity__input {
		width: 3.5rem;
		min-height: 42px;
		/* No vertical padding: the stepper stretches to the button height and
		   the number stays vertically centered on its own. */
		padding-block: 0;
		padding-inline: .5rem;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent;
		text-align: center;
		font: inherit;
		/* Hide the native spinner; our buttons replace it. */
		-moz-appearance: textfield;
		appearance: textfield;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	& .etchwoo-quantity__btns {
		display: flex;
		flex-direction: column;
		flex: none;
		width: 2rem;
		/* min-width:0 stops the column being widened to the button's
		   min-content size (ACSS gives buttons a min-width). */
		min-width: 0;
		border-left: var(--border-dark);
	}

	& .etchwoo-quantity__btn {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 0;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		line-height: 0;

		& svg {
			width: 16px;
			height: 16px;
			flex-shrink: 0;
		}

		&:hover {
			background: var(--neutral-light);
		}
	}
}

/* Rounded outer corners to match the stepper; − also gets the top separator. */
.etchwoo-quantity__btn--plus {
	/* !important so this wins over the base `.etchwoo-quantity__btn { border: 0 }`
	   (2 classes) — it's the single separator between + and −. */
	border-bottom: var(--border) !important;
	border-radius: 0 var(--radius) 0 0 !important;
}

.etchwoo-quantity__btn--minus {
	border-radius: 0 0 var(--radius) 0 !important;
}

/* Horizontal variant (− input +) used in the drawer line items. */
.etchwoo-quantity--row {
	display: inline-flex;
	align-items: stretch;

	& .etchwoo-quantity__input {
		width: 2.5rem;
		padding-block: 0.25rem;
	}

	& .etchwoo-quantity__btn {
		width: 2rem;
		border-left: 0;
	}

	& .etchwoo-quantity__btn--minus {
		border-top: 0;
		border-right: var(--border-dark);
	}

	& .etchwoo-quantity__btn--plus {
		border-left: var(--border-dark);
	}
}

/* ── Variations ─────────────────────────────────────────────────────── */
.etchwoo-variations {
	--etchwoo-variations-gap: var(--space-xs);

	display: flex;
	flex-direction: column;
	gap: var(--etchwoo-variations-gap);
	width: 100%;

	& .etchwoo-variations__row {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	& .etchwoo-variations__label {
		font-size: var(--text-xs);
		font-weight: 500;
	}

	& .etchwoo-variations__select {
		padding: var(--space-xs);
		border: var(--border-dark);
		border-radius: var(--radius);
		font: inherit;
	}
}

/* Standalone (native nesting can't concatenate `&--invalid`). */
.etchwoo-variations__select--invalid {
	border-color: var(--danger);
}

/* ── Header cart button + badge ─────────────────────────────────────── */
/* Icon-only trigger (accessible name via aria-label); the live count sits as a
   badge over the icon's top-right corner. */
.etchwoo-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	line-height: 0;

	& .etchwoo-cart-button__icon {
		display: block;
	}

	& .etchwoo-cart-button__badge {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(35%, -35%);
		/* Own stacking context so the ::before circle sits behind the digit. */
		z-index: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.1rem;
		min-height: 1.1rem;
		padding: 0.15rem;
		color: #fff;
		font-size: var(--text-xs);
		font-weight: 700;
		line-height: 1;

		/* Round background lives on a pseudo-element so the digit is centred by
		   flex on its own line box, independent of the bubble — the number no
		   longer reads slightly high/low, and 1- vs 2-digit counts both stay
		   centred as the box grows around the text. */
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			/* Optical nudge: lift the circle 2px so it reads centred on the
			   icon corner (digits sit high in their line box). */
			top: -2px;
			z-index: -1;
			border-radius: 999px;
			background: var(--primary);
		}

		/* Our display:inline-flex would otherwise beat the hidden attribute's
		   UA display:none, so the "0" bubble stayed visible on an empty cart. */
		&[hidden] {
			display: none;
		}
	}
}

/* ── Drawer / mini-cart ─────────────────────────────────────────────── */
.etchwoo-drawer {
	--etchwoo-drawer-width: 420px;
	--etchwoo-drawer-rail-width: 180px;
	--etchwoo-drawer-backdrop: rgba(0, 0, 0, 0.4);
	--etchwoo-drawer-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
	--etchwoo-drawer-z: 9999;
	/* Offset below the WP admin bar when showing (see body.admin-bar rules). */
	--etchwoo-admin-bar-height: 0px;

	position: fixed;
	inset: 0;
	z-index: var(--etchwoo-drawer-z);

	& .etchwoo-drawer__backdrop {
		position: absolute;
		inset: 0;
		background: var(--etchwoo-drawer-backdrop);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	/* Rail + panel slide in together, anchored to the right edge. */
	& .etchwoo-drawer__layout {
		position: absolute;
		top: var(--etchwoo-admin-bar-height);
		right: 0;
		height: calc(100% - var(--etchwoo-admin-bar-height));
		max-width: 100%;
		display: flex;
		align-items: stretch;
		transform: translateX(100%);
		transition: transform 0.25s ease;
	}

	&.is-open {
		& .etchwoo-drawer__backdrop {
			opacity: 1;
		}
		& .etchwoo-drawer__layout {
			transform: translateX(0);
		}
	}

	/* ── Bestsellers rail (desktop only; revealed in the media query below) ── */
	& .etchwoo-drawer__bestsellers {
		display: none;
		width: var(--etchwoo-drawer-rail-width);
		background: var(--neutral-ultra-light);
		overflow-y: auto;
		padding: var(--space-s);
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__bestsellers-title {
		margin: 0 0 var(--space-xs);
		font-size: var(--text-s);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__bestsellers-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	& .etchwoo-drawer__bestseller-link {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		text-decoration: none;
		color: inherit;
	}

	& .etchwoo-drawer__bestseller-img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--radius);
	}

	& .etchwoo-drawer__bestseller-name {
		font-size: var(--text-xs);
		font-weight: 500;
		line-height: 1.4;
		margin-top: .25rem;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__bestseller-price {
		font-size: var(--text-xs);
		line-height: 1;
		color: var(--text-dark-muted);

		/* get_price_html() emits <del> regular + <ins> sale when on sale;
		   mirror the drawer line-item treatment. */
		& del {
			margin-right: 0.3rem;
			color: var(--text-dark-muted);
		}

		& ins {
			text-decoration: none;
			font-weight: 500;
			color: var(--text-dark-muted);
		}
	}

	/* ── Main panel ─────────────────────────────────────────────────────── */
	& .etchwoo-drawer__panel {
		width: min(var(--etchwoo-drawer-width), 100vw);
		max-width: 100vw;
		height: 100%;
		background: #fff;
		box-shadow: var(--etchwoo-drawer-shadow);
		display: flex;
		flex-direction: column;
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-s) var(--space-m);
		border-bottom: var(--border-dark);
	}

	& .etchwoo-drawer__title {
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
		font-size: var(--text-m);
		font-weight: 500;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__count {
		position: relative;
		/* Own stacking context so the ::before circle sits behind the digit. */
		z-index: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.25rem;
		min-height: 1.25rem;
		padding: 0.15rem 0.35rem;
		color: #fff;
		font-size: var(--text-xs);
		font-weight: 700;
		line-height: 1;

		/* Round background on a pseudo-element so the digit centres by flex,
		   independent of the bubble box (matches the header badge). */
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			border-radius: 999px;
			background: var(--primary);
		}
	}

	& .etchwoo-drawer__close {
		display: inline-flex;
		padding: 0;
		background: none;
		border: none;
		color: inherit;
		line-height: 0;
		cursor: pointer;
	}

	/* ── Free-shipping bar ──────────────────────────────────────────────── */
	& .etchwoo-drawer__shipping {
		padding: var(--space-xs) var(--space-m);
		border-bottom: var(--border-dark);
	}

	& .etchwoo-drawer__shipping-text {
		margin: 0 0 0.4rem;
		text-align: center;
		font-size: var(--text-xs);
		font-weight: 500;
	}

	& .etchwoo-drawer__shipping-track {
		height: 4px;
		border-radius: 2px;
		background: var(--neutral-light);
		overflow: hidden;
	}

	& .etchwoo-drawer__shipping-bar {
		display: block;
		height: 100%;
		width: 0;
		background: var(--black);
		transition: width 0.3s ease, background 0.3s ease;
	}

	/* Turns primary only once free shipping is unlocked. */
	& .etchwoo-drawer__shipping-bar.etchwoo-drawer__shipping-bar--complete {
		background: var(--primary);
	}

	& .etchwoo-drawer__body {
		flex: 1;
		overflow-y: auto;
		padding: var(--space-s) var(--space-m);
	}

	& .etchwoo-drawer__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.35rem;
		padding: var(--space-l) var(--space-s) var(--space-m);
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__empty-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 5.5rem;
		height: 5.5rem;
		margin-bottom: var(--space-xs);
		border-radius: 999px;
		background: var(--neutral-ultra-light);
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__empty-title {
		margin: 0;
		font-size: var(--text-m);
		font-weight: 500;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__empty-text {
		margin: 0;
		font-size: var(--text-s);
		color: var(--text-dark-muted);
	}

	/* ── Empty-drawer recommendations ───────────────────────────────────── */
	& .etchwoo-drawer__empty-products {
		margin-top: var(--space-m);
		padding-top: var(--space-m);
		border-top: var(--border-dark);
	}

	& .etchwoo-drawer__empty-products-title {
		margin: 0 0 var(--space-s);
		font-size: var(--text-s);
		font-weight: 500;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__empty-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-m) var(--space-s);
	}

	& .etchwoo-drawer__empty-card {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		text-decoration: none;
		color: inherit;
	}

	& .etchwoo-drawer__empty-media {
		position: relative;
		display: block;
		aspect-ratio: 1;
		margin-bottom: 0.4rem;
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--neutral-ultra-light);
	}

	& .etchwoo-drawer__empty-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	& .etchwoo-drawer__empty-badge {
		position: absolute;
		top: 0.4rem;
		right: 0.4rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.3rem;
		height: 2.3rem;
		padding: 0.2rem;
		border-radius: 999px;
		font-size: var(--text-xs);
		font-weight: 700;
		line-height: 1;
		color: #fff;
	}

	& .etchwoo-drawer__empty-badge--sale {
		background: var(--danger);
	}

	& .etchwoo-drawer__empty-badge--new {
		background: var(--black);
	}

	& .etchwoo-drawer__empty-name {
		font-size: var(--text-s);
		font-weight: 500;
		line-height: 1.3;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__empty-cat {
		font-size: var(--text-xs);
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__empty-price {
		margin-top: 0.15rem;
		font-size: var(--text-s);
		font-weight: 500;
		color: var(--text-dark);

		/* WooCommerce get_price_html() emits <del> regular + <ins> sale. */
		& del {
			margin-left: 0.3rem;
			font-weight: 400;
			color: var(--text-dark-muted);
		}

		& ins {
			text-decoration: none;
		}
	}

	& .etchwoo-drawer__empty-all {
		display: inline-block;
		margin-top: var(--space-m);
		font-size: var(--text-s);
		font-weight: 500;
		color: var(--text-dark);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	/* ── Line item ──────────────────────────────────────────────────────── */
	& .etchwoo-drawer__item {
		position: relative;
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: var(--space-s);
		align-items: start;
		padding: var(--space-xs) 0;
		border-bottom: var(--border-dark);
	}

	& .etchwoo-drawer__thumb {
		width: 72px;
		height: 72px;
		object-fit: cover;
		border-radius: var(--radius);
	}

	& .etchwoo-drawer__item-info {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		padding-right: 1.5rem;
	}

	& .etchwoo-drawer__item-name {
		font-weight: 500;
		font-size: var(--text-s);
		line-height: 1.3;
		color: var(--text-dark);
		text-decoration: none;

		/* Underline on hover only when it's an actual link. */
		&:is(a):hover {
			text-decoration: underline;
		}
	}

	& .etchwoo-drawer__item-attrs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.2rem 0.6rem;
		font-size: var(--text-xs);
		color: var(--text-dark-muted);
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	/* WooCommerce item meta below the title — "name: value", free-text. */
	& .etchwoo-drawer__item-meta {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		margin-top: 0.15rem;
		font-size: var(--text-xs);
		line-height: 1.35;
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__item-meta-name {
		font-weight: 400;
	}

	& .etchwoo-drawer__item-meta-value {
		font-weight: 700;
	}

	& .etchwoo-drawer__item-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		margin-top: 0.25rem;
	}

	& .etchwoo-drawer__qty {
		width: 3.1rem;
		padding: 0.2rem 0.35rem;
		line-height: 1;
		border: var(--border-dark);
		border-radius: var(--radius);
		font: inherit;
		font-size: var(--text-s);
	}

	/* Read-only quantity shown when the qty input is disabled in settings. */
	& .etchwoo-drawer__qty-static {
		font-size: var(--text-s);
		color: var(--text-dark-muted);
		white-space: nowrap;
	}

	& .etchwoo-drawer__item-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-weight: 500;
		font-size: var(--text-s);
		white-space: nowrap;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__item-was {
		color: var(--text-dark-muted);
		font-size: var(--text-xs);
		line-height: 1;
		text-decoration: line-through;
	}

	& .etchwoo-drawer__remove {
		position: absolute;
		top: .5rem;
		right: 0;
		display: inline-flex;
		padding: 0.2rem;
		background: none;
		border: none;
		color: var(--text-dark-muted);
		line-height: 0;
		cursor: pointer;

		&:hover {
			color: var(--danger);
		}
	}

	/* ── Cross-sells ────────────────────────────────────────────────────── */
	& .etchwoo-drawer__crosssells {
		padding: var(--space-xs) var(--space-m);
		border-top: var(--border-dark);
	}

	& .etchwoo-drawer__crosssells-title {
		margin: 0 0 var(--space-s);
		font-size: var(--text-s);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--text-dark);
	}

	& .etchwoo-drawer__crosssells-track {
		display: flex;
		gap: var(--space-xs);
		overflow-x: auto;
		/* proximity (not mandatory) so wheel/drag scrolling isn't snapped
		   back mid-gesture; it still settles near a card when you stop. */
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
	}

	& .etchwoo-drawer__xsell {
		flex: 0 0 45%;
		min-width: 45%;
		max-width: 45%;
		scroll-snap-align: start;
		display: grid;
		grid-template-columns: 60px 1fr;
		gap: .5rem;
		align-items: center;
	}

	& .etchwoo-drawer__xsell-img {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: var(--radius);
	}

	& .etchwoo-drawer__xsell-info {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
	}

	& .etchwoo-drawer__xsell-name {
		font-size: var(--text-xs);
		font-weight: 500;
		line-height: 1.3;
		color: var(--text-dark);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	& .etchwoo-drawer__xsell-price {
		font-size: var(--text-xs);
		line-height: 1;
		color: var(--text-dark-muted);
	}

	& .etchwoo-drawer__xsell-btn {
		align-self: flex-start;
		margin-top: 0.15rem;
		padding: 0;
		background: none;
		border: none;
		font: inherit;
		font-size: var(--text-xs);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		text-decoration: underline;
		color: inherit;
		cursor: pointer;
	}

	/* ── Footer ─────────────────────────────────────────────────────────── */
	& .etchwoo-drawer__footer {
		padding: var(--space-s) var(--space-m);
		border-top: var(--border-dark);
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	& .etchwoo-drawer__subtotal {
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: var(--text-m);
		color: var(--text-dark);
	}

	& .etchwoo-drawer__coupon {
		display: flex;
		flex-direction: column;
	}

	& .etchwoo-drawer__coupon-toggle {
		align-self: flex-start;
		padding: 0;
		background: none;
		border: none;
		font: inherit;
		font-size: var(--text-xs);
		line-height: 1;
		text-decoration: underline;
		color: var(--text-dark-muted);
		cursor: pointer;
	}

	/* Mobile-first: stacked; switches to a row on wider viewports below. */
	& .etchwoo-drawer__coupon-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-top: var(--space-xs);
	}

	& .etchwoo-drawer__coupon-input {
		flex: 1;
		min-width: 50%;
		padding: 0 var(--space-xs);
		line-height: 1 !important;
		border: var(--border-dark);
		border-radius: var(--radius);
		font: inherit;
	}

	& .etchwoo-drawer__actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);

		/* Full-width buttons, regardless of the ACSS button class defaults. */
		& .etchwoo-button {
			width: 100%;
		}
	}
}

/* The drawer toggles pieces (coupon form, shipping bar, cross-sells, footer)
   via the `hidden` attribute; our display rules would otherwise win over the UA
   `[hidden] { display: none }`, so make hidden authoritative inside the drawer. */
.etchwoo-drawer [hidden] {
	display: none !important;
}

/* Once the panel has room, the coupon input + Apply sit on one row. */
@media screen and (min-width: 480px) {
	.etchwoo-drawer .etchwoo-drawer__coupon-form {
		flex-direction: row;
	}
}

/* Desktop: reveal the bestsellers rail to the left of the panel. */
@media screen and (min-width: 1024px) {
	.etchwoo-drawer .etchwoo-drawer__bestsellers {
		display: block;
	}
}

/* When the WP admin bar is showing, push the drawer panel below it so its
   header/close button isn't hidden. Mobile-first: the admin bar is 46px on
   small screens, dropping to 32px from 783px up (mirrors WP core's breakpoint). */
body.admin-bar .etchwoo-drawer {
	--etchwoo-admin-bar-height: 46px;
}

@media screen and (min-width: 783px) {
	body.admin-bar .etchwoo-drawer {
		--etchwoo-admin-bar-height: 32px;
	}
}

/* ── Product gallery (mosaic + bigger-picture) ──────────────────────── */
/* Responsive bento grid; layout-N chosen by visible-image count in PHP.
   Mobile-first: base shows a single square tile + a compact "ver todas"
   button; the bento layouts kick in from 481px up. */
.etchwoo-gallery {
	--etchwoo-gallery-radius: var(--radius);

	position: relative;
	width: 100%;
	margin: 0;

	& .etchwoo-gallery__grid {
		display: grid;
		gap: var(--space-xs);
		width: 100%;
		grid-template-columns: 1fr;
	}

	& .etchwoo-gallery__item {
		position: relative;
		display: none;
		overflow: hidden;
		border-radius: var(--etchwoo-gallery-radius);
		cursor: pointer;
		line-height: 0;
		aspect-ratio: 1;
	}

	/* Mobile: only the first tile. */
	& .etchwoo-gallery__item:first-child {
		display: block;
	}

	& .etchwoo-gallery__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.3s ease;
	}

	& .etchwoo-gallery__item:hover .etchwoo-gallery__image {
		transform: scale(1.01);
	}

	& .etchwoo-gallery__hidden {
		display: none;
	}
}

/* Show-more buttons (mobile shown by default; desktop swapped in below). */
.etchwoo-gallery__more {
	position: absolute;
	right: var(--space-xs);
	bottom: var(--space-xs);
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	background: var(--neutral);
	border: 2px solid var(--neutral);
	border-radius: var(--radius-m);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text-light-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	z-index: 2;
}

.etchwoo-gallery__more--mobile {
	display: flex;
}

.etchwoo-gallery__more:hover {
	background: var(--neutral-hover);
	border-color: var(--neutral-hover);
	color: var(--white);
}

.etchwoo-gallery__more-icon {
	display: flex;
}

/* From 481px: real bento layouts + the desktop show-more button. */
@media (min-width: 481px) {
	.etchwoo-gallery .etchwoo-gallery__item {
		display: block;
	}

	.etchwoo-gallery__more {
		right: var(--space-s);
		bottom: var(--space-s);
		padding: 0.25rem 1.5rem;
		font-size: var(--text-s);
		display: flex;
	}

	.etchwoo-gallery__more--mobile {
		display: none;
	}

	/* Layout 1: single */
	.etchwoo-gallery--layout-1 .etchwoo-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Layout 2: two stacked */
	.etchwoo-gallery--layout-2 .etchwoo-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Layout 3: one wide + two below */
	.etchwoo-gallery--layout-3 .etchwoo-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.etchwoo-gallery--layout-3 .etchwoo-gallery__item--main {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	.etchwoo-gallery--layout-3 .etchwoo-gallery__item--side:nth-child(2) {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.etchwoo-gallery--layout-3 .etchwoo-gallery__item--side:nth-child(3) {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}

	/* Layout 4: one wide + three thumbs */
	.etchwoo-gallery--layout-4 .etchwoo-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.etchwoo-gallery--layout-4 .etchwoo-gallery__item--main {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
	}
	.etchwoo-gallery--layout-4 .etchwoo-gallery__item--thumb {
		grid-row: 2 / 3;
	}
	.etchwoo-gallery--layout-4 .etchwoo-gallery__item--thumb:nth-child(2) { grid-column: 1 / 2; }
	.etchwoo-gallery--layout-4 .etchwoo-gallery__item--thumb:nth-child(3) { grid-column: 2 / 3; }
	.etchwoo-gallery--layout-4 .etchwoo-gallery__item--thumb:nth-child(4) { grid-column: 3 / 4; }

	/* Layout 5: 2×2 lead tile + four 1×1 on the right (4 cols, all square, no
	   gaps). The four trailing tiles auto-flow into columns 3-4, rows 1-2. */
	.etchwoo-gallery--layout-5 .etchwoo-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.etchwoo-gallery--layout-5 .etchwoo-gallery__item--main {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	/* Layout 6: 3×3 — 2×2 lead tile + five 1×1 filling the rest. */
	.etchwoo-gallery--layout-6 .etchwoo-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--main {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--bottom:nth-child(2) {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--bottom:nth-child(3) {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--side-right:nth-child(4) {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--side-right:nth-child(5) {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}
	.etchwoo-gallery--layout-6 .etchwoo-gallery__item--side-right:nth-child(6) {
		grid-column: 3 / 4;
		grid-row: 3 / 4;
	}
}

/* Thumbnail strip injected into the bigger-picture lightbox (gallery.js). */
.etchwoo-bp-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	gap: var(--space-xs);
	justify-content: center;
	padding: var(--space-s);
	overflow-x: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);

	& .etchwoo-bp-thumbs__item {
		flex: 0 0 auto;
		width: 60px;
		height: 60px;
		margin: 0;
		padding: 0;
		border: 2px solid transparent;
		border-radius: var(--radius);
		overflow: hidden;
		background: none;
		cursor: pointer;
		opacity: 0.55;
		transition: opacity 0.15s ease, border-color 0.15s ease;
	}

	& .etchwoo-bp-thumbs__item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	& .etchwoo-bp-thumbs__item:hover {
		opacity: 1;
	}

	& .etchwoo-bp-thumbs__item.is-active {
		opacity: 1;
		border-color: var(--white);
	}
}

/* The drawer deliberately does NOT lock page scroll. Any overflow toggle on
   <html>/<body> adds or removes the scrollbar and reflows the layout; since the
   drawer is a fixed overlay, letting the page scroll behind it is the lesser
   evil (no layout shift on open/close). The .etchwoo-drawer-open class stays on
   <html> as a state hook. bigger-picture still handles its own lock for the
   lightbox. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Respect reduced-motion: state changes become instant. The button spinner is
   deliberately kept — it's a loading indicator, not decoration. */
@media (prefers-reduced-motion: reduce) {
	.etchwoo-drawer .etchwoo-drawer__backdrop,
	.etchwoo-drawer .etchwoo-drawer__panel,
	.etchwoo-gallery .etchwoo-gallery__image,
	.etchwoo-gallery__more,
	.etchwoo-bp-thumbs .etchwoo-bp-thumbs__item {
		transition: none;
	}
}