/* =============================================================================
   FLAME & SMOKE - DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Loaded after main.css (the FoodKing theme) and before style.css.

   The theme is almost entirely token-driven - main.css resolves var(--theme2)
   151 times, var(--header) 133 times, var(--theme) 105 times and hardcodes each
   hex exactly once, in its own :root. Redefining those tokens here therefore
   re-skins every theme component at once, without editing 275KB of vendor CSS
   and without touching a single line of markup or behaviour.

   Brand colour: #f04e3e, taken from the logo.
   Contrast, measured (WCAG 2.1):
     white on #f04e3e ............. 3.58:1      large text / icons only, NOT
                                                body copy - contrast is
                                                symmetric with the line below
     #f04e3e on #1c1917 ........... 4.88:1  AA  (accent on dark)
     #f04e3e on #ffffff ........... 3.58:1      large text / borders / icons only
     #c73523 on #ffffff ........... 5.30:1  AA  (--brand-ink: small red text)
     #c73523 on #F4F1EA ........... 4.70:1  AA  (--brand-ink on the cream)
   Small red text on light therefore uses --brand-ink, never --brand-500.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       BRAND - one hue, nine steps. 500 is the logo colour, untouched.
       --------------------------------------------------------------------- */
    --brand-50:  #fef4f2;
    --brand-100: #fde4e0;
    --brand-200: #fbc9c2;
    --brand-300: #f7a496;
    --brand-400: #f4755f;
    --brand-500: #f04e3e;   /* logo */
    --brand-600: #d93a2a;
    --brand-700: #b62f22;
    --brand-800: #8f261c;
    --brand-ink: #c73523;   /* clears AA on white (5.30) and cream (4.70) */
    /* Primary buttons (white text on red): brand-600 so the label clears WCAG AA for normal text - white on
       brand-600 is 4.58:1, on brand-500 (the logo red, kept for the brand everywhere else) only 3.58:1.
       Hover deepens one more step (brand-700, 6.14:1). Same in both themes: the button carries its own colour. */
    --btn-primary:       var(--brand-600);
    --btn-primary-hover: var(--brand-700);

    /* ---------------------------------------------------------------------
       NEUTRALS - a warm stone ramp, not a cold grey. The brand red is warm
       and the logo emblem sits on a warm near-black, so a neutral with a
       trace of warmth stays in the same family instead of fighting it.
       --------------------------------------------------------------------- */
    --n-0:   #ffffff;
    --n-25:  #fcfbfa;
    --n-50:  #f7f6f4;
    --n-100: #f0eeeb;
    --n-200: #e5e2de;
    --n-300: #d4cfca;
    --n-400: #a9a29c;
    --n-500: #6b645e;
    --n-600: #57534e;
    --n-700: #44403b;
    --n-800: #2a2624;
    --n-900: #1c1917;
    --n-950: #121010;

    /* The brand cream. This was the theme's --bg and it painted every
       recessed surface on the site; kept at the client's request. Warmer
       and a touch lighter than --n-50, which is why --brand-ink below is
       a step darker than it would otherwise need to be. */
    --n-cream: #F4F1EA;

    /* ---------------------------------------------------------------------
       SEMANTIC ALIASES - components reference these, never the ramps, so a
       surface can be restyled in one place.
       --------------------------------------------------------------------- */
    --surface:        var(--n-0);
    --surface-page:   var(--n-25);
    --surface-sunken: var(--n-cream);   /* header, footer, section bands */
    --surface-muted:  var(--n-100);
    --surface-dark:   var(--n-900);
    --surface-darker: var(--n-950);
    --surface-brand:  var(--brand-500);
    --surface-tint:   var(--brand-50);

    --ink:        var(--n-900);   /* headings                */
    --ink-body:   var(--n-600);   /* paragraphs      7.6:1   */
    --ink-muted:  var(--n-500);   /* secondary  5.8 white / 5.2 cream */
    --ink-faint:  var(--n-400);   /* placeholders            */
    --ink-invert: var(--n-0);
    --ink-brand:  var(--brand-ink);

    --line:        var(--n-200);
    --line-strong: var(--n-300);
    --line-brand:  var(--brand-200);

    /* ---------------------------------------------------------------------
       SHAPE, DEPTH, MOTION
       Shadows are tinted with the neutral, never pure black - black shadows
       on a warm ground read as dirt.
       --------------------------------------------------------------------- */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-2xl: 28px;
    --r-pill: 999px;

    --sh-xs:    0 1px 2px rgba(28, 25, 23, .05);
    --sh-sm:    0 1px 3px rgba(28, 25, 23, .06), 0 1px 2px rgba(28, 25, 23, .04);
    --sh-md:    0 4px 14px rgba(28, 25, 23, .07), 0 2px 5px rgba(28, 25, 23, .04);
    --sh-lg:    0 14px 36px rgba(28, 25, 23, .10), 0 5px 12px rgba(28, 25, 23, .05);
    --sh-xl:    0 28px 60px rgba(28, 25, 23, .13), 0 8px 18px rgba(28, 25, 23, .06);
    --sh-brand: 0 8px 22px rgba(240, 78, 62, .26);

    --ring: 0 0 0 3px rgba(240, 78, 62, .32);

    --ease:   cubic-bezier(.4, 0, .2, 1);
    --t-fast: .15s var(--ease);
    --t:      .22s var(--ease);
    --t-slow: .38s var(--ease);

    /* ---------------------------------------------------------------------
       TYPE - a pairing, not one face doing two jobs.
       Barlow Condensed is a display face; at 18px/28px for body copy it is
       the single biggest reason the site read as a template. It stays for
       headings, where it carries the brand. Inter takes the UI and body.
       --------------------------------------------------------------------- */
    --font-display: "Barlow Condensed", "Oswald", Impact, sans-serif;
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    --step-eyebrow: 12px;
    --step-sm:      14px;
    --step-base:    16px;
    --step-lg:      18px;

    /* section rhythm */
    --space-section:    80px;
    --space-section-md: 64px;
    --space-section-sm: 48px;

    /* the dark title band that opens About and Menu */
    --space-hero:    96px;
    --space-hero-md: 76px;
    --space-hero-sm: 56px;

    /* One content width for the whole site, header and footer included,
       so the logo, the page content and the footer start on one edge. */
    --container-max: 1180px;
    --container-pad: 24px;

    /* ---------------------------------------------------------------------
       LEGACY THEME TOKENS - remapped onto the system above.
       Every one of these is consumed by main.css; this is what re-skins the
       vendor components. Names are kept so nothing has to be renamed.
       --------------------------------------------------------------------- */
    --theme:   var(--n-900);       /* was #00813D green - now the dark neutral */
    --theme2:  var(--brand-500);   /* was #D12525      - now the logo red      */
    --theme3:  var(--n-500);       /* was #FFB936      - amber retired         */
    --base:    var(--brand-500);
    --header:  var(--n-900);
    --text:    var(--n-600);
    --bg:      var(--n-cream);
    --bg2:     var(--brand-50);
    --border:  var(--n-200);
    --border2: rgba(255, 255, 255, .14);
    --button:  var(--n-900);
    --button2: var(--n-950);
    --body:    var(--n-0);
    --ratting: #f59e0b;

}

/* =============================================================================
   DARK SURFACES
   The same token names, re-pointed. Put .on-dark on any section and every
   component inside it adapts - this is the "dark half" of the colour system,
   and it is what the hero, the Find Us band and the footer strip run on.
   ============================================================================= */
.on-dark {
    --surface:        var(--n-900);
    --surface-page:   var(--n-950);
    --surface-sunken: var(--n-950);
    --surface-muted:  rgba(255, 255, 255, .06);

    --ink:        var(--n-0);
    --ink-body:   rgba(255, 255, 255, .74);
    --ink-muted:  rgba(255, 255, 255, .56);
    --ink-faint:  rgba(255, 255, 255, .38);
    --ink-brand:  var(--brand-400);   /* 400 clears AA on #1c1917 */

    --line:        rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .22);

    --header: var(--n-0);
    --text:   rgba(255, 255, 255, .74);
    --border: rgba(255, 255, 255, .12);

    color: var(--ink-body);
}
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6 { color: var(--ink); }

/* =============================================================================
   THE BACKDROP
   -----------------------------------------------------------------------------
   One fixed layer behind every page. Not `background-attachment: fixed` on the
   body: that is the property iOS measures against the document rather than the
   window, which on a long page scales the image enormously and stutters while
   scrolling. A fixed element behaves everywhere, and because this stylesheet is
   shared it lands on every page without each one asking for it.
   ============================================================================= */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #f04e3e;
    /* a seamless pattern tile (its edges meet as closely as neighbouring
       pixels), so it repeats at its own size - stretched to cover a wide
       screen it went soft and the doodles grew half as large again */
    /* the same tile with its doodles softened to 13% of their contrast and
       the ground left exactly #F04E3E, so text over it stays readable */
    background-image: url('../img/bg-image/bg-web-soft.webp');
    background-size: auto;
    background-position: center top;
    background-repeat: repeat;
    pointer-events: none;
}

/* The artwork is cream and gold. Behind a dark page it would read as a lit
   rectangle under light type, so dark mode goes without it. */
:root[data-theme="dark"] body::before { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before { display: none; }
}

/* =============================================================================
   BASE
   ============================================================================= */
body {
    font-family: var(--font-ui);
    font-size: var(--step-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink-body);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* main.css puts `transition: all .4s ease-in-out` on every heading and
   paragraph. `all` covers visibility, and a 400ms transition on visibility
   held the pre-reveal value and beat the inline style WOW.js writes - that
   is what broke the scroll reveals.
   The fix keeps `all` and re-declares visibility afterwards with a 0s
   duration: a later entry for the same property wins, so visibility snaps
   while colour, background, border, shadow, opacity and transform all keep
   transitioning exactly as the theme intended. */
h1, h2, h3, h4, h5, h6,
p { transition: all .4s ease-in-out, visibility 0s; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.005em;
}
h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.25rem;   line-height: 1.25; }
h5 { font-size: 1.0625rem; line-height: 1.3; }
h6 { font-size: .9375rem;  line-height: 1.35; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--t); }

::selection { background: var(--brand-500); color: #fff; }

/* An accessible focus ring. The theme shipped `outline: none` on inputs with
   nothing in its place, so keyboard users had no visible focus at all. */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-xs);
}
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
    box-shadow: var(--ring);
}

img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* =============================================================================
   FORMS
   main.css set `input { color: var(--white) }` with no background to match,
   so typed text was white on white - invisible in the header search and in
   every form field on the site. Fixed here along with the visual pass.
   ============================================================================= */
input, select, textarea, button { font-family: var(--font-ui); }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--step-base);
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
    -webkit-appearance: none;
    appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover,
select:hover, textarea:hover { border-color: var(--line-strong); }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus, textarea:focus {
    color: var(--ink);
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}
textarea { min-height: 132px; resize: vertical; }

label { font-size: var(--step-sm); font-weight: 600; color: var(--ink); }

/* =============================================================================
   BUTTONS
   .theme-btn is the theme's own class and appears in the header, the offcanvas
   and the food page. Restyled in place - the markup does not change.
   ============================================================================= */
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--font-ui);
    font-size: var(--step-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--ink-invert);
    background-color: var(--btn-primary);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: background-color var(--t), color var(--t),
                box-shadow var(--t), transform var(--t), border-color var(--t);
}
@media (max-width: 991px) {
    .theme-btn { padding: 12px 22px; font-size: var(--step-sm); }
}
.theme-btn:hover {
    color: var(--ink-invert);
    box-shadow: var(--sh-brand);
    transform: translateY(-1px);
}
.theme-btn:active { transform: translateY(0); box-shadow: var(--sh-xs); }
.theme-btn:focus-visible { box-shadow: var(--ring); }
.theme-btn i { font-size: 1.05em; }

/* The theme's signature hover: a pseudo-element that scales up from nothing
   behind the label over 500ms. Kept exactly as it behaves - only the colour
   it wipes to is re-pointed at the brand ramp, and the radius is inherited
   so it follows the pill instead of squaring off inside it. */
.theme-btn::before {
    background-color: var(--btn-primary-hover);
    border-radius: inherit;
    transition: transform 500ms var(--ease);
}
.theme-btn:hover::before { background-color: var(--btn-primary-hover); }

.theme-btn.bg-white {
    color: var(--ink);
    background-color: var(--surface);
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}
.theme-btn.bg-white:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: var(--sh-md);
}
.theme-btn.bg-white::before,
.theme-btn.bg-white:hover::before { background-color: var(--surface-sunken); }
.theme-btn.bg-transparent {
    color: var(--ink);
    background-color: transparent;
    border-color: var(--line-strong);
    box-shadow: none;
}
.theme-btn.bg-transparent:hover {
    color: var(--ink-invert);
    border-color: var(--btn-primary);
    box-shadow: var(--sh-brand);
}
.theme-btn.bg-transparent::before,
.theme-btn.bg-transparent:hover::before { background-color: var(--btn-primary); }
/* the header's "Order Now" / basket buttons (main.css paints them --theme2 = brand-500, 3.58:1 under white) */
.theme-btn.bg-red-2 { background-color: var(--btn-primary); }

/* =============================================================================
   REUSABLE PIECES
   ============================================================================= */
.fs-eyebrow {
    display: block;
    margin: 0 0 14px;
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-brand);
}

.fs-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.fs-card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); }

.fs-divider { height: 1px; background: var(--line); border: 0; }

/* =============================================================================
   MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   SITE CHROME - header, navigation, offcanvas, footer, breadcrumb, preloader
   Everything below restyles markup that already exists. No component is
   removed from the DOM and no behaviour is rebound.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Header top strip.
   Kept - it is an existing component with its own hover behaviour. What
   changed is the treatment: the theme drew a hard 500px dark block butting
   into a light bar, which is the detail that read as "template". Now the
   whole strip sits on the dark surface as one deliberate band, and its
   controls are on the type and colour system like everything else.
   -------------------------------------------------------------------------- */
.header-top {
    background-color: var(--surface-dark);
    border-bottom: 0;
    padding: 7px 0;
}
/* the abrupt half-and-half block is no longer needed now the whole strip
   is dark - the element stays, it just no longer paints a seam */
.header-top::before { display: none; }
.header-top-wrapper { min-height: 38px; }
.header-top-wrapper .top-right { display: flex; align-items: center; gap: 22px; }

.header-top-wrapper .top-right .search-wrp { position: relative; display: flex; align-items: center; }
.header-top-wrapper .top-right .search-wrp input {
    width: 190px;
    padding: 7px 14px 7px 34px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: width var(--t), background-color var(--t),
                border-color var(--t), color var(--t);
}
.header-top-wrapper .top-right .search-wrp input::placeholder { color: var(--ink-faint); }
.header-top-wrapper .top-right .search-wrp input:hover { border-color: var(--line-strong); }
/* the field opens out a little on focus - a small piece of life the strip
   never had, in keeping with the rest of the interaction language */
.header-top-wrapper .top-right .search-wrp input:focus {
    width: 230px;
    color: var(--ink);
    border-color: var(--brand-500);
    box-shadow: none;
}
.header-top-wrapper .top-right .search-wrp button {
    position: absolute; inset-inline-start: 13px;
    color: var(--ink-muted); font-size: 12px;
    transition: color var(--t);
}
.header-top-wrapper .top-right .search-wrp:hover button { color: var(--ink); }

/* Social row in the strip: smaller than the footer set, same interaction.
   The chip is always visible - a transparent one meant hover produced a
   circle from nowhere rather than changing a button that was already there. */
.header-top-wrapper .top-right .social-icon { gap: 8px; }
.header-top-wrapper .top-right .social-icon a {
    width: 32px; height: 32px;
    font-size: 13px;
    background: var(--surface);
    border-color: var(--line);
}
.header-top-wrapper .top-right .social-icon a:hover { transform: translateY(-1px); }

/* -----------------------------------------------------------------------------
   Sticky bar
   -------------------------------------------------------------------------- */
header.section-bg { background-color: transparent; }

#header-sticky {
    background-color: rgba(244, 241, 234, .86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t), background-color var(--t);
}
/* main.js adds .sticky once the page scrolls */
#header-sticky.sticky {
    background-color: rgba(244, 241, 234, .95);
    box-shadow: var(--sh-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #header-sticky, #header-sticky.sticky { background-color: var(--surface-sunken); }
}

.header-main { padding: 12px 0; gap: 28px; }
@media (max-width: 991px) { .header-main { padding: 10px 0; gap: 16px; } }

/* -----------------------------------------------------------------------------
   Primary navigation
   18px uppercase condensed became 15px Inter with a real hover and a real
   active state - the theme shipped neither an underline nor a current-page
   marker, so there was no way to tell where you were.
   -------------------------------------------------------------------------- */
.header-main .main-menu ul li { margin-inline-end: 6px; }

.header-main .main-menu ul li a {
    position: relative;
    padding: 26px 14px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--ink-body);
    transition: color var(--t);
}
.header-main .main-menu ul li a::after {
    content: "";
    position: absolute;
    inset-inline-start: 14px;
    right: 14px;
    bottom: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t);
}
.header-main .main-menu ul li a:hover,
.header-main .main-menu ul li:hover > a { color: var(--ink) !important; }
.header-main .main-menu ul li a:hover::after { transform: scaleX(1); }

.header-main .main-menu ul li.active > a { color: var(--ink) !important; font-weight: 600; }
.header-main .main-menu ul li.active > a::after { transform: scaleX(1); }

.header-main .main-menu ul li .submenu {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    overflow: hidden;
    padding: 6px;
}
.header-main .main-menu ul li .submenu li a {
    font-family: var(--font-ui);
    font-size: 15px; font-weight: 500;
    text-transform: none;
    border-bottom: 0;
    border-radius: var(--r-sm);
    padding: 10px 14px;
}
.header-main .main-menu ul li .submenu li a:hover {
    color: var(--ink) !important;
    background: var(--surface-sunken);
}

/* -----------------------------------------------------------------------------
   Header actions: basket, CTA, hamburger
   -------------------------------------------------------------------------- */
.header-right { gap: 8px; }

.fs-basket-open {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;          /* 44px: the minimum comfortable tap target */
    border-radius: var(--r-pill);
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--t), border-color var(--t), color var(--t);
}
.fs-basket-open:hover {
    color: var(--ink);
    background: var(--surface-muted);   /* one step off the cream header */
    border-color: var(--line);
}
.fs-basket-open i { font-size: 19px; }
.fs-basket-count {
    position: absolute; top: 2px; inset-inline-end: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 700; line-height: 1;
    color: #fff;
    background: var(--brand-500);
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
}

.sidebar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--r-pill);
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--t);
}
.sidebar__toggle:hover { background: var(--surface-muted); }

/* -----------------------------------------------------------------------------
   Offcanvas panel
   -------------------------------------------------------------------------- */
.offcanvas__info {
    background-color: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: var(--sh-xl);
}
.offcanvas__overlay { background-color: rgba(18, 16, 16, .55); }
.offcanvas__close button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--ink);
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    transition: background-color var(--t), color var(--t);
}
.offcanvas__close button:hover { background: var(--brand-500); color: #fff; }
.offcanvas__contact h4 {
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
}
.offcanvas__contact ul li { padding: 9px 0; }
.offcanvas__contact-text a { font-size: 15px; color: var(--ink-body); }
.offcanvas__contact-text a:hover { color: var(--brand-ink); }
.offcanvas__contact-icon i { color: var(--brand-500); }

/* The mobile menu meanmenu builds from the same <ul> */
.mean-container .mean-nav ul li a {
    font-family: var(--font-ui);
    font-size: 15px; font-weight: 500;
    text-transform: none;
    color: var(--ink-body);
    border-top: 1px solid var(--line);
    padding: 13px 0;
}
.mean-container .mean-nav ul li a:hover { color: var(--brand-ink); }
.mean-container .mean-nav ul li.active > a { color: var(--ink); font-weight: 600; }

/* -----------------------------------------------------------------------------
   Social buttons - one treatment everywhere they appear
   -------------------------------------------------------------------------- */
.social-icon a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    font-size: 15px;
    color: var(--ink-body);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    transition: color var(--t), background-color var(--t),
                border-color var(--t), transform var(--t);
}
.social-icon a:hover {
    color: #fff;
    background: var(--brand-500);
    border-color: var(--brand-500);
    transform: translateY(-2px);
    box-shadow: var(--sh-sm);
}
.social-icon a:active { transform: translateY(0); }
.social-icon a:focus-visible { box-shadow: var(--ring); }

/* Centre by layout, not by line box. main.css sets display:block with a
   line-height equal to the chip height, which lands the glyph 0.8px low once
   the 1px border is taken off the content box. !important because that rule
   is 0-4-0 and these chips sit in three different ancestor chains. */
.social-icon a[data-social] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}
/* The four marks range from 10px to 16px wide. Giving them a common box
   stops the narrow "f" reading as smaller than the wide bird beside it. */
.social-icon a[data-social] i {
    display: block;
    width: 1em;
    line-height: 1;
    text-align: center;
}
.on-dark .social-icon a {
    color: var(--ink-body);
    background: rgba(255, 255, 255, .06);
    border-color: var(--line);
}

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer-section {
    background-color: var(--surface-sunken);
    border-top: 1px solid var(--line);
}
.footer-widgets-wrapper { padding: var(--space-section-md) 0 48px; }
@media (max-width: 991px) { .footer-widgets-wrapper { padding: 56px 0 40px; } }

.single-footer-widget .widget-head { margin-bottom: 22px; }
.single-footer-widget h4,
.single-footer-widget .widget-head h4 {
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.single-footer-widget .footer-content p,
.single-footer-widget .footer-address,
.single-footer-widget .footer-contact { font-size: 15px; color: var(--ink-body); }
.single-footer-widget .list-items li,
.single-footer-widget ul li { margin-bottom: 10px; }
.single-footer-widget .list-items li a,
.single-footer-widget ul li a {
    position: relative;
    font-size: 15px;
    color: var(--ink-body);
    transition: color var(--t), padding-inline-start var(--t);
}
.single-footer-widget .list-items li a:hover,
.single-footer-widget ul li a:hover { color: var(--brand-ink); padding-inline-start: 5px; }

.footer-bottom {
    /* colour is set with the other fixed bands further down */
    border-top: 0;
    padding: 24px 0;
}
.footer-bottom p,
.footer-bottom .footer-bottom-wrapper p,
.footer-bottom .copyright-text {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: #fff;                     /* 4.99:1 on the green */
}
.footer-bottom a,
.footer-bottom .footer-bottom-wrapper p a { color: #fff; }
.footer-bottom a:hover,
.footer-bottom .footer-bottom-wrapper p a:hover { color: rgba(255, 255, 255, .72); }

/* -----------------------------------------------------------------------------
   Breadcrumb band - the dark counterweight at the top of interior pages
   -------------------------------------------------------------------------- */
.breadcrumb-wrapper { position: relative; background-color: var(--surface-dark); }
.breadcrumb-wrapper::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18, 16, 16, .78) 0%, rgba(18, 16, 16, .90) 100%);
}
.breadcrumb-wrapper .page-heading { position: relative; z-index: 2; }
.breadcrumb-wrapper .page-heading h1 { color: #fff; }
.breadcrumb-wrapper .breadcrumb-items li,
.breadcrumb-wrapper .breadcrumb-items li a { font-family: var(--font-ui); font-size: 14px; color: rgba(255,255,255,.7); }
.breadcrumb-wrapper .breadcrumb-items li a:hover { color: #fff; }
.breadcrumb-wrapper .breadcrumb-items li.active { color: var(--brand-400); }

/* -----------------------------------------------------------------------------
   Back to top
   The element is .scroll-up; main.js draws the progress ring by animating
   stroke-dashoffset against document height, and toggles .active-scroll past
   50px. All of that is left exactly as it is - only the surface is themed,
   and the theme's own 0.4s reveal transition is preserved.
   -------------------------------------------------------------------------- */
.scroll-up {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--sh-md);
}
.scroll-up:hover { box-shadow: inset 0 0 0 1px var(--brand-200), var(--sh-lg); }
.scroll-up::after { color: var(--brand-500); }
.scroll-up:hover::after { color: var(--brand-600); }
.scroll-up svg.scroll-circle path { stroke: var(--brand-500); stroke-width: 3px; }

/* -----------------------------------------------------------------------------
   Preloader - the wordmark that shows before first paint
   -------------------------------------------------------------------------- */
.preloader { background-color: var(--surface); }
/* colours live in style.css, which already sets the approved treatment
   (red resting glyph, charcoal flip); only the face is set here.

   The wordmark is a Didone, so the loading letters are one too. The fallbacks
   are all serifs - the preloader shows before a webfont can load, and a
   moment of Georgia is far closer to the logo than a moment of sans. */
.preloader .txt-loading .letters-loading,
.preloader .txt-loading .letters-loading::before {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    /* the wordmark is the heaviest cut - at 700 this reads noticeably lighter
       than the logo it is imitating */
    font-weight: 900;
}
.preloader .animation-preloader .spinner {
    border-color: var(--line);
    border-top-color: var(--brand-500);
}
.preloader p.text-center {
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.preloader .loader .loader-section .bg { background-color: var(--surface); }

/* =============================================================================
   TOUCH TARGETS
   Measured at 390px: the footer's Quick Links were 362x25 - wide enough to
   hit but only 25px tall, which is below the comfortable minimum. Inline
   links inside a sentence (phone, email) are deliberately left inline;
   padding them to 44px would break the paragraph they sit in, so they get
   line-height and separation instead.
   ============================================================================= */
@media (max-width: 991px) {
    .single-footer-widget .list-items li,
    .single-footer-widget ul li { margin-bottom: 2px; }
    .single-footer-widget .list-items li a,
    .single-footer-widget ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* the legal column is plain text, not links - no target needed */
    .single-footer-widget .footer-legal li span { min-height: 0; }

    .footer-contact li { margin-bottom: 14px; line-height: 1.7; }
    .social-icon a { width: 44px; height: 44px; }
    .social-icon { gap: 10px; }
}

/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
    .preloader, .offcanvas__info, .offcanvas__overlay,
    #header-sticky, .scroll-up, .fs-basket-wrap { display: none !important; }
    body { color: #000; background: #fff; font-size: 12pt; }
    a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* =============================================================================
   INTERIOR PAGE ARRIVAL
   The homepage has the full branded loader. Interior pages had nothing at
   all - the hero band simply appeared - so they get their own, lighter,
   arrival. Nothing here affects layout: the bar is fixed, and the band
   animation only touches opacity and transform on the text inside it.
   ============================================================================= */

/* ---- hero band entrance -------------------------------------------------
   Pure CSS, runs on parse. If anything stops it the content is simply
   already in place - `both` fill means the end state is the resting state. */
/* No fill-mode, and the keyframes have no `to` block - the end state is the
   element's own resting style. If animations are paused (backgrounded tab)
   or disabled, the content renders normally instead of being stuck at
   opacity 0. The stagger comes from different durations, not delays, since a
   delayed animation without fill would pop. */
.breadcrumb-wrapper .page-heading h1 {
    animation: fs-band-rise .72s cubic-bezier(.22, .61, .36, 1);
}
.breadcrumb-wrapper .page-heading .breadcrumb-items,
.breadcrumb-wrapper .page-heading > span {
    animation: fs-band-rise .95s cubic-bezier(.22, .61, .36, 1);
}
/* the darkening overlay eases in rather than being there from frame one,
   which is what makes the band feel like it arrives */
.breadcrumb-wrapper::before {
    animation: fs-band-veil .9s ease;
}
@keyframes fs-band-rise {
    from { opacity: 0; transform: translateY(18px); }
}
@keyframes fs-band-veil {
    from { opacity: .55; }
}
/* Set by fs-preload.js once the entrance has had its time. Takes the
   animation off so the band can never be stranded part-way through it. */
.breadcrumb-wrapper.fs-band-settled .page-heading h1,
.breadcrumb-wrapper.fs-band-settled .page-heading .breadcrumb-items,
.breadcrumb-wrapper.fs-band-settled .page-heading > span,
.breadcrumb-wrapper.fs-band-settled::before {
    animation: none;
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .breadcrumb-wrapper .page-heading h1,
    .breadcrumb-wrapper .page-heading .breadcrumb-items,
    .breadcrumb-wrapper .page-heading > span,
    .breadcrumb-wrapper::before { animation: none; }
}

/* =============================================================================
   DARK MODE
   -----------------------------------------------------------------------------
   The token layer was built for this: components reference --surface, --ink,
   --line and so on rather than raw colours, so re-pointing those under
   [data-theme="dark"] flips the whole site - vendor theme included - without
   any component needing a dark-specific rule.

   Selection is [data-theme] on <html>, set by an inline script in each page
   head before first paint so there is no flash of the light theme. Absent
   the attribute, the OS preference decides.

   Brand contrast on the dark ground, measured:
     #f04e3e on #1c1917 ......... 4.88:1  AA  (accent, links, icons)
     white   on #f04e3e ......... 3.58:1      large text / icons only
     white   on #1c1917 ........ 17.5:1   AAA (headings)
   ============================================================================= */

:root[data-theme="dark"] {
    --surface:        var(--n-900);
    --surface-page:   var(--n-950);
    --surface-sunken: var(--n-950);
    --surface-muted:  rgba(255, 255, 255, .07);
    --surface-tint:   rgba(240, 78, 62, .12);

    --ink:        var(--n-0);
    --ink-body:   rgba(255, 255, 255, .74);
    --ink-muted:  rgba(255, 255, 255, .58);
    --ink-faint:  rgba(255, 255, 255, .38);
    --ink-brand:  var(--brand-400);      /* 400 clears AA on #1c1917 */

    --line:        rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .24);

    /* Neutral-tinted shadows disappear on a dark ground - these need to be
       real black, and deeper, to read at all. */
    --sh-xs:  0 1px 2px rgba(0, 0, 0, .40);
    --sh-sm:  0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
    --sh-md:  0 4px 14px rgba(0, 0, 0, .48), 0 2px 5px rgba(0, 0, 0, .32);
    --sh-lg:  0 14px 36px rgba(0, 0, 0, .55), 0 5px 12px rgba(0, 0, 0, .35);
    --sh-xl:  0 28px 60px rgba(0, 0, 0, .62), 0 8px 18px rgba(0, 0, 0, .40);

    /* legacy tokens main.css reads */
    --header: var(--n-0);
    --text:   rgba(255, 255, 255, .74);
    --bg:     var(--n-950);
    --border: rgba(255, 255, 255, .12);
    --body:   var(--n-900);
}

/* ---- the handful of places that hardcode a light value ------------------ */
:root[data-theme="dark"] #header-sticky {
    background-color: rgba(28, 25, 23, .86);
    border-bottom-color: var(--line);
}
:root[data-theme="dark"] #header-sticky.sticky { background-color: rgba(28, 25, 23, .95); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-theme="dark"] #header-sticky,
    :root[data-theme="dark"] #header-sticky.sticky { background-color: var(--surface); }
}
/* the menu page's sticky category bar sits on the page, not the header */
:root[data-theme="dark"] .menu-nav { background: rgba(28, 25, 23, .88); }

/* the bands that are dark in both themes keep their own treatment, but their
   veils go deeper so type still separates from the photograph behind it */
:root[data-theme="dark"] .fs-hero:before {
    background:
        linear-gradient(90deg, rgba(10,9,9,.96) 0%, rgba(10,9,9,.80) 46%, rgba(10,9,9,.58) 100%),
        linear-gradient(0deg,  rgba(10,9,9,.78) 0%, rgba(10,9,9,.24) 46%);
}
:root[data-theme="dark"] .fs-find:before {
    background: linear-gradient(180deg, rgba(10,9,9,.92) 0%, rgba(10,9,9,.86) 100%);
}

/* product imagery sits on its own tile, which should not glow white */
:root[data-theme="dark"] .fs-sig__media,
:root[data-theme="dark"] .menu-card__media { background-color: rgba(255, 255, 255, .04); }


/* the customiser sheet and basket drawer are built on --white, not a token */
:root[data-theme="dark"] .fsm__sheet,
:root[data-theme="dark"] .fsm__head,
:root[data-theme="dark"] .fsm__foot,
:root[data-theme="dark"] .fsm__subpanel,        /* a chosen dish's own customiser (heat level, ingredients, extras) */
:root[data-theme="dark"] .fsb__panel,
:root[data-theme="dark"] .fsm__card,
:root[data-theme="dark"] .fsm__opt { background-color: var(--surface); }
:root[data-theme="dark"] .fsm__card { border-color: var(--line); }
:root[data-theme="dark"] .fsm__subclose { background: rgba(255, 255, 255, .08); color: #fff; }
:root[data-theme="dark"] .fsm__card input[type="checkbox"],
:root[data-theme="dark"] .fsm__card input[type="radio"],
:root[data-theme="dark"] .fsm__opt input { background: transparent; border-color: var(--line-strong); }
:root[data-theme="dark"] .offcanvas__info { background-color: var(--surface); }

/* Disabled actions: --n-300 is a light grey, which on the dark sheet read as
   a pale slab with an unreadable white label - and looked enabled. */
:root[data-theme="dark"] .fsm__add:disabled,
:root[data-theme="dark"] .fsb__checkout:disabled {
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .40);
}
/* the enabled hover resolves --header, which is white in dark mode - that
   turned the primary button into a white block on hover */
:root[data-theme="dark"] .fsm__add:hover:not(:disabled),
:root[data-theme="dark"] .fsb__checkout:hover:not(:disabled) {
    background: var(--brand-600);
    color: #fff;
}

/* forms */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--line);
    color: var(--ink);
}

/* ---- logo art ----------------------------------------------------------
   Two files, one shown at a time. The wordmark is solid black, so on a dark
   header the light-theme file would simply vanish. */
.brand-lockup img.brand-lockup__img--dark { display: none; }
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--light { display: none; }
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--dark  { display: block; }

/* =============================================================================
   THEME TOGGLE
   ============================================================================= */
.fs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;          /* comfortable tap target */
    margin-inline-end: 4px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), color var(--t);
}
.fs-theme-toggle:hover {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--ink);
}
.fs-theme-toggle:focus-visible { box-shadow: var(--ring); }
.fs-theme-toggle i { font-size: 17px; line-height: 1; }
/* the icon turns over as the theme changes rather than just swapping */
.fs-theme-toggle.is-turning i { animation: fs-theme-turn .42s cubic-bezier(.22, .61, .36, 1); }
@keyframes fs-theme-turn {
    from { transform: rotate(-160deg) scale(.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-theme-toggle.is-turning i { animation: none; }
}

/* =============================================================================
   OS PREFERENCE
   Applies only when the visitor has not chosen for themselves - once they
   press the toggle, [data-theme] is set and wins on specificity.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface:        var(--n-900);
        --surface-page:   var(--n-950);
        --surface-sunken: var(--n-950);
        --surface-muted:  rgba(255, 255, 255, .07);
        --surface-tint:   rgba(240, 78, 62, .12);
        --ink:        var(--n-0);
        --ink-body:   rgba(255, 255, 255, .74);
        --ink-muted:  rgba(255, 255, 255, .58);
        --ink-faint:  rgba(255, 255, 255, .38);
        --ink-brand:  var(--brand-400);
        --line:        rgba(255, 255, 255, .12);
        --line-strong: rgba(255, 255, 255, .24);
        --sh-xs:  0 1px 2px rgba(0, 0, 0, .40);
        --sh-sm:  0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
        --sh-md:  0 4px 14px rgba(0, 0, 0, .48), 0 2px 5px rgba(0, 0, 0, .32);
        --sh-lg:  0 14px 36px rgba(0, 0, 0, .55), 0 5px 12px rgba(0, 0, 0, .35);
        --sh-xl:  0 28px 60px rgba(0, 0, 0, .62), 0 8px 18px rgba(0, 0, 0, .40);
        --header: var(--n-0);
        --text:   rgba(255, 255, 255, .74);
        --bg:     var(--n-950);
        --border: rgba(255, 255, 255, .12);
        --body:   var(--n-900);
    }
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--light { display: none; }
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--dark  { display: block; }
    :root:not([data-theme="light"]) #header-sticky { background-color: rgba(28, 25, 23, .86); }
    :root:not([data-theme="light"]) #header-sticky.sticky { background-color: rgba(28, 25, 23, .95); }
    :root:not([data-theme="light"]) .menu-nav { background: rgba(28, 25, 23, .88); }
    :root:not([data-theme="light"]) .fsm__sheet,
    :root:not([data-theme="light"]) .fsm__head,
    :root:not([data-theme="light"]) .fsm__foot,
    :root:not([data-theme="light"]) .fsm__subpanel,
    :root:not([data-theme="light"]) .fsb__panel,
    :root:not([data-theme="light"]) .fsm__card,
    :root:not([data-theme="light"]) .offcanvas__info { background-color: var(--surface); }
    :root:not([data-theme="light"]) .fsm__subclose { background: rgba(255, 255, 255, .08); color: #fff; }
    :root:not([data-theme="light"]) .fs-sig__media,
    :root:not([data-theme="light"]) .menu-card__media { background-color: rgba(255, 255, 255, .04); }
    :root:not([data-theme="light"]) .fsm__add:disabled,
    :root:not([data-theme="light"]) .fsb__checkout:disabled {
        background: rgba(255, 255, 255, .10);
        color: rgba(255, 255, 255, .40);
    }
    :root:not([data-theme="light"]) .fsm__add:hover:not(:disabled),
    :root:not([data-theme="light"]) .fsb__checkout:hover:not(:disabled) {
        background: var(--brand-600); color: #fff;
    }
}

/* =============================================================================
   SOCIAL BUTTONS - each platform in its own colours
   -----------------------------------------------------------------------------
   The glyph carries the brand colour at rest so the platform is recognisable
   at a glance; hovering fills the whole chip with that colour and turns the
   glyph white. Colours are the platforms' published brand values.

   Instagram has no single brand colour - its mark is a gradient - so the
   glyph takes the mid-tone and the hover fill uses the real gradient.

   Font Awesome here is 5.14, which predates the X rebrand and carries no
   fa-x-twitter glyph, so that one mark is an inline SVG. X's logo is black,
   so it takes the page's ink rather than a brand hue, and reverses on dark.
   ============================================================================= */
.social-icon a[data-social] { color: var(--ink-body) !important; }

/* The one SVG among the icon-font glyphs. Sized in em so it tracks whatever
   font-size the surrounding chips use, on all three strips. */
.social-icon a .social-x { width: 1em; height: 1em; display: block; }
/* a black mark on a black hover fill would vanish */
.social-icon a[data-social="x"]:hover .social-x { color: #fff; }

.social-icon a[data-social="facebook"]  { color: #1877F2 !important; }
.social-icon a[data-social="instagram"] { color: #E1306C !important; }
.social-icon a[data-social="x"]         { color: #0F0F0F !important; }   /* 17.4:1 on cream */
.social-icon a[data-social="tiktok"]    { color: #FE2C55 !important; }

.social-icon a[data-social]:hover { color: #fff !important; }
.social-icon a[data-social="facebook"]:hover {
    background: #1877F2 !important; border-color: #1877F2 !important;
}
/* Instagram has no single brand colour, but a five-stop radial gradient
   out-weighed three flat fills at this size. Two stops reads as one colour
   at 32px while still being unmistakably Instagram. */
.social-icon a[data-social="instagram"]:hover {
    background: linear-gradient(135deg, #F9576B 0%, #D6249F 100%) !important;
    border-color: #D6249F !important;
}
.social-icon a[data-social="x"]:hover {
    background: #0F0F0F !important; border-color: #0F0F0F !important;
}
.social-icon a[data-social="tiktok"]:hover {
    background: #FE2C55 !important; border-color: #FE2C55 !important;
}

/* On a dark ground the standard brand blues fall under 3:1, so the dark
   theme uses lighter tints of the same hues. The strip follows the theme
   now, so these cover it along with everything else. */
:root[data-theme="dark"] .social-icon a[data-social="facebook"]  { color: #4E9CF7 !important; }
:root[data-theme="dark"] .social-icon a[data-social="instagram"] { color: #F06292 !important; }
:root[data-theme="dark"] .social-icon a[data-social="x"]         { color: #FFFFFF !important; }
:root[data-theme="dark"] .social-icon a[data-social="tiktok"]    { color: #FF6B8A !important; }
:root[data-theme="dark"] .social-icon a[data-social]:hover { color: #fff !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .social-icon a[data-social="facebook"]  { color: #4E9CF7 !important; }
    :root:not([data-theme="light"]) .social-icon a[data-social="instagram"] { color: #F06292 !important; }
    :root:not([data-theme="light"]) .social-icon a[data-social="x"]         { color: #FFFFFF !important; }
    :root:not([data-theme="light"]) .social-icon a[data-social="tiktok"]    { color: #FF6B8A !important; }
    :root:not([data-theme="light"]) .social-icon a[data-social]:hover { color: #fff !important; }
}

/* =============================================================================
   HEADER - premium pass
   -----------------------------------------------------------------------------
   Two decks, each doing one job:

     .header-top      a slim near-black utility strip - provenance, address,
                      phone, search, social. Quiet, dense, never competing.
     #header-sticky   a warm-white navbar carrying the brand and the actions.

   Everything below is styling only. The sticky-on-scroll class, the offcanvas
   toggle, meanmenu, the basket, the theme toggle and the .theme-btn hover
   wipe all keep the behaviour they already had.
   ============================================================================= */

/* ---- utility strip ------------------------------------------------------ */
.header-top {
    padding: 0;
    /* one step off the navbar in both themes, so the decks separate without
       a hard edge; the hairline does the rest */
    background-color: var(--n-100);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--t), border-color var(--t);
}
.header-top-wrapper { min-height: 42px; gap: 24px; }

/* ---- navbar ------------------------------------------------------------- */
#header-sticky { border-bottom: 1px solid var(--line); }
#header-sticky.sticky { box-shadow: 0 1px 0 var(--line), var(--sh-sm); }

.header-main { padding: 16px 0; gap: 40px; }
@media (max-width: 1399px) { .header-main { gap: 28px; } }
/* 992-1199: the one-line logo is wider, so the three header groups sit a
   little closer or the nav wraps to a second row */
@media (max-width: 1199.98px) { .header-main { gap: 20px; } }
@media (max-width: 991px)  { .header-main { padding: 12px 0; gap: 16px; } }

/* logo, given more presence */
/* one-line lockup (4.6:1) - wider than the old two-line one, so a little less tall */
.header-main .brand-lockup img.brand-lockup__img { height: 52px; }
@media (max-width: 1199.98px) { .header-main .brand-lockup img.brand-lockup__img { height: 40px; } }
@media (max-width: 991px)  { .header-main .brand-lockup img.brand-lockup__img { height: 44px; } }
@media (max-width: 575px)  { .header-main .brand-lockup img.brand-lockup__img { height: 36px; } }

/* ---- navigation ---------------------------------------------------------
   The underline grows from the centre rather than wiping in from the left -
   a smaller, more deliberate movement at this scale. */
.header-main .main-menu ul li { margin-inline-end: 4px; }
.header-main .main-menu ul li a {
    padding: 24px 18px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .012em;
    color: var(--ink-body);
}
.header-main .main-menu ul li a::after {
    inset-inline-start: 18px;
    right: 18px;
    bottom: 18px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.header-main .main-menu ul li.active > a { font-weight: 600; }

/* ---- header controls ----------------------------------------------------
   Theme toggle, basket and hamburger share one shape so the right-hand side
   reads as a set rather than three unrelated icons. */
.fs-theme-toggle,
.fs-basket-wrap .fs-basket-open,
.sidebar__toggle,
.fs-findus {
    width: 42px; height: 42px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: background-color var(--t), border-color var(--t),
                color var(--t), box-shadow var(--t), transform var(--t);
}
.fs-theme-toggle:hover,
.fs-basket-wrap .fs-basket-open:hover,
.sidebar__toggle:hover,
.fs-findus:hover {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
    box-shadow: var(--sh-sm);
    transform: translateY(-1px);
}
.fs-theme-toggle:active,
.fs-basket-wrap .fs-basket-open:active,
.sidebar__toggle:active,
.fs-findus:active { transform: translateY(0); box-shadow: none; }

/* "Find Us": the location-change link, in the same chip as the controls beside it - just wide enough for its label */
.fs-findus {
    width: auto;
    padding: 0 16px;
    align-items: center;
    font-size: 14px; font-weight: 600; line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
.fs-findus:focus-visible { outline: none; box-shadow: var(--ring); }
/* the customer-account link uses the same chip, with its icon in front of the label */
.fs-acct-link { gap: 8px; }
.fs-acct-link i { font-size: 14px; line-height: 1; }

.header-right { gap: 10px; }
.fs-basket-wrap { margin-inline-end: 0 !important; }
.fs-basket-open i { font-size: 17px; }
.fs-theme-toggle { margin-inline-end: 0; }

/* the count badge, tightened against the smaller chip */
.fs-basket-count {
    top: -3px; inset-inline-end: -3px;
    min-width: 19px; height: 19px;
    font-size: 10.5px;
    border-width: 2px;
    box-shadow: var(--sh-xs);
}

/* The theme's hamburger: three absolutely positioned bars in a 31x18 box,
   with an .active state that rotates them into an X when the offcanvas
   opens. Geometry and animation left exactly as they are - only scaled to
   sit comfortably inside the 42px chip, and recoloured to follow it so the
   dark theme carries. */
.sidebar__toggle .header-bar {
    transform: scale(.7);
    transform-origin: center;
}
.sidebar__toggle .header-bar span {
    background: currentColor;
    border-radius: 2px;
}

/* ---- Order Now ----------------------------------------------------------
   The only filled element in the navbar, so it reads as the one thing to
   press. The theme's ::before wipe still does the hover. */
#header-sticky .header-button .theme-btn {
    min-height: 46px;
    padding: 0 26px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .015em;
    box-shadow: 0 2px 10px rgba(240, 78, 62, .22);
}
#header-sticky .header-button .theme-btn:hover { box-shadow: 0 6px 18px rgba(240, 78, 62, .32); }
@media (max-width: 1199px) { #header-sticky .header-button .theme-btn { padding: 0 20px; font-size: 14px; } }

/* ---- dark theme ---------------------------------------------------------- */
/* one step darker than the #1c1917 navbar, mirroring the light pairing */
:root[data-theme="dark"] .header-top { background-color: #0f0d0d; }
:root[data-theme="dark"] .fs-theme-toggle,
:root[data-theme="dark"] .fs-basket-wrap .fs-basket-open,
:root[data-theme="dark"] .sidebar__toggle,
:root[data-theme="dark"] .fs-findus {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
:root[data-theme="dark"] .fs-theme-toggle:hover,
:root[data-theme="dark"] .fs-basket-wrap .fs-basket-open:hover,
:root[data-theme="dark"] .sidebar__toggle:hover,
:root[data-theme="dark"] .fs-findus:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .2);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .header-top { background-color: #0f0d0d; }
    :root:not([data-theme="light"]) .fs-theme-toggle,
    :root:not([data-theme="light"]) .fs-basket-wrap .fs-basket-open,
    :root:not([data-theme="light"]) .sidebar__toggle,
    :root:not([data-theme="light"]) .fs-findus {
        background: rgba(255, 255, 255, .05);
        border-color: rgba(255, 255, 255, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-theme-toggle, .fs-basket-wrap .fs-basket-open, .sidebar__toggle, .fs-findus,
    .header-main .main-menu ul li a::after,
    .sidebar__toggle .header-bar span { transition: none; }
}

/* =============================================================================
   HEADER & FOOTER BANDS
   -----------------------------------------------------------------------------
   Three decks, two behaviours:

     .header-top       always #f04e3e - the one fixed band, in both themes
     #header-sticky    follows the theme: cream in light, charcoal in dark
     .footer-section   follows the theme: cream in light, near-black in dark
     .footer-bottom    always #f04e3e

   The navbar and footer therefore need no colour rules of their own - the
   token layer already drives them. What is left here is only the two fixed
   bands and the things sitting on the red strip, which cannot follow the
   theme because their ground does not.

   Contrast, measured:
     charcoal #1c1917 on cream #f4f1ea ... 15.5:1  AA
     white on charcoal #1c1917 ........... 17.5:1  AAA
     charcoal on the cream search pill ... 15.5:1  AA
     white on #f04e3e ....................  3.58:1 large text / UI only
   ============================================================================= */

/* ---- the fixed red strip -------------------------------------------------- */
.header-top,
:root[data-theme="dark"] .header-top {
    background-color: #f04e3e;
    border-bottom-color: rgba(255, 255, 255, .2);
}

/* Search field: a cream pill on the red, so it reads as an input rather than
   a hole in the band. Charcoal type, since its own ground is light. */
.header-top-wrapper .top-right .search-wrp input,
:root[data-theme="dark"] .header-top-wrapper .top-right .search-wrp input {
    color: #1c1917;
    background-color: #f4f1ea;
    border-color: rgba(255, 255, 255, .55);
}
.header-top-wrapper .top-right .search-wrp input::placeholder,
:root[data-theme="dark"] .header-top-wrapper .top-right .search-wrp input::placeholder { color: #78716b; }
.header-top-wrapper .top-right .search-wrp input:hover,
:root[data-theme="dark"] .header-top-wrapper .top-right .search-wrp input:hover { border-color: rgba(255, 255, 255, .85); }
.header-top-wrapper .top-right .search-wrp input:focus,
:root[data-theme="dark"] .header-top-wrapper .top-right .search-wrp input:focus {
    color: #1c1917;
    background-color: #fbfaf7;
    border-color: #fff;
}
.header-top-wrapper .top-right .search-wrp button,
.header-top-wrapper .top-right .search-wrp:hover button,
:root[data-theme="dark"] .header-top-wrapper .top-right .search-wrp button { color: #78716b; }

/* Social chips on the strip: the platform colours stay, but Facebook blue on
   this red is 1.6:1, so the chip goes white and the glyph keeps its own
   colour inside it. Strip only - the footer set follows the theme. */
.header-top .social-icon a[data-social]:not(:hover),
:root[data-theme="dark"] .header-top .social-icon a[data-social]:not(:hover) {
    background: #fff !important;
    border-color: rgba(255, 255, 255, .6) !important;
}
.header-top .social-icon a[data-social]:hover { border-color: transparent !important; }
/* Dark mode turns the X glyph white, but on the strip its chip stays white -
   keep the glyph black there so it doesn't vanish. */
:root[data-theme="dark"] .header-top .social-icon a[data-social="x"]:not(:hover) { color: #0F0F0F !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .header-top .social-icon a[data-social="x"]:not(:hover) { color: #0F0F0F !important; }
}

/* ---- the fixed brand bar --------------------------------------------------
   White on #f04e3e is 3.58:1 - fine for the 3:1 large-text and UI threshold,
   under the 4.5 that this 14px copyright line wants. The ground caps it;
   white is as far as the type can go. */
.footer-bottom,
:root[data-theme="dark"] .footer-bottom { background-color: #f04e3e; }
.footer-bottom p,
.footer-bottom .footer-bottom-wrapper p,
:root[data-theme="dark"] .footer-bottom p,
:root[data-theme="dark"] .footer-bottom .footer-bottom-wrapper p { color: #fff; }
.footer-bottom a,
.footer-bottom .footer-bottom-wrapper p a { color: #fff; }
.footer-bottom a:hover,
.footer-bottom .footer-bottom-wrapper p a:hover { color: rgba(255, 255, 255, .72); }

/* ---- footer, following the theme ------------------------------------------
   Cream in light, near-black in dark. Only the accent colours are stated;
   everything else resolves from the tokens. */
.footer-section .footer-contact li i { color: var(--brand-500); }
.footer-section .single-footer-widget .list-items li a:hover,
.footer-section .single-footer-widget ul li a:hover,
.footer-section .footer-contact a:hover { color: var(--ink-brand); text-decoration: none; }

/* The theme fills these with rgba(92,92,91,.1) - a soft grey chip on cream,
   but invisible over #121010, leaving the glyphs floating. */
:root[data-theme="dark"] .footer-section .social-icon a[data-social]:not(:hover) {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer-section .social-icon a[data-social]:not(:hover) {
        background: rgba(255, 255, 255, .08) !important;
        border-color: rgba(255, 255, 255, .16) !important;
    }
}

/* The decorative burger and fries outlines are drawn for a light ground and
   turn into pale scratches on the dark one. */
:root[data-theme="dark"] .footer-section .burger-shape,
:root[data-theme="dark"] .footer-section .fry-shape { opacity: .12; }

/* =============================================================================
   HEADER ON PHONES
   The bar is 70px tall on a 360px screen carrying a 44px logo and three 42px
   circles - most of the width, and a fixed cost on every page. Tightened
   below 575px only; nothing above that width changes.
   ============================================================================= */
@media (max-width: 575px) {
    .header-main { padding: 9px 0; gap: 10px; }
    .header-main .brand-lockup img.brand-lockup__img { height: 30px; }

    .header-right { gap: 7px; }
    #header-sticky .fs-theme-toggle,
    #header-sticky .fs-basket-wrap .fs-basket-open,
    #header-sticky .sidebar__toggle { width: 38px; height: 38px; }
    #header-sticky .fs-basket-open i { font-size: 15px; }
    #header-sticky .sidebar__toggle .header-bar { transform: scale(.62); }

    .fs-basket-count {
        min-width: 17px; height: 17px;
        font-size: 9.5px; border-width: 1.5px;
        top: -2px; inset-inline-end: -2px;
    }
}


/* =============================================================================
   LAYOUT - one content width
   Bootstrap's container grows to 1320px from 1400px up, while the menu, the
   homepage showcase and the find-us band were held at 1180px - so the logo,
   the page content and the footer each started on a different edge. One width
   and one side padding now, everywhere. Below 1200px Bootstrap's own steps are
   already narrower and are left as they were.
   ========================================================================== */
@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max);
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }
}

/* ---- page-title bands (About, Menu, Contact) ---------------------------
   main.css gives these 120px above and below at two-class specificity, so
   the pages' own one-class padding rules never took. One rule here, same
   specificity and loaded later, on the hero tokens. */
.breadcrumb-wrapper .page-heading { padding: var(--space-hero) 0; }
@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading { padding: var(--space-hero-md) 0; }
}
@media (max-width: 767px) {
    .breadcrumb-wrapper .page-heading { padding: var(--space-hero-sm) 0; }
}
@media (max-width: 360px) {
    .breadcrumb-wrapper .page-heading { padding: 48px 0; }
}

/* =============================================================================
   ON THE #F04E3E BACKDROP (light theme)
   Page sections are transparent over the softened pattern, so text sits on
   the brand red. Measured on #F04E3E / on the softened doodles:
     #FFFFFF ... 3.6:1 / up to 4.2:1   headings, important text, links
     #FFF4EE ... 3.3:1 / up to 3.9:1   body text and small labels
     #FFE0D6 ... 2.9:1 / up to 3.4:1   only decorative accents and the
                                       not-yet-reached checkout steps
   Cards, header, footer, the category bar and other solid surfaces keep
   their own colours (dark charcoal #1c1917 on white, 17.5:1). Dark mode has
   solid bands and none of this.
   ========================================================================== */
:root[data-theme="light"] .menu-subgroup__desc,
:root[data-theme="light"] .fs-concept__body,
:root[data-theme="light"] .fs-concept__eyebrow,
:root[data-theme="light"] .fs-signature__eyebrow,
:root[data-theme="light"] .about-section p,
:root[data-theme="light"] .about-section li,
:root[data-theme="light"] .about-section .ceo-company,
:root[data-theme="light"] .about-section .ceo-role,
:root[data-theme="light"] .about-section .team-role,
:root[data-theme="light"] .gate__eyebrow,
:root[data-theme="light"] .gate__lede,
:root[data-theme="light"] .gate__details dt,
:root[data-theme="light"] .gate__details dd,
:root[data-theme="light"] .legal-col p,
:root[data-theme="light"] .legal-col li,
:root[data-theme="light"] .legal-section .legal-updated,
:root[data-theme="light"] .co-back,
:root[data-theme="light"] .co-back i,
:root[data-theme="light"] .co-secure,
:root[data-theme="light"] .co-secure i {
    color: #FFF4EE;
}
/* legal-page bullets: the brand-red marker vanishes on the red ground - follow the text */
:root[data-theme="light"] .legal-col li::marker { color: #FFF4EE; }
:root[data-theme="light"] .menu-category__title,
:root[data-theme="light"] .menu-subgroup__title,
:root[data-theme="light"] .menu-category__crown,
:root[data-theme="light"] .fs-signature__title,
:root[data-theme="light"] .fs-signature__all,
:root[data-theme="light"] .fs-concept__lede,
:root[data-theme="light"] .fs-concept__strap,
:root[data-theme="light"] .fs-concept em,
:root[data-theme="light"] .about-heading,
:root[data-theme="light"] .about-section .about-lede,
:root[data-theme="light"] .about-section .about-statement,
:root[data-theme="light"] .about-section .about-closing,
:root[data-theme="light"] .about-section .ceo-name,
:root[data-theme="light"] .about-section strong,
:root[data-theme="light"] .gate__title,
:root[data-theme="light"] .legal-col h1,
:root[data-theme="light"] .legal-col h2,
:root[data-theme="light"] .legal-col h3,
:root[data-theme="light"] .legal-col h4,
:root[data-theme="light"] .legal-col strong,
:root[data-theme="light"] .legal-col .legal-subtitle,
:root[data-theme="light"] .legal-col a,
:root[data-theme="light"] .co-step.is-active {
    color: #FFFFFF;
}
:root[data-theme="light"] .co-step:not(.is-active) {
    color: #FFE0D6;
}
:root[data-theme="light"] .about-section .fas,
:root[data-theme="light"] .about-section .far {
    color: #FFE0D6;
}
:root[data-theme="light"] .menu-category__title:after,
:root[data-theme="light"] .about-heading:after,
:root[data-theme="light"] .fs-signature__title::after {
    background: #FFE0D6;
}
:root[data-theme="light"] .menu-category--signature .menu-category__title:after,
:root[data-theme="light"] .menu-premium .menu-subgroup__title:after {
    background: linear-gradient(90deg, #FFE0D6, rgba(255, 224, 214, 0));
}
:root[data-theme="light"] .legal-col a:hover {
    color: #FFE0D6;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-subgroup__desc,
    :root:not([data-theme="dark"]) .fs-concept__body,
    :root:not([data-theme="dark"]) .fs-concept__eyebrow,
    :root:not([data-theme="dark"]) .fs-signature__eyebrow,
    :root:not([data-theme="dark"]) .about-section p,
    :root:not([data-theme="dark"]) .about-section li,
    :root:not([data-theme="dark"]) .about-section .ceo-company,
    :root:not([data-theme="dark"]) .about-section .ceo-role,
    :root:not([data-theme="dark"]) .about-section .team-role,
    :root:not([data-theme="dark"]) .gate__eyebrow,
    :root:not([data-theme="dark"]) .gate__lede,
    :root:not([data-theme="dark"]) .gate__details dt,
    :root:not([data-theme="dark"]) .gate__details dd,
    :root:not([data-theme="dark"]) .legal-col p,
    :root:not([data-theme="dark"]) .legal-col li,
    :root:not([data-theme="dark"]) .legal-section .legal-updated,
    :root:not([data-theme="dark"]) .co-back,
    :root:not([data-theme="dark"]) .co-back i,
    :root:not([data-theme="dark"]) .co-secure,
    :root:not([data-theme="dark"]) .co-secure i {
        color: #FFF4EE;
    }
    :root:not([data-theme="dark"]) .legal-col li::marker { color: #FFF4EE; }
    :root:not([data-theme="dark"]) .menu-category__title,
    :root:not([data-theme="dark"]) .menu-subgroup__title,
    :root:not([data-theme="dark"]) .menu-category__crown,
    :root:not([data-theme="dark"]) .fs-signature__title,
    :root:not([data-theme="dark"]) .fs-signature__all,
    :root:not([data-theme="dark"]) .fs-concept__lede,
    :root:not([data-theme="dark"]) .fs-concept__strap,
    :root:not([data-theme="dark"]) .fs-concept em,
    :root:not([data-theme="dark"]) .about-heading,
    :root:not([data-theme="dark"]) .about-section .about-lede,
    :root:not([data-theme="dark"]) .about-section .about-statement,
    :root:not([data-theme="dark"]) .about-section .about-closing,
    :root:not([data-theme="dark"]) .about-section .ceo-name,
    :root:not([data-theme="dark"]) .about-section strong,
    :root:not([data-theme="dark"]) .gate__title,
    :root:not([data-theme="dark"]) .legal-col h1,
    :root:not([data-theme="dark"]) .legal-col h2,
    :root:not([data-theme="dark"]) .legal-col h3,
    :root:not([data-theme="dark"]) .legal-col h4,
    :root:not([data-theme="dark"]) .legal-col strong,
    :root:not([data-theme="dark"]) .legal-col .legal-subtitle,
    :root:not([data-theme="dark"]) .legal-col a,
    :root:not([data-theme="dark"]) .co-step.is-active {
        color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .co-step:not(.is-active) {
        color: #FFE0D6;
    }
    :root:not([data-theme="dark"]) .about-section .fas,
    :root:not([data-theme="dark"]) .about-section .far {
        color: #FFE0D6;
    }
    :root:not([data-theme="dark"]) .menu-category__title:after,
    :root:not([data-theme="dark"]) .about-heading:after,
    :root:not([data-theme="dark"]) .fs-signature__title::after {
        background: #FFE0D6;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-category__title:after,
    :root:not([data-theme="dark"]) .menu-premium .menu-subgroup__title:after {
        background: linear-gradient(90deg, #FFE0D6, rgba(255, 224, 214, 0));
    }
    :root:not([data-theme="dark"]) .legal-col a:hover {
        color: #FFE0D6;
    }
}

/* ---- ADD TO BASKET ON THE RED SITE (light theme) ------------------------
   A brand-red button on a card that sits on a brand-red page read as part
   of the background. Charcoal carries it instead - #FFFFFF on #171717 is
   17.9:1 - lifting a shade on hover, and the brief 'added' confirmation
   takes the brand red so it still stands apart. The gold Signatures and
   Premium buttons keep their gold. Dark mode, where the cards are dark,
   keeps the red. */
:root[data-theme="light"] .menu-card__btn--solid,
:root[data-theme="light"] .fs-sig__btn--solid {
    background: #171717;
    border-color: #171717;
    color: #FFFFFF;
}
:root[data-theme="light"] .menu-card__btn--solid:hover,
:root[data-theme="light"] .fs-sig__btn--solid:hover {
    background: var(--n-800);
    border-color: var(--n-800);
    color: #FFFFFF;
}
:root[data-theme="light"] .menu-card__btn.is-added,
:root[data-theme="light"] .fs-sig__btn.is-added {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #FFFFFF;
}
:root[data-theme="light"] .menu-category--signature .menu-card__btn--solid,
:root[data-theme="light"] .menu-premium .menu-card__btn--solid {
    background: var(--sig-gold-fill);
    border-color: var(--sig-gold-fill);
    color: var(--sig-ink);
}
:root[data-theme="light"] .menu-category--signature .menu-card__btn--solid:hover,
:root[data-theme="light"] .menu-premium .menu-card__btn--solid:hover {
    background: var(--sig-gold-fill-hi);
    border-color: var(--sig-gold-fill-hi);
    color: var(--sig-ink);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-card__btn--solid,
    :root:not([data-theme="dark"]) .fs-sig__btn--solid {
        background: #171717;
        border-color: #171717;
        color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .menu-card__btn--solid:hover,
    :root:not([data-theme="dark"]) .fs-sig__btn--solid:hover {
        background: var(--n-800);
        border-color: var(--n-800);
        color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .menu-card__btn.is-added,
    :root:not([data-theme="dark"]) .fs-sig__btn.is-added {
        background: var(--btn-primary);
        border-color: var(--btn-primary);
        color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card__btn--solid,
    :root:not([data-theme="dark"]) .menu-premium .menu-card__btn--solid {
        background: var(--sig-gold-fill);
        border-color: var(--sig-gold-fill);
        color: var(--sig-ink);
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card__btn--solid:hover,
    :root:not([data-theme="dark"]) .menu-premium .menu-card__btn--solid:hover {
        background: var(--sig-gold-fill-hi);
        border-color: var(--sig-gold-fill-hi);
        color: var(--sig-ink);
    }
}

/* ---- LIGHT HEADER AND FOOTER (light theme) --------------------------------
   Warm cream header and a cream-to-peach footer, each carrying the brand's
   food line-art redrawn in coral at low strength (line-art-header.webp up to
   11%, line-art-footer.webp up to 18%, made by conf/line_art_tile.php from
   bg-web.png). Charcoal text; #F04E3E for the active page, headings, icons,
   hovers, the Order Now buttons and the short accent lines. The homepage's
   Find Us band is styled as the top of the footer. Dark mode is untouched.
     charcoal #1C1917 on #FFF7F1 ... 16.9:1   body #2E2926 on #FCE4DC ... 12.2:1
     white on #F04E3E ..............  3.6:1   (button text, 600 weight)
     #F04E3E on #FFF7F1 ............  3.4:1   accents, large/bold labels */
:root[data-theme="light"] .header-top {
    background-color: #FCEFE8;
    background-image: url('../img/bg-image/line-art-header.webp');
    background-size: 640px auto;
    background-repeat: repeat;
    background-position: center top;
    background-attachment: scroll;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid #FADBD2;
}
:root[data-theme="light"] #header-sticky,
:root[data-theme="light"] #header-sticky.sticky {
    background-color: #FFF7F1;
    background-image: url('../img/bg-image/line-art-header.webp');
    background-size: 640px auto;
    background-repeat: repeat;
    background-position: center -43px;
    background-attachment: scroll;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid #FADBD2;
}
:root[data-theme="light"] #header-sticky.sticky {
    box-shadow: 0 6px 24px rgba(120, 48, 30, .08);
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input {
    color: #1C1917;
    background-color: #FFFFFF;
    border-color: #FADBD2;
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input:hover {
    border-color: #F5B9AA;
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input:focus {
    color: #1C1917;
    background-color: #FFFFFF;
    border-color: #F04E3E;
}
:root[data-theme="light"] .header-top .social-icon a[data-social]:not(:hover) {
    background: #FFFFFF !important;
    border-color: #FADBD2 !important;
}
:root[data-theme="light"] .header-main .main-menu ul li a {
    color: #1C1917;
}
:root[data-theme="light"] .header-main .main-menu ul li a:hover,
:root[data-theme="light"] .header-main .main-menu ul li:hover > a,
:root[data-theme="light"] .header-main .main-menu ul li.active > a {
    color: #F04E3E !important;
}
:root[data-theme="light"] .header-main .main-menu ul li a::after {
    background: #F04E3E;
    height: 2px;
}
:root[data-theme="light"] .header-main .main-menu ul li .submenu li a {
    color: var(--ink-body);
}
:root[data-theme="light"] #header-sticky .fs-theme-toggle,
:root[data-theme="light"] #header-sticky .fs-basket-wrap .fs-basket-open,
:root[data-theme="light"] #header-sticky .sidebar__toggle,
:root[data-theme="light"] #header-sticky .fs-findus {
    background: #FFFFFF;
    border-color: #FADBD2;
    color: #1C1917;
}
:root[data-theme="light"] #header-sticky .fs-theme-toggle:hover,
:root[data-theme="light"] #header-sticky .fs-basket-wrap .fs-basket-open:hover,
:root[data-theme="light"] #header-sticky .sidebar__toggle:hover,
:root[data-theme="light"] #header-sticky .fs-findus:hover {
    background: #FFFFFF;
    border-color: #F04E3E;
    color: #F04E3E;
    box-shadow: 0 4px 14px rgba(240, 78, 62, .14);
}
:root[data-theme="light"] #header-sticky .header-button .theme-btn {
    background-color: var(--btn-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(240, 78, 62, .28);
}
:root[data-theme="light"] #header-sticky .header-button .theme-btn:hover {
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(240, 78, 62, .34);
}
:root[data-theme="light"] #header-sticky .header-button .theme-btn::before,
:root[data-theme="light"] #header-sticky .header-button .theme-btn:hover::before {
    background-color: var(--btn-primary-hover);
}
:root[data-theme="light"] .fs-find {
    background-color: #FFF7F1;
    background-image: url('../img/bg-image/line-art-footer.webp'), linear-gradient(180deg, #FFF7F1 0%, #FFF2EB 100%);
    background-size: 760px auto, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center top, 0 0;
    border-top: 1px solid #FADBD2;
}
:root[data-theme="light"] .fs-find:before,
:root[data-theme="light"] .fs-find .fs-find__glow {
    display: none;
}
:root[data-theme="light"] .fs-find .fs-find__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #F04E3E;
}
:root[data-theme="light"] .fs-find .fs-find__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: #F04E3E;
}
:root[data-theme="light"] .fs-find .fs-find__title {
    color: #1C1917;
}
:root[data-theme="light"] .fs-find .fs-find__title .fs-find__accent {
    color: #F04E3E;
}
:root[data-theme="light"] .fs-find .fs-find__item h3 {
    color: #F04E3E;
}
:root[data-theme="light"] .fs-find .fs-find__item address,
:root[data-theme="light"] .fs-find .fs-find__item p {
    color: #2E2926;
}
:root[data-theme="light"] .fs-find .fs-find__item a {
    color: #1C1917;
    border-bottom-color: rgba(240, 78, 62, .35);
}
:root[data-theme="light"] .fs-find .fs-find__item a:hover {
    color: #F04E3E;
    border-color: #F04E3E;
}
:root[data-theme="light"] .fs-find .fs-find__cta {
    background-color: var(--btn-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(240, 78, 62, .28);
}
:root[data-theme="light"] .fs-find .fs-find__cta:hover {
    background-color: var(--btn-primary-hover);
    color: #FFFFFF;
}
:root[data-theme="light"] .fs-find .fs-find__link {
    color: #1C1917;
    border-bottom-color: rgba(240, 78, 62, .45);
}
:root[data-theme="light"] .fs-find .fs-find__link:hover {
    color: #F04E3E;
    border-color: #F04E3E;
}
:root[data-theme="light"] .footer-section {
    background-color: #FFF2EB;
    background-image: url('../img/bg-image/line-art-footer.webp'), linear-gradient(180deg, #FFF2EB 0%, #FCE4DC 100%);
    background-size: 760px auto, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center top, 0 0;
    border-top: 1px solid rgba(240, 78, 62, .18);
}
:root[data-theme="light"] .footer-section .burger-shape,
:root[data-theme="light"] .footer-section .fry-shape {
    opacity: .3;
    filter: brightness(0) saturate(100%) invert(45%) sepia(76%) saturate(2476%) hue-rotate(338deg) brightness(97%) contrast(94%);
}
:root[data-theme="light"] .single-footer-widget .widget-head h4,
:root[data-theme="light"] .single-footer-widget h4 {
    position: relative;
    padding-bottom: 12px;
    color: #F04E3E;
}
:root[data-theme="light"] .single-footer-widget .widget-head h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: #F04E3E;
}
:root[data-theme="light"] .single-footer-widget .footer-contact,
:root[data-theme="light"] .single-footer-widget ul li a,
:root[data-theme="light"] .single-footer-widget .footer-address,
:root[data-theme="light"] .single-footer-widget .footer-address-text,
:root[data-theme="light"] .single-footer-widget p {
    color: #2E2926;
}
:root[data-theme="light"] .single-footer-widget ul li > span {
    color: #5A504B;
}
:root[data-theme="light"] .single-footer-widget ul li a span {
    color: inherit;
}
:root[data-theme="light"] .single-footer-widget ul li a:hover,
:root[data-theme="light"] .footer-section .footer-contact a:hover {
    color: #F04E3E;
}
:root[data-theme="light"] .footer-section .footer-contact li i {
    color: #F04E3E;
}
:root[data-theme="light"] .footer-section .social-icon a[data-social] {
    color: #F04E3E !important;
    background: #FFFFFF !important;
    border-color: #FADBD2 !important;
}
:root[data-theme="light"] .footer-section .social-icon a[data-social]:hover {
    color: #FFFFFF !important;
    background: #F04E3E !important;
    border-color: #F04E3E !important;
}
:root[data-theme="light"] .footer-section .footer-bottom {
    background-color: transparent;
    background-image: none;
    border-top: 1px solid rgba(240, 78, 62, .18);
}
:root[data-theme="light"] .footer-section .footer-bottom p,
:root[data-theme="light"] .footer-section .footer-bottom .footer-bottom-wrapper p {
    color: #5A504B;
}
:root[data-theme="light"] .footer-section .footer-bottom a {
    color: #F04E3E;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .header-top {
        background-color: #FCEFE8;
        background-image: url('../img/bg-image/line-art-header.webp');
        background-size: 640px auto;
        background-repeat: repeat;
        background-position: center top;
        background-attachment: scroll;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid #FADBD2;
    }
    :root:not([data-theme="dark"]) #header-sticky,
    :root:not([data-theme="dark"]) #header-sticky.sticky {
        background-color: #FFF7F1;
        background-image: url('../img/bg-image/line-art-header.webp');
        background-size: 640px auto;
        background-repeat: repeat;
        background-position: center -43px;
        background-attachment: scroll;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid #FADBD2;
    }
    :root:not([data-theme="dark"]) #header-sticky.sticky {
        box-shadow: 0 6px 24px rgba(120, 48, 30, .08);
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input {
        color: #1C1917;
        background-color: #FFFFFF;
        border-color: #FADBD2;
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input:hover {
        border-color: #F5B9AA;
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input:focus {
        color: #1C1917;
        background-color: #FFFFFF;
        border-color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .header-top .social-icon a[data-social]:not(:hover) {
        background: #FFFFFF !important;
        border-color: #FADBD2 !important;
    }
    :root:not([data-theme="dark"]) .header-main .main-menu ul li a {
        color: #1C1917;
    }
    :root:not([data-theme="dark"]) .header-main .main-menu ul li a:hover,
    :root:not([data-theme="dark"]) .header-main .main-menu ul li:hover > a,
    :root:not([data-theme="dark"]) .header-main .main-menu ul li.active > a {
        color: #F04E3E !important;
    }
    :root:not([data-theme="dark"]) .header-main .main-menu ul li a::after {
        background: #F04E3E;
        height: 2px;
    }
    :root:not([data-theme="dark"]) .header-main .main-menu ul li .submenu li a {
        color: var(--ink-body);
    }
    :root:not([data-theme="dark"]) #header-sticky .fs-theme-toggle,
    :root:not([data-theme="dark"]) #header-sticky .fs-basket-wrap .fs-basket-open,
    :root:not([data-theme="dark"]) #header-sticky .sidebar__toggle,
    :root:not([data-theme="dark"]) #header-sticky .fs-findus {
        background: #FFFFFF;
        border-color: #FADBD2;
        color: #1C1917;
    }
    :root:not([data-theme="dark"]) #header-sticky .fs-theme-toggle:hover,
    :root:not([data-theme="dark"]) #header-sticky .fs-basket-wrap .fs-basket-open:hover,
    :root:not([data-theme="dark"]) #header-sticky .sidebar__toggle:hover,
    :root:not([data-theme="dark"]) #header-sticky .fs-findus:hover {
        background: #FFFFFF;
        border-color: #F04E3E;
        color: #F04E3E;
        box-shadow: 0 4px 14px rgba(240, 78, 62, .14);
    }
    :root:not([data-theme="dark"]) #header-sticky .header-button .theme-btn {
        background-color: var(--btn-primary);
        color: #FFFFFF;
        box-shadow: 0 4px 14px rgba(240, 78, 62, .28);
    }
    :root:not([data-theme="dark"]) #header-sticky .header-button .theme-btn:hover {
        color: #FFFFFF;
        box-shadow: 0 6px 18px rgba(240, 78, 62, .34);
    }
    :root:not([data-theme="dark"]) #header-sticky .header-button .theme-btn::before,
    :root:not([data-theme="dark"]) #header-sticky .header-button .theme-btn:hover::before {
        background-color: var(--btn-primary-hover);
    }
    :root:not([data-theme="dark"]) .fs-find {
        background-color: #FFF7F1;
        background-image: url('../img/bg-image/line-art-footer.webp'), linear-gradient(180deg, #FFF7F1 0%, #FFF2EB 100%);
        background-size: 760px auto, 100% 100%;
        background-repeat: repeat, no-repeat;
        background-position: center top, 0 0;
        border-top: 1px solid #FADBD2;
    }
    :root:not([data-theme="dark"]) .fs-find:before,
    :root:not([data-theme="dark"]) .fs-find .fs-find__glow {
        display: none;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__eyebrow::before {
        content: "";
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: #F04E3E;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__title {
        color: #1C1917;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__title .fs-find__accent {
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__item h3 {
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__item address,
    :root:not([data-theme="dark"]) .fs-find .fs-find__item p {
        color: #2E2926;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__item a {
        color: #1C1917;
        border-bottom-color: rgba(240, 78, 62, .35);
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__item a:hover {
        color: #F04E3E;
        border-color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__cta {
        background-color: var(--btn-primary);
        color: #FFFFFF;
        box-shadow: 0 6px 18px rgba(240, 78, 62, .28);
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__cta:hover {
        background-color: var(--btn-primary-hover);
        color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__link {
        color: #1C1917;
        border-bottom-color: rgba(240, 78, 62, .45);
    }
    :root:not([data-theme="dark"]) .fs-find .fs-find__link:hover {
        color: #F04E3E;
        border-color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .footer-section {
        background-color: #FFF2EB;
        background-image: url('../img/bg-image/line-art-footer.webp'), linear-gradient(180deg, #FFF2EB 0%, #FCE4DC 100%);
        background-size: 760px auto, 100% 100%;
        background-repeat: repeat, no-repeat;
        background-position: center top, 0 0;
        border-top: 1px solid rgba(240, 78, 62, .18);
    }
    :root:not([data-theme="dark"]) .footer-section .burger-shape,
    :root:not([data-theme="dark"]) .footer-section .fry-shape {
        opacity: .3;
        filter: brightness(0) saturate(100%) invert(45%) sepia(76%) saturate(2476%) hue-rotate(338deg) brightness(97%) contrast(94%);
    }
    :root:not([data-theme="dark"]) .single-footer-widget .widget-head h4,
    :root:not([data-theme="dark"]) .single-footer-widget h4 {
        position: relative;
        padding-bottom: 12px;
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .single-footer-widget .widget-head h4::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: #F04E3E;
    }
    :root:not([data-theme="dark"]) .single-footer-widget .footer-contact,
    :root:not([data-theme="dark"]) .single-footer-widget ul li a,
    :root:not([data-theme="dark"]) .single-footer-widget .footer-address,
    :root:not([data-theme="dark"]) .single-footer-widget .footer-address-text,
    :root:not([data-theme="dark"]) .single-footer-widget p {
        color: #2E2926;
    }
    :root:not([data-theme="dark"]) .single-footer-widget ul li > span {
        color: #5A504B;
    }
    :root:not([data-theme="dark"]) .single-footer-widget ul li a span {
        color: inherit;
    }
    :root:not([data-theme="dark"]) .single-footer-widget ul li a:hover,
    :root:not([data-theme="dark"]) .footer-section .footer-contact a:hover {
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-contact li i {
        color: #F04E3E;
    }
    :root:not([data-theme="dark"]) .footer-section .social-icon a[data-social] {
        color: #F04E3E !important;
        background: #FFFFFF !important;
        border-color: #FADBD2 !important;
    }
    :root:not([data-theme="dark"]) .footer-section .social-icon a[data-social]:hover {
        color: #FFFFFF !important;
        background: #F04E3E !important;
        border-color: #F04E3E !important;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom {
        background-color: transparent;
        background-image: none;
        border-top: 1px solid rgba(240, 78, 62, .18);
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom p,
    :root:not([data-theme="dark"]) .footer-section .footer-bottom .footer-bottom-wrapper p {
        color: #5A504B;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom a {
        color: #F04E3E;
    }
}

/* ---- VIBRANT BRAND BANDS (light theme) ------------------------------------
   The slim strip above the header and the copyright bar under the footer are
   the two bold moments: a deep-red > #F04E3E > orange gradient framing the
   cream header and footer. White search pill and social chips sit on top;
   the copyright text sits on the deep-red end (white 4.5:1). */
:root[data-theme="light"] .header-top {
    background-color: #F04E3E;
    background-image: linear-gradient(90deg, #D93A2B 0%, #F04E3E 48%, #FF6B3D 100%);
    border-bottom: 0;
}
:root[data-theme="light"] .header-top-wrapper .top-right {
    border-left-color: rgba(255, 255, 255, .28);
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input {
    color: #1C1917;
    background-color: #FFFFFF;
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 8px rgba(120, 30, 18, .16);
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input:hover {
    border-color: #FFFFFF;
}
:root[data-theme="light"] .header-top-wrapper .top-right .search-wrp input:focus {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
:root[data-theme="light"] .header-top .social-icon a[data-social]:not(:hover) {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(120, 30, 18, .16);
}
:root[data-theme="light"] .header-top .social-icon a[data-social]:hover {
    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px #FFFFFF;
}
:root[data-theme="light"] .footer-section .footer-bottom {
    background-color: #F04E3E;
    background-image: linear-gradient(90deg, #D93A2B 0%, #D93A2B 34%, #F04E3E 62%, #FF6B3D 100%);
    border-top: 0;
}
:root[data-theme="light"] .footer-section .footer-bottom p,
:root[data-theme="light"] .footer-section .footer-bottom .footer-bottom-wrapper p {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: .04em;
}
:root[data-theme="light"] .footer-section .footer-bottom a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
}
:root[data-theme="light"] .footer-section .footer-bottom a:hover {
    color: #FFE0D6;
}
:root[data-theme="light"] .scroll-up {
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 8px 22px rgba(120, 30, 18, .28);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .header-top {
        background-color: #F04E3E;
        background-image: linear-gradient(90deg, #D93A2B 0%, #F04E3E 48%, #FF6B3D 100%);
        border-bottom: 0;
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right {
        border-left-color: rgba(255, 255, 255, .28);
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input {
        color: #1C1917;
        background-color: #FFFFFF;
        border-color: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 8px rgba(120, 30, 18, .16);
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input:hover {
        border-color: #FFFFFF;
    }
    :root:not([data-theme="dark"]) .header-top-wrapper .top-right .search-wrp input:focus {
        border-color: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
    }
    :root:not([data-theme="dark"]) .header-top .social-icon a[data-social]:not(:hover) {
        background: #FFFFFF !important;
        border-color: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(120, 30, 18, .16);
    }
    :root:not([data-theme="dark"]) .header-top .social-icon a[data-social]:hover {
        border-color: #FFFFFF !important;
        box-shadow: 0 0 0 2px #FFFFFF;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom {
        background-color: #F04E3E;
        background-image: linear-gradient(90deg, #D93A2B 0%, #D93A2B 34%, #F04E3E 62%, #FF6B3D 100%);
        border-top: 0;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom p,
    :root:not([data-theme="dark"]) .footer-section .footer-bottom .footer-bottom-wrapper p {
        color: #FFFFFF;
        font-weight: 600;
        letter-spacing: .04em;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom a {
        color: #FFFFFF;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    :root:not([data-theme="dark"]) .footer-section .footer-bottom a:hover {
        color: #FFE0D6;
    }
    :root:not([data-theme="dark"]) .scroll-up {
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 8px 22px rgba(120, 30, 18, .28);
    }
}

/* ---- ABOUT AND MENU BANNERS ----------------------------------------------
   The artwork is the banner: the title, the slogan and the food are all in
   the image (assets/img/bg-image/au-bg, menu-bg). So the band takes the art's
   own 3:1 shape, the darkening veil the old photograph needed is off, and the
   page's own heading stays in the page for screen readers and search engines
   without being drawn over the art a second time. Anchored left, where the
   title sits, so a shorter band on a phone still shows it. */
.about-hero,
.menu-hero {
    aspect-ratio: 3 / 1;
    max-height: 560px;
    background-size: cover;
    background-position: left center;
}
.about-hero::before,
.menu-hero::before { display: none; }
.breadcrumb-wrapper.about-hero .page-heading,
.breadcrumb-wrapper.menu-hero .page-heading {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 767px) {
    .about-hero,
    .menu-hero { aspect-ratio: auto; min-height: 200px; }
}

/* ---- GOLD SIGNATURES HEADING (light theme) --------------------------------
   The F&S Signatures section heading in metallic gold on the red page: a
   light-to-deep gold gradient clipped to the letters, a gold crown and a
   gold rule. A gradient cannot take a text-shadow cleanly, so a dark
   drop-shadow filter gives the letters their edge against the red. Dark
   mode keeps its own gold. */
:root[data-theme="light"] .menu-category--signature .menu-category__title {
    background-image: linear-gradient(180deg, #FFF4C7 0%, #FFD966 42%, #F2B431 68%, #FFE49A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(90, 20, 12, .45)) drop-shadow(0 6px 14px rgba(90, 20, 12, .35));
}
:root[data-theme="light"] .menu-category--signature .menu-category__crown {
    color: #FFD966;
    -webkit-text-fill-color: initial;
}
:root[data-theme="light"] .menu-category--signature .menu-category__title:after {
    background: linear-gradient(90deg, #FFE08A 0%, #F2B431 55%, rgba(242, 180, 49, 0) 100%);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-category--signature .menu-category__title {
        background-image: linear-gradient(180deg, #FFF4C7 0%, #FFD966 42%, #F2B431 68%, #FFE49A 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 2px 0 rgba(90, 20, 12, .45)) drop-shadow(0 6px 14px rgba(90, 20, 12, .35));
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-category__crown {
        color: #FFD966;
        -webkit-text-fill-color: initial;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-category__title:after {
        background: linear-gradient(90deg, #FFE08A 0%, #F2B431 55%, rgba(242, 180, 49, 0) 100%);
    }
}

/* ---- GOLD PREMIUM SUB-HEADING (light theme) --------------------------------
   Premium Milkshakes in the same metallic gold as the F&S Signatures heading,
   with its crown and rule. The flavour-count tag inside the heading keeps
   its dark ink so it does not turn see-through with the letters. Dark mode
   keeps its own gold. */
:root[data-theme="light"] .menu-premium .menu-subgroup__title {
    background-image: linear-gradient(180deg, #FFF4C7 0%, #FFD966 42%, #F2B431 68%, #FFE49A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgba(90, 20, 12, .45)) drop-shadow(0 5px 12px rgba(90, 20, 12, .32));
}
:root[data-theme="light"] .menu-premium .menu-subgroup__title .menu-subgroup__count {
    color: #1A1713;
    -webkit-text-fill-color: #1A1713;
}
:root[data-theme="light"] .menu-premium .menu-subgroup__title .menu-category__crown {
    color: #FFD966;
    -webkit-text-fill-color: initial;
}
:root[data-theme="light"] .menu-premium .menu-subgroup__title:after {
    background: linear-gradient(90deg, #FFE08A 0%, #F2B431 55%, rgba(242, 180, 49, 0) 100%);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-premium .menu-subgroup__title {
        background-image: linear-gradient(180deg, #FFF4C7 0%, #FFD966 42%, #F2B431 68%, #FFE49A 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 2px 0 rgba(90, 20, 12, .45)) drop-shadow(0 5px 12px rgba(90, 20, 12, .32));
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-subgroup__title .menu-subgroup__count {
        color: #1A1713;
        -webkit-text-fill-color: #1A1713;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-subgroup__title .menu-category__crown {
        color: #FFD966;
        -webkit-text-fill-color: initial;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-subgroup__title:after {
        background: linear-gradient(90deg, #FFE08A 0%, #F2B431 55%, rgba(242, 180, 49, 0) 100%);
    }
}

/* ---- GOLD SIGNATURE CARDS (light theme) ------------------------------------
   The F&S Signatures cards filled with gold, the words in black:
     #111111 on #F3D27A ... 13.7:1   names, prices
     #1A1713 on #E6BC57 ... 10.6:1   descriptions, at the card's deepest gold
   The button turns black with gold lettering so it does not vanish into the
   card (#F7D77A on #111111, 13.9:1); once added it goes brand red as the
   other cards do. Dark mode keeps its own cards. */
:root[data-theme="light"] .menu-category--signature .menu-card {
    background-color: #F3D27A;
    background-image: linear-gradient(160deg, #FCEBB8 0%, #F3D27A 52%, #E6BC57 100%);
    border-color: #C99A2E;
}
:root[data-theme="light"] .menu-category--signature .menu-card:hover,
:root[data-theme="light"] .menu-category--signature .menu-card--hero:hover {
    border-color: #9A6F12;
    box-shadow: 0 16px 34px rgba(120, 80, 10, .28);
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__media {
    border-bottom-color: rgba(120, 85, 10, .35);
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__name,
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__price,
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__amount {
    color: #111111;
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__desc {
    color: #1A1713;
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__from,
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__poa {
    color: #2A2118;
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__btn--solid {
    background: #111111;
    border-color: #111111;
    color: #F7D77A;
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__btn--solid:hover {
    background: #2A2622;
    border-color: #2A2622;
    color: #FFE49A;
}
:root[data-theme="light"] .menu-category--signature .menu-card .menu-card__btn.is-added {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #FFFFFF;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card {
        background-color: #F3D27A;
        background-image: linear-gradient(160deg, #FCEBB8 0%, #F3D27A 52%, #E6BC57 100%);
        border-color: #C99A2E;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card:hover,
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card--hero:hover {
        border-color: #9A6F12;
        box-shadow: 0 16px 34px rgba(120, 80, 10, .28);
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__media {
        border-bottom-color: rgba(120, 85, 10, .35);
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__name,
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__price,
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__amount {
        color: #111111;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__desc {
        color: #1A1713;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__from,
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__poa {
        color: #2A2118;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__btn--solid {
        background: #111111;
        border-color: #111111;
        color: #F7D77A;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__btn--solid:hover {
        background: #2A2622;
        border-color: #2A2622;
        color: #FFE49A;
    }
    :root:not([data-theme="dark"]) .menu-category--signature .menu-card .menu-card__btn.is-added {
        background: var(--btn-primary);
        border-color: var(--btn-primary);
        color: #FFFFFF;
    }
}

/* ---- GOLD PREMIUM CARDS (light theme) --------------------------------------
   The Premium Milkshakes cards in the same gold as the F&S Signatures cards,
   with black words and a black button lettered in gold (contrast as above).
   The tall milkshake photos keep their white frame. Dark mode keeps its own
   cards. */
:root[data-theme="light"] .menu-premium .menu-card {
    background-color: #F3D27A;
    background-image: linear-gradient(160deg, #FCEBB8 0%, #F3D27A 52%, #E6BC57 100%);
    border-color: #C99A2E;
}
:root[data-theme="light"] .menu-premium .menu-card:hover {
    border-color: #9A6F12;
    box-shadow: 0 16px 34px rgba(120, 80, 10, .28);
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__media {
    border-bottom-color: rgba(120, 85, 10, .35);
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__name,
:root[data-theme="light"] .menu-premium .menu-card .menu-card__price,
:root[data-theme="light"] .menu-premium .menu-card .menu-card__amount {
    color: #111111;
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__desc {
    color: #1A1713;
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__from,
:root[data-theme="light"] .menu-premium .menu-card .menu-card__poa {
    color: #2A2118;
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__btn--solid {
    background: #111111;
    border-color: #111111;
    color: #F7D77A;
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__btn--solid:hover {
    background: #2A2622;
    border-color: #2A2622;
    color: #FFE49A;
}
:root[data-theme="light"] .menu-premium .menu-card .menu-card__btn.is-added {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #FFFFFF;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .menu-premium .menu-card {
        background-color: #F3D27A;
        background-image: linear-gradient(160deg, #FCEBB8 0%, #F3D27A 52%, #E6BC57 100%);
        border-color: #C99A2E;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card:hover {
        border-color: #9A6F12;
        box-shadow: 0 16px 34px rgba(120, 80, 10, .28);
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__media {
        border-bottom-color: rgba(120, 85, 10, .35);
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__name,
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__price,
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__amount {
        color: #111111;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__desc {
        color: #1A1713;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__from,
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__poa {
        color: #2A2118;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__btn--solid {
        background: #111111;
        border-color: #111111;
        color: #F7D77A;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__btn--solid:hover {
        background: #2A2622;
        border-color: #2A2622;
        color: #FFE49A;
    }
    :root:not([data-theme="dark"]) .menu-premium .menu-card .menu-card__btn.is-added {
        background: var(--btn-primary);
        border-color: var(--btn-primary);
        color: #FFFFFF;
    }
}

/* ---- ONE LOGO IN DARK MODE ------------------------------------------------
   The black-lettered flame-smoke-lockup-line logo is the logo in both themes.
   On the dark header, side menu and footer it sits on a small cream plate,
   because black lettering on the near-black ground would not be seen. The
   white-lettered version is no longer shown in the header or footer. */
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--light { display: block; }
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--dark  { display: none; }
:root[data-theme="dark"] .brand-lockup {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: #FFF7F1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--light { display: block; }
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--dark  { display: none; }
    :root:not([data-theme="light"]) .brand-lockup {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 12px;
        background-color: #FFF7F1;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    }
}

/* ---- LOADING SCREEN LOGO ---------------------------------------------------
   The flame-smoke-lockup-line logo in place of the typed letters, breathing
   gently while the page loads. On the dark theme's loading screen it sits on
   the same cream plate as in the header. */
.preloader .animation-preloader .txt-loading { line-height: 0; }
.preloader .preloader-logo {
    display: block;
    width: min(520px, 78vw);
    height: auto;
    margin: 0 auto;
    animation: fs-logo-breathe 2.4s ease-in-out infinite;
}
@keyframes fs-logo-breathe {
    0%, 100% { transform: scale(1);     opacity: 1; }
    50%      { transform: scale(1.035); opacity: .86; }
}
@media (prefers-reduced-motion: reduce) {
    .preloader .preloader-logo { animation: none; }
}
:root[data-theme="dark"] .preloader .preloader-logo {
    background-color: #FFF7F1;
    padding: 12px 20px;
    border-radius: 16px;
    box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .preloader .preloader-logo {
        background-color: #FFF7F1;
        padding: 12px 20px;
        border-radius: 16px;
        box-sizing: border-box;
    }
}

/* ---- SITE SCALE ON LAPTOPS AND DESKTOPS -------------------------------------
   On screens 1200px and wider the whole site is drawn at 80%: the size it was
   designed and approved at (a browser zoomed to 80%), now the size every
   visitor gets at normal zoom. Phones and tablets are unchanged.

   A browser's own zoom keeps "100vh" the full screen height; this scale would
   shrink it to 80% of the screen, so the few heights tied to the screen are
   divided by .8 to reach the same share of it as before. The Menu page's
   sticky bar divides by the same factor in its script. */
@media (min-width: 1200px) {
    html { zoom: .8; }

    html .fs-hero          { min-height: min(92.5vh, 700px); }   /* was min(74vh, 700px) */
    html .gate             { min-height: 125vh; }                 /* was 100vh */
    html .fsm__sheet       { max-height: min(110vh, 780px); }     /* was min(88vh, 780px) */
}

/* =============================================================================
   LEGAL CONTENTS BOX ON THE RED PAGE
   The light legal pages set their text and links white for the red ground; the
   "On this page" box is a white card, so its own text goes back to dark ink.
   ========================================================================== */
:root[data-theme="light"] .legal-col .legal-toc .legal-toc__title { color: #7A6F69; }
:root[data-theme="light"] .legal-col .legal-toc li,
:root[data-theme="light"] .legal-col .legal-toc a { color: #2B211C; }
:root[data-theme="light"] .legal-col .legal-toc li::marker { color: #B3A8A2; }
:root[data-theme="light"] .legal-col .legal-toc a:hover,
:root[data-theme="light"] .legal-col .legal-toc a:focus-visible { color: #D93A28; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .legal-col .legal-toc .legal-toc__title { color: #7A6F69; }
    :root:not([data-theme="dark"]) .legal-col .legal-toc li,
    :root:not([data-theme="dark"]) .legal-col .legal-toc a { color: #2B211C; }
    :root:not([data-theme="dark"]) .legal-col .legal-toc li::marker { color: #B3A8A2; }
    :root:not([data-theme="dark"]) .legal-col .legal-toc a:hover,
    :root:not([data-theme="dark"]) .legal-col .legal-toc a:focus-visible { color: #D93A28; }
}

/* =============================================================================
   HEADER: LOGO IN THE LEFT CORNER, EVERYTHING ELSE IN THE RIGHT
   On desktop the bar spans the full width of the screen: the logo sits at the
   left edge, a little larger, and the menu joins the actions at the right edge.
   Phones and tablets keep their own header.
   ========================================================================== */
@media (min-width: 992px) {
    /* the top strip shares it while it shows the Current Branch, so that line starts at the logo's edge */
    #header-sticky > .container,
    .header-top.has-branch > .container {
        max-width: none;
        width: 100%;
        padding-inline: clamp(24px, 3vw, 64px);
    }
    #header-sticky .header-main { justify-content: flex-start; }
    #header-sticky .header-main .header-left { margin-left: auto; }
    #header-sticky .header-main .brand-lockup img.brand-lockup__img { height: 46px; }
}
@media (min-width: 1200px) {
    #header-sticky .header-main .brand-lockup img.brand-lockup__img { height: 62px; }
}

/* =============================================================================
   DARK MODE BACKDROP
   Dark mode keeps the patterned background rather than plain black: deep
   charcoal with the same food doodles drawn in faint coral lines (the footer's
   line-art tile, 18% at its strongest), under a soft warm glow at the top.
   The page bands that went solid in dark mode become see-through so the
   pattern shows between them; cards, panels, header and footer stay solid,
   so text keeps its contrast.
   ========================================================================== */
:root[data-theme="dark"] body::before {
    display: block;
    background-color: #141110;
    background-image:
        radial-gradient(120% 70% at 50% 0%, rgba(240, 78, 62, .10) 0%, rgba(20, 17, 16, 0) 60%),
        url('../img/bg-image/line-art-footer.webp'),
    url('../img/bg-image/line-art-footer.webp');
    background-size: 100% 100%, 960px 960px, 960px 960px;
    background-repeat: no-repeat, repeat, repeat;
    background-position: center top, center top, center top;
}
html:root[data-theme="dark"] .about-section                    { background-color: rgba(20, 17, 16, .38); }
html:root[data-theme="dark"] .about-section:nth-of-type(even)  { background-color: rgba(10, 9, 8, .46); }
html:root[data-theme="dark"] .menu-section                     { background-color: transparent; }
html:root[data-theme="dark"] .legal-section                    { background-color: rgba(20, 17, 16, .44); }
html:root[data-theme="dark"] .fs-concept                       { background: rgba(10, 9, 8, .44); }
html:root[data-theme="dark"] .fs-signature                     { background: rgba(20, 17, 16, .3); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before {
        display: block;
        background-color: #141110;
        background-image:
            radial-gradient(120% 70% at 50% 0%, rgba(240, 78, 62, .10) 0%, rgba(20, 17, 16, 0) 60%),
            url('../img/bg-image/line-art-footer.webp'),
        url('../img/bg-image/line-art-footer.webp');
        background-size: 100% 100%, 960px 960px, 960px 960px;
        background-repeat: no-repeat, repeat, repeat;
        background-position: center top, center top, center top;
    }
    html:root:not([data-theme="light"]) .about-section                    { background-color: rgba(20, 17, 16, .38); }
    html:root:not([data-theme="light"]) .about-section:nth-of-type(even)  { background-color: rgba(10, 9, 8, .46); }
    html:root:not([data-theme="light"]) .menu-section                     { background-color: transparent; }
    html:root:not([data-theme="light"]) .legal-section                    { background-color: rgba(20, 17, 16, .44); }
    html:root:not([data-theme="light"]) .fs-concept                       { background: rgba(10, 9, 8, .44); }
    html:root:not([data-theme="light"]) .fs-signature                     { background: rgba(20, 17, 16, .3); }
}

/* =============================================================================
   DARK MODE: WHITE LOGO, PATTERNED HEADER
   The white-lettered logo (flame-smoke-lockup-line-light.png) on the dark
   header, side menu and footer, with no cream plate behind it - this replaces
   "ONE LOGO IN DARK MODE" above. The header carries the same coral food
   doodles as the dark page backdrop, on solid charcoal.
   ========================================================================== */
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--light { display: none; }
:root[data-theme="dark"] .brand-lockup img.brand-lockup__img--dark  { display: block; }
:root[data-theme="dark"] .brand-lockup {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
:root[data-theme="dark"] #header-sticky,
:root[data-theme="dark"] #header-sticky.sticky {
    background-color: #1a1614;
    background-image:
        url('../img/bg-image/line-art-footer.webp'),
        url('../img/bg-image/line-art-footer.webp');
    background-size: 640px auto, 640px auto;
    background-repeat: repeat, repeat;
    background-position: center -43px, center -43px;
    background-attachment: scroll;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(240, 78, 62, .22);
}
:root[data-theme="dark"] #header-sticky.sticky { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--light { display: none; }
    :root:not([data-theme="light"]) .brand-lockup img.brand-lockup__img--dark  { display: block; }
    :root:not([data-theme="light"]) .brand-lockup {
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }
    :root:not([data-theme="light"]) #header-sticky,
    :root:not([data-theme="light"]) #header-sticky.sticky {
        background-color: #1a1614;
        background-image:
            url('../img/bg-image/line-art-footer.webp'),
            url('../img/bg-image/line-art-footer.webp');
        background-size: 640px auto, 640px auto;
        background-repeat: repeat, repeat;
        background-position: center -43px, center -43px;
        background-attachment: scroll;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(240, 78, 62, .22);
    }
    :root:not([data-theme="light"]) #header-sticky.sticky { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
}

/* =============================================================================
   DARK MODE: WHITE LOADING-SCREEN LOGO
   The loading screen carries both logos; light mode shows the black-lettered
   one, dark mode the white-lettered one with no cream plate behind it.
   ========================================================================== */
.preloader .preloader-logo--dark { display: none; }
:root[data-theme="dark"] .preloader .preloader-logo--light { display: none; }
:root[data-theme="dark"] .preloader .preloader-logo--dark  { display: block; }
:root[data-theme="dark"] .preloader .preloader-logo {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .preloader .preloader-logo--light { display: none; }
    :root:not([data-theme="light"]) .preloader .preloader-logo--dark  { display: block; }
    :root:not([data-theme="light"]) .preloader .preloader-logo {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }
}

/* Header at 992-1199px: the nav must keep its natural width instead of being flex-shrunk into wrapping onto a second row. */
@media (min-width: 992px) {
    #header-sticky .header-main .header-left { flex-shrink: 0; }
    #header-sticky .header-main .header-left .mean__menu-wrapper ul { white-space: nowrap; }
}

/* Footer: the Restaurant and Head Office blocks share one column - keep a clear gap between them. */
.single-footer-widget .footer-address-text + .widget-head { margin-top: 22px; }

/* ---- CURRENT BRANCH (header.php) -------------------------------------------
   "Current Branch : <branch name>" - the branch the customer is ordering from, on one line at the left of the top
   strip, inside the strip's own container; the search and social stay on the right. White on the strip, which is
   brand red - or near-black under a system dark theme - so it reads on both. Only if a name cannot fit does it
   wrap, never clipped. Below 992px the theme hides the strip; it comes back for this line only, with the search
   and social still hidden there as before. */
.fs-branch-now {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    color: #FFFFFF;
    line-height: 1.25;
}
.fs-branch-now__label {
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .85);
}
.fs-branch-now__name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}
@media (max-width: 991px) {
    .header-top.has-branch { display: block; }
    .header-top.has-branch .header-top-wrapper { min-height: 0; }
    .header-top.has-branch .header-top-wrapper > .top-right { display: none; }
    .fs-branch-now { padding: 7px 0; }
}
@media (max-width: 575px) {
    .fs-branch-now__label { font-size: 12px; }
    .fs-branch-now__name { font-size: 16px; }
}