/*! Fleur de Lis — Coffee Project · QR menu stylesheet
 * Hand-written, no build step. Mobile-first. Tokens on :root, light + warm espresso dark.
 * Markup contract: design/DESIGN_SYSTEM.md §9
 * Fonts: Sofia Sans + Sofia Sans Condensed (SIL OFL 1.1, Lettersoup) — see assets/fonts/OFL.txt
 */

/* ------------------------------------------------------------------ 1. Fonts */
/* Sofia Sans: one variable file per subset (wght 400–700). */
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/sofia-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/sofia-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/sofia-sans-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Sofia Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/sofia-sans-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Sofia Sans Condensed: static 600 only (display, titles). */
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-condensed-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-condensed-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-condensed-600-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Sofia Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-condensed-600-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ------------------------------------------------------------------ 2. Tokens */
:root{
  /* palette — light (cream · white · coffee) */
  --bg:#F7F2EA;            /* page: warm beige */
  --surface:#FFFDF9;       /* cards, sheets: warm white */
  --surface-2:#EFE6DA;     /* chips, price pills, inputs */
  --surface-3:#E6D9C8;     /* pressed / active fills */
  --text:#2A1C13;          /* espresso ink */
  --text-muted:#6A5444;    /* secondary text */
  --border:#E2D5C4;        /* decorative hairlines */
  --border-strong:#9A836F; /* control outlines (3:1) */
  --accent:#7B4A2B;        /* coffee — primary actions, active chip */
  --on-accent:#FFFDF9;
  --accent-ink:#7B4A2B;    /* accent used as text */
  --rose:#D9A9A3;          /* dusty-pink velvet (decorative) */
  --rose-tint:#F4E1DD;
  --rose-ink:#8A4746;
  --gold:#B08D57;          /* hairline gold (decorative only) */
  --gold-tint:#F1E7D3;
  --gold-ink:#7A5F33;
  --leaf-tint:#E5EBD9;
  --leaf-ink:#4C6436;
  --chili-tint:#F6DED6;
  --chili-ink:#9A3B26;
  --focus:#7B4A2B;
  --scrim:rgba(27,19,14,.55);
  --shadow-sm:0 1px 2px rgba(42,28,19,.06),0 2px 8px rgba(42,28,19,.05);
  --shadow-md:0 2px 4px rgba(42,28,19,.06),0 8px 24px rgba(42,28,19,.10);
  --shadow-lg:0 -4px 12px rgba(42,28,19,.08),0 -16px 48px rgba(42,28,19,.16);
  --img-filter:none;
  color-scheme:light;

  /* type */
  --font-body:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --font-display:"Sofia Sans Condensed","Sofia Sans","Arial Narrow",system-ui,sans-serif;
  --fs-xs:.8125rem;   /* 13 — legal, legend */
  --fs-sm:.9375rem;   /* 15 — descriptions, labels */
  --fs-md:1rem;       /* 16 — body */
  --fs-name:1.0625rem;/* 17 — product name, price */
  --fs-lg:1.25rem;    /* 20 — sheet price, group tiles */
  --fs-xl:1.625rem;   /* 26 — category title */
  --fs-2xl:2rem;      /* 32 — group title, sheet title */
  --fs-3xl:2.5rem;    /* 40 — display */
  --lh-tight:1.15;
  --lh-snug:1.3;
  --lh-body:1.5;

  /* space (4pt) */
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem;--s-6:1.5rem;--s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;
  --gutter:1rem;
  --content:46rem;        /* 736px reading column */

  /* radii */
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;

  /* motion */
  --dur-press:90ms;
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);    /* entering */
  --ease-in:cubic-bezier(.4,0,1,1);       /* leaving */
  --ease-std:cubic-bezier(.4,0,.2,1);

  /* layers */
  --z-topbar:20;--z-fab:30;--z-toast:40;

  /* sizes */
  --tap:44px;
  --icon:24px;
  --icon-sm:20px;
  --topbar-h:104px;       /* updated by JS (ResizeObserver) */
}

/* warm espresso dark — same tokens, two selectors (system + explicit) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B130E;--surface:#251A14;--surface-2:#31241B;--surface-3:#3D2D22;
    --text:#F4EADF;--text-muted:#BBA692;--border:#3A2B21;--border-strong:#86705C;
    --accent:#D8A878;--on-accent:#1B130E;--accent-ink:#E2B88C;
    --rose:#B98580;--rose-tint:#3F2626;--rose-ink:#EDB3AE;
    --gold:#C9A66B;--gold-tint:#3A2E1C;--gold-ink:#D9BC86;
    --leaf-tint:#27301E;--leaf-ink:#B5CC98;--chili-tint:#43221A;--chili-ink:#F2A895;
    --focus:#E5BC8E;--scrim:rgba(8,5,3,.7);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 2px 6px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
    --shadow-lg:0 -8px 40px rgba(0,0,0,.5);
    --img-filter:brightness(.92) saturate(.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B130E;--surface:#251A14;--surface-2:#31241B;--surface-3:#3D2D22;
  --text:#F4EADF;--text-muted:#BBA692;--border:#3A2B21;--border-strong:#86705C;
  --accent:#D8A878;--on-accent:#1B130E;--accent-ink:#E2B88C;
  --rose:#B98580;--rose-tint:#3F2626;--rose-ink:#EDB3AE;
  --gold:#C9A66B;--gold-tint:#3A2E1C;--gold-ink:#D9BC86;
  --leaf-tint:#27301E;--leaf-ink:#B5CC98;--chili-tint:#43221A;--chili-ink:#F2A895;
  --focus:#E5BC8E;--scrim:rgba(8,5,3,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 -8px 40px rgba(0,0,0,.5);
  --img-filter:brightness(.92) saturate(.95);
  color-scheme:dark;
}

@media (min-width:600px){:root{--gutter:1.5rem}}

/* ------------------------------------------------------------------ 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + var(--s-2));scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 var(--fs-md)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
:where(ul,ol)[role="list"]{list-style:none;padding:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--rose-tint);color:var(--text)}
dialog{padding:0;border:0;margin:0;max-width:none;max-height:none;background:transparent;color:inherit}
dialog::backdrop{background:var(--scrim)}
html.is-locked,html.is-locked body{overflow:hidden}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s-2);top:var(--s-2);z-index:100;padding:var(--s-3) var(--s-4);background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);transform:translateY(-200%);text-decoration:none;font-weight:600}
.skip-link:focus{transform:none}

.icon{width:var(--icon);height:var(--icon);flex:none}
.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}
.container{width:100%;max-width:calc(var(--content) + 2*var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}

/* ------------------------------------------------------------------ 4. Controls */
.icon-btn{display:inline-grid;place-items:center;min-width:var(--tap);height:var(--tap);padding:0 var(--s-2);border:0;border-radius:var(--r-pill);background:transparent;color:var(--text);
  transition:background-color var(--dur-fast) var(--ease-std),transform var(--dur-press) var(--ease-std)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{background:var(--surface-3);transform:scale(.96)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border:1px solid transparent;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-md);line-height:1.2;text-align:center;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std),transform var(--dur-press) var(--ease-std)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.06)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--surface-2)}
.btn--ghost{background:transparent;color:var(--accent-ink)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* qty stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface)}
.stepper button{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;background:transparent;border-radius:var(--r-pill);color:var(--text)}
.stepper button:active{background:var(--surface-3)}
.stepper button[disabled]{opacity:.38;cursor:not-allowed}
.stepper output{min-width:2ch;text-align:center;font:600 var(--fs-name)/1 var(--font-body);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ 5. Top bar (sticky header + search + chips) */
.topbar{position:sticky;top:0;z-index:var(--z-topbar);background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
@supports not (background:color-mix(in srgb,red,blue)){.topbar{background:var(--bg)}}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);height:52px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);color:var(--text);text-decoration:none;border-radius:var(--r-sm)}
.brand__mark{width:30px;height:26px}
.brand__word{width:82px;height:18px}
/* uploaded brand image (Admin → Settings): fitted to 160 × 32 by its width/height attributes,
   shrinks on narrow phones so the top-bar buttons always fit */
.brand--img{min-width:0;flex:0 1 auto}
.brand__img{min-width:0;max-width:100%;height:auto}
.brand__default{display:inline-flex;align-items:center;gap:var(--s-2)}
.topbar__actions{display:flex;align-items:center;gap:var(--s-1);margin-right:calc(-1*var(--s-2))}

/* language switcher (details/summary — works without JS) */
.lang{position:relative}
.lang>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-width:var(--tap);height:var(--tap);padding:0 var(--s-2) 0 var(--s-3);border-radius:var(--r-pill);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
.lang>summary:hover,.lang[open]>summary{background:var(--surface-2)}
.lang__code{font:600 var(--fs-sm)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.lang__chev{width:16px;height:16px;margin-left:-2px;color:var(--text-muted);transition:transform var(--dur-fast) var(--ease-std)}
.lang[open] .lang__chev{transform:rotate(180deg)}
/* flags (sprite f-*): small rounded rect + hairline so white stripes show on the light surface */
.flag{position:relative;display:inline-block;flex:none;width:21px;height:14px;border-radius:3px;overflow:hidden;vertical-align:middle;background:var(--surface-2)}
.flag__img{width:100%;height:100%}
.flag::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent);pointer-events:none}
@supports not (color:color-mix(in srgb,red,blue)){.flag::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}}
.lang__menu{position:absolute;z-index:5;right:0;top:calc(100% + 6px);min-width:12rem;padding:var(--s-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  animation:pop-in var(--dur-fast) var(--ease-out)}
/* native names in 4 scripts: system font, so a Greek page never downloads the Cyrillic/Turkish subsets just for this menu */
.lang__menu a{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-md)}
.lang__name{flex:1;min-width:0}
.lang__menu a:hover{background:var(--surface-2)}
.lang__menu a[aria-current="true"]{font-weight:600;color:var(--accent-ink)}
.lang__menu a[aria-current="true"]::after{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* theme toggle: shows the icon of the theme you'd switch TO */
.theme-toggle .icon--sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon--sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon--moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon--sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon--moon{display:none}
}

/* search */
.search{position:relative;display:flex;align-items:center;padding-bottom:var(--s-2)}
.search__icon{position:absolute;left:var(--s-3);color:var(--text-muted);pointer-events:none}
.search__input{width:100%;height:var(--tap);padding:0 var(--tap) 0 calc(var(--s-3) + var(--icon) + var(--s-2));
  border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-md);
  -webkit-appearance:none;appearance:none}
.search__input::placeholder{color:var(--text-muted);opacity:1}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search__input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.search__clear{position:absolute;right:0}

/* category chips with scroll-spy */
.chips{position:relative;margin-inline:calc(-1*var(--gutter))}
.chips__list{display:flex;gap:var(--s-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  padding:var(--s-1) var(--gutter) var(--s-2);scroll-padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
.chips__list::-webkit-scrollbar{display:none}
.chips__list>li{flex:none;scroll-snap-align:start}
.chip{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface-2);
  color:var(--text);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std)}
.chip::after{content:"";position:absolute;inset:-4px 0}       /* 44px hit area */
.chip:hover{background:var(--surface-3)}
.chip[aria-current="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.is-searching .chips{display:none}

/* ------------------------------------------------------------------ 6. Hero / home */
.hero{padding-block:var(--s-6) var(--s-4);text-align:center}
/* Built-in logo: inline SVG without the shield frame (viewBox tight to the artwork), 112 × 135.
   An uploaded logo is an <img> whose width/height attributes already fit it into 220 × 135 (Logo::BOX_HERO). */
.hero__logo{height:auto;margin-inline:auto;color:var(--text)}
svg.hero__logo{width:112px}
.hero__tagline{margin-top:var(--s-3);font:600 var(--fs-xs)/1.2 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.hero__cover{position:relative;margin-top:var(--s-6);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);box-shadow:var(--shadow-sm)}
.hero__cover img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.hero__cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(176,141,87,.35);pointer-events:none}
@media (min-width:720px){.hero__cover{aspect-ratio:21/9}}

.groups{margin-top:var(--s-4)}
.groups__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.groups__list>li:last-child:nth-child(odd){grid-column:1/-1}
.group-tile{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  text-align:left;text-decoration:none;font:600 var(--fs-md)/var(--lh-snug) var(--font-body);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-press) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
.group-tile:hover{border-color:var(--gold)}
.group-tile:active{transform:scale(.98)}
.group-tile .icon{width:28px;height:28px;color:var(--accent-ink)}
@media (min-width:600px){.groups__list{grid-template-columns:repeat(3,minmax(0,1fr))}.groups__list>li:last-child:nth-child(odd){grid-column:auto}}

/* ------------------------------------------------------------------ 7. Menu sections */
.menu:focus{outline:none}
.search-status{min-height:0;font-size:var(--fs-sm);color:var(--text-muted)}
.is-searching .search-status{padding-block:var(--s-4) 0}
.is-searching .hero{display:none}

.group{padding-top:var(--s-10)}
.group__title{display:flex;align-items:center;gap:var(--s-3);font:600 var(--fs-xs)/1.2 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.group__title::before,.group__title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.group__title::after{background:linear-gradient(90deg,var(--gold),transparent)}
.is-searching .group{padding-top:var(--s-4)}
.is-searching .group__title{display:none}

.cat{padding-top:var(--s-6)}
.cat__head{padding-bottom:var(--s-2)}
.cat__title{font:600 var(--fs-xl)/var(--lh-tight) var(--font-display);letter-spacing:.01em;text-wrap:balance}
.cat__note{margin-top:var(--s-1);font-size:var(--fs-sm);color:var(--text-muted)}
/* serving hours pill (category header) + "All day" tag share the coffee tint */
.cat__hours{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-2);min-height:28px;padding:2px 12px 2px 8px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent-ink);font-size:var(--fs-sm);font-weight:600;line-height:1.2}
.cat__hours .icon{width:18px;height:18px;flex:none}
.cat__hours-time{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cat__hours + .cat__note{margin-top:var(--s-2)}

/* ------------------------------------------------------------------ 8. Product row (no photo) */
.items{display:grid}
/* flat grid: name | price, then English name (tr/bg) / subtitle / description / prices / meta under the name */
.item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name price" "alt alt" "sub sub" "desc desc" "prices prices" "meta meta";column-gap:var(--s-3);align-items:start;
  padding-block:var(--s-4);border-bottom:1px solid var(--border)}
.items>.item:last-child{border-bottom:0}
.item__head{grid-area:name;min-width:0}
.item__alt{grid-area:alt}
.item__sub{grid-area:sub}
.item>.price{grid-area:price;text-align:right}
.item__desc{grid-area:desc}
.item>.prices{grid-area:prices}
.item__meta{grid-area:meta}
.item__name{display:inline;font:600 var(--fs-name)/var(--lh-snug) var(--font-body);overflow-wrap:anywhere}
/* stretched button: whole row opens the bottom sheet */
.item__open{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent}
.item__open::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm);transition:background-color var(--dur-fast) var(--ease-std)}
.item__open:focus-visible{outline:none}
.item__open:focus-visible::after{outline:2px solid var(--focus);outline-offset:2px}
.item:has(.item__open:active) .item__open::after{background:color-mix(in srgb,var(--text) 5%,transparent)}
@media (hover:hover){.item:hover .item__name{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.22em}}
.item__alt{margin-top:1px;font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-snug);color:var(--text-muted);overflow-wrap:anywhere}
.item__sub{margin-top:2px;font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-snug);color:var(--accent-ink);overflow-wrap:anywhere}
.item__desc{margin-top:2px;font-size:var(--fs-sm);line-height:1.45;color:var(--text-muted)}
.item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin-top:var(--s-2)}
.item__meta:empty{display:none}

/* price */
.price{font:600 var(--fs-name)/var(--lh-snug) var(--font-body);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.prices{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin-top:var(--s-2)}
.prices__row{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2);font-size:var(--fs-sm)}
.prices__row dt{color:var(--text-muted)}
.prices__row dd{font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2)}
.tag{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 6px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;line-height:1;white-space:nowrap;
  background:var(--surface-2);color:var(--text-muted)}
.tag .icon{width:16px;height:16px}
/* tag colours: .tag--c-<colour> (chosen in Admin → Tags; rules at the end of this file). These per-key
   fallbacks only matter for pages cached before colours were stored; a .tag--c-* class always wins. */
.tag:where(.tag--vegetarian,.tag--vegan){background:var(--leaf-tint);color:var(--leaf-ink)}
.tag:where(.tag--spicy){background:var(--chili-tint);color:var(--chili-ink)}
.tag:where(.tag--new){background:var(--gold-tint);color:var(--gold-ink)}
.tag:where(.tag--signature){background:var(--rose-tint);color:var(--rose-ink)}
.tag--allday{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent-ink)}

/* allergen icons (compact, in rows) */
.allergens{display:flex;flex-wrap:wrap;gap:6px;color:var(--text-muted)}
.allergen{display:grid;place-items:center;width:20px;height:20px}
.allergen .icon{width:16px;height:16px}
/* next to the product name: inline after the last word, a little smaller */
.item__head .allergens{display:inline;margin-left:2px}
.item__head .allergen{display:inline-grid;width:16px;height:16px;margin-left:2px;vertical-align:-3px}
.item__head .allergen .icon{width:14px;height:14px}

/* sold out */

/* ------------------------------------------------------------------ 9. Product card (with photo) */
.item--photo{grid-template-areas:"media media" "name price" "alt alt" "sub sub" "desc desc" "prices prices" "meta meta";margin-block:var(--s-3);padding:0 0 var(--s-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden}
.items>.item--photo:last-child{border-bottom:1px solid var(--border)}
.item--photo>.item__head,.item--photo>.item__alt,.item--photo>.item__sub,.item--photo>.item__desc,.item--photo>.prices,.item--photo>.item__meta{padding-left:var(--s-4)}
.item--photo>.price,.item--photo>.item__alt,.item--photo>.item__sub,.item--photo>.item__desc,.item--photo>.prices,.item--photo>.item__meta{padding-right:var(--s-4)}
.item--photo>.item__media{margin-bottom:var(--s-3)}
.item__media{grid-area:media;aspect-ratio:3/2;background:var(--surface-2);overflow:hidden}
.item__media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform var(--dur-slow) var(--ease-out)}
@media (hover:hover){.item--photo:hover .item__media img{transform:scale(1.02)}}
.item--photo .item__open::after{border-radius:var(--r-md)}
.item--photo + .item:not(.item--photo){border-top:0}

@media (min-width:720px){
  .items:has(> .item--photo){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
  .items:has(> .item--photo) > .item:not(.item--photo){grid-column:1/-1}
}

/* ------------------------------------------------------------------ 10. Empty state + toast + FAB */
.empty{padding:var(--s-12) 0;text-align:center;color:var(--text-muted)}
.empty__title{font:600 var(--fs-lg)/var(--lh-snug) var(--font-body);color:var(--text)}
.empty p+p{margin-top:var(--s-2)}
.empty .btn{margin-top:var(--s-4)}

.listfab{position:fixed;right:max(var(--s-4),env(safe-area-inset-right));bottom:calc(var(--s-4) + env(safe-area-inset-bottom));z-index:var(--z-fab);
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-4) 0 var(--s-4);border:0;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:var(--shadow-md);
  animation:rise-in var(--dur-base) var(--ease-out)}
.listfab:active{transform:scale(.97)}
.listfab__count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--r-pill);background:var(--on-accent);color:var(--accent);
  font:600 var(--fs-sm)/1 var(--font-body);font-variant-numeric:tabular-nums}
.listfab.is-bump{animation:bump var(--dur-base) var(--ease-out)}
/* room under the last content for the floating button: the credit bar grows (same surface), so nothing hides behind the FAB */
body.has-list .credit{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:var(--z-toast);max-width:calc(100% - 2*var(--gutter));
  padding:var(--s-3) var(--s-4);border-radius:var(--r-pill);background:var(--text);color:var(--bg);font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-md);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in)}
.toast.is-visible{opacity:1;transform:translate(-50%,0);transition-duration:var(--dur-base);transition-timing-function:var(--ease-out)}

/* ------------------------------------------------------------------ 11. Bottom sheet (product details) + drawer (my list) */
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:36rem;max-height:min(92dvh,100%);margin:auto auto 0;
  display:flex;flex-direction:column;background:var(--surface);color:var(--text);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);overflow:hidden}
.sheet:not([open]){display:none}
.sheet[open]{animation:sheet-in var(--dur-slow) var(--ease-out)}
.sheet[open]::backdrop{animation:fade-in var(--dur-slow) var(--ease-out)}
.sheet.is-closing{animation:sheet-out var(--dur-base) var(--ease-in) forwards}
.sheet.is-closing::backdrop{animation:fade-out var(--dur-base) var(--ease-in) forwards}
/* swipe down to close (mobile bottom sheet, menu.js): grab handle + no page bounce while dragging */
.sheet::before{content:"";position:absolute;top:var(--s-2);left:50%;z-index:3;width:2.25rem;height:4px;margin-left:-1.125rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--text-muted) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--surface) 35%,transparent);pointer-events:none}
.sheet.is-dragging{transition:none}
.sheet.is-dragging .sheet__scroll{overflow-y:hidden}
.sheet__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet__close{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;background:color-mix(in srgb,var(--surface) 85%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet__media{aspect-ratio:3/2;background:var(--surface-2)}
.sheet__media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.sheet__body{padding:var(--s-6) var(--gutter) var(--s-4)}
.sheet__media:not([hidden]) + .sheet__body{padding-top:var(--s-4)}
.sheet__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding-right:var(--tap)}
.sheet__media:not([hidden]) + .sheet__body .sheet__head{padding-right:0}
.sheet__title{margin-top:var(--s-2);font:600 var(--fs-2xl)/var(--lh-tight) var(--font-display);text-wrap:balance}
.sheet__media[hidden] + .sheet__body .sheet__title{padding-right:var(--tap)}
.sheet__alt{margin-top:var(--s-1);font-size:var(--fs-md);font-weight:500;color:var(--text-muted)}
.sheet__sub{margin-top:var(--s-1);font-size:var(--fs-md);font-weight:500;color:var(--accent-ink)}
.sheet__desc{margin-top:var(--s-2);color:var(--text-muted);font-size:var(--fs-md)}
.sheet__desc:empty{display:none}
.sheet__price{margin-top:var(--s-4);font:600 var(--fs-lg)/1.2 var(--font-body);font-variant-numeric:tabular-nums lining-nums}
.sheet__section{margin-top:var(--s-6)}
.sheet__section-title{margin-bottom:var(--s-2);font:600 var(--fs-xs)/1.2 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.sheet__note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--text-muted)}
.sheet__actions{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-3);align-items:center;
  padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}

/* variants (multi-price) as radio pills */
.variants{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;border:0}
.variant{position:relative}
.variant input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.variant>span{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-pill);
  font-size:var(--fs-md);transition:background-color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
.variant b{font-weight:600;font-variant-numeric:tabular-nums}
.variant input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.variant input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

/* allergen list with labels (sheet, legend) */
.allergen-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:var(--s-2) var(--s-3)}
.allergen-list li{display:flex;align-items:center;gap:var(--s-2);min-height:32px;font-size:var(--fs-sm)}
.allergen-list .icon{width:18px;height:18px;color:var(--accent-ink)}
/* product popup: pills side by side, like the tags (a long name wraps inside its pill) */
.sheet__allergens .allergen-list{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.sheet__allergens .allergen-list li{min-height:28px;max-width:100%;gap:6px;padding:3px 10px 3px 7px;border-radius:var(--r-pill);
  background:var(--surface-2);font-size:var(--fs-xs);font-weight:600;line-height:var(--lh-snug);overflow-wrap:break-word}
.sheet__allergens .allergen-list .icon{flex-shrink:0;width:16px;height:16px}

/* drawer = sheet variant */
.drawer .sheet__body{padding-top:var(--s-5)}
.drawer__title{font:600 var(--fs-xl)/var(--lh-tight) var(--font-display);padding-right:var(--tap)}
.mylist{margin-top:var(--s-3)}
.mylist__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding-block:var(--s-3);border-bottom:1px solid var(--border)}
.mylist__row:last-child{border-bottom:0}
.mylist__name{font-weight:600;line-height:var(--lh-snug);overflow-wrap:anywhere}
.mylist__variant{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--text-muted)}
.mylist__ctrl{display:flex;align-items:center}
.mylist__ctrl .stepper button{width:32px;height:32px}
.mylist__ctrl .stepper svg{width:14px;height:14px}
.mylist__ctrl .stepper output{min-width:1.5ch;font-size:var(--fs-sm)}
.mylist__price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mylist__empty{padding:var(--s-8) 0;text-align:center;color:var(--text-muted)}
/* drawer footer: item count · clear list */
.drawer__actions{grid-template-columns:minmax(0,1fr) auto;padding-right:max(var(--s-2),calc(var(--gutter) - var(--s-3)))}
.drawer__count{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.drawer__actions .btn{min-height:var(--tap);padding-inline:var(--s-3)}
/* "clear the list?" — asked in place of the footer (no browser confirm box) */
.drawer__confirm{grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-3)}
.drawer__ask{grid-column:1/-1;font-weight:600;line-height:var(--lh-snug);text-align:center}
.drawer__confirm .btn{min-height:var(--tap);padding-inline:var(--s-4)}
.drawer__confirm .btn--ghost{border-color:var(--border-strong)}
@media (min-width:520px){.drawer__confirm{grid-template-columns:minmax(0,1fr) auto auto}.drawer__ask{grid-column:auto;text-align:left}}

@media (min-width:720px){
  .sheet{inset:0;margin:auto;max-height:min(86dvh,52rem);border-radius:var(--r-lg)}
  .sheet[open]{animation-name:modal-in}
  .sheet.is-closing{animation-name:modal-out}
  .sheet::before{content:none}
}

/* ------------------------------------------------------------------ 12. Footer */
.footer{margin-top:var(--s-16);padding-top:var(--s-10);background:var(--surface);border-top:1px solid var(--border);font-size:var(--fs-sm)}
.footer__main{padding-bottom:var(--s-10)}
/* Uploaded (hero) logo with a dark-theme variant: swap them with the page theme (toggle or system setting). */
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
.footer__grid{display:grid;gap:var(--s-8)}
.footer__title{margin-bottom:var(--s-2);font:600 var(--fs-xs)/1.2 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.footer__links{display:grid}
.footer__links a{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);text-decoration:none}
.footer__links a:hover span{text-decoration:underline}
.footer__links .icon{color:var(--accent-ink)}
.footer__note{padding:var(--s-4);border-radius:var(--r-md);background:var(--rose-tint);color:var(--text)}
.footer__note strong{color:var(--rose-ink)}
/* legend: breathing room between the allergy box, the allergen list and the tags */
.footer__legend .footer__title{margin-top:var(--s-10);margin-bottom:var(--s-4)}
.footer__legend>.tags{margin-top:var(--s-10)}
.footer__small{margin-top:var(--s-8);font-size:var(--fs-xs);color:var(--text-muted)}
@media (min-width:720px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>.footer__legend{grid-column:1/-1}}
/* credit bar: last line of the page */
.credit{padding:var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);
  font-size:.75rem;line-height:1.4;letter-spacing:.02em;color:var(--text-muted);text-align:center}
.credit__brand{font-weight:600;color:var(--text)}
.credit__heart{color:#C0392B}
.credit__link{display:inline-flex;align-items:center;min-height:var(--tap);margin-block:calc(-1*var(--s-3));padding-inline:var(--s-2);text-decoration:none;border-radius:var(--r-xs)}
.credit__link:hover .credit__brand{text-decoration:underline;text-decoration-color:var(--gold)}

/* ------------------------------------------------------------------ 13. Motion */
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-out{from{transform:translateY(var(--drag-y,0px))}to{transform:translateY(100%)}}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after,::backdrop{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .item--photo:hover .item__media img{transform:none}
}

/* ------------------------------------------------------------------ 14. Print */
@media print{
  .topbar,.listfab,.toast,.hero__cover,.groups{display:none!important}
  body{background:#fff;color:#000}
  .item{break-inside:avoid}
}

/* ------------------------------------------------------------------ 15. English alongside (tr/bg) */
/* TR/BG pages repeat every menu text in English (lang="en") right under / next to it: one step
   smaller, muted, never bold — so guests, staff and the owner can follow along. Markup (menu.php,
   menu.js): .item__alt / .cat__alt paragraphs and .alt-en spans inside the local element. */
.alt-en{display:block;margin-top:1px;font:400 var(--fs-xs)/var(--lh-snug) var(--font-body);letter-spacing:normal;text-transform:none;color:var(--text-muted);overflow-wrap:anywhere}
/* longer texts (descriptions, options, notes) get a tiny "EN" marker so Turkish and English never blur */
.item__desc-en,.item__options-en,.cat__note .alt-en,.sheet__desc-en,.sheet__options-en{margin-top:var(--s-1)}
.item__desc-en::before,.item__options-en::before,.cat__note .alt-en::before,.sheet__desc-en::before,.sheet__options-en::before{
  content:"EN";content:"EN" / "";display:inline-block;margin-right:6px;padding:0 4px;border:1px solid var(--border);border-radius:4px;
  font:600 .625rem/1.4 var(--font-body);letter-spacing:.08em;vertical-align:1px;color:var(--text-muted)}
/* inside pills (price rows, sheet variants, my-list variant): inline after a thin slash */
.prices__row dt .alt-en,.variant .alt-en,.mylist__variant .alt-en{display:inline;margin:0 0 0 4px;font-size:.8125rem}
.prices__row dt .alt-en::before,.variant .alt-en::before,.mylist__variant .alt-en::before{content:"/";content:"/" / "";margin-right:4px;color:var(--border-strong)}
.variant input:checked + span .alt-en,.variant input:checked + span .alt-en::before{color:color-mix(in srgb,var(--on-accent) 80%,var(--accent))}
/* headings */
.group__title>span{text-align:center}
.group__title .alt-en{margin-top:4px;font:600 .6875rem/1.2 var(--font-display);letter-spacing:.2em;text-transform:uppercase}
.group-tile .alt-en{margin-top:2px;font-weight:500}
.cat__alt{margin-top:2px;font:600 var(--fs-name)/var(--lh-snug) var(--font-display);letter-spacing:.02em;color:var(--text-muted);text-wrap:balance}
.item__sub .alt-en{font-weight:500}
/* product sheet */
.sheet__options{margin-top:var(--s-2);color:var(--text-muted);font-size:var(--fs-md)}
.sheet__sub-en,.sheet__desc-en,.sheet__options-en{font-size:var(--fs-sm)}
.sheet__sub-en{margin-top:2px;font-weight:500}
.allergen-list .alt-en{margin:0}
.mylist__alt{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text-muted)}

/* ------------------------------------------------------------------ 15. Wi-Fi bar (above the sticky top bar)
   Thin band in the normal flow: it scrolls away with the page, the top bar below stays sticky at top:0.
   Shown only when a network name is set (Admin → Settings). The copy button appears with JS (menu.js). */
.wifibar{background:var(--surface-2);color:var(--text);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top);font-size:var(--fs-xs);line-height:1.3}
.wifibar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px var(--s-4);min-height:38px;padding-block:3px}
.wifibar__item{display:inline-flex;align-items:center;gap:6px;min-width:0}
.wifibar__icon{width:16px;height:16px;color:var(--accent-ink)}
.wifibar__label{font-weight:400;color:var(--text-muted)}
.wifibar__value{font-weight:600;overflow-wrap:anywhere}
.wifibar__pass{font:inherit;font-weight:600;-webkit-user-select:all;user-select:all}
.wifibar__copy{position:relative;display:inline-flex;align-items:center;gap:4px;height:28px;margin-left:2px;padding:0 8px;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--accent-ink);font:600 var(--fs-xs)/1 var(--font-body);
  transition:background-color var(--dur-fast) var(--ease-std),transform var(--dur-press) var(--ease-std)}
.wifibar__copy::before{content:"";position:absolute;inset:-8px -4px}   /* 44px tap target in a 38px bar */
.wifibar__copy:hover{background:var(--surface-3)}
.wifibar__copy:active{transform:scale(.96)}
.wifibar__copy .icon{width:16px;height:16px}
.wifibar__done-icon,.wifibar__copy.is-copied .wifibar__copy-icon{display:none}
.wifibar__copy.is-copied .wifibar__done-icon{display:block}
.wifibar__copy.is-copied{border-color:var(--accent-ink)}
.wifibar__copy-text{display:none}
@media (min-width:480px){.wifibar__copy{padding:0 10px 0 8px}.wifibar__copy-text{display:inline}}
@media print{.wifibar__copy{display:none!important}}

/* ------------------------------------------------------------------ 16. Subcategories (e.g. Rum → Spanish-style, British & Navy, Agricole, Spiced)
   A sub-section inside its parent category (menu.php .subcat): smaller heading with a gold hairline, no chip of its own.
   While searching, a sub-section without matching items disappears (menu.js hides only the items and whole categories). */
.subcat{padding-top:var(--s-5)}
.cat__head + .subcat{padding-top:var(--s-3)}
.subcat__head{padding-bottom:var(--s-1)}
.subcat__title{display:flex;align-items:center;gap:var(--s-2);font:600 var(--fs-lg)/var(--lh-snug) var(--font-display);letter-spacing:.02em;color:var(--accent-ink);text-wrap:balance}
.subcat__title::before{content:"";flex:none;width:18px;height:1px;background:var(--gold)}
.subcat__alt{margin:2px 0 0 calc(18px + var(--s-2));font:600 var(--fs-sm)/var(--lh-snug) var(--font-display);letter-spacing:.02em;color:var(--text-muted)}
.subcat__head .cat__hours{margin-top:var(--s-1)}
.subcat:not(:has(.item:not([hidden]))){display:none}
h5.item__name{margin:0}

/* ------------------------------------------------------------------ tag colour palette (Admin → Tags)
   One class per colour, light + dark theme, every pair ≥ 4.5:1 (see DESIGN_SYSTEM.md). Specificity 0,2,0 so
   it beats the per-key fallbacks above. blue / plum add two tints in the same muted family. */
:root{--sky-tint:#DFE8F0;--sky-ink:#2F5170;--plum-tint:#EEE0EC;--plum-ink:#6B3D66}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sky-tint:#1D2A36;--sky-ink:#A9C8E4;--plum-tint:#36233A;--plum-ink:#E0B6DA}}
:root[data-theme="dark"]{--sky-tint:#1D2A36;--sky-ink:#A9C8E4;--plum-tint:#36233A;--plum-ink:#E0B6DA}
.tag.tag--c-neutral{background:var(--surface-2);color:var(--text-muted)}
.tag.tag--c-green{background:var(--leaf-tint);color:var(--leaf-ink)}
.tag.tag--c-red{background:var(--chili-tint);color:var(--chili-ink)}
.tag.tag--c-gold{background:var(--gold-tint);color:var(--gold-ink)}
.tag.tag--c-rose{background:var(--rose-tint);color:var(--rose-ink)}
.tag.tag--c-coffee{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent-ink)}
.tag.tag--c-blue{background:var(--sky-tint);color:var(--sky-ink)}
.tag.tag--c-plum{background:var(--plum-tint);color:var(--plum-ink)}