/**
 * Header (top bar, logo/search/icon row) and footer — redesign "Classic version".
 *
 * Plain CSS, loaded after styles.css (Magento_Theme/layout/default_head_blocks.xml),
 * because the compiled Tailwind bundle cannot be rebuilt reliably outside the server
 * environment. The rules here deliberately override the bar layout in
 * web/tailwind/theme/header.css; the mega-menu item styling there is untouched.
 *
 * 1280px is the desktop breakpoint, matching Amasty's mobile_menu_width (1279).
 */

:root {
    --srg-navy: #00366f;
    --srg-navy-dark: #002b59;
    --srg-navy-line: #1d4f86;
    --srg-navy-tint: #0a4a8f;
    --srg-ink: #0b1b2b;
    --srg-muted: #4a5b6e;
    --srg-line: #d8e0e9;
    --srg-field: #b9c7d6;
    --srg-footer-text: #c9d8e8;
    --srg-yellow: #ffc20e;
    --srg-logo-w: 71px; /* 126x170 logo at 96px */
    /* Content width of the whole storefront: header, footer, category.css, product.css and the
       homepage rows below all read it. */
    --srg-max: 1440px;
}

.srg-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--srg-max);
    margin: 0 auto;
    padding: 0 32px;
}

/* Homepage sections: the Page Builder homepage kit (CMS content, "hp-section" rows) caps them at
   1280px in its own inline style; #html-body outranks that so they match the header. */
#html-body [data-content-type="row"][data-appearance].hp-section > .row-full-width-inner {
    max-width: var(--srg-max);
}

/* Every other page (CMS, search, cart, account): main's columns, title and the breadcrumbs, in
   place of the Luma-parity 1200px ladder in tailwind/theme/page-layout.css. Category and product
   pages set their own frame in category.css / product.css, with the same width and gutters. */
:where(main:not(.product-main-full-width, .page-main-full-width)) .columns,
:where(main:not(.product-main-full-width, .page-main-full-width)) > .container,
.breadcrumbs > .container {
    max-width: var(--srg-max);
    margin-inline: auto;
    padding-inline: 32px;
}

@media (max-width: 767.98px) {
    :where(main:not(.product-main-full-width, .page-main-full-width)) .columns,
    :where(main:not(.product-main-full-width, .page-main-full-width)) > .container,
    .breadcrumbs > .container {
        padding-inline: 16px;
    }
}

.srg-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Flags: three stripes; horizontal by default (AT), --v for vertical tricolours. */
.srg-flag {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
    background: linear-gradient(#c8102e 0 33.4%, #fff 33.4% 66.6%, #c8102e 66.6%);
}
.srg-flag--de { background: linear-gradient(#000 0 33.4%, #dd0000 33.4% 66.6%, #ffce00 66.6%); }
.srg-flag--it { background: linear-gradient(90deg, #009246 0 33.4%, #fff 33.4% 66.6%, #ce2b37 66.6%); }
.srg-flag--ch { background: #d52b1e; }
.srg-flag--xx { background: linear-gradient(135deg, #0a4a8f, #6fa0d8); }

/* ------------------------------------------------------------------ top bar */

.srg-topbar {
    position: relative;
    z-index: 40;
    background: var(--srg-navy);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.srg-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.srg-topbar__usps {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0 22px;
    min-width: 0;
    height: 22px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.srg-topbar__usps li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    white-space: nowrap;
}

.srg-topbar .srg-ico { width: 16px; height: 16px; }

.srg-topbar__short { display: none; }

.srg-topbar__aside {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.srg-topbar__phone,
.srg-topbar__phone:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------------ country / language */

.srg-cs { position: relative; }

.srg-cs__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid rgb(255 255 255 / 0.45);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.srg-cs__btn:hover { background: rgb(255 255 255 / 0.08); }
.srg-cs__btn .srg-ico { width: 14px; height: 14px; }

.srg-cs__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 320px;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--srg-ink);
    box-shadow: 0 12px 40px rgb(0 30 60 / 0.22);
    font-size: 15px;
    text-align: left;
}

.srg-cs--footer .srg-cs__panel { top: auto; bottom: calc(100% + 8px); }

.srg-cs__title {
    padding: 2px 6px 6px;
    color: var(--srg-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.srg-cs__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.srg-cs__opt,
.srg-cs__opt:hover {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 4px 10px;
    border-radius: 8px;
    color: var(--srg-ink);
    text-decoration: none;
}
.srg-cs__opt:hover,
.srg-cs__opt.is-active { background: #e7eef6; }
.srg-cs__opt:focus-visible { outline: 2px solid var(--srg-navy); outline-offset: -2px; }
.srg-cs__opt .srg-flag { width: 22px; height: 15px; box-shadow: 0 0 0 1px var(--srg-line); }

.srg-cs__opt-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.srg-cs__opt-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}
.srg-cs__opt-name strong { font-weight: 600; }
.srg-cs__opt-meta { color: var(--srg-muted); font-size: 13px; }
.srg-cs__check { color: var(--srg-navy); }

/* Store-front audience (Privatkunden / Geschäftskunden), from the view model. */
.srg-cs__aud {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--srg-field);
    color: var(--srg-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.srg-cs__aud--b2b { background: var(--srg-navy); box-shadow: none; color: #fff; }

.srg-cs .srg-cs__note {
    margin: 6px 0 0;
    padding: 8px 6px 2px;
    border-top: 1px solid #e6ecf2;
    color: var(--srg-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Bottom-sheet parts and the footer's "Land & Sprache:" prefix: phones only. */
.srg-cs__overlay,
.srg-cs__sheet-head,
.srg-cs__prefix { display: none; }

.srg-cs__anim { transition: opacity 0.15s ease, transform 0.22s ease; }
.srg-cs__from { opacity: 0; }

@media (max-width: 767.98px) {
    .srg-cs__prefix { display: inline; }

    .srg-cs .srg-cs__overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgb(7 20 40 / 0.45);
    }

    .srg-cs .srg-cs__panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 91;
        gap: 0;
        width: auto;
        max-height: 85vh;
        overflow-y: auto;
        padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgb(0 30 60 / 0.18);
        font-size: 15px;
    }
    .srg-cs .srg-cs__panel.srg-cs__from { opacity: 1; transform: translateY(100%); }

    .srg-cs__sheet-head { display: block; }
    .srg-cs__handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 4px auto 8px;
        border-radius: 2px;
        background: var(--srg-line);
    }
    .srg-cs__sheet-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 1px solid #e6ecf2;
    }
    .srg-cs__sheet-title { color: var(--srg-ink); font-size: 20px; font-weight: 800; line-height: 1.2; }
    .srg-cs__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--srg-ink);
        cursor: pointer;
    }

    .srg-cs__title { display: none; }
    .srg-cs__list { padding-top: 10px; }
    .srg-cs__opt,
    .srg-cs__opt:hover { gap: 12px; min-height: 54px; padding: 4px 12px; border-radius: 10px; }
    .srg-cs__opt:hover:not(.is-active) { background: transparent; }
    .srg-cs__opt .srg-flag { width: 24px; height: 16px; }
    .srg-cs .srg-cs__note { margin-top: 12px; padding: 0; border-top: 0; font-size: 13px; }
}

html.srg-cs-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .srg-cs__anim { transition: none; }
}

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

#header {
    border-bottom: 1px solid var(--srg-line);
    background-color: #fff;
}

/* Netto / Brutto */
.srg-vat {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--srg-field);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.srg-vat__btn {
    height: 40px;
    padding: 0 12px;
    border: 0;
    background: #fff;
    color: var(--srg-navy);
    font: inherit;
    cursor: pointer;
}
.srg-vat__btn.is-active { background: var(--srg-navy); color: #fff; }

/* Account + cart: 48px targets in the brand blue. */
#header #customer-menu,
#header #menu-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--srg-navy);
}
#header #customer-menu svg,
#header #menu-cart-icon svg { width: 24px; height: 24px; }

#header #menu-cart-icon > span {
    top: 6px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--srg-yellow);
    color: var(--srg-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Search field: the stock mini-search, kept (with its suggestions) but always
   shown instead of toggled. */
#search-content {
    border: 0;
    box-shadow: none;
    background: transparent;
}
#search-content > .container { max-width: none; padding: 0; }
#search-content .input-group.grow {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1.5px solid var(--srg-field);
    border-radius: 8px;
    background: #fff;
}
#search_mini_form { position: relative; }
#search_mini_form input#search {
    height: 100%;
    padding: 0 16px 0 44px;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    background: transparent;
    color: var(--srg-ink);
    font-size: 16px;
}
#search_mini_form input#search::placeholder { color: var(--srg-muted); }
#search_mini_form:focus-within .input-group.grow { border-color: var(--srg-navy); }
#search_mini_form kbd { display: none !important; }
#search_mini_form button[type="submit"] {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--srg-muted);
}

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

/* The whole <header> sticks, offset by the top bar's height so the USP bar
   scrolls away and only the logo / search / menu row stays pinned. The top bar
   is held at a fixed height so that offset is exact. --srg-header-h (the
   pinned row's height) is published by the script in top-bar.phtml, for
   anything that has to clear the header: anchor jumps, the messages strip, the
   sticky gallery on the product page. */
:root { --srg-topbar-h: 40px; }

html { scroll-padding-top: var(--srg-header-h, 0px); }

.page-header {
    position: sticky;
    top: calc(-1 * var(--srg-topbar-h));
    z-index: 30;
}

.srg-topbar__inner { height: var(--srg-topbar-h); }

.page.messages { top: var(--srg-header-h, 0px); }

/* Square mega-menu panels: Amasty ships them with rounded-b*-2xl
   (desktop dropdown) and rounded-*r-2xl (hamburger flyouts). */
#header .navigation nav > ul > li > div[class~="absolute"],
#header [class~="rounded-tr-2xl"][class~="rounded-br-2xl"] {
    border-radius: 0;
}

@media (min-width: 1280px) {
    #header {
        height: auto;
        backdrop-filter: none;
        border-bottom-color: var(--srg-line);
    }

    #header > .container {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 32px;
        max-width: var(--srg-max);
        margin: 0 auto;
        padding: 18px 32px 0;
    }

    #header .container a:has(> img) {
        position: static;
        grid-row: 1;
        grid-column: 1;
    }

    #header .container a:has(> img) img {
        height: 96px;
        box-shadow: 0 4px 14px rgb(0 30 60 / 0.18);
    }

    #header > .container > div.flex.items-center.gap-2 {
        grid-row: 1;
        grid-column: 2;
        gap: 8px;
    }

    #header #compare-link,
    #header #menu-search-icon { display: none !important; }

    /* Row 2: the menu, as on staging, below the logo row — left aligned and on
       one line. Pulled left by its item padding so the first label lines up
       with the logo. */
    #header .container div.navigation.order-2 {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 12px;
        margin-left: -14px;
    }

    #header .container div.navigation.order-2 nav > ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    /* Labels per the design: normal case, 15px semibold ink, 28px apart
       (14px padding each side). Overrides the legacy 700 uppercase in
       header.css — including the inline font-weight Amasty writes onto the
       label span, hence !important there — and the 25px padding it applies
       from 1600. Nine items (two with chevrons, one pill) measure ~1150px at
       15px and fit the 1199px available at 1280 with a scrollbar. */
    #header .container div.navigation.order-2 nav > ul > li {
        --ammenu-main-menu-text: var(--srg-ink);
        --ammenu-main-menu-text-hover: var(--srg-navy);
        --ammenu-main-menu-background-hover: #e7eef6;
    }

    #header .container div.navigation.order-2 nav > ul > li > div > a {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

    #header .container div.navigation.order-2 nav > ul > li > div > a > span[data-font-weight] {
        font-weight: 600 !important;
    }

    /* Current item: a navy rule along the bottom instead of the legacy
       #0f78c1 block (header.css). */
    #header .container div.navigation.order-2 nav > ul > li:has(a[class*="ammenu-current-category-color"]) {
        background-color: transparent;
        box-shadow: inset 0 -3px 0 var(--srg-navy);
    }
    #header .container div.navigation.order-2 nav > ul > li > div > a[class*="ammenu-current-category-color"] {
        --ammenu-current-category-color: var(--srg-navy);
    }

    /* Chevron on items that open a mega-menu panel (Amasty sets data-submenu
       only on those). */
    #header .container div.navigation.order-2 nav > ul > li[data-submenu] > div > a::after {
        content: "";
        width: 16px;
        height: 16px;
        margin-left: 4px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* "Aktionen" as the design's yellow pill. Matched on the category URL key,
       which survives a rename of the label. */
    #header .container div.navigation.order-2 nav > ul > li:has(> div > a[href*="aktionen"]) {
        background-color: transparent;
        box-shadow: none;
    }
    #header .container div.navigation.order-2 nav > ul > li > div > a[href*="aktionen"] > span[data-font-weight] {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        /* the pill is taller than the label line; keep the row at 57px */
        margin-block: -6px;
        padding: 0 12px;
        border-radius: 16px;
        background: var(--srg-yellow);
        color: var(--srg-ink);
    }
    #header .container div.navigation.order-2 nav > ul > li > div > a[href*="aktionen"]:hover > span[data-font-weight] {
        background: #f2b600;
    }

    /* Mega-menu panel entries: normal case too (header.css: 13px uppercase). */
    #header .container div.navigation.order-2 nav > ul > li > div[class~="absolute"] a {
        font-size: 14px;
        font-weight: 600;
        text-transform: none;
    }
}

@media (min-width: 1280px) {

    /* Between the logo and the icon group (Netto/Brutto 2x~66 + 2x48 + gaps). */
    #search-content {
        display: block !important;
        position: absolute;
        top: 42px;
        left: calc(max(0px, (100% - var(--srg-max)) / 2) + 32px + var(--srg-logo-w) + 32px);
        right: calc(max(0px, (100% - var(--srg-max)) / 2) + 32px + 236px + 32px);
        width: auto;
    }
    #search-content > .container { padding: 0; }
}

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

@media (max-width: 1279.98px) {
    .srg-wrap { padding: 0 16px; }

    .srg-topbar { font-size: 12px; }
    .srg-topbar__inner { min-height: 40px; padding: 4px 8px 4px 16px; gap: 8px; }
    .srg-topbar__usps,
    .srg-topbar__phone { display: none; }
    .srg-topbar__short { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .srg-topbar .srg-cs__btn { height: 32px; font-size: 12px; }

    #header {
        border-bottom-color: var(--srg-line);
    }

    #header > .container {
        justify-content: flex-start;
        gap: 4px;
        min-height: 0;
        padding: 6px 8px;
    }

    /* Burger first, logo centred, icons right. */
    #header .container div:has(> #ammenu-sidebar) {
        order: 0;
        margin-left: 0;
    }

    #header .container a:has(> img) {
        position: static;
        order: 1;
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }

    #header .container a:has(> img) img {
        height: 56px;
        box-shadow: none;
    }

    #header > .container > div.flex.items-center.gap-2 {
        order: 2;
        gap: 0;
    }

    #header #compare-link,
    #header div[x-data="initCustomerMenu"] { display: none !important; }

    #header .srg-vat { margin-right: 4px; font-size: 12px; }
    #header .srg-vat__btn { height: 32px; padding: 0 8px; }

    #header #menu-search-icon,
    #header #menu-cart-icon {
        width: 44px;
        height: 44px;
        color: var(--srg-navy);
    }
    #header #menu-search-icon svg { width: 22px; height: 22px; }

    #header .container button[class~="-hamburger"] { width: 44px; height: 44px; }

    /* Search field below the bar, always visible. */
    #search-content {
        display: block !important;
        position: static;
        padding: 4px 16px 12px;
    }
    #search-content .input-group.grow { height: 46px; border-radius: 10px; }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    #header > .container { min-height: 0; }
    #header .container a:has(> img) img { height: 64px; }

    /* Tablet: 32px side gutters like the content (category.css, product.css,
       Page Builder rows), which only drops to 16px below 768. The header bar's
       44px icon buttons sit 8px further out so their icons line up with it. */
    .srg-wrap { padding: 0 32px; }
    .srg-topbar__inner { padding: 4px 24px 4px 32px; }
    #header > .container { padding: 6px 24px; }
    #search-content { padding: 4px 32px 12px; }
}

/* ------------------------------------------------------------ mobile menu */
/* Full-screen panel from Amasty_MegaMenuLiteHyva/templates/components/toggle-hyva.phtml,
   per MenuMobil.dc.html: Hyvä-default rows and drill-down, sticky bottom area. */

html.srg-mm-locked { overflow: hidden; }

.srg-mm {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--srg-ink);
    font-size: 16px;
    line-height: 1.5;
    animation: srg-mm-in 0.3s ease;
}

@keyframes srg-mm-in { from { transform: translateX(-100%); } }

.srg-mm__anim { transition: transform 0.3s ease, opacity 0.3s ease; }
.srg-mm__from-right { opacity: 0; transform: translateX(32px); }

.srg-mm__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 10px 24px;
    border-bottom: 1px solid #e2e8f0;
}
.srg-mm__logo { display: block; }
.srg-mm__logo img { display: block; width: auto; height: 52px; }

.srg-mm__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--srg-ink);
    cursor: pointer;
}
.srg-mm__close:hover { background: #f3f6f9; }
.srg-mm__close .srg-ico { width: 26px; height: 26px; }
.srg-mm__chev .srg-ico,
.srg-mm__back .srg-ico,
.srg-mm__phone .srg-ico { width: 18px; height: 18px; }

.srg-mm__nav {
    position: relative;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.srg-mm__nav.is-locked { overflow-y: hidden; }

.srg-mm__list { margin: 0; padding: 0; list-style: none; }

.srg-mm__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 12px 24px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: var(--srg-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.srg-mm__row:hover { background: #f3f6f9; color: var(--srg-ink); }
.srg-mm__row:focus-visible,
.srg-mm__close:focus-visible { outline: 2px solid var(--srg-navy); outline-offset: -2px; }
.srg-mm__row[aria-current="page"] { color: var(--srg-navy); font-weight: 700; }
.srg-mm__row--parent { justify-content: space-between; }
.srg-mm__row--child { font-weight: 500; }

.srg-mm__chev {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: var(--srg-navy);
}

.srg-mm__pill {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--srg-yellow);
    color: var(--srg-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.srg-mm__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
}
.srg-mm__back { background: #f3f6f9; font-weight: 700; }
.srg-mm__back .srg-ico { color: var(--srg-navy); }
.srg-mm__all,
.srg-mm__all:hover { color: var(--srg-navy); }

.srg-mm__foot {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0;
    background: #f3f6f9;
}

.srg-mm__account-row { display: flex; gap: 8px; }
.srg-mm__btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border: 1.5px solid var(--srg-navy);
    border-radius: 10px;
    background: #fff;
    color: var(--srg-navy);
    font-weight: 600;
    text-decoration: none;
}
.srg-mm__btn:hover { background: #e7eef6; color: var(--srg-navy); }
.srg-mm__btn--primary,
.srg-mm__btn--primary:hover { background: var(--srg-navy); color: #fff; }
.srg-mm__btn--primary:hover { background: var(--srg-navy-dark); }

.srg-mm__settings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.srg-mm .srg-vat { background: #fff; font-size: 13px; }
.srg-mm .srg-vat__btn { height: 40px; }

.srg-cs--menu .srg-cs__btn {
    height: 40px;
    padding: 0 12px;
    border-color: var(--srg-field);
    border-radius: 8px;
    background: #fff;
    color: var(--srg-ink);
    font-size: 13px;
}
.srg-cs--menu .srg-cs__btn:hover { background: #fff; border-color: var(--srg-navy); }
@media (min-width: 768px) {
    .srg-cs--menu .srg-cs__panel { top: auto; bottom: calc(100% + 8px); }
}

.srg-mm__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--srg-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .srg-mm { animation: none; }
    .srg-mm__anim { transition: none; }
}

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

.page-footer { background: var(--srg-navy); }

.srg-footer {
    background: var(--srg-navy);
    color: var(--srg-footer-text);
    font-size: 15px;
    line-height: 1.5;
}

.srg-footer a { color: inherit; text-decoration: none; }
.srg-footer a:hover { color: #fff; text-decoration: underline; }
.srg-footer p,
.srg-footer address { margin: 0; font-style: normal; }

.srg-footer__service { border-bottom: 1px solid var(--srg-navy-line); }

.srg-footer__service-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 32px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.srg-footer__usp {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    line-height: 1.35;
}
.srg-footer__usp strong { display: block; font-weight: 700; }
.srg-footer__usp strong + * { color: var(--srg-footer-text); font-size: 13px; }

.srg-footer__usp-ico {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--srg-navy-tint);
}
.srg-footer__usp-ico .srg-ico { width: 22px; height: 22px; }

.srg-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px 48px;
    padding-top: 48px;
    padding-bottom: 40px;
}

.srg-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.srg-footer__title {
    margin-bottom: 10px !important;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.srg-footer__title--spaced { margin-top: 18px !important; }

.srg-footer address { margin-bottom: 10px; }
.srg-footer a.srg-footer__strong { color: #fff; }

.srg-footer__hours { width: 100%; max-width: 240px; margin: 0; }
.srg-footer__hours > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--srg-navy-line);
}
.srg-footer__hours dt { font-weight: 400; }
.srg-footer__hours dd { margin: 0; color: #fff; }

.srg-footer a.srg-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 16px;
    border: 1.5px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}
.srg-footer a.srg-footer__cta:hover { background: rgb(255 255 255 / 0.1); text-decoration: none; }
.srg-footer__cta .srg-ico { width: 18px; height: 18px; }

.srg-footer__links { margin: 0; padding: 0; list-style: none; }
.srg-footer__links a { display: flex; align-items: center; min-height: 30px; }

.srg-footer__pills,
.srg-footer__badges { display: flex; flex-wrap: wrap; gap: 10px; }

.srg-footer a.srg-footer__pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 20px;
    background: var(--srg-navy-tint);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.srg-footer a.srg-footer__pill:hover { background: #135aa8; text-decoration: none; }

.srg-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--srg-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}
.srg-footer__badge .srg-flag { width: 22px; height: 15px; box-shadow: 0 0 0 1px #e3e3e3; }

.srg-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: 24px 0 28px;
    border-top: 1px solid var(--srg-navy-line);
}

.srg-footer__efre {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    line-height: 1.4;
}
.srg-footer__efre img { display: block; width: auto; height: 52px; }
.srg-footer__efre span { max-width: 300px; }

.srg-footer__company { font-size: 13px; line-height: 1.6; text-align: right; }

.srg-footer__bottom { background: var(--srg-navy-dark); }

.srg-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #9db5ce;
    font-size: 13px;
}

.srg-footer__bottom-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.srg-footer .srg-cs__btn { height: 30px; padding: 0 10px; border-color: #3d6593; }
.srg-footer .srg-cs__panel a:hover { text-decoration: none; color: var(--srg-ink); }

@media (max-width: 767.98px) {
    .srg-footer { font-size: 14px; }
    .srg-footer__service-inner { gap: 14px; padding-top: 20px; padding-bottom: 20px; }
    .srg-footer__cols { gap: 28px; padding-top: 28px; padding-bottom: 24px; }
    .srg-footer__legal { padding-top: 20px; }
    .srg-footer__company { text-align: left; }
    .srg-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
    .srg-footer .srg-cs__btn { height: 40px; padding: 0 12px; border-radius: 8px; }
}