/* Theme-level refinements layered on top of WooCommerce's default frontend CSS. */

.wl-shop-main { padding-top: 24px; }

/* Single product */
.single-product div.product { max-width: var(--wl-container); margin: 0 auto; padding: 0 20px 60px; display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
	.single-product div.product { grid-template-columns: 1.1fr 1fr; align-items: start; }
	/* WooCommerce's default template prints the gallery, then .summary, then
	   (as later SIBLINGS of both inside the same div.product grid) the
	   description/dimensions tabs and the related-products section — see
	   woocommerce_after_single_product_summary. With only 2 explicit
	   columns and no span rule, Grid auto-placement dropped those later
	   sections into row 2 following the same 2-column track, crushing
	   "Related products" into the narrow second column instead of running
	   full width below both columns. `.summary ~ *` (not nth-child, which
	   would miscount when a sale badge <span> is also a sibling before the
	   gallery) grabs every section that comes after .summary and spans it
	   across both columns. */
	.single-product div.product > .summary ~ * { grid-column: 1 / -1; }
}

/* WooCommerce's OWN "woocommerce-layout.css" (a separate, always-enqueued
   stylesheet — not the one with most of its other default rules) still
   ships its pre-Grid, float-based 2-column product layout:
   ".woocommerce div.product div.images, .woocommerce-page div.product
   div.images{float:left;width:48%}" (and the same for div.summary,
   float:right). At (0,3,2) specificity that beats plain single-class
   rules here, and "float" is ignored on a grid item per spec but
   "width:48%" still applies — sizing the gallery to 48% of its actual
   grid COLUMN, not the old float layout's 48%-of-the-whole-row it was
   written for. That's what was leaving ~52% of the gallery column as
   bare background around a narrow image (and is exactly the same class
   of bug as .wl-product-card's own width fight in main.css). !important
   is deliberate here, matching that precedent, to reclaim width/float
   from a legacy plugin default this theme's Grid layout has fully
   replaced. */
.single-product div.product > .wl-pdp-gallery-wrap,
.single-product div.product > .summary {
	float: none !important;
	width: 100% !important;
	/* Grid items default to min-width:auto, which lets an oversized
	   descendant's own intrinsic content size (here, the mobile swipe
	   carousel's images at their natural pixel width) force this grid
	   TRACK wider than div.product's actual 350px-ish column — width:100%
	   above has no effect against that, since the grid track itself grew
	   to fit the content first. Confirmed via computed styles: this grid
	   item measured 1320px wide on a 390px viewport until this was added
	   — a textbook "grid blowout", not a media-query or specificity bug. */
	min-width: 0;
	/* Belt-and-braces alongside min-width:0 above: per spec, an element
	   with any overflow value other than visible gets an automatic
	   minimum size of 0 outright, which is the more reliable way to
	   actually stop this blowout (min-width:0 alone measurably wasn't
	   enough here — confirmed via computed styles showing it applied
	   correctly while the element still rendered far past its own
	   grid track). */
	overflow: hidden;
}
/* .woocommerce-product-gallery itself now sits one level deeper, inside
   .wl-pdp-gallery-wrap (see wl_render_gallery_with_wishlist() in
   inc/woocommerce-setup.php) rather than as this grid's direct child —
   still needs the same float/width override regardless of nesting depth,
   since it's the specific element WooCommerce's own conflicting rule
   above targets. */
.single-product div.product .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
}
/* Deliberately NOT position:sticky here (it was previously): combined
   with this being a CSS Grid item, "position:sticky; top:90px" was
   pushing the gallery ~90px below div.product's actual top edge even at
   scroll position zero (confirmed by removing it and watching the
   gallery's measured top snap back to match div.product's) — a real
   sticky-in-grid rendering quirk, not intentional spacing. Since the
   onsale "Sale!" badge is positioned absolute relative to div.product
   (WooCommerce's own default, not this theme's), that stray 90px gap
   was exactly what made the badge float above the image instead of
   sitting on its corner. Now that the gallery is a full hero+grid of
   images rather than a single short image, staying in view while
   scrolling past the summary is also less valuable than it was. */
/* Gallery: every image shown at once instead of a slider (see the
   'wc-product-gallery-slider' removal in inc/setup.php) — first image
   full-bleed and large, the rest in a 2-column grid below it, each image
   filling its cell edge to edge with no padding/background showing
   around it (object-fit:cover on a fixed aspect-ratio, not a
   letterboxed max-width image floating in whitespace). */
.single-product div.product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	border-radius: var(--wl-radius-image);
	overflow: hidden;
}
/* Same specificity fight as above: WooCommerce's default "...
   .woocommerce-product-gallery__image:nth-child(n+2){width:25%;
   display:inline-block}" (for its old flexslider thumbnail row) beats a
   plain single-class rule, shrinking every non-hero image to 25% of ITS
   grid cell too. !important reclaims it the same way. */
.single-product div.product .woocommerce-product-gallery__image {
	margin: 0;
	background: var(--wl-color-surface);
	overflow: hidden;
	width: 100% !important;
	display: block !important;
}
.single-product div.product .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
.single-product div.product .woocommerce-product-gallery__image a,
.single-product div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.single-product div.product .woocommerce-product-gallery__image:first-child img { aspect-ratio: 5 / 6; }
.single-product div.product .woocommerce-product-gallery__image:not(:first-child) img { aspect-ratio: 1 / 1; }

.single-product .product_title { font-size: 1.8rem; margin-bottom: 6px; }
/* Black (var(--wl-color-text)), not WooCommerce's own default price
   colour (a mustard/olive #958e09 — its "highlight" colour, applied via
   ".woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product
   p.price", which despite the :where() still carries a 3-class
   specificity that beat the plain ".single-product p.price" rule below
   until !important was added) — matching the dtalemodern.com reference,
   which shows price in plain black under the title. */
.single-product p.price { font-size: 1.3rem; margin-bottom: 8px; color: var(--wl-color-text) !important; }
.single-product p.price ins { text-decoration: none; color: var(--wl-color-text) !important; }
.single-product p.price del { color: var(--wl-color-text-muted) !important; }
/* "Price inclusive of all taxes | Pan India Shipping" tag directly under
   the price — see wl_pdp_price_tax_badge() in inc/woocommerce-setup.php. */
.wl-pdp-tax-badge {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px;
	border-radius: 4px;
	background: #5a5650;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 500;
}

/* One-line subtitle under the title (the product's own WooCommerce
   short description, repurposed here as plain text — see
   wl_pdp_subtitle() in inc/woocommerce-setup.php — instead of its old
   role holding the checkmark list, which is now the separate
   .wl-pdp-highlights block below). */
.wl-pdp-subtitle { color: var(--wl-color-text-muted); margin: 0 0 16px; font-size: 1rem; }

/* Star rating + review-count link, plus the eco-friendly grade badge, in
   one row — see wl_pdp_rating_eco_row() in inc/woocommerce-setup.php.
   WooCommerce's own .star-rating/.woocommerce-product-rating markup is
   unstyled by default outside the shop filter sidebar (the only other
   place this theme draws stars), so it's themed generically here too. */
.wl-pdp-rating-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.wl-pdp-rating-row .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; }
.wl-pdp-rating-row .star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1em; width: 5.4em; font-size: 1rem; }
.wl-pdp-rating-row .star-rating::before { content: '\2605\2605\2605\2605\2605'; color: var(--wl-color-border); letter-spacing: 2px; }
.wl-pdp-rating-row .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; }
.wl-pdp-rating-row .star-rating span::before { content: '\2605\2605\2605\2605\2605'; color: #d4a72c; letter-spacing: 2px; }
.wl-pdp-rating-row .woocommerce-review-link { font-size: 0.85rem; color: var(--wl-color-text-muted); text-decoration: underline; }
.wl-eco-badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.85rem; font-weight: 600; color: var(--wl-color-text);
	text-decoration: underline; text-underline-offset: 2px;
}
.wl-eco-badge span[aria-hidden] { font-size: 1rem; }
.wl-eco-badge--bronze span[aria-hidden] { filter: grayscale(0.2) sepia(0.4) hue-rotate(-10deg); }
.wl-eco-badge--gold span[aria-hidden] { filter: saturate(1.4); }

/* Checkmark highlight list — the ACF "product_highlights" repeater (see
   wl_pdp_highlights() in inc/woocommerce-setup.php), same checkmark
   treatment the short-description bullets used to get when written as
   a <ul>. */
.wl-pdp-highlights { list-style: none; margin: 0 0 16px; padding: 0; }
.wl-pdp-highlights li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--wl-color-text); }
.wl-pdp-highlights li::before {
	content: '\2713'; position: absolute; left: 0; top: 0; color: var(--wl-color-accent); font-weight: 700;
}

/* Real per-product dimensions (WooCommerce's own Shipping-tab L/W/H
   fields — already used for shipping calculations) shown as a compact
   row with icons; hidden entirely via PHP when a product has none set,
   rather than showing empty "—" values. */
.wl-pdp-dimensions { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.wl-pdp-dimensions__item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.wl-pdp-dimensions__item span[aria-hidden] { font-size: 1.1rem; color: var(--wl-color-text-muted); }
.wl-pdp-dimensions__label { display: block; color: var(--wl-color-text-muted); font-size: 0.75rem; }
.wl-pdp-dimensions__value { display: block; font-weight: 600; }

.single-product .variations { margin-bottom: 16px; }
.single-product .variations select { min-height: 44px; padding: 8px; border-radius: var(--wl-radius); border: 1px solid var(--wl-color-border); }
.single-product .single_add_to_cart_button.is-loading { opacity: 0.6; cursor: default; }
/* "Quantity" label + stepper on one line, then the price+button bar
   full-width below (dtalemodern.com reference). The label used to force
   its own full-width row above the stepper — now it's an inline-flex
   item that sits beside it instead, vertically centered against the
   stepper's 48px height via vertical-align:middle (needed because on
   variable products, see below, these two are plain inline content, not
   flex siblings, so align-items has no effect there). */
.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; }
/* Variable products render the label/stepper/bar inside WooCommerce's own
   .single_variation_wrap, which is the actual flex item here (not the
   elements themselves) — without a full-width basis it shrink-wraps to
   its content, undoing the "bar on its own row" stacking below. */
.single-product form.cart .single_variation_wrap { flex: 1 1 100%; width: 100%; }
.wl-pdp-quantity-label {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	font-weight: 600;
	font-size: 0.9rem;
	margin-right: 12px;
}
/* Explicit margin, not form.cart's flex `gap`: on variable products the
   stepper and bar sit inside WooCommerce's own
   .woocommerce-variation-add-to-cart wrapper (a plain block, not a flex
   child of form.cart), so `gap` never applied there and the stepper's
   bottom edge touched the price bar directly with zero space between
   them. Margin works regardless of which parent wraps these elements. */
.single-product form.cart .quantity { margin-bottom: 10px !important; vertical-align: middle; }

/* Price + Add to Cart merged into one solid bar (dtalemodern.com
   reference) — replaces the earlier separate pill-shaped button. Reuses
   the same visual language as the (removed) sticky bar this theme had
   before: solid dark background, price as its own left segment, the
   real single_add_to_cart_button restyled to fill the rest rather than
   a second fake button, so its normal AJAX add-to-cart behaviour is
   completely unaffected. */
.wl-pdp-atc-bar {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
	background: #111;
	border-radius: var(--wl-radius);
	overflow: hidden;
}
.wl-pdp-atc-bar__price {
	display: flex; align-items: center;
	padding: 0 18px;
	min-height: 52px;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	background: rgba(255,255,255,0.08);
	white-space: nowrap;
}
.wl-pdp-atc-bar__price del { color: rgba(255,255,255,0.55); }
.wl-pdp-atc-bar__price ins { text-decoration: none; }
/* !important needed on background: the button carries WooCommerce's own
   "button alt" classes, and ".woocommerce button.button.alt" (3 classes
   + a type selector) out-specifies this 3-class selector by its extra
   type selector, same fight as the border-radius rule below already
   needed !important for. */
.single-product .wl-pdp-atc-bar .single_add_to_cart_button {
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	min-height: 52px;
	background: transparent !important;
	color: #fff;
	font-weight: 600;
	border: none;
	border-radius: 0 !important;
}
.single-product .wl-pdp-atc-bar .single_add_to_cart_button:hover { background: rgba(255,255,255,0.08) !important; color: #fff; }

/* Quantity stepper: WooCommerce's plain number input replaced with a
   pill-shaped -/+ control (assets/js/main.js's initQuantitySteppers wraps
   the input with the two buttons; this just styles the result) instead of
   relying on the browser's own boxy native spinner arrows. */
/* WooCommerce core actually ships the more specific
   ".woocommerce div.product form.cart div.quantity{float:left;margin:0
   4px 0 0}" here (0,4,3), which outranks a plain ".single-product
   .quantity" override (0,2,0) — !important needed, same fight as the
   background/border-radius overrides above. Left uncancelled, the float
   pulled the stepper out of normal flow; because the still-floated
   stepper's height happened to end exactly where .wl-pdp-atc-bar began,
   the bar regained full width but with zero clearance from the float,
   so margin-bottom on the stepper had no visible effect either — the
   float itself, not just its margin, had to be killed. */
.single-product .quantity { float: none !important; }
.quantity { display: inline-flex; align-items: stretch; height: 48px; border: 1px solid var(--wl-color-border); border-radius: 999px; overflow: hidden; }
.quantity input.qty {
	width: 44px; min-height: 0; border: none; border-radius: 0; text-align: center;
	padding: 0; font-size: 0.95rem; background: none;
	/* hide the native number-input spinner arrows entirely */
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wl-qty-btn {
	flex: none; width: 40px; border: none; background: none; cursor: pointer;
	font-size: 1.1rem; line-height: 1; color: var(--wl-color-text);
	display: flex; align-items: center; justify-content: center;
}
.wl-qty-btn:hover { background: var(--wl-color-bg); }
.wl-qty-btn--minus { border-radius: 999px 0 0 999px; }
.wl-qty-btn--plus { border-radius: 0 999px 999px 0; }

/* Wishlist icon button beside Add to Cart (reuses the same heart glyph
   and AJAX endpoint as the shop-loop card wishlist icon) — full circle to
   match the same pill/round language as the stepper and Add to Cart. */
.wl-pdp-wishlist {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; flex: none;
	border: 1px solid var(--wl-color-border); border-radius: 999px;
	background: none; cursor: pointer; color: var(--wl-color-text); font-size: 1.1rem;
	overflow: hidden;
}
.wl-pdp-wishlist:hover { background: var(--wl-color-bg); }
.wl-pdp-wishlist.is-active { color: var(--wl-color-accent); border-color: var(--wl-color-accent); }

.wl-installments {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 16px; padding: 10px 14px;
	border: 1px solid var(--wl-color-border); border-radius: var(--wl-radius);
	font-size: 0.85rem; color: var(--wl-color-text);
}
.wl-installments__badge {
	flex: none; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
	padding: 3px 9px; border-radius: 999px; background: var(--wl-color-bg); color: var(--wl-color-text);
}

/* Real trust claims (same 4 used on the homepage trust strip), shown
   under Add to Cart — a standard fixture on premium furniture PDPs, and
   reusing existing site copy rather than inventing new claims. One per
   row (not a single crowded line) so the block uses the summary
   column's full width instead of leaving it mostly blank. */
.wl-pdp-trust {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0 0;
	padding: 16px 0;
	border-top: 1px solid var(--wl-color-border);
	border-bottom: 1px solid var(--wl-color-border);
}
.wl-pdp-trust__item { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--wl-color-text-muted); }
.wl-pdp-trust__item span[aria-hidden] { font-size: 1.1rem; line-height: 1; flex: none; }

/* Right-column info accordion (dtalemodern.com reference) — see
   wl_render_pdp_accordion() in inc/woocommerce-setup.php. Plain
   <details>/<summary>, same pattern as .mobile-nav__list's expandable
   category rows, so no extra JS is needed. */
.wl-pdp-accordion { margin: 24px 0 0; border-top: 1px solid var(--wl-color-border); }
.wl-pdp-accordion__item { border-bottom: 1px solid var(--wl-color-border); }
.wl-pdp-accordion__item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	cursor: pointer;
	font-weight: 600;
}
.wl-pdp-accordion__item summary::-webkit-details-marker { display: none; }
.wl-pdp-accordion__icon { position: relative; width: 14px; height: 14px; flex: none; }
.wl-pdp-accordion__icon::before, .wl-pdp-accordion__icon::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.wl-pdp-accordion__icon::before { width: 14px; height: 2px; }
.wl-pdp-accordion__icon::after { width: 2px; height: 14px; transition: transform 0.2s ease; }
.wl-pdp-accordion__item[open] .wl-pdp-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.wl-pdp-accordion__content {
	padding: 0 0 20px;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--wl-color-text-muted);
}
.wl-pdp-accordion__content > *:first-child { margin-top: 0; }
.wl-pdp-accordion__content > *:last-child { margin-bottom: 0; }
.wl-pdp-accordion__content table { width: 100%; border-collapse: collapse; }
.wl-pdp-accordion__content table th, .wl-pdp-accordion__content table td {
	padding: 8px 0; border-bottom: 1px solid var(--wl-color-border); text-align: left;
}
.wl-pdp-accordion__content table th { width: 40%; font-weight: 500; color: var(--wl-color-text); }

.single-product .product_meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wl-color-border);
	font-size: 0.85rem;
	color: var(--wl-color-text-muted);
}
.single-product .product_meta > span { display: block; margin-bottom: 4px; }
.single-product .product_meta a { color: inherit; }

.single-product .woocommerce-tabs { margin-top: 8px; }

.single-product .related.products,
.single-product .up-sells.upsells.products {
	margin-top: 8px;
	padding-top: 40px;
	border-top: 1px solid var(--wl-color-border);
}
.single-product .related.products > h2,
.single-product .up-sells.upsells.products > h2 {
	font-family: var(--wl-font-heading);
	font-weight: 400;
	font-size: 1.6rem;
	margin-bottom: 24px;
}

/* Reviews / ratings */
#reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }

/* Cart & checkout */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table { border-color: var(--wl-color-border); }
/* Flex, not grid: WooCommerce's legacy "woocommerce-layout.css" float
   rules for ".col2-set .col-1/.col-2" fight a grid layout on this same
   shared class unpredictably (columns
   ending up on separate rows). Flex's default row placement sidesteps it. */
.woocommerce-checkout .col2-set { display: flex; flex-wrap: wrap; gap: 32px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { flex: 1 1 280px; float: none !important; width: auto !important; }
@media (min-width: 900px) {
	.woocommerce-checkout .col2-set .col-1 { flex: 1.2 1 0; }
	.woocommerce-checkout .col2-set .col-2 { flex: 1 1 0; }
}
.woocommerce-checkout #order_review { position: sticky; top: 90px; background: var(--wl-color-surface); padding: 20px; border-radius: var(--wl-radius); border: 1px solid var(--wl-color-border); }

/* Coupon row (cart table footer): input + button on one baseline, same
   height, instead of WooCommerce's unstyled inline default (input and
   button rendered at their native, mismatched heights). */
.woocommerce-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}
.woocommerce-cart .coupon .input-text {
	flex: 1 1 200px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wl-color-border);
	border-radius: var(--wl-radius);
	background: var(--wl-color-surface);
}
.woocommerce-cart .coupon .button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 22px;
	white-space: nowrap;
	border-radius: var(--wl-radius);
	background: var(--wl-color-accent);
	color: #fff;
	border: 1px solid transparent;
	font-weight: 600;
	cursor: pointer;
}
.woocommerce-cart .coupon .button:hover { background: var(--wl-color-accent-dark); }

/* Shipping calculator ("Change address") — WooCommerce's default markup
   ships completely unstyled (bare <p class="form-row"> stacks with no
   spacing/sizing rules of its own), so it inherits nothing from the
   theme until styled here explicitly. */
.woocommerce-shipping-calculator .shipping-calculator-button {
	display: inline-block;
	margin-top: 4px;
	font-weight: 600;
	text-decoration: underline;
	color: var(--wl-color-text);
}
.woocommerce-shipping-calculator .shipping-calculator-form {
	max-width: 420px;
	margin-top: 16px;
	padding: 20px;
	background: var(--wl-color-surface);
	border: 1px solid var(--wl-color-border);
	border-radius: var(--wl-radius);
}
.woocommerce-shipping-calculator .shipping-calculator-form .form-row {
	margin: 0 0 14px;
}
.woocommerce-shipping-calculator .shipping-calculator-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}
.woocommerce-shipping-calculator .shipping-calculator-form select,
.woocommerce-shipping-calculator .shipping-calculator-form input.input-text {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wl-color-border);
	border-radius: var(--wl-radius);
	background: var(--wl-color-bg);
}
.woocommerce-shipping-calculator .shipping-calculator-form p:last-of-type { margin-bottom: 0; }
.woocommerce-shipping-calculator .shipping-calculator-form button[name="calc_shipping"] {
	min-height: 44px;
	padding: 0 22px;
	border-radius: var(--wl-radius);
	background: var(--wl-color-accent);
	color: #fff;
	border: 1px solid transparent;
	font-weight: 600;
	cursor: pointer;
}
.woocommerce-shipping-calculator .shipping-calculator-form button[name="calc_shipping"]:hover { background: var(--wl-color-accent-dark); }
.woocommerce-checkout input.input-text, .woocommerce-checkout select { min-height: 44px; }

/* ==========================================================
   4-step guided flow (tikamoon.co.uk/cart reference) — see
   wl_render_flow_stepper() in inc/checkout.php for the markup this
   styles: My Shopping Basket -> Identification -> Delivery -> Payment.
   ========================================================== */
.wl-flow-stepper {
	list-style: none;
	display: flex;
	align-items: flex-start;
	margin: 0 0 40px;
	padding: 20px 16px;
	background: var(--wl-color-surface);
	border: 1px solid var(--wl-color-border);
	border-radius: 999px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.wl-flow-stepper__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.wl-flow-stepper__node {
	width: 44px; height: 44px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--wl-color-border);
	color: var(--wl-color-text-muted);
	background: var(--wl-color-surface);
	position: relative; z-index: 1;
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.wl-flow-stepper__node svg { width: 20px; height: 20px; }
.wl-flow-stepper__label {
	margin-top: 8px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wl-color-text-muted);
	max-width: 150px;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.wl-flow-stepper__label { white-space: normal; max-width: 100px; }
}
.wl-flow-stepper__step.is-done .wl-flow-stepper__node { border-color: var(--wl-color-accent); background: var(--wl-color-accent); color: #fff; }
.wl-flow-stepper__step.is-done .wl-flow-stepper__label { color: var(--wl-color-text); }
.wl-flow-stepper__step.is-current .wl-flow-stepper__node {
	border-color: var(--wl-color-accent);
	color: var(--wl-color-accent);
	box-shadow: 0 0 0 4px rgba(122,92,62,0.15);
	animation: wl-stepper-pulse 1.8s ease-in-out infinite;
}
.wl-flow-stepper__step.is-current .wl-flow-stepper__label { color: var(--wl-color-text); }
@keyframes wl-stepper-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(122,92,62,0.15); }
	50% { box-shadow: 0 0 0 8px rgba(122,92,62,0.05); }
}
/* The connector sits behind the nodes (z-index:1 above), spanning from
   this step's own center out to the right edge of its flex cell — two
   half-width lines meeting between adjacent nodes read as one
   continuous connector across the whole row. .is-filled animates its own
   fill sweeping left-to-right rather than the color just flipping
   instantly — the "trending" motion asked for, marking a step as freshly
   completed rather than a static already-done bar. */
.wl-flow-stepper__connector {
	position: absolute;
	top: 22px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--wl-color-border);
	z-index: 0;
}
.wl-flow-stepper__connector::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wl-color-accent);
	width: 0;
	transition: width 0.6s ease;
}
.wl-flow-stepper__connector.is-filled::after { width: 100%; }
@media (max-width: 640px) {
	.wl-flow-stepper { padding: 16px 10px; border-radius: var(--wl-radius); gap: 4px; }
	.wl-flow-stepper__label { display: none; }
	.wl-flow-stepper__node { width: 36px; height: 36px; }
	.wl-flow-stepper__node svg { width: 16px; height: 16px; }
	.wl-flow-stepper__connector { top: 18px; }
}

/* Identification gate (inc/checkout.php's wl_render_identification_gate()) — the mobile+OTP login below (woocommerce/myaccount/form-login.php, real account creation on first verify) shown instead of the checkout form until the customer is signed in. */
.wl-identification { max-width: 900px; margin: 0 auto 60px; text-align: center; }
.wl-identification__title { font-size: 1.6rem; margin-bottom: 8px; }
.wl-identification__intro { color: var(--wl-color-text-muted); max-width: 560px; margin: 0 auto 32px; }
/* Single centered card (not the old two-column login/register split —
   OTP verification creates the account itself, there's no separate
   "register" form any more) — also renders bare, without a
   .wl-identification ancestor, on the plain /my-account/ page when
   logged out, since this is the same form-login.php template WooCommerce
   uses there; sized/self-contained rather than relying on that wrapper. */
.wl-otp-login {
	max-width: 380px;
	margin: 0 auto;
	padding: 28px 24px;
	background: var(--wl-color-surface);
	border: 1px solid var(--wl-color-border);
	border-radius: var(--wl-radius);
	text-align: left;
}
.wl-otp-login__step[hidden] { display: none; }
/* Only ever rendered while real SMS delivery isn't configured yet (see
   wl_ajax_request_otp() in inc/account-auth.php) — deliberately styled
   as an obvious "not the real thing" dev callout (dashed border, amber),
   not blended in with the rest of the card. */
.wl-otp-login__test-hint {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px dashed #c9973a;
	border-radius: 4px;
	background: #fdf6e8;
	color: #8a6414;
	font-size: 0.82rem;
	font-weight: 600;
}
.wl-otp-login__test-hint[hidden] { display: none; }

/* Delivery / Payment cards (inc/checkout.php's wl_open_delivery_card() / wl_close_payment_card()) */
.wl-checkout-card { max-width: 900px; margin: 0 auto 24px; padding: 28px; background: var(--wl-color-surface); border: 1px solid var(--wl-color-border); border-radius: var(--wl-radius); }
.wl-checkout-card__title { font-size: 1.3rem; margin: 0 0 20px; }
.wl-checkout-card--payment[hidden] { display: none; }
.wl-delivery-date-field { max-width: 400px; }
.wl-delivery-date-field input[type="date"] { min-height: 44px; padding: 10px 12px; border: 1px solid var(--wl-color-border); border-radius: var(--wl-radius); width: 100%; }
.wl-checkout-continue {
	display: flex; margin: 0 auto 24px; max-width: 900px; width: 100%;
	justify-content: center; align-items: center; gap: 8px;
	min-height: 50px; padding: 0 32px; border-radius: 999px; border: none;
	background: var(--wl-color-accent); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.wl-checkout-continue:hover { background: var(--wl-color-accent-dark); }
.wl-checkout-continue[hidden] { display: none; }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--wl-color-border); }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 0; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; }
/* WooCommerce core ships ".woocommerce-account .addresses .title
   .edit{float:right}" on the Addresses page — floats "Add Billing
   address"/"Add Shipping address" to the right edge of their (narrow,
   grid-constrained) column instead of under the "Billing address" /
   "Shipping address" heading the way the rest of that column's text is
   left-aligned, reading as off/centered rather than as part of the
   same block. Stack it left-aligned below the heading instead. */
.woocommerce-account .addresses .title .edit {
	float: none;
	display: block;
	text-align: left;
	margin-top: 4px;
}

/* WooCommerce notices */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	list-style: none;
	max-width: var(--wl-container);
	margin: 20px auto;
	padding: 14px 20px;
	border-radius: var(--wl-radius);
	background: var(--wl-color-bg);
	border: 1px solid var(--wl-color-border);
}
/* The small blue "box" sitting on top of the first word of info notices
   (e.g. My Account > Orders' "Confirm your email address..." — looks
   like an overlap/alignment bug but isn't one) is WooCommerce core's own
   ".woocommerce-info::before" decorative icon: content:"\e028" in its
   bundled icon-font. Every OTHER glyph in that font renders correctly
   (confirmed by rendering several side by side at a large size) — only
   \e028 itself has no actual glyph in the font file WooCommerce ships,
   so the browser falls back to its "missing character" box outline,
   tinted the icon's own blue (#1e85be). A font-file bug inside the
   WooCommerce plugin, not this theme's CSS — fixed here by removing the
   icon rather than patching a core plugin asset. */
.woocommerce-info::before { content: none; }
/* WooCommerce core ships ".woocommerce-error .button, .woocommerce-info
   .button, .woocommerce-message .button{float:right}" — fine at desktop
   widths, but on a narrow phone screen (e.g. My Account > Orders'
   "Confirm your email address..." notice) a ~200px floated button next
   to wrapping text leaves barely 140px for that text, so the two
   visually collide instead of wrapping cleanly. Stack them instead. */
@media (max-width: 640px) {
	.woocommerce-message, .woocommerce-error, .woocommerce-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
		float: none;
		width: 100%;
		text-align: center;
	}
}

/* Brand-coloured primary buttons — WooCommerce's own "alt" buttons
   (Add to cart, Proceed to checkout, Place order) default to its purple. */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #place_order, .woocommerce .single_add_to_cart_button, .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--wl-color-accent); color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #place_order:hover, .woocommerce .single_add_to_cart_button:hover, .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--wl-color-accent-dark); color: #fff;
}

/* Order progress timeline (inc/order-tracking.php) */
.wl-order-timeline { margin: 32px 0; }
.wl-order-timeline ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 8px; }
.wl-order-timeline li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.85rem; text-align: center; color: var(--wl-color-text-muted); position: relative; }
.wl-order-timeline li::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--wl-color-border); z-index: 0; }
.wl-order-timeline li:first-child::before { display: none; }
.wl-order-timeline__dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--wl-color-border); position: relative; z-index: 1; }
.wl-order-timeline li.is-done::before, .wl-order-timeline li.is-current::before { background: var(--wl-color-accent); }
.wl-order-timeline li.is-done .wl-order-timeline__dot { background: var(--wl-color-accent); border-color: var(--wl-color-accent); }
.wl-order-timeline li.is-current .wl-order-timeline__dot { border-color: var(--wl-color-accent); box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }
.wl-order-timeline li.is-done, .wl-order-timeline li.is-current { color: var(--wl-color-text); font-weight: 600; }
.wl-order-timeline .wl-tracking-details th, .wl-order-timeline .wl-tracking-details td { padding: 8px 10px; }
@media (max-width: 600px) { .wl-order-timeline li { font-size: 0.72rem; } }

/* Wishlist button overlaid on the gallery image (dtalemodern.com
   reference) — see wl_render_gallery_with_wishlist() in
   inc/woocommerce-setup.php. This site's YITH renders its "block" variant
   (a custom element: .yith-add-to-wishlist-button-block > a
   .yith-wcwl-add-to-wishlist-button > svg.yith-wcwl-icon +
   span.yith-wcwl-add-to-wishlist-button__label), not the classic
   add-to-wishlist.php template's plain markup — confirmed via the live
   DOM rather than assumed, since the two render completely differently.
   overflow:hidden on the fixed 40x40 circle is what actually keeps the
   label text from spilling out below the icon; hiding the label span
   directly is really just belt-and-braces. */
.single-product div.product .wl-pdp-gallery-wrap { position: relative; }
.wl-pdp-wishlist--gallery {
	/* top-LEFT, not top-right like the dtalemodern.com reference — this
	   gallery already has WooCommerce's own zoom/lightbox trigger button
	   sitting at top:16px;right:16px (its default position, not
	   something this theme placed), so putting the heart there too just
	   stacks one invisibly behind the other. */
	position: absolute; top: 16px; left: 16px; z-index: 5;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	overflow: hidden;
}
.wl-pdp-wishlist--gallery .yith-add-to-wishlist-button-block,
.wl-pdp-wishlist--gallery .yith-wcwl-add-to-wishlist-button {
	/* !important: YITH's own CSS has a same-or-higher-specificity rule
	   for this exact button (.yith-wcwl-add-to-wishlist-button--single
	   .yith-wcwl-add-to-wishlist-button--anchor, 3 classes) that sets
	   justify-content:flex-start — with this button's text label hidden
	   (see the __label rule below), that left the heart icon shoved to
	   the left edge of its circle instead of centred, confirmed as the
	   exact cause of the off-centre heart reported on mobile. */
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 40px; height: 40px;
	margin: 0 !important;
	gap: 0 !important;
}
.wl-pdp-wishlist--gallery .yith-wcwl-icon { width: 18px; height: 18px; flex: none; }
.wl-pdp-wishlist--gallery .yith-wcwl-add-to-wishlist-button__label { display: none; }
.wl-pdp-wishlist--gallery.wl-wishlist-toggle { border: none; font-size: 1.2rem; cursor: pointer; color: var(--wl-color-text); }
.wl-pdp-wishlist--gallery.is-active,
.wl-pdp-wishlist--gallery .yith-wcwl-icon.is-active,
.wl-pdp-wishlist--gallery .yith-add-to-wishlist-button-block--added .yith-wcwl-icon { color: var(--wl-color-accent); fill: var(--wl-color-accent); }

/* Share row — priority 32, under the stock/delivery block. */
.wl-pdp-share { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.wl-pdp-share__label { font-size: 0.85rem; color: var(--wl-color-text-muted); }
.wl-pdp-share__icon {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--wl-color-bg); color: var(--wl-color-text);
}
.wl-pdp-share__icon:hover { background: var(--wl-color-accent); color: #fff; }

/* "Free Design Consultation" / "Pan India Shipping" quick-link rows —
   priority 33, between the share row and the trust strip. */
.wl-pdp-quick-links { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 16px 0; border-top: 1px solid var(--wl-color-border); }
.wl-pdp-quick-links__row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--wl-color-text); text-decoration: none; }
a.wl-pdp-quick-links__row:hover { color: var(--wl-color-accent); }
.wl-pdp-quick-links__row a { color: var(--wl-color-accent); text-decoration: underline; }
.wl-pdp-quick-links__icon { font-size: 1.1rem; line-height: 1.3; flex: none; }
/* WhatsApp "Contact Us" link under "Pan India Shipping" — icon + text,
   not the plain underlined text link every other quick-link uses. */
.wl-pdp-quick-links__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	color: #25d366 !important;
	text-decoration: none !important;
	font-weight: 600;
}
.wl-pdp-quick-links__whatsapp svg { flex: none; }
.wl-pdp-quick-links__whatsapp:hover { color: #1da851 !important; }

/* "You May Also Like" related-products slider — see
   woocommerce/single-product/related.php. */
/* min-width:0: this section's own .wl-category-showcase__products slider
   holds fixed-width cards by design (meant to horizontal-scroll, not
   shrink) — reused here from the homepage, where it only ever sits in
   plain block sections. As a grid ITEM of div.product for the first time
   (single-product.php's summary/gallery/related/CTA are ALL one grid
   column on mobile), its fixed-width content's automatic minimum size
   was blowing out that shared column to ~1320px, stretching every OTHER
   sibling in it — including the CTA band below, which has no
   horizontally-scrolling content of its own — to match. Confirmed by
   checking div.product's own resolved track width before/after this. */
.wl-related-products { border-top: 1px solid var(--wl-color-border); padding: 40px 0; margin-top: 40px; min-width: 0; }
/* Same reasoning as above, at every level between the section and the
   actual fixed-width card track — a single min-width:0 on the outermost
   box wasn't sufficient on its own the last time this exact issue came
   up elsewhere on this page (the gallery carousel), so all three levels
   get it here from the start rather than repeating that trial and error. */
.wl-related-products .wl-container,
.wl-related-products .wl-category-showcase__slider { min-width: 0; }

@media (max-width: 640px) {
	/* Both bugs below are the same double-padding/spacing pattern already
	   fixed for the gallery earlier in this file, just recurring here:
	   .wl-related-products is a direct grid-item child of div.product
	   (which has its own left/right padding zeroed on mobile, see above),
	   so the page's real 20px inset already comes from the single outer
	   <main class="wl-container wl-shop-main"> ancestor alone — this
	   section's own inner .wl-container then added a REDUNDANT second
	   20px, indenting "You May Also Like" 20px further right than every
	   other PDP section (confirmed via getBoundingClientRect: heading at
	   x=40 vs the accordion just above it at x=20). And its 40px
	   margin-top + 40px padding-top (on top of div.product's own grid
	   `gap`) were sized for the desktop 2-column layout, not this single-
	   column mobile stack, producing the large blank band between
	   "Additional Information" and this section. */
	.single-product .wl-related-products .wl-container { padding-left: 0; padding-right: 0; }
	.single-product .wl-related-products { margin-top: 0; padding: 20px 0; }
}

/* "Customise" colour swatches — see inc/product-swatches.php +
   initColourSwatches() in assets/js/main.js. The underlying <select> WC
   renders right before this is kept in the DOM (variations.js needs it)
   but visually hidden, not removed. */
.wl-pdp-customise-heading { margin: 20px 0 4px; }
.wl-pdp-customise-heading h3 { font-size: 1rem; margin: 0 0 4px; }
.wl-pdp-customise-heading p { font-size: 0.82rem; color: var(--wl-color-text-muted); margin: 0; }
.variations select:has(+ .wl-swatches) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wl-swatches { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 0; }
/* Each swatch + its colour name stack in their own column so the name
   sits directly under its circle rather than in one shared row below
   all of them — keeps the name attached to the right swatch regardless
   of how many colours a product has or how they wrap. */
.wl-swatches__option { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 34px; }
.wl-swatches__item {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--wl-swatch-color, #ccc);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--wl-color-border);
	cursor: pointer; padding: 0;
}
.wl-swatches__item:hover { box-shadow: 0 0 0 1px var(--wl-color-text-muted); }
.wl-swatches__item.is-selected { box-shadow: 0 0 0 2px var(--wl-color-accent); }
.wl-swatches__name {
	font-size: 0.7rem;
	color: var(--wl-color-text-muted);
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}
.wl-swatches__option:has(.wl-swatches__item.is-selected) .wl-swatches__name { color: var(--wl-color-text); font-weight: 600; }

/* PDP consultation banner: centred text + button (the shared .wl-cta-band
   is left-aligned on the Custom Furniture page it was built for). */
.wl-cta-band--center .wl-cta-band__inner { margin: 0 auto; text-align: center; }

/* ==========================================================
   PDP gallery, mobile: one-image-at-a-time swipe carousel with dot
   pagination (dtalemodern.com reference), replacing the desktop
   hero-plus-grid layout only below this breakpoint — the grid itself
   (.woocommerce-product-gallery__wrapper's base rules, further up this
   file) is untouched above it.
   ========================================================== */
@media (max-width: 640px) {
	/* Breadcrumb dropped entirely on mobile product pages (dtalemodern.com
	   reference has none there), and the shop-main wrapper's own top
	   padding — sized for the breadcrumb's presence — shrunk to match, so
	   the gallery sits right under the category slider instead of
	   leaving that now-empty space behind. */
	.single-product .wl-breadcrumbs { display: none; }
	.single-product .wl-shop-main { padding-top: 4px; }

	/* WooCommerce's own variation form is a <table> — "Colour" sits in
	   its own td.label cell, pushing the td.value cell holding the
	   swatches into a second column starting well past the title/price's
	   left edge (measured ~106px in, vs. their 0). Restacked as plain
	   blocks (label line, then swatches below it) instead, both flush
	   with everything else on the page — the table/tr/td elements stay
	   in the DOM (WooCommerce's variations.js only reads/writes values
	   and classes on them, not the table layout itself), just redisplayed. */
	.variations, .variations tbody, .variations tr { display: block; }
	.variations td.label, .variations td.value { display: block; padding: 0; width: auto; }
	.variations td.label label { display: block; margin-bottom: 8px; }

	/* div.product's own 20px side padding stacks on top of the outer
	   <main class="wl-container">'s own 20px (style.css) — a real,
	   measured 40px combined inset for the title/price/description text,
	   double the dtalemodern.com reference's single ~20px. Dropping this
	   inner layer here leaves just the one from wl-container, matching
	   it. The gallery's own full-bleed escape math right below has to
	   shrink from -40px/+80px to -20px/+40px to match — it was
	   compensating for both padding layers; with only one left, escaping
	   by the old amount would push it 20px past the actual screen edge. */
	.single-product div.product { padding-left: 0; padding-right: 0; gap: 16px; }

	/* min-width:0 at every level from here down to the flex items: a
	   plain "width:100%" chain (.wl-pdp-gallery-wrap down to this flex
	   container) still measured ~3.4x the real 350px viewport column
	   width even with min-width:0 set on the outermost grid item alone
	   — confirmed via getComputedStyle at each level. Each box in a
	   flex/grid formatting context defaults to min-width:auto (its own
	   content's min-content size as a hard floor beneath any
	   width:100%), and that floor has to be zeroed at EVERY level the
	   blowout could originate from, not just the outermost one — the
	   .woocommerce-product-gallery__image flex items' own default
	   min-width:auto (turned out to be the actual source here) was
	   still pushing this flex container wider than its parent despite
	   the grid item above it already having min-width:0. */
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .woocommerce-product-gallery__wrapper {
		min-width: 0;
	}
	/* Full-bleed to the actual screen edge, cancelling out TWO stacked
	   20px insets — div.product's own padding (near the top of this
	   file) AND the outer <main class="wl-container"> wrapper's padding
	   (style.css) it sits inside — not just the inner one; -20px alone
	   still left a real, measured 20px gap (confirmed via
	   getBoundingClientRect before adding the second 20px here). The
	   dtalemodern.com reference runs its gallery edge-to-edge with no
	   side gutter, only re-introducing padding for the title/price/etc.
	   below it. */
	.single-product div.product .wl-pdp-gallery-wrap {
		margin-left: -20px;
		margin-right: -20px;
		/* This element also has "width: 100% !important" from the
		   desktop/base rules further up this file (originally written to
		   fight WooCommerce's own float/width defaults) — a hard 100%
		   blocks the usual trick where negative margins on a width:auto
		   block automatically grow to fill the extra space. Explicit calc
		   here overrides that fixed 100% so both edges actually reach the
		   screen, not just the left one (confirmed via
		   getBoundingClientRect: without this, only x moved to 0 while
		   width stayed the pre-full-bleed 310px, leaving the right edge
		   short of the screen edge). */
		width: calc(100% + 40px) !important;
	}
	.single-product div.product .woocommerce-product-gallery__wrapper {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0;
	}
	.woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
	/* Every slide the same size and aspect ratio (unlike the desktop
	   grid, where the first image is intentionally taller/full-width and
	   the rest are square) — a swipe carousel needs a consistent frame
	   so slides don't jump size as you page through them. */
	.single-product div.product .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-align: start;
	}
	.single-product div.product .woocommerce-product-gallery__image img,
	.single-product div.product .woocommerce-product-gallery__image:first-child img {
		/* Was 4/5 (portrait) — taller than the dtalemodern.com reference's
		   own mobile gallery, which reads roughly square. Furniture shots
		   (a chair or sofa on a wide floor) are usually framed landscape
		   to begin with, so a portrait crop was cutting more out of each
		   photo than needed while also pushing the title/price further
		   down the screen than the reference. */
		aspect-ratio: 1 / 1;
	}

	/* WooCommerce's own zoom/lightbox trigger (top:16px;right:16px,
	   core CSS, not this theme's) is hidden here in favour of the
	   heart+share pair taking that corner, matching the reference —
	   tapping/clicking the image itself (or the "Tap to Zoom" hint
	   below) still opens the same PhotoSwipe lightbox either way, this
	   only removes the redundant icon button. */
	.woocommerce-product-gallery__trigger { display: none; }
	.wl-pdp-wishlist--gallery { top: 16px; left: auto; right: 16px; }
	.wl-pdp-gallery-share {
		position: absolute; top: 64px; right: 16px; z-index: 5;
		width: 40px; height: 40px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: #fff; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
		color: var(--wl-color-text); cursor: pointer;
	}

	.wl-pdp-gallery-dots {
		position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
		display: flex; justify-content: center; gap: 6px;
	}
	.wl-pdp-gallery-dots__dot {
		width: 6px; height: 6px; border-radius: 50%;
		background: rgba(255,255,255,0.6);
		transition: background-color 0.15s ease, transform 0.15s ease;
	}
	.wl-pdp-gallery-dots__dot.is-active { background: #fff; transform: scale(1.3); }

	.wl-pdp-gallery-zoom-hint {
		position: absolute; right: 16px; bottom: 16px; z-index: 4;
		background: rgba(255,255,255,0.92);
		color: var(--wl-color-text);
		font-size: 0.72rem; font-weight: 600;
		padding: 5px 10px; border-radius: 999px;
		pointer-events: none;
	}
	/* The dots sit centered along the bottom edge and the zoom hint in
	   the bottom-right corner — on a single-image product (no dots
	   rendered, see initGalleryCarousel() in assets/js/main.js) the hint
	   stays exactly where the reference puts it since it doesn't depend
	   on the dots row's width. */
}

/* Share icon next to the WhatsApp/X/Facebook row further down the page
   (wl_pdp_share_row()) — reuses the same 30px circle treatment as those,
   just for the gallery's own share trigger above the fold. */
.wl-pdp-gallery-share:hover { background: var(--wl-color-bg); }

/* ==========================================================
   Sticky mobile add-to-cart bar: solid dark bar, price left / button
   right, no thumbnail — matching the dtalemodern.com reference exactly
   rather than this theme's earlier thumbnail+title treatment.
   ========================================================== */
.wl-sticky-atc {
	background: #111;
	border-top: none;
	padding: 0;
}
.wl-sticky-atc__info { display: none; }
.wl-sticky-atc__price-tag {
	flex: 0 0 auto;
	display: flex; align-items: center;
	padding: 0 18px;
	height: 56px;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	background: rgba(255,255,255,0.08);
}
.wl-sticky-atc__price-tag del { color: rgba(255,255,255,0.55); }
.wl-sticky-atc__price-tag ins { text-decoration: none; }
.wl-sticky-atc__button {
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	height: 56px;
	background: transparent;
	color: #fff;
	font-weight: 600;
	text-transform: none;
	border-radius: 0;
}
.wl-sticky-atc__button:hover { background: rgba(255,255,255,0.08); color: #fff; }