/*
 * Single product page: gallery, summary (title/price/rating/
 * add-to-cart/variations/trust), tabs, related products.
 */

.product-page-header {
	padding-top: var(--space-6);
}

.single-product-layout {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr — bare 1fr carries an implicit
	   `auto` minimum, which lets the gallery's real-pixel-width <img>
	   content ("grid blowout") force the track wider than the
	   container instead of the container clipping it responsively. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-10);
	padding-block: var(--space-6) var(--space-12);
	align-items: start;
}

.single-product-layout__after {
	grid-column: 1 / -1;
}

/* Grid items default to min-width:auto, which lets an oversized child
   (the gallery's real-pixel-width <img> content) force its track
   wider than the container instead of shrinking to fit. */
.single-product-layout__gallery,
.single-product-layout__summary {
	min-width: 0;
}

/* ---- Gallery (native WC markup; sizing/aesthetics only) ----
   Sticky stays on .woocommerce-product-gallery itself (not the outer
   .single-product-layout__gallery grid item) — position:sticky on a
   grid item establishes its own stacking context, and a stuck
   positioned box always paints above later *static* siblings
   regardless of DOM order. Since .single-product-layout__after
   (Related Products etc.) is a later sibling row, making the grid
   item itself sticky made it paint over that section's cards
   whenever both were on screen at once. Keeping sticky one level
   deeper, inside a plain (non-positioned) grid item, avoids that: the
   grid item's own height still correctly bounds how far the inner
   element can stick, exactly as it did before this file added the
   sale-badge and zoom-trigger overlays below. */
.woocommerce-product-gallery {
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

/* The sale flash (WC hook priority 10) renders as a sibling BEFORE
   the gallery div (priority 20). It's overlaid on the image's
   top-left corner without any DOM reordering: `position: relative`
   on the outer grid item (below) gives the badge a containing block
   that exactly wraps the gallery box, so absolute-positioning it here
   places it over the image regardless of sibling order. This is a
   separate stacking context from `.woocommerce-product-gallery`'s own
   `position: sticky` one level in, so it carries none of that rule's
   stacking risk. */
.single-product-layout__gallery {
	position: relative;
}

.single-product-layout__gallery > .onsale,
.onsale {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-ink-solid);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* WC's native zoom trigger ships as a bare emoji-only link with no
   button chrome of its own (WooCommerce's default frontend CSS is
   dequeued — see inc/woocommerce.php). Anchored to the gallery's
   top-right so it always sits on the main image regardless of how
   tall the thumbnail strip below ends up being. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	font-size: 16px;
	line-height: 1;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.woocommerce-product-gallery__trigger:hover {
	transform: scale(1.08);
}

/* WC's zoom script injects this trigger with a raw 🔍 emoji as its only
   content (no markup hook to swap it server-side). Hiding the emoji
   glyph and painting the site's own search.svg over it via CSS mask
   keeps this an SVG icon like everywhere else in the theme, themed
   with currentColor instead of a platform-dependent emoji render. */
.woocommerce-product-gallery__trigger {
	font-size: 0;
	line-height: 0;
	color: var(--color-ink);
}

.woocommerce-product-gallery__trigger::before {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: url('../images/icons/search.svg');
	mask-image: url('../images/icons/search.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* NOT display:flex — WooCommerce's flexslider JS turns this element into
   the slide track itself, giving it `width:400%` plus a `translate3d(...)`
   and float-based positioning/widths on each `.woocommerce-product-gallery
   __image` child so the slides sit side by side and the active one slides
   into view. A flex container lays its children out with the flex
   algorithm instead, which ignores those floats/widths — so the slides
   stacked vertically instead of side by side, and whichever slide
   flexslider had made "active" ended up pushed above or below the visible
   viewport window instead of centered in it. That's what made the main
   gallery image disappear (blank box) once a product had more than one
   image. Letting flexslider fully own this element's layout (its inline
   styles) fixes it; the true no-JS fallback just stacks the image divs as
   plain blocks, which is still perfectly readable. */
.woocommerce-product-gallery__wrapper {
	width: 100%;
	min-width: 0;
}

.woocommerce-product-gallery__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	aspect-ratio: 4 / 5;
	width: 100%;
	min-width: 0;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: auto;
}

/* Prev/next arrows over the main gallery image (product-image.php only
   renders these for products with more than one image). Server-rendered
   as children of .woocommerce-product-gallery, but assets/js/single-
   product.js moves them into flexslider's own .flex-viewport once it
   initializes and only then reveals them (.is-ready) — .flex-viewport is
   sized to exactly the current slide's height (flexslider sets that
   inline), so centering against it lines the arrows up with the image
   itself instead of the taller image+thumbnail-strip box below. */
.woocommerce-product-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	border: none;
	background: rgba(23, 23, 23, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard);
}

.woocommerce-product-gallery__arrow.is-ready {
	display: inline-flex;
}

.woocommerce-product-gallery__arrow:hover,
.woocommerce-product-gallery__arrow:focus-visible {
	background: rgba(23, 23, 23, 0.75);
}

.woocommerce-product-gallery__arrow svg {
	width: 18px;
	height: 18px;
}

.woocommerce-product-gallery__arrow--prev {
	left: var(--space-3);
}

.woocommerce-product-gallery__arrow--next {
	right: var(--space-3);
}

/* jquery.zoom (WC's hover-magnifier) injects its zoomed <img class="zoomImg">
   as a SIBLING of the gallery's <a> link, absolutely positioned directly on
   top of the main image — not nested inside the link. Left at its default
   pointer-events, this overlay becomes the topmost element under the
   cursor, so a real click lands on .zoomImg instead of the <a>. Since
   .zoomImg has no <a> ancestor, WooCommerce's delegated click handler on
   .woocommerce-product-gallery (which opens the PhotoSwipe lightbox) never
   fires, and clicking the gallery image silently does nothing. Setting
   pointer-events: none lets clicks (and hover) pass straight through to the
   underlying <a>, restoring the lightbox-on-click behaviour, while the
   zoom visual itself (driven by jquery.zoom's own mousemove tracking on the
   link, not on .zoomImg) is unaffected. */
.woocommerce-product-gallery__image .zoomImg {
	pointer-events: none;
}

/* When WooCommerce's flexslider JS activates, thumbnails move into
   this nav — keep them as a horizontal strip under the main image. */
.woocommerce-product-gallery .flex-control-nav {
	display: flex;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin-top: var(--space-3);
	overflow-x: auto;
}

.woocommerce-product-gallery .flex-control-nav li {
	flex: 0 0 auto;
	width: 76px;
}

.woocommerce-product-gallery .flex-control-nav img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 2px solid var(--color-border);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.woocommerce-product-gallery .flex-control-nav img:hover {
	opacity: 1;
}

.woocommerce-product-gallery .flex-control-nav .flex-active img {
	border-color: var(--color-accent);
	opacity: 1;
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--radius-lg);
	overflow: hidden;
	/* WooCommerce's flexslider sets inline widths on the viewport and
	   its slide track at runtime for the slide mechanism — these
	   !important overrides are the standard way WC child themes keep
	   it from escaping the responsive container. */
	width: 100% !important;
	max-width: 100% !important;
}

.woocommerce-product-gallery .slides {
	border-radius: var(--radius-lg);
}

/* ---- Summary ---- */
.single-product-layout__summary {
	max-width: 520px;
}

/* Default h1 size (--fs-4xl, clamps up to ~3.9rem) reads oversized next
   to a 520px-wide summary column — sized down a step so it sits
   comfortably above the price without dominating the page. */
.product_title {
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	margin-bottom: var(--space-2);
}

.single-product-layout__summary .star-rating {
	position: relative;
	width: 5.4em;
	height: 1.2em;
	font-size: var(--fs-sm);
	color: var(--color-border-strong);
	margin-bottom: var(--space-3);
}

.single-product-layout__summary .star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	letter-spacing: 2px;
}

.single-product-layout__summary .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
}

.single-product-layout__summary .star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	color: var(--color-accent);
	letter-spacing: 2px;
}

.single-product-layout__summary .woocommerce-review-link {
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	margin-left: var(--space-2);
}

.single-product-layout__summary p.price {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-4);
}

.single-product-layout__summary p.price ins {
	text-decoration: none;
	color: var(--color-accent);
}

.single-product-layout__summary p.price del {
	color: var(--color-ink-faint);
	font-weight: var(--fw-regular);
	font-size: var(--fs-md);
	margin-right: var(--space-2);
}

.woocommerce-product-details__short-description {
	color: var(--color-ink-muted);
	margin-bottom: var(--space-5);
	line-height: var(--lh-relaxed);
}

/* ---- Stock status (WC core .stock p, rendered directly in the
   summary — no wrapping element of our own to hook into) ---- */
.summary .stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-5);
}

.summary .stock::before {
	content: '';
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: 50%;
	background: currentColor;
}

.summary .stock.in-stock {
	color: var(--color-success);
}

.summary .stock.out-of-stock {
	color: var(--color-error);
}

.summary .stock.available-on-backorder {
	color: var(--color-ink-muted);
}

/* ---- Variations ---- */
.variations {
	width: 100%;
	margin-bottom: var(--space-5);
	border-collapse: collapse;
}

.variations tr {
	display: block;
	margin-bottom: var(--space-4);
}

.variations .label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.variations .label label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-2);
}

.variations .value {
	display: block;
}

.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.variation-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 42px;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.variation-swatch:hover {
	border-color: var(--color-ink);
}

.variation-swatch.is-active {
	background: var(--color-ink-solid);
	border-color: var(--color-ink-solid);
	color: #fff;
}

/* ---- Color variant swatches: rendered as colored circles instead of
   text pills (assets/js/single-product.js detects the pa_color/color
   attribute's <select>, maps each option's name to a hex swatch, and
   also moves this row above Size so color reads as the primary choice). ---- */
.variation-swatches--color {
	gap: var(--space-3);
	margin-bottom: var(--space-1);
}

.variation-swatch--color {
	position: relative;
	width: 34px;
	height: 34px;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--color-surface);
	box-shadow: 0 0 0 1px var(--color-border-strong);
}

.variation-swatch--color::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.variation-swatch--color:hover::after {
	border-color: var(--color-border-strong);
}

.variation-swatch--color.is-active {
	background: inherit;
	box-shadow: 0 0 0 1px var(--color-ink);
}

.variation-swatch--color.is-active::after {
	border-color: var(--color-ink);
}

/* ---- Variations Form & Loading State Container ---- */
form.variations_form,
.variations_form,
.single_variation_wrap,
.woocommerce-variation-add-to-cart,
.variations {
	position: relative;
}

.variations_form .blockUI.blockOverlay,
.single_variation_wrap .blockUI.blockOverlay {
	border-radius: var(--radius-md, 8px) !important;
}

.single_variation_wrap .blockUI.blockOverlay::after {
	width: 28px !important;
	height: 28px !important;
	margin: -14px 0 0 -14px !important;
	border-width: 2.5px !important;
}

/* ---- Size guide trigger (cloned next to the Size row's label by
   single-product.js) ---- */
.size-guide-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease-standard);
}

.size-guide-trigger svg {
	width: 13px;
	height: 13px;
}

.size-guide-trigger:hover {
	color: var(--color-ink);
}

/* ---- Size guide modal ---- */
.size-guide-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.size-guide-modal[hidden] {
	display: none;
}

.size-guide-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.size-guide-modal__panel {
	position: relative;
	width: 100%;
	max-width: 580px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
}

.size-guide-modal__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--color-bg-alt);
}

.size-guide-modal__title {
	font-size: var(--fs-xl);
	margin: 0 var(--space-8) var(--space-5) 0;
}

.size-guide-modal__table-wrap {
	overflow-x: auto;
	margin-bottom: var(--space-8);
}

.size-guide-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 420px;
}

.size-guide-table th,
.size-guide-table td {
	padding: var(--space-3) var(--space-4);
	text-align: center;
	font-size: var(--fs-sm);
	border-bottom: 1px solid var(--color-border);
}

.size-guide-table th {
	background: var(--color-bg-alt);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	color: var(--color-ink-muted);
}

.size-guide-table th:first-child,
.size-guide-table td:first-child {
	text-align: left;
	font-weight: var(--fw-semibold);
}

.size-guide-modal__measure h3 {
	font-size: var(--fs-md);
	margin-bottom: var(--space-4);
}

.size-guide-measure {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--space-6);
	align-items: start;
	margin-bottom: var(--space-4);
}

.size-guide-measure__diagram svg {
	width: 100%;
	height: auto;
	color: var(--color-ink-muted);
}

.size-guide-measure__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

.size-guide-measure__list li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.size-guide-measure__tag {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-accent-tint);
	color: var(--color-accent);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.size-guide-measure__list strong {
	font-size: var(--fs-sm);
	color: var(--color-ink);
}

.size-guide-measure__list p {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	line-height: var(--lh-relaxed);
}

.size-guide-modal__note {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}

@media (max-width: 480px) {
	.size-guide-modal__panel {
		padding: var(--space-6) var(--space-5);
	}

	.size-guide-measure {
		grid-template-columns: 1fr;
	}
}

.reset_variations {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	text-decoration: underline;
}

.woocommerce-variation-price,
.woocommerce-variation-availability {
	margin-bottom: var(--space-3);
	font-size: var(--fs-sm);
}

.woocommerce-variation-availability .stock.out-of-stock {
	color: var(--color-error);
}

.woocommerce-variation-availability .stock.in-stock {
	color: var(--color-success);
}

/* ---- Add to cart (quantity stepper lives in components.css — shared
   with the cart page and Quick View) ----
   Scoped to `form.cart` (WooCommerce's own add-to-cart form class),
   NOT bare `.cart` — WooCommerce also puts a literal `cart` class on
   the cart page's line-items <table>, and an unscoped `.cart {
   display: flex }` here was hijacking that table's layout (thead and
   tbody rendered as side-by-side flex items instead of stacked table
   sections). The `.cart .quantity...` rules below stay unscoped on
   purpose: that styling is meant to reach the quantity stepper in
   both this form and the cart table's rows. */
form.cart,
.woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	flex-wrap: wrap;
}

.cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
	height: 48px;
}

.cart .quantity .qty,
.woocommerce-variation-add-to-cart .quantity .qty {
	height: 100%;
}

.cart .quantity__btn,
.woocommerce-variation-add-to-cart .quantity__btn {
	height: 100%;
}

/* WooCommerce's own markup for this button is
   `<button class="single_add_to_cart_button button alt">` — no `.btn`
   class, and base.css strips all default button chrome (background,
   border, padding). Without this rule it renders as bare text next
   to the quantity stepper instead of a real call-to-action. */
.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce .woocommerce-variation-add-to-cart .button {
	flex: 1;
	min-width: 180px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-6);
	border-radius: var(--radius-full);
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
	cursor: pointer;
	opacity: 1 !important;
	pointer-events: auto !important;
	transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce .woocommerce-variation-add-to-cart .button:hover {
	background: var(--color-cta-hover-bg);
}

.single_add_to_cart_button:active,
.woocommerce div.product form.cart .button.single_add_to_cart_button:active,
.woocommerce .woocommerce-variation-add-to-cart .button:active {
	transform: scale(0.97);
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button[aria-disabled="true"],
.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce .woocommerce-variation-add-to-cart .button.disabled {
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

.single_add_to_cart_button.loading {
	opacity: 0.7 !important;
	pointer-events: none;
}

@keyframes sls-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.shake {
	animation: sls-shake 300ms ease;
}

/* ---- Add To Cart Notice / Feedback ---- */
.sls-atc-notice {
	margin: var(--space-3) 0;
	padding: 10px 16px;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
	display: flex;
	align-items: center;
	gap: 8px;
	animation: sls-fade-in var(--duration-fast) ease;
}

.sls-atc-notice--error {
	background: rgba(229, 57, 53, 0.12);
	border: 1px solid rgba(229, 57, 53, 0.35);
	color: #ef5350;
}

.sls-atc-notice--error::before {
	content: "⚠";
	font-size: 14px;
}

.sls-atc-notice--success {
	background: rgba(76, 175, 80, 0.12);
	border: 1px solid rgba(76, 175, 80, 0.35);
	color: #4caf50;
}

.sls-atc-notice--success::before {
	content: "✓";
	font-size: 14px;
}

/* ---- Buy Now + Wishlist row ---- */
.single-product-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.buy-now-button {
	flex: 1;
}

.single-product-actions__wishlist {
	position: static;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.single-product-actions__wishlist svg {
	width: 22px;
	height: 22px;
	color: inherit;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.single-product-actions__wishlist:hover {
	background: #FFFFFF !important;
	color: #000000 !important;
	border-color: #FFFFFF !important;
	transform: scale(1.06);
	box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.single-product-actions__wishlist:hover svg {
	transform: scale(1.12);
}

.single-product-actions__wishlist:active {
	transform: scale(0.95);
}

.single-product-actions__wishlist.is-active {
	border-color: #EF4444 !important;
	color: #EF4444 !important;
	background: rgba(239, 68, 68, 0.16) !important;
}

.single-product-actions__wishlist.is-active svg path {
	fill: #EF4444 !important;
	stroke: #EF4444 !important;
}

.single-product-actions__wishlist.is-active:hover {
	background: #EF4444 !important;
	color: #FFFFFF !important;
	border-color: #EF4444 !important;
}

.single-product-actions__wishlist.is-active:hover svg path {
	fill: #FFFFFF !important;
	stroke: #FFFFFF !important;
}

/* Light Theme */
[data-theme="light"] .single-product-actions__wishlist {
	border: 1.5px solid rgba(0, 0, 0, 0.28);
	background: rgba(0, 0, 0, 0.04);
	color: #171717 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .single-product-actions__wishlist:hover {
	background: #171717 !important;
	color: #FFFFFF !important;
	border-color: #171717 !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .single-product-actions__wishlist.is-active {
	border-color: #EF4444 !important;
	color: #EF4444 !important;
	background: rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .single-product-actions__wishlist.is-active:hover {
	background: #EF4444 !important;
	color: #FFFFFF !important;
	border-color: #EF4444 !important;
}

/* ---- Meta (SKU/categories/tags) ---- */
.product_meta {
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	padding-top: var(--space-5);
	margin-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.product_meta > span {
	display: block;
	margin-bottom: var(--space-2);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: var(--fw-semibold);
	color: var(--color-ink-faint);
}

.product_meta > span:last-child {
	margin-bottom: 0;
}

.product_meta .sku,
.product_meta a {
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--fw-medium);
	color: var(--color-ink-muted);
}

.product_meta a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.product_meta a:hover {
	color: var(--color-ink);
}

/* ---- Trust row: boxed card instead of a bare text row, echoing the
   icon-in-a-tinted-circle language used by the homepage value props. ---- */
.single-product-trust {
	margin-top: var(--space-6);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.single-product-trust__shipping {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.single-product-trust__shipping svg {
	width: 18px;
	height: 18px;
	padding: var(--space-2);
	box-sizing: content-box;
	border-radius: var(--radius-full);
	background: var(--color-accent-tint);
	color: var(--color-accent);
	flex-shrink: 0;
}

.single-product-trust__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.single-product-trust__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
}

.single-product-trust__list svg {
	width: 18px;
	height: 18px;
	color: var(--color-ink);
}

/* ---- Tabs (Description / Fabric, Fit & Care) — rendered as an
   accordion via the woocommerce/single-product/tabs/tabs.php override,
   using native <details>/<summary> (no JS needed for expand/collapse,
   and it stays keyboard/screen-reader accessible for free). Class
   names below are ours; each panel still carries WooCommerce's own
   woocommerce-Tabs-panel/panel/entry-content/wc-tab classes too so
   tab-specific content keeps its existing styling untouched. ---- */
.woocommerce-tabs {
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.single-product-accordion__item {
	border-bottom: 1px solid var(--color-border);
}

/* The wrapper's own border-top above already separates the accordion
   from whatever sits above it (the trust card) — the first item
   doesn't need its own, near-duplicate line just below that one. And
   the last item's border-bottom is dropped too: with nothing else
   rendering after the accordion in the sidebar (Related Products lives
   in its own full-width section further down the page), that line was
   just a stray rule floating above empty space. */
.single-product-accordion__item:last-child {
	border-bottom: none;
}

.single-product-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	list-style: none;
}

/* Hide the default disclosure triangle (Chrome/Firefox marker,
   Safari's ::-webkit-details-marker) — the chevron icon below is our
   own toggle indicator instead. */
.single-product-accordion__summary::-webkit-details-marker {
	display: none;
}

.single-product-accordion__summary::marker {
	content: '';
}

.single-product-accordion__summary svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-ink-muted);
	transition: transform var(--duration-fast) var(--ease-standard);
}

.single-product-accordion__item[open] .single-product-accordion__summary svg {
	transform: rotate(180deg);
}

.single-product-accordion__panel {
	max-width: 72ch;
	padding-bottom: var(--space-6);
	line-height: var(--lh-relaxed);
}

/* WooCommerce's own frontend/single-product.js (still enqueued for
   its other single-product behaviour — quantity steppers, variation
   forms, gallery zoom — none of which this theme wants to lose) sets
   an inline `display: none` on every `.panel` as part of its legacy
   tab-switcher, which no longer has any `ul.tabs` nav to bind clicks
   to now that tabs.php renders an accordion. These !important rules,
   keyed off the native <details> `open` state, are the only way to
   win over that inline style without touching the shared WC script. */
.single-product-accordion__item:not([open]) .single-product-accordion__panel {
	display: none !important;
}

.single-product-accordion__item[open] .single-product-accordion__panel {
	display: block !important;
}

.woocommerce-tabs .panel {
	max-width: 72ch;
	line-height: var(--lh-relaxed);
}

/* ---- Fabric, Fit & Care tab (sls_render_fabric_fit_care_tab) ---- */
.fabric-fit-care-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.fabric-fit-care-list strong {
	color: var(--color-ink);
	font-weight: var(--fw-semibold);
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	max-width: 60ch;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	font-size: var(--fs-sm);
}

.woocommerce-tabs table.shop_attributes th {
	width: 40%;
	font-weight: var(--fw-semibold);
	color: var(--color-ink-muted);
}

/* Reviews (native WC/WP comments markup, rendered via WooCommerce's
   own single-product-reviews.php — not this theme's blog comments.php,
   so it keeps WC's #reviews/#comments/.commentlist/.comment_container
   structure and the woocommerce_comments() per-review callback). */
.woocommerce-Reviews-title {
	margin-bottom: var(--space-6);
}

#reviews .comment-form-rating label,
#reviews .comment-form-comment label,
#reviews .comment-form-author label,
#reviews .comment-form-email label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-2);
}

#reviews .stars {
	display: flex;
	gap: var(--space-1);
	margin-bottom: var(--space-4);
}

#reviews .stars a {
	position: relative;
	width: 22px;
	height: 22px;
	font-size: 0;
	color: var(--color-border-strong);
}

#reviews .stars a::before {
	content: '\2605';
	position: absolute;
	inset: 0;
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

#reviews .stars a.active {
	color: var(--color-accent);
}

#reviews .commentlist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-8);
}

/* The rule this replaces targeted `.comment`, a class that doesn't
   exist anywhere in WC's actual review markup (the li is `.review`,
   the inner wrapper is `.comment_container`) — so reviews previously
   rendered with no spacing or divider between them at all. */
#reviews .commentlist > li {
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

#reviews .commentlist > li:first-child {
	padding-top: 0;
}

#reviews .comment_container {
	display: flex;
	gap: var(--space-4);
}

#reviews .comment_container > .avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

#reviews .comment-text {
	flex: 1;
	min-width: 0;
}

#reviews .comment-text .star-rating {
	margin-bottom: var(--space-2);
}

#reviews .comment-text .meta {
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	margin: 0 0 var(--space-2);
}

#reviews .woocommerce-review__author {
	color: var(--color-ink);
	font-weight: var(--fw-semibold);
}

#reviews .woocommerce-review__dash {
	margin-inline: var(--space-1);
}

#reviews .description p:last-child {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	#reviews .comment_container {
		gap: var(--space-3);
	}

	#reviews .comment_container > .avatar {
		width: 36px;
		height: 36px;
	}
}

/* ---- Related / Upsells (reuses .product-grid + product-card) ----
   related.php is overridden (woocommerce/single-product/related.php)
   to wrap the heading in the same .section__eyebrow/.section__title
   pattern used by Recently Viewed just below it, so the two sections
   read as one consistent row style instead of a plain default <h2>
   next to a fully-designed carousel heading. */
.related.products,
.upsells.products {
	padding-top: var(--space-10);
	margin-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.related.products > h2,
.upsells.products > h2 {
	margin-bottom: var(--space-6);
}

.related.products .section__head,
.upsells.products .section__head {
	margin-bottom: var(--space-6);
}

.related.products ul.products,
.upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
	list-style: none;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.single-product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}

	.woocommerce-product-gallery {
		position: static;
	}

	.woocommerce-product-gallery__arrow {
		width: 36px;
		height: 36px;
	}

	.woocommerce-product-gallery__arrow svg {
		width: 16px;
		height: 16px;
	}

	.single-product-layout__summary {
		max-width: none;
	}

	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.single-product-accordion__summary {
		font-size: var(--fs-sm);
	}
}

@media (max-width: 480px) {
	.single-product-trust__list {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.cart {
		flex-direction: column;
		align-items: stretch;
	}

	.cart .quantity {
		align-self: flex-start;
	}
}