/* Adorable Stuff — public website design system (blush identity, phone-first) */
/* Palette moved to public/site-tokens.css so the standalone pages can share it.
   Loaded alongside this file by partials/site-head.ejs. */

/* PRICE / NUMBER TYPE — Apple's approach: the system font (SF Pro on Apple devices), with
   TABULAR figures so digits align, tight tracking and a medium weight. Serif Playfair on a
   rupee amount looked ornamental and slightly off; numbers want a neutral, confident face. */
:root{
  --font-price:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"Karla",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.serif{font-family:"Playfair Display",Georgia,serif;}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(253,251,248,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hd-in{max-width:1120px;margin:0 auto;padding:.7rem 1.1rem;display:flex;align-items:center;gap:.9rem;}
.hd-brand{font-family:"Playfair Display",Georgia,serif;letter-spacing:.13em;font-weight:600;font-size:1.02rem;white-space:nowrap;}
.hd-brand small{display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:.02em;font-size:.62rem;color:var(--soft);}
.hd-search{flex:1;display:flex;max-width:430px;}
.hd-search input{flex:1;border:1.5px solid var(--line);border-right:none;border-radius:100px 0 0 100px;padding:.5rem .95rem;font:inherit;font-size:.88rem;background:#fff;outline:none;min-width:0;}
.hd-search input:focus{border-color:var(--blush);}
.hd-search button{border:none;background:var(--blush);color:#fff;border-radius:0 100px 100px 0;padding:.5rem .95rem;font-weight:800;cursor:pointer;}
.hd-nav{display:flex;gap:1.1rem;align-items:center;font-size:.9rem;font-weight:700;}
.hd-nav a.on{color:var(--rose);}
.hd-cta{background:var(--blush);color:#fff;border-radius:100px;padding:.5rem 1.05rem;font-size:.84rem;font-weight:800;white-space:nowrap;}
.hd-cta:hover{background:var(--rose);}
@media(max-width:760px){ .hd-nav .hide-m{display:none;} .hd-brand{font-size:.92rem;} }

/* second row nav (categories) */
.hd2{border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hd2::-webkit-scrollbar{display:none;}
.hd2-in{max-width:1120px;margin:0 auto;padding:.45rem 1.1rem;display:flex;gap:.45rem;white-space:nowrap;}
.hd2 a{font-size:.78rem;font-weight:700;color:var(--soft);border:1px solid var(--line);border-radius:100px;padding:.28rem .75rem;}
.hd2 a.on,.hd2 a:hover{color:var(--rose);border-color:var(--blush);background:var(--cream2);}

/* preview ribbon (team-only, pre-launch) */
.pvbar{background:#211A33;color:#fff;text-align:center;font-size:.8rem;padding:.45rem .8rem;}
.pvbar b{color:#EFE9F8;}
.pvbar a{color:#B9A7D6;font-weight:800;text-decoration:underline;}

/* ---------- shared bits ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 1.1rem;}
.crumb{font-size:.78rem;color:var(--soft);margin:1rem 0 .4rem;}
.crumb a{color:var(--rose);font-weight:700;}
.sec-t{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(1.3rem,3.5vw,1.7rem);}
.sec-sub{color:var(--soft);font-size:.9rem;margin-top:.2rem;}
.btn{display:inline-block;border-radius:100px;padding:.72rem 1.5rem;font-weight:800;font-size:.92rem;border:none;cursor:pointer;transition:transform .18s;}
.btn:hover{transform:translateY(-2px);}
.btn-p{background:var(--blush);color:#fff;box-shadow:0 10px 24px rgba(217,137,155,.32);}
.btn-p:hover{background:var(--rose);}
.btn-o{background:#fff;color:var(--ink);border:1.5px solid rgba(61,54,48,.16);}
.btn-g{background:#193c1e0d;color:#2c5e35;border:1.5px solid #9DB39A;}
.chip{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:.2rem .6rem;font-size:.72rem;font-weight:700;color:var(--soft);}
.pill-tag{position:absolute;top:.65rem;left:.65rem;background:rgba(255,255,255,.94);color:var(--rose);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.26rem .6rem;border-radius:100px;backdrop-filter:blur(6px);}

/* ---------- product cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.9rem;margin:1.1rem 0 2rem;}
@media(min-width:700px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.1rem;} }
.pc{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 5px 18px rgba(61,54,48,.05);transition:transform .22s,box-shadow .22s;position:relative;}
@media(hover:hover){ .pc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(61,54,48,.11);} }
.pc-img{aspect-ratio:1/1;background:#F5EFEA;overflow:hidden;position:relative;}
.pc-img img{width:100%;height:100%;object-fit:cover;}
.pc-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  background:linear-gradient(160deg,#F4EFFB,#EAE4F6);color:var(--rose);}
.pc-ph i{font-style:normal;font-size:2rem;}
.pc-ph span{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C9A0AB;}
.pc-b{padding:.65rem .75rem .8rem;display:flex;flex-direction:column;gap:.25rem;flex:1;}
.pc-n{font-weight:700;font-size:.85rem;line-height:1.35;}
.pc-f{font-size:.68rem;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.pc-p{margin-top:auto;font-family:var(--font-price);font-weight:600;font-size:1rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--rose);}
.pc-p small{font-family:"Karla",sans-serif;font-weight:700;color:var(--soft);font-size:.7rem;}

/* ---------- footer ---------- */
.ft{background:#2E2622;color:#EFE6DE;margin-top:3rem;}
.ft-in{max-width:1120px;margin:0 auto;padding:2.4rem 1.1rem 1.4rem;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.ft h4{font-family:"Playfair Display",Georgia,serif;font-size:.98rem;margin-bottom:.6rem;color:#fff;}
.ft a{display:block;color:#CDBFB4;font-size:.85rem;padding:.16rem 0;}
.ft a:hover{color:#EFE9F8;}
.ft .brandcol p{color:#CDBFB4;font-size:.85rem;line-height:1.6;}
.ft-pay{font-size:.78rem;color:#A8988B;margin-top:.6rem;}
.ft-bot{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1rem;color:#A8988B;font-size:.78rem;}
.ft-bot a{color:#CDBFB4;display:inline;padding:0;}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden;}
.hero-img{position:absolute;inset:0;}
.hero-img img{width:100%;height:100%;object-fit:cover;}
/* The hero photo is a keepsake held up to the sky — beautiful, but busy, and on a phone the
   headline and body copy landed straight on the couple's faces at ~2:1 contrast. A two-stop
   wash left the middle band almost clear, which is exactly where the text sits. Three stops,
   darker through the middle and heavy at the base where the buttons are. */
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,22,42,.30) 0%,rgba(30,22,42,.52) 42%,rgba(30,22,42,.78) 100%);}
/* The hero photo is 4:3. Stretched across a desktop window the band is roughly 3:1, so the
   default centre crop put the couple's faces directly behind the headline and gave the
   right third over to a hand. Taller band + a slightly higher crop + a soft pool of shade
   under the type: the photo still reads, and so does the sentence on top of it. */
@media(min-width:900px){
  .hero-in{padding:5.4rem 1.1rem 5rem;}
  .hero-img img{object-position:50% 40%;}
  .hero-img::after{background:
    radial-gradient(120% 88% at 50% 54%, rgba(30,22,42,.60) 0%, rgba(30,22,42,.30) 58%, rgba(30,22,42,.16) 100%),
    linear-gradient(180deg, rgba(30,22,42,.30), rgba(30,22,42,.52));}
}
.hero-in{position:relative;max-width:1120px;margin:0 auto;padding:4.6rem 1.1rem 3.6rem;color:#fff;text-align:center;}
.hero .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#EFE9F8;}
.hero h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(1.9rem,6.4vw,3.1rem);line-height:1.15;margin:.7rem 0;}
.hero p{max-width:32rem;margin:0 auto;font-size:.98rem;color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(30,22,42,.5);}
.hero h1{text-shadow:0 2px 18px rgba(30,22,42,.4);}
.hero .btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem;}
/* Secondary action on a photo: a translucent pane with a hairline, not a solid white slab. */
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
@media (hover:hover) and (pointer:fine){ .btn-glass:hover{background:rgba(255,255,255,.24);border-color:#fff;} }
.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:720px;margin:-1.6rem auto 0;position:relative;gap:.7rem;padding:0 1.1rem;}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;padding:.9rem .5rem;box-shadow:0 12px 30px rgba(61,54,48,.08);}
.stat b{font-family:"Playfair Display",Georgia,serif;font-size:1.25rem;color:var(--rose);display:block;}
.stat span{font-size:.72rem;color:var(--soft);font-weight:700;}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;margin:1.1rem 0;}
@media(min-width:700px){ .tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));} }
/* Caption used to be two absolutely-positioned elements pinned to fixed offsets from the
   bottom (.65rem and 2.35rem). A one-line name fitted; a two-line name ("Full Varmala
   Teakwood", "Teakwood Frame") grew upward and printed straight through the price. The
   caption is now a normal flow block anchored to the bottom, so any number of lines stacks
   instead of collides. */
.tile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1.05;
  display:flex;flex-direction:column;justify-content:flex-end;}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s;}
@media(hover:hover){ .tile:hover img{transform:scale(1.06);} }
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(30,22,42,.72));}
.tile b{position:relative;z-index:1;color:#fff;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1rem;line-height:1.25;padding:0 .8rem .7rem;}
.tile span{position:relative;z-index:1;color:#EFE9F8;font-size:.72rem;font-weight:800;padding:0 .8rem .15rem;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.1rem 0;}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem;}
.step i{font-style:normal;font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;color:var(--gold);}
.step b{display:block;margin:.3rem 0 .2rem;}
.step span{font-size:.83rem;color:var(--soft);line-height:1.5;}
.band{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.2rem 0;margin:2.4rem 0;}
.assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.assure div b{display:block;font-family:"Playfair Display",Georgia,serif;}
.assure div span{font-size:.85rem;color:var(--soft);}

/* ---------- PDP ---------- */
.pdp{display:grid;gap:1.6rem;margin:1rem 0 2rem;}
@media(min-width:860px){ .pdp{grid-template-columns:1.05fr 1fr;align-items:start;} }
.pdp-img{border-radius:20px;overflow:hidden;border:1px solid var(--line);position:sticky;top:76px;}
.pdp-img img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pdp-ph{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(160deg,#F4EFFB,#EAE4F6);color:var(--rose);}
.pdp-ph i{font-style:normal;font-size:4rem;}
.pdp-ph span{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#C9A0AB;}
.pdp h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(1.4rem,4vw,1.9rem);line-height:1.25;}
.pdp .fam{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);}
.pdp .price{font-family:var(--font-price);font-size:1.55rem;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin:.5rem 0 .1rem;}
.pdp .price small{font-family:"Karla",sans-serif;font-size:.8rem;font-weight:700;color:var(--soft);}
.pdp .gst{font-size:.75rem;color:var(--soft);}
.pdp .blurb{color:var(--soft);font-size:.95rem;margin:.8rem 0;}
.sizes-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 .2rem;}
.sizes-row a{border:1.5px solid var(--line);border-radius:12px;padding:.4rem .7rem;font-size:.78rem;font-weight:700;}
.sizes-row a.on{border-color:var(--rose);color:var(--rose);background:var(--cream2);}
.pdp .ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0;}
.infocard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;margin:.5rem 0;font-size:.86rem;}
.infocard b{display:block;font-size:.8rem;}
.infocard span{color:var(--soft);}
details.acc{border:1px solid var(--line);border-radius:14px;background:#fff;margin:.5rem 0;}
details.acc summary{cursor:pointer;padding:.8rem 1rem;font-weight:800;font-size:.88rem;list-style:none;display:flex;justify-content:space-between;}
details.acc summary::after{content:"+";color:var(--rose);font-size:1.1rem;}
details.acc[open] summary::after{content:"–";}
details.acc .acc-b{padding:0 1rem .9rem;font-size:.87rem;color:var(--soft);}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:rgba(253,251,248,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));display:flex;gap:.6rem;z-index:60;}
.sticky-cta .btn{flex:1;text-align:center;padding:.8rem .5rem;}
@media(min-width:860px){ .sticky-cta{display:none;} }
.pad-b{padding-bottom:4.6rem;} @media(min-width:860px){ .pad-b{padding-bottom:0;} }

/* ---------- misc pages ---------- */
.prose{max-width:720px;margin:1rem auto 2.5rem;}
.prose h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.7rem;margin-bottom:.5rem;}
.prose h2{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.12rem;color:var(--rose);margin:1.4rem 0 .4rem;}
.prose p{margin:.55rem 0;font-size:.95rem;}
.empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:2rem;text-align:center;color:var(--soft);margin:1rem 0 2rem;}

/* ─────────────────────────────────────────────────────────────────────────────
   PHONE PASS (2026-07-23). Most visitors arrive from an Instagram/WhatsApp link
   on a phone, so these are correctness fixes, not polish:
     1. the header used to overflow (597px of content on a 375px screen), which
        made the WHOLE page scroll sideways;
     2. every input under 16px makes iOS zoom the page on focus — a jarring jump
        mid-form that loses people on the reserve flow;
     3. tap targets below ~44px are hard to hit accurately with a thumb.
   ───────────────────────────────────────────────────────────────────────────── */

/* iOS refuses to zoom on focus only when the font is >=16px. Applies to every
   form control on the public site, including the ones inside the chat widget. */
input, select, textarea { font-size: 16px; }

@media (max-width: 760px) {
  /* header: brand + CTA on row one, search full-width on row two */
  .hd-in { flex-wrap: wrap; row-gap: .55rem; padding: .6rem .9rem; }
  .hd-brand { flex: 1 1 auto; min-width: 0; }
  .hd-nav { flex: 0 0 auto; gap: .75rem; margin-left: auto; }
  .hd-search { order: 3; flex: 1 0 100%; max-width: none; }
  .hd-search input { font-size: 16px; padding: .55rem .95rem; }
  .hd-cta { padding: .55rem .9rem; }

  /* nothing may push the page wider than the screen */
  html, body { overflow-x: hidden; }
  img, video, svg, table { max-width: 100%; height: auto; }

  /* comfortable thumb targets */
  .hd-nav a, .hd-cta, .btn, .chip, .sizes-row a { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .chip { padding: .5rem 1rem; }
  /* the category row was left out of the list above and sat at 31px — the hardest thing
     on the page to hit, and it is the site's main navigation on a phone */
  .hd2 a { min-height: 38px; display: inline-flex; align-items: center; padding: .3rem .85rem; }
}

/* The category row scrolls sideways, but a row that simply ends at the screen edge reads as
   a clipped layout rather than "there is more". Fade the last few pixels so it reads as a
   scroller — the fade is painted on the wrapper, so it never covers a tappable chip. */
@media (max-width: 900px) {
  .hd2 { position: relative;
    -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
}

/* A pair of buttons: side by side when there is room, and — crucially — one shared width
   once they stack. Two different-width pills centred one above the other is the single
   detail that makes an otherwise finished page look thrown together. */
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;}
@media (max-width: 560px) {
  .hero .btns, .btnrow { flex-direction: column; align-items: stretch; gap: .55rem; }
  .hero .btns .btn, .btnrow .btn { width: 100%; }
  /* the PDP's own action pair has the same problem */
  .pdp .ctas { flex-direction: column; align-items: stretch; }
  .pdp .ctas .btn { width: 100%; }
}
/* Desktop tracking on a phone pushed the last word of the eyebrow onto a line by itself. */
@media (max-width: 520px) {
  .hero .eyebrow { letter-spacing: .12em; font-size: .66rem; text-wrap: balance; }

  /* Three stats across a 390px screen leaves ~109px a card — enough for "398 / Indian
     cities" but not for "Since 2023 / photo approval, always", which broke the number
     itself onto two lines. Two up top and the wordy one full-width below. */
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
  .stats .stat:last-child { grid-column: 1 / -1; display: flex; align-items: baseline;
    justify-content: center; gap: .45rem; }
  .stats .stat:last-child b { display: inline; }
}

/* see the note in style.css — [hidden] must win over the class's display rule */
.btn[hidden]{display:none;}


/* ---------- About: the trust page ---------- */
.about .ab-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose-mid);margin-bottom:.4rem;}
.about h1{margin-bottom:.8rem;}
.about .ab-lede{font-size:1.06rem;line-height:1.7;color:var(--ink);max-width:36rem;}
/* Numbered steps carry the weight of the page, so they get real structure rather than a bare
   list: the number is the anchor the eye returns to when scanning "what happens to my flowers". */
.about .ab-steps{list-style:none;counter-reset:s;margin:1.1rem 0 0;padding:0;display:flex;
  flex-direction:column;gap:.85rem;}
.about .ab-steps li{counter-increment:s;position:relative;padding-left:2.9rem;line-height:1.65;}
.about .ab-steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;
  width:2rem;height:2rem;border-radius:50%;background:var(--blush-soft);color:var(--rose);
  font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;}
.about .ab-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.6rem 0 .4rem;}
.about .ab-facts div{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1rem .7rem;text-align:center;}
.about .ab-facts b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;color:var(--rose);}
.about .ab-facts span{font-size:.76rem;color:var(--soft);line-height:1.4;}
.about .ab-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;}
@media(max-width:560px){
  /* three facts at 390px leaves ~105px each and every label wrapped to three ragged lines */
  .about .ab-facts{grid-template-columns:repeat(2,1fr);}
  .about .ab-facts div:last-child{grid-column:1 / -1;display:flex;justify-content:center;
    align-items:baseline;gap:.5rem;}
  .about .ab-cta{flex-direction:column;align-items:stretch;}
  .about .ab-cta .btn{width:100%;text-align:center;}
  .about .ab-steps li{padding-left:2.6rem;}
}


/* ==========================================================================
   TOUCH — how a press should FEEL on a phone.
   The storefront had none of this: no tap-highlight suppression, no press
   state, and — the one that matters most — no touchstart listener, which
   means iOS Safari NEVER applies :active. That is why every button felt dead
   under a thumb no matter how it looked.
   Timings follow the platforms: down is fast enough to feel instant (~90ms),
   release decelerates (~220ms) so it settles rather than snapping back.
   ========================================================================== */
:root{
  --t-down:90ms;
  --t-up:220ms;
  --t-press:cubic-bezier(.2,0,.2,1);        /* down — quick, no overshoot */
  --t-release:cubic-bezier(.22,1,.36,1);    /* up — decelerate, settles */
}

/* Everything a finger can hit. */
.btn,.btn-p,.btn-o,.btn-glass,.chip,.pill,.sn-cta,.hd-cta,.buy,.tab,.m3-card,
.pc,.prod,button,[role="button"]{
  -webkit-tap-highlight-color:transparent;   /* the grey iOS flash is late and ugly — we draw our own */
  touch-action:manipulation;                 /* removes the 300ms double-tap-zoom wait */
  -webkit-touch-callout:none;                /* no "Save Image / Copy" sheet on a long press */
  user-select:none;-webkit-user-select:none; /* a long press should not select the label text */
}

/* The press itself. Scale, not colour: it reads as physical depression and it
   works on a photo, a white card and a coloured pill alike. */
.btn,.btn-p,.btn-o,.btn-glass,.chip,.pill,.sn-cta,.hd-cta,.buy{
  transition:transform var(--t-up) var(--t-release),
             box-shadow var(--t-up) var(--t-release),
             background-color var(--t-up) var(--t-release),
             filter var(--t-up) var(--t-release);
}
.btn:active,.btn-p:active,.btn-o:active,.btn-glass:active,.chip:active,
.pill:active,.sn-cta:active,.hd-cta:active,.buy:active{
  transform:scale(.96);
  filter:brightness(.97);
  transition-duration:var(--t-down);
  transition-timing-function:var(--t-press);
}

/* The JS-driven twin of :active (see site-foot.ejs) — same look, but it survives the
   moment a tap navigates away. */
.btn.is-pressed,.btn-p.is-pressed,.btn-o.is-pressed,.btn-glass.is-pressed,.chip.is-pressed,
.pill.is-pressed,.sn-cta.is-pressed,.hd-cta.is-pressed,.buy.is-pressed{
  transform:scale(.96);filter:brightness(.97);
  transition-duration:var(--t-down);transition-timing-function:var(--t-press);
}
.pc.is-pressed,.prod.is-pressed{
  transform:scale(.985);
  transition-duration:var(--t-down);transition-timing-function:var(--t-press);
}

/* Cards depress LESS than buttons — a big surface scaling as hard as a pill
   looks broken. Apple uses roughly half the travel on large targets. */
.pc,.prod,.m3-card,.luxe-card{
  transition:transform var(--t-up) var(--t-release), box-shadow var(--t-up) var(--t-release);
}
.pc:active,.prod:active,.m3-card:active,.luxe-card:active{
  transform:scale(.985);
  transition-duration:var(--t-down);
  transition-timing-function:var(--t-press);
}

/* Hover effects belong to pointers only. On a touch screen :hover STICKS after
   a tap, so a card stays lifted until you tap elsewhere — the single most
   common reason a mobile site feels broken. */
@media (hover:none){
  .pc:hover,.prod:hover,.m3-card:hover,.luxe-card:hover{transform:none;box-shadow:inherit;}
}

/* Focus for keyboard users, invisible to mouse/touch users. */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;border-radius:inherit;
}

/* Minimum 44x44 — Apple's HIG figure, and the reason mis-taps happen. */
@media (max-width:760px){
  .btn,.btn-p,.btn-o,.btn-glass,.chip,.pill,.sn-cta,.hd-cta,.buy,.tab{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
}

/* iPhone: keep fixed bars above the home indicator. */
.bar,.tabs,.glass-nav{
  padding-bottom:calc(0.7rem + env(safe-area-inset-bottom,0px));
}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-p,.btn-o,.btn-glass,.chip,.pill,.sn-cta,.hd-cta,.buy,
  .pc,.prod,.m3-card,.luxe-card{transition:none;}
  .btn:active,.chip:active,.pill:active,.pc:active,.prod:active{transform:none;filter:brightness(.95);}
}


/* ==========================================================================
   PHONE: app-style storefront.
   The keepsake grid becomes a swipeable rail, and a tab bar replaces the
   single sticky CTA — the shape people already know from every shopping app
   on their phone. Desktop is untouched.
   ========================================================================== */
@media (max-width:760px){

  /* --- keepsake tiles: grid -> horizontal rail with snap --- */
  .tiles{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:2px 16px 10px;margin:0 -16px;                 /* bleed to the screen edge */
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain;                        /* a swipe never triggers browser-back */
  }
  .tiles::-webkit-scrollbar{display:none;}
  .tile{
    flex:0 0 168px;scroll-snap-align:start;
    background:#fff;border-radius:20px;padding:10px 10px 14px;
    box-shadow:0 1px 2px rgba(46,39,64,.06), 0 2px 8px rgba(46,39,64,.05);
    display:block;text-decoration:none;
  }
  /* The desktop tile overlays its text ON the photo (img is position:absolute, ::after is a
     scrim, b/span sit on top). The app card is the opposite: photo, then text BELOW it. All
     four of those have to be undone or the label lands on the picture. */
  .tile{position:static;aspect-ratio:auto;overflow:visible;}
  .tile::after{display:none;}
  .tile img{position:static;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#F4F0FB;}
  /* order flipped: name first, then price — the reference reads name > price */
  .tile b{display:block;position:static;padding:0;order:1;font-family:Karla,system-ui,sans-serif;
    font-size:.9rem;font-weight:700;margin:10px 2px 2px;line-height:1.3;color:var(--ink);letter-spacing:-.01em;}
  .tile span{display:block;position:static;padding:0;order:2;font-size:.85rem;font-weight:800;
    color:var(--rose);margin:0 2px;}
  .tile{display:flex;flex-direction:column;}

  /* the rail needs a hint that it scrolls — a peek of the next card does it
     better than any arrow, which is why every shopping app leaves one */
  .tiles::after{content:"";flex:0 0 4px;}

  /* --- bottom tab bar, replacing the lone sticky button --- */
  .tabbar{
    position:fixed;left:10px;right:10px;bottom:10px;z-index:60;
    display:flex;justify-content:space-around;align-items:center;
    padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(231,224,242,.9);border-radius:24px;
    box-shadow:0 2px 6px rgba(46,39,64,.07), 0 10px 26px rgba(46,39,64,.09);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    text-decoration:none;color:var(--soft);font-size:.66rem;font-weight:700;
    padding:6px 12px;border-radius:100px;min-width:60px;
    transition:color var(--t-up) var(--t-release), background var(--t-up) var(--t-release);
  }
  .tabbar a svg{width:22px;height:22px;}
  .tabbar a.on{color:var(--rose);background:var(--blush-soft);}
  .tabbar a:active{transform:scale(.94);transition-duration:var(--t-down);}
  .tabbar a.cta{background:var(--rose);color:#fff;padding:8px 16px;}
  body{padding-bottom:118px;}   /* the rail's card labels were being clipped by the tab bar */
}
@media (min-width:761px){ .tabbar{display:none;} }


/* ==========================================================================
   PHONE: strip the homepage back to the app shape.
   The Google reference works because of what it LEAVES OUT — a photo, one
   button, then cards. Ours was still leading with a wordmark bar, an eyebrow,
   a serif headline, a paragraph, two CTAs and three stat cards before the
   customer reached a single product. That is the "too much on the screen".
   Desktop keeps all of it; only the phone is reduced.
   ========================================================================== */
@media (max-width:760px){

  /* --- the hero becomes a photo with ONE action on it --- */
  .hero{min-height:0;border-radius:0;margin:0;}
  .hero-img{position:relative;inset:auto;height:min(44vh,330px);}
  .hero-img img{height:100%;width:100%;object-fit:cover;}
  /* the heavy scrim existed to make a headline readable — there is no headline now */
  .hero-img::after{background:linear-gradient(180deg,rgba(30,22,42,0) 55%,rgba(30,22,42,.32));}

  .hero-in{position:absolute;left:0;right:0;bottom:0;padding:0 0 18px;text-align:center;}
  /* everything the reference does without */
  .hero .eyebrow,.hero h1,.hero p{display:none;}
  .hero .btns{justify-content:center;margin:0;}
  .hero .btns .btn-glass{display:none;}          /* one action, not two */
  /* An ancestor rule sets flex-direction:column + align-items:stretch for the two-button
     hero. With stretch, a flex child fills the cross axis no matter what width:auto says —
     which is why the pill kept rendering as a full-width bar. Reset both. */
  .hero .btns{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 16px;}
  .hero .btns .btn-p{
    flex:0 0 auto;width:auto;background:#fff;color:var(--rose);font-size:1rem;padding:14px 34px;
    box-shadow:0 2px 10px rgba(46,39,64,.18), 0 8px 26px rgba(46,39,64,.16);
  }

  /* --- the three stat cards were the second wall; make them one quiet line --- */
  .stats{display:flex;gap:0;justify-content:center;align-items:center;
    margin:14px 16px 0;padding:0;background:none;border:none;box-shadow:none;}
  .stats .stat{background:none;border:none;box-shadow:none;padding:0 10px;text-align:center;flex:1;}
  .stats .stat b{font-size:.98rem;display:block;color:var(--ink);font-family:inherit;font-weight:800;}
  .stats .stat span{font-size:.68rem;color:var(--soft);line-height:1.3;display:block;}
  /* "photo approval, always" is three words too many at a third of 390px */
  .stats .stat:last-child span{font-size:.66rem;}

  /* --- section headings: app-sized, sans, tight --- */
  .sec-t{font-family:Karla,system-ui,sans-serif;font-size:1.42rem;font-weight:700;
    letter-spacing:-.02em;margin:26px 16px 2px;}
  .sec-sub{font-size:.86rem;color:var(--soft);margin:0 16px 12px;}

  /* the top bar loses its second link — the tab bar carries navigation now */
  .hd-nav a.hide-m,.hd-nav a[href="/my"]{display:none;}
}


/* ==========================================================================
   PHONE: the actual reduction.
   Counted on a 390px screen: THREE "Reserve" buttons at once (header, hero,
   tab bar), a three-column stat row, and a section subtitle — before a single
   product. The Google reference shows a photo, one button, and cards. That is
   the whole difference, and it is subtraction, not styling.
   ========================================================================== */
@media (max-width:760px){

  /* 1. The header keeps the wordmark only. The tab bar already carries Reserve,
        and two identical buttons 500px apart is not a choice, it is noise. */
  .hd-nav .hd-cta,a.hd-cta{display:none;}     /* an earlier rule sets display on .hd-nav .hd-cta */
  .hd{padding-top:.55rem;padding-bottom:.55rem;}
  .hd-brand small{display:none;}          /* "by Aastha Arora" repeats in the footer */

  /* 2. The stat row goes. Three numbers in 6pt type is a fact-sheet, not a
        storefront — and the same three appear again further down the page. */
  .stats{display:none;}

  /* 3. Section subtitles go. The heading already says it. */
  .sec-sub{display:none;}
  .sec-t{margin-bottom:12px;}

  /* 4. Give the hero photo the room the cuts just freed, and let the one
        remaining button breathe under it rather than sit on the image. */
  .hero-img{height:min(52vh,400px);}
}


/* ---------- cookie consent ---------- */
.fs-consent[hidden]{display:none;}     /* author display would otherwise beat [hidden] */
.fs-consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-float);
  padding:14px 16px;animation:fsConsentIn .35s var(--ease-luxe);}
@keyframes fsConsentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fs-consent-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:1000px;margin:0 auto;}
.fs-consent p{margin:0;flex:1;min-width:220px;font-size:.86rem;color:var(--ink);line-height:1.45;}
.fs-consent a{color:var(--rose);text-decoration:underline;}
.fs-consent-btns{display:flex;gap:8px;flex:0 0 auto;}
/* Decline carries the same visual weight as Allow — a banner where refusing is hard is not
   consent. Only the fill differs, never the size or prominence. */
.fs-c-btn{border:1px solid var(--rose);background:var(--rose);color:#fff;border-radius:100px;
  padding:10px 22px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;min-height:44px;
  transition:transform .2s var(--ease-luxe), box-shadow .2s var(--ease-luxe);}
.fs-c-btn.ghost{background:transparent;color:var(--rose);}
.fs-c-btn:active{transform:scale(.96);}
.fs-c-btn:focus-visible{outline:2px solid var(--rose);outline-offset:3px;}
@media(max-width:620px){
  /* clear the tab bar, and stack so both buttons stay full-size and equally reachable */
  .fs-consent{bottom:calc(84px + env(safe-area-inset-bottom,0px));}
  .fs-consent-btns{width:100%;}
  .fs-c-btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){ .fs-consent{animation:none;} }

/* product page: the item number, quotable by customers when they DM/WhatsApp */
.item-no{font-size:var(--fs-sm);color:var(--soft);margin:.15rem 0 .6rem;}
.item-no b{color:var(--rose);letter-spacing:.02em;}
.item-no span{opacity:.8;}
.pc-item{display:block;font-size:var(--fs-2xs);color:var(--soft);margin-top:2px;letter-spacing:.03em;}