/* ==========================================================================
   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;
}