/* ==========================================================================
   Gemsen_MegaMenu — dark theme
   Generated from the approved preview, so the storefront matches it exactly.
   Sections below the design block handle Porto integration only.
   ========================================================================== */

.gm-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- theme tokens ---------- */
:root{
  --gm-accent:#8A9099;
  --gm-page:#F4F5F7; --gm-bar:#13161B; --gm-bar-hover:#1C212A; --gm-ink:#0B0D10;
  --gm-text:#F3F5F8; --gm-muted:#99A1AD; --gm-line:rgba(255,255,255,.09);
  --gm-panel:#fff; --gm-panel-ink:#15181D; --gm-panel-muted:#5D6672; --gm-panel-line:#E6E9ED; --gm-tile:#fff; --gm-tile-line:#E0E4E9;
}

/* ---------- utility ---------- */

/* ---------- brand row ---------- */

/* ---------- nav ---------- */
.gm-nav{position:relative;background:var(--gm-bar);border-bottom:1px solid var(--gm-line)}
.gm-nav{display:flex;align-items:stretch;padding:0 30px}
.gm-nav__rail{display:flex;margin:0;padding:0;list-style:none;flex:1 1 auto}
.gm-nav__item{position:static;display:flex;align-items:stretch}
.gm-nav__link{display:inline-flex;align-items:center;gap:9px;padding:13px 8px 13px 14px;
  color:var(--gm-text);font-size:12.5px;font-weight:600;letter-spacing:.015em;text-decoration:none;
  border-bottom:2px solid transparent}
.gm-nav__icon{color:var(--gm-accent);flex:none}
.gm-nav__toggle{display:inline-flex;align-items:center;padding:0 12px 0 4px;background:none;border:0;
  color:var(--gm-muted);cursor:pointer;border-bottom:2px solid transparent}
.gm-nav__chevron{transition:transform .18s ease}
.gm-nav__item:hover .gm-nav__link,.gm-nav__item.is-open .gm-nav__link,
.gm-nav__item:hover .gm-nav__toggle,.gm-nav__item.is-open .gm-nav__toggle{
  background:var(--gm-bar-hover);border-bottom-color:var(--gm-accent)}
.gm-nav__item.is-open .gm-nav__chevron{transform:rotate(180deg)}
.gm-nav__tail{display:flex;align-items:stretch}
.gm-nav__tail a{display:inline-flex;align-items:center;padding:13px 14px;color:var(--gm-muted);
  font-size:12.5px;font-weight:600;text-decoration:none}
.gm-nav__tail a:hover{color:var(--gm-text)}
.gm-nav a:focus-visible,.gm-nav button:focus-visible{outline:2px solid #7FB2FF;outline-offset:-2px}

/* ---------- panel ---------- */
.gm-panel{position:absolute;z-index:60;top:100%;left:20px;right:20px;background:var(--gm-panel);
  border-top:3px solid var(--gm-accent);border-radius:0 0 5px 5px;
  box-shadow:0 26px 54px -14px rgba(12,16,22,.3),0 2px 6px rgba(12,16,22,.06)}
.gm-panel[hidden]{display:none}
.gm-panel__inner{max-width:1360px;margin:0 auto;padding:22px 28px 26px}
.gm-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:13px;border-bottom:1px solid var(--gm-panel-line)}
.gm-panel__title{margin:0;font-size:17px;font-weight:700;letter-spacing:.01em;color:var(--gm-panel-ink)}
.gm-panel__all{font-size:12.5px;font-weight:600;color:var(--gm-panel-ink);text-decoration:none;
  border-bottom:2px solid var(--gm-accent);padding-bottom:1px}
.gm-panel__
.gm-panel__columns{display:grid;grid-template-columns:repeat(var(--gm-cols,4),minmax(0,1fr));gap:22px 26px}
.gm-col{display:flex;flex-direction:column;gap:19px;min-width:0}
.gm-group__title{margin:0 0 9px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gm-panel-ink)}
.gm-group__title a{color:inherit;text-decoration:none}
.gm-group__title a:hover{color:var(--gm-panel-ink)}
.gm-group__links{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.gm-group__links a{font-size:13px;line-height:1.45;color:var(--gm-panel-ink);text-decoration:none;opacity:.86}
.gm-group__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--gm-accent)}

/* ---------- rail ---------- */
.gm-rail{border-left:1px solid var(--gm-panel-line);padding-left:26px;min-width:0}
.gm-rail__title{margin:0 0 11px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gm-panel-muted)}
.gm-rail__brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 18px;padding:0;list-style:none}
.gm-brand{display:flex;align-items:center;justify-content:center;min-height:36px;padding:5px 7px;
  font-size:11.5px;font-weight:600;text-align:center;color:var(--gm-panel-ink);text-decoration:none;
  background:var(--gm-tile);border:1px solid var(--gm-tile-line);border-radius:3px}
.gm-brand:hover{border-color:var(--gm-accent);box-shadow:inset 0 0 0 1px var(--gm-accent)}
.gm-rail__promo{display:block;background:#101318;color:#F3F5F8;border-radius:4px;padding:15px 16px;text-decoration:none;
  border-top:3px solid var(--gm-accent)}
.gm-rail__promo-kicker{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#98A1AE;margin-bottom:5px}
.gm-rail__promo strong{display:block;font-size:14px;margin-bottom:5px}
.gm-rail__promo-copy{display:block;font-size:12px;line-height:1.45;color:#B6BDC7;margin-bottom:9px}
.gm-rail__promo-cta{font-size:12px;font-weight:700;color:#fff}
.gm-scrim{position:fixed;inset:0;z-index:50;background:rgba(12,16,22,.3)}
.gm-scrim[hidden]{display:none}

/* ---------- switcher + stage ---------- */

/* ==========================================================================
   Panel layout — Bioworld-style columns
   Roomier type, wider gutters, and the panel scrolls when a market has more
   links than fit the viewport instead of running off the bottom.
   ========================================================================== */

.gm-panel { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
.gm-panel__inner { max-width: none; padding: 26px 34px 30px; }
.gm-panel__body {
    display: block;          /* no side rail: columns get the full width */
    padding-top: 22px;
}
.gm-panel__columns {
    display: grid !important;
    grid-template-columns: repeat(var(--gm-cols, 5), minmax(0, 1fr)) !important;
    gap: 28px 36px;
}
.gm-col { gap: 26px; }

/* headings: plain sentence case, larger, dark — like the A-D / E-H row */
.gm-panel .gm-group__title,
.gm-panel .gm-group__title a {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--gm-panel-ink) !important;
    line-height: 1.3;
}

.gm-panel .gm-group__title { margin: 0 0 12px; }

/* links: more air between rows, full-strength colour */
.gm-panel .gm-group__links { gap: 0; }

.gm-panel .gm-group__links a {
    display: block;
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 1;
}

/* a quieter scrollbar than the browser default */
.gm-panel::-webkit-scrollbar { width: 10px; }
.gm-panel::-webkit-scrollbar-thumb { background: #CED4DB; border-radius: 6px; }
.gm-panel::-webkit-scrollbar-track { background: #F2F4F7; }

/* brand rail: a strip beneath the columns, not a sidebar */
.gm-panel .gm-rail {
    margin-top: 26px;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--gm-panel-line);
}

.gm-panel .gm-rail__brands {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    margin-bottom: 0;
}

.gm-panel .gm-rail__promo { margin-top: 16px; }

/* -- column count, set server-side by the block -- */
.gm-panel__columns[data-gm-columns="1"] { --gm-cols: 1; }
.gm-panel__columns[data-gm-columns="2"] { --gm-cols: 2; }
.gm-panel__columns[data-gm-columns="3"] { --gm-cols: 3; }
.gm-panel__columns[data-gm-columns="4"] { --gm-cols: 4; }
.gm-panel__columns[data-gm-columns="5"] { --gm-cols: 5; }
.gm-panel__columns[data-gm-columns="6"] { --gm-cols: 6; }


.gm-panel .gm-group__title,
.gm-panel .gm-group__title a { font-weight: 700 !important; }

/* ==========================================================================
   Tychons/porto2 integration
   Everything below exists because of the theme, not the design.
   ========================================================================== */

/* -- 1. Magento styles every <button> white with a border, radius and shadow.
      The chevron toggle and burger are buttons for accessibility, so the
      chrome is stripped explicitly. -------------------------------------- */

.gm-nav button.gm-nav__toggle,
.gm-nav button.gm-nav__toggle:hover,
.gm-nav button.gm-nav__toggle:active,
.gm-nav button.gm-nav__toggle:focus,
.gm-nav button.gm-nav__burger,
.gm-nav button.gm-nav__burger:hover,
.gm-nav button.gm-nav__burger:active,
.gm-nav button.gm-nav__burger:focus {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    color: var(--gm-muted) !important;
}

.gm-nav button.gm-nav__toggle {
    padding: 0 12px 0 4px !important;
    border-bottom: 2px solid transparent !important;
}

/* -- 2. Porto's custom.css sets link colours inside the header, so every
      colour the nav and panel use is pinned here. ------------------------ */

.gm-nav .gm-nav__link,
.gm-nav .gm-nav__link:visited { color: var(--gm-text) !important; }
.gm-nav .gm-nav__tail a,
.gm-nav .gm-nav__tail a:visited,
.gm-nav .gm-nav__link--plain,
.gm-nav .gm-nav__link--plain:visited { color: var(--gm-muted) !important; }
.gm-nav .gm-nav__tail a:hover,
.gm-nav .gm-nav__link--plain:hover { color: var(--gm-text) !important; }

.gm-nav .gm-nav__item:hover .gm-nav__link,
.gm-nav .gm-nav__item.is-open .gm-nav__link,
.gm-nav .gm-nav__item:hover button.gm-nav__toggle,
.gm-nav .gm-nav__item.is-open button.gm-nav__toggle {
    background: var(--gm-bar-hover) !important;
    border-bottom-color: var(--gm-accent) !important;
    color: var(--gm-text) !important;
}

.gm-panel .gm-panel__title { color: var(--gm-panel-ink) !important; }
.gm-panel .gm-panel__all,
.gm-panel .gm-panel__all:visited,
.gm-panel .gm-panel__all:hover { color: var(--gm-panel-ink) !important; }
.gm-panel .gm-group__title a,
.gm-panel .gm-group__title a:visited { color: var(--gm-panel-muted) !important; }
.gm-panel .gm-group__title a:hover { color: var(--gm-panel-ink) !important; }
.gm-panel .gm-group__links a,
.gm-panel .gm-group__links a:visited { color: var(--gm-panel-ink) !important; }
.gm-panel .gm-brand,
.gm-panel .gm-brand:visited { color: var(--gm-panel-ink) !important; }
.gm-panel .gm-rail__promo a { color: #fff !important; }

/* -- 3. Focus: beat Porto rather than tie with it. --------------------- */

.gm-nav a:focus,
.gm-nav button:focus,
.gm-panel a:focus { outline: none; }

.gm-nav a:focus-visible,
.gm-nav button:focus-visible,
.gm-panel a:focus-visible {
    outline: 2px solid #7FB2FF !important;
    outline-offset: -2px;
}

/* -- 4. Placement. page.top renders before .page-header, so the nav is
      flipped below it. The header keeps z-index 10 (above the hero slider);
      the panel sits above the header at 9010. -------------------------- */

.page-wrapper { display: flex; flex-direction: column; }

/* page.top renders its children directly into .page-wrapper with no wrapper
   element, so .gm-nav must be ordered by name. Anything without an explicit
   order defaults to 0 and would jump above the header. */
.page-wrapper > .porto-block-html-top { order: 0; }
.page-wrapper > .page-header { order: 1; position: relative; z-index: 10; }
.page-wrapper > .gm-nav { order: 2; }
.page-wrapper > .page-top,
.page-wrapper > .top-container { order: 2; }
.page-wrapper > .page-main,
.page-wrapper > #maincontent,
.page-wrapper > .columns,
.page-wrapper > .page-bottom,
.page-wrapper > .page-footer,
.page-wrapper > footer { order: 3; }

.page-wrapper .gm-nav {
    position: relative;
    z-index: 9000;
    width: 100%;
    max-width: none;
    background: var(--gm-bar);
}

.page-wrapper .gm-panel { z-index: 9010; left: 30px; right: 30px; }
.page-wrapper .gm-scrim { z-index: 8990; }

/* Porto's own menu stays hidden on this store view */
.page-header .nav-sections,
.page-header .sw-megamenu { display: none; }

/* ==========================================================================
   Tablet / mobile — drawer
   ========================================================================== */

@media (max-width: 899px) {
    .gm-nav { flex-wrap: wrap; padding: 0; }
    .page-wrapper .gm-nav { padding: 0; }

    .gm-nav__burger {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 13px 16px !important;
        color: var(--gm-text) !important;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .gm-nav__burger-bars,
    .gm-nav__burger-bars::before,
    .gm-nav__burger-bars::after {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        content: "";
    }

    .gm-nav__burger-bars { position: relative; }
    .gm-nav__burger-bars::before { position: absolute; top: -6px; }
    .gm-nav__burger-bars::after { position: absolute; top: 6px; }

    .gm-nav__rail,
    .gm-nav__tail {
        display: none;
        flex-direction: column;
        width: 100%;
        border-top: 1px solid var(--gm-line);
    }

    .gm-nav.is-expanded .gm-nav__rail,
    .gm-nav.is-expanded .gm-nav__tail { display: flex; }

    .gm-nav__item {
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid var(--gm-line);
    }

    .gm-nav__link { flex: 1 1 auto; border-bottom: 0; }
    .gm-nav button.gm-nav__toggle { padding: 0 18px !important; }

    .page-wrapper .gm-panel {
        position: static;
        width: 100%;
        left: auto;
        right: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .gm-panel__inner { padding: 16px 18px 20px; }
    .gm-panel__body, .gm-panel__columns { display: block; }
    .gm-col + .gm-col, .gm-group + .gm-group { margin-top: 18px; }

    .gm-rail {
        margin-top: 20px;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid var(--gm-panel-line);
    }

    .gm-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-nav *, .gm-panel * { transition: none !important; }
}

/* Porto's type4 header is absolutely positioned so it floats over the hero
   slider. Absolute elements are out of the flex flow, so `order` can't place
   the nav after it and the two overlap. Returning the header to the flow is
   what makes the logo row sit above the nav, as in the design. */
.page-wrapper > .page-header,
.page-wrapper > .page-header.type4,
.cms-index-index .page-wrapper > .page-header.type4 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    background: var(--gm-ink) !important;
}

/* Porto's type4 header is absolutely positioned so it floats over the hero
   slider. Absolute elements leave the flex flow, so `order` cannot place the
   nav after it and the two overlap. Returning it to the flow puts the logo
   row above the nav. */
.page-wrapper > .page-header,
.page-wrapper > .page-header.type4,
.cms-index-index .page-wrapper > .page-header.type4 {
    order: 1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: 10;
    background: var(--gm-ink) !important;
}

/* Porto's .header-main is absolutely positioned inside .page-header, which
   leaves the header itself at height 0. The logo row then paints over
   whatever follows it — the nav. Returning this one element to the flow
   gives the header its real height back, so flex `order` can stack the rows. */
.page-wrapper > .page-header .header-main,
.page-wrapper > .page-header.type4 .header-main {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.page-wrapper > .page-header,
.page-wrapper > .page-header.type4 {
    background: var(--gm-ink) !important;
}

/* Header zones: Porto centres the logo between two 481px blocks, which leaves
   the left third empty. Reordering puts the logo first, lets the middle zone
   take the free space, and keeps account controls hard right. */
.page-header .header.content.header-row {
    justify-content: flex-start !important;
    gap: 28px;
}

.page-header .header-row .header-center {
    order: 1;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    text-align: left;
}

.page-header .header-row .header-left {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    justify-content: flex-start;
}

.page-header .header-row .header-right {
    order: 3;
    flex: 0 0 auto;
    width: auto !important;
    margin-left: auto !important;
}

/* logo sits flush left rather than centred in its own box */
.page-header .header-row .logo,
.page-header .header-row .header-center .logo {
    margin: 0 !important;
    float: none !important;
}

/* Porto's account dropdown (z 99) and expanding search panel (z 7) can both
   be open at once, so the account menu paints over the search field. Lift the
   search above it, and keep the minicart (z 100) above both. */
.page-header .block.block-search.show,
.page-header .block.block-search {
    z-index: 101 !important;
}

.page-header .block-search .search-autocomplete,
.page-header .block-search .mst-searchautocomplete__autocomplete {
    z-index: 102 !important;
}

/* The account dropdown hangs below the header and therefore over the nav bar.
   The nav sits at 9000 so its own panels clear Porto's header, which would
   bury this dropdown. Lift the header's dropdowns above it; the mega-menu
   panel (9010) still wins when it is open, as only one can be open at a time. */
.page-wrapper > .page-header { z-index: 9020 !important; }
.page-header .header.links.show,
.page-header .header.links { z-index: 9030 !important; }
.page-header .block.block-search.show { z-index: 9030 !important; }
.page-header .block-minicart,
.page-header .minicart-wrapper .block-minicart { z-index: 9040 !important; }

/* Search moved into the middle zone by megamenu.js — shown as a permanent
   field rather than a magnifier that expands over the account menu. */
.gm-search-inline .header-main .header-left {
    flex: 1 1 auto;
    max-width: 620px;
}

.gm-search-inline .header-main .block.block-search {
    position: static !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
}

.gm-search-inline .header-main .block-search .block-content,
.gm-search-inline .header-main .block-search .form.minisearch,
.gm-search-inline .header-main .block-search .field.search,
.gm-search-inline .header-main .block-search .control {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.gm-search-inline .header-main .block-search input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 48px 0 16px !important;
    font-size: 13px !important;
    color: #15181D !important;
    background: #fff !important;
    border: 1px solid #D7DCE2 !important;
    border-radius: 3px !important;
    position: static !important;
    left: auto !important;
    margin: 0 !important;
}

.gm-search-inline .header-main .block-search .action.search {
    position: absolute !important;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: 0 !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

.gm-search-inline .header-main .block-search .label,
.gm-search-inline .header-main .header-right .action.search,
.gm-search-inline .header-main .header-right .search-area > .action.search {
    display: none !important;
}

.gm-search-inline .header-main .header-left .control { position: relative !important; }

/* Remove Porto's magnifier toggle now that search is a permanent field. */
.gm-search-inline .header-main .header-right .search-area,
.gm-search-inline .header-main .header-right .search-area.show-icon,
.gm-search-inline .header-main .header-right .search-toggle-icon {
    display: none !important;
}

/* Porto keeps the search panel click-through-disabled until its own toggle
   fires. The field is always open here, so every ancestor has to accept
   pointer events or the input can't be focused. */
.gm-search-inline .header-main .header-left,
.gm-search-inline .header-main .header-left *,
.gm-search-inline .header-main .block.block-search,
.gm-search-inline .header-main .block-search * {
    pointer-events: auto !important;
    visibility: visible !important;
}

.gm-search-inline .header-main .block-search input {
    pointer-events: auto !important;
    cursor: text !important;
    opacity: 1 !important;
    z-index: 3 !important;
    position: relative !important;
}

/* Typed text and placeholder legibility, plus a tidier autocomplete panel. */
.gm-search-inline .header-main .block-search input {
    color: #15181D !important;
    font-size: 14px !important;
}

.gm-search-inline .header-main .block-search input::placeholder {
    color: #8A9099 !important;
    opacity: 1 !important;
}

.gm-search-inline .header-main .block-search .search-autocomplete,
.gm-search-inline .header-main .block-search .mst-searchautocomplete__autocomplete {
    border: 1px solid #D7DCE2 !important;
    border-radius: 3px !important;
    box-shadow: 0 18px 36px -12px rgba(12, 16, 22, .28) !important;
    margin-top: 4px !important;
}

/* The search submit button is positioned absolutely but its nearest
   positioned ancestor isn't the field, so it lands at the page edge.
   Anchor it to the search block itself. */
.gm-search-inline .header-main .header-left .block.block-search {
    position: relative !important;
}

.gm-search-inline .header-main .header-left .block-search .form.minisearch,
.gm-search-inline .header-main .header-left .block-search .field.search,
.gm-search-inline .header-main .header-left .block-search .control {
    position: relative !important;
}

.gm-search-inline .header-main .header-left button.action.search {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #5D6672 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 4 !important;
}

.gm-search-inline .header-main .header-left button.action.search:hover {
    color: #15181D !important;
}

/* Porto sets #search to #777 by id, which outranks class selectors. Match on
   the id and set -webkit-text-fill-color too — on WebKit that wins over
   `color` regardless of specificity. */
.gm-search-inline .header-main input#search,
.gm-search-inline .header-main .block-search input#search,
.gm-search-inline .header-main .block-search input[type="text"] {
    color: #15181D !important;
    -webkit-text-fill-color: #15181D !important;
    opacity: 1 !important;
}

.gm-search-inline .header-main input#search::placeholder {
    color: #8A9099 !important;
    -webkit-text-fill-color: #8A9099 !important;
    opacity: 1 !important;
}

/* ---- Search, True49 style: a dark pill that belongs to the header bar
   rather than a white box punched into it. White typed text, grey
   placeholder, icon inside the right edge. Overrides the white-field rules
   added earlier in this file. ---- */

.gm-search-inline .header-main .header-left {
    max-width: 660px;
}

.gm-search-inline .header-main .block-search input,
.gm-search-inline .header-main input#search,
.gm-search-inline .header-main .block-search input[type="text"] {
    height: 46px !important;
    padding: 0 52px 0 22px !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: #22272F !important;
    border: 1px solid #333A45 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.gm-search-inline .header-main input#search:focus {
    background: #272D36 !important;
    border-color: #4A5260 !important;
    outline: none !important;
}

.gm-search-inline .header-main input#search::placeholder {
    color: #99A1AD !important;
    -webkit-text-fill-color: #99A1AD !important;
    opacity: 1 !important;
}

.gm-search-inline .header-main .header-left button.action.search {
    right: 16px !important;
    color: #C7CED8 !important;
}

.gm-search-inline .header-main .header-left button.action.search:hover {
    color: #FFFFFF !important;
}

/* autocomplete stays light so results are readable */
.gm-search-inline .header-main .block-search .search-autocomplete,
.gm-search-inline .header-main .block-search .mst-searchautocomplete__autocomplete {
    background: #fff !important;
    border: 1px solid #333A45 !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
}

/* Let the search field take the full middle zone instead of being capped,
   so there's no dead space between the logo and the account controls. */
.gm-search-inline .header-main .header-left {
    max-width: none !important;
    flex: 1 1 auto !important;
    margin-right: 40px !important;
}

.gm-search-inline .header-main .header-center {
    margin-right: 40px !important;
}

/* Mirasvit's autocomplete keeps its own width and offset from before the
   field was moved. Pin it to the field it belongs to. */
.gm-search-inline .header-main .block-search .search-autocomplete,
.gm-search-inline .header-main .block-search .mst-searchautocomplete__autocomplete {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 6px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 9050 !important;
}

.gm-search-inline .header-main .block-search .mst-searchautocomplete__index-title {
    font-size: 11px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: #5D6672 !important;
}

/* Centre the magnifier in the field and keep text white regardless of whether
   the body class is applied — the id selector alone has to carry it. */
.header-main .header-left button.action.search {
    top: 23px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-main input#search,
.header-main .block-search input#search {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.header-main input#search::placeholder {
    color: #99A1AD !important;
    -webkit-text-fill-color: #99A1AD !important;
}

/* Final word on search text colour. Earlier in this file a black rule was
   written for a white field; it carries more classes and therefore outranks
   the white one. Matching its specificity and adding body ensures this wins. */
body.gm-search-inline .header-main .block-search input#search,
body.gm-search-inline .header-main .block-search input[type="text"],
body .header-main .block-search input#search {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    caret-color: #FFFFFF !important;
}

body.gm-search-inline .header-main .block-search input#search::placeholder,
body .header-main .block-search input#search::placeholder {
    color: #99A1AD !important;
    -webkit-text-fill-color: #99A1AD !important;
}

/* Magnifier centring: anchor to the input's own box rather than a guessed
   pixel offset, so it stays centred whatever the field height ends up being. */
body .header-main .header-left button.action.search {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    transform: none !important;
    margin: auto 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
}

body .header-main .header-left button.action.search:before,
body .header-main .header-left button.action.search span {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Porto pins the search submit button with a fixed `top`, so it slides to the
   bottom edge once the field is full height. Centre it against the field
   instead, so it holds position while typing and while autocomplete is open. */
.page-header .block-search .form.minisearch {
    position: relative;
}

.page-header .block-search .actions {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    bottom: auto !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
}

.page-header .block-search .actions .action.search,
.page-header .block-search button.action.search {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    height: auto !important;
    line-height: 1 !important;
}

.page-header .block-search .field.search .control {
    position: static !important;
}

/* The submit button is stretched by top:0;bottom:0 inside .actions. Pin it to
   the vertical centre of the field directly rather than via its parent. */
.page-header .block-search button.action.search {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}

/* The button is stretched by top:0;bottom:0 on itself, not on .actions, so
   returning it to static didn't take. Pin it to the field's vertical centre
   directly and let its own height decide the rest. */
.page-header .block-search button.action.search,
.page-header .block-search .actions button.action.search,
.page-header #search_mini_form button.action.search {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    height: 28px !important;
    margin: 0 !important;
}

/* Mirasvit renders its autocomplete panel inside .control, so .control grows
   to the dropdown's full height when results open. The submit button centres
   on `top: 50%` of that parent, which is why it drifts to the bottom while
   typing. Fixing .control to the field height gives it the right reference;
   the panel is absolutely positioned so it still hangs below as normal. */
.gm-search-inline .header-main .block-search .control {
    height: 42px !important;
}

/* The button rules above are scoped to .header-left, but the search block sits
   in .header-right — so none of them match and the button keeps Porto's
   top:0. Drop the zone from the selector, and give the block a positioned
   ancestor (line ~477 pins it static) for the button to anchor against.
   body. prefix raises specificity above that earlier !important. */
body.gm-search-inline .header-main .block.block-search {
    position: relative !important;
}

body.gm-search-inline .header-main button.action.search {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #C7CED8 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 4 !important;
}

body.gm-search-inline .header-main button.action.search:hover {
    color: #FFFFFF !important;
}

/* The button is absolute inside DIV.actions, which Porto pins to the bottom of
   the form — so centring the button only centres it within .actions. Pin
   .actions to the field's vertical centre instead and let the button sit
   statically inside it. */
body.gm-search-inline .header-main .block-search .actions {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 16px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    height: 28px !important;
    width: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.gm-search-inline .header-main .block-search .actions button.action.search {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The form is 88px tall because Mirasvit's typeahead overlay adds a row inside
   it, while the visible field is 46px. top:50% therefore centres .actions
   against 88px and lands it below the field. Anchor to the top of the form and
   offset by half the field height instead: 46/2 = 23px. */
body.gm-search-inline .header-main .block-search .actions {
    top: 23px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* Mirasvit's typeahead overlay is a ghost-text input meant to sit behind the
   real one showing a faint completion. With the dark pill styling it renders
   as a second row below the field instead. The autocomplete panel already
   shows suggestions, so hide it. */
body.gm-search-inline .header-main .mst-search-autocomplete__typeahead-overlay,
body.gm-search-inline .header-main input.mst-search-autocomplete__typeahead-overlay {
    display: none !important;
}

/* .page-wrapper is a flex column, so any child without an explicit order
   defaults to 0 and jumps above the header. The breadcrumb block is one of
   those — place it after the nav. */
.page-wrapper > .breadcrumbs,
.page-wrapper > .page-messages,
.page-wrapper > .widget {
    order: 2;
}

/* Brand rail back to a right-hand sidebar: columns take the remaining width,
   rail is a fixed 250px with a dividing rule. Overrides the full-width strip
   set earlier in this file. */
.gm-panel .gm-panel__body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    gap: 0 32px !important;
    align-items: start;
}

.gm-panel .gm-rail {
    margin-top: 0 !important;
    padding: 0 0 0 32px !important;
    border-top: 0 !important;
    border-left: 1px solid var(--gm-panel-line) !important;
    align-self: stretch;
}

.gm-panel .gm-rail__brands {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

/* columns shrink to fit beside the rail */
.gm-panel .gm-panel__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26px 28px !important;
}

/* Tighter panel: three columns so six brands fill two even rows rather than
   leaving a gap, a hairline under each heading so groups read without relying
   on whitespace, and less air between rows. */
.gm-panel .gm-panel__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px 36px !important;
}

.gm-panel .gm-col {
    gap: 22px !important;
}

.gm-panel .gm-group__title {
    margin: 0 0 8px !important;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gm-panel-line);
    font-size: 13px !important;
    letter-spacing: .02em !important;
}

.gm-panel .gm-group__links a {
    padding: 3px 0 !important;
    font-size: 13px !important;
}

.gm-panel .gm-panel__inner {
    padding: 22px 30px 26px !important;
}

.gm-panel .gm-panel__body {
    padding-top: 18px !important;
}

/* Heavier outlines: the 1px hairline tiles read as faint at this size, and the
   brand headings need more weight to anchor each column. */
.gm-panel .gm-brand {
    border: 2px solid #15181D !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    min-height: 40px !important;
    color: #15181D !important;
}

.gm-panel .gm-brand:hover {
    background: #15181D !important;
    color: #FFFFFF !important;
    border-color: #15181D !important;
    box-shadow: none !important;
}

.gm-panel .gm-group__title,
.gm-panel .gm-group__title a {
    font-weight: 800 !important;
    font-size: 13.5px !important;
}

.gm-panel .gm-group__title {
    border-bottom: 2px solid #15181D !important;
    padding-bottom: 7px !important;
}

.gm-panel .gm-rail__title {
    font-weight: 800 !important;
    color: #15181D !important;
}

/* Rail as a tinted block that bleeds to the panel's right and bottom edges,
   as in the mock, rather than a bordered sidebar. Negative margins cancel
   .gm-panel__inner's padding (22px 30px 26px) so the tint reaches the edge. */
.gm-panel .gm-panel__body {
    gap: 0 !important;
    grid-template-columns: minmax(0, 1fr) 282px !important;
}

.gm-panel .gm-rail {
    background: #F4F5F7 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    padding: 22px 30px 26px 26px !important;
    margin: -18px -30px -26px 0 !important;
}

/* "Shop all X" sits over the columns, not the rail */
.gm-panel .gm-panel__head {
    padding-right: 282px !important;
}

/* red accent above the panel, as in the mock */
.gm-panel {
    border-top-color: var(--gm-accent) !important;
    border-top-width: 3px !important;
}

/* tiles sit on the tint, so give them a white face */
.gm-panel .gm-brand {
    background: #FFFFFF !important;
}

.gm-panel .gm-rail__promo {
    margin-top: 18px !important;
}

/* A panel with no brand rail shouldn't reserve 282px for one. :has() lets the
   grid collapse to a single full-width column area. */
.gm-panel .gm-panel__body:not(:has(.gm-rail)) {
    display: block !important;
}

.gm-panel .gm-panel__body:not(:has(.gm-rail)) .gm-panel__columns {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.gm-panel .gm-panel__head:not(:has(~ .gm-panel__body .gm-rail)) {
    padding-right: 0 !important;
}

/* Four columns at this width keeps each one near 220px, so headings and their
   rules sit over the content rather than trailing into empty space. Tighter
   vertical rhythm keeps the whole panel above the fold. */
.gm-panel .gm-panel__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px 28px !important;
}

.gm-panel .gm-col {
    gap: 20px !important;
}

.gm-panel .gm-group__title {
    margin: 0 0 7px !important;
    padding-bottom: 5px !important;
    font-size: 13px !important;
}

.gm-panel .gm-group__links a {
    padding: 2px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   MOBILE DRAWER — must come last in the file.
   The desktop rules above use !important heavily, so these repeat it to win
   inside the media query rather than relying on source order alone.
   ========================================================================== */

@media (max-width: 899px) {

    /* one menu, not two: Porto's hamburger goes */
    .page-header .action.nav-toggle,
    .page-header .nav-toggle,
    .page-header .header-right .action.nav-toggle { display: none !important; }

    /* bar becomes the drawer trigger row */
    .page-wrapper .gm-nav {
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .gm-nav__burger {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 15px 18px !important;
        color: var(--gm-text) !important;
        font-size: 15px;
        font-weight: 800;
    }

    /* market rows */
    .gm-nav__rail,
    .gm-nav__tail {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .gm-nav.is-expanded .gm-nav__rail,
    .gm-nav.is-expanded .gm-nav__tail { display: flex !important; }

    .gm-nav__item {
        display: block !important;
        width: 100% !important;
        border-top: 1px solid var(--gm-line) !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }

    .gm-nav__item.is-open { background: #1A1F27 !important; }

    .gm-nav__link {
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: calc(100% - 56px);
        float: left;
        padding: 16px 0 16px 18px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        border-bottom: 0 !important;
        border-left: 3px solid transparent !important;
    }

    .gm-nav__item.is-open .gm-nav__link {
        border-left-color: var(--gm-accent) !important;
        padding-left: 15px !important;
    }

    .gm-nav__icon { width: 20px; height: 20px; }

    .gm-nav button.gm-nav__toggle {
        float: right;
        width: 56px !important;
        padding: 16px 18px !important;
        border-bottom: 0 !important;
        background: none !important;
    }

    .gm-nav__item::after { content: ""; display: table; clear: both; }

    /* panel becomes an inline accordion */
    .page-wrapper .gm-panel {
        position: static !important;
        clear: both;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
        background: #FAFBFC !important;
    }

    .gm-panel .gm-panel__inner { padding: 4px 18px 20px 50px !important; }

    .gm-panel .gm-panel__head {
        display: block !important;
        padding: 0 0 10px !important;
        border-bottom: 0 !important;
    }

    .gm-panel .gm-panel__title { display: none !important; }

    .gm-panel .gm-panel__all {
        display: inline-block;
        font-size: 14px !important;
        border-bottom: 2px solid var(--gm-accent) !important;
    }

    .gm-panel .gm-panel__body,
    .gm-panel .gm-panel__columns,
    .gm-panel .gm-col {
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .gm-panel .gm-group { margin-bottom: 14px; }

    .gm-panel .gm-group__title {
        border-bottom: 1px solid var(--gm-panel-line) !important;
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .gm-panel .gm-group__links a {
        padding: 9px 0 !important;
        font-size: 15px !important;
    }

    /* brand rail becomes chips */
    .gm-panel .gm-rail {
        background: transparent !important;
        margin: 10px 0 0 !important;
        padding: 14px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--gm-panel-line) !important;
    }

    .gm-panel .gm-rail__brands {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        grid-template-columns: none !important;
    }

    .gm-panel .gm-brand {
        width: auto !important;
        min-height: 0 !important;
        padding: 9px 13px !important;
        font-size: 12.5px !important;
    }

    .gm-nav__tail a {
        padding: 15px 18px !important;
        border-top: 1px solid var(--gm-line) !important;
    }

    .gm-scrim { display: none !important; }
}

@media (max-width: 899px) {
    /* icons were collapsing in the floated row */
    .gm-nav__item .gm-nav__icon {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        flex: none !important;
        color: var(--gm-accent) !important;
    }

    /* pull rows back to the screen edge */
    .page-wrapper .gm-nav__rail,
    .page-wrapper .gm-nav__tail { padding: 0 !important; margin: 0 !important; }
    .gm-nav__item { padding: 0 !important; }
    .gm-nav__link { padding-left: 16px !important; }
    .gm-nav__item.is-open .gm-nav__link { padding-left: 13px !important; }
    .gm-panel .gm-panel__inner { padding-left: 36px !important; }
}

/* Column headings carry the panel's hierarchy, so they need clearly more
   weight than the links beneath them. Darker and heavier than the earlier
   rules, which were landing at semi-bold against the theme's font stack. */
.gm-panel .gm-group__title,
.gm-panel .gm-group__title a,
.gm-panel .gm-rail__title {
    font-weight: 900 !important;
    color: #0B0D10 !important;
    font-size: 13.5px !important;
    letter-spacing: .01em !important;
}

.gm-panel .gm-group__title {
    border-bottom: 2px solid #0B0D10 !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
}

/* Desktop: no burger, a home icon in its place. The burger was showing above
   the breakpoint because a later rule set display:flex unconditionally. */
@media (min-width: 900px) {
    .gm-nav .gm-nav__burger { display: none !important; }

    .gm-nav__home {
        display: inline-flex !important;
        align-items: center;
        padding: 13px 16px;
        color: var(--gm-muted) !important;
        border-bottom: 2px solid transparent;
    }

    .gm-nav__home:hover {
        background: var(--gm-bar-hover) !important;
        color: var(--gm-text) !important;
    }
}

/* Mobile keeps the burger and hides the standalone home icon, since the
   drawer already lists Home as a market. */
@media (max-width: 899px) {
    .gm-nav__home { display: none !important; }
}

/* ---- Nav inset: match the header's content edge, but scale down on narrower
   desktops instead of forcing 70px at every width. ---- */
@media (min-width: 900px) {
    .page-wrapper .gm-nav {
        padding-left: clamp(20px, 5vw, 70px) !important;
        padding-right: clamp(20px, 5vw, 70px) !important;
    }

    .page-wrapper .gm-panel {
        left: clamp(20px, 5vw, 70px) !important;
        right: clamp(20px, 5vw, 70px) !important;
    }
}

/* ---- Mobile: keep the Menu bar on screen while scrolling, and let a long
   drawer scroll inside itself rather than running off the page. ---- */
@media (max-width: 899px) {
    .page-wrapper .gm-nav {
        position: sticky !important;
        top: 0;
        z-index: 9000 !important;
        padding: 0 !important;
    }

    .gm-nav.is-expanded {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .gm-nav.is-expanded .gm-nav__burger {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--gm-bar) !important;
    }
}

/* ---- Nav inset: match the header's content edge, but scale down on narrower
   desktops instead of forcing 70px at every width. ---- */
@media (min-width: 900px) {
    .page-wrapper .gm-nav {
        padding-left: clamp(20px, 5vw, 70px) !important;
        padding-right: clamp(20px, 5vw, 70px) !important;
    }

    .page-wrapper .gm-panel {
        left: clamp(20px, 5vw, 70px) !important;
        right: clamp(20px, 5vw, 70px) !important;
    }
}

/* ---- Mobile: keep the Menu bar on screen while scrolling, and let a long
   drawer scroll inside itself rather than running off the page. ---- */
@media (max-width: 899px) {
    .page-wrapper .gm-nav {
        position: sticky !important;
        top: 0;
        z-index: 9000 !important;
        padding: 0 !important;
    }

    .gm-nav.is-expanded {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .gm-nav.is-expanded .gm-nav__burger {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--gm-bar) !important;
    }
}

/* ==========================================================================
   MOBILE — match the approved preview. Last block in the file, so it wins.
   ========================================================================== */

@media (max-width: 899px) {

    .page-wrapper > .gm-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 9500 !important;
        padding: 0 !important;
        background: var(--gm-ink) !important;
    }

    /* trigger row */
    .gm-nav__burger {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 15px 18px !important;
        color: #fff !important;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .gm-nav.is-expanded {
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* drawer body is light, like the preview */
    .gm-nav.is-expanded .gm-nav__rail,
    .gm-nav.is-expanded .gm-nav__tail {
        display: flex !important;
        background: #fff !important;
    }

    .gm-nav__item {
        border-top: 1px solid #E6E9ED !important;
        background: #fff !important;
    }

    .gm-nav__item.is-open { background: #FAFBFC !important; }

    .gm-nav__link {
        color: #15181D !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        padding: 17px 0 17px 18px !important;
    }

    .gm-nav__item .gm-nav__icon {
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        color: var(--gm-accent) !important;
    }

    .gm-nav button.gm-nav__toggle { color: #8A9099 !important; }

    /* expanded content */
    .gm-panel { background: #FAFBFC !important; }
    .gm-panel .gm-panel__inner { padding: 2px 18px 18px 50px !important; }

    .gm-panel .gm-group__title,
    .gm-panel .gm-group__title a {
        font-size: 13px !important;
        border-bottom-width: 1px !important;
    }

    .gm-panel .gm-group__links a {
        font-size: 15px !important;
        padding: 9px 0 !important;
        color: #2C333C !important;
    }

    /* brands as chips */
    .gm-panel .gm-rail__title { font-size: 11px !important; }

    .gm-panel .gm-brand {
        border-width: 2px !important;
        border-radius: 3px !important;
        padding: 9px 13px !important;
    }

    /* Brands / Deals as buttons at the foot of the drawer */
    .gm-nav__tail {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 18px !important;
        border-top: 1px solid #E6E9ED !important;
    }

    .gm-nav__tail a {
        justify-content: center;
        height: 48px;
        padding: 0 !important;
        border: 2px solid #15181D !important;
        border-radius: 3px !important;
        color: #15181D !important;
        font-weight: 800 !important;
        font-size: 14px !important;
    }
}

@media (max-width: 899px) {
    /* market names: the dark-bar colour was still winning on a white drawer */
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link span,
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link:visited {
        color: #15181D !important;
        opacity: 1 !important;
    }

    /* the two buttons were inheriting the rail's flex-column */
    .page-wrapper .gm-nav .gm-nav__tail {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .page-wrapper .gm-nav .gm-nav__tail a {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #15181D !important;
    }

    .page-wrapper .gm-nav,
    .page-wrapper .gm-nav * { max-width: 100% !important; }
}

@media (max-width: 899px) {
    /* tail only exists once the drawer is open */
    .page-wrapper .gm-nav .gm-nav__tail { display: none !important; }
    .page-wrapper .gm-nav.is-expanded .gm-nav__tail {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* the expanded market row stays light, so dark text is readable */
    .page-wrapper .gm-nav .gm-nav__item.is-open,
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open button.gm-nav__toggle {
        background: #FAFBFC !important;
    }

    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link span {
        color: #15181D !important;
    }

    .page-wrapper .gm-nav .gm-nav__item.is-open button.gm-nav__toggle {
        color: #5D6672 !important;
    }
}

@media (max-width: 899px) {
    /* Touch devices keep :hover applied after a tap, so the desktop hover
       background (dark) was landing on a light drawer row and hiding the
       text. Neutralise hover entirely below the breakpoint. */
    .page-wrapper .gm-nav .gm-nav__item:hover,
    .page-wrapper .gm-nav .gm-nav__item:hover .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item:hover button.gm-nav__toggle,
    .page-wrapper .gm-nav .gm-nav__item:focus-within .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item:focus-within button.gm-nav__toggle {
        background: #fff !important;
        border-bottom-color: transparent !important;
    }

    .page-wrapper .gm-nav .gm-nav__item:hover .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item:hover .gm-nav__link span,
    .page-wrapper .gm-nav .gm-nav__item:focus-within .gm-nav__link span {
        color: #15181D !important;
    }

    .page-wrapper .gm-nav .gm-nav__item.is-open:hover,
    .page-wrapper .gm-nav .gm-nav__item.is-open:hover .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open:hover button.gm-nav__toggle {
        background: #FAFBFC !important;
    }
}

@media (max-width: 899px) {
    /* light tap feedback instead of flat white */
    .page-wrapper .gm-nav .gm-nav__item:hover,
    .page-wrapper .gm-nav .gm-nav__item:hover .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item:hover button.gm-nav__toggle {
        background: #F2F4F7 !important;
    }

    .page-wrapper .gm-nav .gm-nav__item:active,
    .page-wrapper .gm-nav .gm-nav__item:active .gm-nav__link {
        background: #E9ECF1 !important;
    }

    /* every row keeps its chevron */
    .page-wrapper .gm-nav button.gm-nav__toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .page-wrapper .gm-nav .gm-nav__chevron {
        display: inline-block !important;
        width: 11px !important;
        height: 11px !important;
    }
}

@media (max-width: 899px) {
    /* Porto's header is position:relative on mobile, so it scrolls away.
       The nav should pin to the viewport top, not leave a gap where the
       header used to be. */
    .page-wrapper > .gm-nav { top: 0 !important; }
}

@media (max-width: 899px) {
    /* Floats plus calc() widths were pushing the chevron past the viewport.
       A flex row sizes itself and keeps the toggle inside the screen. */
    .page-wrapper .gm-nav .gm-nav__item {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
    }

    .page-wrapper .gm-nav .gm-nav__link {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        float: none !important;
        min-width: 0 !important;
        padding: 16px 8px 16px 18px !important;
    }

    .page-wrapper .gm-nav button.gm-nav__toggle {
        flex: 0 0 52px !important;
        width: 52px !important;
        float: none !important;
        justify-content: center !important;
        padding: 16px 0 !important;
    }

    /* panel takes the full row below both */
    .page-wrapper .gm-nav .gm-panel {
        flex: 0 0 100% !important;
        order: 2;
    }

    /* icons back */
    .page-wrapper .gm-nav .gm-nav__link .gm-nav__icon {
        display: inline-block !important;
        width: 19px !important;
        height: 19px !important;
        margin-right: 12px !important;
        flex: 0 0 19px !important;
        color: var(--gm-accent) !important;
    }

    .page-wrapper .gm-nav .gm-nav__tail { padding: 16px 18px 20px !important; }
}

@media (max-width: 899px) {
    /* One palette for every row state: closed, open, hovered, tapped.
       Earlier blocks set a dark open-state that still applied. */
    .page-wrapper .gm-nav .gm-nav__item,
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item button.gm-nav__toggle,
    .page-wrapper .gm-nav .gm-nav__item.is-open,
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open button.gm-nav__toggle,
    .page-wrapper .gm-nav .gm-nav__item.is-open:hover,
    .page-wrapper .gm-nav .gm-nav__item.is-open:hover .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open:hover button.gm-nav__toggle {
        background-color: #FFFFFF !important;
        background-image: none !important;
    }

    /* the open row gets its accent edge, not a fill */
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link {
        border-left: 3px solid var(--gm-accent) !important;
        padding-left: 15px !important;
    }

    /* text and chevron always dark */
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item .gm-nav__link span,
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link,
    .page-wrapper .gm-nav .gm-nav__item.is-open .gm-nav__link span {
        color: #15181D !important;
    }

    .page-wrapper .gm-nav .gm-nav__item button.gm-nav__toggle,
    .page-wrapper .gm-nav .gm-nav__item.is-open button.gm-nav__toggle {
        color: #5D6672 !important;
    }

    /* expanded content sits on a faint tint to separate it from the rows */
    .page-wrapper .gm-nav .gm-panel {
        background-color: #FAFBFC !important;
        background-image: none !important;
    }
}

/* Brands / Deals hidden for now — the links are placeholders with no pages
   behind them yet. Delete this block to bring them back. */
.gm-nav .gm-nav__tail,
.page-wrapper .gm-nav .gm-nav__tail,
.page-wrapper .gm-nav.is-expanded .gm-nav__tail {
    display: none !important;
}