/*
    Storefront layout styles. Approximates the legacy ECommerce site layout
    (topbar / main header / nav / body / 4-col footer) using the Inter font
    and the brand palette. Light, modern, Bootstrap-5 friendly. Brand colours
    are pulled from CSS custom properties set inline by the layout from
    StoreConfiguration so admins can rebrand without touching CSS.
*/

:root {
    --brand-primary: #003600;
    --brand-accent: #ed185f;
    --brand-charcoal: #1d2631;
    --brand-text: #2a2f37;
    --brand-muted: #6b7280;
    --brand-border: #e5e7eb;
    --brand-bg: #f8f9fb;
    --brand-card: #ffffff;
    --brand-radius: 10px;
    --brand-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    color: var(--brand-text);
    background: var(--brand-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-accent); }

ul {  padding-left: 0; }

/* ─── Top bar ─── */
/* Top-right country flag in the topbar — admin-managed via /admin/layout/edit. */
.sf-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sf-flag img {
    width: 24px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

/* "Request a quote" CTA in the main header — admin-managed via /admin/layout/edit. */
.sf-rfq {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 18px;
    background: var(--brand-accent);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s, transform .15s;
}
.sf-rfq:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }

/* Optional admin-supplied "About" override in the footer's first column. */
.sf-footer__custom { font-size: 14px; line-height: 1.6; }
.sf-footer__custom :first-child { margin-top: 0; }
.sf-footer__custom :last-child { margin-bottom: 0; }
.sf-footer__custom a { color: inherit; text-decoration: underline; }

/* Sitewide layout strip — renders admin-editable HTML above page content on
   every page. Light background so it visibly separates from the nav above
   and the page below; admin-supplied HTML keeps its own styling. */
.sf-layout-strip {
    background: #fffbe6;
    border-bottom: 1px solid #f3e8a8;
    color: #7a5a00;
    padding: 12px 0;
    font-size: 14px;
}
.sf-layout-strip a { color: var(--brand-primary); font-weight: 600; }
.sf-layout-strip p:last-child { margin-bottom: 0; }

.sf-topbar {
    background: #333;
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    padding: 6px 0;
}
.sf-topbar a { color: rgba(255,255,255,.92); }
.sf-topbar a:hover { color: #fff; }
.sf-topbar ul { display: flex; gap: 18px; margin: 0; padding: 0; flex-wrap: wrap; }
.sf-topbar ul li { display: inline-flex; align-items: center; }
.sf-topbar i { margin-right: 6px; opacity: .9; }
.sf-linklike {
    background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.sf-linklike:hover { color: #fff; }
.sf-topbar__inner { flex-wrap: wrap; gap: 6px 18px; }
.sf-topbar__wish { position: relative; }

@media (max-width: 575.98px) {
    .sf-search input {
        width: 100%;
    }
    .sf-topbar { padding: 4px 0; font-size: 12.5px; }
    .sf-topbar__inner { flex-wrap: nowrap; gap: 8px; }
    .sf-topbar__left { min-width: 0; }
    .sf-topbar__left li, .sf-topbar__left a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-topbar__right { flex-wrap: nowrap !important; gap: 2px !important; flex-shrink: 0; }
    .sf-topbar__right .sf-topbar__label { display: none; }
    .sf-topbar__right a, .sf-topbar__right .sf-linklike {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 50%;
        transition: background-color .15s ease;
    }
    .sf-topbar__right a:hover, .sf-topbar__right .sf-linklike:hover,
    .sf-topbar__right a:focus-visible, .sf-topbar__right .sf-linklike:focus-visible { background: rgba(127,127,127,.18); }
    .sf-topbar__right i { margin-right: 0; font-size: 14px; }
    .sf-topbar__wish .sf-wish-count {
        position: absolute; top: 3px; right: 1px; margin-left: 0;
        min-width: 15px; line-height: 15px; font-size: .6rem; padding: 0 3px;
    }
    .sf-topbar__right .sf-flag { padding-left: 6px; }
    .sf-topbar__right .sf-flag img { width: 22px; height: 15px; }
}

/* ─── Main header ─── */
.sf-header {
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
    padding: 16px 0;
}
.sf-logo img {
    /*height: 56px;*/
    width: auto;
    display: block;
}
.sf-search {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: stretch;
}
.sf-search input {
    flex: 1;
    height: 52px;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: 0 50px 0 18px;
    font: inherit;
    background: #f1f2f4;
    color: var(--brand-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sf-search input::placeholder { color: #9aa1aa; font-weight: 500; }
.sf-search input:focus {
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,54,0,.10);
}
.sf-search button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--brand-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    transition: color .15s;
}
.sf-search button:hover { color: var(--brand-primary); }
.sf-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    background: #fff;
    color: var(--brand-text);
    font-weight: 600;
    transition: border-color .15s, background .15s, color .15s;
}
.sf-cart:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

/* ─── Nav (legacy NetworkDistri navbar structure, modernised) ────────── */
/* Skinned to match the live NetworkDistri site: light/white menu bar with
   uppercase dark links, accent left-border on the active dropdown, and a
   light-gray mega-menu rail with a green active indicator. */
.header-menu {
    background: #f4f5f7;
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    position: relative;
    z-index: 50;
}
.header-menu .container { position: relative; }
.header-menu .navbar { padding: 0; background: transparent !important; }
.header-menu .navbar-collapse { padding: 0; }
.header-menu .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.header-menu .nav-item { position: static; }
.header-menu .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3d4654 !important;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 18px;
    border-left: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    line-height: 1.2;
}
.header-menu .nav-link:hover,
.header-menu .nav-link:focus {
    color: var(--brand-primary) !important;
    background: rgba(0,54,0,.04);
}
.header-menu .nav-item.dropdown.show > .nav-link,
.header-menu .nav-item.dropdown[aria-expanded="true"] > .nav-link {
    color: var(--brand-primary) !important;
    background: #fff;
    border-left-color: var(--brand-primary);
    box-shadow: inset 0 2px 0 var(--brand-primary);
}

.header-menu .navbar-nav > .nav-item.active > .nav-link {
    color: var(--brand-primary) !important;
    font-weight: 800;
    background: rgba(0,54,0,.06);
    border-left-color: var(--brand-primary);
    box-shadow: inset 0 -3px 0 var(--brand-primary);
}
.header-menu .dropdown-menu a.dropdown-item.active {
    color: var(--brand-primary) !important;
    font-weight: 700;
    background: rgba(0,54,0,.06);
}
.header-menu .dropdown-toggle::after {
    margin-left: 8px;
    border-top-color: rgba(0,0,0,.55);
    transition: transform .15s;
}
.header-menu .nav-item.dropdown.show > .dropdown-toggle::after { transform: rotate(180deg); }

/* Hover-open with a tiny intent-delay so the menu doesn't flicker. */
@media (min-width: 768px) {
    .header-menu .nav-item.dropdown:hover > .dropdown-menu,
    .header-menu .nav-item.dropdown.show > .dropdown-menu { display: block; }
}

/* Mega-dropdown panel (matches legacy `.dropdown-menu` full-width). */
.header-menu .dropdown-menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--brand-text);
    border: 0;
    border-top: 1px solid var(--brand-border);
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    z-index: 60;
    animation: sfdrop .15s ease-out;
}
@keyframes sfdrop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.header-menu .dropdown-menu .container { padding: 0; max-width: 100%; }
.header-menu .dropdown-menu .row { margin: 0; }

.header-menu .dropdown-item {
    padding: 6px 0;
    color: var(--brand-text);
    font-size: 13.5px;
    font-weight: 500;
    background: transparent;
    text-decoration: none;
    border-radius: 0;
    white-space: normal;
}
.header-menu .dropdown-item:hover { color: var(--brand-accent); background: transparent; }
.header-menu .dropdown-menu .col-md-2 > ul:first-child .dropdown-item {
    font-weight: 700;
    color: var(--brand-charcoal);
    font-size: 13.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 6px;
}

/* Nested mega-menu (IsNested = true) — vertical tabs on the left, panel on the right. */
.header-menu .dropdown-menu.foraccess { padding: 0; }
.header-menu .blok { padding: 0; max-width: 100%; }
.header-menu .blok-body .row {
    margin: 0;
    align-items: stretch;
    min-height: 460px;
}
.header-menu .tab-menu {
    list-style: none;
    padding: 14px 0;
    margin: 0;
    background: #f4f5f7;
    border-right: 1px solid var(--brand-border);
    min-height: 460px;
    max-height: 70vh;
    overflow-y: auto;
}
.header-menu .tab-menu li { margin: 0; }
.header-menu .tab-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    color: #3d4654;
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.header-menu .tab-menu li a:hover {
    background: #eaecef;
    color: var(--brand-primary);
}
.header-menu .tab-menu li.active a {
    background: #eaf6e9;
    color: var(--brand-primary);
    font-weight: 700;
    border-left-color: var(--brand-primary);
}
.header-menu .tab-menu li a .fa { font-size: 11px; opacity: .55; }

.header-menu .tab-content { padding: 22px 26px; }
.header-menu .tab-pane { display: none; }
.header-menu .tab-pane.active { display: block; }
.header-menu .tab-pane h3.eshop_cat_name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-charcoal);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand-border);
}
.header-menu .tab-pane .col-md-3 { padding: 0 16px 16px 0; }
.header-menu .tab-pane .accesa {
    display: block;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--brand-primary);
    margin-bottom: 6px;
    text-decoration: none;
    line-height: 1.45;
}
.header-menu .tab-pane .accesa:hover { color: var(--brand-accent); text-decoration: underline; }
.header-menu .tab-pane ul,
.header-menu .tab-pane .accesa-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.header-menu .tab-pane ul li { padding: 2px 0; }
.header-menu .tab-pane ul li a {
    font-size: 12.5px;
    color: var(--brand-muted);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.45;
}
.header-menu .tab-pane ul li a:hover { color: var(--brand-accent); }
/* Deeper nested levels (L4+) — slightly indented + lighter so the hierarchy reads. */
.header-menu .tab-pane .accesa-deep {
    margin: 4px 0 4px 10px;
    padding-left: 8px;
    border-left: 1px dashed var(--brand-border);
}
.header-menu .tab-pane .accesa-deep li a { font-size: 12px; color: var(--brand-muted); }
.header-menu .tab-pane .accesa-deep-2 { opacity: .9; }
.header-menu .tab-pane .accesa-deep-3 { opacity: .8; }
.header-menu .btn-view-m {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--brand-primary);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.header-menu .btn-view-m:hover { text-decoration: underline; color: var(--brand-accent); }

/* Burger (mobile) */
.sf-burger {
    display: none;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    color: var(--brand-text);
    padding: 12px 0;
    font: inherit;
    cursor: pointer;
}
.sf-burger .fa { font-size: 18px; }
.sf-burger__label { font-weight: 700; font-size: 13px; letter-spacing: .04em; }

/* Cart in the nav bar (mobile only) — the header row's cart button is hidden at that width,
   so it sits opposite the burger instead. Absolutely placed rather than flexed to the end so
   it lands on the same spot whichever nav template is rendering between the two. */
.sf-nav-cart { display: none; }

/* Mobile drawer (off-canvas) */
.header-menu .menu-mobile {
    display: none;
    position: fixed;
    top: 0; left: -100%;
    height: 100vh;
    width: min(86vw, 360px);
    background: #fff;
    color: var(--brand-text);
    overflow-y: auto;
    box-shadow: 12px 0 32px rgba(0,0,0,.18);
    transition: left .25s ease;
    z-index: 1100;
    padding: 22px 18px 80px;
}
.header-menu .menu-mobile.is-open { left: 0; }
.header-menu .menu-mobile .close-menu {
    position: absolute;
    top: 12px; right: 12px;
    background: transparent;
    border: 0;
    color: var(--brand-text);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 10px;
}
.header-menu .mobilemainul { list-style: none; padding: 0; margin: 28px 0 0; }
.header-menu .mobilemainul > li { border-bottom: 1px solid var(--brand-border); }
.header-menu .mobilemainul .nav-link {
    display: block;
    color: var(--brand-text) !important;
    padding: 12px 6px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 0;
    background: transparent;
}
.header-menu .mobilemainul .nav-link:hover { color: var(--brand-accent) !important; background: transparent; }
/* Active page in the mobile drawer — light panel, so it matches the accent hover. */
.header-menu .mobilemainul > li.active > .nav-link { color: var(--brand-accent) !important; font-weight: 700; }
.header-menu .mobilemainul > li.active > .mfirstsider { color: var(--brand-accent); font-weight: 700; }

.header-menu .mfirstsider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: none;
}
.header-menu .mfirstsider .fa { color: var(--brand-muted); }
.header-menu .mfirstsider:hover { color: var(--brand-accent); }
.header-menu .mfirstsiderlayer {
    position: fixed;
    top: 0; right: -100%;
    width: min(86vw, 360px);
    height: 100vh;
    background: #fff;
    color: var(--brand-text);
    overflow-y: auto;
    z-index: 1200;
    padding: 18px 18px 60px;
    box-shadow: -12px 0 32px rgba(0,0,0,.18);
    transition: right .25s ease;
}
.header-menu .mfirstsiderlayer.is-open { right: 0; }
.header-menu .mfirstsiderlayer .backtocat,
.header-menu .mfirstsiderlayer .backtosubcat {
    background: none;
    border: 0;
    color: var(--brand-accent);
    font-size: 13.5px;
    font-weight: 700;
    padding: 4px 0 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.header-menu .mobilechildul { list-style: none; padding: 0; margin: 0; }
.header-menu .mobilechildul > li { border-bottom: 1px solid var(--brand-border); }
.header-menu .mobilechildul > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 4px;
    color: var(--brand-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
}
.header-menu .mobilechildul > li > a.dropdown-item--child {
    padding-left: 22px;
    font-size: 13px;
    color: var(--brand-muted);
}
/* Flat mobile drawer: a parent sub-category is a heading, so its children are listed under it as
   an indented group (with the same "show 5, then View More" overflow the mega-menu uses). */
.header-menu .mobilechildul .accesa-list { list-style: none; margin: 0; padding: 0 0 6px 0; }
.header-menu .mobilechildul .accesa-list a {
    display: block;
    padding: 8px 4px 8px 38px;
    font-size: 12.5px;
    color: var(--brand-muted);
    text-decoration: none;
}
.header-menu .mobilechildul .accesa-list a:hover { color: var(--brand-accent); }
.header-menu .mobilechildul .btn-view-m { margin: 2px 0 6px 38px; font-size: 12px; }
.header-menu .mobilechildul > li > a.dropdown-item--child[data-nolink] {
    font-weight: 700;
    color: var(--brand-text);
}

.header-menu .msecsider:hover { color: var(--brand-accent); }
.header-menu .msecsiderlayer {
    position: fixed;
    top: 0; right: -100%;
    width: min(86vw, 360px);
    height: 100vh;
    background: #fff;
    color: var(--brand-text);
    overflow-y: auto;
    z-index: 1300;
    padding: 18px 18px 60px;
    box-shadow: -12px 0 32px rgba(0,0,0,.18);
    transition: right .25s ease;
    display: none;
}
.header-menu .msecsiderlayer.is-open { display: block; right: 0; }
.header-menu .msecsiderlayer .accesh4 {
    display: block;
    padding: 11px 4px;
    border-bottom: 1px solid var(--brand-border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand-charcoal);
    text-decoration: none;
}
.header-menu .msecsiderlayer .accesh4:hover { color: var(--brand-accent); }
.header-menu .msecsiderlayer .accesh4-children {
    display: flex;
    flex-direction: column;
    padding: 4px 0 8px 12px;
}
.header-menu .msecsiderlayer .accesh4-children a {
    padding: 6px 0;
    color: var(--brand-muted);
    font-size: 12.5px;
    text-decoration: none;
}
.header-menu .msecsiderlayer .accesh4-children a:hover { color: var(--brand-accent); }

body.sf-nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 49;
}

/* ─── Mobile (≤767px) ─── */
@media (max-width: 767.98px) {
    .header-menu .navbar-collapse { display: none !important; }
    .header-menu .sf-burger {
        display: inline-flex;
        padding: 12px 0;
        color: #fff;
    }
    .header-menu .menu-mobile { display: block; }

    .sf-cart--header { display: none; }
    .header-menu .sf-nav-cart {
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 50%;
        right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        transform: translateY(-50%);
        z-index: 2;
        padding: 12px 0;
        font-size: 19px;
        line-height: 1;
        color: #fff;
        text-decoration: none;
    }
    /* The shared badge pins to the icon's corner; nudged in so it clears the container edge. */
    .header-menu .sf-nav-cart .sf-badge { top: 4px; right: -9px; box-shadow: none; }
}

/* ─── Main / body wrapper ─── */
.sf-main {
    flex: 1;
    padding: 32px 0 56px;
}

/* ─── CMS / fixed-page article ─── */
.cms-article {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    box-shadow: var(--brand-shadow);
    padding: 36px 40px 44px;
}
.cms-article h1 {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: var(--brand-charcoal);
}
.cms-article .cms-body { color: var(--brand-text); line-height: 1.7; }
.cms-article .cms-body p { margin: 0 0 16px; }
.cms-article .cms-body img { max-width: 100%; height: auto; border-radius: 8px; }
.cms-article .cms-body a { color: var(--brand-accent); }
.cms-article .cms-body table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.cms-article .cms-body th, .cms-article .cms-body td {
    border: 1px solid var(--brand-border); padding: 8px 12px;
}
.cms-article .cms-meta {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-border);
    font-size: .8rem;
    color: var(--brand-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─── Footer ─── */
.sf-footer {
    background: var(--brand-charcoal);
    padding: 48px 0 20px;
    margin-top: auto;
    font-size: 13.5px;
}
/*.sf-footer a { color: rgba(255,255,255,.78); }*/
.sf-footer a:hover { color: #fff; }
.sf-footer h6 {
    /*color: #fff;*/
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    margin-bottom: 14px;
}
.sf-footer ul { display: flex; flex-direction: column; gap: 6px; padding-left: 0; }
.sf-footer ul a { font-size: 13.5px; }
.sf-footer__logo {
    height: 44px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 14px;
}
.sf-footer__about {  line-height: 1.6; }
.sf-footer__addr {  margin: 6px 0; }
.sf-footer__addr i { width: 18px; color: var(--brand-accent); }
.sf-footer__payments { max-width: 100%; margin-top: 14px; opacity: .9; border-radius: 6px; }

/* Footer social-channel icon row. Surface area is intentionally generous —
   42px circles hit the 44×44 mobile-tap-target floor without feeling chunky.
   Hover uses the brand-accent variable so a re-themed store keeps consistency. */
.sf-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.sf-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    /*color: rgba(255,255,255,.85) !important;*/
    transition: background-color .15s ease, transform .15s ease;
}
.sf-footer__social a:hover {
    background: var(--brand-accent);
    /*color: #fff !important;*/
    transform: translateY(-1px);
}
.sf-footer__social i { font-size: 16px; }

.sf-newsletter {
    display: flex;
    margin-bottom: 14px;
}
.sf-newsletter input {
    flex: 1;
    height: 38px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgb(0 0 0 / 6%);
    color: #3d4654;
    border-radius: 6px 0 0 6px;
    padding: 0 12px;
    font: inherit;
    outline: none;
}
.sf-newsletter input::placeholder { color: rgba(255,255,255,.45); }
.sf-newsletter button {
    height: 38px;
    padding: 0 16px;
    border: 0;
    background: var(--brand-accent);
    color: #fff;
    font-weight: 700;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background .15s;
}
    .sf-newsletter button:hover {
        background: var(--brand-primary)
    }

.sf-footer__copy {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    /*color: rgba(255,255,255,.55);*/
}

/* ─── Footer · top "Register" band ─── */
.sf-footer-reg {
    background: #f3f4f6;
    color: #1f2937;
    padding: 40px 0 36px;
}
.sf-footer-reg__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 14px; }
.sf-footer-reg__bullets { padding-left: 18px; margin: 0 0 18px; line-height: 1.7; }
.sf-footer-reg__bullets li { margin-bottom: 4px; }
.sf-footer-reg__btn {
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
    .sf-footer-reg__btn:hover {
        filter: brightness(1.25);
        color: #fff;
        transform: translateY(-1px);
    }
.sf-footer-reg__news { margin-top: 22px; max-width: 360px; }
.sf-footer-reg__news small { display: block; font-weight: 600; margin-bottom: 6px;  }
.sf-footer-reg__news .sf-newsletter { margin-bottom: 0; }
.sf-footer-reg__news .sf-newsletter input { border-color: #d1d5db; background: #fff; color: #1f2937; }
.sf-footer-reg__news .sf-newsletter input::placeholder { color: #9ca3af; }
.sf-footer-reg__options h6 {
    text-transform: none;
    font-weight: 700;
    font-size: .95rem;
    margin: 0 0 10px;
}
.sf-footer-reg__options h6:nth-of-type(2) { margin-top: 22px; }
.sf-footer-reg__paymentimg,
.sf-footer-reg__deliveryimg { max-width: 100%; height: auto; }

/* ─── Footer · main band extras ─── */
.sf-footer__heading { font-size: 1.25rem; font-weight: 700; margin: 0 0 18px; }
.sf-footer__contact { list-style: none; display: flex; flex-direction: column; gap: 16px; padding-left: 0; }
.sf-footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.sf-footer__contact li i { width: 20px; margin-top: 3px; color: var(--brand-accent); font-size: 15px; }
.sf-footer__contact p { margin: 0; line-height: 1.5; }
.sf-footer__contact strong { display: block; font-size: 14.5px; }
.sf-footer__contact a { text-decoration: underline; }
.sf-footer__about h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 12px;
}
.sf-footer__about-logo img { height: 40px; width: auto; background: #fff; padding: 5px 8px; border-radius: 6px; }
.sf-footer__about p { line-height: 1.65; font-size: 13px; }
.sf-footer__cols { margin-top: 34px; }
.sf-footer__cols h4 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.sf-footer__menu { list-style: none; display: flex; flex-direction: column; gap: 7px; padding-left: 0; }
.sf-footer__menu a { font-size: 13.5px; text-decoration: none; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .sf-topbar ul { gap: 12px; font-size: 12px; }
    .sf-header { padding: 14px 0; }
    .sf-logo { flex: 0 0 100%; display: flex; justify-content: center; }
    .sf-logo img { max-width: 75%; height: auto; }
    .sf-cart { justify-content: center; }
    .cms-article { padding: 24px 22px; border-radius: 12px; }
    .sf-footer-reg__options { margin-top: 10px; }
    .sf-search {min-width: 100%;}
    .js-paypal-inline{
        margin:0 auto;
    }
}

/* ════════ Nav templates (Admin → Layout → Navigation template) ════════ */

/* ── "sidebar": eShop vertical mega-menu (matches the legacy NetworkDistri look) ── */
.header-menu[data-nav-template="sidebar"] {
    background: var(--brand-primary);
    border-top-color: #2f3338;
    border-bottom-color: #2f3338;
}
.header-menu[data-nav-template="sidebar"] .navbar { padding: 0; }
.eshop-bar { display: flex; align-items: stretch; flex-wrap: wrap; width: 100%; }
.eshop { position: relative; }
.eshop__btn {
    display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px;
    background: transparent; color: #d7dade; border: none; text-decoration: none;
    font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em;
    cursor: pointer; white-space: nowrap;
}
.eshop:hover > .eshop__btn, .eshop.is-open > .eshop__btn, .eshop__btn--leaf:hover { background: #4a5057; color: #fff; }
.eshop__caret { font-size: 11px; opacity: .8; transition: transform .15s; }
.eshop.is-open .eshop__caret { transform: rotate(180deg); }
.eshop__panel {
    position: absolute; top: 100%; left: 0; width: 280px; background: #3a3f44;
    z-index: 1200; display: none; box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.eshop.is-open .eshop__panel, .eshop:hover .eshop__panel { display: block; }
.eshop__flyout-head { display: none; }
.eshop__cats {
    list-style: none; margin: 0; padding: 0;
    /* Tall category lists scroll inside the panel instead of running off-screen.
       The child flyout is anchored to .eshop__panel (an ancestor), so it is not
       clipped by this scroll container. */
    max-height: min(76vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.32) transparent;
}
.eshop__cats::-webkit-scrollbar { width: 8px; }
.eshop__cats::-webkit-scrollbar-track { background: transparent; }
.eshop__cats::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
.eshop__cats::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
.eshop__cat { position: static; }
.eshop__cat-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 18px; color: #e7e9ec; text-decoration: none; font-size: 14px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.eshop__cat:hover > .eshop__cat-link { background: #4a5057; color: #fff; }
.eshop__cat.has-subs:hover > .eshop__cat-link i { color: var(--brand-accent, #ed185f); }
.eshop__flyout {
    position: absolute;
    top: 0;
    left: 100%;
    min-height: 100%;
    min-width: 760px;
    max-width: 62vw;
    background: #2f3338;
    padding: 14px;
    display: none;
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    translate: -20px 0px;
}
.eshop__cat:hover > .eshop__flyout { display: block; }
.eshop__subgrid { display: grid; grid-template-columns: repeat(4, 1fr); }
.eshop__sub {
    display: block; background: #fff; color: #2a2f37; border: 1px solid #e5e7eb;
    margin: -1px 0 0 -1px; padding: 11px 14px; font-size: 13px; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eshop__sub:hover { background: #f8f9fb; color: var(--brand-primary, #003600); }
.eshop-links { display: flex; align-items: center; list-style: none; margin: 0 0 0 6px; padding: 0; flex-wrap: wrap; }
/* ─── Active page, eShop sidebar template ───────────────────────────────────
   Placed after the base rules above so it wins the cascade. The bar and the
   category panel are dark (#3a3f44 / #d7dade text), so the active entry uses
   white text plus an accent bar rather than the near-black brand green. The
   flyout tiles are white, so those can use the brand colour. */
.eshop-bar .eshop.active > .eshop__btn,
.eshop-bar a.eshop__btn--leaf.active,
.eshop-bar .eshop-links__item.active > a {
    color: #fff !important;
    background: #4a5057;
    box-shadow: inset 0 -3px 0 var(--brand-accent, #ed185f);
}
.eshop__cats .eshop__cat.active > .eshop__cat-link {
    color: #fff !important;
    background: #4a5057;
    box-shadow: inset 3px 0 0 var(--brand-accent, #ed185f);
}
.eshop__subgrid a.eshop__sub.active {
    color: var(--brand-primary, #003600) !important;
    background: #eef2f6;
    font-weight: 700;
}
.eshop-links__sub a.active { color: var(--brand-accent, #ed185f) !important; font-weight: 700; }

.eshop-links__item { position: relative; }
.eshop-links__item > a {
    display: block; height: 46px; line-height: 46px; padding: 0 15px; color: #d7dade;
    text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}

.pdp-desc ul {
    padding-left: 20px;
}
.eshop-links__item > a:hover { color: #fff; }
.eshop-links__sub {
    display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff;
    list-style: none; margin: 0; padding: 6px 0; box-shadow: 0 14px 30px rgba(0,0,0,.18); z-index: 1200;
}
/* The dropdown opens on hover, so the caret flips on hover rather than on an is-open class. */
.eshop-links__item > a .eshop__caret { margin-left: 6px; }
.eshop-links__item.has-children:hover > a .eshop__caret { transform: rotate(180deg); }
.eshop-links__item:hover .eshop-links__sub { display: block; }
.eshop-links__sub a { display: block; padding: 8px 16px; color: #2a2f37; text-decoration: none; font-size: 13px; }
.eshop-links__sub a:hover { background: #f8f9fb; color: var(--brand-primary, #003600); }
@media (max-width: 991px) { .eshop__flyout { min-width: 480px; } .eshop__subgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .eshop-bar { display: none; } }

/* ── "simple": compact single-column dropdowns ── */
.dropdown-menu--simple { width: auto; min-width: 240px; max-width: 320px; left: auto; right: auto; padding: 8px 0; }
.dropdown-menu--simple .container, .dropdown-menu--simple .row { display: block; width: auto; margin: 0; padding: 0; }
.nav-simple { list-style: none; margin: 0; padding: 0; }
.nav-simple > li > a { display: block; padding: 8px 18px; font-weight: 600; }
.nav-simple .accesa-list { list-style: none; margin: 0; padding: 0 0 6px 16px; }
.nav-simple .accesa-list a { display: block; padding: 5px 18px; font-size: 13px; color: var(--brand-muted, #6b7280); }
.nav-simple .btn-view-m { margin: 4px 18px; font-size: 12px; }

/* Fallback images (site-images.js swapped a broken product/brand picture for the logo).
   The logo is wide and the slot it lands in is usually square, so letterbox it and dim it —
   it should read as "no picture", not as branding placed there on purpose. */
img.is-img-fallback {
    object-fit: contain !important;
    background: #f6f7f9;
    padding: 8%;
}

/* Nav headings: a sub-category whose children are listed right beneath it is a label, not a
   destination. The markup keeps the <a> (so every existing menu rule still matches) but drops
   the href, which already makes it inert — these rules just stop it *looking* clickable. */
.nav-simple a[data-nolink],
.dropdown-menu a[data-nolink],
.mfirstsiderlayer a[data-nolink],
.eshop-bar a[data-nolink] {
    cursor: default;
    text-decoration: none;
}

.dropdown-menu a[data-nolink]:hover,
.mfirstsiderlayer a[data-nolink]:hover,
.eshop-bar a[data-nolink]:hover {
    text-decoration: none;
}