/* ═══════════════════════════════════════════
   Charlie's Fried Chicken – Site Header
   Scoped under .cfc-site-header so the theme
   can't bleed in. Override-mode hides the
   theme's own header via the body class.
   ═══════════════════════════════════════════ */

:root {
    --cfc-h-red: #ff0006;
    --cfc-h-red-dark: #cc0005; /* pressed-state tint for burger / close button */
    --cfc-h-white: #ffffff;
    --cfc-h-cream: #f5f0eb;
    --cfc-h-black: #111111;
    --cfc-h-height-desktop: 96px;
    --cfc-h-height-mobile: 72px;
    --cfc-h-font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Hide the theme header when override is active (betheme + generic) ── */
body.cfc-header-active #Header_wrapper,
body.cfc-header-active #Header_creative,
body.cfc-header-active #Top_bar,
body.cfc-header-active #Action_bar,
body.cfc-header-active .mfn-header,
body.cfc-header-active .site-header,
body.cfc-header-active #masthead,
body.cfc-header-active .wp-block-template-part[data-area="header"] {
    display: none !important;
}

/* Push body content down so it isn't covered by the fixed header. The exact
   value is set by JS to match the rendered header's offsetHeight (which
   varies with the marquee on/off and logo sizes). These CSS values are just
   the FOUC-avoidance fallback before JS runs. */
body.cfc-header-active {
    padding-top: var(--cfc-h-height-mobile);
}
@media (min-width: 900px) {
    body.cfc-header-active {
        padding-top: var(--cfc-h-height-desktop);
    }
}

/* ─── Container ─── */
/* The drawer + backdrop are siblings of .cfc-site-header (rendered outside it),
   so they must be listed explicitly — otherwise they keep the browser default
   content-box and width:100% + horizontal padding overflows the viewport. */
.cfc-site-header,
.cfc-site-header *,
.cfc-site-header *::before,
.cfc-site-header *::after,
.cfc-site-header__drawer,
.cfc-site-header__drawer *,
.cfc-site-header__drawer *::before,
.cfc-site-header__drawer *::after,
.cfc-site-header__backdrop {
    box-sizing: border-box;
}

/* Logged-in admins get WP's admin bar, which pushes the whole document down
   with `html { margin-top }` — a fixed header ignores that and stays welded to
   the top of the viewport, so the body padding below ends up double-counting
   the offset and leaves a white gap under the header. Publish the offset as a
   variable: the header drops by it, and anything sizing itself against the
   viewport (the full-screen hero) subtracts it. */
body.admin-bar { --cfc-h-top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --cfc-h-top: 46px; }
}

/* Below 600px WP stops pinning the admin bar and lets it scroll away, so the
   header goes back to the top of the viewport where it belongs. */
@media screen and (max-width: 600px) {
    body.admin-bar { --cfc-h-top: 0px; }
}

.cfc-site-header {
    position: fixed;
    top: var(--cfc-h-top, 0px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--cfc-h-red);
    color: var(--cfc-h-white);
    font-family: var(--cfc-h-font-body);
    -webkit-font-smoothing: antialiased;
}

/* The header's rendered height is fractional (logo + countdown rows rarely add
   up to a whole pixel), but the body padding that clears it is set from
   offsetHeight, which is rounded to an integer. When the header ends at 133.5px
   and the content starts at 134px, that half-pixel of page background shows as
   a hairline under the header - invisible at 1x, a crisp 1px white line on a
   retina display. Paint a 1px skirt below the header in its own background
   colour (inherit picks up the ACF colour override) so the seam is covered
   whichever way the rounding falls. Costs no layout. */
.cfc-site-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background: inherit;
    pointer-events: none;
}

.cfc-site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 32px;
    min-height: var(--cfc-h-height-desktop);
}

/* ─── Actions cluster (account + cart + cta) ─── */
.cfc-site-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cfc-site-header__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cfc-h-white);
    color: var(--cfc-h-black);
    text-decoration: none;
    transition: transform 0.2s ease;
}
.cfc-site-header__account:hover {
    transform: scale(1.05);
}
.cfc-site-header__account svg {
    width: 20px;
    height: 20px;
}

.cfc-site-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* The icon is 30px and the link shrink-wrapped to it, leaving a 30px-tall
       hit area on the basket. Hit area only — nothing moves. */
    min-height: 44px;
    gap: 8px;
    color: var(--cfc-h-white);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease;
}
.cfc-site-header__cart:hover {
    opacity: 0.85;
    color: var(--cfc-h-white);
}
.cfc-site-header__cart-icon {
    position: relative;
    width: 30px;
    height: 30px;
}
.cfc-site-header__cart-icon svg {
    width: 100%;
    height: 100%;
}
.cfc-site-header__cart-count {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cfc-h-white);
    color: var(--cfc-h-red);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.cfc-site-header__cart-total {
    font-size: 15px;
    font-weight: 500;
}
/* Empty cart: no badge, no price. The count/total spans carry the `hidden`
   attribute until the ordering app reports items, and these rules make sure
   the class styles above can't out-specify it. The parent's 8px gap collapses
   on its own once the total is out of flow, so the icon stays put. */
.cfc-site-header__cart-count[hidden],
.cfc-site-header__cart-total[hidden] {
    display: none;
}

.cfc-site-header__cta {
    display: inline-flex;
    align-items: center;
    /* Measured 35px tall on mobile; the pill grows, the label stays centred. */
    min-height: 44px;
    padding: 10px 22px;
    background: var(--cfc-h-white);
    color: var(--cfc-h-black);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.cfc-site-header__cta:hover {
    background: var(--cfc-h-cream);
    color: var(--cfc-h-black);
    transform: translateY(-1px);
}

/* ─── Logo ─── */
.cfc-site-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* the mark is 42.6px wide at its 40px mobile height */
    text-decoration: none;
}
.cfc-site-header__logo img {
    height: 56px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* ─── Inline nav (desktop layouts that don't use the burger drawer) ─── */
.cfc-site-header__inline-nav {
    display: none;
    align-items: center;
    gap: 28px;
}
.cfc-site-header__inline-link {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.cfc-site-header__inline-link:hover {
    opacity: 0.75;
}

/* ─── Burger ─── */
.cfc-site-header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    /* 44px minimum — this is the only way into the mobile nav. The bars are
       sized by their own rules, so the box grows without moving the glyph. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.cfc-site-header__burger span {
    display: block;
    width: 28px;
    height: 2px;
    margin: 0 auto;
    background: var(--cfc-h-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
/* Neutralise Betheme's global button:hover / button[aria-expanded="true"]
   grey fill that bleeds onto our header button. Keep it flat on the red
   header, then show a slightly darker red only while actively pressed. */
.cfc-site-header__burger:hover,
.cfc-site-header__burger:focus,
.cfc-site-header__burger[aria-expanded="true"] {
    background: transparent;
}
.cfc-site-header__burger:active {
    background: var(--cfc-h-red-dark);
    border-radius: 8px;
}

/* ─── Nav drawer (shared desktop+mobile, slides in from left) ─── */
.cfc-site-header__drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* ~60% of the viewport on phones, capped so it doesn't get too wide on
       tablets/desktop. The grey backdrop (.cfc-site-header__backdrop) shows
       through the remaining sliver on the right. */
    width: min(420px, 60%);
    background: var(--cfc-h-red);
    color: var(--cfc-h-white);
    /* Tucked BEHIND the fixed header (z 9999) so the header bar — logo, the
       burger (which morphs to an X to close) and cart — stays on top and
       visible. Top padding clears the header height so the menu items sit
       below it rather than hidden behind it. */
    /* --cfc-h-height-actual is measured from the live header by syncPadding()
       and falls back to the static mobile height. The old hardcoded
       height-mobile + 64px assumed a 72px bar, so a large ACF logo (up to
       120px) or the countdown + marquee rows pushed the first link underneath
       the header. Bottom padding clears the iOS home indicator. */
    padding: calc(var(--cfc-h-height-actual, var(--cfc-h-height-mobile)) + 24px)
             max(32px, env(safe-area-inset-right, 0px))
             calc(32px + env(safe-area-inset-bottom, 0px))
             max(32px, env(safe-area-inset-left, 0px));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 9990;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}
@media (min-width: 900px) {
    .cfc-site-header__drawer {
        /* Clear the taller desktop header. */
        padding-top: calc(var(--cfc-h-height-desktop) + 64px);
        /* Full-width, centred drawer on desktop — mirrors the mobile layout
           per client request (was a slim 20% left column). Still slides in
           from the left to match the left-aligned burger; base side padding
           (32px) and the centred footer carry over from the shared rules. */
        left: 0;
        right: auto;
        width: 100%;
        transform: translateX(-100%);
    }
}
/* Mobile: full-width drawer (overrides the base min(420px, 60%)) so the menu
   covers the whole viewport — no backdrop sliver on the right. */
@media (max-width: 899px) {
    .cfc-site-header__drawer {
        width: 100%;
    }
}
.cfc-site-header__drawer[data-open="true"] {
    transform: translateX(0);
}
/* The drawer is tucked behind the header now, so the header's own burger
   (which morphs to an X) is the visible close control — this in-drawer close
   button would sit hidden behind the header, so hide it. */
.cfc-site-header__drawer-close {
    /* Was declared `display: none` and then `display: flex` in this same block,
       so the intended hide never took effect and the button rendered behind the
       header. The burger (which morphs to an X), the backdrop and Escape all
       close the drawer, so honour the original intent. */
    display: none;
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--cfc-h-white);
    line-height: 0;
}
.cfc-site-header__drawer-close svg {
    width: 26px;
    height: 26px;
    display: block;
}
/* Same treatment as the burger: drop Betheme's grey button:hover fill,
   show a slightly darker red only while the close button is pressed. */
.cfc-site-header__drawer-close:hover,
.cfc-site-header__drawer-close:focus {
    background: transparent;
}
.cfc-site-header__drawer-close:active {
    background: var(--cfc-h-red-dark);
    border-radius: 8px;
}
/* In-drawer logo copy. Hidden on every device: the fixed header bar stays on
   top of the open drawer (z-index 9999 vs the drawer's 9990), so its own
   centred logo shows through the drawer's top padding on both mobile and the
   full-width desktop drawer — a second copy here would double up. */
.cfc-site-header__drawer-logo {
    display: none;
    align-items: center;
    text-decoration: none;
    margin-bottom: 28px;
}
.cfc-site-header__drawer-logo img {
    height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.cfc-site-header__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cfc-site-header__drawer-link {
    display: block;
    padding: 14px 0;
    text-align: center;
    color: var(--cfc-h-white);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: opacity 0.2s ease;
}
.cfc-site-header__drawer-link:hover {
    opacity: 0.75;
    color: var(--cfc-h-white);
}

/* ─── Staggered entrance for the menu items ───
   Items start hidden + nudged left; each one fades/slides in with an
   increasing delay once the drawer gets data-open="true", so they cascade
   in after the panel has begun sliding. Replays on every open because the
   animation is bound to the open state. */
.cfc-site-header__drawer-list li {
    opacity: 0;
    transform: translateX(-18px);
}
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li {
    animation: cfcDrawerItemIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(1) { animation-delay: 0.18s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(2) { animation-delay: 0.27s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(3) { animation-delay: 0.36s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(4) { animation-delay: 0.45s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(5) { animation-delay: 0.54s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(6) { animation-delay: 0.63s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(7) { animation-delay: 0.72s; }
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li:nth-child(8) { animation-delay: 0.81s; }
@keyframes cfcDrawerItemIn {
    to { opacity: 1; transform: translateX(0); }
}

/* ─── Drawer footer: cart + Order CTA, pinned to the bottom ─── */
.cfc-site-header__drawer-footer {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    /* Fades up just after the menu items have cascaded in. */
    opacity: 0;
    transform: translateY(12px);
}
.cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-footer {
    animation: cfcDrawerFooterIn 0.5s ease 0.6s forwards;
}
@keyframes cfcDrawerFooterIn {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cfc-site-header__drawer-list li,
    .cfc-site-header__drawer-footer { opacity: 1; transform: none; }
    .cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-list li,
    .cfc-site-header__drawer[data-open="true"] .cfc-site-header__drawer-footer { animation: none; }
}

.cfc-site-header__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /* Below the header (z 9999) so the header bar stays bright on top while
       the rest of the page dims behind the open drawer. */
    z-index: 9989;
}
.cfc-site-header__backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Device visibility utilities ─── */
@media (max-width: 899px) {
    .cfc-hide-on-mobile { display: none !important; }
}
@media (min-width: 900px) {
    .cfc-hide-on-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════
   COUNTDOWN (next-slot timer row)
   Sits as a second header row above the marquee.
   ═══════════════════════════════════════════ */
.cfc-site-header__countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}
.cfc-site-header__countdown-label {
    font-weight: inherit;
    opacity: 1;
}
.cfc-site-header__countdown-value {
    font-variant-numeric: tabular-nums;
    font-weight: inherit;
    letter-spacing: inherit;
}
@media (max-width: 599px) {
    .cfc-site-header__countdown {
        font-size: 10px;
        padding: 6px 10px;
        gap: 3px;
    }
}

/* ═══════════════════════════════════════════
   MARQUEE (sliding banner below the header row)
   Two identical runs share a track; the track
   animates by -50% so the seam never shows.
   ═══════════════════════════════════════════ */
.cfc-site-header__marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}
.cfc-site-header__marquee-track {
    display: inline-flex;
    width: max-content;
    animation-name: cfc-marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.cfc-site-header__marquee-run {
    display: inline-block;
    padding-right: 40px; /* breathing room before the next run starts */
    flex-shrink: 0;
}
@keyframes cfc-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.cfc-site-header__marquee:hover .cfc-site-header__marquee-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .cfc-site-header__marquee-track { animation: none; }
}

/* ═══════════════════════════════════════════
   DESKTOP LAYOUTS (≥ 900px)
   Positions actions / logo / inline-nav / burger
   inside the flex/grid container per layout.
   ═══════════════════════════════════════════ */
@media (min-width: 900px) {

    /* Layout 1: Actions left · Logo centre · Burger right (default) */
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "actions logo burger";
    }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__actions { grid-area: actions; justify-self: start; }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__logo    { grid-area: logo;    justify-self: center; }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__burger  { grid-area: burger;  justify-self: end; }

    /* Layout 2: Logo left · Actions + Burger right */
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__logo    { margin-right: auto; }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__actions { order: 2; }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__burger  { order: 3; }

    /* Layout 3: Actions left · Logo centre · Inline nav right (no burger) */
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "actions logo nav";
    }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__actions    { grid-area: actions; justify-self: start; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__logo       { grid-area: logo;    justify-self: center; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__inline-nav { grid-area: nav;     justify-self: end; display: flex; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__burger     { display: none; }

    /* Layout 4: Logo left · Inline nav centre · Actions right (no burger) */
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo nav actions";
        gap: 32px;
    }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__logo       { grid-area: logo;    justify-self: start; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__inline-nav { grid-area: nav;     justify-self: center; display: flex; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__actions    { grid-area: actions; justify-self: end; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__burger     { display: none; }

    /* Layout 5: Burger left · Logo centre · Actions right (mirrors mobile) */
    [data-cfc-layout-desktop="burger-logo-actions"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    /* Pin explicit row+column: source order is actions(col3), logo(col2),
       burger(col1) — descending columns — so grid-row:1 keeps them on one row
       instead of auto-placement staggering them diagonally. */
    [data-cfc-layout-desktop="burger-logo-actions"] .cfc-site-header__burger  { grid-row: 1; grid-column: 1; justify-self: start; }
    [data-cfc-layout-desktop="burger-logo-actions"] .cfc-site-header__logo    { grid-row: 1; grid-column: 2; justify-self: center; }
    [data-cfc-layout-desktop="burger-logo-actions"] .cfc-site-header__actions { grid-row: 1; grid-column: 3; justify-self: end; }

    /* Optical balance for the burger/basket pair. Both boxes sit flush against
       the inner's 32px padding, but their glyphs don't fill them: the burger
       bars are 28px inside a 44px hit target (8px of air each side) while the
       basket SVG only carries ~3px, so the ink reads 40px from the left and
       35px from the right. Pull the basket in by the 5px difference so the two
       glyphs are equidistant from the viewport edges. Scoped to :last-child so
       it applies to the basket only when it is genuinely the outermost item —
       with the CTA button enabled that button is the edge, and a solid button's
       ink IS its box, so it should stay flush at 32px. */
    [data-cfc-layout-desktop="burger-logo-actions"] .cfc-site-header__cart:last-child {
        margin-right: 5px;
    }
}

/* ═══════════════════════════════════════════
   MOBILE LAYOUTS (< 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 899px) {
    .cfc-site-header__inner {
        /* Inset for the notch/Dynamic Island — in landscape on a notched
           iPhone the burger and cart otherwise sit underneath it. max() keeps
           the design padding when there is no inset to honour. */
        padding: 12px max(18px, env(safe-area-inset-right, 0px))
                 12px max(18px, env(safe-area-inset-left, 0px));
        min-height: var(--cfc-h-height-mobile);
        gap: 16px;
    }
    .cfc-site-header__logo img { height: 40px; }
    .cfc-site-header__inline-nav { display: none !important; }
    .cfc-site-header__actions { gap: 12px; }
    .cfc-site-header__cart        { font-size: 14px; }
    .cfc-site-header__cart-icon   { width: 28px; height: 28px; }
    .cfc-site-header__cart-total  { font-size: 14px; }
    .cfc-site-header__cta         { padding: 8px 14px; font-size: 12px; }

    /* Layout 1 (default): Logo left · Actions + Burger right */
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__logo    { margin-right: auto; }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__actions { order: 2; }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__burger  { order: 3; }

    /* Layout 2: Actions left · Logo centre · Burger right */
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__actions { justify-self: start; }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__logo    { justify-self: center; }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__burger  { justify-self: end; }

    /* Layout 3: Burger left · Logo centre · Actions right */
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    /* Pin explicit row+column so the burger/actions swap sides AND stay on one
       row. Source order is actions(col3), logo(col2), burger(col1) — descending
       columns — so without an explicit grid-row, auto-placement bumps each item
       to a new row, staggering them diagonally. grid-row: 1 forces one row. */
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__burger  { grid-row: 1; grid-column: 1; justify-self: start; }
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__logo    { grid-row: 1; grid-column: 2; justify-self: center; }
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__actions { grid-row: 1; grid-column: 3; justify-self: end; }

    /* Same optical correction as the desktop layout. Both boxes sit flush to
       the inner's 18px padding, but the burger's 28px bars leave 8px of air
       inside their 44px tap target while the basket SVG leaves ~3px, so the
       ink measured 26px from the left against 21px from the right. Pull the
       basket in by the 5px difference. :last-child so it only applies while the
       basket is genuinely the outermost item — a CTA button would be its own
       edge and should stay flush. */
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__cart:last-child {
        margin-right: 5px;
    }
}