/* Maytrika — minimal modern premium stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#161412;
  --ink-soft:#6f6a62;
  --paper:#f6f4ef;
  --paper-2:#efece4;
  --white:#ffffff;
  --accent:#b0613a;        /* muted terracotta, used sparingly */
  --accent-dark:#8f4d2e;
  --line:#e4dfd5;
  --line-soft:#ece8df;
  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* Shared label / kicker */
.eyebrow,.kicker,.tag{
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,244,239,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center}
.brand-name{font-weight:600;font-size:25px;letter-spacing:-0.04em;color:var(--ink);line-height:1}
.brand-name .tm{font-size:.36em;font-weight:500;vertical-align:super;letter-spacing:0;margin-left:2px;position:relative;top:-.15em}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-size:13.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.01em;transition:color .25s;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-cta{
  border:1px solid var(--ink);color:var(--ink)!important;
  padding:11px 22px;border-radius:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:.25s;
}
.nav-cta:hover{background:var(--ink);color:var(--white)!important}
.nav-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink)}

/* Buttons */
.btn{
  display:inline-block;padding:15px 32px;border-radius:0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;cursor:pointer;
  border:1px solid transparent;transition:.25s;
}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}

/* Hero */
.hero{padding:clamp(70px,12vh,150px) 0 clamp(60px,9vh,110px)}
.eyebrow{display:inline-block;color:var(--accent);margin-bottom:30px}
.hero h1{
  font-size:clamp(38px,7vw,86px);line-height:1.02;font-weight:300;letter-spacing:-0.03em;
  max-width:16ch;margin-bottom:30px;
}
.hero p.lead{font-size:clamp(16px,2vw,20px);color:var(--ink-soft);max-width:46ch;margin-bottom:42px;font-weight:400}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px}
.badges{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.badges span{
  font-size:12.5px;color:var(--ink-soft);font-weight:400;letter-spacing:0;
  padding:22px 30px 0 0;flex:1 1 200px;min-width:180px;
}
.badges span::before{content:none}

/* Sections */
section.block{padding:clamp(64px,10vh,120px) 0}
.alt{background:var(--white)}
.section-head{max-width:760px;margin-bottom:clamp(38px,5vh,64px)}
.section-head .kicker{color:var(--accent);display:block;margin-bottom:18px}
.section-head h2{font-size:clamp(28px,4.5vw,52px);font-weight:300;letter-spacing:-0.025em;line-height:1.06;margin-bottom:18px}
.section-head p{color:var(--ink-soft);font-size:clamp(15px,1.6vw,18px);max-width:54ch}

/* Grid + cards */
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0 0;box-shadow:none;transition:none}
.card:has(.card-media){border-top:0;padding-top:0}
.alt .card{background:transparent}
.card:hover{transform:none;box-shadow:none}
/* media area for product photos (drop <img> inside .card-media later) */
.card-media{
  aspect-ratio:3/4;background:var(--paper-2);margin-bottom:22px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.alt .card-media{background:var(--paper)}
.card-media::after{
  content:attr(data-label);position:absolute;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#bcb5a8;font-weight:500;
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card-ai{position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(22,20,18,.68);color:#fff;font-size:10.5px;letter-spacing:.04em;pointer-events:none}
.card:hover .card-media img{transform:scale(1.04)}
.card h3{font-size:18px;font-weight:500;letter-spacing:-0.01em;margin-bottom:8px;line-height:1.25}
.card p{color:var(--ink-soft);font-size:14.5px;font-weight:400}
.card .tag{display:inline-block;color:var(--accent);margin-bottom:12px}
.card .price-note{margin-top:14px;font-weight:500;color:var(--ink);font-size:13px}
.card .enquire{
  margin-top:16px;display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;transition:.25s;
}
.card .enquire:hover{color:var(--accent);border-color:var(--accent)}

/* simple value cards (no media) get a top rule */
.values .card{border-top:1px solid var(--line);padding-top:24px}

/* CTA strip */
.cta-strip{background:var(--ink);color:var(--white);border-radius:0;padding:clamp(44px,8vw,96px);text-align:center}
.cta-strip h2{font-size:clamp(26px,4vw,46px);font-weight:300;letter-spacing:-0.025em;margin-bottom:16px}
.cta-strip p{color:#b9b2a7;margin-bottom:34px;font-size:16px;max-width:46ch;margin-left:auto;margin-right:auto}
.cta-strip .btn-primary{background:var(--white);color:var(--ink)}
.cta-strip .btn-primary:hover{background:var(--accent);color:var(--white)}

/* Footer */
.site-footer{background:var(--ink);color:#a59e93;padding:clamp(56px,8vw,96px) 0 36px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;margin-bottom:56px}
.site-footer h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:22px}
.site-footer a{display:block;color:#a59e93;font-size:14px;margin-bottom:12px;transition:color .25s}
.site-footer a:hover{color:#fff}
.site-footer .tagline{font-size:14.5px;line-height:1.75;max-width:34ch;color:#a59e93;font-weight:400}
.site-footer .brand-name{color:#fff;margin-bottom:20px;font-size:24px}
.footer-contact p{font-size:14px;margin-bottom:12px;color:#a59e93}
/* Full NAP + hours + service area, on every page. Local search rewards the
   same name/address/phone appearing consistently; these strings are copied
   from the HomeGoodsStore JSON-LD so the visible text and the structured data
   cannot drift apart. */
.footer-addr{line-height:1.65;margin-top:16px}
.footer-hours,.footer-area{font-size:13px;color:#8f887d}
.footer-udyam{font-size:12px;color:#7d766c;letter-spacing:.02em}
.socials{display:flex;gap:16px;margin-top:16px}
.socials a{width:34px;height:34px;border:1px solid #3a352e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#a59e93}
.socials a:hover{border-color:var(--accent);color:#fff}
.legal-bar{border-top:1px solid #2c2823;padding-top:28px;font-size:12px;letter-spacing:.02em;color:#7d766c}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:0;padding:clamp(28px,4vw,44px)}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:9px;color:var(--ink-soft)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  font-family:inherit;font-size:15px;background:transparent;color:var(--ink);transition:border-color .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--ink-soft);margin:8px 0 26px;line-height:1.5}
.consent input{margin-top:3px}

/* Policy page */
.policy{max-width:780px;margin:0 auto;padding:clamp(48px,7vw,90px) 0}
.policy h1{font-size:clamp(30px,5vw,52px);font-weight:300;letter-spacing:-0.025em;margin-bottom:14px;line-height:1.05}
.policy .meta{color:var(--ink-soft);font-size:13.5px;margin-bottom:8px}
.policy .toc{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 56px}
.policy .toc a{border:1px solid var(--line);padding:9px 16px;border-radius:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);transition:.25s}
.policy .toc a:hover{border-color:var(--ink);color:var(--ink)}
.policy section{scroll-margin-top:110px;margin-bottom:56px}
.policy h2{font-size:clamp(22px,3vw,34px);font-weight:300;letter-spacing:-0.02em;margin:10px 0 24px;padding-bottom:0;border:0}
.policy h3{font-size:15px;font-weight:600;margin:22px 0 8px;letter-spacing:-0.005em}
.policy p,.policy li{color:var(--ink-soft);font-size:15px;margin-bottom:11px;line-height:1.7}
.policy ul{padding-left:20px}
.policy .officer{background:var(--white);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0;padding:26px;margin:18px 0}
.policy .officer p{margin-bottom:6px;color:var(--ink)}

.page-hero{padding:clamp(60px,9vh,120px) 0 clamp(20px,3vh,40px)}
.page-hero .eyebrow{margin-bottom:24px}
.page-hero h1{font-size:clamp(34px,6vw,72px);font-weight:300;letter-spacing:-0.03em;line-height:1.03}
.page-hero p{color:var(--ink-soft);font-size:clamp(16px,1.8vw,19px);max-width:52ch;margin-top:20px}

/* Responsive */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:680px){
  .nav{height:68px}
  .nav-toggle{display:block;font-size:26px;line-height:1;padding:6px;margin:-6px}
  .nav-links{
    position:absolute;top:68px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px var(--gut) 16px;border-bottom:1px solid var(--line);display:none;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0;width:100%;font-size:16px}
  .nav-cta{display:inline-block;width:auto;text-align:center;margin-top:8px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;gap:32px}
  .badges span{flex-basis:100%;padding-right:0}
}

/* Articles / Journal */
.article{max-width:720px;margin:0 auto;padding:clamp(36px,6vw,64px) 0}
.article .meta{color:var(--accent);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.article h1{font-size:clamp(30px,5vw,54px);font-weight:300;letter-spacing:-0.028em;line-height:1.05;margin-bottom:22px}
.article .lead{font-size:clamp(17px,2vw,22px);color:var(--ink);font-weight:300;line-height:1.5;margin-bottom:40px}
.article h2{font-size:clamp(20px,2.6vw,29px);font-weight:400;letter-spacing:-0.015em;margin:40px 0 14px;line-height:1.2}
.article p,.article li{color:var(--ink-soft);font-size:16px;line-height:1.8;margin-bottom:14px}
.article ul{padding-left:20px}
.article strong{color:var(--ink);font-weight:600}
.article .backlink{display:inline-block;margin-top:48px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.article .backlink:hover{color:var(--accent);border-color:var(--accent)}
.journal-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px)}
.journal-item{border-top:1px solid var(--line);padding-top:26px}
.journal-item .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.journal-item h3{font-size:23px;font-weight:300;letter-spacing:-0.02em;line-height:1.15;margin-bottom:12px}
.journal-item p{color:var(--ink-soft);font-size:15px;margin-bottom:16px;line-height:1.65}
.journal-item a.more{font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;color:var(--ink)}
.journal-item a.more:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:680px){.journal-list{grid-template-columns:1fr}}

/* Engaging article components */
.tldr{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 26px;margin:6px 0 38px}
.tldr h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}
.tldr ul{margin:0;padding-left:18px}
.tldr li{font-size:15.5px;color:var(--ink);margin-bottom:9px;line-height:1.55}
.callout{background:var(--paper-2);padding:22px 26px;margin:26px 0;font-size:15.5px;color:var(--ink);line-height:1.6}
.callout .lbl{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;font-weight:600}
.pull{font-size:clamp(21px,2.8vw,30px);font-weight:300;line-height:1.28;letter-spacing:-0.02em;color:var(--ink);border-left:2px solid var(--accent);padding-left:26px;margin:38px 0}
table.compare{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
table.compare th,table.compare td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top}
table.compare th{background:var(--paper-2);font-weight:600;color:var(--ink);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
table.compare td{color:var(--ink-soft);line-height:1.5}
table.compare td:first-child{color:var(--ink);font-weight:500}
.faqwrap{border-bottom:1px solid var(--line);margin-top:14px}
details.faq{border-top:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:18px;transition:color .2s}
details.faq summary:hover{color:var(--accent)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--accent);line-height:1}
details.faq[open] summary::after{content:"\2212"}
details.faq .ans{padding:0 0 22px;color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin:0;max-width:64ch}
.article table.compare td:first-child{color:var(--ink)}

.hero-banner{width:100%;background:var(--paper-2)}
.hero-banner img{display:block;width:100%;height:clamp(300px,56vh,600px);object-fit:cover}

/* WhatsApp click-to-chat */
.wa-float{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:60;transition:transform .2s}
.wa-float:hover{transform:scale(1.08);color:#fff}
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{background:#1da851;border-color:#1da851;color:#fff}
@media(max-width:680px){.wa-float{bottom:16px;right:16px;width:52px;height:52px}}

/* ---- Visual polish: image cohesion + refined motion ---- */
.card-media{border:1px solid var(--line-soft)}
.card-media img{filter:saturate(.97) contrast(1.01);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-media{border-color:var(--line)}
.card:hover .card-media img{transform:scale(1.045)}

/* ---- Trust strip ---- */
.trust{background:var(--white);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);padding-top:22px;padding-bottom:22px}
.trust-item{display:flex;align-items:center;gap:12px;flex:1 1 200px;min-width:170px}
.trust-item svg{flex:0 0 auto;width:22px;height:22px;color:var(--accent)}
.trust-item b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.25}
.trust-item span{display:block;font-size:12px;color:var(--ink-soft);line-height:1.3}
.trust-item a{color:inherit}
@media(max-width:680px){.trust .wrap{gap:18px} .trust-item{flex:1 1 45%;min-width:140px}}

/* ---- Split hero (image leads the first fold) ---- */
.hero-split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5vw,72px);align-items:center}
.hero-split .eyebrow{margin-bottom:24px}
.hero-split h1{font-size:clamp(34px,4.6vw,62px);line-height:1.04;max-width:none;margin-bottom:24px}
.hero-split p.lead{margin-bottom:34px}
.hero-split .hero-actions{margin-bottom:0}
.hero-figure{position:relative;aspect-ratio:4/5;max-height:560px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line-soft)}
.hero-figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.97) contrast(1.01)}
.hero .badges{margin-top:clamp(48px,7vh,80px)}
@media(max-width:820px){
  .hero{padding:30px 0 44px}
  .hero-split{grid-template-columns:1fr;gap:28px}
  .hero-figure{aspect-ratio:16/10;max-height:360px;order:-1}
  .hero-split h1{font-size:clamp(32px,8vw,46px)}
  .hero .badges{margin-top:36px}
}
/* equal-height product cards: pin CTA to bottom so links align across a row */
.card{display:flex;flex-direction:column}
.card .enquire{margin-top:auto}
/* ---------- Motion (gated by .anim; respects reduced-motion) ---------- */
.anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.anim .reveal.in{opacity:1;transform:none}
.hero-figure{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .hero-figure img{animation:kenburns 20s ease-out both}
  @keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1)}}
  .brand-name .ltr{display:inline-block;opacity:0;transform:translateY(0.5em);animation:brandIn .6s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes brandIn{to{opacity:1;transform:none}}
}

/* Cotton-blossom logo */
.brand-logo{height:40px;width:auto;display:block}
.brand-logo-footer{height:38px;width:auto;display:block;margin-bottom:8px}
@media(max-width:680px){.brand-logo{height:32px}}
/* The logo must never be visibly washed-out while the page loads. Was .8s with
   `both`, which held it at opacity:0 for the whole fill-backwards phase — the
   brand was the slowest thing on the page to appear. 150ms, and it starts from
   opacity .4 rather than 0 so it is legible from the first painted frame. */
.anim .brand-logo{animation:logoFade .15s ease-out both}
@keyframes logoFade{from{opacity:.4}to{opacity:1}}

/* Mobile: let wide comparison tables scroll instead of overflowing */
@media(max-width:600px){
  .article table.compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article table.compare th,.article table.compare td{min-width:120px}
}


/* --- YouTube Short embeds (vertical) --- */
.video-embed{margin:34px auto;max-width:330px;text-align:center}
.video-embed .frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.16);background:#000}
.video-embed .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed .cap{margin-top:12px;font-size:13px;color:var(--ink-soft)}
.video-embed .cap a{color:var(--accent);border-bottom:1px solid var(--accent)}
.video-embed.wide{max-width:620px}
.video-embed.wide .frame{aspect-ratio:16/9}


/* --- Product detail pages + card actions --- */
.breadcrumb{font-size:13px;color:var(--ink-soft);margin:22px 0 4px}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--ink)}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin:14px 0 6px}
.pdp-media > img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.10);background:#f3ede6}
.pdp-info h1{font-size:30px;line-height:1.2;margin:12px 0 8px}
.pdp-desc{color:var(--ink-soft);margin:10px 0 18px;line-height:1.7}
.pdp-specs{list-style:none;padding:0;margin:0 0 22px;border-top:1px solid #eadfd4}
.pdp-specs li{padding:9px 2px;border-bottom:1px solid #eadfd4;font-size:14.5px}
.pdp-actions{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
.btn-ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent)}
.pdp-note{font-size:13px;color:var(--ink-soft);margin:4px 0}
.pdp-back{margin-top:16px;font-size:14px}

/* --- Product gallery: stage + thumbs, hover-zoom, in-view video --- */
.gal{display:flex;flex-direction:column;gap:12px}
.gal-stage{position:relative;border-radius:16px;overflow:hidden;background:#f3ede6;box-shadow:0 12px 34px rgba(0,0,0,.10)}
.gal-slide{display:none;margin:0;position:relative}
.gal-slide.is-active{display:block}
.gal-ai{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:999px;background:rgba(22,20,18,.72);color:#fff;font-size:11.5px;letter-spacing:.02em;z-index:2;pointer-events:none}
.gal-thumb .gal-ai-dot{position:absolute;right:3px;bottom:3px;padding:1px 5px;border-radius:4px;background:rgba(22,20,18,.78);color:#fff;font-size:9.5px;letter-spacing:.03em}
.gal-note{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:2px 0 0}
.gal-slide img,.gal-slide video{display:block;width:100%;height:auto}
.gal-slide img{transition:transform .35s ease;transform-origin:center}
.gal-stage.can-zoom{cursor:zoom-in}
.gal-stage.is-zooming .gal-slide.is-active img{transform:scale(2.1);transition:transform .12s ease-out}
.gal-hint{position:absolute;right:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:rgba(22,20,18,.6);color:#fff;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}
.gal-stage:hover .gal-hint,.gal-stage:focus-within .gal-hint{opacity:1}
.gal-stage.is-zooming .gal-hint{opacity:0}
.gal-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0}
.gal-thumb{position:relative;width:74px;height:74px;padding:0;flex:0 0 auto;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#f3ede6;cursor:pointer;transition:border-color .18s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{border-color:var(--ink-soft)}
.gal-thumb[aria-selected="true"]{border-color:var(--accent)}
.gal-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-thumb .gal-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(22,20,18,.28);color:#fff;font-size:15px}
.gal-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(22,20,18,.93)}
.gal-lb.open{display:flex}
.gal-lb img{max-width:100%;max-height:92vh;width:auto;border-radius:10px}
.gal-lb-close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
@media(max-width:760px){
  .gal-thumb{width:54px;height:54px}
  /* One scrolling row, not a wrapped block. Wrapping to a second row cost ~72px
     directly above the order button on every gallery PDP. */
  .gal-thumbs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .gal-thumbs::-webkit-scrollbar{display:none}
  .gal-note{font-size:11.5px;line-height:1.5}
}
.card-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.card-title-link{color:inherit}
.card-title-link:hover{color:var(--accent)}
.wa-mini{font-size:13.5px;font-weight:600;color:#1a8f4c;border-bottom:1px solid #1a8f4c}
.wa-mini:hover{opacity:.8}
@media(max-width:760px){.pdp{grid-template-columns:1fr;gap:22px}}

/* --- PDP buy-box: availability / delivery / returns / payment + how-ordering-works --- */
.pdp-tax{font-size:12px;color:var(--ink-soft);margin:2px 0 0}
.pdp-buybox{border:1px solid var(--line);background:var(--white);border-radius:14px;padding:18px 20px;margin:18px 0}
.pdp-assure{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pdp-assure li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink);line-height:1.45}
.pdp-assure svg{flex:0 0 auto;width:19px;height:19px;color:var(--accent);margin-top:1px}
.pdp-assure b{font-weight:600}
.pdp-how{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-soft)}
.pdp-how h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 13px;font-weight:600}
.pdp-how ol{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.pdp-how ol li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);line-height:1.45;counter-increment:step}
.pdp-how ol li::before{content:counter(step);flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pdp-seller{font-size:11.5px;color:var(--ink-soft);margin:14px 0 0;line-height:1.5}

/* --- Buying action, above the fold (see `pagegen cta`) ---
   The order button used to sit ~1190px down on a 390px screen, below the whole
   description and spec table — a phone visitor saw the price but no way to buy.
   These styles support the reordered pdp-info: one summary line, then a
   full-width order button, then the quick trust points. */
.pdp-oneline{font-size:14.5px;color:var(--ink);margin:12px 0 16px;line-height:1.55}

.pdp-order{margin:0 0 14px}
/* Full-width and unmistakably THE purchase action — the floating WhatsApp bubble
   reads as general support, not "buy this". */
.btn-order{display:block;width:100%;text-align:center;padding:17px 22px;font-size:15.5px;letter-spacing:.02em}
.pdp-order-help{font-size:13px;color:var(--ink-soft);margin:9px 0 0;text-align:center;line-height:1.5}

.pdp-quick{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px}
.pdp-quick li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.pdp-quick li::before{content:"";position:absolute;left:4px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

.btn-sizeguide{display:inline-block}
.pdp-details-h{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:600;margin:30px 0 12px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:760px){
  /* Shrink the media so name, price and the order button reach the first
     screen. ~56svh of an 844px phone ≈ 470px, inside the 55-65% target.
     `contain` because these are Kamal's own product photos — cap the height,
     never re-crop what he shot. */
  /* The media cap is adaptive, not a flat percentage. Everything between the
     image and the order button (header, breadcrumb, name, price, summary line,
     the button itself) is a FIXED pixel height — roughly 400px on a
     single-image PDP and 445px on a gallery PDP, which carries a thumbnail
     strip that has to stay inside .gal for pdp-gallery.js to find it.
     A flat 50svh therefore passed at 390x844 and failed on every smaller
     phone. Subtracting that fixed chrome from the viewport keeps the button on
     the first screen at any height, and the 50svh/45svh ceiling stops the
     image getting gratuitously tall on a big phone. */
  .pdp-media > img{max-height:min(50svh, calc(100svh - 450px))}
  .gal-stage{max-height:min(45svh, calc(100svh - 495px));
    display:flex;align-items:center;justify-content:center}
  .gal-slide.is-active{width:100%}
  .gal-slide img,.gal-slide video{max-height:min(45svh, calc(100svh - 495px));object-fit:contain}
  .gal{gap:8px}
  .breadcrumb{margin:10px 0 2px}
  .pdp-media > img{object-fit:contain}

  /* Every one of these is here to buy vertical pixels above the order button.
     At the original spacing the button's top edge landed at 836px on an 844px
     screen — technically "above the fold" by 8px, which is not seen. */
  .pdp{gap:14px}
  .pdp-info h1{font-size:26px;margin:4px 0 6px;line-height:1.2}
  .pdp-oneline{margin:8px 0 12px}
  .pdp-order{margin-bottom:10px}
  .pdp-quick{margin-bottom:14px}
}

/* --- Contact: quick 'catalogue on WhatsApp' action --- */
.quick-cat{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:26px}
.quick-cat-text{display:flex;flex-direction:column;gap:3px}
.quick-cat-text strong{font-size:14.5px;color:var(--ink)}
.quick-cat-text span{font-size:12.5px;color:var(--ink-soft);line-height:1.4;max-width:32ch}
.quick-cat .btn-wa{flex:0 0 auto}
@media(max-width:520px){.quick-cat .btn-wa{width:100%;text-align:center}}

/* --- Catalogue filter bar + richer product cards --- */
.filterbar{position:sticky;top:84px;z-index:20;background:rgba(246,244,239,.92);backdrop-filter:saturate(140%) blur(8px);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:15px 0}
.filterbar .wrap{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.filter-field{display:flex;flex-direction:column;gap:5px}
.filter-field label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.filter-field select{appearance:none;-webkit-appearance:none;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:9px 32px 9px 12px;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6a62' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
.filter-field select:focus{outline:none;border-color:var(--ink)}
.filter-actions{margin-left:auto;display:flex;align-items:center;gap:16px;padding-bottom:2px}
.filter-count{font-size:13px;color:var(--ink-soft)}
.filter-clear{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:0 0 2px;cursor:pointer;background:none;font-family:inherit;font-weight:500}
.filter-clear:hover{color:var(--accent);border-color:var(--accent)}
.no-results{text-align:center;color:var(--ink-soft);padding:44px 0;font-size:16px;display:none;grid-column:1/-1}
.card-specs{list-style:none;padding:0;margin:11px 0 0;display:flex;flex-wrap:wrap;gap:5px 9px}
.card-specs li{font-size:12.5px;color:var(--ink-soft);position:relative;padding-right:10px}
.card-specs li:not(:last-child)::after{content:"·";position:absolute;right:1px;color:var(--ink-soft);opacity:.5}
.card-stock{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#1a8f4c;font-weight:500;margin-top:9px}
.card-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#1a8f4c;display:inline-block}
.card .price .price-tax{font-size:11px;color:var(--ink-soft);font-weight:400;letter-spacing:0;text-transform:none}
@media(max-width:680px){.filterbar{position:static} .filter-field{flex:1 1 44%} .filter-field select{width:100%} .filter-actions{margin-left:0;flex:1 1 100%;justify-content:space-between;padding-top:4px}}


/* ================= HOMEPAGE POSTER HERO (promoted from home-v4, 2026-07-18) ================= */
/* ---- v4 draft styles. Move into styles.css on promotion. ----
   Uses the existing styles.css custom properties (--ink, --paper, --accent...)
   so the two design systems stay one system. */

/* ---------------- POSTER HERO ---------------- */
.poster{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-start;overflow:hidden;background:#15233d}
.poster-img{position:absolute;inset:0}
.poster-img picture{display:block;width:100%;height:100%}
/* Desktop is served its own wide staging (cape left, trolley centre, her right),
   already framed for this box — 91% of the source stays visible, so cover does
   almost nothing. Mobile gets the 4:5 portrait, biased to her side. */
.poster-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:820px){.poster-img img{object-position:64% 6%}}

/* Slow drift on the hero still — the cheap half of "make the hero move".
   28s, 1.00 -> 1.06, alternating, so it never visibly restarts. transform-only
   (no width/height/top), so it runs on the compositor and costs no layout.
   Deliberately NOT a video: this is one 1344x768 webp already being loaded, so
   it adds zero bytes and cannot hurt mobile LCP. */
@keyframes heroDrift{
  from{transform:scale(1.005) translate3d(0,0,0)}
  to  {transform:scale(1.06)  translate3d(-1.2%,-0.8%,0)}
}
.poster-img img{
  will-change:transform;
  animation:heroDrift 28s ease-in-out infinite alternate;
}
/* On mobile the crop is already tight around her — drift less, and never
   horizontally, or the art direction that keeps her clear of the copy breaks. */
@media(max-width:820px){
  @keyframes heroDrift{
    from{transform:scale(1.01) translate3d(0,0,0)}
    to  {transform:scale(1.05) translate3d(0,-0.6%,0)}
  }
}
@media(prefers-reduced-motion:reduce){
  .poster-img img{animation:none}
}

/* The grade runs deeper than v3's did — v3 faded out at 72%. Carrying the
   scrim to full height keeps the sub-copy readable over the trolley mesh and
   makes the chest emblem legible under the mobile copy. */
.poster-grade{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(10,14,24,.82) 0%,rgba(10,14,24,.52) 40%,rgba(10,14,24,.42) 72%,rgba(10,14,24,.55) 100%),
  linear-gradient(to right,rgba(10,14,24,.66) 0%,rgba(10,14,24,.10) 62%,rgba(10,14,24,0) 100%)}
.poster-inner{position:relative;width:100%;padding:clamp(48px,9vh,104px) 0 clamp(40px,7vh,80px)}
.poster h1{font-weight:200;letter-spacing:-.035em;line-height:.94;color:#fff;
  font-size:clamp(40px,8.5vw,132px);text-transform:uppercase;max-width:15ch;
  text-shadow:0 2px 30px rgba(10,14,24,.5)}
.poster h1 .w{display:inline-block;opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.poster .sub{margin-top:26px;color:rgba(255,255,255,.94);font-size:clamp(15px,1.7vw,20px);
  font-weight:300;max-width:42ch;text-shadow:0 1px 16px rgba(10,14,24,.6);
  opacity:0;animation:rise .8s .9s cubic-bezier(.2,.7,.3,1) forwards}
.poster .cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;animation:rise .8s 1.3s cubic-bezier(.2,.7,.3,1) forwards}
.poster .btn-solid{display:inline-block;padding:16px 34px;font-size:14px;letter-spacing:.06em;
  background:#fff;color:var(--ink);text-decoration:none;border:1px solid transparent;transition:.25s}
.poster .btn-solid:hover{background:var(--accent);color:#fff}
.poster .btn-line{display:inline-block;padding:16px 34px;font-size:14px;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;transition:.25s}
.poster .btn-line:hover{background:#fff;color:var(--ink)}

/* ---------------- AI disclosure: asterisk + one footnote ---------------- */
/* bottom-LEFT: bottom-right is occupied by the .wa-float WhatsApp button,
   which sat directly on top of this marker. */
.ai-star{position:absolute;left:var(--gut);bottom:12px;z-index:4;
  color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.02em;text-decoration:none;
  text-shadow:0 1px 10px rgba(10,14,24,.9)}
.ai-star:hover{color:#fff}
.ai-note{border-top:1px solid var(--line);padding:22px 0 30px;
  color:var(--ink-soft);font-size:12.5px;line-height:1.6;max-width:78ch}
.ai-note a{color:var(--ink-soft);text-decoration:underline}

/* ---------------- LOCAL TRUST ---------------- */
.local-trust .card p{line-height:1.75}
.local-trust a{color:var(--accent);border-bottom:1px solid currentColor}


/* ---------------- COLLECTION RUN ---------------- */
.run-intro{padding:clamp(56px,9vh,110px) 0 clamp(24px,4vh,48px)}
.run-intro .kicker{color:var(--accent);display:block;margin-bottom:16px}
.run-intro h2{font-weight:200;font-size:clamp(30px,5vw,62px);letter-spacing:-.03em;line-height:1.03;max-width:16ch}
.prod{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);
  padding:clamp(40px,7vh,88px) var(--gut);max-width:var(--maxw);margin:0 auto}
.prod-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.prod-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.prod.in .prod-media img{transform:scale(1)}
.prod-body{opacity:0;transform:translateY(20px);transition:.9s cubic-bezier(.2,.7,.3,1) .15s}
.prod.in .prod-body{opacity:1;transform:none}
.prod:nth-of-type(even) .prod-media{order:2}
.prod .num{font-size:11px;letter-spacing:.24em;color:var(--ink-soft);text-transform:uppercase}
.prod h3{font-weight:200;font-size:clamp(26px,3.8vw,50px);letter-spacing:-.03em;line-height:1.04;margin:16px 0 14px}
.prod p{color:var(--ink-soft);font-size:clamp(15px,1.6vw,17px);font-weight:300;max-width:40ch;line-height:1.65}
.prod .spec{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.prod .spec div span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.prod .spec div b{font-weight:400;font-size:15px}
.prod .prod-price{margin-top:22px;font-size:20px;font-weight:400}
.prod .go{display:inline-block;margin-top:24px;font-size:14px;letter-spacing:.05em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.prod .go:hover{color:var(--accent)}

@media(max-width:820px){
  .prod{grid-template-columns:1fr;gap:26px;padding-top:34px;padding-bottom:34px}
  .prod:nth-of-type(even) .prod-media{order:0}
  .poster h1{font-size:clamp(36px,11vw,58px)}
  /* 26ch, not 34: at 34 the third line ran under the flower emblem on her
     chest. She sits right of centre in the portrait crop, so the copy column
     has to stay narrow enough to clear her. */
  .poster .sub{max-width:26ch}
}
@media(prefers-reduced-motion:reduce){
  .poster h1 .w,.poster .sub,.poster .cta,.prod-body{opacity:1;transform:none;animation:none}
  .prod-media img{transform:none;transition:none}
}