/**
 * product.css — Della Boutique
 *
 * The single product page, rebuilt from scratch: gallery, summary, variation
 * form, tabs (an accordion on small screens), reviews and related products.
 * Loaded only on is_product().
 */

/* =========================================================================
   1. Page shell
   ========================================================================= */

.della-main--shop div.product {
	/*
	 * Two local rhythms, named once so the spacing below can be derived from
	 * them instead of re-guessing the numbers:
	 *   --della-product-gap  the fold's own gutter
	 *   --della-block-gap    the space the tabs and related rows put above
	 *                        themselves (see sections 5 and 7)
	 */
	--della-product-gap: clamp(28px, 4vw, 56px);
	--della-block-gap: clamp(48px, 7vw, 88px);

	display: block;
	padding-block-start: clamp(24px, 4vw, 48px);
}

/*
 * The two-column fold: gallery + summary.
 *
 * This wrapper exists so the sticky summary has a containing block that ENDS
 * with the fold. Without it the summary is clamped to div.product, which also
 * contains the tabs and the related products, and it would keep travelling
 * down over both of them.
 */
.della-product__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--della-product-gap);
	align-items: start;
}

@media (min-width: 992px) {
	.della-product__top {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: clamp(40px, 5vw, 80px);
	}
}

/* Everything after the two-column fold spans the full width. */
/* The rows after the fold run full width and set their own top spacing. */
.della-main--shop div.product > .woocommerce-tabs,
.della-main--shop div.product > .related,
.della-main--shop div.product > .up-sells {
	margin-block-start: var(--della-block-gap);
}

/* WooCommerce's corner sale flash — the theme's own badges do this job on the
   card, so on the product page it is a single quiet marker. */
div.product > span.onsale,
.woocommerce-product-gallery span.onsale {
	position: absolute;
	z-index: 3;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	padding: 5px 10px;
	border-radius: var(--della-radius-sm);
	background: var(--della-sale);
	color: var(--della-sale-contrast);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	line-height: 1.1;
}

/* =========================================================================
   2. Gallery
   ========================================================================= */

.woocommerce-product-gallery {
	position: relative;
	min-inline-size: 0;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery__image {
	background: var(--della-surface);
	border-radius: var(--della-radius);
	overflow: hidden;
}

.woocommerce-product-gallery__image a {
	display: block;
}

.woocommerce-product-gallery__image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--della-product-aspect);
	object-fit: cover;
	display: block;
}

/* Before flexslider initialises, the wrapper is a plain stack. Keeping it a
   stack (rather than a row) avoids a wide flash on first paint. */
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image + .woocommerce-product-gallery__image {
	margin-block-start: 10px;
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--della-radius);
	overflow: hidden;
	background: var(--della-surface);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	z-index: 4;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%; /* A genuine circle: shape, not the themed corner radius. */
	background: var(--della-bg);
	color: var(--della-heading);
	box-shadow: 0 2px 10px rgba(var(--della-text-rgb), 0.12);
	font-size: 0;
	transition: background-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease);
}

/*
 * Switch off the magnifier WooCommerce draws for itself.
 *
 * woocommerce.css builds a magnifying glass out of two pseudo-elements on this
 * button — ::before is a 10px ring, ::after is the little handle — because the
 * button's only real content is a 🔍 emoji it hides with text-indent.
 *
 * The theme injects a proper SVG instead (della_icon('search'), the same icon
 * as the header), so leaving WooCommerce's version in place renders BOTH: a
 * ring floating above a magnifier, jammed into one 40px circle. That is the
 * doubled icon.
 *
 * text-indent has to be reset too. WooCommerce pushes it -9999px to hide the
 * emoji, and an inherited text-indent shifts the injected SVG sideways out of
 * the button.
 */
.woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery__trigger::after {
	content: none;
}

.woocommerce-product-gallery__trigger {
	text-indent: 0;
}

.woocommerce-product-gallery__trigger:hover {
	background: var(--della-accent);
	color: var(--della-accent-contrast);
}

/* --- Thumbnails --------------------------------------------------------- */

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce-product-gallery--columns-4 .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce-product-gallery--columns-5 .flex-control-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.woocommerce-product-gallery .flex-control-thumbs li {
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	inline-size: 100%;
	aspect-ratio: var(--della-product-aspect);
	object-fit: cover;
	cursor: pointer;
	background: var(--della-surface);
	border: 1px solid transparent;
	opacity: 0.6;
	transition: opacity var(--della-dur-fast) var(--della-ease),
		border-color var(--della-dur-fast) var(--della-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img.is-active,
.woocommerce-product-gallery .flex-control-thumbs li.is-active img,
.woocommerce-product-gallery [data-della-gallery-thumb].is-active img {
	opacity: 1;
	border-color: var(--della-heading);
}

/* The size-guide document, loaded into the shared modal. */
.della-sizeguide__title {
	font-size: var(--della-fs-lg);
	margin-block-end: 16px;
}

.della-sizeguide__content {
	padding: 40px 30px 34px;
	font-size: var(--della-fs-sm);
	line-height: 1.8;
}

.della-sizeguide__content table {
	inline-size: 100%;
	display: block;
	overflow-x: auto;
	font-size: var(--della-fs-sm);
}

.della-sizeguide__content th,
.della-sizeguide__content td {
	border: var(--della-line);
	padding: 9px 12px;
	text-align: start;
	white-space: nowrap;
}

.della-sizeguide__content th {
	background: var(--della-surface);
	color: var(--della-heading);
	font-weight: 600;
}

/* PhotoSwipe's own chrome sits above everything. */
.pswp {
	z-index: 200;
}

/* =========================================================================
   3. Summary
   ========================================================================= */

.della-main--shop div.product .summary {
	min-inline-size: 0;
}

/*
 * Sticky summary.
 *
 * The summary is sticky inside .della-product__top, which contains ONLY the
 * gallery and the summary. That matters: a sticky box is clamped to its
 * containing block, and while div.product also held the tabs and the related
 * products the summary was free to keep travelling down over both of them —
 * no CSS can shorten that clamp, it needs the wrapper.
 *
 * With the wrapper in place the summary simply stops when the two-column fold
 * ends, which is the real fix rather than a paint-order trick.
 */
@media (min-width: 992px) {
	.della-main--shop div.product .summary {
		position: sticky;
		inset-block-start: calc(var(--della-header-h) + 24px);
	}
}

.product_title,
.della-main--shop .product_title {
	font-size: clamp(var(--della-fs-xl), 3.4vw, var(--della-fs-2xl));
	line-height: 1.16;
	margin-block-end: 12px;
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 14px;
	font-size: var(--della-fs-sm);
}

.woocommerce-product-rating .woocommerce-review-link {
	color: var(--della-muted);
}

.summary > p.price,
.summary .price {
	display: block;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-lg);
	font-weight: 500;
	color: var(--della-heading);
	margin-block: 0 18px;
	line-height: 1.4;
}

.summary .price del {
	color: var(--della-muted);
	font-weight: 400;
	font-size: 0.82em;
	margin-inline-end: 8px;
}

.summary .price ins {
	background: none;
	text-decoration: none;
	color: var(--della-sale);
}

.woocommerce-product-details__short-description {
	color: var(--della-muted);
	font-size: var(--della-fs-base);
	line-height: 1.8;
	padding-block-end: 20px;
	margin-block-end: 20px;
	border-block-end: var(--della-line);
}

.woocommerce-product-details__short-description > * + * {
	margin-block-start: 0.9em;
}

.woocommerce-product-details__short-description ul {
	padding-inline-start: 1.1em;
	list-style: disc;
}

/* =========================================================================
   4. Variations and add-to-cart form
   ========================================================================= */

form.cart {
	margin-block-end: 6px;
}

table.variations {
	inline-size: 100%;
	margin-block-end: 18px;
	border: 0;
	display: block;
}

table.variations tbody,
table.variations tr {
	display: block;
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

table.variations tr + tr {
	margin-block-start: 16px;
	display: block;
}

table.variations th.label label {
	display: block;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
	margin-block-end: 8px;
}

table.variations td.value select {
	min-block-size: 46px;
}

.reset_variations {
	display: inline-block;
	margin-block-start: 10px;
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

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

.woocommerce-variation {
	margin-block-end: 4px;
}

.woocommerce-variation-price {
	font-size: var(--della-fs-lg);
	font-weight: 500;
	color: var(--della-heading);
	margin-block-end: 10px;
	display: block;
}

.woocommerce-variation-price del {
	color: var(--della-muted);
	font-size: 0.8em;
	font-weight: 400;
	margin-inline-end: 8px;
}

.woocommerce-variation-price ins {
	background: none;
	text-decoration: none;
	color: var(--della-sale);
}

.woocommerce-variation-availability {
	margin-block-end: 10px;
}

.woocommerce-variation-description {
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	margin-block-end: 12px;
}

/* --- Quantity + submit -------------------------------------------------- */

form.cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: var(--della-line);
	border-radius: var(--della-radius);
	block-size: 52px;
	overflow: hidden;
	flex: none;
}

form.cart .quantity .qty {
	inline-size: 62px;
	block-size: 100%;
	min-block-size: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	text-align: center;
	font-size: var(--della-fs-base);
	font-weight: 500;
	color: var(--della-heading);
	background: transparent;
}

form.cart .quantity .qty:focus {
	box-shadow: none;
}

/* Optional stepper buttons, if JS injects them. */
form.cart .quantity .della-qty__btn {
	inline-size: 40px;
	block-size: 100%;
}

/*
 * The at-max treatment is declared on .della-qty in components.css, but the
 * product page's own `form.cart .quantity` rules are more specific and would
 * win for both the border and the number. Restate them here at matching weight
 * rather than reaching for !important.
 */
form.cart .quantity.is-at-max {
	border-color: rgba(var(--della-accent-alt-rgb), 0.55);
}

form.cart .quantity.is-at-max .qty {
	color: var(--della-accent-alt);
}

.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-block-size: 52px;
	padding-inline: 28px;
	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;
	letter-spacing: var(--della-tracking);
	text-transform: var(--della-button-transform);
	cursor: pointer;
	transition: background-color var(--della-dur) var(--della-ease),
		border-color var(--della-dur) var(--della-ease);
}

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

.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled] {
	background: var(--della-surface);
	border-color: var(--della-border);
	color: var(--della-muted);
	cursor: not-allowed;
}

form.cart,
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

/* Grouped and variable forms keep their tables full-width above the row. */
form.cart > table.variations,
form.cart > .woocommerce-variation-wrapper,
form.cart > .single_variation_wrap {
	inline-size: 100%;
	flex: 1 1 100%;
}

.single_variation_wrap {
	display: block;
}

/*
 * The buy sequence on a variable product, in the order PHP now prints it:
 *
 *   quantity counter → size guide + fit note → Add to bag → delivery note
 *
 * The parent form is a wrapping flex row (right for a simple product, where the
 * counter and the button share a line). Here that would leave the counter
 * stranded on a line of its own with the fit row squeezed beside it, so this
 * wrapper becomes a single column and each step gets a full-width row. Grid
 * gap — not margins — sets the rhythm, so a step that an owner leaves empty
 * (no fit note, no delivery note) simply disappears without leaving a hole.
 */
.woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	inline-size: 100%;
	margin-block-start: 4px;
}

/* The counter is a compact object; it must not stretch across the column. */
.woocommerce-variation-add-to-cart > .quantity {
	justify-self: start;
}

/* --- Size guide + fit note --------------------------------------------- */

.della-fitrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	/* Hairlines fence the advisory line off from the choice above and the
	   commitment below, so the eye reads three distinct steps. */
	padding-block: 14px;
	border-block: var(--della-line-hair);
}

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

/* The link carries its own top margin when it stands alone elsewhere. */
.della-fitrow .della-sizeguide-link {
	margin-block-start: 0;
	flex: none;
}

.della-fitnote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	/* Owner-edited and variable length: let it take the rest of the row and
	   wrap onto its own line when there is no room beside the link. */
	flex: 1 1 220px;
	font-size: var(--della-fs-sm);
	line-height: 1.5;
	color: var(--della-muted);
	text-align: start;
}

.della-fitnote .della-icon {
	color: var(--della-accent-alt);
	/* Nudge the tick onto the first line's optical centre. */
	margin-block-start: 0.15em;
}

/* --- Delivery note ------------------------------------------------------ */

.della-deliverynote {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var(--della-fs-sm);
	line-height: 1.5;
	color: var(--della-muted);
}

.della-deliverynote .della-icon {
	color: var(--della-accent-alt);
	margin-block-start: 0.1em;
}

.della-deliverynote strong {
	color: var(--della-heading);
	font-weight: 600;
}

/* The estimate reads as a second clause, not a second paragraph. */
.della-deliverynote span {
	display: block;
	min-inline-size: 0;
}

/* --- WhatsApp, size guide, meta ----------------------------------------- */

.summary .della-btn--whatsapp {
	inline-size: 100%;
	margin-block-start: 12px;
}

.della-sizeguide-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: 10px;
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	border-block-end: 1px solid var(--della-border);
	padding-block-end: 3px;
}

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

/*
 * Both of these are small text controls sitting on their own line. On touch
 * they need a taller strike area; padding gives it without changing how the
 * underline reads, since the rule sits on the text's own box.
 */
@media (max-width: 991px) {
	.della-sizeguide-link {
		padding-block: 10px 6px;
	}

	/*
	 * WooCommerce toggles the "Clear" link with an inline visibility style, so
	 * it holds its box even when hidden. Only give it a touch-sized strike area
	 * once it is actually on screen — sizing it unconditionally parks 44px of
	 * dead space under the swatches for the whole life of the page.
	 */
	.reset_variations:not([style*="hidden"]) {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}

.della-product-meta {
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: var(--della-line);
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	display: grid;
	gap: 6px;
}

.della-product-meta span {
	display: inline-block;
	min-inline-size: 92px;
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
}

.della-product-meta a {
	color: var(--della-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--della-border);
}

.della-product-meta a:hover {
	color: var(--della-heading);
}

/* =========================================================================
   5. Tabs — a horizontal strip on desktop, an accordion on mobile
   ========================================================================= */

.woocommerce-tabs {
	margin-block-start: var(--della-block-gap, clamp(48px, 7vw, 88px));
	padding-block-start: clamp(28px, 4vw, 48px);
	border-block-start: var(--della-line);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	border-block-end: var(--della-line);
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-tabs ul.tabs li a {
	position: relative;
	display: block;
	padding: 13px 20px;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	white-space: nowrap;
}

.woocommerce-tabs ul.tabs li a::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);
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--della-heading);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--della-heading);
}

.woocommerce-tabs ul.tabs li.active a::after {
	transform: scaleX(1);
}

.woocommerce-Tabs-panel {
	max-inline-size: 820px;
	margin-inline: auto;
	font-size: var(--della-fs-base);
	line-height: 1.85;
	color: var(--della-text);
	animation: della-fade-in var(--della-dur) var(--della-ease) both;
}

.woocommerce-Tabs-panel > h2 {
	font-size: var(--della-fs-lg);
	margin-block-end: 16px;
}

.woocommerce-Tabs-panel > * + * {
	margin-block-start: 1em;
}

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
	padding-inline-start: 1.2em;
}

.woocommerce-Tabs-panel ul { list-style: disc; }
.woocommerce-Tabs-panel ol { list-style: decimal; }

/* Attributes table. */
table.shop_attributes {
	inline-size: 100%;
	font-size: var(--della-fs-sm);
}

table.shop_attributes th,
table.shop_attributes td {
	padding: 11px 14px;
	border-block-end: var(--della-line);
	text-align: start;
	vertical-align: top;
}

table.shop_attributes th {
	inline-size: 34%;
	font-weight: 600;
	color: var(--della-heading);
	text-transform: uppercase;
	font-size: var(--della-fs-xs);
	letter-spacing: var(--della-tracking);
}

table.shop_attributes td p {
	margin: 0;
}

/*
 * Below 768px the tab list is dissolved with display:contents, which promotes
 * every <li> into a sibling of the panels. `order` then interleaves them, so
 * the exact same markup reads as an accordion — heading, panel, heading, panel
 * — with no duplicated DOM and no reliance on WooCommerce's tab keys.
 * WooCommerce's own tabs script keeps showing one panel at a time, which is
 * precisely the behaviour an accordion wants.
 */
@media (max-width: 767px) {
	.woocommerce-tabs {
		display: flex;
		flex-direction: column;
	}

	.woocommerce-tabs ul.tabs {
		display: contents;
	}

	.woocommerce-tabs ul.tabs li {
		border-block-end: var(--della-line);
	}

	.woocommerce-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 2px;
		color: var(--della-heading);
		white-space: normal;
		text-align: start;
	}

	.woocommerce-tabs ul.tabs li a::after {
		content: "+";
		position: static;
		inline-size: auto;
		block-size: auto;
		background: none;
		transform: none;
		font-size: var(--della-fs-md);
		font-weight: 400;
		color: var(--della-muted);
		line-height: 1;
	}

	.woocommerce-tabs ul.tabs li.active a::after {
		content: "–";
		transform: none;
	}

	.woocommerce-Tabs-panel {
		padding-block: 4px 22px;
	}

	.woocommerce-tabs ul.tabs li:nth-child(1) { order: 1; }
	.woocommerce-tabs > div:nth-of-type(1)    { order: 2; }
	.woocommerce-tabs ul.tabs li:nth-child(2) { order: 3; }
	.woocommerce-tabs > div:nth-of-type(2)    { order: 4; }
	.woocommerce-tabs ul.tabs li:nth-child(3) { order: 5; }
	.woocommerce-tabs > div:nth-of-type(3)    { order: 6; }
	.woocommerce-tabs ul.tabs li:nth-child(4) { order: 7; }
	.woocommerce-tabs > div:nth-of-type(4)    { order: 8; }
}

/*
 * product.js replaces the tab strip with real accordion triggers below 768px
 * (it hides ul.tabs and inserts a button before each panel). When that runs,
 * the CSS-only interleave above is redundant — .is-accordion switches it off.
 */
.della-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	inline-size: 100%;
	padding: 16px 2px;
	border-block-end: var(--della-line);
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
	text-align: start;
}

.della-accordion__trigger::after {
	content: "+";
	font-size: var(--della-fs-md);
	font-weight: 400;
	line-height: 1;
	color: var(--della-muted);
}

.della-accordion__trigger.is-open::after {
	content: "\2013";
}

.woocommerce-tabs.is-accordion {
	display: block;
}

.woocommerce-tabs.is-accordion .woocommerce-Tabs-panel {
	padding-block: 12px 24px;
	border-block-end: var(--della-line);
}

/* =========================================================================
   6a. Sticky add-to-cart bar (built by product.js)
   ========================================================================= */

.della-stickyatc {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 68;
	background: var(--della-bg);
	border-block-start: var(--della-line);
	box-shadow: 0 -2px 18px rgba(var(--della-text-rgb), 0.08);
	padding-block: 10px;
	padding-block-end: calc(10px + env(safe-area-inset-bottom));
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--della-dur) var(--della-ease),
		transform var(--della-dur) var(--della-ease-out);
}

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

.has-mobile-bar .della-stickyatc {
	inset-block-end: var(--della-mobilebar-h);
}

@media (min-width: 992px) {
	.has-mobile-bar .della-stickyatc {
		inset-block-end: 0;
	}
}

.della-stickyatc__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.della-stickyatc__info {
	display: grid;
	min-inline-size: 0;
}

.della-stickyatc__name {
	font-size: var(--della-fs-sm);
	font-weight: 600;
	color: var(--della-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.della-stickyatc__price {
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
}

.della-stickyatc__btn {
	flex: none;
	min-block-size: 44px;
	padding-inline: 26px;
}

@media (max-width: 480px) {
	.della-stickyatc__btn {
		flex: 1 1 auto;
		max-inline-size: 190px;
	}
}

/* =========================================================================
   6. Reviews
   ========================================================================= */

#reviews {
	display: grid;
	gap: 34px;
}

@media (min-width: 900px) {
	#reviews {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.woocommerce-Reviews-title {
	font-size: var(--della-fs-lg);
	margin-block-end: 18px;
}

ol.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 22px;
}

ol.commentlist li {
	list-style: none;
}

.comment_container {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 14px;
	padding-block-end: 20px;
	border-block-end: var(--della-line);
}

.comment_container img.avatar {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--della-surface);
}

.comment-text {
	min-inline-size: 0;
}

.woocommerce-review__author {
	font-weight: 600;
	color: var(--della-heading);
	font-size: var(--della-fs-sm);
}

.woocommerce-review__published-date,
.woocommerce-review__dash {
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

.comment-text .description {
	margin-block-start: 8px;
	font-size: var(--della-fs-sm);
	line-height: 1.75;
}

.comment-text .star-rating {
	margin-block-end: 6px;
}

#review_form_wrapper {
	background: var(--della-surface);
	border-radius: var(--della-radius);
	padding: clamp(20px, 4vw, 32px);
}

#review_form .comment-reply-title {
	display: block;
	font-family: var(--della-font-heading);
	font-size: var(--della-fs-lg);
	color: var(--della-heading);
	margin-block-end: 14px;
}

.comment-form {
	display: grid;
	gap: 14px;
}

.comment-form label {
	display: block;
	margin-block-end: 5px;
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
}

.comment-form .required {
	color: var(--della-sale);
}

.comment-form-rating .stars {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-form-rating .stars a {
	font-size: var(--della-fs-md);
	color: var(--della-border);
	text-decoration: none;
}

.comment-form-rating .stars a:hover,
.comment-form-rating .stars.selected a.active,
.comment-form-rating .stars.selected a:not(.active) {
	color: var(--della-accent-alt);
}

.comment-form .form-submit input[type="submit"] {
	min-block-size: 48px;
	padding-inline: 30px;
	border: 1px solid var(--della-accent);
	border-radius: var(--della-radius);
	background: var(--della-accent);
	color: var(--della-accent-contrast);
	font-size: var(--della-fs-btn);
	letter-spacing: var(--della-tracking);
	text-transform: var(--della-button-transform);
	cursor: pointer;
	transition: background-color var(--della-dur) var(--della-ease);
}

.comment-form .form-submit input[type="submit"]:hover {
	background: var(--della-accent-hover);
}

/* =========================================================================
   7. Related / upsell rows
   ========================================================================= */

.related.products,
.up-sells.products {
	margin-block-start: var(--della-block-gap, clamp(48px, 7vw, 88px));
	padding-block-start: clamp(28px, 4vw, 48px);
	border-block-start: var(--della-line);
}

.related.products > h2,
.up-sells.products > h2 {
	position: relative;
	text-align: center;
	font-size: clamp(var(--della-fs-lg), 3.2vw, var(--della-fs-xl));
	padding-block-end: 18px;
	margin-block-end: 34px;
}

.related.products > h2::after,
.up-sells.products > h2::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	margin-inline: auto; /* Centres without translateX, so RTL needs no override. */
	inline-size: 30px;
	block-size: 2px;
	background: var(--della-accent-alt);
}

.related.products ul.products,
.up-sells.products ul.products {
	border-block-start: 0;
	margin-block-start: 0;
	padding-block-start: 0;
}

/* =========================================================================
   Tab footer links
   =========================================================================
   "Read the full policy" and "Open the full size guide" are real anchors, but
   inside a tab panel they inherited body colour with no underline, so they did
   not read as links at all. Given underline + accent so they are unmistakably
   clickable, and an arrow that moves on hover.
   ========================================================================= */

.della-tab__link {
	margin-block-start: 22px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--della-border);
}

.della-tab__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--della-heading);
	font-size: var(--della-fs-sm);
	font-weight: 500;
	letter-spacing: var(--della-tracking);
	text-transform: var(--della-button-transform);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(var(--della-text-rgb), .35);
	transition: color var(--della-dur) var(--della-ease),
		text-decoration-color var(--della-dur) var(--della-ease);
}

.della-tab__link a::after {
	content: "→";
	display: inline-block;
	transition: transform var(--della-dur) var(--della-ease);
}

[dir="rtl"] .della-tab__link a::after {
	content: "←";
}

.della-tab__link a:hover,
.della-tab__link a:focus-visible {
	color: var(--della-accent-alt);
	text-decoration-color: currentColor;
}

.della-tab__link a:hover::after {
	transform: translateX(4px);
}

[dir="rtl"] .della-tab__link a:hover::after {
	transform: translateX(-4px);
}

/* =========================================================================
   8. Sale / new badges on the single product

   The layout bug is gone: WooCommerce's `<span class="onsale">` is no longer
   a direct child of the two-column grid, so it can no longer claim a grid
   cell and shove the gallery into column two. What is left is presentation —
   the theme's own badge stack now renders inside the gallery and has to read
   exactly like the badge stack on a homepage card.
   ========================================================================= */

/*
 * The stack is absolutely positioned, and its containing block is whichever
 * ancestor inside the gallery is positioned — .flex-viewport once flexslider
 * has run, the gallery itself before that. Both share the gallery's top-start
 * corner, so one offset serves every state. `inset-inline-start` mirrors under
 * RTL on its own.
 */
.woocommerce-product-gallery .della-badges,
.della-product__top .della-badges {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	inset-inline-end: auto;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	inline-size: auto;
	max-inline-size: calc(100% - 28px);
	margin: 0;
	pointer-events: none;
}

/*
 * Same size, weight and radius as the card badge in components.css — the
 * product page is a bigger canvas, so only the padding grows.
 */
.woocommerce-product-gallery .della-badge {
	padding: 6px 12px;
	border-radius: var(--della-radius-sm);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * The zoom trigger lives in the opposite corner; keep the two off each other
 * even when the gallery is narrow.
 */
.woocommerce-product-gallery__trigger {
	z-index: 4;
}

/*
 * Belt and braces: if WooCommerce's own flash ever comes back — a plugin, a
 * template override — it must never again be laid out as a grid item. Pull it
 * out of flow wherever it lands inside the fold.
 */
.della-product__top > span.onsale,
.della-product__top .woocommerce-product-gallery > span.onsale {
	position: absolute;
	z-index: 4;
	inset-block-start: 14px;
	inset-inline-start: 14px;
}

@media (max-width: 767px) {
	.woocommerce-product-gallery .della-badges,
	.della-product__top .della-badges {
		inset-block-start: 10px;
		inset-inline-start: 10px;
		gap: 5px;
		max-inline-size: calc(100% - 20px);
	}

	.woocommerce-product-gallery .della-badge {
		padding: 5px 10px;
		font-size: 11px;
	}
}

/* =========================================================================
   Product badges
   =========================================================================
   The badge stack is a SIBLING rendered immediately before the gallery, not a
   child of it — see the comment on della_single_badges() for why.

   `position: absolute` is what keeps it out of the grid: an absolutely
   positioned child of a grid container is removed from flow and never creates
   a grid item, so it cannot claim a column. This is the same reason
   WooCommerce's own span.onsale broke the layout when it was left static.
   ========================================================================= */

.della-product__top {
	position: relative;
}

.della-product__top > .della-badges {
	position: absolute;
	z-index: 4;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	pointer-events: none;
}