/* Built by build.js — do not edit.
   Change the files under src/storefront/styles/ and run: node build.js
   25 files, in import order. */

/* ===== base/tokens.css ===== */
/* Design tokens — brand palette, radii, shadows */

:root{
  /* brand */
  --red:#c8102e;
  --red-d:#a30d25;
  --red-l:#fdeaed;

  /* The deep panels — hero, topbar, footer, the deals strip. Orange
     leads, with just enough red beneath it to keep white text readable;
     a flat bright orange would leave the headings floating. Kept under
     the token names the whole stylesheet already uses, so the change is
     one edit rather than thirty. */
  --navy:#e2621d;        /* mid   — the orange    */
  --navy-d:#b8380f;      /* deep  — burnt anchor  */
  --navy-l:#fdf1e7;      /* tint  — pale ground   */

  --gold:#f0a500;
  --gold-d:#c98600;

  /* neutrals — text stays a near-black with a warm cast, so headings
     read cleanly. Orange text on white would fail contrast badly. */
  --ink:#2b1a15;
  --body:#5a6472;
  --mute:#98a1ad;
  --line:#e8ebf0;
  --bg:#f6f7f9;
  --white:#fff;

  /* system */
  --ok:#12805c;
  --radius:14px;
  --radius-sm:9px;
  --sh:0 2px 10px rgba(20,30,50,.07);
  --sh-md:0 6px 18px rgba(20,30,50,.10);
  --sh-lg:0 14px 34px rgba(20,30,50,.14);
  --wrap:1280px;
  --nav-h:50px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans JP",sans-serif;
}

/* ===== base/reset.css ===== */
/* Reset & base typography */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff);color:var(--body);background:var(--white);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5{color:var(--ink);line-height:1.22;font-weight:800;letter-spacing:-.2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ===== base/utilities.css ===== */
/* Utility classes */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-d);color:#fff;padding:11px 20px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* Inline SVG icons — inherit colour and align with adjacent text */
.icon{
  display:inline-block;vertical-align:-.15em;flex-shrink:0;
  fill:currentColor;
}

/* ===== layout/header.css ===== */
/* Topbar, header, language switcher */

.topbar{
  background:var(--navy-d);color:rgba(255,255,255,.82);
  font-size:12.5px;padding:7px 0;
}
.topbar-in{display:flex;align-items:center;justify-content:center;gap:18px}
.topbar b{color:var(--gold)}
.topbar-links{display:none;gap:16px;margin-left:auto}
.topbar-links a:hover{color:#fff}


.header{padding:13px 0;background:#fff;border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:12px}

/* On pages without a search box, push the controls to the right so the
   header does not look half-empty. */
body:not([data-page="products"]) .header-in .lang{margin-left:auto}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-logo{
  width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 2px var(--line);
}
.brand-tx b{
  display:block;font-size:17px;color:var(--red);font-weight:900;
  line-height:1.02;letter-spacing:-.4px;
}
.brand-tx span{
  display:block;font-size:8.5px;letter-spacing:2.1px;
  color:var(--navy);font-weight:800;
}
.brand-tx i{display:none;font-style:normal;font-size:9.5px;color:var(--mute);font-weight:600}

.search{
  flex:1;display:flex;border:2px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--bg);min-width:0;transition:.2s var(--ease);
}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:11px 14px;font-size:16px;color:var(--ink);
}
.search input::placeholder{color:var(--mute)}
.search button{
  border:0;background:var(--red);color:#fff;padding:0 18px;
  cursor:pointer;font-size:15px;transition:.2s var(--ease);
}
.search button:hover{background:var(--red-d)}
.search:focus-within{border-color:var(--red);background:#fff}

.tel{display:none;align-items:center;gap:9px;flex-shrink:0}
.tel-ico{
  width:38px;height:38px;border-radius:50%;background:var(--red-l);
  color:var(--red);display:grid;place-items:center;font-size:17px;flex-shrink:0;
}
.tel b{display:block;font-size:15px;color:var(--navy);font-weight:800;line-height:1.15}
.tel small{display:block;font-size:10.5px;color:var(--mute);font-weight:600}

/* language switcher */
.lang{
  display:flex;flex-shrink:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--bg);
}
.lang-b{
  border:0;background:transparent;cursor:pointer;
  padding:8px 9px;font-size:12px;font-weight:800;color:var(--body);
  transition:.18s var(--ease);white-space:nowrap;line-height:1.2;
}
.lang-b:not(:last-child){border-right:1px solid var(--line)}
.lang-b:hover{background:var(--red-l);color:var(--red)}
.lang-b.on{background:var(--red);color:#fff}

.hero h1 .gold{color:var(--gold)}
.chip.on{border-color:var(--red);background:var(--red-l)}

/* Owner login in the header — icon only on small screens */
.hdr-login{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  border:1.5px solid var(--line);border-radius:22px;
  padding:9px 14px;font-size:13px;font-weight:700;color:var(--body);
  transition:.18s var(--ease);white-space:nowrap;
}
.hdr-login:hover{border-color:var(--red);color:var(--red);background:var(--red-l)}
.hdr-login em{font-style:normal;display:none}
@media(min-width:1100px){ .hdr-login em{display:inline} }

/* Very small phones: shrink the brand and language buttons so the row
   never wraps or overflows. */
@media(max-width:420px){
  .header{padding:10px 0}
  .brand-logo{width:44px;height:44px}
  .brand-tx b{font-size:16px}
  .brand-tx span{font-size:7.5px;letter-spacing:1.6px}
  .lang-b{padding:7px 7px;font-size:11px}
  .hdr-login{padding:8px 10px}
}

/* The delivery promise, carried on every page. Gold so it reads as an
   offer rather than another line of shop detail. */
.topbar-dlv{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--gold);font-weight:800;
}
.topbar-dlv:hover{color:#fff}

/* ===== layout/nav.css ===== */
/* Sticky navigation */

.nav{
  background:var(--red);position:sticky;top:0;z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.nav-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-in{display:flex;gap:0;white-space:nowrap;min-height:var(--nav-h)}
.nav-in a{
  display:flex;align-items:center;color:#fff;font-size:13.5px;font-weight:700;
  padding:0 14px;flex-shrink:0;opacity:.88;
  border-bottom:3px solid transparent;transition:.2s var(--ease);
}
.nav-in a:hover{opacity:1;background:rgba(0,0,0,.09)}
.nav-in a.on{opacity:1;border-bottom-color:var(--gold)}

/* ===== layout/hero.css ===== */
/* Hero & feature strip */

/* ==========================================================================
   The shop leads.

   The photograph used to be wallpaper behind the words, dimmed by a scrim
   so the copy stayed readable — which meant the thing the owner most
   wanted seen was the thing least visible. It is now a card of its own
   beside the copy, shown whole and undimmed, the way a storefront is
   presented on a modern retail site.
   ========================================================================== */

.hero{
  background:
    radial-gradient(1200px 620px at 88% -12%, rgba(247,148,38,.34), transparent 62%),
    linear-gradient(135deg,#7d2408 0%, var(--navy-d) 34%, var(--navy) 74%, #f0801f 100%);
  color:#fff;padding:34px 0 40px;position:relative;overflow:hidden;
}

/* A faint grid, the way product pages carry texture without noise. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 30% 40%, #000, transparent 72%);
}

.hero-in{position:relative;z-index:2;display:grid;gap:26px;text-align:center}

/* ------------------------------- the copy ------------------------------ */

.hero .kick{
  display:inline-flex;align-items:center;gap:6px;background:var(--gold);
  color:#3a2a00;font-size:11px;font-weight:900;letter-spacing:1.3px;
  padding:6px 15px;border-radius:20px;
}
.hero h1{
  color:#fff;font-size:29px;margin:15px 0 11px;line-height:1.14;
  letter-spacing:-.6px;
}
.hero h1 span{color:var(--gold)}
.hero p{color:rgba(255,255,255,.88);font-size:15px;max-width:560px;margin:0 auto 22px}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:540px;margin:28px auto 0;
}
.hero-stats div{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:12px 6px;
}
.hero-stats b{display:block;color:#fff;font-size:20px;line-height:1.08;font-weight:900}
.hero-stats span{font-size:10px;color:rgba(255,255,255,.76);font-weight:700;letter-spacing:.6px}

/* ------------------------------ the shopfront -------------------------- */

/* Just the photograph. No frame around it — a white border would only
   draw a box between the customer and the shop. The shadow alone lifts
   it off the panel. */
.hero-shot{margin:0}
.hero-shot img{
  display:block;width:100%;height:auto;
  border-radius:16px;
  box-shadow:0 20px 44px rgba(0,0,0,.32), 0 44px 88px rgba(0,0,0,.20);
}

/* ------------------------------ breakpoints ---------------------------- */

@media(min-width:900px){
  .hero{padding:52px 0 58px}

  /* Copy left, shop right — the storefront layout people expect. */
  .hero-in{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);
    align-items:center;gap:40px;text-align:left;
  }
  /* The photo sat 15px further from the right edge than the copy sits
     from the left, because its column rounds down. Pushed out by that
     much so both margins measure the same. */
  .hero-shot{margin-right:-15px}

  .hero h1{font-size:40px;margin-top:17px}
  .hero p{margin-left:0;margin-right:0;font-size:16px}
  .hero-cta{justify-content:flex-start}
  .hero-stats{margin-left:0;max-width:470px}

  .hero-shot img{border-radius:18px}
}

@media(min-width:1200px){
  .hero h1{font-size:46px}
  .hero-in{gap:48px;grid-template-columns:minmax(0,.8fr) minmax(0,1.38fr)}
}

@media(prefers-reduced-motion:reduce){
  .hero-shot{transform:none}
}

.feats{background:var(--bg);border-bottom:1px solid var(--line);padding:16px 0}
.feats-in{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feat{display:flex;align-items:center;gap:10px}
.feat i{font-style:normal;font-size:22px;flex-shrink:0}
.feat b{display:block;color:var(--ink);font-size:13px;line-height:1.25}
.feat span{font-size:11.5px;color:var(--mute)}

/* ===== layout/footer.css ===== */
/* Footer & back-to-top */

.footer{background:var(--navy-d);color:rgba(255,255,255,.70);padding:34px 0 0}
.foot-g{display:grid;gap:26px;padding-bottom:28px}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.foot-brand img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.foot-brand b{display:block;color:#fff;font-size:17px;font-weight:900;line-height:1.05}
.foot-brand span{
  display:block;font-size:8.5px;letter-spacing:2.1px;
  color:var(--gold);font-weight:800;
}
.tagline{color:var(--gold);font-style:italic;font-weight:600;font-size:13.5px;margin-bottom:10px}
.foot-col p{font-size:13.5px}
.foot-col h4{color:#fff;font-size:14.5px;margin-bottom:13px}
.foot-col li{margin-bottom:8px;font-size:13.5px}
.foot-col a:hover{color:var(--gold)}
.fc{display:flex;gap:9px;margin-bottom:10px;font-size:13.5px;line-height:1.5}
.fc i{font-style:normal;flex-shrink:0}
.socials{display:flex;gap:9px;margin-top:14px}
.socials a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.10);
  display:grid;place-items:center;font-size:15px;color:#fff;transition:.2s var(--ease);
}
.socials a:hover{background:var(--gold);color:#3a2a00}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.13);padding:15px 0;
  font-size:12.5px;text-align:center;
}
.foot-bot b{color:#fff}


.top-btn{
  position:fixed;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;
  background:var(--red);color:#fff;border:0;cursor:pointer;font-size:19px;
  box-shadow:var(--sh-lg);z-index:60;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.25s var(--ease);
}
.top-btn.show{opacity:1;visibility:visible;transform:translateY(0)}
.top-btn:hover{background:var(--red-d)}

/* Owner login — visible but clearly secondary */
.foot-bot-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.owner-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--gold);
  padding:9px 18px;border:1.5px solid rgba(240,165,0,.55);
  border-radius:22px;background:rgba(240,165,0,.10);
  transition:.18s var(--ease);white-space:nowrap;
}
.owner-link:hover{
  color:#3a2a00;background:var(--gold);border-color:var(--gold);
}
@media(max-width:600px){
  .foot-bot-in{justify-content:center;text-align:center}
  .owner-link{width:100%;justify-content:center}
}

/* ------------------------- payment methods --------------------------- */
.pay-strip{
  background:#fff;border-top:1px solid var(--line);
  padding:18px 0;
}
.pay-in{
  display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;
}
.pay-label{
  font-size:12.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--mute);
}
.pay-list{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:center;
}
.pay-list li{
  display:flex;align-items:center;justify-content:center;
  height:44px;min-width:62px;padding:0 12px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  transition:.18s var(--ease);
}
.pay-list li:hover{border-color:#cfd6e0;box-shadow:var(--sh)}

/* Aspect ratios differ hugely (Amex is square, PayPay is 5:1), so size
   each by height and let the width follow rather than capping width. */
.pay-list img{width:auto;height:22px;display:block}
.pay-list img[alt="American Express"]{height:28px}
.pay-list img[alt="Mastercard"]{height:26px}
.pay-list img[alt="JCB"]{height:26px}
.pay-list img[alt="Visa"]{height:16px}
.pay-list img[alt="PayPay"]{height:15px}
.pay-cash{
  gap:7px;font-size:13px;font-weight:700;color:var(--ink);
}

@media(max-width:600px){
  .pay-in{gap:11px}
  .pay-list{gap:7px}
  .pay-list li{height:38px;min-width:52px;padding:0 9px}
  .pay-list img{height:18px}
  .pay-list img[alt="American Express"]{height:24px}
  .pay-list img[alt="Mastercard"]{height:22px}
  .pay-list img[alt="JCB"]{height:22px}
  .pay-list img[alt="Visa"]{height:13px}
  .pay-list img[alt="PayPay"]{height:12px}
  .pay-cash{font-size:12px}
}

/* ===== layout/pages.css ===== */
/* Interior page templates */

.page-head{
  background:linear-gradient(125deg,var(--navy-d),var(--navy) 58%,#f79426);
  color:#fff;padding:30px 0;text-align:center;
}
.page-head h1{color:#fff;font-size:25px}
.page-head p{color:rgba(255,255,255,.82);margin-top:6px;font-size:14.5px}
.crumb{font-size:12.5px;color:rgba(255,255,255,.65);margin-bottom:9px}
.crumb a:hover{color:#fff}

.prose{padding:30px 16px;max-width:820px;margin:0 auto}
.prose h2{font-size:20px;margin:26px 0 11px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:13px;font-size:14.5px}
.prose ul{margin:0 0 15px 2px}
.prose ul li{
  display:flex;gap:9px;margin-bottom:8px;font-size:14.5px;line-height:1.55;
}
.prose ul i{font-style:normal;color:var(--red);flex-shrink:0;font-weight:900}

.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:18px 16px 4px;max-width:var(--wrap);margin:0 auto;
}
.toolbar select{
  border:2px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:14px;background:#fff;cursor:pointer;
}
.toolbar select:focus{outline:0;border-color:var(--red)}
.toolbar .res{font-size:13px;color:var(--mute);font-weight:700;margin-left:auto}

.contact-grid{display:grid;gap:18px;padding:30px 16px;max-width:var(--wrap);margin:0 auto}
.cbox{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;text-align:center;box-shadow:var(--sh);
}
.cbox i{font-style:normal;font-size:30px;display:block;margin-bottom:11px}
.cbox h3{font-size:16px;margin-bottom:6px}
.cbox p,.cbox a{font-size:14px}
.cbox a{color:var(--red);font-weight:700}

/* ===== components/splash.css ===== */
/* ==========================================================================
   Opening splash.
   The page is fetched whole and painted once, so the customer never sees
   it assemble itself. This covers that moment.
   Written so it works with no JavaScript at all: it is in the markup and
   styled here, and main.js only takes it away.
   ========================================================================== */

.splash{
  position:fixed;inset:0;z-index:99999;
  display:grid;place-items:center;
  /* The shop's own colours, stated literally as well as through the
     tokens: if the stylesheet carrying them has not applied yet, the
     page underneath must still not show through. */
  background:#b8380f;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(247,148,38,.42), transparent 62%),
    linear-gradient(135deg,#7d2408 0%, #b8380f 38%, #e2621d 76%, #f79426 100%);
  transition:opacity .35s ease;
}
.splash.gone{opacity:0;pointer-events:none}

.splash-in{
  display:flex;flex-direction:column;align-items:center;gap:15px;
}

/* A spinner, then the shop's name under it — enough to say the page is
   working and whose page it is, without a logo to wait for. */
.splash-ring{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.26);
  border-top-color:#fff;
  animation:splashSpin .8s linear infinite;
}

.splash-word{
  font-size:12.5px;font-weight:800;letter-spacing:2.4px;
  color:rgba(255,255,255,.92);text-transform:uppercase;
  animation:splashFade 1.6s ease-in-out infinite;
}

@keyframes splashSpin{ to{ transform:rotate(360deg) } }
@keyframes splashFade{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* The page underneath stays out of sight until the data is in.
   visibility, not opacity: a partly-transparent page showing through the
   splash was exactly the muddle this is meant to avoid. The transition is
   only on the visible state, so nothing animates on the way in. */
body:not(.ready) .page-hide{visibility:hidden;opacity:0}
body.ready .page-hide{visibility:visible;opacity:1;transition:opacity .28s ease}

/* Already inside the shop: no opening screen at all. Set by a small
   script in the markup before the browser paints, so there is not even a
   frame of navy when moving between pages. */
.no-splash .splash{display:none}
.no-splash body:not(.ready) .page-hide,
.no-splash .page-hide{visibility:visible;opacity:1}

/* Someone who prefers less motion gets a still ring rather than a spin. */
@media(prefers-reduced-motion:reduce){
  .splash-ring,.splash-word{animation:none}
  .splash,.page-hide{transition:none}
}

/* ===== components/ticker.css ===== */
/* The scrolling strip at the very top of every page */

/* Darker than the topbar beneath it. Both are orange, and at the same
   weight the two strips read as one confused band; a deeper ground gives
   the moving text a lane of its own. */
.tick{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#7a2408,#9c3410 45%,#7a2408);
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.2);
}

/* The two copies sit side by side and the pair slides left by exactly
   half its width — one copy — before snapping back. Because the halves
   are identical the snap is invisible, and the text appears to run
   forever. A single copy would drag a gap across the screen each loop. */
.tick-track{
  display:flex;width:max-content;
  animation:tickRun var(--dur,60s) linear infinite;
}
.tick-run{display:flex;align-items:center;flex-shrink:0}

@keyframes tickRun{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Pause on hover, so a line that catches the eye can actually be read
   rather than escaping off the edge. */
.tick:hover .tick-track{animation-play-state:paused}

.tick-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 0;white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:.2px;
}

/* Gold, the shop's third colour, so each line opens with a spot of warmth
   rather than another white shape. */
.tick-ico{
  display:inline-flex;color:var(--gold);
  /* Nudged up a hair: the icons are optically low against the cap height
     of the text beside them. */
  transform:translateY(-.5px);
}

/* The separator between lines, kept faint — it is punctuation, not
   content, and should not compete with the words. */
.tick-dot{
  padding:0 18px;font-size:8px;color:var(--gold);opacity:.55;
  transform:translateY(-1px);
}

@media(min-width:700px){
  .tick-item{font-size:13.5px;padding:9px 0}
  .tick-dot{padding:0 22px}
}

/* Motion off: the strip becomes an ordinary line of text, still readable,
   with the overflow simply clipped. Someone who has asked their machine
   to stop animations should not have text crawling across their screen. */
@media(prefers-reduced-motion:reduce){
  .tick-track{animation:none}
}

@media print{ .tick{display:none} }

/* ===== components/announcement.css ===== */
/* Shop announcement banner */

.notice{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--gold),#ffc746 45%,var(--gold));
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.10);
}

/* A slow sheen so the eye catches it without the banner shouting. */
.notice::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:220% 100%;
  animation:noticeSheen 5.5s ease-in-out infinite;
}
@keyframes noticeSheen{
  0%,60%{background-position:180% 0}
  100%  {background-position:-80% 0}
}

.notice-in{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
}

.notice-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:rgba(58,42,0,.14);color:#3a2a00;
  display:grid;place-items:center;
}

.notice-text{
  flex:1;min-width:0;
  color:#3a2a00;font-size:14.5px;font-weight:700;line-height:1.45;
}

@media(min-width:700px){
  .notice-in{padding:15px 16px}
  .notice-text{font-size:15.5px;text-align:center}
  .notice-icon{width:36px;height:36px}
}

@media(prefers-reduced-motion:reduce){
  .notice::after{animation:none;opacity:0}
}

@media print{ .notice{display:none} }

/* ===== components/deals-bar.css ===== */
/* Today's Deal & New Arrival — the homepage highlight */

.ann{
  background:linear-gradient(120deg,var(--navy-d),var(--navy) 55%,#f79426);
  border-radius:var(--radius);
  margin:26px 16px 6px;
  max-width:calc(var(--wrap) - 32px);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--sh-md);
}
@media(min-width:1312px){ .ann{margin-left:auto;margin-right:auto} }

.ann::after{
  content:"";position:absolute;right:-80px;top:-80px;width:250px;height:250px;
  border-radius:50%;background:rgba(240,165,0,.10);pointer-events:none;
}
.ann-in{padding:20px 18px 24px;position:relative;z-index:2}

/* ------------------------------- heading ------------------------------ */
.ann-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ann-star{
  color:var(--gold);font-size:20px;flex-shrink:0;
  animation:annPulse 2.4s ease-in-out infinite;
}
@keyframes annPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.55;transform:scale(.85)}
}
.ann-head h2{color:#fff;font-size:19px;line-height:1.2}
.ann-head p{
  font-size:12.5px;color:rgba(255,255,255,.74);
  margin-top:3px;line-height:1.35;
}

/* ------------------------------- rail --------------------------------- */
/* ----------------------------- carousel ------------------------------ */
.ann-carousel{position:relative;display:flex;align-items:center;gap:8px}

.ann-scroll{
  flex:1;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  padding-bottom:4px;
}
.ann-scroll::-webkit-scrollbar{display:none}
.ann-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* Half a viewport of padding either side lets the first and last card
   sit centred, with their neighbours visible at the edges. */
.ann-row{display:flex;gap:18px;width:max-content;padding:6px 0}
.ann-item{scroll-snap-align:center}

/* arrows */
.ann-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:.18s var(--ease);
}
.ann-nav.prev{left:4px}
.ann-nav.next{right:4px}
.ann-nav{
  background:rgba(40,12,3,.55);border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.ann-nav:hover{background:#fff;color:var(--navy-d)}
.ann-nav.prev svg{transform:rotate(-90deg)}
.ann-nav.next svg{transform:rotate(90deg)}

/* dots */
.ann-dots{
  display:flex;justify-content:center;gap:7px;margin-top:14px;
}
.ann-dots:empty{display:none}
.ann-dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  border:0;background:rgba(255,255,255,.32);transition:.2s var(--ease);
}
.ann-dot:hover{background:rgba(255,255,255,.6)}
.ann-dot.on{background:var(--gold);width:22px;border-radius:4px}

/* -------------------------- item = photo card ------------------------- */
.ann-item{
  flex-shrink:0;width:260px;
  background:#fff;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 4px 14px rgba(0,0,0,.20);

  /* Off-centre cards recede: smaller, dimmed and softly blurred. */
  transform:scale(.82);
  opacity:.45;
  filter:blur(2px);

  /* Only transform and opacity are transitioned - both run on the
     compositor. Animating filter repaints the whole card each frame,
     which with six image cards was enough to lock up the page. */
  transition:transform .45s var(--ease), opacity .45s var(--ease);
  will-change:transform;
}

.ann-item.is-active{
  transform:scale(1);
  opacity:1;
  filter:none;
  box-shadow:0 16px 40px rgba(0,0,0,.38);
  will-change:auto;
}
.ann-item.is-active:hover{transform:scale(1.02)}
.ann-item.deal{box-shadow:0 4px 14px rgba(0,0,0,.20),0 0 0 2px var(--gold)}
.ann-item.deal:hover{box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 0 2px var(--gold)}

/* big image — the highlight */
.ann-img{
  position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;
}
.ann-img img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .4s var(--ease);
}
.ann-item:hover .ann-img img{transform:scale(1.07)}

/* Both badges live on the right, clear of the halal seal stamped into
   the top-left of the photograph. The discount sits under the label
   rather than beside it: on a narrow card they would not both fit
   across, and stacked they never collide however long the label is. */
.ann-tag{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:9px;font-weight:900;letter-spacing:.6px;
  padding:3px 8px;border-radius:5px;line-height:1.35;
}
.ann-tag.new{background:#12805c;color:#fff}
.ann-tag.deal{background:var(--gold);color:#3a2a00}
.ann-off{
  position:absolute;top:32px;right:8px;z-index:2;
  background:var(--red);color:#fff;font-size:10px;font-weight:900;
  padding:3px 7px;border-radius:5px;line-height:1.35;
}

/* text below the photo */
.ann-tx{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.ann-tx b{
  display:block;color:var(--ink);font-size:15px;font-weight:700;
  line-height:1.3;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:39px;
}
.ann-w{
  font-size:12px;color:var(--mute);font-weight:600;margin-bottom:7px;
}
.ann-price{margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ann-price .now{
  color:var(--red);font-size:21px;font-weight:900;letter-spacing:-.5px;
}
.ann-price .was{
  font-size:13px;color:var(--mute);text-decoration:line-through;
}

/* ----------------------------- breakpoints ---------------------------- */

/* Small phones: a narrower card, and the arrows would crowd the screen. */
@media(max-width:520px){
  .ann-in{padding:16px 14px 18px}
  .ann-item{width:224px}
  .ann-row{gap:12px}
  .ann-nav{display:none}          /* swipe instead */
  .ann-head h2{font-size:17px}
  .ann-tx b{font-size:14px}
  .ann-price .now{font-size:19px}
}

@media(min-width:600px){
  .ann-in{padding:22px 22px 26px}
  .ann-item{width:300px}
  .ann-head h2{font-size:21px}
}

@media(min-width:1000px){
  .ann-head h2{font-size:22px}
  .ann-item{width:340px}
}

@media(prefers-reduced-motion:reduce){
  .ann-item{transition:none;filter:none;opacity:1;transform:none}
  .ann-item.is-active{transform:none}
}

@media print{ .ann{display:none} }

/* ===== components/button.css ===== */
/* Buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;
  cursor:pointer;border:2px solid transparent;transition:.2s var(--ease);
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#3a2a00;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:#fff;color:var(--navy-d);border-color:#fff}
.btn-out{border-color:var(--line);color:var(--ink);background:#fff}
.btn-out:hover{border-color:var(--red);color:var(--red)}

/* ===== components/chips.css ===== */
/* Category chips & section headings */

.chips{padding:26px 16px 6px}
.chips-in{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 6px;text-align:center;transition:.2s var(--ease);
}
.chip:hover{border-color:var(--red);box-shadow:var(--sh-md);transform:translateY(-3px)}
.chip img{
  width:56px;height:56px;border-radius:10px;object-fit:contain;background:#fff;
  margin:0 auto 8px;background:var(--bg);border:1px solid var(--line);
}
.chip b{display:block;font-size:12px;color:var(--ink);line-height:1.25;font-weight:700}
.chip span{font-size:10.5px;color:var(--mute)}


.sec{padding:26px 16px 6px;scroll-margin-top:calc(var(--nav-h) + 6px)}
.sec-head{
  display:flex;align-items:center;gap:11px;padding-bottom:12px;
  margin-bottom:17px;border-bottom:2px solid var(--line);
}
.sec-no{
  background:var(--red);color:#fff;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:12.5px;font-weight:900;flex-shrink:0;
}
.sec-head h2{font-size:19px}
.sec-head .n{
  margin-left:auto;font-size:11.5px;color:var(--mute);
  font-weight:700;white-space:nowrap;
}
.sec-title{text-align:center;margin-bottom:20px}
.sec-title h2{font-size:22px}
.sec-title p{font-size:14px;margin-top:5px}

/* ===== components/category-browser.css ===== */
/* Category browser — sidebar list + photo tile grid */

.cat-browse{display:grid;gap:18px}

/* ------------------------------ sidebar ------------------------------- */
.cat-side{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 0 8px;background:#fff;box-shadow:var(--sh);
  align-self:start;
}
.cat-side h3{
  font-size:15px;padding:0 16px 11px;
  border-bottom:1px solid var(--line);margin-bottom:5px;
}
.cat-side a{
  display:flex;align-items:center;gap:10px;padding:7px 16px;
  transition:.15s var(--ease);
}
.cat-side a:hover{background:var(--red-l)}
.cat-side img{
  width:36px;height:36px;border-radius:7px;object-fit:contain;background:#fff;flex-shrink:0;
  border:1px solid var(--line);background:var(--bg);
}
.cat-side span{
  flex:1;min-width:0;font-size:13.5px;color:var(--ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat-side a:hover span{color:var(--red)}
.cat-side em{
  font-style:normal;font-size:11px;color:var(--mute);
  font-weight:700;flex-shrink:0;
}

/* ------------------------------- tiles -------------------------------- */
/* --cols is set per render so rows stay balanced: nine categories are
   5-4, eight are 4-4, never a lone tile on the last row. Narrow screens
   override it, since balance matters less than fitting. */
.cat-tiles{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
}

.cat-tile{text-align:center;transition:.2s var(--ease)}

/* Wider than tall, because that is the shape the pictures are.
 *
 * These are group shots — a spread of bottles, a pile of spices — and
 * they come out roughly 3:2. In a square box that left a band of empty
 * white above and below every one, so the tiles looked mostly blank with
 * a small picture floating in the middle. Matching the box to the
 * pictures fills it without cropping anything away.
 */
.cat-tile-img{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;margin-bottom:9px;
  aspect-ratio:4/3;transition:.2s var(--ease);
}
/* `contain`, never `cover`: a category picture has its subject arranged
   across the whole frame, and cropping the edges off cuts the bottles at
   either end out of the shot. No padding either — the margin is trimmed
   out of the files themselves, so adding more here would only reintroduce
   the empty band this is meant to remove. */
.cat-tile-img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .4s var(--ease);
}
.cat-tile:hover .cat-tile-img{border-color:var(--red);box-shadow:var(--sh-lg)}
.cat-tile:hover .cat-tile-img img{transform:scale(1.07)}
.cat-tile:hover{transform:translateY(-3px)}

.cat-tile b{
  display:block;font-size:13.5px;color:var(--ink);
  font-weight:700;line-height:1.3;
}
.cat-tile:hover b{color:var(--red)}
.cat-tile span{font-size:11.5px;color:var(--mute)}

/* ------------------------------ shelves ------------------------------- */
/* Countrywise, New and Popular are ways of looking across the shop rather
   than places a product lives. The rule says so: everything above it is a
   category, everything below it is another way in. Without the separation
   Countrywise reads as a tenth category, which is exactly the confusion
   this arrangement exists to prevent. */

.cat-main{min-width:0}

.shelf-rule{
  display:flex;align-items:center;gap:12px;
  margin:26px 0 16px;
}
.shelf-rule::before,
.shelf-rule::after{
  content:"";height:2px;flex:1;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--navy));
}
.shelf-rule::after{background:linear-gradient(90deg,var(--navy),transparent)}
.shelf-rule span{
  font-size:11.5px;font-weight:900;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--navy-d);white-space:nowrap;
}

/* An orange edge marks a shelf tile as a different kind of thing even
   once it has scrolled away from the rule. On white like the category
   pictures, so it is not sitting in a tinted box of its own.

   Square, unlike the categories: a globe and two round badges are as tall
   as they are wide, and a 4:3 box would leave a margin down each side
   rather than removing one. */
.cat-tile.is-shelf .cat-tile-img{
  border-color:var(--navy);background:#fff;aspect-ratio:1/1;
}
.cat-tile.is-shelf b{color:var(--navy-d)}
.cat-tile.is-shelf:hover .cat-tile-img{border-color:var(--navy-d)}

/* Laid out on the same grid as the categories, so a shelf tile is the
   size of a category tile rather than merely close to it. Filling the row
   with three made them half again as large as everything above, which
   read as a banner rather than as part of the same set.

   Three category-sized tracks, centred in the row. --catcols comes from
   the render, so this follows however the categories are arranged. */
.shelf-tiles{
  --gap:14px;
  /* One track the size of a category tile: the row divided the way the
     categories above divide it. Written out rather than left to 1fr,
     because the grid below is narrower than the row and a fraction of it
     would come out smaller. */
  --track:var(--catcols,2);
  --tile:calc((100% - (var(--track) - 1) * var(--gap)) / var(--track));
  gap:var(--gap);
  grid-template-columns:repeat(var(--cols,3),var(--tile));
  justify-content:center;
}


/* Below 1000px the categories cap at three columns whatever --catcols
   says, so the shelves take three too — the row is exactly full, and
   there is nothing to centre. */
@media(max-width:999px){
  .shelf-tiles{--track:3}
}

/* Two across on a phone, matching the categories, where three would leave
   the names too narrow to read. --catcols still carries the desktop count,
   so the track is pinned here rather than inherited. The odd one out takes
   the full width and centres itself. */
@media(max-width:599px){
  /* Two tracks, so the three wrap to two and one. The last tile keeps the
     track width it would have had — spanning the row and halving itself
     would fight the fixed track and overflow — and centres in the row it
     has to itself. */
  .shelf-tiles{grid-template-columns:repeat(2,var(--tile));--track:2}
  .shelf-tiles > .cat-tile:last-child:nth-child(odd){
    grid-column:1/-1;justify-self:center;width:var(--tile);
  }
}

/* The sidebar's own heading for the same group. */
.cat-side-more{
  margin-top:9px;padding-top:11px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--navy-d);font-size:12px;letter-spacing:.6px;text-transform:uppercase;
}

/* ----------------------------- breakpoints ---------------------------- */
/* Both grids carry .cat-tiles, so the column rules are scoped away from
   the shelves, which size their tracks from --catcols instead. */
@media(min-width:600px){
  .cat-tiles:not(.shelf-tiles){grid-template-columns:repeat(min(3,var(--cols,3)),1fr)}
  .cat-tiles{gap:16px}
  .cat-tile b{font-size:14px}
  .shelf-tiles{--gap:16px}
}

@media(min-width:1000px){
  /* Sidebar on the left, tiles filling the rest — the reference layout */
  .cat-browse{grid-template-columns:262px 1fr;gap:24px}
  .cat-tiles:not(.shelf-tiles){grid-template-columns:repeat(var(--cols,4),1fr)}
  .cat-tiles{gap:18px}
  .shelf-tiles{--gap:18px}
}

@media print{ .cat-side{display:none} }

/* ===== components/countries.css ===== */
/* ==========================================================================
   Countrywise browsing — a tile per country, then that country's products.
   Deliberately the same shape as the category tiles, so the two views feel
   like one shop rather than two.
   ========================================================================== */

.ctry-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
}

.ctry-tile{text-align:center;transition:.2s var(--ease)}

/* Every flag gets the same box and sits inside at its own proportions.
   Nothing is cropped or stretched: Nepal is a pennant, Sri Lanka is 2:1,
   and forcing either into a square would misrepresent it. */
.ctry-tile-img{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;margin-bottom:9px;aspect-ratio:1/1;
  display:grid;place-items:center;padding:18%;
  transition:.2s var(--ease);
}
.ctry-tile-img img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border:1px solid rgba(0,0,0,.13);border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transition:transform .35s var(--ease);
}
.ctry-tile:hover .ctry-tile-img{border-color:var(--red);box-shadow:var(--sh-lg)}
.ctry-tile:hover .ctry-tile-img img{transform:scale(1.08)}
.ctry-tile:hover{transform:translateY(-3px)}

.ctry-tile b{
  display:block;font-size:13.5px;color:var(--ink);
  font-weight:700;line-height:1.3;
}
.ctry-tile:hover b{color:var(--red)}
.ctry-tile span{font-size:11.5px;color:var(--mute)}

/* ------------------------- one country's products ---------------------- */

.ctry-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;
}
.ctry-head h2{
  font-size:21px;color:var(--ink);letter-spacing:-.3px;margin:0;
}
.ctry-head .flag{
  border:1px solid rgba(0,0,0,.14);border-radius:3px;
  box-shadow:0 1px 5px rgba(0,0,0,.16);
  max-height:30px;width:auto;
}

.ctry-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;color:var(--body);
  border:1px solid var(--line);border-radius:8px;
  padding:8px 13px;background:#fff;transition:.18s var(--ease);
}
.ctry-back:hover{border-color:var(--red);color:var(--red)}
/* The icon set has no left arrow, so the up arrow is turned to point back. */
.ctry-back .icon{transform:rotate(-90deg)}

/* ----------------------------- breakpoints ---------------------------- */
@media(min-width:600px){
  .ctry-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .ctry-tile b{font-size:14px}
  .ctry-head h2{font-size:24px}
}

@media(min-width:1000px){
  .ctry-grid{grid-template-columns:repeat(5,1fr);gap:18px}
}

/* ===== components/delivery.css ===== */
/* ==========================================================================
   Delivery — two plain cards, local and nationwide.
   The threshold is the thing a customer is actually looking for, so it is
   set large at the foot of each card rather than buried in the sentence.
   ========================================================================== */

.dlv{
  display:grid;gap:14px;grid-template-columns:1fr;
}

.dlv-card{
  position:relative;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px 20px;
  box-shadow:var(--sh);
  transition:.2s var(--ease);
}
.dlv-card:hover{
  border-color:#f0c4a8;box-shadow:var(--sh-md);transform:translateY(-2px);
}

/* The promise, said once, at the top corner. */
.dlv-tag{
  position:absolute;top:-9px;left:20px;
  background:linear-gradient(120deg,var(--red-d),var(--red));
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.9px;
  padding:5px 11px;border-radius:20px;
  box-shadow:0 4px 12px rgba(200,16,46,.30);
}

.dlv-ic{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--navy-l);color:var(--navy);margin-bottom:12px;
}

.dlv-card h3{
  font-size:16.5px;color:var(--ink);margin-bottom:5px;letter-spacing:-.2px;
}
.dlv-card p{
  font-size:14px;color:var(--body);line-height:1.55;margin-bottom:14px;
}

/* The number a customer came to find. */
.dlv-amt{
  display:flex;align-items:baseline;gap:8px;
  font-size:25px;font-weight:900;color:var(--navy);letter-spacing:-.5px;
}
.dlv-amt span{
  font-size:11.5px;font-weight:700;color:var(--mute);letter-spacing:.3px;
}

.dlv-ask{
  text-align:center;margin-top:16px;font-size:13.5px;
}
.dlv-ask a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--body);font-weight:700;
}
.dlv-ask a:hover{color:var(--red)}
.dlv-ask .icon{color:var(--red)}

/* ----------------------------- breakpoints ---------------------------- */
@media(min-width:760px){
  .dlv{grid-template-columns:1fr 1fr;gap:18px}
  .dlv-card{padding:26px 24px 22px}
  .dlv-card h3{font-size:17.5px}
  .dlv-amt{font-size:28px}
}

/* ===== components/chat.css ===== */
/* ==========================================================================
   Order on chat — WhatsApp, LINE, and the shop's group.

   The link comes first and the QR sits under it: on a phone, which is
   where most of this shop's customers are, tapping is the whole
   interaction and a QR code is useless. The code is there for someone
   reading on a laptop with their phone in hand.
   ========================================================================== */

.chat{
  display:grid;gap:14px;grid-template-columns:1fr;
}

.chat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-align:center;
  box-shadow:var(--sh);transition:.2s var(--ease);
  display:flex;flex-direction:column;align-items:center;
}
.chat-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}

/* Each service keeps its own colour — people recognise them by it. */
.chat-ic{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  margin-bottom:12px;color:#fff;
}
.chat-card.wa   .chat-ic{background:#25d366}
.chat-card.line .chat-ic{background:#06c755}
.chat-card.grp  .chat-ic{background:linear-gradient(135deg,#128c7e,#25d366)}
.chat-card.wa:hover  {border-color:#25d366}
.chat-card.line:hover{border-color:#06c755}
.chat-card.grp:hover {border-color:#128c7e}

.chat-card h3{font-size:16.5px;color:var(--ink);margin-bottom:4px}
.chat-card p{font-size:13.5px;color:var(--body);line-height:1.5;margin-bottom:14px}

.chat-go{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:132px;padding:11px 22px;border-radius:10px;
  background:var(--red);color:#fff;font-size:14px;font-weight:800;
  transition:.18s var(--ease);
}
.chat-go:hover{background:var(--red-d);transform:translateY(-1px)}


/* The group card has no QR of its own. Rather than letting it float in
   the middle while the others start at the top, it keeps the same
   alignment and simply ends earlier. */
.chat-card{justify-content:flex-start}
.chat-card.grp .chat-go{margin-top:auto}

/* ----------------------------- breakpoints ---------------------------- */
@media(min-width:760px){
  .chat{grid-template-columns:repeat(3,1fr);gap:18px}
  .chat-card{padding:26px 22px}
}

/* ===== components/card.css ===== */
/* Product grid & card */

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  transition:.22s var(--ease);position:relative;
}
.card:hover{box-shadow:var(--sh-lg);border-color:#d5dbe3;transform:translateY(-4px)}

/* The whole photo, never a crop. The owner shoots packets and bottles in
   whatever shape they come in; cutting the top off a bottle to fill a
   square hides the label that tells a customer what it is. White behind,
   so a tall or wide photo sits on the same ground as the card. */
.card-img{
  position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;
}
.card-img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .45s var(--ease);
}
.card:hover .card-img img{transform:scale(1.06)}

/* On the right, because the halal seal is stamped into the top-left of
   the photograph itself and the two would sit on top of each other. */
.badges{
  position:absolute;top:8px;right:8px;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;
}
.badge{
  font-size:10px;font-weight:900;padding:3.5px 8px;border-radius:5px;
  color:#fff;letter-spacing:.3px;line-height:1.3;
}
/* Only the discount is a corner badge now. New arrivals have a shelf of
   their own, and stock is stated beside the weight rather than shouted
   from the picture. */
.badge-off{background:var(--red)}

.card-b{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}
.card-cat{
  font-size:9.5px;color:var(--mute);font-weight:800;
  letter-spacing:.9px;margin-bottom:4px;
}
.card-b h3{font-size:13.5px;font-weight:700;line-height:1.34;margin-bottom:2px}
.card-jp{
  font-size:11px;color:var(--mute);line-height:1.3;margin-bottom:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Size and stock on one line: both are plain facts about the product,
   read together before the price. */
.card-meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;
}
.card-w{
  display:inline-block;background:var(--navy-l);
  color:var(--navy);font-size:10.5px;font-weight:800;
  padding:2.5px 8px;border-radius:5px;
}

/* Green for on the shelf, red for gone. Word and colour together, never
   colour alone — a customer who cannot separate the two still reads it. */
.card-stock{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:900;letter-spacing:.4px;
}
.card-stock::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
}
.card-stock.in{color:#12805c}
.card-stock.out{color:var(--red)}
.price{margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.price .now{font-size:18px;font-weight:900;color:var(--red);letter-spacing:-.4px}
.price .was{font-size:12px;color:var(--mute);text-decoration:line-through}
.tax{font-size:9.5px;color:var(--mute);margin-top:2px}
.card.out{opacity:.62}

.empty{text-align:center;padding:50px 16px;color:var(--body)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:5px}

/* ===== components/promo.css ===== */
/* Promo banners & info band */

.promos{display:grid;gap:14px;padding:24px 16px 6px}
.promo{
  border-radius:var(--radius);padding:26px 24px;color:#fff;
  position:relative;overflow:hidden;
}
.promo::after{
  content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.promo-a{background:linear-gradient(125deg,#7f1d1d,var(--red))}
.promo-b{background:linear-gradient(125deg,#c2410c,#f79426)}
.promo span{
  font-size:10.5px;font-weight:900;letter-spacing:1.4px;
  color:var(--gold);position:relative;z-index:2;
}
.promo h3{color:#fff;font-size:21px;margin:8px 0 15px;position:relative;z-index:2}
.promo .btn{position:relative;z-index:2}


.band{background:var(--bg);margin-top:32px;padding:34px 0}
.band-in{display:grid;gap:22px}
.band h2{font-size:21px;margin-bottom:10px}
.band p{font-size:14px;margin-bottom:12px}
.band ul li{
  display:flex;gap:9px;font-size:14px;margin-bottom:8px;line-height:1.5;
}
.band ul i{font-style:normal;color:var(--ok);flex-shrink:0;font-weight:900}
.band-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--sh);
}
.band-card h3{font-size:16px;margin-bottom:14px}
.hours{width:100%;border-collapse:collapse;font-size:13.5px}
.hours td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.hours .today td{color:var(--red)}

/* ===== components/lightbox.css ===== */
/* Lightbox — large photo view for deals and products */

.lb{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:16px;
}
.lb[hidden]{display:none}

.lb-backdrop{
  position:absolute;inset:0;
  background:rgba(8,18,36,.82);
  backdrop-filter:blur(4px);
  animation:lbFade .2s var(--ease);
}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

.lb-box{
  position:relative;z-index:2;
  width:100%;max-width:940px;max-height:calc(100vh - 32px);
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:lbPop .24s var(--ease);
  display:flex;flex-direction:column;
}
@keyframes lbPop{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to  {opacity:1;transform:none}
}

.lb-close{
  position:absolute;top:10px;right:10px;z-index:5;
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:24px;line-height:1;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.22);transition:.18s var(--ease);
}
.lb-close:hover{background:var(--red);color:#fff;transform:rotate(90deg)}

.lb-body{display:flex;flex-direction:column;overflow-y:auto}

/* ------------------------------- photo -------------------------------- */
.lb-fig{position:relative;background:#fff;flex-shrink:0}
.lb-fig img{
  width:100%;height:auto;max-height:52vh;
  object-fit:contain;display:block;
}
/* Right-hand side, clear of the halal seal stamped into the top-left of
   the photograph. Below the close button, which holds that corner. */
.lb-off{
  position:absolute;top:60px;right:12px;
  background:var(--red);color:#fff;font-size:12px;font-weight:900;
  padding:5px 11px;border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* -------------------------------- info -------------------------------- */
.lb-info{padding:18px 20px 22px;border-top:1px solid var(--line)}

.lb-tag{
  display:inline-block;font-size:10px;font-weight:900;letter-spacing:.7px;
  padding:4px 10px;border-radius:5px;margin-bottom:9px;
}
.lb-tag.new{background:#12805c;color:#fff}
.lb-tag.deal{background:var(--gold);color:#3a2a00}
.lb-tag.cat{background:var(--navy-l);color:var(--navy)}

.lb-info h3{font-size:21px;line-height:1.25;margin-bottom:5px}
.lb-alt{font-size:13.5px;color:var(--mute);line-height:1.5;margin-bottom:12px}

.lb-meta{margin-bottom:12px}
.lb-w{
  display:inline-block;background:var(--navy-l);color:var(--navy);
  font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:6px;
}

.lb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lb-price .now{font-size:30px;font-weight:900;color:var(--red);letter-spacing:-.6px}
.lb-price .was{font-size:16px;color:var(--mute);text-decoration:line-through}
.lb-tax{font-size:11.5px;color:var(--mute);margin:2px 0 16px}

.lb-call{width:100%;justify-content:center}

/* ----------------------------- breakpoints ---------------------------- */
@media(min-width:760px){
  .lb-body{flex-direction:row}
  .lb-fig{width:55%;display:grid;place-items:center;padding:8px}
  .lb-fig img{max-height:min(72vh,560px)}
  .lb-info{
    width:45%;border-top:0;border-left:1px solid var(--line);
    padding:30px 28px;display:flex;flex-direction:column;justify-content:center;
  }
  .lb-info h3{font-size:24px}
  .lb-price .now{font-size:34px}
  .lb-call{width:auto;align-self:flex-start}
}

/* Cards that open the lightbox */
[data-lb]{cursor:zoom-in}

@media(prefers-reduced-motion:reduce){
  .lb-backdrop,.lb-box{animation:none}
  .lb-close:hover{transform:none}
}

/* ===== components/map.css ===== */
/* Shop location map */

.map-card{
  display:grid;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--sh);
}

.map-frame{
  position:relative;width:100%;aspect-ratio:16/11;background:var(--bg);
}
.map-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

.map-info{padding:22px}
.map-info h3{font-size:18px;margin-bottom:14px;color:var(--red)}

.map-row{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14px;line-height:1.55;margin-bottom:11px;
}
.map-row i{color:var(--navy);flex-shrink:0;line-height:1.4}
.map-row a{color:var(--navy);font-weight:700}
.map-row a:hover{color:var(--red)}

.map-go{margin-top:8px;display:inline-flex;align-items:center;gap:8px}

@media(min-width:820px){
  .map-card{grid-template-columns:1.5fr 1fr}
  .map-frame{aspect-ratio:auto;height:100%;min-height:340px}
  .map-info{
    display:flex;flex-direction:column;justify-content:center;
    padding:28px;border-left:1px solid var(--line);
  }
  .map-info h3{font-size:20px}
}

/* ===== components/search-box.css ===== */
/* Live search suggestions */

.search{position:relative}

.sg-box{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(10,22,44,.18);
  overflow:hidden;animation:sgIn .16s var(--ease);
}
.sg-box[hidden]{display:none}
@keyframes sgIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.sg-list{max-height:min(60vh,420px);overflow-y:auto}

.sg-row{
  display:flex;align-items:center;gap:11px;
  padding:9px 13px;cursor:pointer;position:relative;
  border-bottom:1px solid var(--line);
}
.sg-row:last-child{border-bottom:0}
.sg-row:hover,.sg-row.on{background:var(--red-l)}

.sg-img{
  width:44px;height:44px;border-radius:8px;object-fit:contain;background:#fff;flex-shrink:0;
  border:1px solid var(--line);background:var(--bg);
}
.sg-tx{flex:1;min-width:0}
.sg-tx b{
  display:block;font-size:14px;font-weight:700;color:var(--ink);
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sg-tx small{font-size:11.5px;color:var(--mute)}

.sg-price{text-align:right;flex-shrink:0;line-height:1.3}
.sg-price b{display:block;font-size:14.5px;font-weight:900;color:var(--red)}
.sg-price s{font-size:11px;color:var(--mute)}

.sg-off{
  position:absolute;top:6px;right:6px;
  background:var(--red);color:#fff;font-size:9px;font-weight:900;
  padding:1px 5px;border-radius:3px;
}

.sg-foot{
  padding:8px 13px;font-size:11.5px;color:var(--mute);
  background:var(--bg);border-top:1px solid var(--line);text-align:center;
}

.sg-none{padding:22px 18px;text-align:center}
.sg-none b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.sg-none span{font-size:13px;color:var(--mute)}
.sg-alt{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--red);font-weight:800;font-size:13px;
  text-decoration:underline;font-family:inherit;
}

/* the card the customer picked */
.card.found{
  animation:found 2.4s var(--ease);
}
@keyframes found{
  0%,100%{box-shadow:var(--sh)}
  15%,70%{box-shadow:0 0 0 3px var(--red),var(--sh-lg)}
}

@media(max-width:620px){
  .sg-box{
    position:fixed;top:auto;left:8px;right:8px;
    max-height:70vh;
  }
  .sg-img{width:38px;height:38px}
  .sg-tx b{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .sg-box,.card.found{animation:none}
}

/* A thin bar while the model refines the order. Local results are
   already visible underneath, so this is a hint, not a spinner. */
.sg-box.thinking::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:sgScan 1s linear infinite;
  z-index:2;
}
@keyframes sgScan{
  from{background-position:-40% 0}
  to  {background-position:140% 0}
}
@media(prefers-reduced-motion:reduce){
  .sg-box.thinking::before{animation:none;background-position:50% 0}
}

/* ===== components/filters.css ===== */
/* Product filters */

.filters{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh);
}

.fl-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}

.fl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fl-field > span{
  font-size:11.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--mute);
}
.fl-field > span b{color:var(--red);font-size:13px;letter-spacing:0}

.fl-field select{
  border:2px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:14.5px;background:#fff;cursor:pointer;
  min-width:170px;
}
.fl-field select:focus{outline:0;border-color:var(--red)}

.fl-price{flex:1;min-width:190px}
.fl-price input{
  width:100%;accent-color:var(--red);cursor:pointer;height:22px;
}

.fl-toggles{display:flex;gap:8px;flex-wrap:wrap}
.fl-chip{cursor:pointer}
.fl-chip input{position:absolute;opacity:0;pointer-events:none}
.fl-chip span{
  display:inline-block;border:2px solid var(--line);border-radius:20px;
  padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--body);
  transition:.15s var(--ease);
}
.fl-chip:hover span{border-color:#cfd6e0}
.fl-chip input:checked + span{
  background:var(--red);border-color:var(--red);color:#fff;
}
.fl-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.fl-clear{
  border:0;background:none;cursor:pointer;padding:9px 4px;
  font-size:13px;font-weight:700;color:var(--red);
  display:inline-flex;align-items:center;gap:5px;
}
.fl-clear:hover{text-decoration:underline}
.fl-clear[hidden]{display:none}

.fl-count{
  font-size:12.5px;color:var(--mute);font-weight:600;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
}
.filters .res{display:none}   /* search count is shown by .fl-count */

@media(max-width:700px){
  .filters{padding:14px}
  .fl-row{gap:14px}
  .fl-field select{min-width:0;width:100%}
  .fl-field{width:100%}
  .fl-price{width:100%}
  .fl-clear{margin-left:auto}
}

/* ===== base/responsive.css ===== */
/* Breakpoints, motion & print */

@media(min-width:600px){
  .topbar-links{display:flex}
  .brand-logo{width:56px;height:56px}
  .brand-tx b{font-size:19px}
  .brand-tx i{display:block}
  .burger{display:none}
  .nav-in{justify-content:center}
  .hero{padding:52px 0 56px}
  .hero h1{font-size:35px}
  .hero p{font-size:16px}
  .feats-in{grid-template-columns:repeat(4,1fr)}
  .chips-in{grid-template-columns:repeat(4,1fr)}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .sec-head h2{font-size:22px}
  .sec-title h2{font-size:26px}
  .promos{grid-template-columns:1fr 1fr}
  .band-in{grid-template-columns:1.4fr 1fr;align-items:start}
  .foot-g{grid-template-columns:1.8fr 1fr 1fr}
  .page-head h1{font-size:31px}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:1000px){
  .header{padding:16px 0}
  .header-in{gap:24px}
  .search{max-width:640px}
  .tel{display:flex}
  .hero{padding:64px 0 68px}
  .hero h1{font-size:42px}
  .chips-in{grid-template-columns:repeat(6,1fr)}
  .grid{grid-template-columns:repeat(5,1fr);gap:18px}
  .sec{padding-top:34px}
  .promo h3{font-size:24px}
  .foot-g{grid-template-columns:1.9fr 1fr 1fr 1fr}
  .top-btn{right:24px;bottom:24px;width:50px;height:50px}
}

@media(min-width:1200px){
  .chips-in{grid-template-columns:repeat(12,1fr)}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{
  .topbar,.nav,.hero,.search,.top-btn,.promos,.chips,.feats{display:none}
  .card{break-inside:avoid;border-color:#ccc}
  body{font-size:11px}
}