/* ================================================================
   Divya Stones — PREMIUM polish + fixes
   Loaded LAST (after style.css + mobile-fixes.css). Override layer.
   Goals: premium look, crisp media, fixed family videos,
   balanced contact page, refined mobile. No base files rewritten.
   ================================================================ */

/* ---------------- 1. Refined design tokens ---------------- */
:root{
  --gold:        #b08d57;   /* warm bronze accent, used sparingly */
  --gold-soft:   #c9a877;
  --ink:         #0c0c0d;
  --line:        #e6e4df;
  --bg:          #f7f6f3;   /* warmer ivory */
  --bg-2:        #efece6;
  --surface:     #ffffff;

  --shadow-sm:   0 1px 2px rgba(22,18,12,.05), 0 4px 14px rgba(22,18,12,.06);
  --shadow-md:   0 12px 38px rgba(22,18,12,.12);
  --shadow-lg:   0 36px 90px rgba(12,10,6,.24);

  --radius:      4px;
  --radius-lg:   12px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* Crisper rendering everywhere; kill sub-pixel softness on transforms */
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--bg); letter-spacing:.002em; }
img, video{
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Media that animates/scales must stay sharp on retina */
.coll-card__video,
.coll-card::before,
.hero__slide-img,
.gallery__img,
.prod__img,
.m-hero__pop-img{
  transform:translateZ(0);
  will-change:transform;
}

/* ---------------- 2. Premium typography ---------------- */
.display{ letter-spacing:-.025em; text-wrap:balance; }
.display em{ color:var(--gold); font-style:italic; }
.display--light em{ color:var(--gold-soft); }
.eyebrow{ color:var(--gold); font-weight:600; }
.eyebrow::before{ width:34px; background:var(--gold); opacity:.9; }
.eyebrow--light{ color:var(--gold-soft); }
.lede{ line-height:1.72; }

/* Selection + focus */
::selection{ background:var(--gold); color:#fff; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:3px;
}

/* Refined custom scrollbar (desktop) */
@media (hover:hover){
  *{ scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:999px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-track{ background:transparent; }
}

/* ---------------- 3. Premium buttons ---------------- */
.btn{ transition:transform .3s var(--ease), background .3s var(--ease),
       color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn--primary{ background:var(--ink); box-shadow:0 6px 20px rgba(12,10,6,.16); }
.btn--primary:hover{
  background:var(--gold); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(176,141,87,.4);
}
.btn--ghost:hover{ background:var(--ink); color:#fafafa; transform:translateY(-2px); }
.link-arrow:hover{ color:var(--gold); }

/* ---------------- 4. Premium cards / sections ---------------- */
.coll-card, .prod, .gallery__item, .industry, .t-card, .blog-card, .cat-card{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.coll-card{ box-shadow:var(--shadow-sm); }
.coll-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prod:hover, .blog-card:hover, .cat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.industry{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.industry:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }

/* Hairline gold top-accent on the dark CTA band */
.cta-band{ position:relative; }
.cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.55;
}

/* Smoother reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ================================================================
   5. FIX — "Five families, one obsession" videos visible + crisp
   Force the video layer above the poster ::before, fade in cleanly.
   ================================================================ */
#collections .coll-card{ background:#1b1b1d; }
#collections .coll-card::before{ z-index:0; }        /* poster image, ALWAYS visible base */
#collections .coll-card__video{
  z-index:1 !important;
  opacity:1;
  object-fit:cover;
  background:transparent;   /* never paint over the poster if the video can't render */
}
#collections .coll-card::after{ z-index:2; }   /* gradient over media */
#collections .coll-card__num,
#collections .coll-card__body{ z-index:3; }
/* Reduced-motion users still see the poster image */
@media (prefers-reduced-motion:reduce){
  #collections .coll-card__video{ display:none; }
}

/* ================================================================
   6. FIX — Contact page: kill the dead/left-out space, balance cols
   ================================================================ */
#contact.cta{ padding-top:clamp(56px,6vw,90px); padding-bottom:clamp(56px,6vw,90px); }
.cta__grid{
  grid-template-columns:1.05fr 1fr;
  gap:clamp(36px,4.5vw,72px);
  align-items:stretch;            /* columns share height — no orphan gap */
}
.cta__copy{ display:flex; flex-direction:column; }
/* Push contact details to fill the column height instead of floating up */
.contact-list{ margin-top:auto; padding-top:28px; }
.contact-list li{ padding-bottom:18px; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:0; }
.contact-list__lbl{ color:var(--gold); }
.cta__form{
  box-shadow:var(--shadow-md);
  border-color:var(--line);
  align-self:stretch;
}
/* Map cards: give the section room, equal-height cards */
.section--cream .industries__grid{ gap:24px; align-items:stretch; }
.section--cream .industry{
  background:var(--surface); padding:28px; border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

/* ---------------- 7. Footer: shipping badge + polish ---------------- */
.footer__ship{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:18px !important;
}
.footer__ship .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(176,141,87,.18);
}
.footer__col a{ transition:color .25s var(--ease); }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ================================================================
   8. MOBILE — comprehensive responsive pass
   ================================================================ */

/* Global overflow guard */
html, body{ max-width:100%; overflow-x:hidden; }

@media (max-width:1100px){
  :root{ --pad-x:20px; }
  .nav__list{ gap:2px; }
}

/* ---- Tablet / small laptop ---- */
@media (max-width:1100px){
  /* Mobile drawer: full-height, scrollable, premium spacing */
  .site-header .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(86vw,380px);
    background:var(--bg);
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    padding:96px 0 40px;
    overflow-y:auto;
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    display:block;
  }
  .site-header .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; padding:0 14px; }
  .site-header .nav.is-open .nav__link{
    font-size:17px; padding:14px 16px; justify-content:space-between;
  }
  .nav__sub{
    position:static; opacity:1; pointer-events:auto; transform:none;
    box-shadow:none; border:none; background:transparent; min-width:0;
  }
  /* Hide quote button overflow on small header, keep hamburger */
  .header__cta .btn--ghost{ display:none; }
  .hamburger{ display:block; }
  .header__inner{ gap:16px; }
}

/* ---- Phones ---- */
@media (max-width:760px){
  :root{ --header-h:68px; --pad-x:18px; }

  .section{ padding-top:clamp(48px,9vw,72px); padding-bottom:clamp(48px,9vw,72px); }
  .section-head{ margin-bottom:34px; }
  .display{ font-size:clamp(30px,8vw,44px); }
  .lede{ font-size:15.5px; }

  /* Hero readability on phones */
  .hero{ min-height:74vh; }
  .hero__title{ font-size:clamp(34px,11vw,52px); }
  .hero__content{ padding-bottom:48px; }

  /* Family / collections: clean 2-up then stacked */
  #collections .coll-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .coll-card{ aspect-ratio:3/4; }

  /* Generic 2+ col grids collapse */
  .field-row{ grid-template-columns:1fr; }
  .cta__grid{ grid-template-columns:1fr; gap:36px; }
  .cta__form{ order:2; }
  .industries__grid{ grid-template-columns:1fr !important; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; gap:24px; text-align:left; }
  .cta-band__actions{ width:100%; }
  .cta-band__actions .btn{ width:100%; }

  /* Footer stacks neatly, generous spacing */
  .footer{ padding:56px 0 22px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:34px 28px; padding-bottom:40px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bot{ flex-direction:column; gap:8px; text-align:center; align-items:center; }

  /* Bigger tap targets */
  .nav__link, .btn, .footer__col a, .contact-list a{ min-height:44px; }
}

@media (max-width:480px){
  #collections .coll-grid{ grid-template-columns:1fr !important; }
  .coll-card{ aspect-ratio:16/11; }
  .footer__top{ grid-template-columns:1fr; }
  .display{ font-size:clamp(28px,9vw,38px); }
  .btn{ --pad-x:20px; font-size:12px; }
}

/* ---------------- 9. Inner-hero clearance after announce removal ---- */
/* Topbar no longer has the announce strip, so inner heroes need a touch
   less top padding to avoid an oversized gap under the fixed header. */
.hero--inner .hero__content--inner{ padding-top:clamp(120px,16vh,168px); }
@media (max-width:760px){
  .hero--inner .hero__content--inner{ padding-top:108px; }
}


/* ================================================================
   About — certifications: two-column (copy left, marks right)
   Fills the empty right-hand space on desktop; stacks on mobile.
   ================================================================ */
@media (min-width:921px){
  #certifications .wrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(48px,6vw,90px);
    align-items:center;
  }
  #certifications .certs__copy{ margin:0 !important; max-width:none !important; }
  #certifications .certs-grid{
    grid-template-columns:repeat(3,1fr) !important;
    max-width:none !important;
    margin:0 !important;
    gap:clamp(18px,1.6vw,30px) !important;
  }
}
.qc-list{ margin:26px 0 0; display:grid; gap:12px; }
.qc-list li{
  position:relative; padding-left:26px;
  color:#cfcdc8; font-size:15px; line-height:1.55;
}
.qc-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:14px; height:1px; background:var(--gold);
}

/* ================================================================
   ROUND 2 FIXES — specimen mobile, scroll performance, robustness
   ================================================================ */

/* --- Products "Specimen / Stone of the season": stop the 3-col grid
       overflowing (getting cut) on tablet/phone — stack it cleanly. --- */
@media (max-width:900px){
  .specimen--products{ overflow:hidden; }
  .specimen--products .specimen__inner{
    grid-template-columns:1fr !important;
    gap:26px !important;
    text-align:center;
    padding-top:clamp(44px,8vw,72px) !important;
    padding-bottom:clamp(44px,8vw,72px) !important;
  }
  .specimen--products .specimen__rail--left{ display:none !important; }
  .specimen--products .specimen__rail--right{ padding-top:0 !important; }
  .specimen--products .specimen__stage{ max-width:68% !important; margin:0 auto !important; }
  .specimen--products .specimen__specs{ max-width:340px; margin:18px auto 0; }
  .specimen--products .specimen__specs > div{ justify-content:center; }
}
@media (max-width:480px){
  .specimen--products .specimen__stage{ max-width:84% !important; }
}

/* --- Family cards: bullet-proof poster so a card is NEVER blank/black.
       The ::before background image is the always-visible base; video
       only sits on top when it actually plays. --- */
#collections .coll-card::before{
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  opacity:1 !important;
}
#collections .coll-card__video{ background:transparent !important; }

/* ================================================================
   SCROLL PERFORMANCE — kill the jank
   ================================================================ */

/* Promote heavy media to their own layers so scrolling doesn't repaint them */
.hero, .coll-card, .gallery__item, .specimen__stage{ contain:layout paint; }

/* The frosted (backdrop-filter blur) header is the #1 scroll cost on phones.
   Use a solid translucent bar on mobile instead — visually similar, far cheaper. */
@media (max-width:1100px){
  .topbar.is-stuck{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(247,246,243,.98) !important;
  }
}

/* Continuous Ken-Burns drifts repaint every frame — disable on touch/phones.
   Static posters look just as premium and scroll is smooth. */
@media (max-width:1100px){
  .coll-card--motion::before,
  .gallery__item--motion .gallery__img,
  .specimen__stage,
  .specimen__ground{
    animation:none !important;
  }
}

/* Lighten reveal transitions on mobile (no large translate repaint) */
@media (max-width:760px){
  .reveal{ transform:translateY(14px); transition-duration:.5s; }
}

/* ================================================================
   ROUND 3 FIXES — drawer dropdown, featured names, edges, scroll
   ================================================================ */

/* --- Mobile drawer: Products submenu MUST render inline + full width
       (it was overflowing left + clipping names like "South Indian Granite"). --- */
@media (max-width:1100px){
  .site-header .nav.is-open .nav__sub,
  .site-header .nav.is-open .nav__sub-children{
    position:static !important;
    left:auto !important; top:auto !important; right:auto !important;
    transform:none !important;
    opacity:1 !important; pointer-events:auto !important;
    width:auto !important; min-width:0 !important; max-width:100% !important;
    background:transparent !important; border:none !important;
    box-shadow:none !important;
    padding:6px 0 6px 14px !important;
    margin:4px 6px 6px 6px !important;
    border-left:2px solid var(--line) !important;
    list-style:none !important;
    overflow:visible !important;
  }
  .site-header .nav.is-open .nav__sub li,
  .site-header .nav.is-open .nav__sub-children li{
    width:100% !important; display:block !important;
  }
  .site-header .nav.is-open .nav__sub a,
  .site-header .nav.is-open .nav__sub-children a{
    display:block !important;
    padding:11px 14px !important;
    font-size:15px !important;
    line-height:1.3 !important;
    color:var(--muted) !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
  }
  /* Drawer scrolls if the open submenu is tall */
  .site-header .nav.is-open{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
}

/* --- Featured stones / product titles: never truncate; allow 2 lines --- */
.prod__title{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:normal !important;
  hyphens:none;
  line-height:1.25;
}
.prod__meta{
  white-space:normal !important;
  overflow:visible !important;
}
.prod__body{ min-height:auto !important; }

/* --- Products specimen: kill the blank dark side margins on mobile by
       making the slab fill more of the width. --- */
@media (max-width:900px){
  .specimen--products .specimen__stage{ max-width:84% !important; }
  .specimen--products{ padding-left:0 !important; padding-right:0 !important; }
}
@media (max-width:480px){
  .specimen--products .specimen__stage{ max-width:92% !important; }
}

/* ================================================================
   SCROLL PERFORMANCE — round 2 (more aggressive)
   ================================================================ */
/* Skip rendering work for sections far below the viewport */
.section{
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;
}
/* Hero must always render */
.hero, .topbar, .footer{ content-visibility:visible; }

/* Pause ALL category-page lazy videos when not in view (extra safety) */
.coll-card__video,
.gallery__video,
.coll-card--motion::before{ transform:translate3d(0,0,0); }

/* Disable expensive filters/animations on phones (further) */
@media (max-width:760px){
  .specimen__img,
  .specimen--products .specimen__img{
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.32)) !important;
  }
  .coll-card::after{ transition:none; }
  .coll-card--motion::before{ animation:none !important; }
}

/* ================================================================
   ROUND 4 — specimen ground shadow removal (looks like a dark blob)
   ================================================================ */
.specimen--sm .specimen__ground,
.specimen--products .specimen__ground{
  display:none !important;
}
/* Also dial back drop-shadow stack so it doesn't bloom into a dark halo */
.specimen--sm .specimen__img,
.specimen--products .specimen__img{
  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,.18))
    drop-shadow(0 20px 28px rgba(0,0,0,.22)) !important;
}

/* ================================================================
   ROUND 5 — restore videos, fix specimen line, speed
   ================================================================ */

/* CRITICAL: undo the content-visibility on .section — it was preventing
   IntersectionObserver from firing on the video lazy-load below the fold
   on home & products pages. (We trade a tiny bit of scroll perf for the
   videos actually appearing, which is what the user is asking for.) */
.section{ content-visibility:visible !important; contain-intrinsic-size:auto !important; }

/* Kill the thin bronze/grey hairline visible at the top of the specimen
   section on products (sub-pixel seam between two dark backgrounds). */
.specimen,
.specimen--sm,
.specimen--products{
  margin-top:-1px !important;
  border-top:0 !important;
  box-shadow:none !important;
}
/* Same defensive on the section directly above */
.section + .specimen,
.collections + .specimen{ border-top:0 !important; }

/* ================================================================
   LOAD SPEED — defer everything that isn't above the fold
   ================================================================ */

/* All non-hero images / iframes get lazy + async decoding by default.
   (Most already have it, this is a safety net.) */
img, iframe{ content-visibility:auto; }

/* Make the family-card videos a touch lighter on decode (lower memory
   footprint, faster to start). preload="none" is already set in HTML. */
.coll-card__video{ contain:layout paint style; }

/* Skip painting the offscreen footer / blog grid until near viewport — these
   are heavy and well below the fold. Safe (no lazy IO inside). */
.footer, .blog-list, .products .prod-grid{
  content-visibility:auto;
  contain-intrinsic-size:1px 1200px;
}

/* ================================================================
   FAQ — SEO + AI Search section
   ================================================================ */
.faq-sec{ background:var(--bg); }
.faq-sec .section-head{ margin-bottom:34px; }
.faq-list{ display:grid; gap:14px; max-width:880px; margin:0 auto; }
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover{ border-color:var(--gold); }
.faq-item[open]{ box-shadow:var(--shadow-sm); border-color:var(--gold); }
.faq-item summary{
  cursor:pointer; list-style:none;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.35;
  color:var(--ink); padding-right:32px;
  position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:4px; top:50%;
  width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq-answer{ padding-top:14px; }
.faq-answer p{ color:var(--muted); line-height:1.7; font-size:15.5px; margin:0; }
@media (max-width:600px){
  .faq-item{ padding:16px 18px; }
  .faq-item summary{ font-size:16px; padding-right:24px; }
  .faq-answer p{ font-size:14.5px; }
}

/* ================================================================
   FAQ — premium redesign (2-col grid, gold accent, smooth)
   ================================================================ */
.faq-sec{
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  position:relative;
}
.faq-sec::before{
  content:""; position:absolute; top:0; left:50%;
  transform:translateX(-50%); width:120px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.45;
}
.faq-sec .section-head{ text-align:center; margin:0 auto 48px; max-width:760px; }
.faq-sec .eyebrow{ justify-content:center; }
.faq-sec .display em{ color:var(--gold); }

.faq-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  max-width:1180px;
  margin:0 auto;
}
@media (max-width:780px){ .faq-list{ grid-template-columns:1fr; } }

.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  overflow:hidden;
  position:relative;
}
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.faq-item:hover{
  border-color:rgba(176,141,87,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(22,18,12,.08);
}
.faq-item[open]{
  border-color:var(--gold);
  box-shadow:0 10px 32px rgba(176,141,87,.14);
}
.faq-item[open]::before{ transform:scaleY(1); }

.faq-item summary{
  cursor:pointer; list-style:none;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.35;
  color:var(--ink);
  padding:22px 60px 22px 28px;
  position:relative;
  letter-spacing:-.005em;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }

/* Premium + icon (rotates to × when open) */
.faq-item summary::after{
  content:""; position:absolute;
  right:24px; top:50%;
  width:18px; height:18px;
  margin-top:-9px;
  background-image:
    linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold));
  background-size:100% 1.5px, 1.5px 100%;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:transform .35s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }

.faq-item summary:hover{ color:var(--gold); }
.faq-item[open] summary{ color:var(--gold); border-bottom:1px solid var(--line); }

.faq-answer{
  padding:18px 28px 26px;
  animation:faqOpen .35s var(--ease);
}
@keyframes faqOpen{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
.faq-answer p{
  color:var(--muted);
  line-height:1.72;
  font-size:15.5px;
  margin:0;
}

@media (max-width:600px){
  .faq-item summary{ padding:18px 50px 18px 22px; font-size:16px; }
  .faq-item summary::after{ right:18px; width:16px; height:16px; margin-top:-8px; }
  .faq-answer{ padding:16px 22px 22px; }
  .faq-answer p{ font-size:14.5px; }
}

/* ================================================================
   Override: keep videos visible even when OS reduce-motion is ON
   (page-level inline styles also patched).
   ================================================================ */
@media (prefers-reduced-motion: reduce){
  .coll-card__video,
  #categories .coll-card__video,
  .collections .coll-card__video,
  #collections .coll-card__video{
    display:block !important;
    opacity:1 !important;
  }
}

/* ================================================================
   Nav dropdown — single arrow only
   ================================================================ */
/* prior nav-arrow hides removed — JS now reuses single .caret */

/* Specimen image always visible — strip any rendering containment */
.specimen__stage{ content-visibility:visible !important; contain:none !important; }

/* ================================================================
   Nav arrows — single arrow only (JS now reuses the existing .caret)
   ================================================================ */
.nav__caret-btn{ background:transparent !important; }
@media (min-width:1101px){
  /* Desktop: simple chevron, no button look */
  .nav__caret-btn{
    width:auto !important; height:auto !important;
    padding:0 !important; border-radius:0 !important;
    font-size:14px !important; color:rgba(255,255,255,.7) !important;
  }
  .topbar.is-stuck .nav__caret-btn{ color:var(--muted) !important; }
}

/* ================================================================
   Product variant grid — cleaner, more premium
   ================================================================ */
.prod-grid{
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2vw,32px) clamp(16px,1.6vw,26px) !important;
  align-items:start;
}
@media (max-width:1200px){ .prod-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:780px){  .prod-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:420px){  .prod-grid{ grid-template-columns:1fr !important; } }

.prod{
  display:flex !important;
  flex-direction:column;
  transition:transform .35s var(--ease);
}
.prod:hover{ transform:translateY(-4px); }

.prod__img{
  aspect-ratio:1/1.1 !important;
  border-radius:10px;
  margin-bottom:14px !important;
  background-color:var(--bg-2);
  box-shadow:0 1px 2px rgba(22,18,12,.05);
  transition:box-shadow .35s var(--ease);
}
.prod:hover .prod__img{ box-shadow:0 10px 28px rgba(22,18,12,.14); }

.prod__body{
  padding:0 2px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.prod__title{
  font-size:clamp(17px,1.3vw,20px) !important;
  line-height:1.25 !important;
  font-weight:400 !important;
  letter-spacing:-.012em !important;
  margin:0 !important;
  color:var(--ink);
  min-height:0 !important;
}
.prod__meta{
  font-size:13px !important;
  letter-spacing:.02em;
  line-height:1.45;
  color:var(--muted) !important;
  margin:0 !important;
}
.prod__tag{
  font-size:10px !important;
  letter-spacing:.2em;
  padding:5px 9px !important;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(4px);
  font-weight:500;
}

/* Hide the noisy "INSTALLED" tag on small screens */
@media (max-width:780px){
  .prod--motion .prod__img::before{ display:none !important; }
}

/* ================================================================
   Product variant grid — calm, breathable, less cluttered
   ================================================================ */
.prod-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:clamp(36px,3.2vw,56px) clamp(24px,2.2vw,40px) !important;
  align-items:start;
  max-width:1280px;
  margin-inline:auto;
}
@media (max-width:980px){ .prod-grid{ grid-template-columns:repeat(2,1fr) !important; gap:36px 22px !important; } }
@media (max-width:520px){ .prod-grid{ grid-template-columns:1fr !important; gap:32px !important; } }

.prod{
  display:flex !important;
  flex-direction:column;
  transition:transform .4s var(--ease);
}
.prod:hover{ transform:translateY(-4px); }

.prod__img{
  aspect-ratio:1/1.05 !important;
  border-radius:8px;
  margin-bottom:18px !important;
  overflow:hidden;
  background-color:var(--bg-2);
  box-shadow:0 1px 3px rgba(22,18,12,.06);
  transition:box-shadow .4s var(--ease);
}
.prod:hover .prod__img{ box-shadow:0 14px 36px rgba(22,18,12,.16); }

.prod__body{
  padding:0 4px;
  display:flex; flex-direction:column; gap:6px;
}
.prod__title{
  font-size:clamp(18px,1.35vw,21px) !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:-.012em !important;
  margin:0 !important;
  color:var(--ink);
}
.prod__meta{
  font-size:13px !important;
  letter-spacing:.02em !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
  margin:0 !important;
}
.prod__tag{
  font-size:10px !important;
  letter-spacing:.2em !important;
  padding:6px 11px !important;
  background:rgba(255,255,255,.95);
  font-weight:500;
}

/* Section that holds the grid needs more breathing room above + below */
.products.section{
  padding-top:clamp(64px,7vw,112px) !important;
  padding-bottom:clamp(64px,7vw,112px) !important;
}
@media (max-width:780px){
  .prod--motion .prod__img::before{ display:none !important; }
}

/* ================================================================
   Product variant grid — 4-up, equal gaps on all sides
   ================================================================ */
.products.section{
  padding:clamp(72px,7vw,120px) 0 !important;
}
.products .wrap{
  padding-left:clamp(28px,4vw,64px) !important;
  padding-right:clamp(28px,4vw,64px) !important;
}
.prod-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:clamp(32px,3vw,52px) !important;     /* equal row + column gap */
  align-items:start;
}
@media (max-width:1100px){ .prod-grid{ grid-template-columns:repeat(3,1fr) !important; gap:36px !important; } }
@media (max-width:760px){  .prod-grid{ grid-template-columns:repeat(2,1fr) !important; gap:28px !important; } }
@media (max-width:460px){  .prod-grid{ grid-template-columns:1fr !important; gap:32px !important; } }

.prod{
  display:flex !important;
  flex-direction:column;
  transition:transform .4s var(--ease);
}
.prod:hover{ transform:translateY(-4px); }

.prod__img{
  aspect-ratio:1/1.05 !important;
  border-radius:8px;
  margin-bottom:18px !important;
  overflow:hidden;
  background-color:var(--bg-2);
  box-shadow:0 1px 3px rgba(22,18,12,.06);
  transition:box-shadow .4s var(--ease);
}
.prod:hover .prod__img{ box-shadow:0 14px 36px rgba(22,18,12,.16); }

.prod__body{ padding:0 2px; display:flex; flex-direction:column; gap:4px; }
.prod__title{
  font-size:clamp(16px,1.2vw,19px) !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:-.012em !important;
  margin:0 !important;
  color:var(--ink);
}
.prod__meta{
  font-size:12.5px !important;
  letter-spacing:.02em !important;
  line-height:1.45 !important;
  color:var(--muted) !important;
  margin:0 !important;
}
.prod__tag{
  font-size:10px !important;
  letter-spacing:.2em !important;
  padding:5px 9px !important;
  background:rgba(255,255,255,.95);
  font-weight:500;
}
@media (max-width:780px){
  .prod--motion .prod__img::before{ display:none !important; }
}


/* Force single arrow visible everywhere */
.site-header .nav__has-sub > .nav__link > .caret{ display:inline-block !important; }