/* ---------------------------------------------------------------------------
   Type, served from our own edge in Kolkata rather than from Google.
   Two fewer third-party round trips on a phone on mobile data, no outside
   dependency for the thing the whole page is made of, and nothing about the
   visitor leaves for another company. Latin from Inter, Devanagari from Mukta;
   each weight is one file of about 24 KB, and Hindi is only fetched by a
   browser that actually has Hindi to draw.
   --------------------------------------------------------------------------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20B9,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20B9,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20B9,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20B9,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Fraunces is the story voice and nothing else — the catalogue stays in Inter. Latin
   range only, so a reader on the Hindi side never downloads a font with no Hindi in it. */
@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fraunces-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+20B9,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+20B9,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Mukta;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/mukta-400.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:Mukta;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/mukta-500.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:Mukta;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/mukta-600.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:Mukta;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/mukta-700.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

/* ============================================================================
   Design tokens.
   The brief asks for "established but modern, premium but approachable, festive
   but not gaudy". Gaudy is what happens when four accent colours, heavy shadows
   and a rounded display face all compete, so:
     · ONE brand colour, used only for what you can act on. Gold only for badges.
       Green only for the phone and WhatsApp, where it is a platform convention.
     · One typeface. Hierarchy comes from size and weight, not from a second face.
     · Hairline borders instead of large shadows — the way current phone apps read.
     · Everything on a 4px rhythm.
   ============================================================================ */
:root{
  color-scheme: light;
  /* surfaces — warm off-white, never grey: this is a festive Indian brand */
  --bg:#FAF7F4; --card:#FFFFFF; --line:#ECE5DF; --line-soft:#F3EDE8;
  /* ink — three steps, enough for any hierarchy */
  --ink:#17120F; --ink2:#5E534B; --ink3:#948880;
  /* brand — action, and nothing else */
  --brand:#8A1C2B; --brand-deep:#6A1320; --brand-soft:#FBF0F1;
  /* festive accent — badges only, never a background you have to read on */
  --gold:#8A5D00; --gold-soft:#FBF1DC; --gold-mark:#C9A96B;
  /* the phone and WhatsApp, where green means something */
  --green:#1B8A4C; --green-deep:#146B3A; --green-soft:#E6F4EC;
  --r-sm:8px; --r:12px; --r-lg:16px;
  /* one step of lift, and one for things that float above the page */
  --sh1:0 1px 2px rgba(23,18,15,.06);
  --sh2:0 6px 20px -6px rgba(23,18,15,.18),0 1px 2px rgba(23,18,15,.06);
  /* Inter draws the Latin, Mukta the Devanagari — one voice across both scripts. */
  --head:"Inter","Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter","Mukta",system-ui,-apple-system,"Segoe UI","Noto Sans Devanagari",sans-serif;
  /* One exception to the one-typeface rule, and only outside the catalogue: the story
     is read, not scanned, and a serif is how you tell a reader that. Mukta carries the
     Hindi side, since Fraunces has no Devanagari. */
  --story:"Fraunces","Mukta",Georgia,"Times New Roman",serif;
  --navh:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.2;letter-spacing:-.011em}
.num{font-variant-numeric:tabular-nums}
.app{max-width:1100px;margin:0 auto;padding-bottom:calc(var(--navh) + 80px + env(safe-area-inset-bottom,0px))}
.pad{padding-inline:16px}
.view{animation:fade .18s ease both}
.app[data-anim="0"] .view{animation:none}
@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--card);box-shadow:0 1px 0 var(--line)}
.topbar .row{display:flex;align-items:center;gap:10px;padding:10px 16px}
/* The Selection mark stands on its own in the header — no tile. Eight possibilities in
   gold, the chosen one in the brand colour. */
.dinkus.brandmark{width:41px;flex:none}
.dinkus.ondark{fill:#D8BE86}
.dinkus.ondark .chosen{fill:#F6EDE2}
/* SELECT is a companion to the name, never louder than it. */
.sel{display:block;font-family:var(--head);font-style:normal;font-weight:600;font-size:8.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:2px 0 3px;line-height:1}
.where{min-width:0;margin-right:auto}
.where b{display:block;font-family:var(--head);font-weight:600;font-size:16px;line-height:1.15;letter-spacing:-.012em}
/* No status dot here — see openLine(). The nine-dot mark sits directly above this line, so a
   circle of the same size and colour on the same grid line read as a tenth dot. The state is
   carried by the colour of the words instead, which it always was. */
.where span{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink2);white-space:nowrap;min-width:0}
.where .hrs{font-style:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}
.where span b{display:inline;font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--green-deep)}
.where span svg{width:13px;height:13px;flex:none;color:var(--brand)}
.where span b.shut{color:var(--ink2);font-weight:600}
.where span b.soon{color:var(--gold);font-weight:700}
.callbtn{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none}
.callbtn svg{width:17px;height:17px}
.callbtn:active{transform:scale(.97)}
.btn.callfoot{flex:none;border:1.5px solid var(--green);color:var(--green-deep);background:var(--green-soft);padding:0 16px}
.talk{display:flex;justify-content:center;align-items:center;gap:4px 8px;flex-wrap:wrap;font-size:14.5px;color:var(--ink2);text-decoration:none;text-align:center}
.talk.box{padding:14px 16px}
.talk b{display:inline-flex;align-items:center;gap:5px;color:var(--green-deep)}
.talk svg{width:16px;height:16px}
.backbar{display:flex;align-items:center;gap:8px;padding:10px 12px}
.backbar h1{font-size:18px;font-weight:600;margin-right:auto;letter-spacing:-.014em}
.iconbtn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.iconbtn:active{background:var(--bg)}
.iconbtn svg{width:24px;height:24px}

/* ---------- search ---------- */
.searchbox{text-decoration:none;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 13px;height:46px;box-shadow:none;width:100%;text-align:left;color:var(--ink3)}
.searchbox svg{width:18px;height:18px;flex:none;color:var(--ink3)}
.searchbox input{border:0;outline:0;background:none;flex:1;min-width:0;height:100%;font-size:15px;color:var(--ink)}
.searchbox .ph{flex:1;overflow:hidden;white-space:nowrap}
.search-wrap{padding:12px 16px 4px;background:var(--card)}

/* ---------- home blocks ---------- */
.greet{padding:16px 16px 0;font-size:14.5px;color:var(--ink2)}
.greet b{color:var(--ink);font-weight:700}
.sec{padding-top:22px}
/* A section on its own surface. Space alone was too weak a signal on a long page —
   you could not see where one idea ended and the next began.
   The panel is inset to the same gutter as everything else, so its edges line up with the
   cards above it and the tiles below it instead of running past them to the screen edge. */
.sec.onwhite{background:var(--card);border-radius:18px;margin:10px 16px 0;
  padding-top:20px;padding-bottom:18px}
.sec.onwhite + .sec{padding-top:24px}
/* Inside the panel the gutter is measured from the panel, not the screen. */
.sec.onwhite .sec-h,.sec.onwhite .divider,.sec.onwhite .rail,.sec.onwhite .types{
  padding-left:13px;padding-right:13px}
.sec.onwhite .rail{scroll-padding-inline:13px}
/* On white, the budget rings take the paper colour so they stay visible. */
.sec.onwhite .budget .circle{background:var(--bg);border-color:var(--line)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 16px 10px}
.sec-h h2{font-size:17px;font-weight:600;letter-spacing:-.016em}
.sec-h .more{font-weight:600;font-size:13.5px;color:var(--brand);white-space:nowrap}
.divider{display:flex;align-items:center;gap:12px;padding:0 16px 10px;color:var(--ink3);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}

.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:2px 16px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}

/* banners */
.banner{text-decoration:none;width:min(84vw,420px);height:146px;border-radius:var(--r-lg);position:relative;overflow:hidden;color:#fff;text-align:left;padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--sh1)}
.banner h3{font-size:19px;font-weight:600;letter-spacing:-.018em;max-width:64%;text-wrap:balance}
.banner p{margin:5px 0 0;font-size:13px;opacity:.88;max-width:62%;line-height:1.35}
.banner .cta{align-self:flex-start;background:#fff;color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;font-size:13.5px}
.banner svg.deco{position:absolute;right:-10px;bottom:-8px;width:52%;height:auto}
.b1{background:linear-gradient(120deg,#7A1524 0%,#A8283A 60%,#C2452F 100%)}
.b2{background:linear-gradient(120deg,#0F5A4A 0%,#18806A 100%)}
.b3{background:linear-gradient(120deg,#3B2A6B 0%,#5B3F97 100%)}
.dots{display:flex;justify-content:center;gap:6px;padding-top:4px}
.dots i{width:6px;height:6px;border-radius:3px;background:#D8CFCB;transition:width .2s}
.dots i.on{width:18px;background:var(--brand)}

/* budget tiles */
.budget{width:88px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.budget .circle{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff 0%,var(--gold-soft) 62%,#F6E5C2 100%);border:1px solid #F1E2C4;box-shadow:var(--sh1);font-family:var(--head);font-weight:800;color:var(--brand-deep);line-height:1}
.budget .circle small{display:block;font-size:11px;font-weight:600;color:var(--ink2);margin-bottom:2px}
.budget .circle span{font-size:20px}
.budget b{font-size:13px;font-weight:600;line-height:1.2;color:var(--ink)}
.budget em{font-style:normal;font-size:12px;color:var(--ink3);margin-top:-6px}

/* for-whom tiles */
.whom{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px}
@media (max-width:899px){.whom{grid-template-columns:1fr 1fr}}
.wtile{position:relative;min-height:112px;padding-top:44px!important;color:#fff;border-radius:var(--r);overflow:hidden;text-align:left;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sh1);color:var(--ink)}
.wtile b{font-family:var(--head);font-weight:600;font-size:16.5px;line-height:1.12;letter-spacing:-.012em;position:relative;color:#fff}
.wtile span{font-size:12px;color:rgba(255,255,255,.74);position:relative}
.wtile svg{position:absolute;right:10px;top:10px;width:30px;height:30px;color:#E8C98A;opacity:.85}
.w-staff{background:linear-gradient(152deg,#7A1524,#4A0C16)}
.w-clients{background:linear-gradient(152deg,#13423C,#082523)}
.w-vip{background:linear-gradient(152deg,#3F2455,#221232)}
.w-family{background:linear-gradient(152deg,#8A4B12,#552A05)}

/* type tiles */
.types{display:flex;gap:16px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.types::-webkit-scrollbar{display:none}
.types>*{flex:none;width:86px;scroll-snap-align:start}
/* A phone scrolls this row. From tablet up every type fits at once, so it spreads across the
   panel instead of sitting as a short row of small circles against the left edge. (This rule
   used to set grid columns and quietly stopped applying when .types became a flex row.) */
@media (min-width:700px){
  .types{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px 12px;
    overflow-x:visible;scroll-snap-type:none}
  .types>*{width:auto;scroll-snap-align:none}
  .ttile .ph{width:112px;height:112px}
  .ttile b{font-size:14px}
}
.ttile{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.ttile .ph{width:74px;height:74px;border-radius:50%;overflow:hidden;background:var(--card);box-shadow:var(--sh1)}
.ttile .ph svg{width:100%;height:100%;display:block}
.ttile b{font-size:13px;font-weight:600;line-height:1.2}

/* rail product cards
 *
 * Nothing but the badge sits on the photograph. The shade that made a white price readable
 * covered the bottom 42% of every picture, which on a gift box is the tray it stands on and
 * the base of the case — so the price and the ADD button moved underneath it.
 */
.pcard{width:158px;text-align:left;display:flex;flex-direction:column}
.pcard .ph{position:relative;width:158px;height:158px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1);display:block}
.pcard .ph svg{width:100%;height:100%;display:block}
/* Two lines are kept for the name whether or not both are used, AND the price line is pushed
   to the bottom. Either alone is not enough: a one-line name pulls its price 18 px up and a
   row of cards staggers, which is exactly what it did the first time. */
.pcard h3{font-family:var(--body);font-size:14px;font-weight:600;margin-top:8px;letter-spacing:-.006em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.pcard .pfoot{display:flex;align-items:baseline;gap:5px;margin-top:auto;padding-top:5px}
.pcard .pr{font-family:var(--head);font-weight:700;font-size:16px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.pcard .pr small{font-family:var(--body);font-weight:500;font-size:11px;color:var(--ink3);margin-left:3px}
.pcard .addmini{margin-left:auto;align-self:center;flex:none;background:#fff;color:var(--brand);font-weight:700;font-size:12px;border:1px solid #E7BFC5;border-radius:999px;padding:4px 12px;line-height:1.1}
.pcard .addmini[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.codechip{position:absolute;left:8px;top:8px;z-index:1;background:rgba(255,255,255,.92);color:var(--ink);font-size:11.5px;font-weight:700;border-radius:6px;padding:1px 6px;letter-spacing:.03em}

/* help card */
.helpcard{margin:0 16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh1);padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line)}
.helpcard h3{font-size:19px;font-weight:700}
.helpcard p{margin:2px 0 0;font-size:14px;color:var(--ink2)}
.helpcard svg{width:64px;height:64px}

/* ---------- list / filters ---------- */
/* The fade on the right edge is the only thing that tells a thumb there are more filters. */
.fbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--topbar-h,62px));z-index:20;background:var(--bg);padding:10px 0 8px}
.fbar{--fade:linear-gradient(to left,transparent,var(--bg) 22px)}

.fbar::after{content:"";position:absolute;right:0;top:10px;bottom:8px;width:26px;pointer-events:none;background:linear-gradient(to left,var(--bg),rgba(0,0,0,0))}
/* Arrows for a mouse. A thumb just swipes, so they stay out of the way on touch. */
.fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2);display:none;place-items:center;color:var(--ink2)}
.fnav svg{width:16px;height:16px}
.fnav.prev{left:8px}
.fnav.next{right:8px}
.fnav.next svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){ .fnav:not([hidden]){display:grid} .fbar:has(.fnav.next:not([hidden]))::after{width:44px} }
.fchips{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:13.5px;white-space:nowrap}
.fchip svg{width:15px;height:15px}
.fchip[aria-pressed="true"]{background:var(--brand-soft);border-color:#E7B7BF;color:var(--brand)}
.fchip .x{font-size:16px;line-height:1;margin-left:2px}
/* How many, and how they are ordered — one line, opposite ends, out of the filters' way. */
.countrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 16px 8px}
.crtools{display:flex;align-items:center;gap:6px}
.viewbtn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2);
  padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.viewbtn svg{width:16px;height:16px}
@media (hover:hover){.viewbtn:hover{border-color:var(--ink3);color:var(--ink)}}

/* ---- the tile view: a card, because the full-width button needs a surface ---- */
.items.grid{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:14px}
/* Grid, not flex: inside a flex column an aspect-ratio box is still sized against its
   flex basis, so the square came out a different height on each card. Two grid rows —
   the square, then everything else — makes the picture the same size on every card. */
.gcard{display:grid;grid-template-rows:auto 1fr;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
/* Landscape, as in the reference — the boxes are photographed wider than tall. The picture
   is laid into the frame rather than left in the flow: with height:100% in the flow the
   percentage has no definite height to resolve against, so each photo fell back to its own
   size and every card in the row came out different. */
.gcard .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line-soft)}
.gcard .ph>button{position:absolute;inset:0;width:100%;height:100%}
.gcard .ph svg,.gcard .ph img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.gcard .gbody{display:flex;flex-direction:column;min-width:0;padding:11px 12px 12px}
/* 15px, not 17: at 17 a fourteen-character name filled 92% of the column and looked
   pressed against the edge. At 15 the same name sits at 81% and sixteen characters still
   fit, wide letters included — more room for the name, and it is still clearly the
   headline against the 13px format line under it. */
.gcard h3{font-family:var(--story);font-weight:600;font-size:15.5px;color:var(--brand-deep);
  letter-spacing:-.012em;line-height:1.22}
/* The name wraps rather than being cut. It was held to ONE line and clipped, on the belief
   that "this only ever bites on a placeholder" — it bit on real products, and a staff phone
   showed "Diya Chocolat…" and "Swastik Choc…" side by side.
   Three lines, not two: in Georgia at 15.5px a 166px column takes about seventeen characters
   a line, so "Pinewood Chocolate & Cookie Box" needs a third. Two looked sufficient only on a
   machine without Georgia installed, where the fallback font is narrower. Cards in a grid row
   stretch to each other and the price is pinned to the bottom, so a long name costs that one
   row about 19px and lines up regardless. */
.gcard h3 button{width:100%;text-align:left;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.item h3 button{display:block;width:100%;text-align:left;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.gfmt{margin:3px 0 0;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.004em}
/* Nothing is held open for what a box has not got. These two lines reserved 1.4em and 2.8em
   whether or not they were used, which on a chocolate box with neither jars nor weight is
   about 40 px of blank card. The price is pinned to the bottom (margin-top:auto below) and
   cards in a grid row stretch to each other, so the prices and buttons still line up. */
.gspec{margin:4px 0 0;font-size:12.5px;font-weight:500;color:var(--ink2)}
.gfill{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gprice{margin-top:auto;padding-top:9px;font-weight:700;font-size:17px;letter-spacing:-.018em}
.gprice small{font-weight:400;color:var(--ink3);font-size:12px;margin-left:3px}
/* One row, one baseline, one gap — on every card, whatever the label says in either
   language. The plus was a <sup> before: it sat off the baseline and drifted with the
   length of the text next to it. */
/* The label is sized so the group sits at about three-quarters of the pill — centred with
   real air either side, rather than pressed against the ends. On a 390px phone two cards
   leave 145px inside the pill, so the type has to come down to hold that proportion. */
.gadd{margin-top:12px;width:100%;height:40px;border-radius:999px;border:1px solid var(--brand);
  color:var(--brand);font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:9px;
  line-height:1}
.gadd .lbl{display:block}
/* The plus carries the same weight as the label and sits on its line — not a superscript
   floating above it. */
.gadd .pl{display:block;font-size:13px;font-weight:700;line-height:1;letter-spacing:0}
.gadd svg{width:16px;height:16px}
.gadd[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.gcard .ribbon{left:10px;top:10px}
@media (hover:hover){.gadd:hover{background:var(--brand-soft)}}
@media (min-width:700px){
  .items.grid{grid-template-columns:repeat(3,1fr);column-gap:18px;row-gap:20px}
  .gcard h3{font-size:17px}
  .gfmt{font-size:14px}
  .gcard .gbody{padding:13px 14px 14px}
  .gadd{height:44px;font-size:12px;letter-spacing:.08em;gap:13px}
  .gadd .pl{font-size:15px}
}
@media (min-width:1024px){
  .items.grid{grid-template-columns:repeat(4,1fr);column-gap:22px;row-gap:24px}
}
/* Five across once the page is wide enough to give each one a sensible width — at 1024
   five would squeeze the name; at 1280 and up four look oversized. */
@media (min-width:1280px){
  .items.grid{grid-template-columns:repeat(5,1fr);column-gap:20px;row-gap:22px}
  .gcard h3{font-size:18px}
  .gfmt{font-size:14px}
}
.count{font-size:11.5px;color:var(--ink3);font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.sortbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);padding:4px 2px;border-radius:6px}
.sortbtn svg{width:15px;height:15px;color:var(--ink3)}
.sortbtn:active{color:var(--brand)}

/* ---------- a row in the list: photograph left, everything else right ----------
   The text column is a fixed set of rows, not a stack that grows with the content, so the
   name, the price and the button land in the same place on every card. The photograph is
   full-bleed to the card's top and bottom, which is what puts the name on its top edge and
   the button on its bottom edge. */
.items{display:grid;grid-template-columns:1fr;gap:12px;padding:0 16px}
/* Measured off the reference: the photograph takes 44% of the card's width, is inset
   rather than bled to the edge, and fills the card's height — which is what puts the name
   level with its top and the button level with its bottom. */
.item{display:grid;grid-template-columns:46% minmax(0,1fr);gap:10px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);align-items:stretch}
.i-img{position:relative;display:block;width:100%;height:100%;border-radius:11px;overflow:hidden;
  background:var(--line-soft)}
.i-img img,.i-img svg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.i-main{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr auto auto;min-width:0;padding:2px 2px 0 0}
/* Six rows for six lines, and the fillings row takes the slack — that is what pins the
   price and the button to the bottom of the card however tall the card ends up. */
.item h3{font-family:var(--story);font-weight:600;font-size:14.5px;color:var(--brand-deep);
  letter-spacing:-.012em;line-height:1.1}
.i-fmt{margin:1px 0 0;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.004em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The line keeps its height even when a product has no jars and no weight, so a card with
   less to say is still the same card. */
.i-facts{margin:2px 0 0;font-size:11px;font-weight:500;color:var(--ink2);min-height:1.4em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Two lines are kept for the fillings whether or not this product needs both. */
.i-desc{margin:2px 0 0;font-size:11px;line-height:1.28;color:var(--ink3);min-height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.i-price{padding-top:3px;font-weight:700;font-size:15px;letter-spacing:-.018em}
.i-price small{font-weight:400;color:var(--ink3);font-size:12px;margin-left:3px}
.i-price .unit{font-weight:400;color:var(--ink3);font-size:12px;letter-spacing:0;
  border-left:1px solid var(--line);margin-left:8px;padding-left:8px}
.item .gadd{margin-top:6px;height:29px;font-size:9.5px}
.item .ribbon{left:9px;top:9px}
@media (min-width:820px){
  .items{grid-template-columns:1fr 1fr;column-gap:22px}
  /* On a wide card a square photograph sized as a share of the width would tower over a
     text column that only needs 140px, so here the picture takes a fixed column and the
     card stays the height of what it has to say. */
  .item{grid-template-columns:172px minmax(0,1fr);gap:12px;padding:10px}
  .i-main{padding:2px 2px 0 0}
}
.i-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.tag{font-size:10.5px;font-weight:700;border-radius:4px;padding:2px 6px;background:var(--line-soft);color:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.tag.gold{background:var(--gold-soft);color:var(--gold)}
.tag.green{background:var(--green-soft);color:var(--green-deep)}
.i-save{margin-top:3px;font-size:12.5px;font-weight:600;color:var(--brand)}
.i-save s{color:var(--ink3);font-weight:400;margin-right:5px}
/* The list draws a screenful at a time; this is what the reader meets at the seam.
   Scoped to its own id: "See all ›" beside a section heading is also .more, and this
   64px was being applied to it — which is why every heading block on the page stood
   72px tall for a 30px heading, and why the gap above the photographs looked wrong. */
#more.more{display:grid;place-items:center;height:64px}
.more .spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink3);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#allsec{padding-top:26px}
#allsec .divider{padding-bottom:6px}

/* The price line reads left to right the way a buyer weighs it up:
   what it used to be, what it is now, and how much that saves. */
.i-price .was{color:var(--ink3);font-weight:400;font-size:13px;margin-right:2px}
.offchip{display:inline-block;margin-left:6px;vertical-align:1px;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 6px;font-variant-numeric:normal}
/* The photo is what they came to look at, so nothing sits on top of it. */
.i-media{position:relative;align-self:start}
.i-img svg{width:100%;height:100%;display:block}
.addbtn{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:88px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);color:var(--brand);font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:3px;transition:transform .12s}
.addbtn:active{transform:translateX(-50%) scale(.95)}
.addbtn sup{font-size:12px;margin-top:-8px}
.addbtn[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.addbtn svg{width:16px;height:16px}
.empty{text-align:center;padding:48px 24px;color:var(--ink2)}
.empty svg{width:90px;height:90px;margin-bottom:8px}

/* search view */
.suggest{padding:16px}
.suggest h4{font-family:var(--body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:6px 0 10px}
.sgrid{display:flex;flex-wrap:wrap;gap:8px}
.sgrid button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.sgrid svg{width:14px;height:14px;color:var(--ink3)}

/* ---------- product sheet ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(18,8,10,.55);display:flex;align-items:flex-end;justify-content:center;animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);width:100%;max-width:560px;max-height:94%;border-radius:24px 24px 0 0;display:flex;flex-direction:column;animation:up .22s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@keyframes upc{from{transform:translate(-50%,40px);opacity:.6}to{transform:translate(-50%,0);opacity:1}}
@media (min-width:700px){.overlay{align-items:center}.sheet{border-radius:24px;max-height:90%}}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#D9D0CC;margin:8px auto 0;flex:none}
.sheet .scroll{overflow:auto;padding:0 0 20px;overscroll-behavior:contain}
.gallery{position:relative;margin:10px 16px 0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--bg)}
.gallery .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;scrollbar-width:none}
.gallery .slides::-webkit-scrollbar{display:none}
.gallery .slides>div{flex:none;width:100%;height:100%;scroll-snap-align:start}
.gallery svg{width:100%;height:100%;display:block}
.gallery .close{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh2);backdrop-filter:blur(6px)}
.gallery .close svg{width:18px;height:18px}
.gallery .badge{position:absolute;left:10px;bottom:10px;background:rgba(20,8,10,.62);color:#fff;font-size:11.5px;font-weight:500;border-radius:7px;padding:3px 8px;backdrop-filter:blur(4px)}
/* Dots say "there is more here" in a way a counter never does. */
.gallery .gdots{position:absolute;left:0;right:0;bottom:11px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.gallery .gdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:width .18s,background .18s}
.gallery .gdots i.on{width:18px;border-radius:3px;background:#fff}
.pd{padding:14px 16px 0}
.pd h2{font-size:21px;font-weight:600;margin-top:8px;letter-spacing:-.02em;line-height:1.22}
.pd .sub{color:var(--ink2);font-size:14.5px;line-height:1.5;margin:6px 0 0}
.pd .pricebig{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.pd .pricebig b{font-family:var(--head);font-size:26px;font-weight:600;letter-spacing:-.022em}
.pd .pricebig span{color:var(--ink3);font-size:13.5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-top:16px}
.facts div{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:9px 6px;text-align:center}
.facts small{display:block;font-size:11px;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.facts b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inside{margin-top:18px}
.inside h4{font-size:17px;font-weight:700;margin-bottom:10px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:12px 8px}
.ing{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:12px;font-weight:500;color:var(--ink2);line-height:1.25}
.ing .nut{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.ing .nut svg{width:30px;height:30px}
.note{margin-top:14px;font-size:13px;color:var(--ink3);background:var(--bg);border-radius:12px;padding:10px 12px}
.sheet .foot{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border-radius:12px;font-weight:600;font-size:15px;letter-spacing:-.006em;text-decoration:none;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--brand);color:#fff;flex:1}
.btn.primary[aria-pressed="true"]{background:var(--green)}
.btn.ghost{border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.btn.wa{background:var(--green);color:#fff}
.btn.block{width:100%}

/* ---------- enquiry bar + bottom nav ---------- */
.cartbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--navh) + 8px + env(safe-area-inset-bottom,0px));z-index:40;width:calc(100% - 24px);max-width:560px;background:var(--green);color:#fff;border-radius:14px;display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 10px 24px -10px rgba(20,100,50,.6);animation:upc .25s ease}
.cartbar .t{margin-right:auto;line-height:1.2}
.cartbar .t b{display:block;font-size:15px}
.cartbar .t span{font-size:12.5px;opacity:.9}
.cartbar .go{font-weight:800;font-size:15px;display:flex;align-items:center;gap:4px}
.cartbar .go svg{width:18px;height:18px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);height:var(--navh)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--ink3);text-decoration:none;position:relative}
.nav a svg{width:22px;height:22px}
.nav a[aria-current="page"]{color:var(--brand)}
.nav a[aria-current="page"]::before{content:"";position:absolute;top:0;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.nav .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px}

/* ---------- enquiry page ---------- */
.eq{max-width:640px;margin:0 auto;padding:0 16px}
.box{background:var(--card);border-radius:var(--r);box-shadow:var(--sh1);padding:14px;margin-top:12px}
.box h3{font-family:var(--body);font-size:15px;font-weight:700;margin-bottom:10px}
.box h3 small{font-weight:500;color:var(--ink3)}
.eitem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.eitem:first-of-type{border-top:0;padding-top:2px}
.eitem .th{width:56px;height:56px;border-radius:12px;overflow:hidden}
.eitem .th svg{width:100%;height:100%;display:block}
.eitem h4{font-family:var(--body);font-size:15px;font-weight:700;line-height:1.25}
.eitem .p{font-size:13.5px;color:var(--ink2)}
.eitem .rm{color:var(--ink3);width:32px;height:32px;display:grid;place-items:center;border-radius:8px}
.eitem .rm svg{width:18px;height:18px}
.qty{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.qty label{font-size:12.5px;color:var(--ink3);font-weight:600;width:100%}
.qchip{height:32px;padding:0 11px;border-radius:9px;border:1px solid var(--line);font-weight:700;font-size:14px;background:var(--card)}
.qchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.qinput{width:92px;height:32px;border-radius:9px;border:1px solid var(--line);padding:0 10px;font-weight:700;font-size:14px;background:var(--card)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:14.5px}
.opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.field{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.field:first-of-type{margin-top:0}
.field span{font-size:13px;font-weight:600;color:var(--ink2)}
.field input,.field textarea{border:1px solid var(--line);border-radius:12px;padding:12px;font-size:16px;background:#FCFBFA;outline:0;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--brand);background:#fff}
.datef{margin-top:12px!important;max-width:260px}
.datef input{min-height:44px;padding:8px 12px;font-weight:600;color:var(--ink)}
.ghint{font-size:12.5px;color:var(--ink3);font-weight:500}
.ghint.bad{color:#B42318}
.ghint.ok{color:var(--green-deep)}
#f-gstin{text-transform:uppercase;letter-spacing:.04em}
.datehint{margin-top:6px;font-weight:700;color:var(--brand);font-size:14.5px}
.datef input.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two .field{margin-top:0}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.bill .line{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:15px}
.bill .line.tot{border-top:1px dashed #D8CEC9;margin-top:6px;padding-top:10px;font-weight:800;font-size:17px}
.bill p{margin:8px 0 0;font-size:12.5px;color:var(--ink3)}
.stickycta{position:sticky;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 20px);padding:22px 0 12px;display:flex;flex-direction:column;gap:8px}

/* ---------- visit page ---------- */
.mapcard{border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--sh1);margin-top:12px}
.mapcard > svg{display:block;width:100%;height:auto}
.mapcard .in{padding:14px 16px 16px}
.mapcard h2{font-size:22px;font-weight:700}
.openpill{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:13px;border-radius:999px;padding:3px 10px;margin:8px 0 12px}
.openpill.shut{background:var(--line-soft);color:var(--ink2)}
/* The showroom keeps hours; the catalogue does not. Said once, where someone is deciding
   whether to travel. */
.anyhour{margin:8px 0 0;font-size:13px;color:var(--ink3);line-height:1.45}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:var(--bg);font-weight:600;font-size:13.5px;text-decoration:none;color:var(--ink)}
.act svg{width:24px;height:24px;color:var(--brand)}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.trust div{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--sh1)}
.trust b{display:block;font-family:var(--head);font-size:26px;font-weight:800;color:var(--brand);line-height:1}
.trust span{font-size:13.5px;color:var(--ink2)}
/* The payment notice. Each point is one line with its own heading, so a reader who
   only glances still takes away the one that matters: check before you pay. */
.safe{margin:22px 16px 6px;padding:14px 15px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.safe .safe-h{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.safe ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.safe li b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.safe li span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.45;margin-top:1px}
.telin{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.foot-note{padding:14px 16px 10px;font-size:12.5px;color:var(--ink3);text-align:center}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--navh) + 84px);z-index:80;background:#211A1B;color:#fff;border-radius:12px;padding:10px 16px;font-weight:600;font-size:14px;box-shadow:var(--sh2);animation:upc .2s ease;white-space:nowrap}
.preview{margin:14px 16px 0;font-size:12.5px;color:var(--gold);background:var(--gold-soft);border-radius:10px;padding:8px 12px}

/* ---------- v3 additions ---------- */
.ph-img{width:100%;height:100%;object-fit:cover;display:block;background:#F1ECE9}
.photo-soon{position:absolute;right:6px;top:6px;background:rgba(255,255,255,.9);color:var(--ink2);font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 6px}
/* In the catalogue list the badge owns the top-left, so this goes to the far corner and
   the two can never meet. The home rails keep it top-right, where their ADD control is
   not sitting. */
.i-img .photo-soon,.gcard .ph .photo-soon{top:auto;bottom:6px;right:6px}
.skel{background:linear-gradient(90deg,#EFE9E6 0%,#F8F4F2 50%,#EFE9E6 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear;border-radius:12px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-row{display:grid;grid-template-columns:1fr 132px;gap:14px;padding:18px 16px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--ink2)}
.consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--brand);flex:none}
.privacy{font-size:12.5px;color:var(--ink3);margin:10px 0 0}
.privacy a{color:var(--ink2)}
.refnote{font-size:12.5px;color:var(--ink3);text-align:center}
@media (min-width:700px){.stickycta{flex-direction:row;flex-wrap:wrap;padding-top:16px}.stickycta .btn{flex:1 1 auto;width:auto;min-width:0;height:50px;padding:0 12px;font-size:14.5px}.stickycta .refnote,.stickycta .eqterms{flex-basis:100%;margin:0}.stickycta .eqterms{order:-1}}
.disclaimer{margin-top:12px;font-size:12.5px;color:var(--ink3);display:flex;gap:6px;align-items:flex-start}
.err{margin:40px 16px;text-align:center;color:var(--ink2)}
.err h2{font-size:22px;margin-bottom:6px;color:var(--ink)}
.sending{opacity:.7;pointer-events:none}
.policy{background:var(--card);border-radius:var(--r);box-shadow:var(--sh1);padding:14px;margin-top:12px;font-size:14px;color:var(--ink2)}
.policy h3{font-family:var(--body);font-size:15px;color:var(--ink);margin-bottom:6px}


/* =====================================================================
   Tablet and desktop layouts (phones keep everything above unchanged)
   ===================================================================== */
.dnav{display:none}
@media (hover:hover){
  .pcard .ph,.i-img,.wtile,.banner,.budget .circle,.ttile .ph{transition:transform .15s ease,box-shadow .15s ease}
  .pcard:hover .ph,.item:hover .i-img,.wtile:hover,.banner:hover,.budget:hover .circle,.ttile:hover .ph{transform:translateY(-2px);box-shadow:var(--sh2)}
  .dnav a:hover,.sec-h .more:hover{color:var(--brand)}
}

/* ---- tablet (700px +) ---- */
@media (min-width:700px){
  .pad,.search-wrap,.sec-h,.divider,.rail,.whom,.types,.fchips,.countrow,.items,.greet{padding-left:24px;padding-right:24px}
  .helpcard{margin-left:24px;margin-right:24px}
  .rail{scroll-padding-inline:24px}
  .sec.onwhite{margin-left:24px;margin-right:24px;border-radius:20px;
    padding-top:22px;padding-bottom:20px}
  .sec.onwhite .sec-h,.sec.onwhite .divider,.sec.onwhite .rail,.sec.onwhite .types{
    padding-left:18px;padding-right:18px}
  .sec.onwhite .rail{scroll-padding-inline:18px}
  .banner{width:min(46vw,460px);height:184px}
  .brail{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible}
  .budget{width:auto}
  .budget .circle{width:92px;height:92px}
  .budget .circle span{font-size:23px}
  .prail>.pcard,.prail .pcard .ph{width:184px}
  .prail .pcard .ph{height:184px}
  .eq{max-width:760px;padding:0 24px}
}

/* ---- desktop and tablet landscape (1024px +) ---- */
@media (min-width:1024px){
  :root{--navh:0px}
  .nav{display:none}
  .app{max-width:1280px;padding-bottom:96px}
  /* full-width white header band */
  .topbar{box-shadow:0 1px 0 var(--line),0 0 0 100vmax var(--card);clip-path:inset(0 -100vmax -1px)}
  .search-wrap{box-shadow:0 0 0 100vmax var(--card);clip-path:inset(0 -100vmax);padding-top:4px;padding-bottom:16px}
  .topbar .row,.backbar{padding:12px 24px;gap:14px}
  .backbar h1{margin-right:0}
  .where{margin-right:0}
  .dnav{display:flex;align-items:center;gap:4px;margin:0 auto}
  .dnav a{position:relative;padding:9px 16px;border-radius:10px;font-weight:700;font-size:15.5px;color:var(--ink2);text-decoration:none}
  .dnav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
  .dnav .badge{position:absolute;top:0;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;font-style:normal}
  .searchbox{max-width:720px;margin:0 auto}
  .greet{padding-top:18px;font-size:16px}
  .sec{padding-top:34px}
  .sec-h h2{font-size:25px}

  /* banners: all three side by side, no sliding */
  #banners{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;overflow:visible}
  #banners .banner{width:auto;height:210px;padding:22px}
  #banners .banner h3{font-size:clamp(22px,2vw,27px);max-width:78%}
  #banners .banner p{max-width:70%}
  .banner p{font-size:15px}
  #bdots{display:none}

  .budget .circle{width:108px;height:108px}
  .budget .circle span{font-size:27px}
  .budget em{font-size:13.5px}
  .whom{gap:16px}
  .wtile{min-height:140px;padding:16px}
  .wtile b{font-size:20px}
  .wtile span{font-size:14px}
  .wtile svg{width:58px;height:58px}
  .helpcard{padding:22px 26px}
  .helpcard h3{font-size:23px}
  .helpcard>svg{width:88px;height:88px}
  .types{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px 12px}
  .ttile .ph{width:96px;height:96px}
  .ttile b{font-size:14.5px}

  /* product rails become a tidy grid (up to 2 rows of 5) */
  .prail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px;overflow:visible}
  .prail>.pcard{width:auto}
  .prail>.pcard:nth-child(n+6){display:none} /* one neat row per section; "See all" shows the rest */
  .prail .pcard .ph{width:100%;height:auto;aspect-ratio:1/1}
  .pcard h3{font-size:15.5px}

  /* list: three columns of rows */
  .fbar{background:var(--bg)}
  .fchips{flex-wrap:nowrap;overflow-x:auto}
  .items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}

  /* product popup: photo left, details right */
  .sheet{max-width:1000px;max-height:88vh}
  .sheet .grab{display:none}
  .sheet .scroll{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:8px;align-items:start;padding:16px 8px 16px 0}
  .sheet .gallery{margin:0 0 0 16px;aspect-ratio:4/3;position:sticky;top:0}
  .sheet .pd{padding-top:4px}
  .sheet .foot{justify-content:flex-end}
  .sheet .foot .btn.primary{flex:0 1 360px}

  /* enquiry: form on the left, summary and buttons on the right */
  .eq{max-width:1180px}
  .eq2{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
  .eq2 .empty{grid-column:1 / -1}
  .eq-side{position:sticky;top:64px}
  .eq-side .stickycta{position:static;background:none;flex-direction:column;padding:12px 0 0}
  .eq-side .stickycta .btn{height:52px;font-size:15.5px;width:100%}
  .eitem{grid-template-columns:72px 1fr auto}
  .eitem .th{width:72px;height:72px}
  .two{grid-template-columns:1fr 1fr}

  /* visit: two columns */
  .vis2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1180px}
  .vis2 .foot-note{grid-column:1 / -1}
  .vis-side .sec-h{padding:12px 0 0!important}

  .cartbar{bottom:24px;max-width:520px}
  .toast{bottom:100px}
  .foot-note{padding-top:36px}
}

@media (min-width:1280px){
  .items{column-gap:52px}
}

/* =====================================================================
   Desktop polish v2: header search, hero, trust strip, budget cards, footer
   ===================================================================== */
.hsearch,.trustbar,.dfoot{display:none}

@media (min-width:700px){
  .trustbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 24px 0}
  .trustbar>div{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink2);line-height:1.3}
  .trustbar b{color:var(--ink);font-weight:800}
  .trustbar .ti{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
  .trustbar .ti svg{width:21px;height:21px}
  .mob-only{display:none}
  .dfoot{display:block;margin-top:48px;background:#1F1416;color:#D9CFCF;box-shadow:0 0 0 100vmax #1F1416;clip-path:inset(0 -100vmax -100vmax)}
  .dfoot .in{display:grid;grid-template-columns:1.4fr 1fr;gap:28px 32px;padding:40px 24px 28px}
  .dfoot h4{font-family:var(--body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#F2C46B;margin:4px 0 12px}
  .dfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
  .dfoot a,.dfoot li button{color:#E9E1E1;text-decoration:none;font-size:14.5px;text-align:left}
  .dfoot a:hover,.dfoot li button:hover{color:#fff;text-decoration:underline}
  .fcontact li{color:#BFB3B4}
  .fb{display:flex;align-items:center;gap:12px}
  .fb b{display:block;font-family:var(--head);font-size:22px;color:#fff;line-height:1.1}
  .fb span{font-size:13px;color:#BFB3B4}
  .fbrand p{font-size:14.5px;line-height:1.55;color:#BFB3B4;margin:14px 0 16px;max-width:380px}
  .fbtns{display:flex;gap:10px;flex-wrap:wrap}
  .fbtns .btn{height:44px;font-size:15px;padding:0 16px}
  .dfoot .btn.callfoot{background:transparent;color:#fff;border-color:#4C3C3F}
  .dfoot .btn.wa{color:#fff}
  .fsafe{border-top:1px solid #3A2C2F;padding:14px 24px;font-size:12.5px;line-height:1.55;color:#C9BCBE}
  .fsafe b{color:#F0E6E7;display:block;margin-bottom:2px}
  .fbottom{border-top:1px solid #3A2C2F;padding:16px 24px 26px;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;font-size:12.5px;color:#9C8E90}
}

@media (min-width:1024px){
  .app{padding-bottom:0}
  .sec{padding-top:34px}
  /* 16px under a 25px heading left a visible hole above the photographs; the heading and
     what it names should read as one block. */
  .sec-h{padding-bottom:14px}
  .divider{padding-bottom:10px}
  .greet{padding-top:22px;padding-bottom:0}

  /* hero: one large banner + two stacked */
  #banners{grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:18px;height:392px}
  #banners .banner{height:auto}
  #banners .b1{grid-row:1 / 3;padding:36px 36px 32px}
  #banners .b1 h3{font-size:clamp(34px,3.2vw,46px);max-width:60%;line-height:1.05}
  #banners .b1 p{font-size:18px;max-width:52%;margin-top:10px}
  #banners .b1 .cta{font-size:16px;padding:11px 22px}
  #banners .b1 svg.deco{width:50%;right:0;bottom:-4px}
  #banners .b2 h3,#banners .b3 h3{font-size:clamp(21px,1.9vw,26px);max-width:62%}
  #banners .b2 p,#banners .b3 p{max-width:58%;font-size:14.5px}
  #banners .b2 svg.deco,#banners .b3 svg.deco{width:40%}

  .trustbar{grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 24px 0}
  .trustbar>div{padding:14px 16px;font-size:14.5px}

  /* budget: compact cards in one row */
  .brail{gap:14px}
  .budget{flex-direction:row;justify-content:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--sh1);text-align:left}
  .budget .circle{width:80px;height:80px;flex:none;box-shadow:none}
  .budget .circle span{font-size:19px}
  .budget .circle small{font-size:10px}
  .budget em{margin:0;font-size:14.5px;color:var(--ink2);font-weight:600}
  .budget em::after{content:" ›";color:var(--brand);font-weight:800}
  @media (hover:hover){.budget:hover{border-color:#E7B7BF;box-shadow:var(--sh2)}.budget:hover .circle{transform:none;box-shadow:none}}

  .wtile{min-height:128px}
  .helpcard{padding:20px 26px}

  /* header with built-in search */
  .dfoot .in{grid-template-columns:1.5fr 1fr 1fr 1.2fr;padding:48px 24px 32px}
}

@media (min-width:1200px){
  .hsearch{display:block;flex:1 1 auto;max-width:520px;margin-left:12px}
  .hsearch .searchbox{height:44px;max-width:none;box-shadow:none;background:var(--bg);border-color:transparent}
  .hsearch .searchbox:hover{border-color:var(--line)}
  .search-wrap{display:none}
  .topbar .dnav{margin:0 0 0 auto}
  .topbar .row .callbtn{margin-left:8px}
}

@media (min-width:1440px){
  .app{max-width:1360px}
}

/* iPad landscape / small laptops: give the hero and cards more room */
@media (min-width:1024px) and (max-width:1199px){
  #banners{grid-template-columns:1.35fr 1fr;height:372px}
  #banners .b1 h3{font-size:36px;max-width:70%}
  #banners .b1 p{max-width:62%;font-size:16.5px}
  #banners .b2 h3,#banners .b3 h3{font-size:21px;max-width:70%}
  #banners .b2 p,#banners .b3 p{max-width:62%;font-size:13.5px}
  #banners .b2 svg.deco,#banners .b3 svg.deco{width:34%}
  .trustbar{grid-template-columns:repeat(2,1fr)}
  .budget{flex-direction:column;text-align:center;gap:8px;padding:14px 10px}
  .budget em{font-size:14px}
}

/* required details, offers and badges */
.field .req{font-weight:500;color:var(--brand)}
.ferr{display:none;color:#B42318;font-size:12.5px;font-weight:600}
.field.err input,.field.err textarea{border-color:#B42318;background:#FFF5F4}
.field.err .ferr{display:block}
.tag.red{background:var(--brand-soft);color:var(--brand)}
.tag.hot{background:var(--brand-soft);color:var(--brand)}
/* One badge to a card, and the three tell themselves apart by weight as well as by colour —
   filled, outlined, plain — so they are still distinguishable to someone who cannot separate
   gold from maroon, and in a photograph of the screen.
     Premium     filled gold      the rarest standing, so the only one with a fill
     Best seller outlined maroon  earned by customers
     Trending    plain grey       true this week, and says the least
   Nothing here is about price: a discount is told in the price line. */
.ribbon{position:absolute;left:8px;top:8px;z-index:2;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;border-radius:5px;padding:3px 7px;
  background:rgba(255,255,255,.95);box-shadow:0 1px 3px rgba(23,18,15,.14)}
.ribbon.prem{color:#6B4703;background:var(--gold-soft);border:1px solid #E6CE95}
.ribbon.best{color:var(--brand);background:rgba(255,255,255,.96);border:1px solid #E7BFC5}
.ribbon.trend{color:var(--ink2);background:rgba(255,255,255,.96);border:1px solid var(--line)}
.ribbon.limited{color:var(--ink2);background:rgba(255,255,255,.96);border:1px solid var(--line)}
/* The home rails are unchanged, and keep the badges they always had. */
.ribbon.hot{color:var(--brand);background:rgba(255,255,255,.95);border:0}
.ribbon.gold{color:var(--gold);background:rgba(255,255,255,.95);border:0}
.ribbon.red{color:#fff;background:var(--brand);border:0}

/* A discounted price: what it was, struck through and small, then what it is, in the brand
   colour. The badge corner stays free for what the product is. */
.i-price .was,.gprice .was{color:var(--ink3);font-weight:400;font-size:12.5px;margin-right:3px}
.i-price.cut .now,.gprice.cut .now{color:var(--brand)}
.i-price .now,.gprice .now{font-weight:700}
s.was{opacity:.72;font-weight:500;font-size:.78em;margin-right:3px}
/* On a plain background now, not over a photograph: no shadow, and inline beside the price
   rather than stacked above it, because the line below the picture has the width for both. */
.pcard .pr s.was{font-size:11.5px;font-family:var(--body);font-weight:400;color:var(--ink3);margin-right:4px}
.pd .pricebig{flex-wrap:wrap}
.pd .pricebig s.was{font-size:17px;color:var(--ink3)}
.offpill{font-style:normal;background:#B42318;color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:800}
.pricenote{margin:2px 2px 6px;font-weight:700;color:var(--brand)}
/* "We don't have "juices"." — said plainly, under the price line, so a short list of
   results is never mistaken for the whole answer to what was typed. */
.qnote{margin:2px 2px 8px;font-size:13.5px;color:var(--ink3)}


/* ============================================================================
   The story layer — one seam on the home page, one page behind it.

   The catalogue is scanned: dense, tiled, near-black on white so a price can be
   read at a glance. This is read instead, in long lines on warm paper, and the
   same near-black that serves a price list is too hard for it — it is what makes
   a page feel like a specification rather than something printed. So the story
   layer keeps the palette but takes its own ink: a warm dark brown for anything
   that carries weight, the existing soft ink for the reading itself. Nothing
   here is a new colour, only a warmer step of the one already in use.

   On the empty space either side: a reading measure cannot be stretched to fill
   a desktop, and filling it with a picture only moves the problem — the picture
   then outranks the sentence. The seam is centred so its air is symmetrical; the
   page hangs its dates in the left margin so that margin carries the timeline.
   ============================================================================ */
.seam,.story{--ink-w:#3B2A21}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* The Selection device, used the way a printer uses a fleuron: small, marking a break.
   Nine possibilities, one chosen — the same idea as the sentence it introduces, at a size
   where it introduces rather than competes. Gold stays a small accent, as elsewhere. */
.dinkus{display:block;width:30px;height:auto;fill:var(--gold-mark)}
.dinkus .chosen{fill:var(--brand)}

/* ---------- the seam: the boundary between the highlights and the full collection ---- */
.seam{display:block;text-decoration:none;color:inherit;text-align:center;
  margin:34px 16px 4px;padding:30px 0 26px;border-top:1px solid var(--line)}
.seam .txt{max-width:30rem;margin:0 auto}
.seam .dinkus{margin:0 auto 18px;width:26px}
.seam .lead{font-family:var(--story);font-weight:500;font-size:21px;line-height:1.34;
  letter-spacing:-.008em;margin:0;color:var(--ink-w)}
.seam .lead span,.story h1 span{display:block}
.seam .sub{margin:12px 0 0;color:var(--ink2);font-size:14px;line-height:1.5;text-wrap:balance}
.seam .go{display:inline-block;margin-top:16px;color:var(--brand);font-weight:600;font-size:14.5px}
@media (hover:hover){.seam:hover .go{text-decoration:underline}}

/* ---------- the page ---------- */
.story{max-width:38rem;margin:0 auto;padding:26px 20px 64px;color:var(--ink2)}

/* The opening. The back bar already names the page, so a heading repeating those three
   words earns nothing: the line itself is the headline, and it appears exactly once. */
.story .lede{position:relative}
.story .lede .dinkus{margin:0 0 20px;width:44px}
@media (min-width:700px){.story .lede .dinkus{width:52px;margin-bottom:24px}}
.story h1{font-family:var(--story);font-weight:500;font-size:26px;line-height:1.28;
  letter-spacing:-.014em;margin:0;color:var(--ink-w)}

.story .beat{padding-top:40px}
.story .when{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:7px}
.story .beat h2{font-family:var(--story);font-weight:600;font-size:21px;letter-spacing:-.012em;
  line-height:1.24;color:var(--ink-w);text-wrap:balance}
.story p{margin:13px 0 0;font-size:15.5px;line-height:1.66}
.story p b{color:var(--ink-w);font-weight:600}

/* The hinge of the whole page: everything before it is history, everything after it is
   this catalogue. It gets the space of a chapter break and no rule, box or colour — the
   sentence carries itself. */
.story .pull{font-family:var(--story);font-weight:500;font-size:24px;line-height:1.34;
  letter-spacing:-.012em;color:var(--ink-w);margin:52px 0 8px;text-wrap:balance}

/* The criteria are the only concrete thing on the page — six tests a box has to pass —
   so they are given the weight of a second opening rather than a list at the bottom. */
.story .crit{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.story .crit h2{font-family:var(--story);font-weight:600;font-size:21px;letter-spacing:-.012em;
  color:var(--ink-w)}
.story .crit ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:13px}
.story .crit li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5}
.story .crit li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--gold-soft);border:1px solid #E8D5A8}

.story .close{margin-top:56px}
.story .close p{font-family:var(--story);font-weight:500;font-size:21px;line-height:1.32;
  color:var(--ink-w);margin:0;text-wrap:balance}
.story .close .btn{margin-top:20px;width:auto;display:inline-flex;padding:0 22px}

/* The owner's text. The middle of the page is prose; the job a gift does is four short
   lines, set one to a line, because that is how they were written. */
.story .mani{padding-top:28px}
.story .mani p:first-child{margin-top:0}
.story .job{font-family:var(--story);font-weight:500;font-size:20px;line-height:1.45;
  letter-spacing:-.008em;color:var(--ink-w);margin-top:26px}
.story .job span{display:block}
.story .crit .intro{margin:0}
.story .crit .after{margin-top:20px;color:var(--ink-w);font-weight:600}
.story .verdict{font-family:var(--story);font-weight:500;font-size:24px;line-height:1.34;
  letter-spacing:-.012em;color:var(--ink-w);margin:52px 0 0;text-wrap:balance}
.story .verdict span{display:block}
.story .whyline{margin-top:12px;color:var(--brand);font-weight:600;font-size:15px;letter-spacing:.01em}
.story .past{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.story .pasth{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.story .past .beat:first-of-type{padding-top:18px}
.story .close .btn.wa{margin-top:20px;width:auto;display:inline-flex;padding:0 22px}

/* The colophon. The page tells a family's story in "we"; without this, nobody signs it. */
.story .colophon{display:flex;align-items:center;gap:14px;margin-top:56px;padding-top:24px;
  border-top:1px solid var(--line)}
.story .colophon .dinkus{width:26px;flex:none}
.story .colophon b{display:block;font-family:var(--story);font-weight:500;font-size:15.5px;
  color:var(--ink-w);letter-spacing:-.006em}
.story .colophon span{display:block;margin-top:3px;font-size:13px;color:var(--ink3)}

@media (min-width:700px){
  .seam{margin-left:24px;margin-right:24px;padding:36px 0 32px}
  .seam .txt{max-width:34rem}
  .seam .lead{font-size:26px}
  .seam .sub{font-size:14.5px}
  .story{padding:40px 24px 88px}
  .story h1{font-size:30px;line-height:1.24}
  .story .beat{padding-top:52px}
  .story .beat h2,.story .crit h2{font-size:23px}
  .story .pull{font-size:27px;margin:64px 0 10px}
  .story .close p{font-size:24px}
}
/* Once there is a margin wide enough to hold them, the dates step out of the column and
   hang in it: the measure stays exactly where it was, and the margin stops being empty
   and starts carrying the timeline, so the shape of the story reads before the words do.
   The device sits at the head of that same rail — aligned to something real, rather than
   floating above the title. */
@media (min-width:1024px){
  .story{max-width:calc(38rem + 76px);padding:48px 0 88px 76px}
  .story h1{font-size:32px}
  .story .beat,.story .lede{position:relative}
  .story .when{position:absolute;top:calc(52px + .78em);right:calc(100% + 30px);
    margin:0;text-align:right;white-space:nowrap}
  .story .lede .dinkus{position:absolute;top:6px;right:calc(100% + 30px);margin:0;width:80px}
}

/* ---------- terms ----------
   A page nobody reads until there is a disagreement, and then it has to be readable. So:
   one column at a comfortable measure, headings that say what the clause is about, and
   enough air between clauses that a finger can find the one it wants. Serif for the
   headings, as on the story page — this is the house speaking, not the shop. */
.terms{max-width:660px;margin:0 auto;padding:18px 16px 40px}
.terms-h{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.terms-h .who{margin:0;font-family:var(--story);font-size:19px;color:var(--brand-deep);letter-spacing:-.012em}
.terms-h .reg{margin:5px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.5}
.terms-h .upd{margin:7px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.terms section{padding-top:20px}
.terms h2{font-family:var(--story);font-weight:600;font-size:17px;color:var(--brand-deep);
  letter-spacing:-.01em;line-height:1.25;margin:0 0 5px;text-wrap:balance}
.terms p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink2)}
/* The one line at the Send button. It is a term, so it does not shout — but it is the term
   that stops someone believing their enquiry has taken the last four boxes off the shelf. */
.eqterms{margin:0;font-size:12px;line-height:1.45;color:var(--ink3)}
.tlink{color:var(--brand);font-weight:600;text-decoration:none;white-space:nowrap}
.tlink:hover{text-decoration:underline}
@media (min-width:820px){
  .terms{padding-top:26px}
  .terms section{padding-top:24px}
  .terms h2{font-size:18px}
}

/* "Message us" — the way in for someone with a question and nothing added yet. */
.askus{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 16px;
  padding:18px 18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.askus h3{font-size:16.5px;letter-spacing:-.012em}
.askus p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2);max-width:42ch}
.askus .btn{flex:none;height:44px}
@media (min-width:700px){.askus{margin-inline:24px}}

/* The safety note sits on a white card inside the dark footer: its phone link must read as ink. */
.dfoot .safe a{color:var(--ink)}

/* ============================================================================
   Pre-launch: the one page a customer sees until the season's catalogue is ready.
   Built as a printed page, not from the catalogue's parts: ivory paper, champagne gold,
   one serif, squared buttons in ink, and the SELECT box filling the first screen and
   melting into the paper at top and bottom. The Ridhi Sidhi logo keeps its own red.
   ============================================================================ */
body[data-mode="prelaunch"] .nav{display:none}
body[data-mode="prelaunch"] .app:has(> .plpage){max-width:none;padding:0}
body[data-mode="prelaunch"] .app{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
/* No black on this page: headings and the main button in deep maroon, text in warm brown. */
.plpage{--iv:#F5EFE4;--iv2:#EFE6D6;--pink:#6B1824;--pink2:#7A6453;--pgold:#B08D57;--pgold2:#D9C29A;
  background:var(--iv);color:var(--pink)}
body[data-mode="prelaunch"]{background:#F5EFE4}
.plpage a{color:inherit;text-decoration:none}
.pl-cap{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--pink2);margin:0}
.pl-hero{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden}
.pl-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.pl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(245,239,228,.92) 0%,rgba(245,239,228,.35) 18%,rgba(245,239,228,0) 32%,
  rgba(245,239,228,0) 52%,rgba(245,239,228,.85) 76%,var(--iv) 90%)}
.pl-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px 48px}
.pl-where{justify-self:start}
.pl-nav{justify-self:end;display:flex;gap:28px}
.pl-nav a:hover{color:var(--pink)}
/* The logo signs the page once, bottom right, like a hallmark: the lid above already shows it. */
.pl-brand{position:absolute;z-index:2;right:48px;bottom:60px;text-align:center}
.pl-brand img{display:block;width:150px;height:auto;margin:0 auto}
.pl-sel{display:block;margin-top:8px;font-size:10px;letter-spacing:.62em;padding-left:.62em;color:var(--pgold);font-weight:600;text-transform:uppercase}
.pl-herotxt{position:absolute;z-index:2;left:0;right:0;bottom:56px;text-align:center;padding:0 24px}
.pl-soon{display:inline-block;margin:0;border:1px solid var(--pgold);padding:8px 16px;font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:600;background:rgba(245,239,228,.7)}
.plpage h1{font-family:var(--story);font-weight:500;font-size:64px;line-height:1.02;letter-spacing:-.025em;margin:16px 0 0;color:var(--pink)}
.pl-lede{margin:16px 0 0;font-size:16px;color:var(--pink2)}
.pl-ctas{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pl-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;transition:background .15s,color .15s}
.pl-btn.dark{background:var(--pink);color:var(--iv)!important}
.pl-btn.line{border:1px solid var(--pink)}
@media (hover:hover){.pl-btn.dark:hover{background:#8A1C2B}.pl-btn.line:hover{background:var(--pink);color:var(--iv)!important}}
/* How many are waiting: one line under the buttons, and the only new thing on this page.
   Quiet on purpose — the number is worth reading, not worth shouting. */
.pl-wait{margin:16px 0 0;font-size:13.5px;color:var(--pink2);letter-spacing:.01em}
.pl-wait b{font-weight:600;color:var(--pink);font-variant-numeric:tabular-nums}
.pl-sec{padding:120px 48px}
.pl-orn{display:flex;align-items:center;justify-content:center;gap:16px}
.pl-orn::before,.pl-orn::after{content:"";width:64px;height:1px;background:var(--pgold2)}
.pl-dots{display:grid;grid-template-columns:repeat(3,6px);gap:6px}
.pl-dots i{width:6px;height:6px;border-radius:50%;background:var(--pgold2)}
/* The one chosen dot turns red as it comes into view — the only movement on the page. */
.pl-dots i.c{background:#C8102E;animation:plchoose 1.6s .4s ease both}
@keyframes plchoose{from{background:var(--pgold2)}to{background:#C8102E}}
.pl-mani{text-align:center;max-width:996px;margin:0 auto}
.pl-mani h2{font-family:var(--story);font-weight:500;font-size:44px;line-height:1.18;letter-spacing:-.02em;margin:40px 0 0;text-wrap:balance}
.pl-mani p{margin:28px auto 0;max-width:560px;font-size:16.5px;line-height:1.75;color:var(--pink2)}
.pl-more{display:inline-block;margin-top:28px;border-bottom:1px solid var(--pgold);padding-bottom:4px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.pl-look{background:var(--iv2);text-align:center}
.plpage h3{font-family:var(--story);font-weight:500;font-size:34px;letter-spacing:-.015em;line-height:1.2;margin:14px 0 0;color:var(--pink);text-wrap:balance}
.pl-tiles{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:20px;max-width:1240px;margin:56px auto 0;text-align:left}
.pl-tile{margin:0;display:flex;flex-direction:column}
.pl-tile img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.pl-tile.pl-fill img{flex:1;aspect-ratio:auto;min-height:0}
.pl-tile figcaption{margin-top:16px}
.pl-tline{display:block;margin-top:8px;font-family:var(--story);font-weight:500;font-size:17px;line-height:1.35;color:var(--pink)}
.pl-two{display:grid;grid-template-columns:1fr 1px 1fr;gap:72px;max-width:1176px;margin:0 auto}
.pl-v{background:var(--pgold2)}
.pl-two ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;font-size:15.5px;color:var(--pink2)}
.pl-two li::before{content:"—";color:var(--pgold);margin-right:12px}
.pl-two p:not(.pl-cap){font-size:15.5px;line-height:1.7;color:var(--pink2);margin:26px 0 0}
.pl-last{text-align:center;border-top:1px solid var(--pgold2);max-width:1176px;margin:0 auto;padding-top:100px}
.pl-last h3{font-size:40px;margin-top:22px}
.pl-foot{text-align:center;padding:36px 24px 44px;font-size:11.5px;line-height:1.7;color:var(--pink2);letter-spacing:.04em}
.pl-foot a{border-bottom:1px solid var(--pgold2)}
@media (prefers-reduced-motion:reduce){.pl-dots i.c{animation:none}}
@media (max-width:700px){
  .pl-top{display:none}
  .pl-brand{position:relative;right:auto;bottom:auto;margin:0 auto;padding:0 0 8px}
  .pl-brand img{width:128px}.pl-sel{font-size:8.5px;margin-top:6px}
  .pl-hero{height:auto;min-height:0;overflow:visible}
  .pl-heroimg{position:relative;height:118vw;object-position:50% 55%}
  .pl-hero::after{bottom:auto;height:118vw}
  .pl-herotxt{position:relative;bottom:auto;margin-top:-90px;padding-bottom:44px}
  .plpage h1{font-size:40px}
  .pl-lede{font-size:15px}
  .pl-soon{font-size:10.5px;letter-spacing:.2em;padding:8px 12px}
  .pl-btn{height:48px;padding:0 22px;font-size:11px}
  .pl-wait{font-size:13px;margin-top:14px}
  .pl-sec{padding:80px 22px}
  .pl-mani h2{font-size:30px}
  .plpage h3{font-size:28px}
  .pl-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .pl-tile.pl-fill{grid-column:1/-1;order:-1}
  .pl-tile.pl-fill img{aspect-ratio:16/10;flex:none}
  .pl-two{grid-template-columns:1fr;gap:48px}.pl-v{display:none}
  .pl-last{margin:0 22px;padding:80px 0}
  .pl-last h3{font-size:28px}
}


/* ============================================================================
   Nothing a finger taps may carry text under 16px.

   Safari on iPhone zooms the whole page in the moment you focus a field whose
   text is smaller than 16px, and it does not zoom back out again - so the page
   sits enlarged and shifted sideways for the rest of the visit. That is the
   screen "jumping and going crooked" while someone types a mobile number into
   the customer search, and it was happening on the catalogue search, the
   quantity box on the enquiry page, the quotation line rows and every filter.

   There is no way to decline the zoom; the only cure is for no field to be
   under 16px. Scoped to touch screens so a mouse keeps the tighter sizes, and
   it has to be !important because the rules it corrects are more specific.

   Only the boxes you can actually type into are touched. A tick box, a radio
   button, a slider and a file picker draw themselves from their text size in
   some browsers, so making those bigger would move the furniture for no gain -
   and none of them raise a keyboard, so none of them can trigger the zoom.
   ============================================================================ */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}