/* The original site's own typography: Bely-Bold for headings (self-hosted,
   copied from the old site) and Montserrat for body text. */
@font-face{
  font-family:"Bely";
  src:url("../fonts/Bely-Bold.woff2") format("woff2"),
      url("../fonts/Bely-Bold.woff") format("woff");
  font-weight:400 700;font-style:normal;font-display:swap;
}
/* Al Sharq Sweets - brand stylesheet */
:root{
  --brand:#bf0d3e; --brand-dark:#96082f; --ink:#242424; --body:#3a3a3a;
  --muted:#767676; --line:#e7e4e0; --bg:#fff; --bg-alt:#faf8f6; --bg-warm:#f4efe9;
  --wa:#25d366;
  --serif:"Bely","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1240px; --gut:24px;
  --sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --sh-lg:0 4px 12px rgba(0,0,0,.06),0 24px 48px rgba(0,0,0,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:15px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:400;
  line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);font-weight:500;margin-bottom:.9rem}
.lede{font-size:1.06rem;color:var(--muted);max-width:60ch;margin-inline:auto}
.sec{padding:clamp(56px,7vw,104px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-head{margin-bottom:clamp(32px,4vw,56px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:.6rem 1rem;
  border:2px solid var(--brand)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.9rem;border-radius:2px;font-size:.78rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;transition:.22s ease;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-ghost{border:1px solid currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{border:1px solid rgba(255,255,255,.65);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1da851}
.btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed;
  transform:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;min-height:78px;position:relative}
.nav{display:flex;gap:2rem;align-items:center}
.nav-r{justify-content:flex-end}
/* sits outside .nav so the cart stays reachable once the nav collapses */
.hdr-r{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
.hdr-phone{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink)}
.hdr-phone:hover{color:var(--brand)}
.nav a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--ink);position:relative;padding:.4rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brand);transition:right .25s ease}
.nav a:hover::after,.nav a.on::after{right:0}
.nav a.on{color:var(--brand)}
.brand img{height:54px;width:auto}
.brand-text{font-family:var(--serif);font-size:1.6rem;font-weight:600;
  color:var(--brand);letter-spacing:.02em;white-space:nowrap;line-height:1}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:22px;height:1.5px;background:var(--ink);transition:.25s}
.burger span::before{top:-7px}
.burger span::after{top:7px}

/* ---------- hero ----------
   Rebuilt from the original banner's own five layers: the marble background,
   the crimson panel, the ornaments, the tray and the plate. They were always
   separate transparent images - flattening them into one photo is what made
   this section look wrong. Each layer animates in, then drifts gently.        */
.hero{position:relative;overflow:hidden;background:#cfd2cd;
  height:clamp(480px,64vh,640px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* The marble averages 100/255 luminance with patches up to 146, so neither
   black nor plain white text clears 4.5:1 on its own. This scrim darkens only
   the text side - it fades to nothing before the crimson panel at 49.5%. */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,
    rgba(0,0,0,.66) 0%, rgba(0,0,0,.50) 28%,
    rgba(0,0,0,.22) 44%, rgba(0,0,0,0) 56%)}
/* Widths and positions are the originals, measured off the live banner:
   panel 49.5% at x 49.5%, tray 42.6% at x 54.7%, plate 15.1% at x -3.8%,
   ornaments 19.1% at x 83.6%. */
.hero-panel{position:absolute;z-index:3;left:49.5%;top:50%;width:49.5%;
  height:auto;transform:translateY(-50%)}
.hero-logs{position:absolute;z-index:4;left:83.6%;top:16%;width:19.1%;height:auto}
.hero-tray{position:absolute;z-index:5;left:54.7%;top:50%;width:42.6%;
  height:auto;transform:translateY(-50%);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.32))}
.hero-plate{position:absolute;z-index:6;left:-3.8%;bottom:2%;width:15.1%;
  height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.24))}
.hero-txt{position:relative;z-index:7;width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut)}
.hero-txt h1{color:#fff;font-weight:700;margin-bottom:1.1rem;max-width:13ch;
  font-size:clamp(1.9rem,2.9vw,2.6rem);line-height:1.18}
.hero-txt p{color:rgba(255,255,255,.93);font-size:1rem;margin-bottom:1.8rem;max-width:34ch}

/* entrance, then a slow drift - the movement the original banner had */
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(-50%) translateX(46px)}
  to{opacity:1;transform:translateY(-50%)}}
@keyframes trayIn{from{opacity:0;transform:translateY(-50%) scale(.86)}
  to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes plateIn{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes logsIn{from{opacity:0;transform:translateY(-22px) rotate(-8deg)}
  to{opacity:1;transform:none}}
@keyframes bgIn{from{transform:scale(1.09)}to{transform:none}}
@keyframes driftY{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes driftSlow{0%,100%{translate:0 0}50%{translate:0 7px}}

.hero-bg{animation:bgIn 1.8s cubic-bezier(.22,1,.36,1) both}
.hero-panel{animation:panelIn 1s cubic-bezier(.22,1,.36,1) .1s both}
.hero-logs{animation:logsIn .9s cubic-bezier(.22,1,.36,1) .5s both,
  driftSlow 7s ease-in-out 1.6s infinite}
.hero-tray{animation:trayIn 1.1s cubic-bezier(.22,1,.36,1) .28s both,
  driftY 6s ease-in-out 1.6s infinite}
.hero-plate{animation:plateIn 1s cubic-bezier(.22,1,.36,1) .46s both,
  driftY 7.5s ease-in-out 2s infinite}
.hero-txt h1{animation:heroIn .85s cubic-bezier(.22,1,.36,1) .18s both}
.hero-txt p{animation:heroIn .85s cubic-bezier(.22,1,.36,1) .32s both}
.hero-txt .btn{animation:heroIn .85s cubic-bezier(.22,1,.36,1) .46s both}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,52px)}
.val{text-align:center}
.val-ico{width:46px;height:46px;margin:0 auto 1.1rem;color:var(--brand)}
.val-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.2}
.val h3{margin-bottom:.5rem}
.val p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- category mosaic ---------- */
/* the original layout: one large tile plus four, tiling 4 columns x 2 rows */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(175px,17vw,240px);gap:14px}
.mosaic .tile:first-child{grid-column:span 2;grid-row:span 2}
.tile{position:relative;overflow:hidden;border-radius:3px;display:block;background:#ddd}
.tile.noimg{background:
  radial-gradient(circle at 50% 45%, #fff 0%, var(--bg-warm) 60%, #e6ddd2 100%)}
.tile.noimg::before{content:"";position:absolute;inset:0;z-index:1;
  background:url("../brand/logo.svg") center 40% / 34% auto no-repeat;opacity:.22}

.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.14) 52%,rgba(0,0,0,.05))}
.tile:hover img{transform:scale(1.07)}
.tile-lbl{position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;
  color:#fff;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;padding-inline:14px}
.tile-lbl small{display:block;font-size:.68rem;letter-spacing:.12em;
  opacity:.8;margin-top:.35rem;text-transform:none}

/* ---------- product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(16px,2vw,26px)}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;transition:.28s ease}
.card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px);border-color:transparent}
.card-img{position:relative;aspect-ratio:1;background:var(--bg-warm);overflow:hidden}
/* branded tile for products the menu has no photo for */
.card-img.noimg{background:
  radial-gradient(circle at 50% 42%, #fff 0%, var(--bg-warm) 62%, #ece4da 100%)}
.card-img.noimg::after{content:"";position:absolute;inset:0;
  background:url("../brand/logo.svg") center 44% / 46% auto no-repeat;opacity:.3}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:1.1rem 1rem .5rem;text-align:center;flex:1;
  display:flex;flex-direction:column}
.card-cat{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem;order:-1}
.card h3{font-size:1.08rem;margin-bottom:.5rem}
.card-desc{font-size:.84rem;color:var(--muted);line-height:1.5;margin:0 0 .7rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-family:var(--sans);font-weight:600;color:var(--brand);
  font-size:1.16rem;margin-top:auto}
.price .unit{font-size:.78rem;font-weight:400;color:var(--muted)}
.card .btn{margin:.85rem 1rem 1rem;border-radius:2px}
.badge-out{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.78);
  color:#fff;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:2px;z-index:2}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.svc{position:relative;overflow:hidden;border-radius:3px;min-height:330px;
  display:flex;align-items:flex-end;padding:1.9rem;color:#fff}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.svc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.28) 60%,rgba(0,0,0,.08))}
.svc:hover img{transform:scale(1.06)}
.svc-in{position:relative;z-index:2}
.svc h3{color:#fff;margin-bottom:.5rem}
.svc p{color:rgba(255,255,255,.86);font-size:.9rem;margin:0}

/* ---------- quote ---------- */
.quote{background:var(--brand);color:#fff;text-align:center;
  padding:clamp(56px,7vw,96px) 0}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.05rem);
  line-height:1.4;margin:0 auto 1.6rem;max-width:26ch;font-weight:500}
.quote cite{font-style:normal;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.86}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);
  margin-bottom:2.6rem}
.ci{text-align:center}
.ci-ico{width:34px;height:34px;margin:0 auto .9rem;color:var(--brand)}
.ci-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.ci-lbl{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem}
.ci a,.ci span{font-size:1.02rem;color:var(--ink)}
.ci a:hover{color:var(--brand)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.72);
  padding:clamp(48px,6vw,76px) 0 0}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:clamp(24px,3vw,48px);padding-bottom:2.8rem}
.ftr h4{color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;margin-bottom:1.1rem}
.ftr a{color:rgba(255,255,255,.72);font-size:.92rem;display:block;
  padding:.3rem 0;transition:.2s}
.ftr a:hover{color:#fff}
.ftr-logo{height:62px;width:auto;margin-bottom:1.1rem;
  filter:brightness(0) invert(1);opacity:.92}
.ftr p{font-size:.9rem;line-height:1.7}
.nlform{display:flex;gap:8px;margin-top:.9rem}
.nlform input{flex:1;min-width:0;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:.72rem .9rem;font:inherit;font-size:.9rem;border-radius:2px}
.nlform input::placeholder{color:rgba(255,255,255,.45)}
.nlform input:focus{outline:none;border-color:var(--brand)}
.ftr-bot{border-top:1px solid rgba(255,255,255,.12);padding:1.4rem 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.socials{display:flex;gap:14px}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);
  border-radius:50%;display:grid;place-items:center;padding:0}
.socials a:hover{background:var(--brand);border-color:var(--brand)}
.socials svg{width:15px;height:15px;fill:currentColor}

/* ---------- menu page ---------- */
.page-head{background:var(--bg-warm);padding:clamp(40px,5vw,72px) 0;text-align:center}
.controls{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:14px 0;margin-bottom:clamp(28px,3.5vw,48px)}
.controls-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:210px;max-width:330px}
.search input{width:100%;padding:.68rem .9rem .68rem 2.4rem;border:1px solid var(--line);
  border-radius:2px;font:inherit;font-size:.92rem;background:#fff}
.search input:focus{outline:none;border-color:var(--brand)}
.search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.6}
.chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.chip{padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:2px;
  font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:.2s;background:#fff}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .n{opacity:.6;margin-left:.35rem;font-size:.68rem}
.result-note{font-size:.84rem;color:var(--muted);white-space:nowrap}
.cat-head{grid-column:1/-1;margin:clamp(20px,3vw,40px) 0 .3rem;
  display:flex;align-items:baseline;gap:1rem}
.cat-head:first-child{margin-top:0}
.cat-head h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.cat-head span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.cat-head::after{content:"";flex:1;height:1px;background:var(--line)}
.empty{grid-column:1/-1;text-align:center;padding:3.5rem 0;color:var(--muted)}

/* ---------- cart ---------- */
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem 0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  min-height:44px;min-width:44px;justify-content:center}
.cart-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.cart-btn:hover{color:var(--brand)}
.cart-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--line);color:var(--muted);font-size:.66rem;font-weight:600;
  display:grid;place-items:center;letter-spacing:0;transition:.2s}
.cart-badge.has{background:var(--brand);color:#fff}

.cart-overlay{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.42);
  opacity:0;pointer-events:none;transition:opacity .25s}
.cart-overlay.on{opacity:1;pointer-events:auto}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(420px,100vw);
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:var(--sh-lg)}
.cart.open{transform:none}
.cart-hd{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--line);flex-shrink:0}
.cart-hd h2{font-size:1.35rem}
.cart-hd button{width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;color:var(--muted)}
.cart-hd button:hover{background:var(--bg-alt);color:var(--ink)}
.cart-hd svg{width:17px;height:17px;fill:currentColor}
.cart-body{flex:1;overflow-y:auto;padding:.5rem 1.2rem}
.cart-empty{text-align:center;color:var(--muted);padding:3rem 0;font-size:.95rem}
.cart-empty a{color:var(--brand);text-decoration:underline}
.cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;
  padding:1rem 0;border-bottom:1px solid var(--line);align-items:start}
.cart-row img,.cart-row .ph{width:64px;height:64px;object-fit:cover;
  border-radius:3px;background:var(--bg-warm);display:block}
.cart-name{font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  margin:0 0 .15rem;line-height:1.25}
.cart-unit{font-size:.76rem;color:var(--muted);margin:0 0 .5rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px}
.qty button{width:28px;height:28px;display:grid;place-items:center;
  color:var(--muted);font-size:1rem;line-height:1}
.qty button:hover{background:var(--brand);color:#fff}
.qty span{min-width:58px;text-align:center;font-size:.8rem;font-weight:500;
  color:var(--ink);padding:0 .3rem}
.cart-right{text-align:right}
.cart-line-total{font-weight:600;color:var(--brand);margin:0 0 .4rem;font-size:.98rem}
.cart-del{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline}
.cart-del:hover{color:var(--brand)}
.cart-foot{border-top:1px solid var(--line);padding:1.1rem 1.2rem;flex-shrink:0;
  background:var(--bg-alt)}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.9rem}
.cart-sum span:first-child{font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.cart-sum span:last-child{font-family:var(--sans);font-size:1.5rem;
  font-weight:600;color:var(--brand)}
.cart-foot .btn{width:100%}
.cart-note{font-size:.74rem;color:var(--muted);text-align:center;
  margin:.7rem 0 0;line-height:1.5}

/* ---------- price sync note ---------- */
.sync-note{display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.76rem;color:var(--muted);padding:.6rem;letter-spacing:.04em}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--wa);
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:pulse 2.4s infinite;flex-shrink:0}
.sync-dot.err{background:#e0a800;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- floating buttons ---------- */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;
  border-radius:50%;background:var(--wa);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(37,211,102,.42);transition:.25s}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 8px 26px rgba(37,211,102,.55)}
.wa-fab svg{width:30px;height:30px;fill:#fff;position:relative;z-index:2}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.bot-fab{position:fixed;right:20px;bottom:88px;z-index:90;width:56px;height:56px;
  border-radius:50%;background:var(--brand);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(191,13,62,.4);transition:.25s}
.bot-fab:hover{transform:scale(1.07)}
.bot-fab svg{width:27px;height:27px;fill:#fff}
.bot-fab .close-i{display:none}
.bot-fab.open .open-i{display:none}
.bot-fab.open .close-i{display:block}

/* ---------- chatbot ---------- */
.bot{position:fixed;right:20px;bottom:154px;z-index:91;
  width:min(370px,calc(100vw - 40px));
  height:min(520px,calc(100vh - 200px));background:#fff;border-radius:6px;
  box-shadow:var(--sh-lg);display:none;flex-direction:column;overflow:hidden;
  border:1px solid var(--line)}
.bot.open{display:flex;animation:botin .26s cubic-bezier(.22,1,.36,1)}
@keyframes botin{from{opacity:0;transform:translateY(14px) scale(.98)}}
.bot-hd{background:var(--brand);color:#fff;padding:.95rem 1.1rem;
  display:flex;align-items:center;gap:.7rem;flex-shrink:0}

.bot-hd img{height:34px;width:auto;filter:brightness(0) invert(1)}
.bot-hd .t{font-family:var(--serif);font-size:1.02rem;font-weight:600;line-height:1.2}
.bot-hd .s{font-size:.7rem;opacity:.85;display:flex;align-items:center;gap:.35rem}
.bot-hd .s::before{content:"";width:6px;height:6px;border-radius:50%;background:#7bed9f}
.bot-log{flex:1;overflow-y:auto;padding:1rem;background:var(--bg-alt);
  display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:86%;padding:.65rem .9rem;border-radius:12px;font-size:.9rem;
  line-height:1.55;animation:msgin .22s ease}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}}
/* NOTE: must not be ".msg.bot" - the chat panel itself is ".bot" and its
   display:none would also match the message bubbles, hiding every reply. */
.msg.from-bot{background:#fff;border:1px solid var(--line);
  border-bottom-left-radius:3px;align-self:flex-start}
.msg.me{background:var(--brand);color:#fff;border-bottom-right-radius:3px;
  align-self:flex-end}
.msg b{font-weight:600}
.msg a{color:var(--brand);text-decoration:underline}
.msg.me a{color:#fff}
.p-row{display:flex;justify-content:space-between;gap:.8rem;
  padding:.32rem 0;border-bottom:1px solid var(--line)}
.p-row:last-child{border:0}
.p-row .pp{color:var(--brand);font-weight:600;white-space:nowrap}
.bot-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:.6rem 1rem;background:#fff;
  border-top:1px solid var(--line);flex-shrink:0}
.bot-sugg button{font-size:.76rem;padding:.4rem .8rem;border:1px solid var(--line);
  border-radius:20px;color:var(--body);transition:.2s;background:#fff}
.bot-sugg button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.bot-in{display:flex;gap:8px;padding:.7rem;border-top:1px solid var(--line);
  background:#fff;flex-shrink:0}
.bot-in input{flex:1;min-width:0;border:1px solid var(--line);border-radius:20px;
  padding:.6rem .95rem;font:inherit;font-size:.9rem}
.bot-in input:focus{outline:none;border-color:var(--brand)}
.bot-in button{width:38px;height:38px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;flex-shrink:0}
.bot-in button svg{width:17px;height:17px;fill:#fff}
.typing{display:flex;gap:4px;padding:.8rem 1rem;align-self:flex-start}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .mosaic .tile:first-child{grid-column:span 2;grid-row:span 1}
  .svcs{grid-template-columns:1fr}
  .svc{min-height:250px}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:820px){
  .hdr-in{grid-template-columns:auto 1fr auto;min-height:66px}
  .nav{display:none}
  .burger{display:flex}
  .brand{justify-self:center}
  .brand img{height:40px}
  .nav.mob{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:.5rem 0;border-bottom:1px solid var(--line);
    box-shadow:var(--sh)}
  .nav.mob a{padding:.85rem var(--gut);width:100%}
  .hdr-phone{display:none}
  .hdr-r{gap:0}
  /* stacked on a phone, so the desktop max-height must not clip the panels */
  /* Text first, composition beneath it. The reserved bottom space must clear
     the panel (86vw wide x 473/533 tall + its offset) or the tray lands on top
     of the headline and the button. */
  .hero{height:auto;min-height:0;display:block;
    padding:24px 0 calc(86vw * 0.888 + 26px)}
  .hero::before{background:linear-gradient(180deg,
    rgba(0,0,0,.66) 0%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.18) 66%,
    rgba(0,0,0,0) 82%)}
  .hero-txt{padding-top:6px}
  .hero-txt h1{max-width:none;font-size:clamp(1.7rem,7.2vw,2.2rem)}
  .hero-txt p{max-width:none;font-size:.95rem}
  .hero-panel{right:auto;left:50%;top:auto;bottom:12px;width:min(86%,420px);
    transform:translateX(-50%)}
  .hero-tray{right:auto;left:50%;top:auto;bottom:calc(86vw * 0.16);
    width:min(54%,260px);transform:translateX(-50%)}
  .hero-plate{left:1%;bottom:4px;width:min(28%,130px)}
  /* the ornament crowds the headline at this width */
  .hero-logs{display:none}
  @keyframes panelIn{from{opacity:0;transform:translateX(-50%) translateY(30px)}
    to{opacity:1;transform:translateX(-50%)}}
  @keyframes trayIn{from{opacity:0;transform:translateX(-50%) scale(.88)}
    to{opacity:1;transform:translateX(-50%) scale(1)}}
  .vals{grid-template-columns:1fr;gap:2rem}
  .controls{top:66px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .card h3{font-size:.96rem}
  .card-desc{display:none}
}
@media(max-width:520px){
  .ftr-grid{grid-template-columns:1fr}
  .ftr-bot{justify-content:center;text-align:center}
  .bot{bottom:0;right:0;width:100vw;height:100vh;border-radius:0}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mosaic{grid-auto-rows:158px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Entrance + scroll animations
   Everything is opt-in via .reveal, and every rule here is switched off by
   the prefers-reduced-motion block at the end of this file.
   ========================================================================== */
/* Content is VISIBLE by default. It is only hidden once JS has confirmed it
   can reveal it again (html.js-anim), so a script error, a blocked file or a
   browser without IntersectionObserver can never leave the page blank. */
.js-anim .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.js-anim .reveal.seen{opacity:1;transform:none}
.js-anim .reveal.d1{transition-delay:.08s}
.js-anim .reveal.d2{transition-delay:.16s}
.js-anim .reveal.d3{transition-delay:.24s}
.js-anim .reveal.d4{transition-delay:.32s}
/* cards stagger themselves as they scroll in */
.js-anim .grid .card.reveal:nth-child(4n+2){transition-delay:.06s}
.js-anim .grid .card.reveal:nth-child(4n+3){transition-delay:.12s}
.js-anim .grid .card.reveal:nth-child(4n+4){transition-delay:.18s}

/* hero entrance, runs once on load */
@keyframes heroText{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroImg{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes heroPanel{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
/* the hero has its own layered animation above; only the header is set here */
.hdr{animation:heroText .6s ease both}

/* ---------- our story ---------- */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);
  align-items:center}
.story-img{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-body p{font-size:1rem;line-height:1.8}
.est{display:inline-flex;align-items:baseline;gap:.5rem;color:var(--brand);
  font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:.4rem}
.est span{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:400}

/* ---------- certifications ---------- */
.certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.cert{border:1px solid var(--line);border-radius:2px;padding:.5rem .9rem;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:#fff}
.cert b{color:var(--ink);font-weight:500}

/* ---------- mission / vision ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.mv-card{border:1px solid var(--line);border-radius:3px;padding:clamp(24px,3vw,40px);
  background:#fff}
.mv-card h3{margin-bottom:.7rem}
.mv-card p{margin:0;color:var(--muted);line-height:1.75}
.mv-card .val-ico{margin:0 0 1rem}

/* ---------- branches ---------- */
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(14px,2vw,20px)}
.branch{border:1px solid var(--line);border-radius:3px;padding:1.3rem 1.4rem;
  background:#fff;transition:.25s ease}
.branch:hover{border-color:var(--brand);box-shadow:var(--sh);transform:translateY(-2px)}
.branch h3{font-size:1.1rem;margin-bottom:.3rem}
.branch .addr{font-size:.86rem;color:var(--muted);margin:0 0 .8rem}
.branch a{font-size:.82rem;color:var(--brand);letter-spacing:.06em}
.branch a:hover{text-decoration:underline}
.branch.here{border-color:var(--brand);background:var(--bg-alt)}
.branch.here h3::after{content:"Online menu";margin-left:.5rem;font-family:var(--sans);
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--brand);padding:.2rem .45rem;border-radius:2px;vertical-align:middle}

/* ---------- franchise ---------- */
.franchise{position:relative;overflow:hidden;border-radius:3px;
  padding:clamp(36px,5vw,72px);color:#fff}
.franchise img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.franchise::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.84),rgba(0,0,0,.55) 60%,rgba(0,0,0,.35))}
.fr-in{position:relative;z-index:2;max-width:62ch}
.fr-in h2{color:#fff;margin-bottom:.9rem}
.fr-in p{color:rgba(255,255,255,.88);margin-bottom:1rem}
.fr-pts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.6rem 0 1.9rem}
.fr-pts h4{font-family:var(--serif);font-size:1.05rem;color:#fff;margin:0 0 .3rem}
.fr-pts p{font-size:.88rem;margin:0}

@media(max-width:900px){
  .story{grid-template-columns:1fr}
  .mv{grid-template-columns:1fr}
  .fr-pts{grid-template-columns:1fr;gap:1rem}
}


/* ==========================================================================
   Category tiles on a phone
   The label sat on top of the photo, where it competed with the sweets and
   was hard to read. On a phone it moves out from under the image and sits
   below it as plain dark text on the page background.
   ========================================================================== */
@media(max-width:820px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;
    gap:18px 14px}
  .mosaic .tile:first-child{grid-column:span 2;grid-row:auto}
  .tile{display:flex;flex-direction:column;background:none;overflow:visible;
    border-radius:0}
  .tile img{position:static;width:100%;height:auto;aspect-ratio:4/3;
    object-fit:cover;border-radius:3px}
  .mosaic .tile:first-child img{aspect-ratio:16/9}
  .tile::after{display:none}            /* the darkening gradient is not needed */
  .tile.noimg::before{display:none}
  .tile.noimg img{background:var(--bg-warm)}
  .tile-lbl{position:static;bottom:auto;left:auto;right:auto;
    color:var(--ink);font-size:.78rem;letter-spacing:.1em;font-weight:500;
    padding:.62rem 2px 0;text-align:center;line-height:1.35}
  .tile-lbl small{color:var(--muted);opacity:1;margin-top:.2rem}
  .tile:hover img{transform:none}
}

/* Accessibility: this must stay at the END of the file so it also switches off
   the animations declared above. Visitors who ask their device for reduced
   motion get the finished layout with no movement at all. */
@media(prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1;transform:none;transition:none}
  .hero-bg,.hero-panel,.hero-logs,.hero-tray,.hero-plate,
  .hero-txt h1,.hero-txt p,.hero-txt .btn,.hdr{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ==========================================================================
   Section-by-section scrolling (homepage)
   "proximity", not "mandatory": several sections are taller than the screen,
   and mandatory snapping would fight the reader and make the middle of a long
   section unreachable. Proximity settles on a section boundary when you stop
   near one, and otherwise leaves scrolling alone.
   ========================================================================== */
.snap{scroll-snap-type:y proximity}
.snap .hero,
.snap main > .sec,
.snap main > .quote{scroll-snap-align:start;scroll-snap-stop:normal}
/* the sticky header must not cover the top of a snapped section */
.snap .hero,
.snap main > .sec,
.snap main > .quote{scroll-margin-top:78px}

/* Each section owns a screenful so one never runs into the next. The header is
   sticky and takes real space, so a "screen" is the viewport minus its height -
   otherwise every section sits 78px too low and the next one peeks in. */
@media(min-width:821px) and (min-height:620px){
  .snap .hero{height:calc(100vh - 78px);max-height:760px}
  .snap main > .sec,
  .snap main > .quote{min-height:calc(100vh - 78px);display:flex;
    flex-direction:column;justify-content:center}
  /* .wrap centres itself with margin-inline:auto, and an auto margin stops a
     flex item stretching - it then shrinks to content width, which collapsed
     the category mosaic to 658px inside a 1485px section. */
  .snap main > .sec > .wrap,
  .snap main > .quote > .wrap{width:100%}
}

@media(max-width:820px){
  /* snapping on a phone fights thumb scrolling, so it is off there */
  .snap{scroll-snap-type:none}
  .snap .hero,.snap main > .sec,.snap main > .quote{scroll-margin-top:66px}
}
@media(prefers-reduced-motion:reduce){
  .snap{scroll-snap-type:none}
}

/* ==========================================================================
   Menu filters on a phone
   Wrapped chips made the sticky bar 309px tall - with the header that froze
   46% of the screen and pushed the products off the bottom. On a phone the
   chips become one horizontally scrollable row, the way app filters behave.
   ========================================================================== */
@media(max-width:820px){
  .controls{padding:10px 0}
  .controls-in{gap:9px}
  .search{flex:1 1 100%;max-width:none;min-width:0}
  .search input{padding-block:.6rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    padding-bottom:2px;scroll-snap-type:x proximity}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start;padding:.45rem .85rem}
  /* the count sits in the section headings already */
  .result-note{display:none}
  /* category links must clear the header AND the filter bar */
  .cat-head{scroll-margin-top:130px}
}