/* Product page styles (Views/Product/Detail.cshtml). Was a 46 KB <style> block in the page's
   HTML on every product view; now a cached file, linked from the same place in <head>. */

.page-hero-sm { background:var(--bg-subtle); padding:16px 0; border-bottom:1px solid var(--bg-warm); }
.breadcrumb { display:flex; gap:6px; font-size:0.8rem; color:var(--mid); }
.breadcrumb a { color:var(--gold-dark); }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:48px 0; align-items:start; }

.gallery { position:sticky; top:80px; }
.gallery-main { border-radius:var(--radius-md); overflow:hidden; background:var(--white); position:relative; margin-bottom:12px; max-height:640px; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.gallery-main img { width:100%; height:auto; max-height:640px; object-fit:contain; display:block; }
/* pointer-events:none — Clarity flagged this badge as the site's #1 dead click:
   it sits on top of .gallery-main (which opens the zoom lightbox on click), so a
   tap on "SALE" itself was silently swallowed instead of doing what the visitor
   was actually going for. Letting the click pass through turns that into a working
   zoom instead of nothing happening. */
.gallery-badge { position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:6px; z-index:3; pointer-events:none; }
.gallery-zoom-hint { position:absolute; bottom:12px; right:12px; background:rgba(20,20,20,0.72); color:#fff; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:40px; display:flex; align-items:center; gap:5px; pointer-events:none; opacity:0; transition:opacity 0.2s; z-index:3; }
.gallery-main:hover .gallery-zoom-hint { opacity:1; }
.gallery-zoom-pane { position:absolute; inset:0; background-repeat:no-repeat; opacity:0; pointer-events:none; transition:opacity 0.15s; z-index:2; background-color:var(--white); }
.gallery-zoom-pane.active { opacity:1; }
.gallery-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.gallery-thumb { width:72px; height:72px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color 0.2s; background:var(--white); }
.gallery-thumb.active, .gallery-thumb:hover { border-color:var(--gold); }
.gallery-thumb img { width:100%; height:100%; object-fit:contain; }

.zoom-lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,10,0.9); z-index:var(--z-menu); opacity:0; transition:opacity 0.2s; align-items:center; justify-content:center; }
.zoom-lightbox-overlay.open { display:flex; opacity:1; }
.zoom-lightbox-overlay img { max-width:90vw; max-height:90vh; object-fit:contain; cursor:zoom-out; }
.zoom-lightbox-close { position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:#fff; font-size:1.1rem; cursor:pointer; }
.zoom-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:#fff; font-size:1.3rem; cursor:pointer; }
.zoom-lightbox-nav.prev { left:20px; }
.zoom-lightbox-nav.next { right:20px; }

@media(max-width:900px) {
    .gallery-main { cursor:default; }
    .gallery-zoom-pane, .gallery-zoom-hint { display:none; }
}

@media(max-width:768px) {
    /* 48px of dead space sat between the breadcrumb and the product image. */
    .product-layout { padding-top:18px; padding-bottom:32px; }
    /* Thumbnails wrapped onto a second row leaving a single orphan; a one-line
       scroller is the usual gallery pattern and stays tidy at any image count. */
    .gallery-thumbs {
        flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
        -webkit-overflow-scrolling:touch; padding-bottom:2px;
    }
    .gallery-thumbs::-webkit-scrollbar { display:none; }
    .gallery-thumb { flex:0 0 auto; width:64px; height:64px; }
}

.product-info { display:flex; flex-direction:column; gap:20px; }
.product-category-tag { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); }
.product-title { font-family:var(--font-serif); font-size:clamp(1.25rem,2vw,1.65rem); font-weight:600; color:var(--dark); line-height:1.35; overflow-wrap:anywhere; }
.product-rating { display:flex; align-items:center; gap:10px; }
.product-stars { color:var(--gold); font-size:1rem; letter-spacing:2px; }
.product-review-link { font-size:0.85rem; color:var(--gold-dark); text-decoration:none; border-bottom:1px solid transparent; }
.product-review-link:hover { border-color:var(--gold-dark); }
.product-price { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.product-price-current { font-size:2rem; font-weight:700; color:var(--dark); font-family:var(--font-serif); }
.product-price-original { font-size:1.2rem; color:var(--light); text-decoration:line-through; }
.product-price-unit { font-size:0.9rem; color:var(--mid); }
.product-price-save { font-size:0.82rem; font-weight:700; color:var(--red); background:oklch(95% 0.04 25); padding:3px 10px; border-radius:40px; }
.divider { border:none; border-top:1px solid var(--bg-warm); }
.product-meta { display:flex; flex-direction:column; gap:10px; }
.meta-row { display:flex; gap:8px; font-size:0.88rem; }
.meta-label { font-weight:600; color:var(--dark); min-width:80px; }
.meta-val { color:var(--dark-mid); }
.meta-val.in-stock { color:var(--green); font-weight:600; }
.meta-val.low-stock { color:#b45309; font-weight:700; }
.meta-val.out-stock { color:var(--red); font-weight:600; }
.meta-val.sold-recently { color:var(--gold-dark); font-weight:600; }

.swatch-section h3, .qty-section h3 { font-size:0.82rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--dark); margin-bottom:10px; }
/* Screen-reader/crawler-only heading — the tab buttons already show "Description",
   "Shipping" etc. visually, so a second visible heading per panel would just repeat
   the active tab's own label; this gives each panel's content proper document
   structure (H1 product name -> H2 tab topic -> body) without changing anything
   sighted users see. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.color-swatches-lg { display:flex; flex-wrap:wrap; gap:12px 10px; }
/* border replaced with an outer box-shadow ring — a real border eats into the
   circle's content box (border-box sizing), so the fabric-photo <img> below,
   sized 100%/100% of that shrunk box, never actually reached the circle's true
   edge: every swatch showed a visible ring of plain background colour around the
   photo instead of the photo filling the circle. A box-shadow ring sits outside
   the box entirely, so the image can be full-bleed edge-to-edge while the resting/
   active states still read clearly. */
.swatch-btn { width:38px; height:38px; border-radius:50%; cursor:pointer; border:none; transition:all 0.2s; position:relative; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px var(--bg-warm), var(--shadow-sm); }
.swatch-btn.active { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--dark); }
/* Selected badge moved from dead-centre-on-the-photo (illegible against a busy
   fabric print, and hid the swatch it was supposed to confirm) to a small circular
   badge sitting on the swatch's own edge, the standard pattern for photo swatches
   (Shopify/Amazon use the same placement) — reads clearly against any image. */
.swatch-check { display:none; position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:var(--dark); color:#fff; align-items:center; justify-content:center; font-size:0.55rem; font-weight:900; line-height:1; box-shadow:0 0 0 2px #fff; }
.swatch-btn.active .swatch-check { display:flex; }
.swatch-btn:hover:not(.disabled) { transform:scale(1.1); }
.swatch-btn.disabled { opacity:0.45; cursor:not-allowed; }
.swatch-btn.disabled::before { content:''; position:absolute; top:50%; left:-3px; right:-3px; height:2px; background:var(--red); transform:translateY(-50%) rotate(-45deg); pointer-events:none; }
.swatch-tooltip {
    position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px) scale(0.92);
    display:flex; align-items:center; gap:6px;
    background:var(--dark); color:#fff; font-size:0.72rem; font-weight:600; letter-spacing:0.01em;
    padding:5px 10px 5px 6px; border-radius:6px; white-space:nowrap;
    box-shadow:var(--shadow-md); opacity:0; visibility:hidden; pointer-events:none; z-index:5;
    transition:opacity 0.15s ease, transform 0.15s ease;
}
.swatch-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--dark); }
.swatch-tooltip-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35); }
.swatch-tooltip-oos { color:oklch(78% 0.12 25); font-weight:700; }
.swatch-btn:hover .swatch-tooltip, .swatch-btn.show-tooltip .swatch-tooltip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
/* The heading sits directly above the swatch row with only ~10px of margin —
   not enough clearance for the tooltip that pops up above each swatch on hover,
   which was overlapping "Colour: X" and becoming unreadable. This pushes the
   swatch row down enough that the tooltip fits in the gap instead. */
.color-swatches-lg { margin-top:26px; }
.swatch-code-only { background:var(--bg-warm); display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:700; color:var(--dark-mid); text-decoration:none; }
/* overflow:hidden used to live here to keep a non-square photo clipped to the
   circle — redundant, since the <img> below already clips itself via its own
   border-radius:50% (a replaced element's border-radius clips its own content in
   every modern browser). Redundant, but not harmless: this anchor is also the
   tooltip's positioned parent, and the tooltip sits outside the swatch's own box
   (bottom:calc(100% + 10px) — see .swatch-tooltip), so overflow:hidden here was
   silently clipping it invisible on every hover. That's every fabric-pattern
   swatch on the site (most of them — plain solid-colour swatches use a different,
   non-clipped element and were never affected), which is why hovering a colour
   never showed its name. */
.swatch-img { padding:0; text-decoration:none; }
.swatch-img img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

.size-guide-link { align-self:flex-start; background:none; border:0; padding:0; font-size:0.85rem; font-weight:600; color:var(--dark); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.sg-modal { position:fixed; inset:0; z-index:1200; background:rgba(20,18,14,.5); display:none; align-items:center; justify-content:center; padding:20px; }
.sg-modal.open { display:flex; }
.sg-box { position:relative; background:#fff; border-radius:10px; width:min(820px,100%); max-height:90vh; overflow:auto; padding:32px; }
.sg-box h3 { font-family:var(--font-serif); font-size:1.4rem; margin-bottom:6px; }
.sg-close { position:absolute; top:10px; right:14px; background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:#999; }
.sg-scroll { overflow-x:auto; margin:16px 0 10px; }
.sg-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.sg-table th, .sg-table td { padding:9px 12px; border-bottom:1px solid var(--bg-warm); text-align:center; }
.sg-table th { background:var(--bg-subtle); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.sg-note { font-size:.8rem; opacity:.7; }

.size-pills { display:flex; flex-wrap:wrap; gap:8px; }
.size-pill { padding:9px 18px; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; cursor:pointer; background:var(--white); color:var(--dark-mid); transition:all 0.15s; }
.size-pill:hover:not(.disabled):not(.active) { border-color:var(--dark-mid); }
.size-pill.active { border-color:var(--dark); color:#fff; background:var(--dark); box-shadow:var(--shadow-sm); }
.size-pill.disabled { opacity:0.35; cursor:not-allowed; text-decoration:line-through; }

.variant-panel { border:1.5px solid var(--bg-warm); border-radius:var(--radius-md); padding:18px 20px; margin-bottom:20px; display:flex; flex-direction:column; gap:16px; background:var(--white); }
.variant-panel > .swatch-section:not(:last-child), .variant-panel > .qty-section:not(:last-child), .variant-panel > .variant-compact-row:not(:last-child), .variant-panel > .product-meta:not(:last-child) { padding-bottom:16px; border-bottom:1px solid var(--bg-warm); }
.variant-compact-row { display:flex; align-items:center; gap:8px; font-size:0.88rem; }
.variant-compact-row .meta-label { font-weight:600; color:var(--dark); }
.variant-compact-dot { width:16px; height:16px; border-radius:50%; border:1px solid var(--bg-warm); flex-shrink:0; }

.qty-wrap { display:flex; align-items:center; gap:0; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm); overflow:hidden; width:fit-content; }
.qty-btn { width:44px; height:44px; background:var(--bg-subtle); border:none; font-size:1.1rem; cursor:pointer; color:var(--dark-mid); }
.qty-btn:hover { background:var(--bg-warm); color:var(--dark); }
.qty-input { width:64px; text-align:center; border:none; border-left:1px solid var(--bg-warm); border-right:1px solid var(--bg-warm); font-size:0.95rem; font-weight:600; height:44px; font-family:var(--font-sans); outline:none; background:var(--white); }
.qty-note { font-size:0.78rem; color:var(--mid); }

.product-ctas { display:flex; flex-direction:column; gap:10px; }
.cta-row { display:flex; gap:10px; }
.wishlist-btn { padding:13px 16px; font-size:1.1rem; line-height:1; }
.wishlist-btn.active { color:var(--red); border-color:var(--red); }
.trust-pills { display:flex; flex-wrap:wrap; gap:8px; }
.trust-pill { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--dark-mid); background:var(--bg-subtle); padding:6px 12px; border-radius:40px; }

/* ── Sticky "Add to Basket" bar — mobile only, sits above the fixed tab bar.
   Hidden until the in-page "Add to Cart" button scrolls out of view (JS below),
   so the two buttons are never on screen — and duplicated — at the same time;
   the qty/CTA section alone often fills a phone screen, so without this the
   sticky bar showed immediately, right on top of the in-page one. ── */
.sticky-atc-bar { display:none; }
@media(max-width:768px) {
    /* bottom:0, not 60px. That offset existed to clear the mobile tab bar, and
       when the tab bar was removed it stranded this bar 60px up the screen with a
       strip of page visible underneath — which is what made it read as floating
       junk rather than a bar. Padding carries the iPhone home-indicator inset so
       the button never sits under it. */
    .sticky-atc-bar {
        display:flex; align-items:center; gap:14px;
        position:fixed; left:0; right:0; bottom:0; z-index:999;
        background:var(--white); border-top:1px solid var(--bg-warm);
        padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow:0 -6px 22px rgba(0,0,0,0.10);
        transform:translateY(100%); transition:transform 0.25s ease;
        pointer-events:none;
    }
    .sticky-atc-bar.visible { transform:translateY(0); pointer-events:auto; }
    .sticky-atc-bar .sab-price { display:flex; flex-direction:column; flex-shrink:0; min-width:0; }
    .sticky-atc-bar .sab-price-now { font-size:1.05rem; font-weight:700; color:var(--dark); font-family:var(--font-serif); line-height:1.1; }
    .sticky-atc-bar .sab-price-unit { font-size:0.68rem; color:var(--mid); }
    .sticky-atc-bar .btn { flex:1; justify-content:center; padding:13px 16px; }
    /* Room for the bar alone now — the 130px here was 60px of tab bar plus 70px of
       this, and the tab bar is gone. */
    body.has-sticky-atc { padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}

.product-tabs { margin-top:16px; }
.tab-nav { display:flex; border-bottom:2px solid var(--bg-warm); gap:0; flex-wrap:wrap; }
.tab-btn { padding:12px 20px; font-size:0.88rem; font-weight:600; color:var(--mid); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:var(--font-sans); }
.tab-btn.active { color:var(--dark); border-bottom-color:var(--gold-dark); }
.tab-content { padding:24px 0; font-size:0.9rem; color:var(--dark-mid); line-height:1.8; display:none; }
.tab-content.active { display:block; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table tr:nth-child(even) td { background:var(--bg-subtle); }
.spec-table td { padding:10px 14px; font-size:0.88rem; border-bottom:1px solid var(--bg-warm); }
.spec-table td:first-child { font-weight:600; color:var(--dark); width:35%; }

.delivery-info-card { background:var(--bg-subtle); border:1px solid var(--bg-warm); border-radius:var(--radius-md); padding:20px 24px; }
.delivery-info-card__heading { font-weight:700; font-size:0.95rem; color:var(--dark); margin-bottom:12px; }
.delivery-info-card__body { font-size:0.88rem; color:var(--dark-mid); line-height:1.7; }
.delivery-info-card__body a { color:var(--gold-dark); font-weight:600; }

.review-summary { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding:18px 22px; background:var(--bg-subtle); border-radius:var(--radius-md); }
.review-summary__score { font-size:2.4rem; font-family:var(--font-serif); font-weight:700; color:var(--dark); line-height:1; }
.review-mini { padding:16px 0; border-bottom:1px solid var(--bg-warm); }
.review-mini-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.review-mini-stars { color:var(--gold); font-size:0.85rem; letter-spacing:1px; }
.review-mini-name { font-weight:600; font-size:0.85rem; color:var(--dark); }
.review-mini-date { font-size:0.75rem; color:var(--light); margin-left:auto; }
.review-mini-text { font-size:0.85rem; color:var(--dark-mid); line-height:1.6; }

.write-review { margin-top:28px; padding-top:24px; border-top:1px solid var(--bg-warm); }
.write-review h3 { font-size:0.95rem; font-weight:700; margin-bottom:14px; }
.write-review form { display:flex; flex-direction:column; gap:12px; max-width:480px; }
.write-review__stars { display:flex; gap:4px; font-size:1.6rem; color:var(--gold); cursor:pointer; line-height:1; }
.write-review__star { transition:transform 0.1s; }
.write-review__star:hover { transform:scale(1.15); }
.write-review__fields { display:flex; gap:12px; flex-wrap:wrap; }
.write-review__fields input { flex:1; min-width:180px; padding:10px 12px; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:0.88rem; }
.write-review textarea { padding:10px 12px; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:0.88rem; resize:vertical; }
.write-review .btn { align-self:flex-start; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.review-alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:600; margin-bottom:20px; }
.review-alert--success { background:oklch(95% 0.05 150); color:var(--green); }
.review-alert--error { background:oklch(95% 0.04 25); color:var(--red); }

.related-section { padding:56px 0; background:var(--bg-subtle); }

.product-layout { position:relative; }
.product-loading-overlay { position:absolute; inset:0; background:rgba(255,255,255,0.7); display:none; align-items:center; justify-content:center; z-index:50; border-radius:var(--radius-md); }
.product-loading-overlay.active { display:flex; }
.product-spinner { width:38px; height:38px; border:3px solid var(--bg-warm); border-top-color:var(--gold-dark); border-radius:50%; animation:product-spin 0.8s linear infinite; }
@keyframes product-spin { to { transform:rotate(360deg); } }

@media(max-width:900px) {
    .product-layout { grid-template-columns:1fr; gap:32px; }
    .gallery { position:static; }
    /* Grid items default to min-width:auto, which sizes the track to the
       gallery image's intrinsic width instead of shrinking to fit — the same
       overflow bug fixed earlier for .newsletter-inner. This pushed the whole
       page 350px+ wider than the viewport on mobile. */
    .product-layout > * { min-width:0; }
}

/* ── Umino product page (reference: puraali.com\theme\Product-*.html) ── */
.page-hero-sm { background:none; border:0; padding:28px 0 0; }
.page-hero-sm .breadcrumb { font-size:0.95rem; color:var(--mid); gap:8px; }
.page-hero-sm .breadcrumb a { color:var(--dark); }
.page-hero-sm .breadcrumb span { opacity:1; }
.product-layout { gap:60px; padding:30px 0 70px; grid-template-columns:1.15fr 1fr; }
/* Vertical thumbnail rail on the left of the main image, like Umino. */
.gallery { display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; align-items:start; }
.gallery-thumbs { order:-1; flex-direction:column; flex-wrap:nowrap; gap:12px; max-height:800px; overflow-y:auto; scrollbar-width:none; }
/* Single-image products: no thumbnail rail, main image takes the full width. */
.gallery:has(.gallery-thumbs[style*="display:none"]) { grid-template-columns:minmax(0,1fr); }
.gallery-thumb { width:84px; height:auto; aspect-ratio:3/4; border-radius:8px; border:1px solid transparent; background:var(--bg-subtle); }
.gallery-thumb img { object-fit:cover; }
.gallery-thumb.active, .gallery-thumb:hover { border-color:var(--dark); }
/* Show the whole photo at the column's width (no letterboxed side bars): the frame follows the
   image's own shape instead of capping it to a fixed height. Phones keep their 3:4 crop below. */
.gallery-main { border-radius:10px; background:var(--bg-subtle); margin-bottom:0; max-height:none; display:block; }
.gallery-main img { width:100%; height:auto; max-height:none; object-fit:contain; }
/* Thumbnails keep their 3:4 shape: as flex items in the capped rail they were being squashed
   flat (84x44) once a product had more than a handful of photos. The rail scrolls (thin visible
   bar) and its height follows the main photo (set by syncGalleryRail below). */
.gallery-thumb { flex:0 0 auto; }
.gallery-thumbs { scrollbar-width:none; overflow-x:hidden; }
.gallery-thumbs::-webkit-scrollbar { display:none; }
/* No scrollbar on the rail: a soft fade at the bottom shows there are more photos, and it
   disappears once you reach the end (class toggled by syncGalleryRail). */
@media(min-width:992px) { .gallery-thumbs.has-more { -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 70px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 70px),transparent); } }

/* Desktop gallery: big photo with all thumbnails in a tidy grid underneath it (like Maria B) -
   nothing scrolls, every photo is visible at once, and a long set simply wraps onto a second row. */
@media(min-width:992px) {
    .gallery, .gallery:has(.gallery-thumbs[style*="display:none"]) { grid-template-columns:minmax(0,1fr); gap:14px; }
    .gallery-thumbs { order:0; display:grid !important; grid-template-columns:repeat(auto-fill, minmax(68px, 1fr)); gap:10px; max-height:none !important; overflow:visible; -webkit-mask-image:none !important; mask-image:none !important; }
    .gallery-thumbs[style*="display:none"] { display:none !important; }
    .gallery-thumb { width:auto; height:auto; aspect-ratio:3/4; }
    .gallery-thumb.active { border-color:var(--dark); }
}
.gallery-zoom-hint { background:#fff; color:var(--dark); border-radius:30px; font-weight:500; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.product-info { gap:22px; }
.product-category-tag { font-size:0.8rem; font-weight:500; letter-spacing:0.08em; color:var(--mid); }
.product-title { font-family:var(--font-sans); font-size:1.875rem; font-weight:400; line-height:1.4; }
.product-price-current { font-family:var(--font-sans); font-size:1.5rem; font-weight:500; }
.product-price-original { font-size:1.1rem; color:#999; }
.product-price-save { background:var(--accent); color:#fff; font-weight:500; border-radius:30px; }
.meta-row { font-size:0.95rem; }
.meta-label { font-weight:500; }
.meta-val.in-stock { color:var(--dark); font-weight:500; }
.meta-val.sold-recently { color:var(--accent); font-weight:500; }
.swatch-section h3, .qty-section h3 { font-size:0.95rem; font-weight:500; letter-spacing:0; text-transform:none; margin-bottom:12px; }
.swatch-btn { width:34px; height:34px; }
.swatch-btn.active { box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--dark); }
.size-pill { min-width:48px; height:42px; padding:0 16px; border:1px solid var(--bg-warm); border-radius:30px; font-weight:400; font-size:0.9rem; color:var(--dark); display:inline-flex; align-items:center; justify-content:center; }
.size-pill:hover:not(.disabled):not(.active) { border-color:var(--dark); }
.size-pill.active { box-shadow:none; }
.qty-wrap { border:1px solid var(--bg-warm); border-radius:30px; height:50px; }
.qty-btn { width:44px; height:48px; background:none; font-size:1.1rem; }
.qty-btn:hover { background:none; color:var(--accent); }
.qty-input { width:50px; height:48px; border:0; font-weight:500; background:none; }
.product-ctas .btn { height:50px; border-radius:30px; font-size:0.9rem; font-weight:500; letter-spacing:0.02em; }
#addToCartBtn { background:var(--dark); border-color:var(--dark); }
#addToCartBtn:hover:not([disabled]) { background:var(--accent); border-color:var(--accent); }
.wishlist-btn { width:50px; min-width:50px; padding:0; border-radius:50% !important; border:1px solid var(--bg-warm) !important; justify-content:center; }
.wishlist-btn:hover, .wishlist-btn.active { border-color:var(--dark) !important; background:#fff !important; color:var(--accent) !important; }
.trust-pill { background:none; border:1px solid var(--bg-warm); border-radius:30px; padding:7px 14px; font-size:0.85rem; }
.product-tabs { margin-top:10px; }
.tab-nav { justify-content:center; border-bottom:1px solid var(--bg-warm); gap:28px; }
.tab-btn { font-size:1.1rem; font-weight:500; color:#999; padding:14px 0; border-bottom-width:1px; }
.tab-btn.active { color:var(--dark); border-bottom-color:var(--dark); }
.tab-content { font-size:0.95rem; padding:34px 0; }
.related-section { background:#fff; padding:70px 0 20px; }
.related-section .section-header { flex-direction:column; align-items:center; text-align:center; margin-bottom:36px; }
.related-section .section-title { font-family:var(--font-sans); font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; }
.related-section .products-grid { gap:36px 24px; }
@media(max-width:900px) {
    .product-layout { grid-template-columns:1fr; gap:28px; }
    .gallery { grid-template-columns:minmax(0,1fr); }
    .gallery-thumbs { order:0; flex-direction:row; max-height:none; overflow-x:auto; }
    .gallery-thumb { width:64px; flex:0 0 auto; }
    .product-title { font-size:1.5rem; }
}

/* ── Umino product details (puraali.com\theme\Product-colorful-long-sleeve-dress.html) ── */
.product-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; }
.product-info { gap:0; position:sticky; top:110px; }
.product-info > * + * { margin-top:18px; }
.pdp-label { display:inline-block; background:var(--accent); color:#fff; font-size:0.8125rem; font-weight:500; line-height:1; padding:6px 12px; border-radius:30px; margin-bottom:12px; }
.product-title { font-size:1.875rem; font-weight:400; line-height:1.4; margin:0; }
.product-rating { gap:16px; font-size:0.875rem; flex-wrap:wrap; }
.product-stars { color:var(--dark); letter-spacing:2px; }
.product-review-link { color:var(--mid); }
.pdp-sold { display:inline-flex; align-items:center; gap:6px; color:var(--accent); }
.pdp-sold svg { width:16px; height:16px; }
.product-price { gap:10px; }
.product-price-current { order:-1; font-size:1.5rem; font-weight:500; color:var(--dark); }
#productPrice:has(#priceOriginal:not([style*="display:none"])) .product-price-current { color:var(--accent); }
.product-price-original { font-size:1.125rem; color:#999; }
.product-price-save { display:none !important; }  /* the -X% label above the title carries this */
.pdp-shortdesc { color:var(--mid); line-height:1.75; margin:0; }
.variant-panel { display:flex; flex-direction:column; gap:22px; margin-top:24px; }
.swatch-section h3 { font-size:1rem; font-weight:400; color:var(--mid); }
.swatch-section h3 #selectedColorName { color:var(--dark); font-weight:500 !important; }
.cta-row { display:flex; align-items:center; gap:12px; }
.cta-row .qty-wrap { flex-shrink:0; width:140px; justify-content:space-between; }
.cta-row .qty-input { flex:1; width:auto; }
#addToCartBtn { flex:1; height:50px; }
.wishlist-btn { width:50px; height:50px; font-size:1.2rem; line-height:1; }
.pdp-qtynote { margin-top:-10px; }
.pdp-qtynote .qty-note { font-size:0.8125rem; }
.pdp-delivery { list-style:none; margin-top:28px !important; padding:0; display:grid; gap:12px; }
.pdp-delivery li { display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; color:var(--mid); }
.pdp-delivery svg { width:20px; height:20px; flex-shrink:0; color:var(--dark); margin-top:3px; }
.pdp-delivery a { color:var(--dark); text-decoration:underline; text-underline-offset:3px; }
.pdp-delivery strong { color:var(--dark); font-weight:500; }
.pdp-meta { border-top:1px solid var(--bg-warm); padding-top:22px; margin-top:26px !important; display:grid; gap:6px; }
.pdp-meta .meta-row { font-size:0.95rem; }
.pdp-meta .meta-label { min-width:0; font-weight:400; color:var(--mid); }
.pdp-meta .meta-val { color:var(--dark); }
.pdp-meta .meta-val a:hover { color:var(--accent); }
.pdp-meta .meta-val.low-stock, .pdp-meta .meta-val.in-stock { font-weight:400; }
.pdp-safe { margin-top:28px !important; border:1px solid var(--bg-warm); border-radius:10px; padding:22px; text-align:center; }
.pdp-safe p { font-size:1rem; font-weight:500; color:var(--dark); margin-bottom:14px; }
.pdp-safe .footer-payment { justify-content:center; flex-wrap:wrap; }
/* description / reviews: full-width band under the product, Umino-style */
.pdp-tabs-wrap { padding-bottom:40px; }
.pdp-tabs-wrap .product-tabs { margin:0; border-top:1px solid var(--bg-warm); padding-top:10px; }
.pdp-tabs-wrap .tab-nav { justify-content:center; gap:40px; border-bottom:0; }
.pdp-tabs-wrap .tab-btn { font-size:1.25rem; font-weight:500; color:#999; border-bottom:0; }
.pdp-tabs-wrap .tab-btn.active { color:var(--dark); }
.pdp-tabs-wrap .tab-content { max-width:900px; margin:0 auto; font-size:1rem; line-height:1.75; color:var(--mid); }
@media(max-width:900px) {
    .product-info { position:static; }
    .cta-row .qty-wrap { width:120px; }
    .pdp-tabs-wrap .tab-nav { gap:20px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
    .pdp-tabs-wrap .tab-btn { font-size:1.05rem; white-space:nowrap; }
}

/* ── Umino product nav (prev / back / next with hover preview) ── */
.page-hero-sm .container { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pdp-nav { display:flex; align-items:center; gap:6px; }
.pdp-nav__item { position:relative; }
.pdp-nav__btn { width:32px; height:32px; display:grid; place-items:center; color:var(--dark); }
.pdp-nav__btn svg { width:18px; height:18px; }
.pdp-nav__btn:hover { color:var(--accent); }
.pdp-nav__card, .pdp-nav__tip { position:absolute; top:calc(100% + 10px); right:-10px; z-index:20; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s, transform .2s, visibility .2s; pointer-events:none; }
.pdp-nav__item:hover .pdp-nav__card, .pdp-nav__item:hover .pdp-nav__tip { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.pdp-nav__card { display:flex; gap:14px; align-items:center; width:280px; padding:12px; background:#fff; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.1); }
.pdp-nav__card img { width:60px; height:70px; object-fit:cover; border-radius:6px; background:var(--bg-subtle); }
.pdp-nav__card > span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pdp-nav__name { color:var(--dark); font-size:1rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pdp-nav__card b { color:var(--dark); font-weight:500; }
.pdp-nav__tip { right:50%; transform:translate(50%, 6px); background:var(--dark); color:#fff; font-size:.875rem; white-space:nowrap; padding:6px 12px; border-radius:4px; }
.pdp-nav__item:hover .pdp-nav__tip { transform:translate(50%, 0); }
.pdp-nav__tip::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--dark); }

/* ── Compare Colour / Ask a Question / Share row ── */
.pdp-links { display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:4px; }
.pdp-link { display:inline-flex; align-items:center; gap:8px; font-size:1rem; color:var(--dark); padding:0; }
.pdp-link svg { width:20px; height:20px; }
.pdp-link:hover { color:var(--accent); }
.pdp-link__wheel { width:18px; height:18px; border-radius:50%; background:conic-gradient(#f5a623,#e94e77,#7b4dd8,#3aa0e8,#43c59e,#f5d423,#f5a623); -webkit-mask:radial-gradient(circle,transparent 4.5px,#000 5px); mask:radial-gradient(circle,transparent 4.5px,#000 5px); }

/* ── Guarantee safe checkout (fieldset legend, card logos) ── */
fieldset.pdp-safe { border:1px solid var(--bg-warm); border-radius:10px; padding:10px 20px 22px; margin:30px 0 0; text-align:center; }
.pdp-safe legend { padding:0 14px; margin:0 auto; font-size:1.125rem; font-weight:500; color:var(--dark); }
.pdp-safe__badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.pay-badge { display:inline-flex; border:1px solid var(--bg-warm); border-radius:4px; padding:3px; background:#fff; }
.pay-badge svg { width:44px; height:28px; display:block; }

/* ── Popups ── */
.pdp-modal { position:fixed; inset:0; z-index:var(--z-modal); background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .25s; }
.pdp-modal.open { opacity:1; }
.pdp-modal[hidden] { display:none; }
.pdp-modal__box { position:relative; background:#fff; border-radius:10px; width:min(520px,100%); max-height:90vh; overflow:auto; padding:36px 34px 32px; transform:translateY(12px); transition:transform .25s; }
.pdp-modal.open .pdp-modal__box { transform:none; }
.pdp-modal__box--wide { width:min(920px,100%); }
.pdp-modal__box h3 { font-size:1.5rem; font-weight:500; margin-bottom:6px; }
.pdp-modal__sub { color:var(--mid); margin-bottom:22px; }
.pdp-modal__close { position:absolute; top:14px; right:14px; width:36px; height:36px; display:grid; place-items:center; color:#999; }
.pdp-modal__close:hover { color:var(--dark); }
.pdp-modal__close svg { width:22px; height:22px; }
.cmp-swatches { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.cmp-swatch { width:40px; height:40px; border-radius:50%; overflow:hidden; padding:0; box-shadow:0 0 0 1px var(--bg-warm); }
.cmp-swatch img { width:100%; height:100%; object-fit:cover; }
.cmp-swatch.active { box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--dark); }
.cmp-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:18px; }
.cmp-card { display:none; text-align:center; }
.cmp-card.show { display:block; }
.cmp-card__img { aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--bg-subtle); }
.cmp-card__img img { width:100%; height:100%; object-fit:cover; }
.cmp-card__name { margin-top:10px; color:var(--dark); }
.cmp-card__go { font-size:.875rem; color:var(--mid); text-decoration:underline; text-underline-offset:3px; }
.pdp-ask { display:grid; gap:14px; }
.pdp-ask textarea { width:100%; padding:13px 14px; font-family:var(--font-sans); font-size:.95rem; resize:vertical; }
.pdp-ask__status { margin:0; font-size:.95rem; min-height:1em; }
.pdp-ask__status.ok { color:var(--green); } .pdp-ask__status.err { color:var(--accent); }
.pdp-share__copy { display:flex; gap:10px; margin:10px 0 22px; }
.pdp-share__copy input { flex:1; min-width:0; height:50px; padding:0 16px; border:1px solid #d9d9d9; border-radius:30px; font-family:var(--font-sans); color:var(--mid); }
.pdp-share__copy .btn { padding:0 26px; }
.pdp-share__nets { display:flex; gap:12px; }
.pdp-share__nets a { width:44px; height:44px; border:1px solid var(--dark); border-radius:50%; display:grid; place-items:center; color:var(--dark); transition:.2s; }
.pdp-share__nets a:hover { background:var(--dark); color:#fff; }
.pdp-share__nets svg { width:18px; height:18px; }
@media(max-width:768px) { .pdp-nav__card { display:none; } .pdp-modal__box { padding:30px 20px 24px; } }

/* ── Umino tablet + phone product page. Kept last on purpose: the desktop Umino rules
   above re-declare the two-column grid and must not win below 992px. ── */
.gal-arrow, .gal-zoom { display:none; }
.gallery-strip-wrap { display:none; }
@media(max-width:991px) {
    .gallery-strip-wrap { display:block; margin:0 -16px; }
    .gallery .gallery-main, .gallery .gallery-thumbs { display:none !important; }
    .gallery { overflow-x:clip; }
    .gallery-strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 16px; scroll-padding:0 16px; -webkit-overflow-scrolling:touch; }
    .gallery-strip::-webkit-scrollbar { display:none; }
    /* Tablets: two photos across; phones: one photo with the next one peeking in. */
    .gallery-strip__slide { flex:0 0 46%; scroll-snap-align:start; border-radius:10px; overflow:hidden; background:var(--bg-subtle); }
    .gallery-strip:has(.gallery-strip__slide:only-child) .gallery-strip__slide { flex-basis:60%; margin:0 auto; }
    @media(max-width:767px) { .gallery-strip__slide { flex-basis:86%; } .gallery-strip:has(.gallery-strip__slide:only-child) .gallery-strip__slide { flex-basis:100%; } }
    .gallery-strip__slide img { display:block; width:100%; height:auto; }
    .gallery-strip-wrap { position:relative; }
    .gallery-strip-badge { position:absolute; top:12px; left:28px; z-index:2; pointer-events:none; }
    .gallery-dots { display:flex; justify-content:center; gap:8px; padding:14px 0 2px; }
    .gallery-dots:empty { display:none; }
    .gallery-dots span { width:7px; height:7px; border-radius:50%; background:#cfcfcf; transition:background .2s; }
    .gallery-dots span.on { background:var(--dark); }
}
@media(max-width:991px) {
    .product-layout { grid-template-columns:minmax(0,1fr); gap:28px; padding:16px 0 40px; }
    .product-info { position:static; top:auto; }
    .gallery { position:static; grid-template-columns:minmax(0,1fr); gap:12px; }
    .gallery-main { max-height:none; aspect-ratio:2/3; cursor:default; }
    .gallery-main img { max-height:none; height:100%; object-fit:contain; }
    .gallery-thumbs { order:0; display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; max-height:none; overflow:visible; }
    .gallery-thumbs[style*="display:none"] { display:none !important; }
    .gallery-thumb { width:auto; height:auto; aspect-ratio:3/4; }
    .gallery-zoom-hint, .gallery-zoom-pane { display:none !important; }
    .gal-arrow { display:grid; position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--dark); place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.1); }
    .gal-arrow[style*="display:none"] { display:none !important; }
    .gal-arrow svg { width:18px; height:18px; }
    .gal-arrow--prev { left:14px; } .gal-arrow--next { right:14px; }
    .gal-zoom { display:grid; position:absolute; top:14px; right:14px; z-index:3; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--dark); place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.1); }
    .gal-zoom svg { width:18px; height:18px; }
    .variant-panel { border:0; border-radius:0; padding:0; background:none; margin-bottom:0; }
    .variant-panel > * { border:0 !important; padding-bottom:0 !important; }
    .size-pills { flex-direction:row; flex-wrap:wrap; }
    .pdp-links { gap:12px 24px; }
    /* Umino phone order: quantity full width on its own line, then [Add to cart][♥]. */
    .cta-row { flex-wrap:wrap; }
    .cta-row .qty-wrap { width:100%; flex:0 0 100%; }
    .cta-row .qty-btn { width:56px; }
    #addToCartBtn { flex:1 1 0; min-width:0; }
    .page-hero-sm { padding-top:18px; }
    .page-hero-sm .breadcrumb { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; }
    .pdp-tabs-wrap .tab-content { padding:24px 0; }
}
@media(max-width:767px) {
    .product-title { font-size:1.5rem; line-height:1.35; }
    .product-price-current { font-size:1.375rem; }
    .gallery-thumbs { gap:8px; }
    .pdp-safe__badges { gap:6px; }
    .related-section .products-grid, .related-section .ph-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 12px; }
    /* sits above Umino's bottom tab bar, when that bar is in the page (see _Layout.cshtml) */
    body:has(.mobile-tabbar) .sticky-atc-bar { bottom:calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom:10px; }
}

/* ── Spacing: links row → quantity/add-to-cart row (Umino leaves a clear gap) ── */
.pdp-links { margin-bottom:26px; }
/* ── Umino product tabs: centred pills, black active pill, generous spacing ── */
.pdp-tabs-wrap { padding-top:60px; padding-bottom:70px; }
.pdp-tabs-wrap .product-tabs { border-top:0; padding-top:0; }
.pdp-tabs-wrap .tab-nav { justify-content:center; gap:10px; border-bottom:0; margin-bottom:40px; flex-wrap:wrap; }
.pdp-tabs-wrap .tab-btn { font-size:1rem; font-weight:400; color:var(--dark); background:var(--bg-subtle); border:0; border-radius:30px; padding:10px 28px; margin:0; transition:background .2s, color .2s; }
.pdp-tabs-wrap .tab-btn:hover { background:#e9e9e9; }
.pdp-tabs-wrap .tab-btn.active { background:var(--dark); color:#fff; }
.pdp-tabs-wrap .tab-content { padding:0; max-width:1000px; }
.pdp-tabs-wrap .tab-content h3, .pdp-tabs-wrap .tab-content h4 { font-size:1.125rem; font-weight:500; color:var(--dark); margin:0 0 14px; }
@media(max-width:767px) {
    .pdp-tabs-wrap { padding-top:40px; padding-bottom:40px; }
    .pdp-tabs-wrap .tab-nav { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; gap:8px; margin-bottom:26px; scrollbar-width:none; }
    .pdp-tabs-wrap .tab-btn { padding:9px 20px; white-space:nowrap; flex-shrink:0; }
}

/* FAQs tab: each question sits with its own answer, clear of the one before. */
#tab-faqs h3 { margin:28px 0 8px; }
#tab-faqs h3:first-of-type { margin-top:0; }
#tab-faqs p { margin:0; }
#tab-faqs p:last-child { margin-top:24px; }
#tab-faqs a { text-decoration:underline; text-underline-offset:3px; }

/* Phone/tablet swipe strip: each slide holds the photo's shape before the photo arrives, so the
   product details below do not jump when it loads. --gal-ar is the first photo's width / height,
   set on the strip by the page; 3 / 4 when the size is not known. */
@media(max-width:991px) {
    .gallery-strip__slide { aspect-ratio: var(--gal-ar, 3 / 4); }
    .gallery-strip__slide img { height:100%; object-fit:cover; }
}