/* ==========================================================================
   BEREKET chrome, v2: the header pill, the footer and the phone tab bar.

   Design source: the v2 home page (docs/design/alternative/build_v2.py, Figma page
   "v2, modern (A + B + D)"), approved 2026-11-01. One header and one footer on every
   page: a floating pill over a dark band, turning to dark glass once the page scrolls
   past 80px (site.js toggles .is-glass on #bkHeader). Phones get a compact pill and a
   floating tab bar instead of the full nav.

   The ids site.js and the overlays hook into are the old header's and stay:
   #bkHeader #bkZoneChip #bkZoneName #bkSearchBtn #bkAccountBtn #bkCartBtn #bkCartBadge.
   ========================================================================== */

:root {
    --v2-ink: #0B0B0C;
    --v2-red: #E01B24;
    --v2-red-deep: #9E1018;
    --v2-red-soft: #FF5A52;
    --v2-ground: #F4F4F6;
    --v2-muted: #6E6E73;
    --v2-head-h: 96px;      /* 24 top + 72 pill */
}

/* ---- header ------------------------------------------------------------- */

.bk-header, .bk-header *, .v2-footer, .v2-footer *, .v2-tabbar, .v2-tabbar * { box-sizing: border-box; }

.bk-header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--v2-head-h);
    padding: 24px 40px 0;
    pointer-events: none;            /* the strip around the pill lets clicks through */
}

.v2-pill {
    pointer-events: auto;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 28px;
    color: #fff;
    transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}

.bk-header.is-glass .v2-pill {
    background: rgba(11, 11, 12, .82);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow: 0 16px 40px rgba(11, 11, 12, .28);
}

.v2-logo {
    font: 800 24px 'Inter Tight', Inter, sans-serif;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.v2-nav { display: flex; gap: 34px; }
.v2-nav a {
    font: 500 15px Inter, sans-serif;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s;
}
.v2-nav a:hover, .v2-nav a[aria-current="page"] { color: #fff; }

.v2-actions { display: flex; gap: 10px; align-items: center; }

.v2-round {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 0;
    background: rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
    transition: background .2s;
}
.v2-round:hover { background: rgba(255, 255, 255, .2); }
.v2-round svg { width: 20px; height: 20px; }

.bk-zone-chip {
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px Inter, sans-serif;
    cursor: pointer;
    transition: background .2s;
}
.bk-zone-chip:hover { background: rgba(255, 255, 255, .2); }
.bk-zone-chip svg { width: 18px; height: 18px; flex: none; }
.bk-zone-chip__chev { width: 14px !important; height: 14px !important; transition: transform .25s; }
.bk-zone-chip[aria-expanded="true"] .bk-zone-chip__chev { transform: rotate(180deg); }

.v2-basket {
    position: relative;
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--v2-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px Inter, sans-serif;
    cursor: pointer;
    transition: background .2s;
}
.v2-basket:hover { background: #C4161E; }
.v2-basket svg { width: 18px; height: 18px; }

/* The count the basket script keeps in step (site.js sets display block/none). */
#bkCartBadge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #fff;
    color: var(--v2-red);
    font: 700 12px/22px Inter, sans-serif;
    text-align: center;
}

/* Pages other than home open on a dark block under the header: paint the band the
   pill floats on. Home's hero carries margin-top: calc(-1 * --v2-head-h) itself. */
.bk-flat-top { position: relative; }
.bk-flat-top::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--v2-head-h));
    left: 0;
    right: 0;
    height: var(--v2-head-h);
    background: var(--v2-ink);
}

/* ---- footer -------------------------------------------------------------- */

/* The rounded top overlaps the last section by its own radius, so the corners show that
   section's colour (dark band, grey ground, white) instead of the body behind it. */
.v2-footer {
    position: relative;
    z-index: 1;
    margin-top: -40px;
    background: var(--v2-ink);
    color: #fff;
    padding: 72px 40px 40px;
    border-radius: 40px 40px 0 0;
}
.v2-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.v2-footer-brand { font: 800 40px 'Inter Tight', Inter, sans-serif; letter-spacing: -.035em; }
.v2-footer p { font: 400 15px/1.6 Inter, sans-serif; color: rgba(255, 255, 255, .6); margin: 14px 0 0; max-width: 360px; }
.v2-footer-col { display: flex; flex-direction: column; gap: 12px; font: 500 15px Inter, sans-serif; }
.v2-footer-col span { font: 600 13px Inter, sans-serif; color: rgba(255, 255, 255, .5); }
.v2-footer-col a { color: #fff; text-decoration: none; }
.v2-footer-col a:hover { color: var(--v2-red-soft); }
.v2-footer-bar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding: 18px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font: 400 13px Inter, sans-serif;
    color: rgba(255, 255, 255, .55);
}
.v2-footer-legal { display: flex; gap: 18px; }
.v2-footer-legal a { color: inherit; text-decoration: none; }
.v2-footer-legal a:hover { color: #fff; }

/* ---- phone tab bar (phones only) ------------------------------------------ */

.v2-tabbar { display: none; }

/* ---- phones and small tablets ---------------------------------------------- */

@media (max-width: 899px) {
    :root { --v2-head-h: 70px; }    /* 14 top + 56 pill */

    .bk-header { padding: 14px 16px 0; }
    .v2-pill { height: 56px; padding: 0 8px 0 18px; }
    .v2-logo { font-size: 19px; }
    .v2-nav { display: none; }
    .v2-actions { gap: 6px; }
    .v2-round { width: 40px; height: 40px; }
    .v2-round svg { width: 18px; height: 18px; }
    .bk-zone-chip { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .bk-zone-chip__name, .bk-zone-chip__chev { display: none !important; }

    /* The zone and account panels hang off the pill's right edge, not their button's:
       the buttons shrink to icons near the middle, and a 300px panel right aligned to
       one ran off the left of the screen. The overrides beat the template's inline style. */
    .v2-pill { position: relative; }
    .v2-actions > div { position: static !important; }
    .v2-pill [data-bk="zone"], .v2-pill [data-bk="account"] {
        top: 64px !important;
        right: 0 !important;
        max-width: 100%;
    }
    .v2-basket { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .v2-basket-label { display: none; }
    #bkCartBadge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        font-size: 11px;
        line-height: 19px;
    }

    .v2-footer { margin-top: -32px; padding: 48px 16px 120px; border-radius: 32px 32px 0 0; }
    .v2-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    .v2-footer-grid > :first-child { grid-column: 1 / -1; }
    .v2-footer-brand { font-size: 32px; }
    .v2-footer-bar { flex-direction: column; border-radius: 22px; margin-top: 36px; }

    .v2-tabbar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 16px;
        z-index: 65;
        height: 68px;
        border-radius: 34px;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        box-shadow: 0 16px 40px rgba(11, 11, 12, .22);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
    }
    .v2-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        border: 0;
        background: none;
        font: 600 11px Inter, sans-serif;
        color: var(--v2-muted);
        text-decoration: none;
        cursor: pointer;
    }
    .v2-tab svg { width: 21px; height: 21px; }
    .v2-tab[aria-current="page"] { color: var(--v2-red); }

    /* The product page pins its own buy bar to the bottom of the screen; that is the
       page's action, so the tab bar steps aside rather than sitting on top of it. */
    body:has(.v2-buybar:not([hidden])) .v2-tabbar { display: none; }
}

/* ---- focus, hidden ----------------------------------------------------------- */

.bk-header a:focus-visible,
.bk-header button:focus-visible,
.v2-tabbar a:focus-visible,
.v2-tabbar button:focus-visible {
    outline: 2px solid var(--v2-red-soft);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Overlay markup carries inline display values; [hidden] must beat them. */
[hidden] { display: none !important; }