/* Sweets template, shared by every page. Every colour derives from the BRAND block in each page.
   One motif runs the whole system: the scalloped edge of a cake board and of the pleated paper cup every sweet sits in.
   It is the hero's giant disc, the plate under every product photo, the order field's edge and the list bullets. */
:root{
  --step:color-mix(in oklab,var(--paper) 93%,var(--ink));
  --step-2:color-mix(in oklab,var(--paper) 86%,var(--ink));
  --tint:color-mix(in oklab,var(--brand) 14%,var(--paper));
  --tint-2:color-mix(in oklab,var(--brand) 24%,var(--paper));
  /* the plate under product photos: near-white, so studio backgrounds melt into it (photos multiply onto it) */
  --dish-plate:color-mix(in oklab,var(--brand) 6%,#fff);
  --deep:color-mix(in oklab,var(--brand) 62%,var(--ink));
  /* the brand as small text on a tinted surface (cards, the stats band): a step deeper so it still reads 4.5:1 */
  --brand-text:color-mix(in oklab,var(--brand) 72%,var(--ink));
  --deep-ink:var(--paper);
  --muted:color-mix(in oklab,var(--ink) 72%,var(--paper));
  --line:color-mix(in oklab,var(--ink) 14%,var(--paper));
  --accent-ink:var(--ink);
  --accent-text:var(--brand);
  --plate:#fff;
  --disc:var(--brand);
  --logo-url:url(/img/logo.png);
  --scallop:url(/scallop.svg);
  --m:clamp(1rem,5vw,4.5rem);
  --ok:#3f8a4a;--shut:#b4533f
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans),"Almarai",Tahoma,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--brand) 22%,transparent)}
h1,h2,h3{font-family:var(--display),"Baloo Bhaijaan 2",sans-serif;font-weight:700;line-height:1.1;margin:0;text-wrap:balance}
.preview-bar{background:var(--ink);color:var(--paper);font-size:1rem;text-align:center;padding:.45rem 1rem}
.skip{position:absolute;top:1rem;inset-inline-start:1rem;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:9}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}
::selection{background:var(--brand);color:var(--brand-ink)}

/* The motif as a mask: any element with .sc takes the scalloped disc shape */
.sc{-webkit-mask:var(--scallop) center/contain no-repeat;mask:var(--scallop) center/contain no-repeat}

/* Buttons: one shape (pill), one fill (the brand) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;text-decoration:none;border-radius:999px;padding:.8rem 1.75rem;font-weight:700;font-size:1.125rem;background:var(--brand);color:var(--brand-ink);border:0;font-family:inherit;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),background-color .2s}
.btn:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--brand) 86%,var(--ink))}.btn:active{transform:translateY(0) scale(.97)}
.btn.ghost{background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;border:2px solid color-mix(in srgb,currentColor 45%,transparent)}
.btn.ghost:hover{background:color-mix(in srgb,currentColor 14%,transparent)}

/* The logo plate: the real logo on its own background colour (sampled by site.js) */
.plate{display:inline-grid;place-items:center;background:var(--plate);border-radius:1rem;padding:.45rem .65rem;text-decoration:none;line-height:0}
:root[data-plate=none] .plate{background:none;padding:0}
.plate img{height:var(--logo-h,3.5rem);width:auto;max-width:10rem;object-fit:contain;opacity:0;transition:opacity .3s}
:root[data-logo] .plate img{opacity:1}
:root[data-logo=square]{--logo-h:3.75rem}:root[data-logo=tall]{--logo-h:4.5rem}:root[data-logo=wide]{--logo-h:2.75rem}:root[data-logo=badge]{--logo-h:4rem}
:root[data-logo=badge] .plate{padding:0;overflow:hidden;border-radius:1rem}

/* Social / contact icons */
.icons{display:flex;gap:.5rem;align-items:center}
.icons a{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;color:inherit;background:color-mix(in srgb,currentColor 9%,transparent);transition:background-color .2s,transform .2s}
.icons a:hover{background:color-mix(in srgb,currentColor 18%,transparent);transform:translateY(-2px)}
.icons svg{width:1.2rem;height:1.2rem;fill:currentColor}

/* Delivery-app buttons: the fill script writes one <a class="order-app"><img src="/img/apps/…" alt="name"></a> per app */
.apps{display:flex;flex-wrap:wrap;gap:.75rem}
.order-app,.app{display:inline-flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:.45rem .55rem .45rem 1.4rem;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:1.125rem;transition:transform .2s,background-color .2s}
.order-app:hover,.app:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--paper) 88%,var(--ink))}
.order-app img,.app img{width:2.5rem!important;height:2.5rem!important;border-radius:.65rem;flex:none;object-fit:cover}

/* Product photos sit on a scalloped near-white plate; multiply melts a white studio background into it */
.dishimg{background:var(--dish-plate);display:grid;place-items:center;overflow:hidden}
.dishimg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
/* no photo: the shop's own logo, faint, on the plate (never a fake dish) */
.ph{background:var(--tint);position:relative}
.ph::after{content:"";position:absolute;inset:27%;background:var(--brand);-webkit-mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;opacity:.35}

/* Entrances: only below-the-fold parts wait (site.js marks them), each reveals once; without script all is visible */
.rv.wait{opacity:0;transform:translateY(24px)}
.rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
/* First-screen entrance on load: plays once, ends visible (fill both), so content never stays hidden */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.enter{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--dl,0s)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}