/**
 * Corrects the handful of controls the theme restyles inside the product layout.
 * Scoped to specific components; !important is used only on the exact properties
 * the theme's global button style forces (background, border, color).
 *
 * box-shadow is never touched here. The design's own ring- and shadow-
 * utilities are implemented with box-shadow, so overriding it would cancel them.
 */

/* The sticky mobile add-to-cart bar is position:fixed and sits on top of
   whatever is scrolled to the bottom of the viewport, hiding the real site
   footer behind it. Push the footer down by the bar's own height. */
@media (max-width: 1023px) {
	body:has(.zivaldi-product aside[aria-label='Add to cart']) {
		padding-bottom: 84px !important;
	}
}

/* Size selector. text-sm font-semibold in the mockup = 0.875rem / 600. */
.zivaldi-product [data-size-value] {
	background: var(--card, #fff) !important;
	border: 1px solid var(--border, #e3e0da) !important;
	border-radius: 0 !important;
	color: var(--ink, #16181d) !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	padding: 0 !important;
	text-transform: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.zivaldi-product [data-size-value]:hover:not(:disabled) {
	border-color: var(--gold, #b99a5b) !important;
	color: var(--gold-deep, #8a6f38) !important;
}

.zivaldi-product [data-size-value][aria-checked='true'] {
	background: var(--ink, #16181d) !important;
	border-color: var(--ink, #16181d) !important;
	color: #fff !important;
}

.zivaldi-product [data-size-value]:disabled {
	cursor: not-allowed;
	opacity: 0.4;
	text-decoration: line-through;
}

/* Add to cart */
.zivaldi-product [data-add-to-cart] {
	background: var(--muted, #eceae5) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--muted-foreground, #6b6a66) !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em;
	padding: 0 !important;
	text-transform: none !important;
	width: 100%;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* mt-6 (calc(var(--spacing) * 6)) is not resolving here, same as the
	   thumbnail sizing utilities - pin the gap above the button directly. */
	margin-top: 24px !important;
}

.zivaldi-product [data-add-to-cart]:not(:disabled) {
	background: linear-gradient( 135deg, #c9a86a 0%, #b99a5b 100% ) !important;
	color: #16181d !important;
	cursor: pointer;
}

/* Size guide link-style button */
/* text-xs font-semibold = 0.75rem / 600. */
.zivaldi-product [aria-label='Open size guide'] {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--muted-foreground, #6b6a66) !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	padding: 0 !important;
}

.zivaldi-product [aria-label='Open size guide']:hover {
	background: transparent !important;
	color: var(--gold-deep, #8a6f38) !important;
}

/* Quantity stepper */
.zivaldi-product [data-qty-group] button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
	font-family: inherit !important;
	padding: 0 !important;
	width: 2.75rem !important;
	height: 3rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Sticky mobile add-to-cart bar: the row wasn't actually centering its two
   children (the flex items-center utility not resolving, same as elsewhere),
   so the fixed-height quantity box and button sat at different baselines.
   Force alignment on the row itself instead of just matching heights. */
.zivaldi-product aside[aria-label='Add to cart'] > div {
	display: flex !important;
	align-items: center !important;
}

.zivaldi-product aside[aria-label='Add to cart'] [data-qty-group] {
	box-sizing: border-box !important;
	height: 48px !important;
	margin: 0 !important;
	align-self: center !important;
}

/* Sticky-bar add-to-cart in the mockup is text-xs font-bold tracking-[0.15em]
   (0.75rem / 700), different from the main button (text-sm / 600). */
.zivaldi-product aside[aria-label='Add to cart'] [data-add-to-cart] {
	box-sizing: border-box !important;
	height: 48px !important;
	margin: 0 !important;
	align-self: center !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.15em !important;
	padding: 0 0.75rem !important;
}

.zivaldi-product [data-qty-group] button:hover:not(:disabled) {
	background: transparent !important;
	color: var(--gold-deep, #8a6f38) !important;
}

/* Desktop thumbnail rail: gap-2 (calc(var(--spacing) * 2)) is not resolving
   here either, so the stacked thumbnails and arrows touch with no spacing,
   and overflow-hidden/aspect-square are not clipping the <img> to the
   80px box either, so the source photo renders past its own border. */
.zivaldi-product .hidden.lg\:flex.flex-col.gap-2.w-20 {
	gap: 8px !important;
}

.zivaldi-product .hidden.lg\:flex.flex-col.gap-2.w-20 [data-thumb] {
	width: 80px !important;
	height: 80px !important;
	flex: 0 0 80px !important;
	overflow: hidden !important;
}

.zivaldi-product .hidden.lg\:flex.flex-col.gap-2.w-20 [data-thumb] img {
	width: 80px !important;
	height: 80px !important;
	max-width: 80px !important;
	object-fit: cover !important;
}

.zivaldi-product [role='toolbar'][aria-label='Product image thumbnails'] {
	gap: 8px !important;
}

/* Gallery thumbnails and arrows */
.zivaldi-product [data-thumb],
.zivaldi-product [aria-label='Previous image'],
.zivaldi-product [aria-label='Next image'] {
	background: transparent !important;
	border-radius: 0 !important;
	color: inherit !important;
	padding: 0 !important;
}

/* Flex items default to min-width:auto, so a thumbnail sitting in the
   flex-wrap mobile row would refuse to shrink below its <img>'s intrinsic
   (full-resolution) width even with an explicit w-16 set. Without this the
   thumbnail balloons to the source photo's native size and blows out the row. */
.zivaldi-product [data-thumb] {
	min-width: 0 !important;
	max-width: 100% !important;
}

.zivaldi-product [data-thumb] img {
	max-width: 100% !important;
}

/* w-16/h-16/overflow-hidden are not resolving to a fixed, clipped box on the
   mobile thumbnail row for an unknown reason, so pin it directly instead of
   depending on those utility classes. */
@media (max-width: 1023px) {
	.zivaldi-product [role='toolbar'][aria-label='Product image thumbnails'] [data-thumb] {
		width: 64px !important;
		height: 64px !important;
		flex: 0 0 64px !important;
		overflow: hidden !important;
	}

	.zivaldi-product [role='toolbar'][aria-label='Product image thumbnails'] [data-thumb] img {
		width: 64px !important;
		height: 64px !important;
		max-width: 64px !important;
		object-fit: cover !important;
	}
}

.zivaldi-product [data-thumb] {
	border-color: var(--border, #e1ded7) !important;
}

.zivaldi-product [data-thumb]:hover {
	border-color: var(--gold, #ae986c) !important;
}

.zivaldi-product [data-thumb][aria-pressed='true'] {
	border-color: var(--gold, #ae986c) !important;
}

.zivaldi-product [aria-label='Previous image'],
.zivaldi-product [aria-label='Next image'] {
	border-color: var(--border, #e1ded7) !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.zivaldi-product [aria-label='Previous image'] svg,
.zivaldi-product [aria-label='Next image'] svg {
	margin: 0 auto;
}

.zivaldi-product [aria-label^='Open full-size view'] {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
}

/* Fill the flex-stretched gallery pane exactly; aspect-ratio sizing can
   leave a gap between the image and the pane's own height. Only the
   desktop layout (lg:flex, 1024px+) stretches the pane to a fixed height -
   on mobile the image has no such height to fill, so forcing aspect-ratio:
   auto there discards the intended 3:4 portrait crop and lets the image's
   own dimensions distort the layout instead. */
@media (min-width: 1024px) {
	.zivaldi-product [aria-label^='Open full-size view'] {
		height: 100% !important;
	}

	.zivaldi-product [data-main-image] {
		height: 100% !important;
		width: 100% !important;
		aspect-ratio: auto !important;
	}
}

/* Below the desktop breakpoint, force the intended portrait crop explicitly
   instead of relying on the Tailwind aspect-[3/4] utility to win the cascade. */
@media (max-width: 1023px) {
	.zivaldi-product [data-main-image] {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4 !important;
		max-height: none !important;
		transform: none !important;
	}

	.zivaldi-product [aria-label^='Open full-size view'] {
		height: auto !important;
	}
}

/* Lightbox */
html:has(.zvd-lightbox.is-open) {
	overflow: hidden;
}

.zvd-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: #0a0e14;
	opacity: 1;
}

.zvd-lightbox.is-open {
	display: flex;
}

.zvd-lightbox-image {
	max-width: 85vw;
	max-height: 78vh;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.zvd-lightbox-close,
.zvd-lightbox-prev,
.zvd-lightbox-next {
	position: absolute !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(255,255,255,.4) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-family: inherit !important;
	padding: 0 !important;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.zvd-lightbox-close:hover,
.zvd-lightbox-prev:hover,
.zvd-lightbox-next:hover {
	background-color: rgba(255,255,255,.12) !important;
	border-color: var(--gold, #ae986c) !important;
}

.zvd-lightbox-dot {
	background-color: rgba(255,255,255,.35) !important;
}

.zvd-lightbox-dot.is-active {
	background-color: var(--gold, #ae986c) !important;
}

.zvd-lightbox-close {
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
}

.zvd-lightbox-prev,
.zvd-lightbox-next {
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
}

.zvd-lightbox-prev { left: 24px; }
.zvd-lightbox-next { right: 24px; }

.zvd-lightbox-dots {
	position: absolute;
	left: 50%;
	bottom: 28px;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}

.zvd-lightbox-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: rgba(255,255,255,.35);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

.zvd-lightbox-dot.is-active {
	background-color: var(--gold, #ae986c);
}

@media (max-width: 640px) {
	.zvd-lightbox-prev,
	.zvd-lightbox-next {
		width: 40px;
		height: 40px;
	}
	.zvd-lightbox-prev { left: 8px; }
	.zvd-lightbox-next { right: 8px; }
}

/* "MORE" / "LESS" description toggle */
.zivaldi-product [aria-controls='hyperion-description-details'] {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--gold, #ae986c) !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: .375rem !important;
}

.zivaldi-product [aria-controls='hyperion-description-details']:hover {
	background: transparent !important;
	color: var(--gold-deep, #8a6f38) !important;
}

.zivaldi-product #hyperion-description-details {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .3s ease-out, opacity .3s ease-out;
}

.zivaldi-product #hyperion-description-details.is-open {
	opacity: 1;
}

/* Accordion triggers (Key Features, Fit & Sizing, etc.) */
.zivaldi-product [data-accordion-trigger] {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
	font-family: inherit !important;
	text-transform: none !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}

.zivaldi-product [data-accordion-trigger]:hover {
	background: transparent !important;
}

/* Zoom / magnify affordance on the main image */
.zivaldi-product .group button[aria-hidden='true'] {
	background: var(--background, rgba(255,255,255,.9)) !important;
	color: var(--gold-deep, #8a6f38) !important;
}

/* Base font: the mockup renders in Inter for everything except the display
   headings (Cormorant Garamond via .font-display). Set it on the wrapper so
   the page matches the mockup instead of inheriting the site's theme font. */
.zivaldi-product {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* All display headings use Cormorant Garamond in the mockup - force it so the
   site theme's own heading font can't leak in. */
.zivaldi-product .font-display {
	font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
}

/* Product title: font-display text-4xl sm:text-5xl font-medium leading-tight. */
.zivaldi-product h1.font-display {
	font-size: 2.25rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
}

@media (min-width: 640px) {
	.zivaldi-product h1.font-display {
		font-size: 3rem !important;
	}
}

/* "THE ZIVALDI DIFFERENCE" section heading: font-display text-3xl sm:text-5xl. */
.zivaldi-product h2.font-display {
	font-size: 1.875rem !important;
	line-height: 1.05 !important;
}

@media (min-width: 640px) {
	.zivaldi-product h2.font-display {
		font-size: 3rem !important;
	}
}

/* Copy pulled from the product's own WooCommerce content is wrapped in
   .zvd-rich. The theme styles bare p/ul/li, so pin everything back to the
   wrapper's own type scale and control the spacing here. */
.zivaldi-product .zvd-rich > :first-child {
	margin-top: 0 !important;
}

.zivaldi-product .zvd-rich > :last-child {
	margin-bottom: 0 !important;
}

.zivaldi-product .zvd-rich p,
.zivaldi-product .zvd-rich li {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.zivaldi-product .zvd-rich p {
	margin: 0 0 .75rem !important;
}

.zivaldi-product .zvd-rich ul,
.zivaldi-product .zvd-rich ol {
	margin: 0 0 .75rem !important;
	padding-left: 1.125rem !important;
}

.zivaldi-product .zvd-rich li {
	margin: 0 0 .25rem !important;
}

/* "The Design" / "Performance & Construction" row headings inside the MORE
   panel. The mockup renders these as `text-sm font-bold tracking-wide
   text-ink mb-1`; the theme's own h3 rule wins over those utilities, so pin
   the resolved values:
     text-sm        -> font-size .875rem, line-height calc(1.25/.875) = 1.25rem
     font-bold      -> --font-weight-bold 700
     tracking-wide  -> --tracking-wide .025em
     text-ink       -> --ink #0c1827
     mb-1           -> --spacing * 1 = .25rem
   Font family is the layout's --font-sans (Inter), not the theme's heading
   face. */
.zivaldi-product #hyperion-description-details h3 {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	line-height: 1.25rem !important;
	letter-spacing: .025em !important;
	font-style: normal !important;
	text-transform: none !important;
	margin: 0 0 .25rem !important;
	padding: 0 !important;
	color: var(--ink, #0c1827) !important;
}

/* -------- Wishlist button (YITH) --------
   The plugin renders its own button markup client-side. Keep it as a quiet
   text link under the add-to-cart rather than a second competing button. */
.zivaldi-product [data-zvd-wishlist] a,
.zivaldi-product [data-zvd-wishlist] button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: .75rem !important;
	font-weight: 600 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	color: var(--muted-foreground, #565e69) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: .375rem !important;
	box-shadow: none !important;
}

.zivaldi-product [data-zvd-wishlist] a:hover,
.zivaldi-product [data-zvd-wishlist] button:hover {
	color: var(--gold-deep, #8a6f38) !important;
	background: transparent !important;
}

.zivaldi-product [data-zvd-wishlist] .yith-wcwl-icon,
.zivaldi-product [data-zvd-wishlist] svg {
	width: 1rem !important;
	height: 1rem !important;
}

/* -------- Back-in-stock form (YITH Waitlist) --------
   Shown only when every size is sold out. The plugin ships no stylesheet on
   this template and hard-codes a brown heading colour inline, so everything
   is restated here to match the rest of the buy box. */
.zivaldi-product [data-zvd-waitlist] {
	border: 1px solid var(--border, #e1ded7) !important;
	padding: 1rem 1.25rem !important;
}

/* The theme gives the plugin's own wrapper a filled, rounded, padded box of
   its own, which sat inside the border above and doubled the spacing. Strip
   it back so there is a single container. */
.zivaldi-product [data-zvd-waitlist] #yith-wcwtl-output {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-msg h4,
.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-msg h4 span {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	letter-spacing: .025em !important;
	line-height: 1.25rem !important;
	color: var(--ink, #0c1827) !important;
	margin: 0 0 .375rem !important;
}

/* No bottom margin here - the flex container's own row gap already separates
   this from the consent line, and the two together read as a large hole. */
.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-msg p {
	font-size: .8125rem !important;
	line-height: 1.5 !important;
	color: var(--muted-foreground, #565e69) !important;
	margin: 0 !important;
}

/* The plugin renders two different shapes: signed-out visitors get a <form>
   with an email field, a submit input and the consent line; signed in there
   is no form at all, no email field, and a plain <a> as the button.
   The outer wrapper is left as a plain block and every gap is set as an
   explicit margin - stacking it with flex gaps meant the spacing depended on
   which elements happened to be present, which is exactly what differs
   between those two cases. */
.zivaldi-product [data-zvd-waitlist] #yith-wcwtl-output {
	display: block !important;
	margin: 0 !important;
}

.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-msg {
	display: block !important;
	margin: 0 0 .625rem !important;
}

.zivaldi-product [data-zvd-waitlist] label[for='yith-wcwtl-email'] {
	display: block !important;
	margin: 0 0 .625rem !important;
}

.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-notices {
	margin: .75rem 0 0 !important;
}

/* Nothing to show until a submission is answered; without this it still
   reserves a line. */
.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-notices:empty {
	display: none !important;
}

/* Signed out only: keeps the email field, consent and button in that order. */
.zivaldi-product [data-zvd-waitlist] form {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
	margin: 0 !important;
}

.zivaldi-product [data-zvd-waitlist] input[type='email'] {
	width: 100% !important;
	box-sizing: border-box !important;
	height: 3rem !important;
	padding: 0 .875rem !important;
	border: 1px solid var(--border, #e1ded7) !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: inherit !important;
	font-size: .875rem !important;
	color: var(--ink, #0c1827) !important;
}

.zivaldi-product [data-zvd-waitlist] input[type='email']:focus {
	outline: none !important;
	border-color: var(--gold, #ae986c) !important;
}

/* Signed-in visitors get an <a> here instead of a submit input, so both are
   styled, and the underline the anchor would otherwise inherit is removed. */
.zivaldi-product [data-zvd-waitlist] .yith-wcwtl-submit {
	/* Signed out, the plugin puts the button before the consent line; signed
	   in it comes after. Order them the same way round either way, with the
	   consent read before the button that acts on it. */
	order: 2 !important;
	/* Centred in both shapes: auto side margins handle the signed-in case,
	   where the button is a block-level child, and align-self handles the
	   signed-out one, where it sits in the form's flex column. */
	margin: .75rem auto 0 !important;
	align-self: center !important;
	display: flex !important;
	width: fit-content !important;
	align-items: center !important;
	justify-content: center !important;
	height: 3rem !important;
	padding: 0 1.5rem !important;
	border: 0 !important;
	border-radius: .25rem !important;
	background: linear-gradient( 135deg, #c9a86a 0%, #b99a5b 100% ) !important;
	color: #16181d !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: .6875rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .15em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

/* Consent row sits on its own line, above the button. */
.zivaldi-product [data-zvd-waitlist] label[for='yith-wcwtl-policy-check'] {
	order: 1 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: .5rem !important;
	margin: 0 !important;
	width: 100% !important;
	font-size: .75rem !important;
	line-height: 1.4 !important;
	color: var(--muted-foreground, #565e69) !important;
}

.zivaldi-product [data-zvd-waitlist] input[type='checkbox'] {
	margin: .125rem 0 0 !important;
	flex: 0 0 auto !important;
}

/* Links in the copy only - the button above opts out by class. */
.zivaldi-product [data-zvd-waitlist] a:not(.yith-wcwtl-submit) {
	color: var(--gold-deep, #8a6f38) !important;
	text-decoration: underline !important;
}

/* -------- Main gallery image --------
   Supersedes the desktop rule further up that stretched the photo to fill
   its pane. That pane is a flex child sitting next to the buy box, so it
   grows to whatever height the buy box is - and on a sold-out product, where
   the back-in-stock form makes the buy box much taller, object-cover was
   cropping the garment badly.

   The photo now keeps its 3:4 shape at every width, and the pane is told not
   to stretch, so there is no leftover gap for the stretch to have been
   covering in the first place. */
.zivaldi-product [data-main-image] {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
}

@media (min-width: 1024px) {
	.zivaldi-product [data-main-image] {
		height: auto !important;
		aspect-ratio: 3 / 4 !important;
	}

	.zivaldi-product [aria-label^='Open full-size view'] {
		height: auto !important;
	}

	.zivaldi-product .flex-1.bg-surface {
		align-self: flex-start !important;
	}
}

/* -------- Checkout trust badges (Secure Checkout / 30-Day / SSL) --------
   The theme's own font rules beat the layout's `text-[10px]` and
   `tracking-[0.12em]` utilities, so the labels render larger than the mockup.
   At phone widths that pushes "30-DAY GUARANTEE" onto a second line and the
   three cells stop lining up. Pin the mockup's values:
     text-[10px]        -> 10px          sm:text-xs          -> --text-xs .75rem
     tracking-[0.12em]  -> .12em         sm:tracking-[0.14em] -> .14em
     leading-tight      -> --leading-tight 1.25
     text-ink           -> --ink #0c1827
     text-muted-foreground -> --muted-foreground #565e69
     mt-1               -> --spacing * 1 = .25rem */
.zivaldi-product [data-zvd-trust] {
	align-items: start !important;
}

.zivaldi-product [data-zvd-trust-label] {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: .12em !important;
	color: var(--ink, #0c1827) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.zivaldi-product [data-zvd-trust-note] {
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	color: var(--muted-foreground, #565e69) !important;
	margin: .25rem 0 0 !important;
	padding: 0 !important;
}

/* Below ~421px the widest label ("30-DAY GUARANTEE", about 119px at 10px
   with .12em tracking) no longer fits its (100vw - 64px) / 3 column and
   wraps to two lines - the mockup wraps here too. Reserve both lines on all
   three cells at those widths so the notes underneath keep a shared
   baseline. Above the threshold nothing wraps and no height is reserved, so
   the mockup's spacing is untouched. */
.zivaldi-product [data-zvd-trust-break] {
	display: none !important;
}

@media (max-width: 420px) {
	/* All three labels break together so the row stays symmetrical instead of
	   one cell wrapping while its neighbours don't. min-height matches the two
	   lines this produces (2 x 1.25 line-height). */
	.zivaldi-product [data-zvd-trust-break] {
		display: block !important;
	}

	.zivaldi-product [data-zvd-trust-label] {
		min-height: 2.5em !important;
	}
}

@media (min-width: 640px) {
	.zivaldi-product [data-zvd-trust-label] {
		font-size: .75rem !important;
		letter-spacing: .14em !important;
		min-height: 0 !important;
	}

	.zivaldi-product [data-zvd-trust-note] {
		font-size: .75rem !important;
	}
}

/* -------- Ratings summary + review cards --------
   The big average score is painted with `background-clip: text`, so the
   gradient only covers the element's own box. `text-6xl` carries a
   line-height of 1 (a 60px box for a 60px font) while Cormorant Garamond's
   old-style figures - the "5" in particular - drop below the baseline, so
   the bottom of the number falls outside the painted area and reads as cut
   off. Extending the box downwards paints the descender. The box grows, not
   the text, and the row is baseline-aligned, so the stars beside it do not
   move. Scoped to this one score - `text-gradient-gold` is used on three
   other elements. */
.zivaldi-product .text-6xl.text-gradient-gold {
	line-height: 1.2 !important;
	padding-bottom: .12em !important;
}

/* The layout clamped each review to a three-line teaser. The cards are sized
   by the ratings panel beside them, which is far taller, so the clamp cut
   reviews off mid-sentence and left the rest of the card empty. Show the
   review in full - there is room for it, and a half-quoted review reads
   worse than a long one. Restore the clamp by putting back the -webkit-box
   display and a -webkit-line-clamp value. */
.zivaldi-product .line-clamp-3 {
	display: block !important;
	-webkit-line-clamp: none !important;
	overflow: visible !important;
	max-height: none !important;
	font-size: .75rem !important;
	line-height: 1.625 !important;
	margin: .5rem 0 0 !important;
}

/* -------- "THE ZIVALDI DIFFERENCE" section --------
   The photo that sat beside this copy was always a repeat of one already in
   the gallery at the top of the page, so it is gone and the section runs as
   a single centred column. `max-w-2xl` is not in the exported stylesheet, so
   the column width is pinned here. */
.zivaldi-product [data-zvd-difference] {
	max-width: 42rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.zivaldi-product [data-zvd-difference] .zvd-rich {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* -------- Related product card images --------
   The cards cropped tall product shots into a square, cutting the waistband
   and legs off the design. Match the box to the 3:4 shape the photos are
   shot in and contain rather than cover, so nothing is ever clipped whatever
   the source ratio. `aspect-[3/4]` is not in the exported stylesheet either. */
.zivaldi-product [data-zvd-rel-media] {
	aspect-ratio: 3 / 4 !important;
}

.zivaldi-product [data-zvd-rel-media] img {
	object-fit: contain !important;
	object-position: center !important;
}

/* "View all reviews" control, styled to match the MORE toggle above it:
   text-xs font-semibold tracking-wide text-gold. */
.zivaldi-product [data-zvd-all-reviews] {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-size: .75rem !important;
	font-weight: 600 !important;
	line-height: 1rem !important;
	letter-spacing: .025em !important;
	color: var(--gold, #ae986c) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: .375rem !important;
}

.zivaldi-product [data-zvd-all-reviews]:hover {
	background: transparent !important;
	color: var(--gold-deep, #8a6f38) !important;
}

/* Related-product card titles. The layout typed its placeholder names in
   capitals; real product names come from the catalogue in their own case, so
   apply the casing here. `.uppercase` never made it into the exported
   stylesheet, hence the explicit rule. */
.zivaldi-product [data-zvd-rel-name] {
	text-transform: uppercase !important;
}

/* -------- Review submission form width --------
   The form is marked `max-w-2xl mx-auto`, but `.max-w-2xl` never made it
   into the exported stylesheet, so the fields stretch the full content
   width. Pin the intended 42rem column. */
.zivaldi-product .zvd-review-form {
	max-width: 42rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* WordPress adds a Website field and a "save my name, email and website in
   this browser" checkbox to the comment form for logged-out visitors. Both
   are blog-comment defaults with no place on a product review, and neither
   appeared while the layout was being built - that was always viewed logged
   in as an admin, where WordPress omits them. Left in the DOM but hidden, so
   the consent box stays unchecked and no comment cookies are set. */
.zivaldi-product .zvd-review-form .comment-form-url,
.zivaldi-product .zvd-review-form .comment-form-cookies-consent {
	display: none !important;
}

/* The add-to-cart label sits in a span; keep it at the button's size/weight. */
.zivaldi-product [data-add-to-cart] span {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Safety net: any other plain button inside the layout that isn't
   individually styled above should not inherit the theme's black button.
   font-family is forced to Inter (the theme's kit sets buttons to its own
   font); font-size is NOT touched here so each button keeps its own Tailwind
   text-* size instead of inheriting a larger one. */
.zivaldi-product button {
	background-color: transparent !important;
	color: inherit !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* The WooCommerce form is only present to carry the real submission. */
.zivaldi-product .zvd-cart-form {
	display: none;
}

/* Newsletter signup input: the theme's global input CSS overrides Tailwind's
   left padding, so the placeholder text sits under the mail icon. */
.zivaldi-product input[type='email'] {
	padding-left: 2.75rem !important;
	padding-right: 1rem !important;
}

/* -------- Review submission form (WooCommerce comment_form) -------- */
.zivaldi-product .zvd-review-form form.comment-form,
.zivaldi-product .zvd-review-form #commentform {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	margin: 0 !important;
}

.zivaldi-product .zvd-review-form label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--ink, #16181d) !important;
	margin-bottom: 6px !important;
}

.zivaldi-product .zvd-review-form input[type='text'],
.zivaldi-product .zvd-review-form input[type='email'],
.zivaldi-product .zvd-review-form textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	border: 1px solid var(--border, #e1ded7) !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--ink, #16181d) !important;
	font-family: inherit !important;
	font-size: 14px !important;
}

.zivaldi-product .zvd-review-form input[type='text']:focus,
.zivaldi-product .zvd-review-form input[type='email']:focus,
.zivaldi-product .zvd-review-form textarea:focus {
	outline: none !important;
	border-color: var(--gold, #ae986c) !important;
}

/* WooCommerce converts the rating <select> into clickable stars (p.stars). */
.zivaldi-product .zvd-review-form .comment-form-rating label {
	margin-bottom: 4px !important;
}

.zivaldi-product .zvd-review-form p.stars {
	margin: 0 !important;
	line-height: 1 !important;
}

.zivaldi-product .zvd-review-form p.stars a {
	color: var(--gold, #ae986c) !important;
	font-size: 22px !important;
}

.zivaldi-product .zvd-review-form p.stars a::before,
.zivaldi-product .zvd-review-form p.stars a.active::before,
.zivaldi-product .zvd-review-form p.stars a:hover::before {
	color: var(--gold, #ae986c) !important;
}

.zivaldi-product .zvd-review-form select#rating {
	padding: 10px 12px !important;
	border: 1px solid var(--border, #e1ded7) !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	background: #fff !important;
}

/* Submit button in the site's gold style. */
.zivaldi-product .zvd-review-form .form-submit {
	margin: 4px 0 0 !important;
}

.zivaldi-product .zvd-review-form input#submit,
.zivaldi-product .zvd-review-form .zvd-review-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 180px !important;
	height: 48px !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: linear-gradient( 135deg, #c9a86a 0%, #b99a5b 100% ) !important;
	color: #16181d !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
}

.zivaldi-product .zvd-review-form input#submit:hover,
.zivaldi-product .zvd-review-form .zvd-review-submit:hover {
	opacity: 0.95 !important;
}

/* WooCommerce's "you must be logged in" / notes text. */
.zivaldi-product .zvd-review-form .comment-notes,
.zivaldi-product .zvd-review-form .comment-form-cookies-consent {
	font-size: 12px !important;
	color: var(--muted-foreground, #6b6a66) !important;
}

/* On mobile the section's pb-12 isn't giving enough room, so the submit
   button sits right against the dark section below - add a little room and
   center the submit button. */
@media (max-width: 1023px) {
	.zivaldi-product .zvd-review-form {
		padding-bottom: 24px !important;
	}

	.zivaldi-product .zvd-review-form .form-submit {
		text-align: center !important;
	}
}

/* Feature-icons row: the mockup has border-y border-border py-6, but the
   Tailwind border here isn't rendering, so set the top/bottom divider lines
   and the matching 24px (py-6) padding explicitly. */
.zivaldi-product ul.grid-cols-5 {
	border-top: 1px solid var(--border, #e1ded7) !important;
	border-bottom: 1px solid var(--border, #e1ded7) !important;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	margin-top: 24px !important;
}