/* ==========================================================================
   Dukaari — storefront
   Loaded after app.css, which supplies the tokens, buttons, pills and forms.
   This file is only the customer-facing surface: header, discovery, catalog,
   cart and tracking. It deliberately does not look like the panel.
   ========================================================================== */

body.shop{background:var(--card)}
/* Only the anchors that are containers inherit their surroundings. An earlier
   blanket `.shop a{color:inherit}` outranked the component rules and repainted
   buttons and banners with whatever colour their parent happened to have. Kept
   at two classes of specificity on purpose, so components still win. */
.shop a.tile, .shop a.shopcard, .shop a.cattile, .shop a.promotile,
.shop a.pricerow, .shop a.card, .shop a.stat, .shop a.brand,
.shop a.iconbtn, .shop a.chip, .shop-foot a{color:inherit}
.shop-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media (max-width:640px){.shop-wrap{padding:0 14px}}

/* ============================ header ============================ */
.shop-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.shop-head .bar{display:flex;align-items:center;gap:16px;height:64px}
.shop-head .brand img{height:22px;width:auto;display:block}
.shop-head .loc{display:flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);
  border-radius:99px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--card);
  white-space:nowrap;max-width:210px;cursor:pointer;box-shadow:var(--sh-1)}
.shop-head .loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-head .loc:hover{border-color:#DEDEE2}
.shop-head .hsearch{flex:1;min-width:0;position:relative;max-width:440px}
.shop-head .hsearch input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);
  border-radius:99px;background:var(--line-3);outline:0;font-size:13.5px;transition:.12s;color:var(--ink)}
.shop-head .hsearch input::placeholder{color:var(--faint)}
.shop-head .hsearch input:focus{background:var(--card);border-color:var(--btn);box-shadow:var(--ring)}
.shop-head .hsearch .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--faint);pointer-events:none}
.shop-head .acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);font-size:15px;box-shadow:var(--sh-1);cursor:pointer}
.iconbtn:hover{background:var(--line-3)}
.iconbtn .badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--btn);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--card)}
@media (max-width:820px){
  .shop-head .bar{height:56px;gap:10px}
  .shop-head .hsearch{display:none}
  .shop-head .mobile-search{display:block;padding:0 0 12px}
  .shop-head .mobile-search .hsearch{display:block;max-width:none}
}
.shop-head .mobile-search{display:none}

/* ============================ hero ============================ */
.hero{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12%;top:-42%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.11),transparent 66%)}
.hero .in{position:relative;z-index:1;padding:58px 0 62px;max-width:660px}
.hero h1{color:#fff;font-size:clamp(27px,4.6vw,44px);line-height:1.1;letter-spacing:-.042em;
  font-weight:600;margin-bottom:14px}
.hero h1 .yl{color:var(--yellow)}
.hero p{opacity:.82;font-size:15.5px;line-height:1.6;margin-bottom:26px;max-width:34em}
.bigsearch{display:flex;gap:8px;background:var(--card);padding:7px;border-radius:99px;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.36);max-width:540px}
/* app.css gives every input `color:inherit`, and the hero is white-on-blue —
   which made typed text and the placeholder white inside a white pill. */
.bigsearch input{flex:1;min-width:0;border:0;outline:0;padding:9px 8px 9px 16px;
  font-size:14.5px;background:none;color:var(--ink)}
.bigsearch input::placeholder{color:var(--faint)}
.bigsearch .sg-wrap{display:flex}
.bigsearch .sg-box{left:-7px;right:-7px;top:calc(100% + 12px)}
.bigsearch .btn{border-radius:99px;padding:9px 20px}
.hero .quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;opacity:.82}
.hero .quick a,.sf-hero .quick a{color:inherit;border:1px solid rgba(255,255,255,.3);
  border-radius:99px;padding:4px 12px;font-weight:500}
.hero .quick a:hover,.sf-hero .quick a:hover{background:rgba(255,255,255,.14)}
.sf-hero .quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;opacity:.9}
.sf-hero.light .quick a,.sf-hero.yellow .quick a{border-color:rgba(26,26,26,.22)}
@media (max-width:640px){.hero .in{padding:34px 0 38px}.hero p{font-size:14.5px;margin-bottom:20px}}

/* the promise, repeated wherever money is involved */
.promise{display:inline-flex;align-items:center;gap:7px;background:var(--yellow);color:var(--ink);
  border-radius:99px;padding:5px 13px;font-size:12.5px;font-weight:600;letter-spacing:-.006em}

/* ============================ sections ============================ */
/* padding-block, not the shorthand: several pages put .band and .shop-wrap on
   the SAME element, and `padding:44px 0` was silently wiping .shop-wrap's
   horizontal padding, so text ran edge to edge on phones. */
.band{padding-block:40px}
.band.tight{padding-block:26px}
@media (max-width:640px){.band{padding-block:26px}.band.tight{padding-block:18px}}
.band.grey{background:var(--bg);border-block:1px solid var(--line)}
.band-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.band-head .grow{flex:1;min-width:0}
.band-head h2{font-size:21px;letter-spacing:-.03em}
.band-head p{color:var(--muted);font-size:13.5px;margin-top:3px}
.band-head a.more{font-size:13px;font-weight:600;white-space:nowrap}

.catstrip{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
@media (max-width:1000px){.catstrip{grid-template-columns:repeat(5,1fr)}}
@media (max-width:560px){.catstrip{grid-template-columns:repeat(4,1fr);gap:8px}}
.cattile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 8px;
  text-align:center;box-shadow:var(--sh-1);transition:.14s}
.cattile:hover{border-color:var(--blue-line);transform:translateY(-2px)}
.cattile .em{font-size:22px;line-height:1}
.cattile .nm{font-size:11.5px;font-weight:600;margin-top:8px;line-height:1.3;color:var(--ink-2)}

/* ============================ shop cards ============================ */
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.shopgrid{grid-template-columns:1fr}}
.shopcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:10px;transition:.14s}
.shopcard:hover{border-color:var(--blue-line);box-shadow:var(--sh-2)}
.shopcard .top{display:flex;align-items:flex-start;gap:11px}
.shopcard .nm{font-weight:600;font-size:15px;letter-spacing:-.018em;line-height:1.3}
.shopcard .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.shopcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.shopmark{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--blue-soft);
  color:var(--blue);display:grid;place-items:center;font-weight:600;font-size:14px;letter-spacing:-.02em}
.shopcard.closed{opacity:.72}

/* ============================ shop page ============================ */
.shopbanner{background:var(--ink);color:#fff;padding:30px 0 26px;position:relative;overflow:hidden}
.shopbanner::after{content:"";position:absolute;left:-8%;bottom:-70%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}
.shopbanner .in{position:relative;z-index:1;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.shopbanner h1{color:#fff;font-size:27px;letter-spacing:-.035em;margin-bottom:6px}
.shopbanner .meta{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.6}
.shopbanner .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
@media (max-width:640px){.shopbanner h1{font-size:21px}}

.shopbar{position:sticky;top:64px;z-index:30;background:var(--card);border-bottom:1px solid var(--line);
  padding:12px 0}
@media (max-width:820px){.shopbar{top:56px}}
.shopbar .in{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============================ product grid ============================ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:.14s}
.pcard:hover{border-color:#DEDEE2;box-shadow:var(--sh-2)}
.pcard .art{aspect-ratio:1.5;background:var(--line-3);display:grid;place-items:center;font-size:38px;
  border-bottom:1px solid var(--line-2);position:relative}
.pcard .art img{width:100%;height:100%;object-fit:cover}
.pcard .art .oos{position:absolute;inset:0;background:rgba(255,255,255,.76);display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.05em}
.pcard .bd{padding:12px 13px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard .nm{font-size:13px;font-weight:600;line-height:1.35;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .un{font-size:11.5px;color:var(--muted)}
.pcard .row{display:flex;align-items:flex-end;gap:8px;margin-top:auto;padding-top:10px}
.pcard .pr{font-size:15px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.pcard .mrp{font-size:11.5px;color:var(--faint);text-decoration:line-through;
  font-variant-numeric:tabular-nums;padding-bottom:1px}
.pcard .act{margin-left:auto}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--btn);border-radius:99px;
  overflow:hidden;background:var(--btn)}
.stepper button{border:0;background:none;color:#fff;width:28px;height:28px;font-size:15px;cursor:pointer;
  line-height:1;padding:0}
.stepper .n{color:#fff;font-size:13px;font-weight:700;min-width:18px;text-align:center;
  font-variant-numeric:tabular-nums}

/* price comparison across shops — the reason this product exists */
.pricerow{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);box-shadow:var(--sh-1);margin-bottom:8px;transition:.12s}
.pricerow:hover{border-color:var(--blue-line)}
.pricerow .grow{flex:1;min-width:0}
.pricerow .nm{font-weight:600;font-size:14px;letter-spacing:-.014em}
.pricerow .sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.pricerow .pr{font-size:16px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  text-align:right}
.pricerow.best{border-color:var(--green-line);background:var(--green-soft)}
.pricerow.best .pr{color:var(--green)}

/* ============================ cart ============================ */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;
  box-shadow:0 -8px 30px -10px rgba(0,0,0,.4)}
.cartbar .in{display:flex;align-items:center;gap:14px;padding:12px 0}
.cartbar .t1{font-weight:600;font-size:14px}
.cartbar .t2{font-size:12.5px;opacity:.7}
.cartbar .btn{margin-left:auto}
body.has-cartbar{padding-bottom:76px}

.line{display:flex;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-2)}
.line:last-child{border-bottom:0}
.line .art{width:52px;height:52px;flex:0 0 52px;border-radius:10px;background:var(--line-3);
  display:grid;place-items:center;font-size:24px}
.line .grow{flex:1;min-width:0}
.line .nm{font-weight:600;font-size:13.5px;letter-spacing:-.012em}
.line .un{color:var(--muted);font-size:12.5px;margin-top:1px}
.line .pr{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.line.off{opacity:.5}
.line.off .nm{text-decoration:line-through}

.bill{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.bill .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:13.5px}
.bill .row .k{color:var(--muted)}
.bill .row .v{font-weight:600;font-variant-numeric:tabular-nums}
.bill .total{border-top:1px dashed var(--line);margin-top:8px;padding-top:13px;font-size:16px}
.bill .total .v{font-size:19px;letter-spacing:-.025em}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice label{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;cursor:pointer;
  background:var(--card);box-shadow:var(--sh-1);transition:.12s;display:block}
.choice label:hover{border-color:#DEDEE2}
.choice input{display:none}
.choice input:checked+.mk{border-color:var(--btn);background:var(--blue-soft)}
.choice .tt{font-weight:600;font-size:13.5px}
.choice .ss{color:var(--muted);font-size:12.5px;margin-top:2px}
.choice label:has(input:checked){border-color:var(--btn);background:var(--blue-soft);
  box-shadow:0 0 0 3px rgba(0,51,255,.1)}

/* ============================ order tracking ============================ */
/* Named .otrack, not .track: app.css already owns .track for the toggle
   switch, and the timeline was inheriting a 38x22px grey pill. */
.otrack{position:relative;padding-left:30px}
.otrack .st{position:relative;padding-bottom:22px}
.otrack .st:last-child{padding-bottom:0}
.otrack .st::before{content:"";position:absolute;left:-30px;top:2px;width:16px;height:16px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);z-index:1}
.otrack .st::after{content:"";position:absolute;left:-23px;top:18px;bottom:0;width:2px;background:var(--line)}
.otrack .st:last-child::after{display:none}
.otrack .st.done::before{background:var(--green);border-color:var(--green)}
.otrack .st.done::after{background:var(--green)}
.otrack .st.now::before{background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(15,33,244,.16)}
.otrack .st.dead::before{background:var(--red);border-color:var(--red)}
.otrack .tt{font-weight:600;font-size:14px;letter-spacing:-.014em}
.otrack .ss{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}
.otrack .st.pend .tt{color:var(--faint)}

/* ============================ footer ============================ */
.shop-foot{background:var(--ink);color:rgba(255,255,255,.62);padding-block:40px 30px;margin-top:52px}
.shop-foot img{height:22px;width:auto;margin-bottom:16px}
.shop-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;font-size:13px;line-height:1.9}
@media (max-width:700px){.shop-foot .cols{grid-template-columns:1fr;gap:22px}}
.shop-foot a:hover{color:#fff}
.shop-foot h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.shop-foot .fine{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:20px;font-size:12.5px}

/* ============================ auth (customer) ============================ */
.slim{max-width:390px;margin:0 auto;padding:48px 20px 80px}
.slim h1{font-size:24px;margin-bottom:6px}
.slim .sub{color:var(--muted);font-size:14px;margin-bottom:26px}

/* ============================ rider ============================ */
.rider-top{background:var(--ink);color:#fff;padding:16px 0}
.rider-top .in{display:flex;align-items:center;gap:12px}
.rider-top img{height:20px;width:auto}
.rider-top .who{margin-left:auto;text-align:right;font-size:12.5px;line-height:1.35}
.rider-top .who b{display:block;font-weight:600;font-size:13.5px;color:#fff}
.jobcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--sh-1);margin-bottom:14px}
.jobcard.now{border-color:var(--blue-line);box-shadow:0 0 0 3px rgba(15,33,244,.07)}
.jobcard .hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.jobcard .amt{margin-left:auto;text-align:right}
.jobcard .amt .v{font-size:19px;font-weight:600;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.hop{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-2)}
.hop .pin{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;background:var(--line-3)}
.hop .lb{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.hop .vl{font-size:13.5px;font-weight:500;margin-top:1px;line-height:1.5}

/* ==========================================================================
   Shop page v2 — image-led grocery layout
   Mobile is the design target: a compact shop strip, a sticky category rail,
   and a two-column tile grid. Desktop just widens the same grid.
   ========================================================================== */

/* --- shop identity strip --- */
.shopstrip{background:var(--card);border-bottom:1px solid var(--line)}
.shopstrip .in{display:flex;gap:12px;align-items:flex-start;padding:14px 0}
.shopstrip .mk{width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--blue-soft);
  color:var(--blue);display:grid;place-items:center;font-weight:600;font-size:15px;letter-spacing:-.02em;
  overflow:hidden}
.shopstrip .mk img{width:100%;height:100%;object-fit:cover}
.shopstrip h1{font-size:17px;letter-spacing:-.028em;line-height:1.25}
.shopstrip .meta{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}
.shopstrip .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.shopstrip .shopacts{margin-left:auto;display:flex;gap:7px;flex:0 0 auto}
@media (max-width:520px){
  .shopstrip .in{flex-wrap:wrap}
  .shopstrip .shopacts{margin-left:0;width:100%;margin-top:4px}
  .shopstrip .shopacts .btn{flex:1}
}

/* --- sticky search + category rail --- */
.shopnav{position:sticky;top:56px;z-index:32;background:var(--card);border-bottom:1px solid var(--line)}
@media (min-width:821px){.shopnav{top:64px}}
.shopsearch{position:relative;padding:11px 0 3px}
.shopsearch input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:99px;
  background:var(--line-3);outline:0;font-size:13.5px;color:var(--ink)}
.shopsearch input::placeholder{color:var(--faint)}
.shopsearch input:focus{background:var(--card);border-color:var(--btn);box-shadow:var(--ring)}
.shopsearch .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:12px;
  color:var(--faint);pointer-events:none}

.catrail{display:flex;gap:14px;overflow-x:auto;padding:12px 0 11px;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.catrail::-webkit-scrollbar{display:none}
.catrail .chip{flex:0 0 auto;width:62px;text-align:center;scroll-snap-align:start}
.catrail .im{width:56px;height:56px;margin:0 auto;border-radius:18px;background:var(--line-3);
  display:grid;place-items:center;font-size:25px;overflow:hidden;border:2px solid transparent;
  transition:border-color .14s,background .14s}
.catrail .im img{width:100%;height:100%;object-fit:cover}
.catrail .lb{font-size:10.5px;font-weight:600;color:var(--ink-2);margin-top:6px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catrail .chip.on .im{border-color:var(--btn);background:var(--blue-soft)}
.catrail .chip.on .lb{color:var(--blue)}

/* --- product tiles --- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media (min-width:620px){.tiles{grid-template-columns:repeat(3,1fr);gap:13px}}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1120px){.tiles{grid-template-columns:repeat(5,1fr)}}

.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:border-color .14s,box-shadow .14s}
.tile:hover{border-color:#DEDEE2;box-shadow:var(--sh-2)}
.tile .ph{aspect-ratio:1;background:var(--line-3);display:grid;place-items:center;font-size:42px;
  position:relative;border-bottom:1px solid var(--line-2)}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.tile .off{position:absolute;top:0;left:0;background:var(--yellow);color:var(--ink);
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:0 0 10px 0;letter-spacing:-.01em}
.tile .gone{position:absolute;inset:0;background:rgba(255,255,255,.8);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.tile .bd{padding:10px 11px 12px;display:flex;flex-direction:column;flex:1;gap:2px}
.tile .nm{font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tile .un{font-size:11.5px;color:var(--muted)}
.tile .foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.tile .pr{font-size:14px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.tile .mrp{font-size:11px;color:var(--faint);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.tile .cta{margin-left:auto;flex:0 0 auto}

.addbtn{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:30px;
  padding:0 12px;border:1px solid var(--btn);border-radius:8px;background:var(--card);color:var(--btn);
  font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:.01em;transition:.12s}
.addbtn:hover{background:var(--blue-soft)}
.addbtn:disabled{border-color:var(--line);color:var(--faint);background:var(--line-3);cursor:not-allowed}
.qty{display:inline-flex;align-items:center;min-width:56px;height:30px;border-radius:8px;
  background:var(--btn);overflow:hidden}
.qty button{border:0;background:none;color:#fff;width:24px;height:30px;font-size:15px;cursor:pointer;padding:0;line-height:1}
.qty .n{color:#fff;font-size:12.5px;font-weight:700;flex:1;text-align:center;font-variant-numeric:tabular-nums}

/* --- grouped sections (used when nothing is filtered) --- */
.grp{margin-bottom:26px}
.grp-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.grp-head h3{font-size:15.5px;letter-spacing:-.022em}
.grp-head .n{color:var(--muted);font-size:12.5px}
.grp-head a{margin-left:auto;font-size:12.5px;font-weight:600;white-space:nowrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:11px;overflow-x:auto;
  padding-bottom:4px;scrollbar-width:none;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (min-width:620px){.rail{grid-auto-columns:168px;gap:13px}}

/* ==========================================================================
   Storefront sections — the home page is a stack of admin-defined blocks.
   Dense on mobile: tight bands, tiles that fit four across, rails that bleed
   past the gutter so the next card is always half-visible and invites a swipe.
   ========================================================================== */

.sf-band{padding-block:22px}
.sf-band.grey{background:var(--bg);border-block:1px solid var(--line)}
@media (min-width:820px){.sf-band{padding-block:34px}}

.sec-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
.sec-head .grow{flex:1;min-width:0}
.sec-head h2{font-size:18px;letter-spacing:-.03em}
.sec-head p{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45}
.sec-head .more{font-size:12.5px;font-weight:600;white-space:nowrap;padding-bottom:2px}
@media (min-width:820px){.sec-head h2{font-size:21px}.sec-head p{font-size:13.5px}}

/* --- hero --- */
.sf-hero{background:var(--blue);color:#fff;position:relative;overflow:hidden;
  background-size:cover;background-position:center}
.sf-hero.ink{background-color:var(--ink)}
.sf-hero.yellow{background-color:var(--yellow);color:var(--ink)}
.sf-hero.orange{background-color:var(--orange)}
.sf-hero.light{background-color:var(--bg);color:var(--ink)}
.sf-hero::after{content:"";position:absolute;right:-12%;top:-42%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.11),transparent 66%)}
.sf-hero .in{position:relative;z-index:1;padding:38px 0 40px;max-width:640px}
.sf-hero h1{color:inherit;font-size:clamp(24px,5.4vw,40px);line-height:1.1;letter-spacing:-.042em;
  font-weight:600;margin-bottom:12px}
.sf-hero p{opacity:.84;font-size:14.5px;line-height:1.6;margin-bottom:22px;max-width:32em}
.sf-hero.light p{opacity:1;color:var(--muted)}
@media (min-width:820px){.sf-hero .in{padding:56px 0 60px}.sf-hero p{font-size:15.5px}}

/* --- promo banner --- */
.promo{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--blue);color:#fff}
.promo img{width:100%;height:auto;display:block}
.promo .txt{padding:22px 20px}
.promo .txt h3{color:#fff;font-size:17px;letter-spacing:-.028em}
.promo .txt p{opacity:.84;font-size:13.5px;margin-top:5px;line-height:1.55;max-width:38em}
.promo.ink{background:var(--ink)}
.promo.yellow{background:var(--yellow);color:var(--ink)}
.promo.yellow .txt h3{color:var(--ink)}
.promo.yellow .txt p{opacity:.72}
.promo.orange{background:var(--orange)}
.promo.light{background:var(--bg);color:var(--ink);border-color:var(--line)}
.promo.light .txt h3{color:var(--ink)}
.promo.light .txt p{color:var(--muted);opacity:1}

/* --- banner row --- */
.tilerow{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:10px;overflow-x:auto;
  scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:3px}
.tilerow::-webkit-scrollbar{display:none}
.tilerow>*{scroll-snap-align:start}
@media (min-width:820px){.tilerow{grid-auto-columns:180px;gap:13px}}
.promotile{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  box-shadow:var(--sh-1);display:block;transition:.14s}
.promotile:hover{border-color:var(--blue-line);box-shadow:var(--sh-2)}
.promotile img{width:100%;aspect-ratio:1.1;object-fit:cover;display:block}
.promotile .ph{aspect-ratio:1.1;display:grid;place-items:center;font-size:28px;background:var(--line-3)}
.promotile .lb{font-size:11.5px;font-weight:600;padding:8px 10px 10px;line-height:1.3;color:var(--ink-2)}

/* --- category grid: four across on a phone, like a real grocery app --- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (min-width:620px){.catgrid{grid-template-columns:repeat(6,1fr);gap:12px}}
@media (min-width:960px){.catgrid{grid-template-columns:repeat(10,1fr)}}
.catgrid .cattile{background:transparent;border:0;padding:0;box-shadow:none;text-align:center}
.catgrid .cattile:hover{transform:none}
.catgrid .im{aspect-ratio:1;border-radius:16px;background:var(--line-3);border:1px solid var(--line);
  display:grid;place-items:center;font-size:26px;overflow:hidden;transition:.14s}
.catgrid .im img{width:100%;height:100%;object-fit:cover}
.catgrid .cattile:hover .im{border-color:var(--blue-line)}
.catgrid .nm{font-size:11px;font-weight:600;margin-top:7px;line-height:1.28;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- the shop a rail item belongs to --- */
.tile .at{font-size:10.5px;color:var(--muted);margin-top:7px;padding-top:7px;
  border-top:1px solid var(--line-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.blurb{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.6}

/* Category tile fallback: a tinted square with a large glyph, so a category
   without a photo still reads as a deliberate tile rather than a gap. */
.catgrid .im .em{font-size:34px;line-height:1}
@media (max-width:520px){.catgrid .im .em{font-size:27px}}
.catgrid .im{background:var(--blue-soft)}
.catgrid .cattile:has(img) .im{background:var(--line-3)}

/* A promo with no artwork keeps the shape a 1200x260 image would occupy, so
   nothing jumps when a real banner is uploaded later. */
.promo .txt{min-height:120px;display:flex;flex-direction:column;justify-content:center}
@media (min-width:820px){.promo .txt{min-height:170px;padding:26px 32px}}

/* Hero art sits behind the copy, so keep the copy legible over any upload. */
.sf-hero{background-repeat:no-repeat}
.sf-hero .in{text-shadow:0 1px 14px rgba(10,16,60,.28)}
.sf-hero.light .in,.sf-hero.yellow .in{text-shadow:none}

/* ==========================================================================
   Near-date markdowns.
   The chip always carries the date, never a bare percentage — a discount that
   hides why it exists is the thing that loses the customer for good.
   ========================================================================== */
.exp-chip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:2px 8px;
  border-radius:99px;font-size:10.5px;font-weight:600;line-height:1.6;letter-spacing:-.004em;
  background:var(--yellow-soft);color:var(--yellow-ink);border:1px solid var(--yellow-line);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.exp-chip::before{content:"📅";font-size:9.5px}
.exp-chip.soft{background:var(--line-3);color:var(--muted);border-color:var(--line)}
.line .exp-chip{margin-top:2px}

/* the list-first entry point sits with the quick searches but reads as the
   main event, because it is the thing nobody else can do */
.hero .quick a.listcta,.sf-hero .quick a.listcta{background:var(--yellow);color:var(--ink);
  border-color:var(--yellow);font-weight:600}
.hero .quick a.listcta:hover,.sf-hero .quick a.listcta:hover{background:#F6E14A}

/* Rider tab strip sits on the dark header. The active tab flips to a white
   pill, so its label has to flip to ink — an inline colour here made the
   selected tab white text on a white pill, i.e. invisible. */
.rider-tabs{background:var(--ink);padding-block:0 14px}
.rider-tabs .tabs{background:rgba(255,255,255,.12);border-color:transparent}
.rider-tabs .tabs a{color:rgba(255,255,255,.72)}
.rider-tabs .tabs a:hover{color:#fff}
.rider-tabs .tabs a.on{background:#fff;color:var(--ink);box-shadow:none}

/* A tile that is mid-request shouldn't look broken or invite a second tap. */
.tile .cta.busy{opacity:.45;pointer-events:none}
.line[style*="opacity"]{transition:opacity .12s}