/* Active navigation and a product choice panel on desktop only. */
.navbar .navbar-nav > .nav-item { align-items: center; display: flex; flex-wrap: wrap; position: relative; }
.navbar .nav-link.active,
.navbar .current-menu-item > .nav-link,
.navbar .current-menu-parent > .nav-link,
.navbar .current-menu-ancestor > .nav-link { color: var(--orange); }
.navbar .navbar-nav > .nav-item > .nav-link.active { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.sv-nav-toggle { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--ink); display: none; height: 36px; justify-content: center; padding: 0; width: 28px; }
.sv-nav-toggle i { font-size: .7rem; transition: transform .18s; }
.sv-nav-toggle:hover { background: #fff0e7; color: var(--orange); }
.sv-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.navbar .nav-link:focus-visible, .sv-nav-toggle:focus-visible, .sv-mega-all:focus-visible { border-radius: 8px; outline: 2px solid var(--orange); outline-offset: 3px; }
.navbar .sub-menu { list-style: none; margin: 0; padding: .55rem; }
.navbar .sub-menu .nav-link { border-radius: 9px; font-size: .85rem; padding: .7rem .85rem !important; text-decoration: none; }
.navbar .sub-menu .nav-link:hover, .navbar .sub-menu .nav-link.active { background: #fff0e7; color: var(--orange); }

@media (min-width: 992px) {
    .sv-nav-ready .sv-nav-toggle { display: inline-flex; }
    .navbar .navbar-nav > .nav-item { flex-wrap: nowrap; }
    .navbar .navbar-nav > .nav-item > .nav-link { white-space: nowrap; }
    .navbar .sv-nav-has-submenu > .nav-link { padding-right: .15rem !important; }
    .navbar .sv-nav-has-submenu > .sub-menu { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(23,34,56,.14); display: none; left: 0; max-height: calc(100dvh - 110px); min-width: 265px; overflow-y: auto; position: absolute; top: 100%; z-index: 1050; }
    .navbar .sv-nav-has-submenu.is-open > .sub-menu,
    .navbar:not(.sv-nav-ready) .sv-nav-has-submenu:hover > .sub-menu,
    .navbar:not(.sv-nav-ready) .sv-nav-has-submenu:focus-within > .sub-menu { display: block; }
    .navbar .sub-menu .nav-link { display: block; white-space: nowrap; }

    .navbar .navbar-nav > .sv-nav-mega { position: static; }
    .navbar .sv-nav-mega > .sub-menu { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); left: 50%; min-width: 0; padding: 20px; top: calc(100% - 4px); transform: translateX(-50%); width: min(1000px, calc(100vw - 48px)); }
    .navbar .sv-nav-mega.is-open > .sub-menu,
    .navbar:not(.sv-nav-ready) .sv-nav-mega:hover > .sub-menu,
    .navbar:not(.sv-nav-ready) .sv-nav-mega:focus-within > .sub-menu { display: grid; }
    .sv-mega-heading, .sv-mega-footer, .sv-nav-mega > .sub-menu > .sv-menu-extra-item { grid-column: 1 / -1; }
    .sv-mega-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 2px; }
    .sv-mega-heading h2 { color: var(--ink); font-size: 1.3rem; letter-spacing: -.035em; line-height: 1.2; margin: 0; }
    .sv-mega-heading > span { color: var(--muted); font-size: .75rem; }
    .sv-menu-product-item { display: flex; min-width: 0; }
    .navbar .sub-menu .nav-link.sv-menu-product { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); display: grid; gap: 12px; grid-template-columns: 96px minmax(0, 1fr); min-height: 160px; padding: 14px !important; white-space: normal; width: 100%; }
    .navbar .sub-menu .nav-link.sv-menu-product:hover,
    .navbar .sub-menu .nav-link.sv-menu-product.active { background: #fff8f3; border-color: var(--orange); }
    .sv-menu-photo { align-items: center; display: flex; height: 112px; justify-content: center; width: 96px; }
    .sv-menu-photo img { height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
    .sv-menu-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .sv-menu-title { color: var(--ink); font-size: .86rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
    .sv-menu-product.active .sv-menu-title { color: var(--orange); }
    .sv-menu-advice { color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.5; }
    .sv-menu-power { align-self: flex-start; background: var(--cream); border-radius: 6px; color: #394458; font-size: .69rem; font-weight: 600; line-height: 1.35; max-width: 100%; padding: 4px 6px; }
    .sv-menu-price { color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.3; }
    .sv-menu-price small, .sv-menu-from { color: var(--muted); font-size: .69rem; font-weight: 400; }
    .sv-mega-footer { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; margin-top: 2px; padding-top: 12px; }
    .navbar .sv-mega-all { align-items: center; color: var(--orange); display: inline-flex; font-size: .78rem; font-weight: 700; gap: 7px; min-height: 36px; text-decoration: none; }
    .navbar .sv-mega-all:hover { color: #c3470c; text-decoration: underline; }
    .sv-mega-footer > span { color: var(--muted); font-size: .75rem; }
    .sv-nav-mega > .sub-menu > .sv-menu-extra-item { order: 1; }
    .sv-mega-footer { order: 2; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .brand { font-size: 1.1rem; }
    .navbar .navbar-nav > .nav-item > .nav-link { font-size: .82rem; padding: .7rem .4rem !important; }
    .navbar .sv-nav-has-submenu > .nav-link { padding-right: .1rem !important; }
    .sv-nav-toggle { width: 24px; }
    .navbar #mainMenu > .btn { font-size: .82rem; padding: .8rem .75rem; white-space: nowrap; }
    .navbar .sub-menu .nav-link.sv-menu-product { gap: 10px; grid-template-columns: 80px minmax(0, 1fr); }
    .sv-menu-photo { width: 80px; }
}

@media (max-width: 991px) {
    .navbar .navbar-collapse { max-height: calc(100dvh - 80px); overflow-y: auto; }
    .navbar .navbar-nav > .nav-item > .nav-link { flex: 1; }
    .navbar .sv-nav-has-submenu > .sub-menu, .navbar .sv-nav-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { .sv-nav-toggle i { transition: none; } }