/**
 * components.css — Della Boutique
 *
 * Everything that is reused across more than one template: buttons, section
 * headings, badges, swatches, quantity steppers, stars, search form, drawers,
 * modals, toasts, carousels and the trust/shipping strips.
 */

/* =========================================================================
   1. Buttons
   ========================================================================= */

/* Single-class selector on purpose: any element-qualified variant (a.della-btn)
   would outrank the --light / --ghost modifiers below.

   .della-prompt__action rides along here rather than restating the button:
   the prompt row's action IS a ghost button, and listing it in the same rule
   blocks is the only way CSS can say "extend" without a build step. Section 18
   then adds the few things that are specific to sitting inside a prompt. */
.della-btn,
.della-prompt__action,
.woocommerce-info .showlogin,
.woocommerce-info .showcoupon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 46px;
	padding: 12px 30px;
	border: 1px solid var(--della-accent);
	border-radius: var(--della-radius);
	background: var(--della-accent);
	color: var(--della-accent-contrast);
	font-family: var(--della-font-body);
	font-size: var(--della-fs-btn);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--della-tracking);
	text-transform: var(--della-button-transform);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--della-dur) var(--della-ease),
		border-color var(--della-dur) var(--della-ease),
		background-color var(--della-dur) var(--della-ease);
}

/*
 * The sweep. A panel wipes upward from the far corner rather than the whole
 * button changing colour at once — the diagonal origin is what reads as
 * "considered" instead of "bootstrap".
 */
.della-btn::before,
.della-prompt__action::before,
.woocommerce-info .showlogin::before,
.woocommerce-info .showcoupon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--della-accent-hover);
	transform: scaleY(0);
	transform-origin: 100% 100%;
	transition: transform calc(var(--della-dur) * 1.25) var(--della-ease-out);
}

.della-btn:hover::before,
.della-btn:focus-visible::before,
.della-prompt__action:hover::before,
.della-prompt__action:focus-visible::before,
.woocommerce-info .showlogin:hover::before,
.woocommerce-info .showlogin:focus-visible::before,
.woocommerce-info .showcoupon:hover::before,
.woocommerce-info .showcoupon:focus-visible::before {
	transform: scaleY(1);
}

.della-btn:hover,
.della-btn:focus-visible {
	color: var(--della-accent-contrast);
	border-color: var(--della-accent-hover);
}

.della-btn .della-icon {
	flex: none;
}

/*
 * Primary IS the base button — the modifier exists so the PHP can name it
 * explicitly. Declared rather than left implicit so a future change to the base
 * cannot silently redefine what "primary" means.
 */
.della-btn--primary {
	background: var(--della-accent);
	border-color: var(--della-accent);
	color: var(--della-accent-contrast);
}

/* --- Ghost: the default for anything secondary -------------------------- */

/*
 * A prompt action with no explicit .della-btn--* modifier defaults to ghost;
 * `:not()` keeps this out of the way of `della_prompt( …, style => 'primary' )`,
 * which prints .della-prompt__action.della-btn.della-btn--primary and must
 * stay primary no matter where these blocks sit in the file.
 */
.della-btn--ghost,
.della-prompt__action:not([class*="della-btn--"]),
.woocommerce-info .showlogin,
.woocommerce-info .showcoupon {
	background: transparent;
	color: var(--della-heading);
	border-color: var(--della-heading);
}

.della-btn--ghost::before,
.della-prompt__action:not([class*="della-btn--"])::before,
.woocommerce-info .showlogin::before,
.woocommerce-info .showcoupon::before {
	background: var(--della-accent);
}

.della-btn--ghost:hover,
.della-btn--ghost:focus-visible,
.della-prompt__action:not([class*="della-btn--"]):hover,
.della-prompt__action:not([class*="della-btn--"]):focus-visible,
.woocommerce-info .showlogin:hover,
.woocommerce-info .showlogin:focus-visible,
.woocommerce-info .showcoupon:hover,
.woocommerce-info .showcoupon:focus-visible {
	color: var(--della-accent-contrast);
	border-color: var(--della-accent);
}

/* --- Light: for use on photography and dark bands ----------------------- */

.della-btn--light {
	background: var(--della-bg);
	color: var(--della-heading);
	border-color: var(--della-bg);
}

.della-btn--light::before {
	background: var(--della-accent);
}

.della-btn--light:hover,
.della-btn--light:focus-visible {
	color: var(--della-accent-contrast);
	border-color: var(--della-accent);
}

/* --- WhatsApp ----------------------------------------------------------- */

.della-btn--whatsapp {
	background: #25d366; /* WhatsApp brand green — deliberately not themed. */
	border-color: #25d366;
	color: #fff;
}

.della-btn--whatsapp::before {
	background: #1eb955;
}

.della-btn--whatsapp:hover,
.della-btn--whatsapp:focus-visible {
	color: #fff;
	border-color: #1eb955;
}

/* --- Modifiers ---------------------------------------------------------- */

.della-btn--block {
	display: flex;
	inline-size: 100%;
}

.della-btn--sm {
	min-block-size: 40px;
	padding: 9px 20px;
	font-size: var(--della-fs-xs);
}

.della-btn.is-disabled,
.della-btn[disabled],
.della-btn[aria-disabled="true"] {
	background: var(--della-surface);
	border-color: var(--della-border);
	color: var(--della-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.della-btn.is-disabled::before,
.della-btn[disabled]::before {
	display: none;
}

.della-btn.is-loading {
	color: transparent;
	pointer-events: none;
}

.della-btn.is-loading::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	margin-block-start: -8px;
	margin-inline-start: -8px;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid var(--della-accent-contrast);
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: della-spin 0.7s linear infinite;
}

/* =========================================================================
   2. Section heading — eyebrow, title, 30x2 accent rule, intro
   ========================================================================= */

.della-heading {
	max-inline-size: 660px;
	margin-block-end: clamp(26px, 4vw, 44px);
}

.della-heading--center {
	text-align: center;
	margin-inline: auto;
}

.della-heading--start {
	text-align: start;
	margin-inline-end: auto;
}

.della-heading--end {
	text-align: end;
	margin-inline-start: auto;
}

.della-heading__eyebrow {
	font-size: var(--della-fs-sm);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-muted);
	margin-block-end: 12px;
}

.della-heading__title {
	position: relative;
	font-size: clamp(var(--della-fs-lg), 3.4vw, var(--della-fs-xl));
	line-height: 1.25;
	padding-block-end: 18px;
}

.della-heading__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 30px;
	block-size: 2px;
	background: var(--della-accent-alt);
}

.della-heading--center .della-heading__title::after {
	inset-inline: 0;
	margin-inline: auto; /* Centres without translateX, so RTL needs no override. */
}

.della-heading--end .della-heading__title::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.della-heading__intro {
	margin-block-start: 14px;
	color: var(--della-muted);
	font-size: var(--della-fs-base);
	line-height: 1.75;
}

.is-dark .della-heading__eyebrow,
.is-dark .della-heading__intro {
	color: var(--della-footer-muted);
}

/* =========================================================================
   3. Badges
   ========================================================================= */

.della-badges {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}

.della-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--della-radius-sm);
	font-family: var(--della-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--della-accent);
	color: var(--della-accent-contrast);
}

.della-badge.is-sale {
	background: var(--della-sale);
	color: var(--della-sale-contrast);
}

.della-badge.is-new {
	background: var(--della-new);
	color: var(--della-new-contrast);
}

.della-badge.is-low {
	background: var(--della-accent-alt);
	color: var(--della-accent-alt-contrast);
}

.della-badge.is-soldout {
	background: var(--della-soldout);
	color: var(--della-soldout-contrast);
}

/* =========================================================================
   4. Colour swatches
   ========================================================================= */

/*
 * Two sources feed the same component: the PHP card writes `--swatch`, and the
 * product-page script writes `--della-swatch`. Both are read here so the two
 * never drift.
 */
.della-swatch {
	display: inline-block;
	inline-size: 16px;
	block-size: 16px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--della-border);
	background: var(--della-swatch, var(--swatch, var(--della-surface)));
	cursor: pointer;
	position: relative;
	transition: box-shadow var(--della-dur-fast) var(--della-ease),
		border-color var(--della-dur-fast) var(--della-ease),
		transform var(--della-dur-fast) var(--della-ease-out);
}

.della-swatch:hover {
	transform: scale(1.12);
	border-color: var(--della-muted);
}

.della-swatch.is-active,
.della-swatch.is-selected,
.della-swatch[aria-checked="true"],
.della-swatch[aria-pressed="true"] {
	border: 2px solid var(--della-heading);
	/* The white halo is what separates a dark swatch from its own outline. */
	box-shadow: inset 0 0 0 2px var(--della-bg);
}

.della-swatch.is-disabled,
.della-swatch[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.45;
}

/* A hairline struck diagonally across a sold-out colour. */
.della-swatch.is-disabled::after,
.della-swatch[aria-disabled="true"]::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		var(--della-muted) calc(50% - 1px),
		var(--della-muted) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

.della-card__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-block: 10px 2px;
	padding: 0;
	list-style: none;
}

.della-card__swatches-more {
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
	line-height: 1;
}

/* --- Swatch groups on the product page (built by product.js) ------------ */

.della-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Bigger where the choice is actually being made. */
.della-swatches--colour .della-swatch,
.della-swatches--color .della-swatch {
	inline-size: 30px;
	block-size: 30px;
}

.della-swatches--colour .della-swatch.is-active,
.della-swatches--color .della-swatch.is-active {
	box-shadow: inset 0 0 0 3px var(--della-bg);
}

/*
 * Touch targets for the colour choice.
 *
 * A 30px dot is the right size to look at and too small to tap — the guideline
 * is 44px. Rather than inflate the dot, an invisible 44px pad is centred on it,
 * and the row's gap widens to 14px so neighbouring pads sit edge to edge at
 * exactly 44px pitch instead of overlapping and stealing each other's taps.
 * Card swatches are excluded: they are labels on a link, not controls.
 */
@media (max-width: 991px) {
	.della-swatches {
		gap: 14px;
	}

	.della-swatches .della-swatch::before {
		content: "";
		position: absolute;
		inset-block: 50%;
		inset-inline: 50%;
		inline-size: 44px;
		block-size: 44px;
		/* Symmetrical, so it centres identically in LTR and RTL. */
		margin: -22px;
	}
}

/* Size / text pills. */
.della-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 40px;
	padding: 8px 14px;
	border: 1px solid var(--della-border);
	border-radius: var(--della-radius);
	background: var(--della-bg);
	color: var(--della-heading);
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--della-tracking);
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color var(--della-dur-fast) var(--della-ease),
		border-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease);
}

.della-pill:hover {
	border-color: var(--della-heading);
}

.della-pill.is-active,
.della-pill[aria-checked="true"] {
	background: var(--della-accent);
	border-color: var(--della-accent);
	color: var(--della-accent-contrast);
}

.della-pill.is-disabled,
.della-pill[aria-disabled="true"],
.della-pill[disabled] {
	color: var(--della-muted);
	background: var(--della-surface);
	cursor: not-allowed;
	opacity: 0.7;
}

/* A sold-out size keeps its label readable and is struck through instead. */
.della-pill.is-disabled::after,
.della-pill[aria-disabled="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 0.5px),
		var(--della-muted) calc(50% - 0.5px),
		var(--della-muted) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

/* The native <select> the script replaces stays in the DOM for the form post. */
.della-select--swatched {
	display: none;
}

/* =========================================================================
   5. Quantity stepper
   ========================================================================= */

.della-qty {
	display: inline-flex;
	align-items: center;
	border: var(--della-line);
	border-radius: var(--della-radius);
	background: var(--della-bg);
	block-size: 40px;
	overflow: hidden;
}

.della-qty__btn {
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 100%;
	color: var(--della-muted);
	transition: color var(--della-dur-fast) var(--della-ease),
		background-color var(--della-dur-fast) var(--della-ease);
}

.della-qty__btn:hover {
	color: var(--della-heading);
	background: var(--della-surface);
}

/*
 * Stock ceiling.
 *
 * The stepper clamps to live stock: the + button is disabled at the top and the
 * wrapper gains .is-at-max. A toast already announces it, so the inline
 * treatment stays deliberately quiet — the button reads as spent, and the field
 * gets a faint warm edge rather than an alarm. The whole point is that a
 * customer who keeps tapping + understands why nothing is happening.
 */
.della-qty__btn[disabled],
.della-qty__btn[aria-disabled="true"] {
	color: rgba(var(--della-text-rgb), 0.28);
	cursor: not-allowed;
	pointer-events: none;
}

.della-qty__btn[disabled]:hover,
.della-qty__btn[aria-disabled="true"]:hover {
	background: transparent;
	color: rgba(var(--della-text-rgb), 0.28);
}

.della-qty.is-at-max {
	border-color: rgba(var(--della-accent-alt-rgb), 0.55);
}

/* The number itself is the thing that has hit its limit. */
.della-qty.is-at-max .della-qty__input {
	color: var(--della-accent-alt);
}

.della-qty__input {
	inline-size: 40px;
	min-block-size: 0;
	block-size: 100%;
	border: 0;
	border-radius: 0;
	padding: 0;
	text-align: center;
	font-size: var(--della-fs-sm);
	font-weight: 500;
	color: var(--della-heading);
	background: transparent;
}

.della-qty__input:focus {
	box-shadow: none;
}

/* =========================================================================
   6. Stars
   ========================================================================= */

.della-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--della-border);
	line-height: 1;
}

.della-stars__star {
	display: inline-flex;
}

.della-stars__star.is-filled {
	color: var(--della-accent-alt);
}

.della-stars__star.is-filled .della-icon {
	fill: currentColor;
}

.della-stars__count {
	margin-inline-start: 6px;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

/* =========================================================================
   7. Search form
   ========================================================================= */

.della-searchform {
	position: relative;
	display: flex;
}

.della-searchform input[type="search"] {
	padding-inline-end: 48px;
}

.della-searchform__submit {
	position: absolute;
	inset-inline-end: 0;
	inset-block: 0;
	inline-size: 46px;
	display: grid;
	place-items: center;
	color: var(--della-muted);
	transition: color var(--della-dur-fast) var(--della-ease);
}

.della-searchform__submit:hover {
	color: var(--della-heading);
}

/* =========================================================================
   8. Social links
   ========================================================================= */

.della-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.della-social a {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border: 1px solid rgba(var(--della-border-rgb), 0.35);
	border-radius: var(--della-radius);
	color: inherit;
	transition: background-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease),
		border-color var(--della-dur-fast) var(--della-ease);
}

.della-social--footer a:hover {
	background: var(--della-accent-alt);
	border-color: var(--della-accent-alt);
	color: var(--della-accent-alt-contrast);
}

.della-social--drawer a {
	border-color: var(--della-border);
	color: var(--della-heading);
}

.della-social--drawer a:hover {
	background: var(--della-accent);
	border-color: var(--della-accent);
	color: var(--della-accent-contrast);
}

/* =========================================================================
   9. Scrim, drawers, modal, search overlay
   ========================================================================= */

/*
 * Panels use the transition pattern the theme's JS expects: `hidden` is
 * removed, then `.is-open` is added on the next frame, and on close the script
 * reads this element's own transition-duration to know when to re-hide it.
 * Every panel therefore needs a real `transition`, not an animation.
 */
.della-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(var(--della-text-rgb), 0.42);
	opacity: 0;
	backdrop-filter: blur(2px);
	transition: opacity var(--della-dur) var(--della-ease);
}

.della-scrim.is-open {
	opacity: 1;
}

.della-drawer {
	position: fixed;
	inset-block: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	inline-size: min(var(--della-drawer-w), 92vw);
	background: var(--della-bg);
	box-shadow: -8px 0 40px rgba(var(--della-text-rgb), 0.14);
	overscroll-behavior: contain;
	transition: transform var(--della-dur) var(--della-ease-out);
}

.della-drawer--end {
	inset-inline-end: 0;
	transform: translateX(var(--della-slide-end));
}

.della-drawer--start {
	inset-inline-start: 0;
	transform: translateX(var(--della-slide-start));
}

.della-drawer.is-open {
	transform: translateX(0);
}

/* Scroll lock hook (the script also pins the body with an inline style). */
body.has-panel-open {
	overflow: hidden;
}

.della-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-block-end: var(--della-line);
	flex: none;
}

.della-drawer__title {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
}

.della-drawer__close,
.della-modal__close,
.della-search__close {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	margin-inline-end: -8px;
	color: var(--della-muted);
	transition: color var(--della-dur-fast) var(--della-ease),
		transform var(--della-dur) var(--della-ease-out);
}

.della-drawer__close:hover,
.della-modal__close:hover,
.della-search__close:hover {
	color: var(--della-heading);
	transform: rotate(90deg);
}

.della-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.della-drawer__search {
	position: relative;
	display: flex;
	margin-block-end: 4px;
	flex: none;
}

.della-drawer__search input {
	padding-inline-end: 46px;
}

.della-drawer__search button {
	position: absolute;
	inset-inline-end: 0;
	inset-block: 0;
	inline-size: 46px;
	display: grid;
	place-items: center;
	color: var(--della-muted);
}

.della-drawer__extra {
	margin-block-start: auto;
	padding-block-start: 24px;
	display: grid;
	gap: 12px;
	justify-items: start;
}

.della-drawer__extra-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--della-fs-sm);
	color: var(--della-text);
}

.della-drawer__extra-link .della-icon {
	color: var(--della-accent-alt);
}

.della-drawer__extra .della-social {
	margin-block-start: 8px;
}

/* --- Empty state -------------------------------------------------------- */

.della-drawer__empty {
	margin: auto;
	text-align: center;
	color: var(--della-muted);
	padding-block: 40px;
	display: grid;
	justify-items: center;
	gap: 8px;
}

.della-drawer__empty .della-icon {
	color: var(--della-border);
	margin-block-end: 6px;
}

.della-drawer__empty p:not(.della-drawer__hint) {
	font-family: var(--della-font-heading);
	font-size: var(--della-fs-md);
	color: var(--della-heading);
}

.della-drawer__hint {
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	max-inline-size: 26ch;
}

.della-drawer__empty .della-btn {
	margin-block-start: 14px;
}

/* --- Cart drawer items -------------------------------------------------- */

.della-drawer__items {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.della-drawer__item {
	position: relative;
	display: grid;
	grid-template-columns: 74px 1fr auto;
	gap: 14px;
	padding-block: 16px;
	border-block-end: var(--della-line);
}

.della-drawer__thumb {
	display: block;
	aspect-ratio: var(--della-product-aspect);
	overflow: hidden;
	background: var(--della-surface);
}

.della-drawer__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.della-drawer__info {
	min-inline-size: 0;
}

.della-drawer__name {
	display: block;
	font-size: var(--della-fs-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--della-heading);
}

.della-drawer__variant {
	margin-block-start: 3px;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

.della-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: 10px;
	flex-wrap: wrap;
}

.della-drawer__price {
	font-size: var(--della-fs-sm);
	font-weight: 600;
	color: var(--della-heading);
	white-space: nowrap;
}

.della-drawer__price del {
	color: var(--della-muted);
	font-weight: 400;
	margin-inline-end: 4px;
}

.della-drawer__remove {
	align-self: flex-start;
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	color: var(--della-muted);
	transition: color var(--della-dur-fast) var(--della-ease);
}

.della-drawer__remove:hover {
	color: var(--della-sale);
}

.della-drawer__foot {
	flex: none;
	padding-block-start: 18px;
	display: grid;
	gap: 10px;
}

.della-drawer__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--della-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
}

.della-drawer__subtotal strong {
	font-size: var(--della-fs-md);
	color: var(--della-heading);
}

.della-drawer__note {
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
	margin-block-end: 4px;
}

/* =========================================================================
   10. Free-shipping progress bar
   ========================================================================= */

.della-shipbar {
	flex: none;
	background: var(--della-surface);
	border-radius: var(--della-radius);
	padding: 14px 16px;
	margin-block-end: 6px;
}

.della-shipbar__text {
	font-size: var(--della-fs-xs);
	line-height: 1.5;
	color: var(--della-text);
	text-align: center;
	margin-block-end: 10px;
}

.della-shipbar__text .amount,
.della-shipbar__text bdi {
	font-weight: 700;
	color: var(--della-heading);
}

.della-shipbar__track {
	block-size: 4px;
	background: rgba(var(--della-border-rgb), 0.9);
	border-radius: 999px;
	overflow: hidden;
}

.della-shipbar__fill {
	block-size: 100%;
	inline-size: var(--progress, 0%);
	background: var(--della-accent-alt);
	border-radius: 999px;
	transition: inline-size var(--della-dur-slow) var(--della-ease-out);
}

.della-shipbar.is-complete .della-shipbar__fill {
	background: var(--della-new);
}

.della-shipbar.is-complete .della-shipbar__text {
	color: var(--della-new);
	font-weight: 600;
}

/* =========================================================================
   11. Trust line
   ========================================================================= */

.della-trustline {
	margin: 22px 0 0;
	padding: 18px 0 0;
	list-style: none;
	border-block-start: var(--della-line);
	display: grid;
	gap: 10px;
}

.della-trustline li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
}

.della-trustline .della-icon {
	color: var(--della-accent-alt);
}

/* =========================================================================
   12. Search overlay
   ========================================================================= */

.della-search {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--della-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity var(--della-dur) var(--della-ease),
		transform var(--della-dur) var(--della-ease-out);
}

.della-search.is-open {
	opacity: 1;
	transform: translateY(0);
}

.della-search__inner {
	position: relative;
	max-inline-size: 760px;
	margin-inline: auto;
	padding: 84px var(--della-gutter) 60px;
}

.della-search__close {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 16px;
	color: var(--della-heading);
}

.della-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	border-block-end: 1px solid var(--della-heading);
	padding-block-end: 8px;
}

.della-search__form input[type="search"] {
	border: 0;
	border-radius: 0;
	padding: 6px 0;
	font-family: var(--della-font-heading);
	font-size: clamp(var(--della-fs-lg), 5vw, var(--della-fs-2xl));
	background: transparent;
	min-block-size: 0;
}

.della-search__form input[type="search"]:focus {
	box-shadow: none;
}

.della-search__submit {
	flex: none;
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	padding: 8px 0;
}

.della-search__submit:hover {
	color: var(--della-heading);
}

.della-search__results {
	margin-block-start: 30px;
}

.della-search__results:empty {
	display: none;
}

.della-search__results.is-loading {
	opacity: 0.5;
}

.della-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.della-search__result {
	display: grid;
	grid-template-columns: 54px 1fr;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-block-end: var(--della-line-soft);
	font-size: var(--della-fs-sm);
	transition: background-color var(--della-dur-fast) var(--della-ease);
}

.della-search__result:hover {
	background: var(--della-surface);
	color: var(--della-heading);
}

.della-search__thumb {
	inline-size: 100%;
	aspect-ratio: var(--della-product-aspect);
	object-fit: cover;
	background: var(--della-surface);
}

.della-search__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	min-inline-size: 0;
}

.della-search__name {
	font-weight: 500;
	color: var(--della-heading);
	min-inline-size: 0;
}

.della-search__price {
	flex: none;
	color: var(--della-muted);
	white-space: nowrap;
}

.della-search__all {
	display: inline-block;
	margin-block-start: 20px;
	font-size: var(--della-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
	border-block-end: 1px solid var(--della-border);
	padding-block-end: 3px;
}

.della-search__all:hover {
	color: var(--della-heading);
	border-color: var(--della-heading);
}

/* =========================================================================
   13. Modal (quick view, size guide)
   ========================================================================= */

.della-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--della-gutter);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transition: opacity var(--della-dur) var(--della-ease);
}

.della-modal.is-open {
	opacity: 1;
}

.della-modal__box {
	position: relative;
	inline-size: min(960px, 100%);
	/*
	 * 90vh first as the fallback, then dvh for browsers that support it.
	 *
	 * On a phone, `vh` is measured against the viewport with the browser's
	 * toolbars RETRACTED, so a box sized in vh is taller than what is actually
	 * on screen whenever the toolbar is showing — and the bottom of the quick
	 * view, which is where "Add to bag" lives, sits underneath it. `dvh` tracks
	 * the real visible height as the toolbar comes and goes.
	 */
	max-block-size: min(90vh, 820px);
	max-block-size: min(90dvh, 820px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--della-bg);
	border-radius: var(--della-radius);
	box-shadow: var(--della-shadow-pop);
	transform: scale(0.96);
	transition: transform var(--della-dur) var(--della-ease-out);
}

.della-modal.is-open .della-modal__box {
	transform: scale(1);
}

.della-modal__close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	background: var(--della-bg);
	border-radius: 50%;
	color: var(--della-heading);
	margin: 0;
}

.della-modal__body {
	padding: 0;
}

.della-modal__body .della-prose {
	padding: 40px 30px 34px;
}

/* --- Quick view --------------------------------------------------------- */

.della-qv {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 768px) {
	.della-qv {
		grid-template-columns: 1fr 1fr;
	}
}

.della-qv__media {
	background: var(--della-surface);
	padding: 0;
	min-inline-size: 0;
}

.della-qv__slides {
	position: relative;
	aspect-ratio: var(--della-product-aspect);
}

.della-qv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--della-dur) var(--della-ease);
	pointer-events: none;
}

.della-qv__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.della-qv__slide img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.della-qv__thumbs {
	display: flex;
	gap: 8px;
	padding: 10px;
	overflow-x: auto;
}

.della-qv__thumb {
	flex: none;
	inline-size: 54px;
	aspect-ratio: var(--della-product-aspect);
	border: 1px solid transparent;
	overflow: hidden;
	opacity: 0.65;
	transition: opacity var(--della-dur-fast) var(--della-ease),
		border-color var(--della-dur-fast) var(--della-ease);
}

.della-qv__thumb.is-active,
.della-qv__thumb:hover {
	opacity: 1;
	border-color: var(--della-heading);
}

.della-qv__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.della-qv__info {
	padding: 40px 30px 34px;
	min-inline-size: 0;
}

.della-qv__title {
	font-size: var(--della-fs-lg);
	line-height: 1.25;
	margin-block-end: 10px;
}

.della-qv__price {
	font-size: var(--della-fs-md);
	color: var(--della-heading);
	margin-block: 12px;
}

.della-qv__price del {
	color: var(--della-muted);
	font-weight: 400;
	margin-inline-end: 6px;
}

.della-qv__desc {
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	line-height: 1.75;
	margin-block-end: 18px;
}

.della-qv__full {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-block-start: 18px;
	font-size: var(--della-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
	border-block-end: 1px solid var(--della-border);
	padding-block-end: 3px;
}

.della-qv__full:hover {
	border-color: var(--della-heading);
	color: var(--della-heading);
}

/* =========================================================================
   14. Toasts
   ========================================================================= */

.della-toasts {
	position: fixed;
	inset-block-end: calc(var(--della-mobilebar-h) + 14px);
	inset-inline: 0;
	margin-inline: auto; /* Centres without translateX, so RTL needs no override. */
	z-index: 110;
	display: grid;
	gap: 8px;
	inline-size: min(380px, calc(100vw - 24px));
	pointer-events: none;
}

@media (min-width: 992px) {
	.della-toasts {
		inset-block-end: 22px;
		inset-inline-start: auto;
		inset-inline-end: 22px;
		transform: none;
	}
}

.della-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 15px 18px 17px;
	background: var(--della-accent);
	color: var(--della-accent-contrast);
	border-radius: var(--della-radius);
	box-shadow: var(--della-shadow-pop);
	font-size: var(--della-fs-base);
	line-height: 1.45;
	pointer-events: auto;
	cursor: pointer;
	overflow: hidden; /* Keeps the lifetime bar inside the rounded corners. */
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--della-dur) var(--della-ease),
		transform var(--della-dur) var(--della-ease-out);
}

.della-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.della-toast__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-block-start: 1px;
}

.della-toast__text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The lifetime bar.
 *
 * A toast that simply disappears reads as a glitch; one that visibly runs down
 * reads as finished. The bar is the only moving part, so it stays quiet — a
 * translucent strip along the bottom edge rather than a coloured meter.
 */
.della-toast__life {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: 2px;
	inline-size: 100%;
	background: currentColor;
	opacity: 0.35;
	transform-origin: left center;
	transform: scaleX(0);
}

.della-toast.is-visible .della-toast__life {
	animation: della-toast-life var(--della-toast-life, 4200ms) linear forwards;
}

@keyframes della-toast-life {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/*
 * On a wide screen the toast lives in the bottom corner, so it arrives from the
 * edge it is anchored to rather than floating up from nowhere. Logical
 * properties would be ideal but transforms have no logical axis, so RTL is
 * handled explicitly.
 */
@media (min-width: 992px) {
	.della-toast {
		transform: translateX(24px);
	}

	[dir="rtl"] .della-toast {
		transform: translateX(-24px);
	}

	.della-toast.is-visible,
	[dir="rtl"] .della-toast.is-visible {
		transform: translateX(0);
	}

	[dir="rtl"] .della-toast__life {
		transform-origin: right center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.della-toast.is-visible .della-toast__life {
		animation: none;
		transform: scaleX(1);
	}
}

.della-toast--error,
.della-toast.is-error {
	background: var(--della-sale);
	color: var(--della-sale-contrast);
}

.della-toast--success,
.della-toast.is-success {
	background: var(--della-new);
	color: var(--della-new-contrast);
}

/* =========================================================================
   15. Carousels
   ========================================================================= */

.della-products-wrap,
.della-quotes__wrap {
	position: relative;
}

.della-products-wrap.is-carousel .della-products,
.della-quotes__wrap[data-della-carousel] .della-quotes__list {
	display: flex;
	gap: var(--della-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Bleed to the viewport edge on mobile so the row reads as "more to come". */
	margin-inline: calc(var(--della-gutter) * -1);
	padding-inline: var(--della-gutter);
	padding-block-end: 4px;
}

.della-products-wrap.is-carousel .della-products::-webkit-scrollbar,
.della-quotes__wrap[data-della-carousel] .della-quotes__list::-webkit-scrollbar {
	display: none;
}

.della-products-wrap.is-carousel .della-products > li,
.della-quotes__wrap[data-della-carousel] .della-quotes__list > li {
	flex: 0 0 auto;
	inline-size: calc((100% - var(--della-gap)) / 2);
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.della-products-wrap.is-carousel .della-products,
	.della-quotes__wrap[data-della-carousel] .della-quotes__list {
		margin-inline: 0;
		padding-inline: 0;
	}

	.della-products-wrap.is-carousel .della-products > li,
	.della-quotes__wrap[data-della-carousel] .della-quotes__list > li {
		inline-size: calc((100% - var(--della-gap) * 2) / 3);
	}
}

@media (min-width: 992px) {
	.della-products-wrap.is-carousel .della-products > li {
		inline-size: calc(
			(100% - var(--della-gap) * (var(--della-cols-desktop) - 1)) / var(--della-cols-desktop)
		);
	}
}

.della-carousel__nav {
	position: absolute;
	inset-block-start: 38%;
	z-index: 4;
	display: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: var(--della-line);
	border-radius: 50%; /* A genuine circle: shape, not the themed corner radius. */
	background: var(--della-bg);
	color: var(--della-heading);
	box-shadow: var(--della-shadow-soft);
	transition: background-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease),
		opacity var(--della-dur-fast) var(--della-ease);
}

.della-carousel__nav:hover {
	background: var(--della-accent);
	border-color: var(--della-accent);
	color: var(--della-accent-contrast);
}

.della-carousel__nav[disabled],
.della-carousel__nav.is-disabled {
	opacity: 0.25;
	pointer-events: none;
}

.della-carousel__nav.is-hidden {
	display: none;
}

.della-carousel__nav--prev {
	inset-inline-start: -18px;
}

.della-carousel__nav--next {
	inset-inline-end: -18px;
}

@media (min-width: 992px) {
	.della-carousel__nav {
		display: grid;
	}
}

/* =========================================================================
   16. Tab strips (homepage tabbed products, and reused elsewhere)
   ========================================================================= */

.della-tabs__strip {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-block-end: 34px;
	border-block-end: var(--della-line);
}

.della-tabs__strip::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.della-tabs__strip {
		justify-content: center;
		flex-wrap: wrap;
	}
}

.della-tabs__tab {
	position: relative;
	flex: none;
	padding: 12px 18px;
	font-size: var(--della-fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	white-space: nowrap;
	transition: color var(--della-dur-fast) var(--della-ease);
}

.della-tabs__tab::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	background: var(--della-accent);
	transform: scaleX(0);
	transition: transform var(--della-dur) var(--della-ease-out);
}

.della-tabs__tab:hover {
	color: var(--della-heading);
}

.della-tabs__tab.is-active,
.della-tabs__tab[aria-selected="true"] {
	color: var(--della-heading);
}

.della-tabs__tab.is-active::after,
.della-tabs__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.della-tabs__panel {
	animation: della-fade-in var(--della-dur) var(--della-ease) both;
}

/* =========================================================================
   17. Widgets (shop filter drawer, footer extras)
   ========================================================================= */

.widget + .widget {
	margin-block-start: 28px;
}

.widget-title {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
	margin-block-end: 14px;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
	font-size: var(--della-fs-sm);
}

.widget ul ul {
	margin-block-start: 9px;
	padding-inline-start: 14px;
}

.widget a {
	color: var(--della-text);
}

.widget a:hover {
	color: var(--della-accent-alt);
}

.widget .count {
	color: var(--della-muted);
	font-size: var(--della-fs-xs);
}

/* =========================================================================
   18. Prompt row — a sentence with an action pinned to the end

       <div class="della-prompt">
         <span class="della-prompt__text">Have a coupon?</span>
         <a class="della-prompt__action">Enter your code</a>
       </div>

   Every "text … [ACTION]" strip on the site is this component: the checkout
   login and coupon toggles, and every WooCommerce notice that carries a
   button. Those live in WooCommerce's own markup and cannot be given the BEM
   classes from PHP, so their selectors are listed HERE, in the component's own
   rule blocks, rather than restated in checkout.css / shop.css. CSS has no
   @extend and the theme has no build step, so a shared selector list is the
   only way to keep one source of truth — change a value here and it changes
   everywhere, which is the whole point of the component.

   Aliases:
     .della-prompt        ← .woocommerce-info / -message / -error / -noreviews
     .della-prompt__action ← .showlogin, .showcoupon, and a trailing .button
   ========================================================================= */

.della-prompt,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* --- Skin ---------------------------------------------------------------
   Moved here from shop.css so the theme's own prompts and WooCommerce's
   notices cannot drift apart: they are one object with one definition. */

.della-prompt,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	position: relative;
	/*
	 * The 3px accent bar eats into the start edge, so the inline padding has to
	 * clear it as well as the border — 16px of visual gutter was leaving the
	 * text sitting on the bar. Block padding is separate because these are
	 * often a single line.
	 */
	margin: 0 0 22px;
	padding-block: 16px;
	padding-inline: 24px 22px;
	border-radius: var(--della-radius);
	border-inline-start: 3px solid var(--della-accent-alt);
	background: var(--della-surface);
	color: var(--della-text);
	font-size: var(--della-fs-sm);
	line-height: 1.6;
	list-style: none;
}

.della-prompt--success,
.woocommerce-message {
	border-inline-start-color: var(--della-new);
}

.della-prompt--error,
.woocommerce-error {
	border-inline-start-color: var(--della-sale);
}

.della-prompt--info {
	border-inline-start-color: var(--della-accent-alt);
}

/*
 * The error notice is a <ul>. WooCommerce's own stylesheet is disabled, so the
 * browser default (disc markers and a 40px start indent) leaks in and shoves
 * every line off the accent bar. Reset it and give each row its own gutter, so
 * a validation list reads as a list of fields rather than a wall.
 */
.della-prompt,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
/* Out-ranks base.css's `.della-prose ul`, which gives editorial lists a 1.1em
   start indent — a notice is not an editorial list. */
.della-prose .woocommerce-error,
.della-prose .woocommerce-info,
.della-prose .woocommerce-message {
	margin-inline: 0;
	padding-inline-start: 24px;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-error li + li,
.woocommerce-info li + li,
.woocommerce-message li + li {
	/* The flex row-gap already separates them; this only adds the hairline and
	   the space it needs to sit clear of the text. */
	padding-block-start: 8px;
	border-block-start: var(--della-line-soft);
}

/*
 * Each error item links to the field that failed. It inherited body colour, so
 * nothing said it was clickable — underline it and give it the accent.
 *
 * `[href]` is a specificity bump, not a filter: these anchors always have one,
 * and it is what lets this out-rank `.woocommerce-checkout .della-prose a`,
 * which strips underlines from every link on the checkout page.
 */
.woocommerce-error li a[href],
.woocommerce-info li a[href],
.woocommerce-message li a[href] {
	color: var(--della-accent-alt);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.woocommerce-error li a[href]:hover,
.woocommerce-error li a[href]:focus-visible,
.woocommerce-info li a[href]:hover,
.woocommerce-message li a[href]:hover {
	color: var(--della-heading);
}

@media (max-width: 575px) {
	.della-prompt,
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-noreviews,
	p.no-comments {
		padding-block: 14px;
		padding-inline: 18px 16px;
	}

	.della-prompt,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-message,
	.della-prose .woocommerce-error,
	.della-prose .woocommerce-info,
	.della-prose .woocommerce-message {
		padding-inline-start: 18px;
	}
}


/* The sentence is a <p> inside the theme's own markup; it must not carry the
   editorial paragraph margins into the row. */
.della-prompt__text {
	margin: 0;
}

/*
 * The sentence takes the slack. In WooCommerce's notices it is a bare text
 * node — an anonymous flex item, which cannot be selected and therefore keeps
 * `order: 0`. That is precisely why the action below is ordered instead: it is
 * the only half of the pair the stylesheet can reach.
 */
.della-prompt__text {
	flex: 1 1 auto;
	min-inline-size: 0;
	order: 0;
}

/*
 * WooCommerce prints the action BEFORE the sentence:
 *   <div class="woocommerce-info"><a class="button">Confirm…</a>Confirm your
 *   email address…</div>
 * so the notice read "[BUTTON] text". A higher `order` flips the pair without
 * touching the template, and it mirrors for free under RTL because flex
 * `order` follows the writing mode — as does the auto inline-start margin that
 * pushes the action to the end edge.
 */
.della-prompt__action,
.woocommerce-message > .button,
.woocommerce-error > .button,
.woocommerce-info > .button,
.woocommerce-noreviews > .button,
.woocommerce-info .showlogin,
.woocommerce-info .showcoupon,
.woocommerce-form-login-toggle .showlogin,
.woocommerce-form-coupon-toggle .showcoupon {
	order: 1;
	flex: 0 0 auto;
	margin-inline-start: auto;
}

/* Anything that is not the action keeps its place at the start of the row. */
.della-prompt > *:not(.della-prompt__action),
.woocommerce-message > *:not(.button),
.woocommerce-error > *:not(.button),
.woocommerce-info > *:not(.button):not(.showlogin):not(.showcoupon) {
	order: 0;
}

/*
 * Compact next to a single sentence — the full 46px/30px button is too heavy
 * inside a notice strip, but 44px keeps the touch target legal.
 */
.della-prompt__action,
.woocommerce-info .showlogin,
.woocommerce-info .showcoupon {
	min-block-size: 44px;
	padding: 10px 22px;
	font-size: var(--della-fs-xs);
}

/*
 * .showlogin / .showcoupon slide a sibling form open. WooCommerce sets
 * aria-expanded on the coupon toggle; `.is-open` is here so the login toggle
 * can get the same look the moment the theme's JS marks it. Nothing here sets
 * `display`, because WooCommerce animates those forms with slideToggle and a
 * display rule would fight it.
 */
.della-prompt__action[aria-expanded="true"],
.della-prompt__action.is-open,
.woocommerce-info .showlogin[aria-expanded="true"],
.woocommerce-info .showlogin.is-open,
.woocommerce-info .showcoupon[aria-expanded="true"],
.woocommerce-info .showcoupon.is-open {
	background: var(--della-accent);
	border-color: var(--della-accent);
	color: var(--della-accent-contrast);
}

.della-prompt__action[aria-expanded="true"]::before,
.della-prompt__action.is-open::before,
.woocommerce-info .showlogin[aria-expanded="true"]::before,
.woocommerce-info .showlogin.is-open::before,
.woocommerce-info .showcoupon[aria-expanded="true"]::before,
.woocommerce-info .showcoupon.is-open::before {
	transform: scaleY(1);
}

@media (max-width: 599px) {
	/*
	 * Stack: sentence on its own line, action full width underneath. Side by
	 * side at this width leaves the text two or three words per line.
	 */
	.della-prompt,
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-noreviews {
		align-items: stretch;
		gap: 14px;
	}

	.della-prompt__action,
	.woocommerce-message > .button,
	.woocommerce-error > .button,
	.woocommerce-info > .button,
	.woocommerce-noreviews > .button,
	.woocommerce-info .showlogin,
	.woocommerce-info .showcoupon,
	.woocommerce-form-login-toggle .showlogin,
	.woocommerce-form-coupon-toggle .showcoupon {
		inline-size: 100%;
		min-block-size: 44px;
		margin-inline-start: 0;
	}
}

/* =========================================================================
   19. Empty state — "there is nothing here yet"

       <div class="della-emptystate">
         <svg class="della-icon della-icon--bag">
         <h2 class="della-emptystate__title">…</h2>
         <p  class="della-emptystate__text">…</p>
         <div class="della-emptystate__actions"> … </div>
       </div>

   Generic on purpose: the empty cart, an empty search, an empty wishlist and
   an empty category all get the same object, so nothing below may assume a
   page. The min-block-size is the point of the component — an empty state
   clinging to the top of an otherwise blank page is what reads as broken.
   ========================================================================= */

.della-emptystate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-block-size: clamp(340px, 52vh, 520px);
	padding-block: clamp(40px, 8vw, 72px);
	padding-inline: var(--della-gutter);
	text-align: center;
}

.della-emptystate .della-icon,
.della-emptystate__icon {
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: 22px;
	color: var(--della-muted);
	opacity: 0.75;
}

.della-emptystate__title {
	margin: 0;
	font-family: var(--della-font-heading);
	font-size: clamp(var(--della-fs-lg), 3.2vw, var(--della-fs-xl));
	line-height: 1.25;
	color: var(--della-heading);
}

.della-emptystate__text {
	margin: 14px 0 0;
	max-inline-size: 46ch;
	font-size: var(--della-fs-base);
	line-height: 1.7;
	color: var(--della-muted);
}

.della-emptystate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-block-start: 30px;
}

/* A title with no supporting sentence still needs air before the buttons. */
.della-emptystate__title + .della-emptystate__actions {
	margin-block-start: 26px;
}

@media (max-width: 599px) {
	.della-emptystate {
		min-block-size: clamp(280px, 46vh, 400px);
	}

	/*
	 * Stacked and full width. Two ghost/primary buttons side by side at 375px
	 * leaves each one about 150px wide with the label wrapping inside it.
	 */
	.della-emptystate__actions {
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
		max-inline-size: 320px;
		gap: 10px;
	}

	.della-emptystate__actions .della-btn {
		inline-size: 100%;
	}
}

/*
 * Sold out: the quantity control reads as switched off.
 *
 * The arrows are already covered by the [disabled] rules above; this is about
 * the field itself, which otherwise still looks like somewhere to type. Dimmed
 * and greyed rather than hidden, because the control disappearing would shift
 * the layout every time the shopper tries a different size.
 */
.della-qty.is-unavailable {
	opacity: 0.55;
}

.della-qty.is-unavailable .della-qty__input {
	background: var(--della-surface);
	color: rgba(var(--della-text-rgb), 0.45);
	cursor: not-allowed;
}

/*
 * Clear the sticky bottom navigation.
 *
 * The mobile bar is fixed over everything, so the last 55px of any scrollable
 * dialog is behind it. In quick view that is "See full details" and, once the
 * shopper scrolls, the add-to-cart button — reachable only by scrolling past
 * the end, which does not look possible. Padding inside the scroll container
 * gives the content somewhere to finish.
 */
@media (max-width: 767px) {
	.has-mobile-bar .della-modal__box {
		padding-block-end: calc(var(--della-mobilebar-h) + env(safe-area-inset-bottom, 0px));
	}
}

/* =========================================================================
   Accordion (core Details block)
   =========================================================================

   Used by the FAQ page. This styles WordPress's own Details block rather than
   introducing a theme shortcode, which means:

     - it is a real <details>/<summary>, so it works with JavaScript disabled,
       browser find-in-page can open a closed answer, and screen readers get the
       expanded state for free;
     - the owner adds a question in the block editor like any other block, and
       nothing here depends on them remembering special syntax;
     - if the theme is ever swapped out, the content degrades to plain
       expandable text instead of leaving shortcode fragments behind.
   ========================================================================= */

.della-prose .wp-block-details {
	border-block-end: var(--della-line-hair);
	padding: 0;
	margin-block: 0;
}

.della-prose .wp-block-details:first-of-type {
	border-block-start: var(--della-line-hair);
}

.della-prose .wp-block-details > summary {
	position: relative;
	display: block; /* Hides the native triangle in Chrome and Firefox. */
	cursor: pointer;
	list-style: none;
	padding: 20px 44px 20px 0;
	font-family: var(--della-font-heading);
	font-size: var(--della-fs-lg);
	line-height: 1.35;
	color: var(--della-heading);
	transition: color var(--della-dur-fast) var(--della-ease);
}

/* Safari draws its own marker and ignores list-style. */
.della-prose .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.della-prose .wp-block-details > summary:hover {
	color: var(--della-accent);
}

.della-prose .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--della-accent);
	outline-offset: 3px;
}

/*
 * The +/− mark, drawn in CSS rather than as an icon: it has to animate between
 * two states, and two lines where one rotates away is the whole trick.
 */
.della-prose .wp-block-details > summary::before,
.della-prose .wp-block-details > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	inline-size: 15px;
	block-size: 1.5px;
	background: currentColor;
	transition: transform var(--della-dur) var(--della-ease-out);
}

.della-prose .wp-block-details > summary::before {
	transform: translateY(-50%);
}

.della-prose .wp-block-details > summary::after {
	transform: translateY(-50%) rotate(90deg);
}

/* Open: the vertical stroke rotates flat, leaving a minus. */
.della-prose .wp-block-details[open] > summary::after {
	transform: translateY(-50%) rotate(0deg);
}

.della-prose .wp-block-details[open] > summary {
	color: var(--della-accent);
}

.della-prose .wp-block-details > :not(summary) {
	margin-block: 0 18px;
	color: var(--della-text);
	font-size: var(--della-fs-base);
	line-height: 1.7;
	animation: della-fade-up var(--della-dur) var(--della-ease-out) both;
}

.della-prose .wp-block-details > :not(summary):first-of-type {
	padding-block-start: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.della-prose .wp-block-details > :not(summary) {
		animation: none;
	}
}