/*!
 * GBZ420 header relayout v1 - black mark + menu band with the shop's own controls, separate
 * shallow grey search row. Written 2026-09-24 by the header-relayout task. Local copy only:
 * web root C:\Codex\GBZ420\site (gbz420.test), PrestaShop 8.2.8, theme warehouse.
 *
 * Reference: the owner's 2026-09-24 capture, corrected 2026-09-26 against two further owner
 * captures (651x91 and 819x87) - the GBZ420 mark at the left of a black band, markedly
 * overhanging it, the horizontal navigation on the same line, the cart / account / language
 * entries next to it, and directly below a shallow full-width grey row holding a white field of
 * the same fixed ~432 px width as before (the grey runs on to the right edge), thin black border,
 * rounded right end, a modest placeholder and the magnifier at its right end; the field starts
 * under the mark's tail.
 *
 * Revision 2026-09-27 (owner's follow-up captures). Four corrections, all presentation:
 *   1. the search row is the white page area at the band's bottom edge instead of a second black
 *      row: the black band stays the single 48 px navigation row the capture shows, and the row
 *      keeps its own place under the band, so it still scrolls away with the page (the band alone
 *      is sticky). The mark is 166 px in both scroll states, and the 29 px `.gbz-header-bar__plate`
 *      backs its tail once the band is stuck, so the mark never sits on the page content.
 *   2. the megamenu panel's content starts below the mark's tail (the category heading used to
 *      sit under it), with the mark itself untouched.
 *   3. the compact bar centres the mark on the bar, not on the column left between the menu
 *      button and the account / cart / language group.
 *   4. the field starts under the mark's tail instead of clear of it (inset 210 -> 113 px, i.e.
 *      ~125 px from the viewport at 1440), so the white field begins inside the projecting mark,
 *      which is what the capture shows.
 * Markup : templates/_partials/header.tpl, .../_variants/header-1.tpl (band),
 *          .../_variants/mobile-header-1.tpl (compact bar).
 * Script : assets/js/gbz-header-v1.js - sticky owner for both bands, the language selector's
 *          move between them, and the compact menu drawer's class contract.
 * Tokens : assets/css/gbz-tokens.css (loaded before this file from _partials/head.tpl).
 *
 * Rules for this file:
 *  1. Presentation and placement only. No catalogue, cart, account, language or search behaviour
 *     changes: the same hooks, widgets, ids and nodes are used, each one present exactly once.
 *  2. The mark is the shop's own transparent artwork
 *     (`assets/gbz-home-20260913/assets/reference/logo.png`, 1200x1200, alpha, white letterforms
 *     with a black outline). The band clips the empty part of the square canvas; no filter, no
 *     plate. The configured raster logo stays untouched and keeps serving emails, invoices and
 *     the og:image.
 *  3. From 1200 px the band carries the complete navigation plus the shop's cart, account and
 *     language entries. Below 1200 px the theme's compact black bar takes over (mark, menu
 *     button, account, cart, language) with the module's own list as the drawer, because the
 *     seven French entries cannot fit on one line with the controls at those widths - clipping
 *     them was a regression, not a design.
 */

/* ----------------------------------------------------------------------------------------------
 * 1. Band geometry and navigation. The band is built around the existing megamenu: the menu keeps
 *    its own box, dropdowns and rhythm, and gains only the room the mark and the controls need.
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-bar {
    --gbz-header-bar-height: 48px;
    --gbz-header-logo-space: 190px;
    position: relative;
    background-color: #000;
    color: #fff;
    z-index: 100;
}

body #header .gbz-header-bar__spacer {
    display: none;
    height: 0;
}

body #header .gbz-header-bar__spacer--active {
    display: block;
}

/* The retired white row keeps the hooks it has always carried (h_txt, displayHeaderLeft /
   displayHeaderRight, displayTop); with the cart, the account entry, the language selector and
   the search out of it, it renders nothing and must not leave a white strip. */
body #header .header-top.gbz-header-tools {
    padding-top: 0;
    padding-bottom: 0;
}

body #header .gbz-header-bar .ets_mm_megamenu,
body #header .gbz-header-bar .ets_mm_megamenu_content,
body #header .gbz-header-bar .ets_mm_megamenu_content_content {
    background-color: transparent;
}

body #header .gbz-header-bar .ets_mm_megamenu_content_content {
    display: flex;
    align-items: center;
    min-height: var(--gbz-header-bar-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--gbz-header-logo-space);
    padding-right: var(--gbz-header-controls-space, 220px);
}

/* 2026-09-26 owner correction, band height. The module prints `.ets_mm_megamenu.hook-default
   {padding: 30px 15px 0}` on the root and a 60 px floor on `.mm_menu_content_title`, which is
   why the black band measured 60 px live at 1265. The band now takes its height from the single
   token above: the root and the wrapper lose their own padding, the title loses its floor, and
   the entries keep a ~39 px link box inside the 48 px band. The title's own side padding drops
   from 20 px to 12 px per side so the wider mark leaves every entry readable on one line. */
body #header .gbz-header-bar .ets_mm_megamenu {
    margin-top: 0;
    padding: 0;
}

body #header .gbz-header-bar .ets_mm_megamenu_content {
    padding: 0;
}

body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menu_content_title {
    min-height: 0;
    padding: 0 12px;
}

/* 2026-09-26 owner correction, header container width. Two foreign caps centre the header above
   ~1270 px: the theme's own custom layer ends with `.container{max-width:1270px}` for every
   container, and gbz-shell-v1.css adds `body#product #header .container{max-width:1332px}` from
   1200 px on product pages. Both then centre the band, so the mark, the search row and the whole
   navigation slide right with the viewport (at a ~1422 px viewport the mark's box measured x 112
   and the field x 266 instead of 36 and 190). Only the containers the header bands own are
   released to the viewport here, so the reference geometry holds at 1200, 1265 and 1440 px;
   page content keeps whatever grid the theme and the shell give it. The product-page selectors
   carry the same two ids so they outrank the shell's own `body#product #header .container`.
   The megamenu is the one band whose container is not the hook wrapper: the module renders
   `.ets_mm_megamenu_content > .container > .ets_mm_megamenu_content_content`, and it is that
   inner container which carried the 1270 px cap (measured x 77.5, width 1270, at ~1422 px with
   the entries stuck at x 267.5 and the first label near x 285). Both it and the hook wrapper
   are released below. */
@media (min-width: 1200px) {
    body #header .gbz-header-bar .container.gbz-header-bar__container,
    body#product #header .gbz-header-bar .container.gbz-header-bar__container,
    body #header .gbz-header-bar .container.iqit-megamenu-container,
    body#product #header .gbz-header-bar .container.iqit-megamenu-container,
    body #header .gbz-header-bar .ets_mm_megamenu_content > .container,
    body#product #header .gbz-header-bar .ets_mm_megamenu_content > .container,
    body #header .gbz-header-search > .container,
    body#product #header .gbz-header-search > .container {
        max-width: none;
    }
}

/* The megamenu's styles are bundled into `assets/cache/theme-*.css`, which the front office emits
   after every GBZ layer, and that bundle sizes the entries with `.mm_menus_li>a{padding:10px
   15px}`. The band has to hold the mark, all seven French entries and the three controls on one
   line, so the entries keep a tighter side padding, the list is locked to a single non-wrapping
   row, and the decorative Font Awesome glyphs each label carries are dropped - the capture shows
   a text-only bar, and every entry keeps its own emoji or word. */
body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li {
    float: none;
}

body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.close_menu {
    display: none;
}

body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li > a {
    padding: 10px 5px;
    white-space: nowrap;
}

/* The glyphs sit inside `.mm_menu_content_title`, not directly under the link, so the selector has
   to be scoped to the link itself - the earlier `> a > i.fa` matched nothing and the labels stayed
   as wide as before, which is what pushed the last entry under the controls. */
body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li > a i.fa,
body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li > a img {
    display: none;
}

/* 2026-09-27: the panel's first line is the dropdown's own category heading ("Voir notre GBZ"),
   and the mark's box reaches 77 px below the band's top (section 2). The module opens the panel at
   y 43 with a 15 px top padding, so that heading landed at y 58 - under the mark's tail, which is
   the owner's "the dropdown title is hidden by the logo". 44 px puts it at y 87, ten pixels under
   the tail, and moves nothing else: the panel keeps its own column widths, and the drawer's list
   below 1200 px (section 7) keeps the module's rhythm because this rule is desktop-only. */
@media (min-width: 1200px) {
    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_columns_ul {
        padding-top: 44px;
    }
}

/* ----------------------------------------------------------------------------------------------
 * 2. The mark. The artwork inside `logo.png` occupies x 11-1182 / y 341-811 of its 1200x1200
 *    canvas, so the box clips that canvas instead of showing the square. At 166 px the ink is
 *    162 x 65 and its own top offset is 47 px, hence the -40 px pull: the mark then covers
 *    y 7-72 (41 px inside the 48 px band, 24 px inside the 29 px rail under it) and x 37-200,
 *    so its tail crosses the search field's left edge at 190 exactly like both captures. The
 *    box is one pixel wider than the ink on each side, which keeps the link clickable without
 *    covering the field's typing area.
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-bar .gbz-header-bar__container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}

body #header .gbz-header-bar__layers {
    position: absolute;
    top: 0;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    pointer-events: none;
}

/* GBZ420 sidecart_charter correction, 2026-09-24. The compiled bundle carries
   `.ets_mm_megamenu:hover{z-index:1000}`, so as soon as the pointer rested on the band (for
   example right after closing the cart drawer) the megamenu root painted over this control layer,
   whose tools sat at z-index 3, and the cart entry stopped receiving clicks while the pointer
   stayed on the band. The layer now sits at 1020: above the megamenu in both states, still below
   the cart drawer's own 1050. It keeps `pointer-events: none`, so only the mark and the three
   controls catch clicks and the menu keeps every one of its own hit areas and dropdowns. */
body #header .gbz-header-bar__layers {
    z-index: 1020;
}

body #header .gbz-header-bar #desktop_logo {
    position: absolute;
    top: 0;
    left: 24px;
    z-index: 3;
    width: 166px;
    height: 77px;
    overflow: hidden;
    pointer-events: auto;
}

body #header .gbz-header-bar #desktop_logo a {
    display: block;
}

body #header .gbz-header-bar #desktop_logo img {
    display: block;
    width: 166px;
    height: 166px;
    max-width: none;
    max-height: none;
    margin-top: -40px;
}

/* 2026-09-27: one mark size in both scroll states. The 2026-09-26 pass shrank the stuck mark to
   120 px because the search rail scrolled away underneath it and the tail hung 24 px over the page
   content; the rail is now part of the band's own black block (77 px tall: the 48 px menu row plus
   the 29 px search row), so the 166 px box of section 2 fits the block in both states and the
   owner's "the mark must not change size on scroll" holds without an overhang. */

/* ----------------------------------------------------------------------------------------------
 * 3. The shop's own controls on the band: cart, account, language. White on black, labels while
 *    the container has room (>=1400 px), icons only below that. The cart keeps its own theme plate
 *    and dropdown; the account entry and the language selector are the very widgets the shop
 *    renders, only re-tinted (the selector itself is moved here by the header script).
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-bar__tools {
    position: absolute;
    top: 0;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    left: auto;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    pointer-events: auto;
}

body #header .gbz-header-bar__tools #ps-shoppingcart-wrapper,
body #header .gbz-header-bar__tools #user_info {
    position: static;
}

body #header .gbz-header-bar__tools #user_info {
    margin-top: 0;
}

body #header .gbz-header-bar__tools .header-btn,
body #header .gbz-header-bar__tools #user_info a,
body #header .gbz-header-bar__tools #language_selector .expand-more,
body #header .gbz-header-bar__tools #language_selector a {
    color: #fff;
    text-decoration: none;
}

body #header .gbz-header-bar__tools .header-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 2px;
    background-color: transparent;
    border-radius: 0;
    color: #fff;
}

body #header .gbz-header-bar__tools .header-cart-btn .cart-products-count-btn {
    color: #fff;
}

/* The "Panier / Vide" wording is the one label the band never needs: the icon, the count and the
   dropdown carry the meaning, and the words cost the width the seven entries need. */
body #header .gbz-header-bar__tools .header-cart-btn .info-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body #header .gbz-header-bar__tools #user_info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 2px;
}

body #header .gbz-header-bar__tools #language_selector {
    display: inline-flex;
    align-items: center;
}

body #header .gbz-header-bar__tools #language_selector .expand-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

body #header .gbz-header-bar__tools #language_selector .lang-flag {
    width: 18px;
    height: 13px;
}

/* The theme prints the language name as a bare text node, so the label is dropped by sizing it to
   zero while the flag and the caret keep their own size: the band keeps the language, the capture
   keeps its text-only reading, and the seven French entries keep the room. */
body #header .gbz-header-bar__tools #language_selector .expand-more {
    font-size: 0;
}

body #header .gbz-header-bar__tools #language_selector .expand-more .fa {
    font-size: 13px;
}

/* Language menu. Bootstrap's Popper anchors it with an inline `inset: 0 auto auto 0`, i.e. to the
   trigger's LEFT edge, and the theme gives it `min-width: 100%` of that 54 px trigger: at 768 px the
   open list measured x 697-797, i.e. 29 px past the viewport, and the same would happen to the
   phone bar. Both bands therefore anchor it to the trigger's RIGHT edge (overriding the inline
   values, hence !important), give it room for the longest language name and keep a light plate
   with ink items so it reads on the black band. Only the two header bands are addressed; the same
   widget elsewhere keeps the theme's own placement. */
body #header .gbz-header-bar__tools #language_selector .dropdown-menu,
body #header #mobile-header-sticky .gbz-header-language .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 168px;
    max-width: calc(100vw - 24px);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

body #header .gbz-header-bar__tools #language_selector .dropdown-menu .dropdown-item,
body #header #mobile-header-sticky .gbz-header-language .dropdown-menu .dropdown-item {
    color: #111;
}

body #header .gbz-header-bar__tools #language_selector .dropdown-menu .dropdown-item:hover,
body #header .gbz-header-bar__tools #language_selector .dropdown-menu .dropdown-item:focus,
body #header #mobile-header-sticky .gbz-header-language .dropdown-menu .dropdown-item:hover,
body #header #mobile-header-sticky .gbz-header-language .dropdown-menu .dropdown-item:focus {
    background-color: var(--gbz-accent, #d4fa0a);
    color: #000;
}

body #header .gbz-header-bar__tools #user_info a:hover,
body #header .gbz-header-bar__tools #user_info a:focus,
body #header .gbz-header-bar__tools #language_selector .expand-more:hover,
body #header .gbz-header-bar__tools #language_selector .expand-more:focus {
    color: var(--gbz-accent, #d4fa0a);
}

/* ----------------------------------------------------------------------------------------------
 * 4. Search row. Revision 2026-09-27 (owner's capture #2): the row is no longer painted in the
 *    band's colour. It is the white page area at the band's own bottom edge, so the 48 px black
 *    band reads as the single black row the capture shows and the field sits immediately under it.
 *    The row stays exactly where it has always been - its own band under the black one, **not
 *    sticky** - and scrolls away with the page while only `.gbz-header-bar` is fixed. It keeps the
 *    live #search_widget as a plain white box of the fixed 432 px width with a thin black border,
 *    a modest 13 px placeholder and the magnifier inside its right end - not the theme's tall
 *    bordered control. The field now begins under the mark's tail: the inset is 113 px (plus the
 *    container's own 12 px gutter, i.e. ~125 px from the viewport at 1440) instead of the 210 px
 *    that cleared the mark's 24 + 166 = 190 px box, which is the overlap the capture shows. The
 *    artwork's black outline keeps the mark legible where it crosses the white field. z-index 99
 *    keeps the row under the band (100) while it slides away, and above the band's own backing
 *    plate (98, section 5) - so the field stays visible until the band has covered it naturally,
 *    and the plate never hides it mid-scroll. The compact row below 1200 px keeps its own rules in
 *    section 7.
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-search {
    position: relative;
    z-index: 99;
    background-color: var(--gbz-surface, #fff);
}

body #header .gbz-header-search .gbz-header-search__inner {
    display: flex;
    align-items: center;
    /* The 2 px under the field keep the row's 29 px depth; the 113 px inset starts the field
       inside the mark's own box (24 + 166 = 190) so it reads as starting under the tail. */
    padding: 0 0 2px 113px;
}

body #header .gbz-header-search #search_widget {
    width: 100%;
    max-width: 432px;
    margin-right: auto;
    margin-left: 0;
}

body #header .gbz-header-search #search_widget .input-group,
body #header .gbz-mobile-search #search-widget-mobile .input-group {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body #header .gbz-header-search #search_widget .form-search-control,
body #header .gbz-mobile-search #search-widget-mobile .form-search-control {
    height: 27px;
    min-height: 27px;
    padding: 0 34px 0 9px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 2px 10px 10px 2px;
    box-shadow: none;
    color: #1a1a1a;
    font-size: 13px;
    line-height: 25px;
}

/* 2026-09-27, owner's review of capture #2. The field's border keeps starting under the mark at
   x 124, but the mark's ink reaches x ~199 (box 35 + 166; the artwork's ink spans x 11-1182 of its
   1200 px canvas), so the shared 9 px text inset left the placeholder under the mark. Only the
   desktop field's own text inset moves, to 80 px: the text starts at x 205 at 1440, a few pixels
   clear of the ink. The magnifier's right inset (34 px), the height, the width, the border, the
   radius and the compact field below 1200 px are untouched - this selector carries
   `.gbz-header-search`, never `.gbz-mobile-search`, and the shared rule above keeps its 9 px. */
body #header .gbz-header-search #search_widget .form-search-control {
    padding-left: 80px;
}

body #header .gbz-header-search #search_widget .form-search-control::placeholder,
body #header .gbz-mobile-search #search-widget-mobile .form-search-control::placeholder {
    color: #6f6f6f;
    opacity: 1;
}

body #header .gbz-header-search #search_widget .search-btn,
body #header .gbz-mobile-search #search-widget-mobile .search-btn {
    width: 30px;
    min-width: 30px;
    padding: 0;
    background: none;
    border: 0;
    color: #000;
    font-size: 13px;
}

/* ----------------------------------------------------------------------------------------------
 * 5. Sticky bands. `gbz-header-v1.js` owns the toggles: it drops the megamenu module's own sticky
 *    class so a single owner per breakpoint moves, measures each band and switches its stuck class
 *    on once the page has scrolled past it, keeping the matching spacer at the band's height.
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-bar--stuck {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

/* The mark's tail reaches 77 px below the band's top (24 + 166 canvas, section 2) while the band
   itself is 48 px, so once the band is fixed the tail would otherwise sit on the page content -
   the defect the 2026-09-26 pass answered by shrinking the mark. Since the mark now keeps one
   size, the band carries this 29 px plate instead: shown only while the band is stuck (the row
   above it in the markup makes the sibling selector exact), painted under the search row (99) and
   over the page, and inert to pointer events. Back to the top, the plate is `display: none` and
   the tail is backed by the search row itself, which is the band's own colour. */
body #header .gbz-header-bar__plate {
    --gbz-header-bar-height: 48px;
    position: fixed;
    top: var(--gbz-header-bar-height);
    right: 0;
    left: 0;
    display: none;
    height: 29px;
    background-color: #000;
    z-index: 98;
    pointer-events: none;
}

body #header .gbz-header-bar--stuck + .gbz-header-bar__plate {
    display: block;
}

body #header .gbz-mobile-bar--stuck {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5001;
}

body #header .gbz-mobile-bar__spacer {
    display: none;
    height: 0;
}

body #header .gbz-mobile-bar__spacer--active {
    display: block;
}

/* The module's fixed band is neutralised in both directions: the script removes the class and the
   module's own rule is overridden here as a belt-and-braces for a late load order. */
body #header .gbz-header-bar .ets_mm_megamenu.sticky_enabled.scroll_heading {
    position: static;
    margin: 0;
    padding: 0;
    width: auto;
}

/* ----------------------------------------------------------------------------------------------
 * 6. Narrow desktop (1200-1399 px): the container is narrower, so the three controls drop their
 *    labels and keep a slightly smaller reserve, but the entries keep the readable 13 px the
 *    megamenu prints inline and the mark keeps the one size the captures show. The narrowed
 *    title padding above leaves the seven entries well inside the room the band has from 1200.
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1399px) {
    body #header .gbz-header-bar {
        --gbz-header-controls-space: 160px;
    }

    body #header .gbz-header-bar__tools {
        gap: 10px;
    }

    body #header .gbz-header-bar__tools #user_info a span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* The theme prints the language name as a bare text node, so the label is dropped by sizing it
       to zero and the flag and the caret are sized back up. */
    body #header .gbz-header-bar__tools #language_selector .expand-more {
        font-size: 0;
    }

    body #header .gbz-header-bar__tools #language_selector .expand-more .fa {
        font-size: 13px;
    }
}

/* ----------------------------------------------------------------------------------------------
 * 7. Compact bar (below 1200 px). The theme's own phone bar becomes the band for the whole range,
 *    because the seven French entries plus three controls cannot fit on one line in a 936 px
 *    container. It is a compact black bar - menu button, mark, account, cart, language - and the
 *    megamenu's own list is its drawer. The band itself is collapsed, never `display:none`, so
 *    that list keeps the ancestors its fixed positioning needs, and the drawer is driven by
 *    assets/js/gbz-header-v1.js with the module's own class contract (this store's front bundle
 *    does not ship the module's script).
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    body #header #desktop-header {
        display: block !important;
        min-height: 0;
        height: auto;
    }

    body #header #mobile-header {
        display: block !important;
    }

    body #header .header-top.gbz-header-tools,
    body #header .gbz-header-bar__container,
    body #header .gbz-header-search,
    body #header .gbz-header-bar .ybc-menu-toggle {
        display: none;
    }

    body #header .gbz-header-bar {
        height: 0;
        min-height: 0;
        background-color: transparent;
        z-index: auto;
    }

    body #header .gbz-header-bar .ets_mm_megamenu,
    body #header .gbz-header-bar .ets_mm_megamenu_content,
    body #header .gbz-header-bar .ets_mm_megamenu_content_content {
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body #header .gbz-header-bar .ets_mm_megamenu_content_content {
        display: block;
    }

    /* ---- 7a. The compact bar itself ---- */
    body #header #mobile-header-sticky {
        background-color: #000;
        color: #fff;
    }

    body #header #mobile-header-sticky .mobile-main-bar {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    body #header #mobile-header-sticky .row-mobile-header {
        min-height: 48px;
    }

    body #header #mobile-header-sticky .col-mobile-logo {
        overflow: hidden;
    }

    body #header #mobile-header-sticky .col-mobile-logo a {
        display: block;
    }

    body #header #mobile-header-sticky .col-mobile-logo img {
        display: block;
        width: 100px;
        height: 100px;
        max-width: none;
        max-height: none;
        margin: -27px auto 0;
    }

    body #header #mobile-header-sticky .m-nav-btn,
    body #header #mobile-header-sticky .m-nav-btn span,
    body #header #mobile-header-sticky .m-nav-btn i,
    body #header #mobile-header-sticky #mobile-cart-toogle,
    body #header #mobile-header-sticky .col-mobile-btn-account a,
    body #header #mobile-header-sticky .gbz-mobile-bar__language a,
    body #header #mobile-header-sticky .gbz-mobile-bar__language .expand-more {
        color: #fff;
        border-color: #fff;
    }

    body #header #mobile-header-sticky .cart-products-count-btn {
        background-color: var(--gbz-accent, #d4fa0a);
        color: #000;
    }

    /* The compact bar shows the flag only; the language itself is the dropdown's content. */
    body #header #mobile-header-sticky .gbz-mobile-bar__language .lang-flag {
        width: 18px;
        height: 13px;
    }

    body #header #mobile-header-sticky .gbz-mobile-bar__language .expand-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 4px;
        color: #fff;
    }

    body #header #mobile-header-sticky .gbz-mobile-bar__language .expand-more {
        font-size: 0;
    }

    body #header #mobile-header-sticky .gbz-mobile-bar__language .expand-more .fa {
        font-size: 13px;
    }

    /* ---- 7b. The drawer: the module's own list, revealed by the band's class contract ---- */
    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul {
        display: block;
        float: left;
        width: 100%;
        background-color: #fff;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        max-width: 280px;
        overflow: auto;
        z-index: 13000;
        opacity: .6;
        visibility: hidden;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transition: all .35s ease 0s;
        margin: 0;
        padding: 0;
    }

    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    /* The drawer has to win the page's own stacking order. The band cannot do it alone: the
       megamenu root carries `position:relative; z-index:2` from the module's stylesheet, so the
       list's `z-index:10000` is confined to that context and the page painted over the open
       drawer. While the drawer is open the header is lifted above the page (and the megamenu above
       the phone bar's own 5001), which keeps the rest of the site's layers untouched because the
       lift only exists in the `gbz-drawer-open` state. */
    body.gbz-drawer-open #header {
        z-index: 20000;
    }

    body.gbz-drawer-open #header .gbz-header-bar .ets_mm_megamenu {
        z-index: 12000;
    }

    /* The dimming belongs to the PAGE, never to the drawer, so the backdrop is the phone bar's own
       click overlay (a real element, not a pseudo inside the list's context). The megamenu root
       paints at 12000, the overlay at 11000: the drawer keeps its white plate and ink labels, the
       page behind it darkens, and a click outside the list lands on the overlay, which the
       document handler treats as "outside" and closes the drawer. */
    body.gbz-drawer-open #mobile_menu_click_overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .4);
        z-index: 11000;
    }

    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li {
        float: left;
        width: 100%;
        border-top: 1px solid #ddd;
    }

    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li > a {
        padding: 10px 15px;
        white-space: normal;
        color: #111 !important;
        background-color: transparent !important;
    }

    /* The module keeps the menu glyphs on phones (`show_icon_in_mobile` in its own markup). */
    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.mm_menus_li > a > i.fa {
        display: inline-block;
    }

    /* The close row is the drawer's own control: always visible, on the module's black plate. */
    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.close_menu {
        display: block;
        width: 100%;
        padding: 10px 0;
        background-color: #000;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
        border-top: 0;
    }

    body #header .gbz-header-bar .ets_mm_megamenu_content .ets_mm_megamenu_content_content .mm_menus_ul > li.close_menu .icon-bar {
        background-color: #fff;
    }

    /* ---- 7c. The search row: the same black plate as the bar since 2026-09-27, so the compact
       header is one colour from the bar down to the field and the mark sits on black like it does
       on the desktop block. The white field, its border, its 10 px inset and the 29 px depth are
       unchanged. ---- */
    body #header .gbz-mobile-search {
        background-color: #000;
    }

    body #header .gbz-mobile-search .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* The compact row keeps the field full width with a 10 px margin, the same 29 px rail and the
       same rounded right end the desktop row and the captures use. */
    body #header .gbz-mobile-search .gbz-mobile-search__inner {
        padding: 0 10px 2px;
    }

    body #header .gbz-mobile-search #search-widget-mobile {
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* ----------------------------------------------------------------------------------------------
 * 7d. 2026-09-27 - the mark centred on the compact bar. Measured at 390 px on 2026-09-27: with the
 *     theme's column-centred rule the artwork sat at x 96-196, i.e. 49 px left of the bar's own
 *     centre (195), because the menu column (44 px) and the account / cart / language group
 *     (143 px) do not have the same width. The mark is therefore taken out of the flow and centred
 *     on the bar itself, while the column stays in the flow so the group keeps the bar's right end.
 *     The artwork's ink is 97 x 40 px inside the 100 px box, so at the widest step its right edge
 *     lands at 245 in a 390 px bar - 1 px before the account button's box (246) and 15 px before
 *     that button's own glyph. The 88 px step below 401 px, the 72 px step below 366 px and the
 *     56 px step below 341 px keep the same clearance down to 320 px: at 320 the ink ends at 187
 *     while the account button's own glyph only starts at 190. Centring is therefore served from
 *     320 px up; below 320 px (no phone class this theme supports) 7a's column centring stays in
 *     charge.
 * ------------------------------------------------------------------------------------------- */

@media (min-width: 320px) and (max-width: 1199.98px) {
    body #header #mobile-header-sticky .row-mobile-header {
        position: relative;
    }

    body #header #mobile-header-sticky .col-mobile-logo {
        position: static;
        overflow: visible;
    }

    body #header #mobile-header-sticky .col-mobile-logo a {
        display: block;
    }

    body #header #mobile-header-sticky .col-mobile-logo img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        max-width: none;
        max-height: none;
        margin: 0;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
}

@media (min-width: 320px) and (max-width: 400px) {
    body #header #mobile-header-sticky .col-mobile-logo img {
        width: 88px;
        height: 88px;
    }
}

@media (min-width: 320px) and (max-width: 365px) {
    body #header #mobile-header-sticky .col-mobile-logo img {
        width: 72px;
        height: 72px;
    }
}

@media (min-width: 320px) and (max-width: 340px) {
    body #header #mobile-header-sticky .col-mobile-logo img {
        width: 56px;
        height: 56px;
    }
}

/* ----------------------------------------------------------------------------------------------
 * 8. 2026-09-27 - the GBZ Prime status the customer already has. The module's own badge
 *    (`modules/gbzverifonesubscriptions/views/templates/hook/vip_badge.tpl`, the
 *    `.gbzvs-vip-badge-anchor` node) is emitted on every page by its `displayNav2` / `displayTop`
 *    hooks, but the hook's own host - the theme's light utility bar - is `display:none` on this
 *    store, and the module's own mount script only ships on the product / cart / module
 *    controllers. `assets/js/gbz-header-v1.js` therefore moves that same node into the band - on
 *    the desktop band next to the account entry, and on the compact bar into the gap past the menu
 *    button. The move is the only change: the status itself stays the module's own truth
 *    (`buildHeaderVipBadgeData()` reads the subscription / grant rows), no rule below reads a
 *    subscription, a group or a cart, and for every other visitor the module emits no node at all,
 *    so these rules stay inert.
 *    Colours are the charter's: the single accent (#D4FA0A) as the plate, its ink on top, and white
 *    for the status word on the black band (white on lime would be the forbidden pair). Hover and
 *    focus take the plate to white, the dark-band pair of the charter's own buttons.
 * ------------------------------------------------------------------------------------------- */

body #header .gbz-header-bar__tools .gbzvs-vip-badge-anchor {
    display: inline-flex;
    align-items: center;
    /* The band's right end, next to the account entry: the tools row is a flex box, so the badge
       simply joins it after `#user_info` with the row's own 12 px gap. */
    margin-left: 0;
    flex: 0 0 auto;
}

body #header .gbz-header-bar__tools .gbzvs-vip-badge,
body #header #mobile-header-sticky .gbzvs-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gbz-white, #fff);
    text-decoration: none;
}

body #header .gbz-header-bar__tools .gbzvs-vip-badge__pill,
body #header #mobile-header-sticky .gbzvs-vip-badge__pill {
    padding: 4px 9px;
    background: var(--gbz-accent, #d4fa0a);
    border-radius: var(--gbz-radius-pill, 999px);
    box-shadow: none;
    color: var(--gbz-accent-ink, #000);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

body #header .gbz-header-bar__tools .gbzvs-vip-badge__status,
body #header #mobile-header-sticky .gbzvs-vip-badge__status {
    color: var(--gbz-white, #fff);
    font-size: 12px;
    font-weight: 600;
}

body #header .gbz-header-bar__tools .gbzvs-vip-badge:hover .gbzvs-vip-badge__pill,
body #header .gbz-header-bar__tools .gbzvs-vip-badge:focus .gbzvs-vip-badge__pill,
body #header .gbz-header-bar__tools .gbzvs-vip-badge:focus-visible .gbzvs-vip-badge__pill,
body #header #mobile-header-sticky .gbzvs-vip-badge:hover .gbzvs-vip-badge__pill,
body #header #mobile-header-sticky .gbzvs-vip-badge:focus .gbzvs-vip-badge__pill {
    background: var(--gbz-white, #fff);
    color: var(--gbz-black, #000);
}

/* The band prints its own labels only while the container has room (>= 1400 px, section 3), and
   the status word follows the same rule: below 1400 px the badge keeps its lime pill, whose colour
   already means the membership is active, and the link's own title carries the full wording. */
@media (max-width: 1399px) {
    body #header .gbz-header-bar__tools .gbzvs-vip-badge__status {
        display: none;
    }
}

/* Compact bar: the pill alone, in the gap between the menu button (x 46) and the centred mark
   (which starts at 133 or more at every width the rule serves - the mark's own clearance is in
   7d). The status word would collide with the mark, so it is hidden here; the link keeps its own
   title and text for assistive technology. Below 341 px the bar has no free room, so the chip
   stays out and the account page keeps carrying the status. */
@media (min-width: 341px) and (max-width: 1199.98px) {
    body #header #mobile-header-sticky .gbzvs-vip-badge-anchor {
        position: absolute;
        top: 50%;
        left: 52px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        /* The bar's row is a Bootstrap `.row`, whose `> *` rule brings `width: 100%` with it: an
           absolutely positioned chip has to opt out of it, or the transparent box would run under
           the account entry and take its clicks. */
        width: auto;
        max-width: none;
        margin: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

    body #header #mobile-header-sticky .gbzvs-vip-badge {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }

    body #header #mobile-header-sticky .gbzvs-vip-badge__pill {
        padding: 4px 8px;
        background: var(--gbz-accent, #d4fa0a);
        border-radius: var(--gbz-radius-pill, 999px);
        box-shadow: none;
        color: var(--gbz-accent-ink, #000);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1;
        text-transform: uppercase;
    }

    body #header #mobile-header-sticky .gbzvs-vip-badge__status {
        display: none;
    }
}

@media (max-width: 340px) {
    body #header #mobile-header-sticky .gbzvs-vip-badge-anchor {
        display: none;
    }
}