/**
 * Single product page — "Sold" / wishlist / share badge row.
 * See blocks/product-meta-badges/render.php for the markup this styles.
 */

/**
 * Core layout restyle — gallery, price, stock, add-to-cart, meta row,
 * and tabs. Without this, the page falls back entirely to WooCommerce's
 * own default frontend stylesheet (woocommerce-general.css etc., still
 * enqueued — WC's blocks don't ship their own visual design, just
 * structure), which is functional but has zero Zozia Beauty branding:
 * no brand colors, default serif-less spacing, an olive default sale
 * badge, an inset-bordered quantity input, and a plain black tab
 * underline. Everything below re-skins those specific WC-rendered
 * elements to match the rest of the site. See
 * templates/single-product.html for the zozia-product-* class hooks
 * this targets.
 */

/* Side padding for the whole page — theme.json's useRootPaddingAwareAlignments
   only applies automatically when a root-level padding is set in global
   styles, which this theme doesn't do (other pages, e.g. the shop
   archive's .zozia-shop, each set their own instead) — without it, an
   `alignwide` <main> like this one runs edge-to-edge the moment the
   viewport gets narrower than its own wide/content size, which is most
   of the way down to mobile. Same 32px/16px split as .zozia-shop in
   shop.css. */
.zozia-product-main {
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 480px) {
	.zozia-product-main {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.zozia-product-columns {
	gap: var(--wp--preset--spacing--xl);
}

.zozia-product-summary > * {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}

.zozia-product-summary > h1 {
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* Gallery — thumbnails in a vertical, scrollable column to the left of
   the main image. WooCommerce's FlexSlider JS appends the thumbnail
   <ol> (.flex-control-nav) as the LAST child of .woocommerce-product-gallery,
   after .flex-viewport, so it's placed on the left purely with flex
   `order` — no DOM/template change needed, and it degrades sanely
   (thumbnails still work, just trail the image) if a future WC update
   ever changes that markup. */
.zozia-product-gallery-col .woocommerce-product-gallery {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* .flex-viewport only exists for multi-image products — FlexSlider
   wraps .woocommerce-product-gallery__wrapper in it once there's more
   than one image to slide between. For a single-image product there's
   no FlexSlider at all, and .woocommerce-product-gallery__wrapper sits
   directly in the flex row instead — so both selectors get the same
   layout rules (harmless no-op on whichever doesn't apply: `order`/
   `flex` do nothing to an element that isn't itself a flex item), and
   the visual surface/radius treatment lives on the wrapper itself so
   it's identical either way. */
.zozia-product-gallery-col .flex-viewport,
.zozia-product-gallery-col .woocommerce-product-gallery__wrapper {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
}

.zozia-product-gallery-col .woocommerce-product-gallery__wrapper {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.zozia-product-gallery-col .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* WC's default .onsale badge is an olive circle pinned half off the
   image's top-left corner — replace with the same pill treatment the
   shop grid's sale badge uses (assets/css/shop.css). Anchored to the
   *row's* right edge (not left) so it lands on the main image
   regardless of how wide the thumbnail column ends up — .onsale is a
   sibling of .woocommerce-product-gallery, not a descendant, so it
   can't be given a flex `order` the way the thumbnails below are.
   `!important` on position/left/right/z-index only: WooCommerce ships
   TWO competing rules for this badge — woocommerce-general.css's
   `.woocommerce span.onsale` (specificity 0,2,1) AND
   wc-blocks-style-product-image-gallery-css's
   `.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale`
   (0,3,1, explicitly setting left/right/z-index) — the second one beats
   any plain class-selector override, `left`/`right` included, since
   they're set together and an absolutely positioned box with both
   non-auto plus a defined width is "over-constrained" (CSS silently
   drops whichever offset loses, independent of specificity on the
   others). Matching that selector's specificity is possible but brittle
   against WC's own future changes; `!important` on just these four
   properties is the more stable fix. */
div.zozia-product-gallery-col span.onsale {
	position: absolute !important;
	/* Stacked below (not beside) the zoom trigger button, which sits in
	   the same top-right corner at right:14px/top:14px, ~36px wide —
	   side-by-side at the same `top` would overlap it. */
	top: 58px;
	right: 12px !important;
	left: auto !important;
	width: auto;
	height: auto;
	min-height: 0;
	z-index: 1 !important;
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--white);
	border-radius: 3px;
	line-height: 1;
	padding: 5px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

/* assets/js/product-gallery.js wraps .flex-control-thumbs in this once
   it exists (FlexSlider builds the thumbnail list client-side, it isn't
   in the page's initial HTML) and adds the up/down buttons around it.
   `order: 1` stays on .flex-control-thumbs itself too, below, purely as
   a no-JS/before-JS-runs fallback so the thumbnails still land on the
   left even for that brief window or if JS fails — once wrapped, that
   declaration is a harmless no-op (it's no longer a direct child of the
   row, `order` only affects direct flex children).
   The buttons themselves float over the thumbnail strip (`position:
   absolute`, pinned to the rail's top/bottom edge) rather than taking
   their own row above/below it — that would eat into the vertical space
   available for actual thumbnails for comparatively little benefit. */
.zozia-thumb-rail {
	order: 1;
	position: relative;
	flex-shrink: 0;
}

.zozia-thumb-rail__nav {
	/* Hidden until .is-scrollable confirms there's more to scroll to
	   than fits — see update() in product-gallery.js. */
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 18px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--sm);
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 6px rgba(36, 16, 25, 0.15);
}

.zozia-thumb-rail__nav svg {
	width: 11px;
	height: 11px;
}

.zozia-thumb-rail__nav--up {
	top: 2px;
}

.zozia-thumb-rail__nav--down {
	bottom: 2px;
}

.zozia-thumb-rail.is-scrollable .zozia-thumb-rail__nav {
	display: flex;
}

.zozia-thumb-rail__nav:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.zozia-thumb-rail__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.zozia-product-gallery-col .flex-control-thumbs {
	order: 1;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
	margin: 0;
	padding: 2px;
	list-style: none;
	cursor: grab;
	/* Vertical drag scrolls the rail (product-gallery.js); leave
	   horizontal touch gestures (e.g. the browser's own back/forward
	   swipe) alone. */
	touch-action: pan-y;
}

.zozia-product-gallery-col .flex-control-thumbs.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

/* Same specificity fight as the .onsale badge above: WooCommerce's own
   classic gallery CSS carries `.woocommerce div.product div.images
   .flex-control-thumbs li { width: 25%; float: left; margin: 0; }`
   (specificity 0,4,3 — four classes plus three element types), which
   beats a plain two-class theme selector and was shrinking/floating
   these regardless of the explicit width/height set here. `!important`
   on the contested properties, same fix as the sale badge. */
.zozia-product-gallery-col .flex-control-thumbs li {
	width: 84px !important;
	height: 84px !important;
	float: none !important;
	margin: 0 !important;
	flex-shrink: 0;
}

.zozia-product-gallery-col .flex-control-thumbs img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	border: 2px solid var(--wp--preset--color--border-light);
	cursor: pointer;
}

.zozia-product-gallery-col .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--muted);
}

.zozia-product-gallery-col .flex-control-thumbs img.flex-active {
	border-color: var(--wp--preset--color--primary);
}

/* Below the point the two-column product layout itself stacks (core's
   own wp-block-columns breakpoint), a left-side thumbnail rail gets
   cramped against a full-width image — revert to a horizontal row
   under the image instead. */
@media (max-width: 599px) {
	.zozia-product-gallery-col .woocommerce-product-gallery {
		flex-direction: column;
	}

	.zozia-product-gallery-col .flex-viewport,
	.zozia-product-gallery-col .woocommerce-product-gallery__wrapper {
		order: 1;
	}

	.zozia-thumb-rail {
		order: 2;
	}

	/* A wrapped horizontal row has nothing to page through — the
	   up/down buttons are a vertical-rail-only affordance. */
	.zozia-thumb-rail__nav {
		display: none !important;
	}

	.zozia-product-gallery-col .flex-control-thumbs {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		max-height: none;
		overflow-y: visible;
		cursor: default;
		touch-action: auto;
	}
}

/* Price — WC's default <ins>/<del> render in plain ink, same as the
   surrounding text. Bumped up in size so it reads as a price, not body copy. */
.zozia-product-summary .wc-block-components-product-price,
.zozia-product-summary .wc-block-grid__product-price {
	font-size: var(--wp--preset--font-size--xx-large);
}

.zozia-product-summary .wc-block-components-product-price ins {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 700;
}

.zozia-product-summary .wc-block-components-product-price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}

/* Stock message ("X in stock" / "Out of stock") */
.zozia-product-summary .stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.zozia-product-summary .stock.in-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-teal);
	flex-shrink: 0;
}

.zozia-product-summary .stock.out-of-stock {
	color: var(--wp--preset--color--sale);
	font-weight: 600;
}

/* Add to cart row — WC's default quantity input has a browser-native
   inset border and square corners; the button is already themed via
   theme.json's global button styles, just needs to line up with it. */
.zozia-product-summary .wc-block-add-to-cart-form form.cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
}

/* Variable products: WC's variable.php template nests the quantity input
   and the button one level deeper, inside .woocommerce-variation-add-to-cart
   (see single_variation_wrap in the core template) rather than as direct
   children of form.cart. The gap above only applies to direct flex children,
   so it never reaches this pair — without this rule they sit flush against
   each other on variable products while simple products (whose template puts
   both directly in form.cart) get the gap for free. */
.zozia-product-summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
}

/* The "-" / "+" buttons (data-qty-step, see inc/product-quantity-stepper.php)
   and the input sit inside one bordered group rather than each having its
   own border, so it reads as a single stepper control. `!important` on the
   margins only: WooCommerce's own block CSS ships
   ".woocommerce div.product form.cart div.quantity" (margin-right: 4px) and
   ".wp-block-woocommerce-add-to-cart-form form.cart > .quantity ... .qty"
   (margin-right: 0.5em), both more specific than a single class selector
   here, and either one reopens the gap this rule is meant to close. */
.zozia-product-summary .quantity {
	margin: 0 !important;
	display: flex;
	align-items: stretch;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.zozia-product-summary .zozia-qty-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	cursor: pointer;
}

.zozia-product-summary .zozia-qty-stepper:hover {
	background: var(--wp--preset--color--surface);
}

.zozia-product-summary input.qty {
	box-sizing: border-box;
	height: 100%;
	min-height: 44px;
	width: 44px;
	flex: 1 1 auto;
	margin: 0 !important;
	border: none;
	border-left: 1px solid var(--wp--preset--color--border-light);
	border-right: 1px solid var(--wp--preset--color--border-light);
	border-radius: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	/* Hide the native number-input spinner — the "-" / "+" buttons replace it. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.zozia-product-summary input.qty::-webkit-outer-spin-button,
.zozia-product-summary input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.zozia-product-summary .single_add_to_cart_button {
	min-height: 44px;
}

/* Add to cart goes through the Store API (see assets/js/cart-drawer.js), so
   the form stays on screen: dim it while the request is in flight, and show
   a rejected add (stock limits) beside the button instead of in the drawer,
   which never opens in that case. */
.zozia-product-summary form.cart.is-busy {
	opacity: 0.6;
	cursor: progress;
}

.zozia-atc-error {
	flex-basis: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--sale);
}

/* Trust badges (Free shipping / Secure checkout / Easy returns) — see
   blocks/product-trust-badges/render.php for the markup this styles. */
.zozia-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--sm) 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.zozia-trust-badges__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.zozia-trust-badges__item svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

a.zozia-trust-badges__item:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Hygiene caveat on returns — sits right under the badge row (which
   already has its own bottom border) rather than inside it, so it reads
   as a footnote to "Easy returns" rather than a fourth badge. */
.zozia-trust-badges__hygiene-note {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.zozia-trust-badges__hygiene-note a {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}

.zozia-trust-badges__hygiene-note a:hover {
	color: var(--wp--preset--color--primary);
}

/* Product meta row (SKU / Category / Tags) */
.zozia-product-summary .wp-block-woocommerce-product-meta,
.zozia-product-summary .wp-block-woocommerce-product-meta * {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.zozia-product-summary .wp-block-woocommerce-product-meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}

.zozia-product-summary .wp-block-woocommerce-product-meta a:hover {
	color: var(--wp--preset--color--primary);
}

/* Brand badge — replaces WooCommerce's default plain "Brand: X" text.
   This is a core/post-terms block (see templates/single-product.html,
   `wp:post-terms {"term":"product_brand","className":"zozia-brand-badges"}`)
   rather than a custom render_callback: WooCommerce auto-injects its own
   plain-text product_brand terms block as the last child of
   woocommerce/product-meta on the single product template UNLESS one is
   already present in the template content (WC_Brands::
   template_already_has_brand_block(), a literal string search for
   `<!-- wp:post-terms {"term":"product_brand"`) — so declaring our own
   here is what stops the duplicate, not just styling preference.
   Selectors scoped through .wp-block-woocommerce-product-meta (3
   classes) rather than just .zozia-brand-badges (1 class) so they
   reliably beat the generic ".wp-block-woocommerce-product-meta a"
   underline/muted-color rule just above, regardless of stylesheet
   order. */
.zozia-product-summary .wp-block-woocommerce-product-meta .zozia-brand-badges {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/* The "Brand: " text label a plain post-terms block would otherwise
   print — the pill styling below already reads as a badge without it. */
.zozia-product-summary .wp-block-woocommerce-product-meta .zozia-brand-badges .wp-block-post-terms__prefix,
.zozia-product-summary .wp-block-woocommerce-product-meta .zozia-brand-badges .wp-block-post-terms__separator {
	display: none;
}

.zozia-product-summary .wp-block-woocommerce-product-meta .zozia-brand-badges a {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

.zozia-product-summary .wp-block-woocommerce-product-meta .zozia-brand-badges a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Short description (excerpt) */
.zozia-product-summary .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* Description / Additional information / Reviews tabs */
.zozia-product-details {
	margin-top: var(--wp--preset--spacing--lg);
}

.zozia-product-details .woocommerce-tabs {
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding-top: var(--wp--preset--spacing--lg);
}

.zozia-product-details ul.tabs {
	display: flex;
	gap: var(--wp--preset--spacing--xl);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.zozia-product-details ul.tabs li {
	margin: 0;
	padding: 0 0 12px;
}

.zozia-product-details ul.tabs li a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.zozia-product-details ul.tabs li.active {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	margin-bottom: -1px;
}

.zozia-product-details ul.tabs li.active a {
	color: var(--wp--preset--color--ink);
}

.zozia-product-details .woocommerce-Tabs-panel {
	max-width: 720px;
	color: var(--wp--preset--color--ink);
	line-height: 1.7;
}

.zozia-product-details .woocommerce-Tabs-panel h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.zozia-product-details .woocommerce-Tabs-panel ul {
	padding-left: 1.2em;
}

/* Additional information (product attributes table) — plain default
   browser table borders/padding otherwise. */
.zozia-product-details table.woocommerce-product-attributes {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
	margin: 0;
}

.zozia-product-details table.woocommerce-product-attributes tr {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.zozia-product-details table.woocommerce-product-attributes th,
.zozia-product-details table.woocommerce-product-attributes td {
	padding: 12px 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	border: none;
}

.zozia-product-details table.woocommerce-product-attributes th {
	width: 200px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.zozia-product-details table.woocommerce-product-attributes td {
	color: var(--wp--preset--color--muted);
}

.zozia-product-details table.woocommerce-product-attributes td p {
	margin: 0;
}

/* Reviews list */
.zozia-product-details .woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--md);
}

.zozia-product-details .woocommerce-noreviews {
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.zozia-product-details ol.commentlist {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--xl);
	padding: 0;
	max-width: 720px;
}

.zozia-product-details .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: var(--wp--preset--spacing--lg) 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.zozia-product-details .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}

.zozia-product-details .comment-text {
	flex: 1;
	min-width: 0;
}

.zozia-product-details .comment-text .star-rating {
	margin-bottom: 8px;
}

/* WC's star-rating is an unfilled track (::before) with a filled overlay
   (span::before) clipped to the rating's width — both default to plain
   black/ink, recolored here to match the brand instead. */
.zozia-product-details .star-rating::before {
	color: var(--wp--preset--color--border-light);
}

.zozia-product-details .star-rating span::before {
	color: var(--wp--preset--color--primary);
}

.zozia-product-details .comment-text .meta {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.zozia-product-details .woocommerce-review__author {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.zozia-product-details .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* "Add a review" form */
.zozia-product-details #review_form_wrapper {
	max-width: 560px;
}

.zozia-product-details #reply-title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.zozia-product-details #reply-title small a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-left: 10px;
}

.zozia-product-details .comment-notes {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.zozia-product-details .comment-form-rating,
.zozia-product-details .comment-form-comment,
.zozia-product-details .comment-form-author,
.zozia-product-details .comment-form-email {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.zozia-product-details .comment-form-rating label,
.zozia-product-details .comment-form-comment label,
.zozia-product-details .comment-form-author label,
.zozia-product-details .comment-form-email label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* The #rating <select> is a screen-reader/no-JS fallback — WooCommerce's
   own single-product.js hides it and swaps in a clickable p.stars widget
   for JS-enabled browsers (still updating the same hidden select), so
   both need styling. p.stars' <a> stars pick up the theme's brand-pink
   link color automatically (global styles, elements.link) — just sizing
   them here, not recoloring. */
.zozia-product-details select#rating {
	box-sizing: border-box;
	width: auto;
	min-width: 160px;
}

.zozia-product-details p.stars {
	margin: 0;
}

.zozia-product-details p.stars a {
	display: inline-block;
	width: 24px;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.zozia-product-details textarea#comment,
.zozia-product-details input#author,
.zozia-product-details input#email,
.zozia-product-details select#rating {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--md);
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

.zozia-product-details textarea#comment,
.zozia-product-details input#author,
.zozia-product-details input#email {
	box-sizing: border-box;
	width: 100%;
}

.zozia-product-details textarea#comment {
	min-height: 120px;
	resize: vertical;
}

.zozia-product-details textarea#comment:focus,
.zozia-product-details input#author:focus,
.zozia-product-details input#email:focus,
.zozia-product-details select#rating:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.zozia-product-details .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.zozia-product-details .comment-form-cookies-consent label {
	margin: 0;
}

.zozia-product-details p.form-submit {
	margin: 0;
}

.zozia-product-badges {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 10px 0;
}

.zozia-product-badges__sold {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.zozia-product-badges__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border-light);
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
}

.zozia-product-badges__icon:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Wishlist "active" state — filled heart, brand pink. */
.zozia-product-badges__wishlist[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.zozia-product-badges__wishlist[aria-pressed="true"] svg {
	fill: currentColor;
}

/**
 * Share modal — "Share to Friends" (Facebook / Email / copy link).
 */

.zozia-share-modal[hidden] {
	display: none !important;
}

.zozia-share-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.zozia-share-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(36, 16, 25, 0.45);
	border: none;
	padding: 0;
	margin: 0;
	cursor: default;
}

.zozia-share-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	background: var(--wp--preset--color--white);
	border-radius: 20px;
	padding: 28px 24px 32px;
	box-shadow: 0 20px 48px rgba(36, 16, 25, 0.18);
	text-align: center;
}

.zozia-share-modal__close {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 8px;
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
}

.zozia-share-modal__close:hover,
.zozia-share-modal__close:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.zozia-share-modal__title {
	margin: 4px 0 26px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.zozia-share-modal__options {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 32px;
}

.zozia-share-modal__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
}

.zozia-share-modal__option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.zozia-share-modal__option:hover,
.zozia-share-modal__option:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Extra "Product Gallery" images (inc/product-gallery.php), rendered below
   the product tabs by blocks/product-gallery/render.php — a plain
   single-column stack, each image at its own natural aspect ratio
   (no crop, no click behavior). Capped to half the content width on
   desktop so a single column of images doesn't stretch edge-to-edge;
   full-width again once the layout gets too narrow for that to help. */
.zozia-product-extra-gallery {
	display: flex;
	flex-direction: column;
	max-width: 50%;
	margin: 32px 0;
}

.zozia-product-extra-gallery__item {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	border-radius: var(--wp--custom--radius--md, 12px);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	line-height: 0;
}

.zozia-product-extra-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Below desktop, 50% of the content width gets cramped fast — go back to
   full width, same tablet breakpoint used elsewhere in this theme
   (cart-checkout.css, my-account.css, etc). */
@media (max-width: 782px) {
	.zozia-product-extra-gallery {
		max-width: 100%;
	}
}

@media (max-width: 599px) {
	.zozia-product-extra-gallery__item {
		margin-bottom: 10px;
	}
}

/* Sticky "Add to Cart" bar (mobile only) — see
   blocks/sticky-add-to-cart/render.php for the markup and
   assets/js/sticky-add-to-cart.js for the show/hide-on-scroll logic.
   Hidden outright above the mobile breakpoint: on wider viewports the
   real Add to Cart button already sits next to the gallery, always
   on-screen, so a sticky duplicate would be redundant chrome. */
.zozia-sticky-atc {
	display: none;
}

@media (max-width: 599px) {
	.zozia-sticky-atc {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--border-light);
		box-shadow: 0 -4px 16px rgba(36, 16, 25, 0.08);
	}

	.zozia-sticky-atc[hidden] {
		display: none;
	}

	.zozia-sticky-atc__product {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: 1;
		min-width: 0;
	}

	.zozia-sticky-atc__image {
		/* position + overflow give the <img> inside a box to fill and be
		   clipped by; it replaced a background-image, which needed neither. */
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: var(--wp--custom--radius--sm);
		background-color: var(--wp--preset--color--surface);
	}

	.zozia-sticky-atc__info {
		min-width: 0;
	}

	.zozia-sticky-atc__name {
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		color: var(--wp--preset--color--ink);
	}

	.zozia-sticky-atc__price {
		margin: 2px 0 0;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--sale);
		font-weight: 700;
	}

	/* WC's own price_html markup (<del>/<ins> for a sale price) inherits
	   the sale-red weight above; mute just the struck-through original. */
	.zozia-sticky-atc__price del {
		color: var(--wp--preset--color--muted);
		font-weight: 400;
		font-size: var(--wp--preset--font-size--caption);
	}

	.zozia-sticky-atc__button {
		flex-shrink: 0;
		border: none;
		border-radius: var(--wp--custom--radius--md);
		padding: 12px 20px;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
	}

	.zozia-sticky-atc__button:hover {
		background: var(--wp--preset--color--primary-dark);
	}

	/* The bar itself covers the last ~60-70px of the page — give the page
	   room so the related-products carousel/footer don't end up hidden
	   underneath it. */
	body.single-product {
		padding-bottom: 68px;
	}
}