/* Sweets template ("The gift box"), shared by every page. Every colour derives from the BRAND block in each page.
   A quiet paper ground with wide margins; the shop's own boxes and sweets as square-cut prints on the box's tint;
   the brand's full colour kept for the one order field. (.sc, the old scalloped mask, is kept for older pages.) */
: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.35;margin:0;text-wrap:balance;letter-spacing:0}
.preview-bar{background:var(--ink);color:var(--paper);font-size:.875rem;text-align:center;padding:.3rem var(--m);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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)}
/* the second action: a clear outline on whatever it stands on, never a grey (disabled-looking) fill */
.btn.ghost,.btn.line{background:transparent;color:inherit;border:2px solid currentColor}
.btn.ghost:hover,.btn.line:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.btn.ghost:active,.btn.line:active{background:color-mix(in srgb,currentColor 18%,transparent)}
.btn:focus-visible{outline:2.5px solid currentColor;outline-offset:3px}

/* 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: a part below the fold rises in once, just before it arrives. Nothing is ever held hidden: without
   script, before the observer fires, or in a full-page capture every part is already in place. */
@keyframes rv-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv.in{animation:rv-rise .8s cubic-bezier(.2,.7,.2,1) both}
.rv.in.d1{animation-delay:.08s}.rv.in.d2{animation-delay:.16s}.rv.in.d3{animation-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}}

/* Owner 2026-10-28: the logo is the clean transparent asset from scripts/logo_clean.py and stands on the page itself, sized
   like Levain's header logo: no plate, disc or tile around it. .wm is the shop's name as a wordmark, which site.js puts
   in place of the logo where it is too poor to show (data-wordmark) or would not read on its surface; the footer
   already sets the name large, so a footer logo that turns into a wordmark simply leaves. */
:root[data-plate=none] .plate{background:none;padding:0;border-radius:0}
:root[data-plate=none] .plate img{max-width:12rem}
:root[data-plate=none][data-logo=square]{--logo-h:4.75rem}:root[data-plate=none][data-logo=tall]{--logo-h:5.5rem}
:root[data-plate=none][data-logo=wide]{--logo-h:3.5rem}:root[data-plate=none][data-logo=badge]{--logo-h:4.75rem}
.wm{display:block;font-family:var(--display),sans-serif;font-weight:700;font-size:1.375rem;line-height:1.4;max-width:13ch;text-wrap:balance;color:inherit;letter-spacing:0}
footer a:has(> .wm){display:none}
:root[data-wordmark] .seal{display:none!important}
/* on the home page the hero's own name is the wordmark: the bar doesn't repeat it */
header:has(#name) .plate:has(> .wm){display:none}

/* Foundation 2026-10-28 (every new shop, no per-client styling) */
/* hours: today as the box's printed band, the week folded under it (native details; #hours rows unchanged) */
.today-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:32rem;margin:0 0 .6rem;padding:.9rem 1.1rem;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:1.25rem}
.today-line[hidden]{display:none}.today-line b{font-variant-numeric:tabular-nums}
.week-hours{max-width:32rem}
.week-hours summary{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;cursor:pointer;color:var(--muted);font-weight:700;list-style:none;width:fit-content}
.week-hours summary::-webkit-details-marker{display:none}
.week-hours summary::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:0 0 2px 2px;rotate:-45deg;translate:0 -.15em;transition:rotate .2s}
.week-hours[open] summary::after{rotate:135deg;translate:0 .1em}
.week-hours summary:hover{color:var(--ink)}
/* the close: a hairline, then the small print */
footer small{padding-top:1.25rem;border-top:1px solid var(--line)}