/* Savonia 2026-11-03 – main menu (Smartwave mega menu): desktop + sticky + mobile side menu, header logo/search alignment.
   Loaded on every page after the Porto CSS (Savonia_Menu, ?v=filemtime). URLs, items and their order are unchanged.
   The top items keep their Porto/savonia-rail side padding (992–1279 / 1280–1399px compact rules stay in savonia-rail.css). */
:root {
    --sv-menu-bar: #e9f2d2;
    --sv-menu-ink: #4f6b10;      /* dark green for text on light green: 5.6:1 on --sv-green-soft */
    --sv-menu-new: #4f7a12;      /* "NEW" pill, white text 5.1:1 */
    --sv-menu-hot: #c2255c;      /* "HOT!" pill, white text 5.6:1 */
}

/* ---------- labels (HOT! / NEW): small pills, no speech-bubble tail ---------- */
.main-nav .menu span.cat-label, .fixed-header .menu span.cat-label, div.mobile-nav .sw-mobile-menu span.cat-label {
    padding: 2px 6px !important; border-radius: 999px !important; font: 700 9px/1.1 "Open Sans", Arial, sans-serif !important;
    letter-spacing: .05em; text-transform: uppercase; color: #fff !important; box-shadow: 0 0 0 2px #fff;
}
.main-nav .menu span.cat-label:before, .fixed-header .menu span.cat-label:before, div.mobile-nav .sw-mobile-menu span.cat-label:before { display: none !important; }
.main-nav .menu span.cat-label-label1, .fixed-header .menu span.cat-label-label1, div.mobile-nav .sw-mobile-menu span.cat-label-label1 { background: var(--sv-menu-new) !important; }
.main-nav .menu span.cat-label-label2, .fixed-header .menu span.cat-label-label2, div.mobile-nav .sw-mobile-menu span.cat-label-label2 { background: var(--sv-menu-hot) !important; }

/* ---------- desktop + sticky (≥992px) ---------- */
@media (min-width: 992px) {
    /* header: logo, search and icons on one centre line; search a little smaller (42px instead of 48px) */
    .header-container.type4 .header.container { align-items: center; gap: 40px; }
    .header-container.type4 .search-area { height: auto; max-width: 600px; margin: 0 auto; align-self: center; }
    .header-container.type4 .cart-area { margin-left: 0; }
    .header-container.type4 .header .form-search { height: 42px; border-radius: 21px; }
    .header-container.type4 .header #search_mini_form .form-search input#search { height: 39px; padding: 0 64px 0 20px; font-size: 14.5px; line-height: 39px; }
    .header-container.type4 .header .form-search button.button { top: 3px; right: 3px; width: 52px; height: 33px; border-radius: 17px; line-height: 33px; }
    .header-container.type4 .header .form-search button.button i { font-size: 17px; line-height: 33px; }

    /* bar */
    .main-nav .menu-wrapper { background: var(--sv-menu-bar); border-radius: 10px; }
    .main-nav ul.menu > li { margin: 0 2px -1px 0; border-radius: 8px; background: transparent !important; transition: background-color .15s ease; }
    .main-nav ul.menu > li.fl-right { margin: 0 0 -1px 2px; }
    .main-nav ul.menu > li > a { color: var(--sv-text) !important; font-weight: 600; letter-spacing: .02em; border-radius: 8px; }
    /* current category: light green + bold; hover / open: Savonia green (dark text keeps 9:1) */
    .main-nav ul.menu > li.act { background: #d6e9a3 !important; }
    .main-nav ul.menu > li.act > a { font-weight: 700; }
    .main-nav ul.menu > li:hover, .main-nav ul.menu > li.sv-open { background: var(--sv-green) !important; }
    .main-nav ul.menu > li.sv-open, html.sv-menu-js .main-nav ul.menu > li.sv-open:hover { border-radius: 8px 8px 0 0; }
    .main-nav ul.menu > li > a:focus-visible { outline: 2px solid var(--sv-menu-ink); outline-offset: -3px; }

    /* chevron (CSS instead of the Porto icon font): down, up when open */
    .main-nav ul.menu > li.menu-full-width > a:after, .main-nav ul.menu > li.menu-static-width > a:after, .main-nav ul.menu > li.menu-parent-item > a:after {
        content: "" !important; position: absolute; top: 50% !important; right: 14px; width: 6px; height: 6px; margin: -5px 0 0 !important;
        border: solid currentColor; border-width: 0 1.6px 1.6px 0; font-family: inherit; transform: rotate(45deg); transition: transform .18s ease;
    }
    .main-nav ul.menu > li.sv-open > a:after { margin-top: -1px !important; transform: rotate(-135deg); }

    /* panel: white card under the bar, 3px green top edge that joins the open item */
    .main-nav ul.menu > li > .nav-sublist-dropdown {
        border-top: 3px solid var(--sv-green) !important; border-radius: 0 0 14px 14px; background: #fff !important;
        box-shadow: 0 22px 40px -18px rgba(47, 47, 47, .35), 0 0 0 1px rgba(47, 47, 47, .06);
    }
    html.sv-menu-js .main-nav ul.menu > li > .nav-sublist-dropdown { display: none !important; }
    html.sv-menu-js .main-nav ul.menu > li.sv-open > .nav-sublist-dropdown { display: block !important; animation: sv-menu-in .16s ease-out; }
    .main-nav ul.menu > li > .nav-sublist-dropdown { padding: 0 !important; }
    .main-nav ul.menu > li > .nav-sublist-dropdown > .container { padding: 26px 22px 28px !important; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .mega-columns { margin: 0; display: flex; align-items: flex-start; gap: 20px; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .mega-columns > div { float: none; width: auto !important; padding: 0; }
    /* fixed-width panel (Sapun: 330px in the category settings): room for one column of names + the picture */
    .main-nav ul.menu > li.menu-static-width > .nav-sublist-dropdown { width: 560px !important; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .mega-columns:before, .main-nav ul.menu > li > .nav-sublist-dropdown .mega-columns:after { content: none; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .block1 { flex: 1 1 auto; width: auto; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .block1 > .row { margin: 0; }
    /* columns: an even grid instead of the 25% floats (same reading order) */
    .main-nav ul.menu > li > .nav-sublist-dropdown .block1 > .row > ul {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 2px 16px; margin: 0; padding: 0;
    }
    .main-nav ul.menu > li > .nav-sublist-dropdown .block1 > .row > ul > li { float: none; width: auto; min-height: 0; margin: 0; padding: 0; }
    .main-nav ul.menu > li > .nav-sublist-dropdown a.level1 {
        display: flex !important; align-items: center; min-height: 40px; margin: 0 !important; padding: 8px 12px !important; border-radius: 8px;
        color: var(--sv-text) !important; font-size: 14.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none !important;
        transition: background-color .12s ease, color .12s ease;
    }
    .main-nav ul.menu > li > .nav-sublist-dropdown a.level1 > span { display: inline; }
    .main-nav ul.menu > li > .nav-sublist-dropdown a.level1:hover, .main-nav ul.menu > li > .nav-sublist-dropdown a.level1:focus-visible {
        background: var(--sv-green-soft); color: var(--sv-menu-ink) !important; text-decoration: none; outline: 0;
    }
    .main-nav ul.menu > li > .nav-sublist-dropdown a.level1:focus-visible { box-shadow: inset 0 0 0 2px var(--sv-menu-ink); }
    .main-nav ul.menu > li > .nav-sublist-dropdown li.act > a.level1 { background: var(--sv-green-soft); color: var(--sv-menu-ink) !important; font-weight: 700; }
    .main-nav ul.menu > li > .nav-sublist-dropdown a.level1 span.cat-label { position: relative !important; top: -1px !important; right: auto !important; left: auto !important; margin: 0 0 0 7px !important; box-shadow: none; white-space: nowrap; }
    /* category picture on the right of some panels */
    /* (the CMS gives the picture position:absolute + a fixed top tuned for the old panel): in the flow, flush in the panel's bottom-right corner */
    .main-nav ul.menu > li > .nav-sublist-dropdown .right-mega-block { flex: 0 0 auto; width: auto; align-self: flex-end; margin: 0 -22px -28px auto; }
    .main-nav ul.menu > li > .nav-sublist-dropdown .right-mega-block img {
        position: static !important; display: block; height: 120px !important; width: auto !important; z-index: auto !important; border-radius: 0 0 14px 0 !important;
    }
}
/* 992–1279px: savonia-rail.css gives the items 9px (sticky: 7px) side padding so the bar stays on one line – no room for the chevron */
@media (min-width: 992px) and (max-width: 1279px) {
    .main-nav ul.menu > li > a:after { display: none !important; }
}
/* up to 1399px the bar has no spare width (sticky: room for the cart): no extra letter spacing / item gap */
@media (min-width: 992px) and (max-width: 1399px) {
    .main-nav ul.menu > li, .main-nav ul.menu > li.fl-right { margin-left: 0; margin-right: 0; }
    .main-nav ul.menu > li > a { letter-spacing: 0; }
}
@media (min-width: 1400px) and (max-width: 1599px) {
    .header-container.type4.sticky-header .main-nav ul.menu > li, .header-container.type4.sticky-header .main-nav ul.menu > li.fl-right { margin-left: 0; margin-right: 0; }
    .header-container.type4.sticky-header .main-nav ul.menu > li > a { letter-spacing: 0; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
    .header-container.type4.sticky-header .main-nav ul.menu > li > a:after { display: none !important; } /* sticky: 10px padding (round 22) */
}
@keyframes sv-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- mobile side menu (<992px): light panel, 48px rows, +/− buttons ---------- */
@media (max-width: 991px) {
    .mobile-nav.side-block {
        width: 300px; max-width: 86vw; left: -300px; padding: 0 0 28px !important; background: #fff !important;
        box-shadow: 0 0 36px rgba(47, 47, 47, .22); overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    body.mobile-nav-shown .mobile-nav.side-block { left: 0; }
    body.mobile-nav-shown .page { left: 300px; left: min(300px, 86vw); }
    body.mobile-nav-shown .mobile-nav-overlay { opacity: .3; }

    .sv-mnav__head {
        position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
        min-height: 56px; padding: 6px 8px 6px 18px; border-bottom: 3px solid var(--sv-green); background: #fff;
    }
    .sv-mnav__title { color: var(--sv-text); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .sv-mnav__close {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
        background: var(--sv-green-soft); color: var(--sv-text); cursor: pointer;
    }
    .sv-mnav__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
    .sv-mnav__close:focus-visible { outline: 2px solid var(--sv-menu-ink); outline-offset: 2px; }

    .mobile-nav .menu-all-pages-container { padding: 0; }
    .mobile-nav .sw-mobile-menu { margin: 0; padding: 0; }
    .mobile-nav .sw-mobile-menu > li { position: relative; margin: 0; border-bottom: 1px solid var(--sv-line); background: #fff; }
    .mobile-nav.side-block .sw-mobile-menu li > a, .mobile-nav.side-block .sw-mobile-menu li.over > a {
        display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 !important; padding: 12px 60px 12px 18px !important;
        background: transparent !important; color: var(--sv-text) !important; font-size: 15px; font-weight: 600; line-height: 1.35 !important;
        letter-spacing: .02em; white-space: normal !important; overflow: visible; text-overflow: clip;
    }
    .mobile-nav.side-block .sw-mobile-menu > li.over > a { color: var(--sv-menu-ink) !important; }
    .mobile-nav.side-block .sw-mobile-menu li > a:active { background: var(--sv-green-soft) !important; }
    .mobile-nav.side-block .sw-mobile-menu li > a:focus-visible { outline: 2px solid var(--sv-menu-ink); outline-offset: -3px; }
    .mobile-nav.side-block .sw-mobile-menu li.act > a, .mobile-nav.side-block .sw-mobile-menu li.actParent > a { color: var(--sv-menu-ink) !important; font-weight: 700; }

    /* subcategories: light green block, normal case, 44px rows */
    .mobile-nav.side-block .sw-mobile-menu > li > ul { margin: 0; padding: 4px 0 8px; background: var(--sv-green-soft) !important; }
    .mobile-nav.side-block .sw-mobile-menu > li > ul > li { margin: 0; border: 0; background: transparent !important; }
    .mobile-nav.side-block .sw-mobile-menu > li > ul > li > a {
        min-height: 44px; padding: 10px 18px 10px 30px !important; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none !important;
    }
    .mobile-nav.side-block .sw-mobile-menu > li > ul > li > a:before { display: none !important; }
    .mobile-nav.side-block .sw-mobile-menu > li > ul > li > a > span { display: inline-flex; align-items: center; gap: 8px; }

    /* +/− button (the Porto "open-child"), 44 × 44 */
    .mobile-nav.side-block .sw-mobile-menu li > .open-child {
        position: absolute; top: 2px; right: 8px; z-index: 1; float: none; width: 44px !important; height: 44px !important; margin: 0;
        border: 1px solid #dde9bf; border-radius: 12px; background: var(--sv-green-soft) !important; font-size: 0; cursor: pointer;
    }
    .mobile-nav.side-block .sw-mobile-menu li > .open-child:before, .mobile-nav.side-block .sw-mobile-menu li > .open-child:after {
        content: "" !important; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px;
        background: var(--sv-menu-ink) !important; font-family: inherit; line-height: 0; opacity: 1; transition: transform .2s ease;
    }
    .mobile-nav.side-block .sw-mobile-menu li > .open-child:after { transform: rotate(90deg); }
    .mobile-nav.side-block .sw-mobile-menu li.over > .open-child { border-color: var(--sv-green); background: var(--sv-green) !important; }
    .mobile-nav.side-block .sw-mobile-menu li.over > .open-child:before, .mobile-nav.side-block .sw-mobile-menu li.over > .open-child:after { background: var(--sv-text) !important; }
    .mobile-nav.side-block .sw-mobile-menu li.over > .open-child:after { transform: rotate(0deg); }
    .mobile-nav.side-block .sw-mobile-menu li > .open-child:focus-visible { outline: 2px solid var(--sv-menu-ink); outline-offset: 2px; }

    .mobile-nav .sw-mobile-menu span.cat-label { position: static !important; right: auto !important; left: auto !important; margin: 0 !important; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .main-nav ul.menu > li, .main-nav ul.menu > li > a:after, .main-nav .nav-sublist-dropdown a.level1,
    .mobile-nav.side-block, .mobile-nav .open-child:before, .mobile-nav .open-child:after { transition: none !important; animation: none !important; }
}