/* ==========================================================================
   Shree Babuji Jodhpur Misthan Bhandar — app-style UI prototype
   --------------------------------------------------------------------------
   Static HTML prototype for client approval. Converted to the PHP CMS only
   after sign-off.

   DIALS      variance 2 · motion 3 · density 8
   Why: this is a delivery app, not a brochure. The customer came to order, so
   the layout follows the pattern they already know from every other delivery
   app. Adventurous layout here would cost orders.

   TYPE       Plus Jakarta Sans throughout; Fraunces only on the brand mark.
   The live site sets every heading in a display serif, which is what made it
   read as "a website about a sweet shop" instead of "the shop's ordering app".
   One clean sans, tight and bold, is what makes a catalogue feel like an app.

   COLOUR     Taken from the shop itself — cream mithai box, the red of the
   sign, marigold gold. Neutrals are browned, never dead grey: a grey next to
   cream looks like a rendering fault.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --cream:#FBF5EC;
  --surface:#FFFFFF;
  --surface-2:#F6EFE3;
  --surface-3:#EFE6D7;

  --ink:#1A1210;
  --ink-2:#6B5D4D;          /* browned, not #888 */
  --ink-3:#9D8E7C;
  --line:#EDE2D0;
  --line-2:#E2D4BD;

  --red:#C8161D;
  --red-dark:#A31218;
  --red-tint:#FDF0F0;
  --gold:#C9962C;
  --gold-tint:#FBF2DF;
  --green:#1C7A3C;
  --green-tint:#E7F4EB;

  /* ---- type ---- */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-brand:'Fraunces',Georgia,serif;
  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem;
  --fs-16:1rem; --fs-18:1.125rem; --fs-22:1.375rem; --fs-28:1.75rem;

  /* ---- space (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* ---- shape ---- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(26,18,16,.06), 0 1px 1px rgba(26,18,16,.04);
  --sh-2:0 6px 20px rgba(26,18,16,.10);
  --sh-3:0 14px 40px rgba(26,18,16,.18);

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:180ms;

  --shell:1200px;            /* desktop content width */
  --bar-h:60px;
  --nav-h:62px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-14);line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
/* A hidden element with its own display rule stays visible without this. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* The site stylesheet sets a display serif on every heading. One clean sans,
   tight and bold, is what makes a catalogue feel like an app; the serif is
   kept for the brand mark and for the content pages, which are read, not
   shopped. */
h1,h2,h3,h4{margin:0;font-family:var(--font);font-weight:800;
  letter-spacing:-.015em;line-height:1.2}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s4)}
@media (min-width:900px){ .wrap{padding-inline:var(--s6)} }

/* ==========================================================================
   1 · ORDER BAR — the signature of the whole thing
   The one place this design is allowed to be loud: how soon, and from where.
   ========================================================================== */
.obar{background:var(--cream);border-bottom:1px solid var(--line)}
.obar .wrap{padding-block:var(--s3) var(--s3)}
.obar-top{display:flex;align-items:center;gap:var(--s4)}
.obar-eta{flex:1;min-width:0}
.obar-lead{display:block;font-size:var(--fs-11);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.obar-time{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:1px}
.obar-time b{font-size:var(--fs-22);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.obar-km{background:var(--surface-3);color:var(--ink-2);border-radius:var(--r-full);
  padding:3px 9px;font-size:var(--fs-11);font-weight:800;white-space:nowrap}
.obar-addr{display:flex;align-items:center;gap:5px;margin-top:3px;
  font-size:var(--fs-13);color:var(--ink-2);font-weight:600;
  max-width:100%;overflow:hidden}
.obar-addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obar-addr svg{width:14px;height:14px;flex:none;color:var(--red)}
.obar-addr svg:last-child{width:13px;height:13px;color:var(--ink-3)}

/* The two facts that decide whether a basket gets finished. The separator is
   carried by the item that follows it, so a wrap never leaves a dot stranded
   at the end of a line. */
.strip{display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--s2);row-gap:2px;
  padding-top:var(--s4);font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.strip span + span::before{content:"\00B7";margin-right:var(--s2);color:var(--ink-3)}
.strip-i{color:var(--green)}
.obar-avatar{width:38px;height:38px;flex:none;margin-left:auto;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.obar-avatar svg{width:22px;height:22px}

.search{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px var(--s4)}
.search svg{width:18px;height:18px;flex:none;color:var(--ink-3)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--fs-14);font-weight:500}
.search input::placeholder{color:var(--ink-3)}

/* The brand row. The shop's own logo, at every width. */
.obar-brandrow{display:flex;align-items:center;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
.obar-logo{display:block;flex:none}
.obar-logo img{height:26px;width:auto}
/* The shop's name in full, beside the mark, at every width — the oval alone
   says "Babuji" and nothing else, and on a phone that is the only branding
   the customer ever sees. */
.obar-name{flex:1;min-width:0;line-height:1.1}
.obar-name b{display:block;font-family:var(--font-brand);font-size:var(--fs-14);
  font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.obar-name em{font-style:normal;color:var(--red)}
.obar-name span{display:block;margin-top:1px;font-size:9px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obar-links{display:none;gap:var(--s6);margin-left:auto;font-size:var(--fs-14);font-weight:700}
.obar-links a{color:var(--ink-2)}
.obar-links a:hover{color:var(--red)}
.obar-cartbtn{display:none;position:relative;align-items:center;gap:7px;
  height:38px;padding-inline:var(--s4);border-radius:var(--r-full);
  background:var(--ink);color:#fff;font-size:var(--fs-13);font-weight:800}
.obar-cartbtn svg{width:17px;height:17px}
/* The count inside the dark pill needs its own rule: the badge styling is
   scoped to .bnav, so without this it renders as a bare red block. White on
   the black pill, because red on black is the one pairing that disappears. */
.obar-cartbtn .badge{position:static;transform:none;
  min-width:19px;height:19px;padding:0 6px;border-radius:var(--r-full);
  background:#fff;color:var(--ink);font-size:11px;font-weight:800;
  display:grid;place-items:center;line-height:1}

@media (min-width:900px){
  .obar-logo img{height:34px}
  .obar-name{flex:none}
  .obar-name b{font-size:var(--fs-18)}
  .obar-name span{font-size:10px;margin-top:2px}
  .obar-links{display:flex}
  .obar-cartbtn{display:inline-flex}
  .obar-avatar{display:none}      /* the header already carries the account */
  .search{max-width:720px}
  .bnav{display:none}
  body{padding-bottom:var(--s8)}
}

/* ==========================================================================
   2 · SECTION HEADS
   ========================================================================== */
.sec{padding-block:var(--s5)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4)}
.sec-head h1,.sec-head h2{font-size:var(--fs-18)}
@media (min-width:700px){ .sec-head h1,.sec-head h2{font-size:var(--fs-22)} }
.sec-all{font-size:var(--fs-13);font-weight:800;color:var(--red);flex:none;white-space:nowrap}

/* ==========================================================================
   3 · CATEGORY TILES — square picture, name underneath
   The name sits under the tile, not burnt into the photograph: at this size
   text over a picture of food is unreadable, and every delivery app learned
   the same thing.
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s2)}
@media (min-width:700px){ .tiles{grid-template-columns:repeat(6,1fr);gap:var(--s4)} }
@media (min-width:1000px){ .tiles{grid-template-columns:repeat(8,1fr)} }
.tile{display:block;text-align:center}
/* display:block matters — a <span> is inline, and an inline box ignores both
   aspect-ratio and the child image's height:100%, so the tile collapses and
   the photograph spills over the name underneath it. */
.tile-img{display:block;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface-2);max-width:128px;margin-inline:auto}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.tile:active .tile-img img{transform:scale(.96)}
.tile-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:6px;font-size:var(--fs-12);font-weight:700;
  line-height:1.25;color:var(--ink);text-wrap:balance}

/* ==========================================================================
   4 · PRODUCT CARD
   The ADD button overlaps the bottom of the photo — it is the one control on
   the card, so it sits on the thing being bought rather than in a row of text
   below it. Same reason the price leads: price, then name, then weight.
   ========================================================================== */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(142px,1fr);
  gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:var(--s2);margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4);
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
@media (min-width:700px){ .rail{grid-auto-columns:minmax(170px,1fr);
  margin-inline:0;padding-inline:0} }

.grid-p{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media (min-width:600px){ .grid-p{grid-template-columns:repeat(3,1fr);gap:var(--s4)} }
@media (min-width:900px){ .grid-p{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1150px){ .grid-p{grid-template-columns:repeat(5,1fr)} }

.pcard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s2) var(--s2) var(--s3);position:relative}
/* display:block, not the <a>'s default inline: an inline box ignores
   aspect-ratio, and the image inside it then renders at its natural height and
   bursts out of the card. */
.pcard-media{display:block;position:relative;aspect-ratio:1;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2)}
.pcard-media img{width:100%;height:100%;object-fit:cover}
.pcard-veg{position:absolute;top:6px;left:6px;width:15px;height:15px;border-radius:3px;
  background:#fff;border:1.5px solid var(--green);display:grid;place-items:center}
.pcard-veg i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.pcard-body{position:relative;flex:1;display:flex;flex-direction:column;
  padding-top:var(--s4)}
.pcard-name{font-size:var(--fs-13);font-weight:700;color:var(--ink);
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em}
.pcard-unit{margin-top:3px;font-size:var(--fs-11);color:var(--ink-3);font-weight:700}
.pcard-price{margin-top:auto;padding-top:var(--s2);
  font-weight:800;font-size:var(--fs-16);letter-spacing:-.02em}

/* ADD / stepper — straddles the photo's lower edge, so the one control on the
   card sits on the thing being bought. */
.addwrap{position:absolute;right:0;top:-16px;z-index:2}
.btn-add{min-width:72px;height:32px;border:1.5px solid var(--red);border-radius:var(--r-sm);
  background:var(--surface);color:var(--red);font-size:var(--fs-12);font-weight:800;
  letter-spacing:.04em;box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease)}
.btn-add:active{transform:scale(.94)}
.stepper{display:flex;align-items:center;min-width:72px;height:32px;
  border-radius:var(--r-sm);background:var(--red);color:#fff;box-shadow:var(--sh-1);
  overflow:hidden}
.stepper button{width:26px;height:32px;display:grid;place-items:center;
  font-size:var(--fs-16);font-weight:800;color:#fff}
.stepper button:active{background:var(--red-dark)}
.stepper .n{flex:1;text-align:center;font-size:var(--fs-13);font-weight:800}
.pcard-oos{position:absolute;inset:0;background:rgba(251,245,236,.78);border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:var(--fs-11);font-weight:800;color:var(--ink-2)}

/* ==========================================================================
   5 · STORE CARD
   ========================================================================== */
.stores{display:grid;gap:var(--s4)}
@media (min-width:800px){ .stores{grid-template-columns:repeat(2,1fr)} }
.store{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.store-media{display:block;position:relative;aspect-ratio:16/7;background:var(--surface-2)}
.store-media img{width:100%;height:100%;object-fit:cover}
.store-open{position:absolute;top:var(--s3);left:var(--s3);background:#fff;color:var(--green);
  border-radius:var(--r-full);padding:4px 10px;font-size:var(--fs-11);font-weight:800;
  box-shadow:var(--sh-1)}
.store-open.is-shut{color:var(--red)}
.store-km{position:absolute;right:var(--s3);bottom:var(--s3);background:rgba(26,18,16,.76);
  color:#fff;border-radius:var(--r-full);padding:4px 10px;font-size:var(--fs-11);font-weight:700}
.store-body{padding:var(--s4)}
.store-name{font-size:var(--fs-16)}
.store-addr{margin-top:3px;font-size:var(--fs-13);color:var(--ink-2)}
.store-stats{display:flex;gap:var(--s6);margin-top:var(--s3)}
.store-stat b{display:block;font-size:var(--fs-13);font-weight:800}
.store-stat span{font-size:var(--fs-11);color:var(--ink-3);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.store-acts{display:flex;gap:var(--s2);margin-top:var(--s4)}

/* ==========================================================================
   6 · BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:44px;padding-inline:var(--s5);border-radius:var(--r-sm);
  font-size:var(--fs-14);font-weight:800;transition:transform var(--dur) var(--ease),
  background var(--dur) var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-block{width:100%}
.btn-sm{height:36px;padding-inline:var(--s4);font-size:var(--fs-13)}
.btn svg{width:17px;height:17px;flex:none}
/* A faded red still reads as "press me". A disabled control should look like
   furniture, not like the button it will become. */
.btn:disabled{background:var(--surface-3);color:var(--ink-3);
  border-color:transparent;pointer-events:none}

/* ==========================================================================
   7 · FLOATING CART PILL
   ========================================================================== */
/* A pill is only a pill if it is the width of its own contents. width:max-content
   is what keeps it from stretching: a fixed box with left and right both set
   would fill the line, which is the bar this was meant to replace. */
.cartpill{position:fixed;left:50%;transform:translate(-50%,140%);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s3));
  z-index:50;width:max-content;max-width:min(90vw,340px);
  transition:transform .28s var(--ease)}
.cartpill.is-on{transform:translate(-50%,0)}
.cartpill-inner{display:flex;align-items:center;gap:var(--s2);
  background:var(--red);color:#fff;border-radius:var(--r-full);
  padding:5px 6px 5px 8px;box-shadow:var(--sh-3)}
.cartpill-thumbs{display:flex;flex:none}
.cartpill-thumbs img{width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.92);margin-right:-8px;background:var(--surface-2)}
.cartpill-thumbs img:last-child{margin-right:0}
.cartpill-meta{min-width:0;line-height:1.15;padding-inline:var(--s1) 2px}
.cartpill-meta b{display:block;font-size:var(--fs-12);font-weight:800;white-space:nowrap}
.cartpill-meta span{display:block;font-size:10px;font-weight:700;
  letter-spacing:.03em;color:rgba(255,255,255,.82);white-space:nowrap}
.cartpill-go{width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.cartpill-go svg{width:14px;height:14px}

/* Desktop: out of the middle and into the corner, where it is a reminder
   rather than something to step over. Declared here, after the base rule,
   so it actually wins. */
@media (min-width:900px){
  .cartpill{left:auto;right:var(--s6);
    bottom:calc(var(--s6) + env(safe-area-inset-bottom));
    transform:translateY(180%)}
  .cartpill.is-on{transform:none}
}

/* ==========================================================================
   8 · BOTTOM NAV
   ========================================================================== */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bnav ul{display:flex;margin:0;padding:0;list-style:none}
.bnav li{flex:1}
.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:var(--nav-h);font-size:var(--fs-11);font-weight:700;color:var(--ink-3)}
.bnav a svg{width:21px;height:21px}
.bnav a.is-on{color:var(--red)}
.bnav-ico{position:relative;display:block}
.bnav .badge{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;
  padding:0 4px;border-radius:var(--r-full);background:var(--red);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center}

/* ==========================================================================
   9 · CATEGORY CHIP ROW (menu page)
   ========================================================================== */
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--s4) * -1);padding:var(--s1) var(--s4) var(--s3)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding-inline:var(--s4);border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line-2);
  font-size:var(--fs-13);font-weight:700;color:var(--ink-2);
  display:inline-flex;align-items:center}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ==========================================================================
   9b · CHIP BAR, PRODUCT PAGE, CART LINES
   ========================================================================== */
.chipbar{position:sticky;top:0;z-index:38;background:var(--cream);
  border-bottom:1px solid var(--line)}
.chipbar .chips{padding-block:var(--s3)}

/* --- product page --- */
.pdp-media{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.pdp-media img{width:100%;height:100%;object-fit:cover}
.pdp-media .pcard-veg{top:var(--s3);left:var(--s3);width:19px;height:19px}
.pdp-body{padding-block:var(--s5)}
.pdp-name{font-size:var(--fs-22);margin-top:var(--s3)}
.pdp-note{margin-top:var(--s2);font-size:var(--fs-13);color:var(--ink-2);max-width:60ch}
.pdp-lab{display:block;font-size:var(--fs-12);font-weight:800;color:var(--ink-2);
  margin-bottom:var(--s2)}
.pdp-packs{margin-top:var(--s5)}
.packs{display:flex;gap:var(--s2);flex-wrap:wrap}
.pack{min-width:88px;padding:9px var(--s4);border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);text-align:left;
  transition:border-color var(--dur) var(--ease)}
.pack b{display:block;font-size:var(--fs-13);font-weight:800}
.pack span{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:1px}
.pack.is-on{border-color:var(--red);background:var(--red-tint)}
.pdp-buy{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.pdp-price b{display:block;font-size:var(--fs-22);font-weight:800;letter-spacing:-.025em}
.pdp-price span{display:block;font-size:var(--fs-12);color:var(--ink-3);font-weight:700}
.pdp-act .btn-add,.pdp-act .stepper{min-width:132px;height:44px}
.pdp-act .stepper button{width:40px;height:44px}
.facts{display:grid;gap:var(--s3);margin:var(--s5) 0 0;padding:0;list-style:none}
.facts li{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-13);
  font-weight:600;color:var(--ink-2)}
.facts svg{width:17px;height:17px;flex:none;color:var(--red)}
@media (min-width:900px){
  .pdp{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
    gap:var(--s8);align-items:start;max-width:var(--shell);margin-inline:auto;
    padding:var(--s6) var(--s6) 0}
  .pdp-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1}
  .pdp-body{padding:0}
}

/* --- cart lines --- */
.panel-flush{padding:0 var(--s4)}
.citem{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.citem + .citem{border-top:1px solid var(--line)}
.citem-media{display:block;width:54px;height:54px;flex:none;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2)}
.citem-media img{width:100%;height:100%;object-fit:cover}
.citem-main{flex:1;min-width:0}
.citem-main b{display:block;font-size:var(--fs-13);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem-main span{display:block;font-size:var(--fs-12);color:var(--ink-3);
  font-weight:600;margin-top:2px}
.citem-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.citem-sum{font-size:var(--fs-13);font-weight:800}
.stepper-sm{min-width:84px;height:28px}
.stepper-sm button{width:28px;height:28px;font-size:var(--fs-14)}

.addmore{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:var(--s3);padding:var(--s3);border:1px dashed var(--line-2);
  border-radius:var(--r-sm);font-size:var(--fs-13);font-weight:800;color:var(--red)}
.addmore svg{width:16px;height:16px}
.note{margin-top:var(--s3)}
.panel-h{font-size:var(--fs-14);margin-bottom:var(--s3)}

@media (min-width:900px){
  .cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;
    gap:var(--s6);align-items:start;padding-top:var(--s6)}
  .cart-side{position:sticky;top:96px}
}

/* ==========================================================================
   10 · PANELS, ROWS, FORMS
   ========================================================================== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4)}
.panel + .panel{margin-top:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.row + .row{border-top:1px solid var(--line)}
.row-main{flex:1;min-width:0}
.row-main b{display:block;font-size:var(--fs-14);font-weight:700}
.row-main span{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:1px}

.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-12);font-weight:800;margin-bottom:6px;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 var(--s4);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);outline:none}
.field textarea{height:auto;padding:var(--s3) var(--s4);min-height:80px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-tint)}
.field .hint{display:block;margin-top:5px;font-size:var(--fs-12);color:var(--ink-3)}

.bill{display:grid;gap:var(--s3)}
.bill-row{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--fs-13);color:var(--ink-2)}
.bill-row.is-free{color:var(--green);font-weight:800}
.bill-total{display:flex;justify-content:space-between;gap:var(--s4);
  padding-top:var(--s3);border-top:1px dashed var(--line-2);font-weight:800;font-size:var(--fs-16)}

.note{background:var(--gold-tint);border:1px solid #EBDCB4;border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:var(--fs-12);color:#6B5324;font-weight:600}

/* ==========================================================================
   11 · CHECKOUT — its own slim bar, nothing else
   ========================================================================== */
body.is-focused{padding-bottom:0}
.ckbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.ckbar .wrap{display:flex;align-items:center;gap:var(--s4);min-height:var(--bar-h)}
.ckbar-back{width:38px;height:38px;margin-left:-8px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2)}
.ckbar-back:hover{background:var(--surface-2);color:var(--red)}
.ckbar-back svg{width:20px;height:20px}
.ckbar-brand{flex:1;display:flex;justify-content:center}
.ckbar-brand img{height:30px;width:auto}
.ckbar-title{flex:1;min-width:0;font-size:var(--fs-16);font-weight:800;
  letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckbar-spacer{flex:none;width:30px}
.ckbar-safe{display:flex;align-items:center;gap:5px;flex:none;color:var(--green);
  font-size:var(--fs-11);font-weight:800}
.ckbar-safe svg{width:15px;height:15px}

.steps{margin-bottom:var(--s5)}
.steps-label{font-size:var(--fs-13);font-weight:800;margin-bottom:7px}
.steps-bar{height:5px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.steps-bar i{display:block;height:100%;border-radius:var(--r-full);background:var(--red);
  transition:width .3s var(--ease)}

/* The action that finishes the page, parked at the bottom of the screen so it
   is reachable with a thumb and never has to be hunted for. */
.stickybtn{position:sticky;bottom:0;z-index:30;margin-top:var(--s6);
  padding:var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--cream) 62%,rgba(251,245,236,0))}

/* The live checkout's own radio rows, given the approved picker's shape. */
.pay-methods{display:grid;gap:var(--s2)}
.choice{display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .dot{width:19px;height:19px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);display:grid;place-items:center}
.choice:has(input:checked){border-color:var(--red);background:var(--red-tint)}
.choice:has(input:checked) .dot{border-color:var(--red)}
.choice:has(input:checked) .dot::after{content:"";width:9px;height:9px;
  border-radius:50%;background:var(--red)}
.choice-body{flex:1;min-width:0}
.choice-title{display:block;font-size:var(--fs-14);font-weight:800}
.choice-sub{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:1px}
.pay-logo{display:flex;gap:4px;flex:none}
.pay-logo span{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:4px;padding:2px 4px}

/* The desktop chip row; the phone gets the line + bar above it. */
#ckStepper .st{display:none}
@media (min-width:820px){
  #ckStepper{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
  #ckStepper .steps{flex:0 0 100%}
  #ckStepper .st{display:inline-flex;align-items:center;gap:7px;height:34px;
    padding-inline:var(--s3);border-radius:var(--r-full);background:var(--surface-2);
    font-size:var(--fs-12);font-weight:800;color:var(--ink-3)}
  #ckStepper .st-n{width:19px;height:19px;border-radius:50%;background:var(--line);
    color:var(--ink-2);display:grid;place-items:center;font-size:10px}
  #ckStepper .st.is-active{background:var(--ink);color:#fff}
  #ckStepper .st.is-active .st-n{background:var(--red);color:#fff}
  #ckStepper .st.is-done{background:var(--green-tint);color:var(--green)}
  #ckStepper .st.is-done .st-n{background:var(--green);color:#fff}
}

/* ==========================================================================
   12 · SHEET (payment method, address picker)
   ========================================================================== */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(26,18,16,.45);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease)}
.scrim.is-on{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s5) var(--s4)
  calc(var(--s5) + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .26s var(--ease);
  max-height:86vh;overflow-y:auto}
.sheet.is-on{transform:none}
@media (min-width:700px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(460px,92vw);
    transform:translate(-50%,-46%) scale(.98);border-radius:var(--r-lg);opacity:0}
  .sheet.is-on{transform:translate(-50%,-50%);opacity:1}
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4)}
.sheet-head h3{font-size:var(--fs-18)}
.sheet-x{width:32px;height:32px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;color:var(--ink-2)}
.sheet-x svg{width:16px;height:16px}

.pick{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface)}
.pick + .pick{margin-top:var(--s2)}
.pick.is-on{border-color:var(--red);background:var(--red-tint)}
.pick-dot{width:19px;height:19px;flex:none;border-radius:50%;border:2px solid var(--line-2);
  display:grid;place-items:center}
.pick.is-on .pick-dot{border-color:var(--red)}
.pick.is-on .pick-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red)}
.pick-main{flex:1;min-width:0}
.pick-main b{display:block;font-size:var(--fs-14);font-weight:800}
.pick-main span{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:1px}
.pick-price{flex:none;font-size:var(--fs-14);font-weight:800}
.sheet-sub{margin:calc(var(--s3) * -1) 0 var(--s3);font-size:var(--fs-12);
  font-weight:700;color:var(--ink-3)}

/* ==========================================================================
   13 · MAP PIN (address)
   ========================================================================== */
/* A drawn map, not a live one. The prototype is for judging the flow, and a
   real map key has no business in a file that gets emailed around. */
.mapbox{position:relative;aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(0deg,#EFE8DA 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,#EFE8DA 0 1px,transparent 1px 30px),
    var(--surface-2);
  border:1px solid var(--line)}
.mapbox::before{content:"";position:absolute;left:-10%;top:68%;width:120%;height:14px;
  background:#E6DAC5;transform:rotate(-4deg)}
.mapbox::after{content:"";position:absolute;left:24%;top:-10%;width:12px;height:120%;
  background:#E6DAC5;transform:rotate(7deg)}
/* The 5 km ring. Everything about the rule is in this one circle: the shop at
   its centre, the limit at its edge, and the customer's pin either inside it
   or not. */
.mapring{position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px dashed rgba(200,22,29,.45);background:rgba(200,22,29,.06)}
.mapring i{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-full);
  padding:2px 8px;font-size:10px;font-weight:800;font-style:normal;color:var(--red)}
.mapbox.is-out .mapring{border-color:rgba(26,18,16,.25);background:rgba(26,18,16,.04)}
.mapbox.is-out .mapring i{color:var(--ink-3)}
.mapshop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;box-shadow:var(--sh-1)}
.mapshop svg{width:15px;height:15px}
.mapbox{touch-action:none;cursor:crosshair;user-select:none}
.mappin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:2;
  color:var(--red);filter:drop-shadow(0 7px 7px rgba(26,18,16,.22));
  pointer-events:none;transition:left .08s linear,top .08s linear}
.mapbox.is-out .mappin{color:var(--ink-2)}
.mappin svg{width:36px;height:36px;fill:var(--red);stroke:#fff;stroke-width:1.6}
.mappin svg circle{fill:#fff;stroke:none}
.mappin::after{content:"";position:absolute;left:50%;bottom:-6px;width:16px;height:5px;
  border-radius:50%;background:rgba(26,18,16,.22);transform:translateX(-50%)}
.maptip{position:absolute;left:50%;top:calc(50% - 52px);transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:6px 11px;
  font-size:var(--fs-11);font-weight:700;white-space:nowrap}
.maploc{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-full);
  padding:8px var(--s4);font-size:var(--fs-12);font-weight:800;display:flex;
  align-items:center;gap:6px;box-shadow:var(--sh-1);white-space:nowrap}
.maploc svg{width:15px;height:15px;color:var(--red)}

/* ==========================================================================
   13b · CHECKOUT, ACCOUNT, ORDER SCREENS
   ========================================================================== */
.ck{padding-top:var(--s5);max-width:640px}
.muted{font-size:var(--fs-13);color:var(--ink-2)}
.opt{font-weight:600;color:var(--ink-3);text-transform:none;letter-spacing:0}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.panel-row .panel-h{margin-bottom:var(--s3)}
.panel-link{font-size:var(--fs-13);font-weight:800;color:var(--red);
  background:none;border:0;padding:0;cursor:pointer}

/* delivery / pickup */
.segs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s3)}
.seg{padding:var(--s3) var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);text-align:left;font-size:var(--fs-13);font-weight:800;
  transition:border-color var(--dur) var(--ease)}
.seg span{display:block;font-size:var(--fs-11);font-weight:700;color:var(--ink-3);margin-top:2px}
.seg.is-on{border-color:var(--red);background:var(--red-tint);color:var(--red)}
.seg.is-on span{color:var(--red)}

/* the basket, read back line by line before paying */
.panel-note{font-size:var(--fs-12);font-weight:700;color:var(--ink-3)}
.cksum{display:grid}
.cksum-row{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.cksum-row + .cksum-row{border-top:1px solid var(--line)}
.cksum-media{display:block;width:42px;height:42px;flex:none;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2)}
.cksum-media img{width:100%;height:100%;object-fit:cover}
.cksum-main{flex:1;min-width:0}
.cksum-main b{display:block;font-size:var(--fs-13);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cksum-main span{display:block;font-size:var(--fs-12);color:var(--ink-3);
  font-weight:600;margin-top:2px}
.cksum-amt{flex:none;font-size:var(--fs-13);font-weight:800}
.cksum-more{display:block;width:100%;padding:var(--s2);margin-top:var(--s2);
  border-radius:var(--r-sm);background:var(--surface-2);
  font-size:var(--fs-12);font-weight:800;color:var(--ink-2)}
.cksum-edit{display:inline-flex;align-items:center;gap:5px;margin:var(--s3) 0 var(--s4);
  font-size:var(--fs-12);font-weight:800;color:var(--red)}
.cksum-edit svg{width:14px;height:14px}

.ck-thumbs{display:flex;gap:var(--s2);flex-wrap:wrap}
.ck-thumb{position:relative;display:block;width:40px;height:40px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2);flex:none}
.ck-thumb img{width:100%;height:100%;object-fit:cover}
.ck-thumb b{position:absolute;right:0;bottom:0;background:var(--ink);color:#fff;
  font-size:10px;font-weight:800;padding:0 4px;border-radius:5px 0 0 0}

/* number + code */
.phone{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:0 var(--s4);height:52px;background:var(--surface)}
.phone:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.phone span{font-weight:800;color:var(--ink-2);flex:none}
.phone input{flex:1;min-width:0;border:0;outline:none;background:none;
  font-size:var(--fs-18);font-weight:700;letter-spacing:.04em}
.otp input{width:100%;height:60px;text-align:center;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);outline:none;
  font-size:var(--fs-28);font-weight:800;letter-spacing:.42em;text-indent:.42em}
.otp input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.bignum{font-size:var(--fs-18);font-weight:800;letter-spacing:.02em;margin-bottom:var(--s2)}
.confirm-line{font-size:var(--fs-13);font-weight:700;line-height:1.5}
.confirm-line.muted{font-weight:600}
.hello{margin-bottom:var(--s5)}
.hello-logo{height:96px;width:auto;margin-bottom:var(--s4)}
.hello h1{font-size:var(--fs-28);letter-spacing:-.03em}
.hello p{margin-top:var(--s2);font-size:var(--fs-13);color:var(--ink-2);max-width:46ch}
.fineprint{margin-top:var(--s3);font-size:var(--fs-11);color:var(--ink-3);font-weight:600}

/* address form */
/* The verdict, in words, under the map. */
.mapstat{display:flex;align-items:flex-start;gap:var(--s3);margin:var(--s3) 0 var(--s4);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:var(--fs-12)}
.mapstat svg{width:17px;height:17px;flex:none;margin-top:1px}
.mapstat b{display:block;font-size:var(--fs-13);font-weight:800}
.mapstat span span{display:block;margin-top:2px;line-height:1.5}
.mapstat.is-in{background:var(--green-tint);color:var(--green)}
.mapstat.is-in span span{color:#2B6B41}
.mapstat.is-out{background:var(--red-tint);color:var(--red)}
.mapstat.is-out span span{color:#8A3A3C}

.acard-km{display:flex;align-items:center;gap:5px;margin-top:6px;
  font-size:var(--fs-12);font-weight:700}
.acard-km svg{width:14px;height:14px;flex:none}
.acard-km.is-in{color:var(--green)}
.acard-km.is-out{color:var(--red)}

/* an address we cannot deliver to */
.pickrow.is-far .pick{opacity:.55;cursor:not-allowed}
.pickrow.is-far .pick-main i{font-style:normal;margin-left:5px;vertical-align:1px}
.note-red{background:var(--red-tint);border-color:#F2CFD0;color:#8A3A3C}
.farfix{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

.mapnote{margin:var(--s2) 0 var(--s4)}
.labels{display:flex;gap:var(--s2)}
.lab{height:38px;padding-inline:var(--s4);border-radius:var(--r-full);
  border:1.5px solid var(--line-2);background:var(--surface);
  font-size:var(--fs-13);font-weight:800;color:var(--ink-2)}
.lab.is-on{border-color:var(--red);background:var(--red-tint);color:var(--red)}

/* rows with an icon */
.row-ico{width:34px;height:34px;flex:none;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;color:var(--ink-2)}
.row-ico svg{width:17px;height:17px}
.row-chev{flex:none;color:var(--ink-3)}
.row-chev svg{width:17px;height:17px}
.row-x{flex:none;width:34px;height:34px;border-radius:50%;color:var(--ink-3);
  display:grid;place-items:center}
.row-x:hover{background:var(--red-tint);color:var(--red)}
.row-x svg{width:17px;height:17px}
.row-main .tag{margin-left:5px;vertical-align:1px;font-style:normal}

.who{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.who-ico{width:50px;height:50px;flex:none;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}
.who-ico svg{width:27px;height:27px}
.who b{display:block;font-size:var(--fs-16);font-weight:800}
.who span{display:block;font-size:var(--fs-13);color:var(--ink-2);font-weight:600}

/* order list + detail */
.ocard{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s3)}
.ocard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.ocard-when{font-size:var(--fs-12);color:var(--ink-3);font-weight:700}
.ocard-thumbs{display:flex;gap:var(--s2);margin-top:var(--s3)}
.ocard-items{margin-top:var(--s3);font-size:var(--fs-13);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ocard-foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.ocard-foot b{font-size:var(--fs-16);font-weight:800}
.ocard-go{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-13);
  font-weight:800;color:var(--red)}
.ocard-go svg{width:15px;height:15px}

.done{text-align:center;padding:var(--s6) 0 var(--s5)}
.done-tick{width:62px;height:62px;margin:0 auto var(--s4);border-radius:50%;
  background:var(--green-tint);color:var(--green);display:grid;place-items:center;
  animation:pop .45s var(--ease) both}
.done-tick svg{width:30px;height:30px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.done h1{font-size:var(--fs-28);letter-spacing:-.03em}
.done p{margin-top:var(--s2);font-size:var(--fs-13);color:var(--ink-2)}
.done-id{font-weight:800;color:var(--ink) !important;margin-top:var(--s3) !important}

.track{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s3)}
.track-step{display:flex;gap:var(--s3);padding-bottom:var(--s4);position:relative}
.track-step:last-child{padding-bottom:0}
.track-step::before{content:"";position:absolute;left:10px;top:22px;bottom:0;
  width:2px;background:var(--line)}
.track-step:last-child::before{display:none}
.track-step.is-done::before{background:var(--green)}
.track-dot{position:relative;z-index:1;width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--surface-3);display:grid;place-items:center;color:#fff}
.track-dot svg{width:13px;height:13px}
.track-step.is-done .track-dot{background:var(--green)}
.track-main b{display:block;font-size:var(--fs-13);font-weight:800}
.track-main span{display:block;font-size:var(--fs-12);color:var(--ink-3);margin-top:1px}

.order-acts{display:grid;gap:var(--s2);margin-top:var(--s4)}
.order-acts svg{width:17px;height:17px}

.shophero{position:relative;aspect-ratio:16/9;background:var(--surface-2)}
.shophero img{width:100%;height:100%;object-fit:cover}
.shophero .store-open{top:var(--s4);left:var(--s4)}
.store.is-on{border-color:var(--red)}
.chips-wrap{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}

/* ==========================================================================
   13c · ADDRESS BOOK
   ========================================================================== */
.alist{display:grid;gap:var(--s3)}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4)}
.acard.is-default{border-color:var(--line-2);box-shadow:inset 3px 0 0 var(--green)}
.acard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.acard-label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:800}
.acard-label svg{width:16px;height:16px;color:var(--red)}
.acard-line{margin-top:5px;font-size:var(--fs-13);color:var(--ink-2);line-height:1.5}
.acard-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.abtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding-inline:var(--s3);
  border-radius:var(--r-full);background:var(--surface-2);
  font-size:var(--fs-12);font-weight:800;color:var(--ink-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.abtn svg{width:14px;height:14px}
.abtn:hover{background:var(--surface-3);color:var(--ink)}
.abtn-x:hover{background:var(--red-tint);color:var(--red)}
.checkrow{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-13);font-weight:700}
.checkrow input{width:19px;height:19px;accent-color:var(--red);flex:none}
.sheet-acts{display:grid;gap:var(--s2);margin-top:var(--s4)}

/* an address row in checkout: choose on the left, correct on the right */
.pickrow{display:flex;align-items:stretch;gap:var(--s2)}
.pickrow + .pickrow{margin-top:var(--s2)}
.pickrow .pick{flex:1;min-width:0;margin-top:0}
.pick-edit{flex:none;width:44px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-3)}
.pick-edit:hover{border-color:var(--red);color:var(--red)}
.pick-edit svg{width:17px;height:17px}

/* ==========================================================================
   13d · SEO CONTENT + SITE FOOTER
   The only two places on the site that are written for a reader rather than a
   shopper. Both sit below everything else, so neither can get between a
   customer and the ADD button.
   ========================================================================== */
.seo-sec{border-top:1px solid var(--line);margin-top:var(--s5)}
.seo-sec h2{font-size:var(--fs-18);max-width:28ch;text-wrap:balance}
.seo-sec h3{font-size:var(--fs-14);margin-top:var(--s5)}
.seo-sec p{margin-top:var(--s3);font-size:var(--fs-13);line-height:1.65;
  color:var(--ink-2);max-width:72ch;text-wrap:pretty}
.seo-sec a{color:var(--red);font-weight:700}
.seo-list{margin:var(--s3) 0 0;padding:0;list-style:none;display:grid;gap:var(--s3);
  max-width:72ch}
.seo-list li{font-size:var(--fs-13);line-height:1.6;color:var(--ink-2);
  padding-left:var(--s4);border-left:2px solid var(--line-2)}
.seo-list b{color:var(--ink)}
.seo-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seo-links a{display:inline-flex;align-items:center;height:30px;padding-inline:var(--s3);
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.seo-links a:hover{border-color:var(--red);color:var(--red)}
@media (min-width:700px){ .seo-sec h2{font-size:var(--fs-22)} }

.site-foot{background:var(--surface-2);border-top:1px solid var(--line);
  padding-block:var(--s8) var(--s6);margin-top:var(--s6)}
.fgrid{display:grid;gap:var(--s6)}
@media (min-width:620px){ .fgrid{grid-template-columns:repeat(2,1fr)}
  .fbrand{grid-column:1 / -1} }
@media (min-width:980px){ .fgrid{grid-template-columns:1.6fr 1fr 1fr}
  .fbrand{grid-column:auto} }
.flogo{display:block}
.flogo img{height:104px;width:auto}
.fname{margin-top:var(--s3);line-height:1.15}
.fname b{display:block;font-family:var(--font-brand);font-size:var(--fs-18);font-weight:700}
.fname em{font-style:normal;color:var(--red)}
.fname span{display:block;margin-top:2px;font-size:10px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ftag{margin-top:var(--s3);font-family:var(--font-brand);font-size:var(--fs-16);
  color:var(--gold)}
.fline{margin-top:var(--s2);font-size:var(--fs-12);color:var(--ink-2);
  line-height:1.6;max-width:36ch}
.flinks{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.flinks a{display:inline-flex;align-items:center;gap:5px;height:32px;padding-inline:var(--s3);
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-12);font-weight:800}
.flinks a:hover{border-color:var(--red);color:var(--red)}
.flinks svg{width:14px;height:14px}
.fcol h3{font-size:var(--fs-12);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.fcol ul{margin:var(--s3) 0 0;padding:0;list-style:none;display:grid;gap:9px}
.fcol a{font-size:var(--fs-13);font-weight:600;color:var(--ink-2)}
.fcol a:hover{color:var(--red)}

.fcats,.fareas{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-2)}
.fcats h3,.fareas h3{font-size:var(--fs-12);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.fcats p{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fcats a{font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.fcats a:hover{color:var(--red)}
.fcats a::after{content:" ·";color:var(--ink-3)}
.fcats a:last-child::after{content:""}
.fareas p{font-size:var(--fs-12);color:var(--ink-2);line-height:1.7;max-width:80ch}

.fbase{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:var(--fs-11);color:var(--ink-3);font-weight:600}
.fbase p{margin:0}
.fcopy{text-transform:none}
.fpolicy{display:flex;flex-wrap:wrap;column-gap:var(--s3);row-gap:4px;margin-top:6px !important}
.fpolicy a{font-weight:800;color:var(--ink-2)}
.fpolicy a + a{position:relative;padding-left:var(--s3)}
.fpolicy a + a::before{content:"";position:absolute;left:0;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--line-2);transform:translateY(-50%)}
.fcredit{margin-top:var(--s3) !important}
.fcredit a{font-weight:800;color:var(--ink-2)}
.fbase a:hover{color:var(--red)}
@media (min-width:860px){
  .fbase{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    column-gap:var(--s5);row-gap:var(--s2)}
  .fpolicy,.fcredit{margin-top:0 !important}
}

/* ==========================================================================
   13e · CONTENT PAGES (about, history, bulk orders, events, policies)
   The only pages on the site meant to be read rather than shopped, so they get
   a reading measure, real headings and generous leading — and still the same
   tokens, so they never look like a different website.
   ========================================================================== */
.phero{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-block:var(--s8) var(--s6)}
.phero h1{font-size:var(--fs-28);letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.phero-lead{margin-top:var(--s3);font-size:var(--fs-16);line-height:1.6;
  color:var(--ink-2);max-width:56ch;text-wrap:pretty}
@media (min-width:760px){ .phero h1{font-size:2.25rem} }

/* --- the money pages ---------------------------------------------------
   A wedding order or a corporate hamper arrives through these pages, and the
   decision is made by someone comparing caterers. So they get one dark,
   photographed band at the top — the only place on the whole site that is
   allowed to be decorative — and the shop's display serif for the headline.
   Everywhere else stays the ordering app it is. */
.phero-dark{background:var(--ink);border-bottom:0;color:#fff;
  padding-block:var(--s8) var(--s8)}
.phero-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:920px){
  .phero-dark{padding-block:var(--s12)}
  .phero-grid{grid-template-columns:1fr 1fr;gap:var(--s10)}
}
.phero-dark h1{font-family:var(--font-brand);font-weight:700;
  font-size:2rem;line-height:1.08;letter-spacing:-.015em;max-width:17ch;color:#fff}
@media (min-width:760px){ .phero-dark h1{font-size:2.9rem} }
.phero-dark .phero-lead{color:rgba(255,255,255,.76);max-width:50ch}

.kicker{display:inline-flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
  font-size:var(--fs-11);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.kicker i{display:block;width:28px;height:2px;background:var(--gold);border-radius:2px}

.phero-pts{display:grid;gap:var(--s3) var(--s5);margin:var(--s5) 0 0;padding:0;
  list-style:none;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.phero-pts li{display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-13);font-weight:700;color:rgba(255,255,255,.9)}
.phero-pts svg{width:16px;height:16px;flex:none;color:var(--gold)}

.phero-acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.btn-gold{background:linear-gradient(180deg,#E3B657,#C9962C);color:#2A1E07;
  box-shadow:0 6px 18px rgba(201,150,44,.3)}
.btn-gold:hover{background:linear-gradient(180deg,#EDC268,#D6A235)}
.btn-onDark{background:transparent;border:1px solid rgba(255,255,255,.34);color:#fff}
.btn-onDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.phero-shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:rgba(255,255,255,.06);box-shadow:var(--sh-3)}
.phero-shot img{width:100%;height:100%;object-fit:cover}
@media (min-width:920px){ .phero-shot{aspect-ratio:1} }

.pbody{max-width:820px;padding-bottom:var(--s10)}
.pbody > .note{margin-top:var(--s5)}
.psec{padding-top:var(--s8)}
.psec > h2{font-size:var(--fs-18);margin-bottom:var(--s4)}
.psec p{font-size:var(--fs-14);line-height:1.75;color:var(--ink-2);
  max-width:68ch;text-wrap:pretty}
.psec p + p{margin-top:var(--s4)}
@media (min-width:760px){ .psec > h2{font-size:var(--fs-22)} }

.pgrid{display:grid;gap:var(--s3)}
@media (min-width:620px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .pgrid{grid-template-columns:repeat(3,1fr)} }
.pcell{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s5) var(--s4) var(--s4);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pcell::before{content:"";position:absolute;left:var(--s4);top:0;
  width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.pcell:hover{border-color:var(--line-2);transform:translateY(-2px)}
.pcell b{display:block;font-size:var(--fs-14);font-weight:800}
.pcell span{display:block;margin-top:5px;font-size:var(--fs-13);
  line-height:1.6;color:var(--ink-2)}

.psteps{margin:0;padding:0;list-style:none;display:grid;gap:var(--s4)}
@media (min-width:760px){ .psteps{grid-template-columns:repeat(2,1fr);gap:var(--s5)} }
.psteps li{position:relative;display:flex;gap:var(--s3)}
.pstep-n{width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--ink);color:var(--gold);display:grid;place-items:center;
  font-size:var(--fs-13);font-weight:800;font-family:var(--font-brand)}
.pstep-m b{display:block;font-size:var(--fs-14);font-weight:800}
.pstep-m span{display:block;margin-top:3px;font-size:var(--fs-13);
  line-height:1.6;color:var(--ink-2)}

.pticks{margin:0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.pticks li{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--fs-14);
  line-height:1.6;color:var(--ink-2)}
.pticks svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--green)}

.ppolicy{padding-top:var(--s6)}
.pclause + .pclause{margin-top:var(--s6);padding-top:var(--s6);
  border-top:1px solid var(--line)}
.pclause h2{font-size:var(--fs-16);margin-bottom:var(--s2)}
.pclause p{font-size:var(--fs-14);line-height:1.75;color:var(--ink-2);max-width:68ch}

.pbranches{display:grid;gap:var(--s3)}
@media (min-width:620px){ .pbranches{grid-template-columns:repeat(2,1fr)} }
.pbranch{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;padding-bottom:var(--s4)}
.pbranch:hover{border-color:var(--red)}
.pbranch-img{display:block;aspect-ratio:16/9;background:var(--surface-2)}
.pbranch-img img{width:100%;height:100%;object-fit:cover}
.pbranch b{display:block;margin:var(--s3) var(--s4) 0;font-size:var(--fs-14);font-weight:800}
.pbranch span:not(.pbranch-img){display:block;margin:4px var(--s4) 0;
  font-size:var(--fs-12);line-height:1.6;color:var(--ink-2)}
.pbranch-ph{color:var(--ink-3) !important;font-weight:700}

.pcare{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5)}
.pcare-main{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0}
.pcare-main svg{width:24px;height:24px;flex:none;color:var(--red)}
.pcare-main b{display:block;font-size:var(--fs-22);font-weight:800;
  letter-spacing:-.02em;white-space:nowrap}
.pcare-main span span{display:block;font-size:var(--fs-12);color:var(--ink-2);
  font-weight:600;margin-top:2px}
.pcare-side{display:flex;gap:var(--s2);flex-wrap:wrap}
@media (max-width:559px){
  .pcare{flex-direction:column;align-items:stretch}
  .pcare-side .btn{flex:1}
}

.pcta{margin-top:var(--s8);padding:var(--s6) var(--s5);border-radius:var(--r-lg);
  background:var(--surface-2);text-align:center}
.pcta h2{font-size:var(--fs-18)}
.pcta p{margin-top:var(--s2);font-size:var(--fs-13);color:var(--ink-2)}
.pcta-acts{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s4)}

.pask{margin-top:var(--s8);padding:var(--s5);border-radius:var(--r-md);
  background:var(--gold-tint);border:1px dashed #DCC68E}
.pask h2{font-size:var(--fs-14);color:#6B5324}
.pask p{margin-top:var(--s2);font-size:var(--fs-13);line-height:1.6;color:#6B5324}

/* The form is the page's whole point, so it is given a surface of its own
   rather than being the last thing on a long scroll. */
#enq{margin-top:var(--s10);padding:var(--s6) var(--s5) var(--s8);
  background:var(--surface-2);border-radius:var(--r-lg)}
#enq > h2{text-align:center;margin-bottom:var(--s5)}
.penq{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);max-width:560px;margin-inline:auto}
.penq .phone{height:46px}
.penq .phone input{font-size:var(--fs-14)}
.pcols{display:grid;gap:var(--s4)}
@media (min-width:560px){ .pcols{grid-template-columns:1fr 1fr} }
.penq .fineprint{text-align:center;margin-top:var(--s3)}

/* --- menu page ------------------------------------------------------- */
.oo-tools{display:flex;align-items:center;justify-content:flex-end;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.oo-sort select{height:36px;padding:0 var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-12);
  font-weight:700;color:var(--ink-2);outline:none;max-width:100%}
.oo-sort select:focus{border-color:var(--red)}
.order-layout{display:block}
.cat-sidebar{display:none}
@media (min-width:1000px){
  .order-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);
    align-items:start}
  .cat-sidebar{display:block;position:sticky;top:var(--s4)}
}
.cat-block + .cat-block{margin-top:var(--s8)}
.cat-sidebar h4{font-size:var(--fs-12);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.cat-nav{display:grid;gap:2px}
.cat-nav button{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);width:100%;padding:9px var(--s3);border-radius:var(--r-sm);
  font-size:var(--fs-13);font-weight:700;color:var(--ink-2);text-align:left}
.cat-nav button:hover{background:var(--surface-2)}
.cat-nav button.is-active{background:var(--ink);color:#fff}
.cn-n{font-size:var(--fs-11);color:var(--ink-3);font-weight:800}
.cat-nav button.is-active .cn-n{color:rgba(255,255,255,.7)}
.sk-card{aspect-ratio:3/4;border-radius:var(--r-md);background:var(--surface-2)}

/* --- account --------------------------------------------------------- */
.acc-menu .row{padding:var(--s3) var(--s4)}
.acc-menu .row.is-on{background:var(--red-tint)}
.acc-menu .row.is-on .row-main b{color:var(--red)}
.acc-menu .row.is-on .row-ico{background:#fff;color:var(--red)}
.acc-layout{display:block}
@media (min-width:960px){
  .acc-layout{display:grid;grid-template-columns:300px minmax(0,1fr);
    gap:var(--s6);align-items:start}
  .acc-side{position:sticky;top:var(--s4)}
}

/* ==========================================================================
   14 · MISC
   ========================================================================== */
.empty{text-align:center;padding:var(--s12) var(--s4)}
.empty-ico{width:64px;height:64px;margin:0 auto var(--s4);border-radius:50%;
  background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3)}
.empty-ico svg{width:28px;height:28px}
.empty h3{font-size:var(--fs-18);margin-bottom:6px}
.empty p{font-size:var(--fs-13);color:var(--ink-2);margin-bottom:var(--s5)}

/* Kept small and last, as the client asked: three facts, no icons, no cards. */
.whys{display:grid;gap:var(--s3);margin:0;padding:var(--s4);list-style:none;
  background:var(--surface-2);border-radius:var(--r-lg)}
@media (min-width:700px){ .whys{grid-template-columns:repeat(3,1fr);gap:var(--s6)} }
.whys li{display:block}
.whys b{display:block;font-size:var(--fs-13);font-weight:800}
.whys span{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:2px}
.care{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s4);font-size:var(--fs-13);
  font-weight:700;color:var(--ink-2)}

.tag{display:inline-flex;align-items:center;height:22px;padding-inline:9px;
  border-radius:var(--r-full);font-size:var(--fs-11);font-weight:800}
.tag-green{background:var(--green-tint);color:var(--green)}
.tag-gold{background:var(--gold-tint);color:#8A6716}
.tag-red{background:var(--red-tint);color:var(--red)}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 86px);transform:translate(-50%,16px);
  z-index:70;background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:11px var(--s4);font-size:var(--fs-13);font-weight:700;box-shadow:var(--sh-3);
  opacity:0;transition:all var(--dur) var(--ease);pointer-events:none;max-width:88vw}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   PACK SHEET — choosing a size before anything reaches the cart
   ========================================================================== */

/* The size line under the name doubles as the chooser whenever there is more
   than one pack. It has to read as a control without becoming a second ADD. */
.packpick{display:inline-flex;align-items:center;gap:5px;
  font:inherit;color:var(--red);font-weight:800;letter-spacing:.01em;
  border-bottom:1px dashed currentColor;padding:0 0 1px;background:none}
.packpick i{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px;display:block}
.packpick:hover{color:var(--ink)}

/* Several sizes of the same sweet in the cart: no single −/+ is truthful, so
   the control says how many and opens the sheet instead. */
.btn-add.is-multi{background:var(--red);color:#fff;border-color:var(--red);
  letter-spacing:0;padding-inline:var(--s3)}

.ps-lead{margin:0 0 var(--s4);color:var(--ink-2);font-size:var(--fs-13)}
.psheet{display:flex;flex-direction:column;gap:var(--s2)}
.psrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.psrow.is-on{border-color:var(--red);background:var(--red-tint)}
.ps-lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.ps-lab b{font-size:var(--fs-14);font-weight:800}
.ps-lab span{font-size:var(--fs-13);font-weight:700;color:var(--ink-2)}
.ps-lab s{color:var(--ink-3);font-weight:600}
.ps-act{flex:none}
.ps-act .stepper,.ps-act .btn-add{position:static}

/* On a phone the chooser belongs at the thumb end of the screen. */
@media (max-width:640px){
  .modal.is-sheet .modal-box{position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:none;max-height:86vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .modal.is-sheet .modal-foot{position:sticky;bottom:0}
}

/* The map before the shop has been given a location: the pin still works, so
   it must not look broken — only the ring and the distance are missing. */
.mapbox.no-zone::before,.mapbox.no-zone::after{opacity:.5}
.mapstat.is-plain{background:var(--surface-2);color:var(--ink-2)}
.mapstat.is-plain b{color:var(--ink)}

/* ==========================================================================
   THE LIVE MAP (Leaflet + OpenStreetMap)
   The drawn map above is the fallback. Everything from here styles the real
   one: the site's own pin and shop marker instead of Leaflet's blue teardrop,
   controls that match the buttons on the rest of the page, and the "Use my
   location" button floated over the map rather than inside its container.
   ========================================================================== */
.mapwrap{position:relative}
.mapwrap .maploc{z-index:600}
.maploc:disabled{opacity:.6;cursor:progress}
.maploc.is-busy svg{animation:mapspin 1s linear infinite}
@keyframes mapspin{to{transform:rotate(360deg)}}

/* Leaflet needs a plain, scrollable container — the drawn map's crosshair
   cursor and touch-action:none would eat panning and pinch-zoom. */
.mapbox.is-live{background:var(--surface-2);cursor:grab;touch-action:auto;
  user-select:auto;z-index:0}
.mapbox.is-live::before,.mapbox.is-live::after{display:none}
.mapbox.is-live:active{cursor:grabbing}
.leaflet-container{font:inherit;background:var(--surface-2)}
.leaflet-container a{color:var(--red)}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.82)}

/* The shop, and the customer's pin — same two marks the drawn map used. */
.lf-shop{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;box-shadow:var(--sh-1);border:2px solid #fff}
.lf-shop svg{width:15px;height:15px}
.lf-pin{color:var(--red);filter:drop-shadow(0 7px 7px rgba(26,18,16,.28));cursor:grab}
.lf-pin svg{width:36px;height:36px;fill:var(--red);stroke:#fff;stroke-width:1.6}
.lf-pin svg circle{fill:#fff;stroke:none}
.mapbox.is-out .lf-pin{color:var(--ink-2)}
.mapbox.is-out .lf-pin svg{fill:var(--ink-2)}

/* Zoom controls, in the site's own button language. */
.leaflet-touch .leaflet-bar,.leaflet-bar{border:1px solid var(--line-2);
  border-radius:var(--r-sm);box-shadow:var(--sh-1);overflow:hidden}
.leaflet-bar a,.leaflet-bar a:hover{width:34px;height:34px;line-height:34px;
  background:var(--surface);color:var(--ink);font-weight:800;border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--surface-2)}

/* "Pin is on <road>" — the line that lets somebody check the pin against a
   place they recognise, with a one-tap way to copy it into the form. */
.mapnear{display:flex;align-items:flex-start;gap:var(--s3);
  margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:var(--fs-12);color:var(--ink-2)}
.mapnear svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--red)}
.mapnear b{display:block;font-size:var(--fs-13);font-weight:800;color:var(--ink)}
.mapnear span span{display:block;margin-top:2px;line-height:1.5}
.mapnear .mapuse{margin-left:auto;flex:none;align-self:center;
  border:1.5px solid var(--red);border-radius:var(--r-sm);background:var(--surface);
  color:var(--red);font-size:var(--fs-11);font-weight:800;padding:6px var(--s3);
  white-space:nowrap}
.mapnear .mapuse:hover{background:var(--red);color:#fff}

/* THE MAP MUST NEVER BE WIDER THAN ITS CARD.
   `aspect-ratio:4/3` together with `min-height:320px` made the browser widen
   the box to 427px to satisfy the ratio — on a 390px phone the map hung 88px
   past the card and dragged the whole page sideways. A fixed height and no
   ratio cannot do that. */
.mapbox{max-width:100%}
.mapwrap{width:100%;max-width:100%}
@media (max-width:640px){
  .mapbox.is-live{aspect-ratio:auto;height:330px;width:100%;min-height:0}
  .mapnear{flex-wrap:wrap}
  .mapnear .mapuse{margin-left:30px}
}

/* The lookup is allowed to be slow, and allowed to fail — both states say so
   rather than leaving an empty gap where an address should be. */
.mapnear.is-busy b,.mapnear.is-off b{color:var(--ink-2)}
.mapnear.is-off{background:var(--red-tint)}
.mapnear.is-off b{color:var(--red)}

/* ==========================================================================
   THE BILL ON THE LAST SCREEN
   The Order Summary panel sits beside the form on a desktop; on a phone the
   grid is one column and it lands BELOW the Place Order button, where nobody
   scrolls. So the delivery charge was in the total (₹670 for ₹570 of sweets)
   and shown nowhere — the one thing a customer will phone about. These three
   lines go directly above the button that spends the money.
   ========================================================================== */
.ck-bill{margin-top:var(--s6);padding:var(--s4) var(--s5);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line)}
/* No column gap: with one, the rule above "To pay" broke into two short
   dashes with a hole between the words and the figure. */
.ck-bill dl{display:grid;grid-template-columns:1fr auto;gap:8px 0;margin:0}
.ck-bill dd{padding-left:var(--s4)}
.ck-bill dt{font-size:var(--fs-13);color:var(--ink-2)}
.ck-bill dd{margin:0;text-align:right;font-size:var(--fs-13);font-weight:700}
.ck-bill .free{color:var(--green);font-weight:800}
.ck-bill .bt{padding-top:var(--s3);border-top:1px solid var(--line-2);
  font-size:var(--fs-16);font-weight:800;color:var(--ink)}
.ck-bill .hint{margin:var(--s3) 0 0;font-size:var(--fs-12);color:var(--green);
  font-weight:700;line-height:1.5}
/* On a desktop the Order Summary panel is already sitting beside this form
   with the same figures in it, so printing them twice is just noise. */
@media (min-width:961px){ .ck-bill{display:none} }