/* ============================================================
   STOREFRONT HEADER — premium white-label (matches the validated mockup).
   Namespace: rc-hdr* / rc-lang*.
   Loaded AFTER catalog.css so it wins at equal specificity.
   Keeps functional hooks: .cat-search (form), .cat-suggest,
   [data-cart-badge], .hz-lang-switch__btn, #cat-burger /
   #cat-mobile-menu / #cat-mobile-overlay.
   ============================================================ */

:root {
    --rc-gold: #b1863b;
    --rc-gold-strong: #a2762c;
    --rc-hdr-max: 1440px;
}

/* ---------- Shell ---------- */
.rc-hdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.rc-hdr__bar {
    display: grid;
    align-items: center;
    gap: 14px 24px;
    max-width: var(--rc-hdr-max);
    margin: 0 auto;
    padding: 14px var(--gutter);
    grid-template-columns: auto 1fr minmax(240px, 340px) auto auto;
    grid-template-areas: "brand nav search lang actions";
}

/* ---------- Brand (wordmark image, white-label) ---------- */
.rc-hdr__brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-width: 0;
}
.rc-hdr__brand-img {
    /* Wide wordmark asset: fill the AVAILABLE HEIGHT of the brand zone and let
       the width follow the intrinsic ratio (no square box that would shrink the
       drawing). Height matches the current header line so the header height is
       unchanged; max-width bounds it to the space already reserved left of the
       nav so other components are not pushed. mix-blend-mode blends the light
       JPEG matte into the paper header background (no asset transformation). */
    height: 46px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}
/* Desktop shows the full/horizontal logo; mobile shows the compact icon. */
.rc-hdr__brand-img--compact { display: none; }
.rc-hdr__brand-word {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ---------- Desktop navigation (text, gold underline active) ---------- */
.rc-hdr__nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 40px);
    min-width: 0;
}
.rc-hdr__nav a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    padding: 6px 0;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.rc-hdr__nav a:hover { color: var(--rc-gold-strong); }
.rc-hdr__nav a[aria-current="page"] { font-weight: 600; }
.rc-hdr__nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--rc-gold);
    border-radius: 2px;
}

/* ---------- Search (single rounded component, loupe left) ---------- */
.rc-hdr__search-wrap { grid-area: search; position: relative; min-width: 0; }
.rc-hdr__search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 10px 18px;
    box-shadow: 0 1px 2px rgba(23, 18, 15, 0.04);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rc-hdr__search:focus-within {
    border-color: rgba(23, 18, 15, 0.30);
    box-shadow: 0 3px 14px rgba(23, 18, 15, 0.07);
}
.rc-hdr__search-ico {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ink-soft);
}
.rc-hdr__search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 14.5px;
    color: var(--ink);
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}
.rc-hdr__search input[type="search"]::-webkit-search-cancel-button { display: none; }
.rc-hdr__search input::placeholder { color: var(--ink-soft); opacity: 0.9; }
.rc-hdr__search-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}
.rc-hdr__search-clear:hover { background: var(--bg); color: var(--ink); }
/* No visible submit button in the mockup — Enter submits the form.
   Keep the button accessible (screen readers) but visually removed. */
.rc-hdr__search-go {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
    background: transparent;
}

/* Autocomplete panel — reposition the shared .cat-suggest under the field */
.rc-hdr .cat-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    width: auto;
    z-index: 70;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(23, 18, 15, 0.14);
    overflow: hidden;
}

/* ---------- Language (compact FR ˅ dropdown) ---------- */
.rc-hdr__lang { grid-area: lang; justify-self: end; }
.rc-lang { position: relative; }
.rc-lang__toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    white-space: nowrap;
    transition: background var(--t-fast);
}
.rc-lang__toggle:hover { background: var(--bg); }
.rc-lang__toggle::-webkit-details-marker { display: none; }
.rc-lang__chev { color: var(--ink-soft); transition: transform var(--t-fast); }
.rc-lang[open] .rc-lang__chev { transform: rotate(180deg); }
.rc-lang__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 92px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(23, 18, 15, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rc-lang__opt {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.rc-lang__opt:hover { background: var(--bg); color: var(--ink); }
.rc-lang__opt.is-active { color: var(--ink); font-weight: 700; }

/* ---------- Cart (bag icon + gold badge) ---------- */
.rc-hdr__actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
}
.rc-hdr__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.rc-hdr__cart:hover { background: var(--bg); color: var(--ink); }
.rc-hdr__cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--rc-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--paper);
}
.rc-hdr__cart-badge[hidden] { display: none; }

/* ---------- Burger (mobile only) ---------- */
.rc-hdr__burger {
    grid-area: burger;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.rc-hdr__burger-box { position: relative; width: 22px; height: 16px; display: inline-block; }
.rc-hdr__burger-line {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.18s, top 0.28s;
}
.rc-hdr__burger-line:nth-child(1) { top: 0; }
.rc-hdr__burger-line:nth-child(2) { top: 7px; }
.rc-hdr__burger-line:nth-child(3) { top: 14px; }
.rc-hdr__burger[aria-expanded="true"] .rc-hdr__burger-line:nth-child(1) { top: 7px; transform: rotate(45deg); }
.rc-hdr__burger[aria-expanded="true"] .rc-hdr__burger-line:nth-child(2) { opacity: 0; }
.rc-hdr__burger[aria-expanded="true"] .rc-hdr__burger-line:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Mobile panel (hidden on desktop) ---------- */
.rc-hdr-overlay { display: none; }
.rc-hdr-panel { display: none; }

/* ============================================================
   RESPONSIVE — mobile / tablet (< 1024px)
   ============================================================ */
@media (max-width: 1023.98px) {
    .rc-hdr__bar {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "burger brand   actions"
            "search search  lang";
        gap: 12px 10px;
        padding: 12px var(--gutter);
    }
    .rc-hdr__burger { display: inline-flex; }
    .rc-hdr__brand { justify-self: center; }
    .rc-hdr__brand-img { height: 42px; width: auto; max-width: 200px; }
    /* Mobile uses the SAME text/wordmark logo as desktop (not the compact). */
    .rc-hdr__brand-img--full { display: block; }
    .rc-hdr__brand-img--compact { display: none; }
    .rc-hdr__brand-word { font-size: 20px; }
    .rc-hdr__nav { display: none; }
    .rc-hdr__lang { justify-self: end; }
    .rc-hdr__actions { justify-self: end; }
    .rc-hdr__cart { width: 42px; height: 42px; }
    .rc-hdr__search { padding: 11px 16px; }

    /* Menu open → search spans full width, inline language hides
       (language then lives in the panel footer, per the mockup). */
    .rc-menu-open .rc-hdr__bar {
        grid-template-areas:
            "burger brand   actions"
            "search search  search";
    }
    .rc-menu-open .rc-hdr__lang { display: none; }

    .rc-hdr-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 38;
        background: rgba(23, 18, 15, 0.30);
        opacity: 0;
        transition: opacity 0.26s ease;
    }
    .rc-hdr-overlay.is-visible { opacity: 1; }

    .rc-hdr-panel {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--hz-navbar-h, 128px);
        z-index: 39;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        box-shadow: 0 24px 44px rgba(23, 18, 15, 0.16);
        max-height: calc(100vh - var(--hz-navbar-h, 128px));
        overflow-y: auto;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.26s ease, opacity 0.26s ease;
    }
    .rc-hdr-panel.is-open { transform: none; opacity: 1; pointer-events: auto; }

    .rc-hdr-panel__nav { display: flex; flex-direction: column; padding: 4px var(--gutter); }
    .rc-hdr-panel__nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 17px 2px;
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        border-bottom: 1px solid var(--rule);
    }
    .rc-hdr-panel__nav a:last-child { border-bottom: 0; }
    .rc-hdr-panel__nav a[aria-current="page"] { color: var(--rc-gold-strong); }
    .rc-hdr-panel__chev { flex: 0 0 auto; color: var(--ink-soft); }
    .rc-hdr-panel__nav a[aria-current="page"] .rc-hdr-panel__chev { color: var(--rc-gold-strong); }

    .rc-hdr-panel__foot { border-top: 1px solid var(--rule); padding: 2px var(--gutter) 14px; }
    .rc-hdr-panel__row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 2px;
    }
    .rc-hdr-panel__row-ico { flex: 0 0 auto; display: inline-flex; color: var(--ink); }
    .rc-hdr-panel__row-label { font-size: 16px; font-weight: 600; color: var(--ink); }
    .rc-hdr-panel__row--lang .rc-hdr-panel__row-value { margin-left: auto; }
    .rc-hdr-panel__row--lang .rc-lang__toggle { font-size: 15px; }
    .rc-hdr-panel__row--lang .rc-lang__menu { right: 0; }
}

/* Very small phones (≤380px) — keep everything on screen, no overflow. */
@media (max-width: 380px) {
    .rc-hdr__bar { gap: 10px 8px; padding: 10px var(--gutter); }
    .rc-hdr__brand-img { height: 40px; width: auto; max-width: 158px; }
    .rc-hdr__cart { width: 40px; height: 40px; }
    .rc-hdr__search { padding: 10px 14px; }
    .rc-hdr__search input[type="search"] { font-size: 14px; }
}

/* Desktop safety — never show the mobile panel/burger ≥1024px. */
@media (min-width: 1024px) {
    .rc-hdr__burger { display: none !important; }
    .rc-hdr-panel,
    .rc-hdr-overlay { display: none !important; }
}