/**
 * BurnOut Italy — boi/default base styles (3060 righe monolite)
 *
 * TABLE OF CONTENTS
 * Aggiornare la colonna "line" quando si inserisce/rimuove codice — serve
 * come mappa per dev futuri. Il file è un monolite storico (ex-Ultimo) —
 * lo split in moduli è tracciato in issue #236 Level 2, richiede visual
 * regression testing perché le sezioni sono interdipendenti.
 *
 *  line  section                                 note
 *     4  GLOBAL BASE / RESETS ................. body, a, img, headings, forms
 *   223  LAYOUT ............................... .main, .col-main, .sidebar, grid12-* (legacy Ultimo)
 *   325  BUTTONS .............................. .button, .btn-cart, disabled/loading states
 *   405  FORMS ................................ input/select/textarea base
 *   435  MESSAGES ............................. .success-msg, .error-msg, .note-msg
 *   459  TOP BAR .............................. .top-bar (promo strip)
 *   499  HEADER ............................... logo, search, mini-cart, mobile hamburger, offcanvas
 *  1158  NAVIGATION ........................... topMenu dropdowns, megamenu columns
 *  1636  PRODUCTS ............................. products-grid cards, price-box, reviews, labels, ribbons
 *  1989  SIDEBAR BLOCKS ....................... layered nav dt/dd legacy
 *  2031  BRAND TILES .......................... nav-brands-grid, brand-slider, splide arrows
 *        FOOTER — USP + MAIN .................. ESTRATTO in boi_theme/footer.css
 *                                                (USP strip + main footer, #236 L3)
 *  2280  RESPONSIVE ........................... @media breakpoints (≤1024, ≤768, ≤480)
 *        PRICE SLIDER ......................... ESTRATTO in boi_theme/legacy-price-slider.css
 *                                                (vanilla non-Meilisearch fallback, #236 L2)
 *        PORTED ULTIMO PRODUCT PAGE LOGIC ..... ESTRATTO in boi_theme/swatch-base.css
 *                                                + boi_theme/product-gallery.css (#236 L3)
 *        UNIQUE THEME RULES ................... ESTRATTO in boi_theme/misc.css
 *                                                (product tables + mobile data tables, #236 L2)
 *
 * Tokens `--c-*` + `--boi-*` sono admin-driven, vivono in default.css.
 * Tokens `--sys-*` (Apple-style UI) vivono in boi_theme/tokens.css.
 *
 * Vedi anche: public/skin/frontend/boi/default/css/README.md
 */
/* ============================ GLOBAL BASE / RESETS ============================ */
body {
    font: var(--fs-base) / var(--lh-normal) var(--boi-font-body);
    color: var(--c-text);
    background: var(--c-footer-bg);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.wrapper {
    background: var(--c-bg);
}
.top-container {
    display: none;
}
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.std ul {
    list-style: disc;
    margin: 0 0 1em 1.5em;
    padding: 0;
}
.std ol {
    list-style: decimal;
    margin: 0 0 1em 1.5em;
    padding: 0;
}
img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}
/* Skip Links (Accessibility) */
.skip-link.skip-main,
.skip-main,
.skip-to-main-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link.skip-main:focus,
.skip-main:focus,
.skip-to-main-content:focus {
    left: 0;
    width: auto;
    height: auto;
    z-index: 999;
    background: #fff;
    padding: 5px;
    color: var(--c-primary);
    outline: 2px solid var(--c-primary);
}
.skip-links-clearer {
    display: none;
}
/* Breadcrumbs structural */
.breadcrumbs {
    padding: 10px 0;
}
.breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs li {
    display: inline-block;
    vertical-align: middle;
}
.breadcrumbs li span {
    padding: 0 4px;
}
/* Header Mini Cart / Dropdowns */
.skip-content {
    display: none;
}
.skip-content.skip-active {
    display: block;
}
.block-cart .empty {
    padding: 16px;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-text);
    margin: 0;
}
/* Product Page Collaterals */
.product-collateral {
    margin-top: 32px;
    clear: both;
}
.box-collateral {
    margin-bottom: 24px;
    background: var(--card-bg);
    padding: var(--p-base);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: var(--boi-radius);
    transition:
        box-shadow var(--t),
        background var(--t);
}
.box-collateral h2 {
    font-size: var(--fs-lg);
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 8px;
}
/* Layered Navigation (sidebar filters) */
.block-layered-nav dt {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-base);
    margin: 16px 0 8px;
    color: var(--c-text);
}
.block-layered-nav dd {
    margin: 0 0 12px;
}
.block-layered-nav dd a {
    color: var(--c-text-muted);
    text-decoration: none;
    display: block;
    padding: 4px 0;
}
.block-layered-nav dd a:hover {
    color: var(--c-primary);
}
h1,
h2,
h3,
h4,
h5,
h6,
.product-name,
.page-title h1,
.page-title h2,
.category-title h1,
.block .block-title {
    font-family: var(--boi-font-headings);
    font-weight: 600;
    line-height: var(--lh-snug);
}
h1 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
}
h2 {
    font-size: var(--fs-xl);
}
h3 {
    font-size: var(--fs-lg);
}
h4 {
    font-size: var(--fs-md);
}
h5 {
    font-size: var(--fs-base);
}
h6 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.std p,
.cms-page p {
    line-height: var(--lh-relaxed);
}
small,
.caption {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
}
a {
    color: var(--c-link);
    text-decoration: none;
    transition: color var(--t);
}
a:hover {
    color: var(--c-link-hover);
}
.breadcrumbs,
.label-small {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.breadcrumbs a {
    color: var(--c-text-muted);
}
.breadcrumbs a:hover {
    color: var(--c-text);
}
.breadcrumbs li span.divider {
    display: inline-block;
    margin: 0 4px;
    vertical-align: middle;
    color: var(--c-text-muted);
    width: 14px;
    height: 14px;
}
.breadcrumbs li span.divider svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cms-index-index .breadcrumbs {
    display: none;
}
/* ============================ LAYOUT ============================ */
.boi-container,
.main-container .main {
    width: 100%;
    padding: 0 clamp(16px, 2vw, 40px);
    box-sizing: border-box;
}
.boi-container {
    max-width: 1800px;
    margin: 0 auto;
}
.main-container {
    max-width: none;
}
/* Two-column layouts (sidebar + content) */
.col2-left-layout .main::after,
.col2-right-layout .main::after {
    content: "";
    display: table;
    clear: both;
}
.col2-left-layout .col-left.sidebar {
    float: left;
    width: 240px;
    padding: 0;
}
.col2-left-layout .col-main {
    float: right;
    width: calc(100% - 272px);
    padding: 0;
}
.col2-left-layout .main > .breadcrumbs,
.col2-left-layout .main > .page-title {
    padding: 0;
}
.col2-right-layout .col-main {
    float: left;
    width: calc(100% - 272px);
    padding: 0;
}
/* Global overrides for base template leftovers */
#skip-to-main-content,
.skip-links,
.skip-to-main-content {
    display: none !important;
}
/* Legacy Infortis 12-col grid (flex replacement) ─────────────────────
   Markup uses `.grid-container-spaced` wrapping `.grid12-N` children
   (homepage CMS — Most Wanted sliders 2-per-row, checkout cart layout,
   testimonials, customer login). Upstream CSS lived in the orphan
   maho/ultimo/css/infortis/_shared/grid12.css which the active theme
   chain (burnout/default → base/default) doesn't serve, so without
   these rules grid12-6 siblings stack vertically instead of side-by-
   side. Flex with calc() gaps mirrors the original 48%/33%/… widths. */
.grid-container-spaced {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    clear: both;
}
.grid-container-spaced > [class*="grid12-"] {
    min-width: 0;
}
.grid12-3 {
    flex: 0 0 calc(25% - 15px);
}
.grid12-4 {
    flex: 0 0 calc(33.333% - 13.333px);
}
.grid12-6 {
    flex: 0 0 calc(50% - 10px);
}
.grid12-8 {
    flex: 0 0 calc(66.666% - 6.667px);
}
.grid12-9 {
    flex: 0 0 calc(75% - 5px);
}
.grid12-12 {
    flex: 0 0 100%;
}
/* Empty wrapper handling: homepage CMS emits paired `grid12-6 banner`
   containers whose inner `{{block type="ultimo/product_list_featured"}}`
   returns no HTML when the category has no matching products (template
   early-exits on empty collection). The left-over empty wrapper still
   takes 50% via flex-basis, creating a half-empty "staircase" row.
   Hide empties + let the sibling grow to fill the row. */
.grid-container-spaced > [class*="grid12-"]:empty {
    display: none;
}
.grid-container-spaced:has(> [class*="grid12-"]:empty)
    > [class*="grid12-"]:not(:empty) {
    flex: 1 1 100%;
}
@media (max-width: 767px) {
    .grid-container-spaced > [class*="grid12-"] {
        flex: 0 0 100%;
    }
    .grid-container-spaced > .mobile-grid-half {
        flex: 0 0 calc(50% - 10px);
    }
}
/* ============================ BUTTONS ============================ */
/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 2px solid var(--btn-border);
    border-radius: var(--boi-radius);
    font: 600 var(--fs-base) / 1.2 var(--boi-font-body);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--t),
        color var(--t),
        border-color var(--t),
        box-shadow var(--t);
}
.button:hover {
    background: var(--btn-hover-bg);
    text-decoration: none;
}
.button:active {
    transform: translateY(1px);
}
.btn-cart,
.btn-checkout,
button.button:not(.search-button):not(.boi-switcher__toggle),
.button.btn-primary,
.boi-footer__newsletter .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    /* Apple-style pill: full radius su CTA primari standalone. Override
       puntuale per i CTA "attached" (newsletter input+button) in footer.css. */
    border-radius: 999px;
    font: 600 var(--fs-base) / 1 var(--boi-font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--t);
}
.btn-cart:hover,
.btn-checkout:hover,
button.button:not(.search-button):not(.boi-switcher__toggle):hover,
.button.btn-primary:hover,
.boi-footer__newsletter .button:hover {
    background: var(--c-primary-hover);
    color: #fff;
}
a.button,
.button.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 999px; /* Apple-style pill — match con primary */
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color var(--t),
        background var(--t);
}
a.button:hover,
.button.btn-secondary:hover {
    border-color: var(--c-text-muted);
    background: rgba(0, 0, 0, 0.04);
}
/* ============================ FORMS ============================ */
.input-text,
textarea,
select {
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    color: var(--c-text);
    background: #fff;
    box-sizing: border-box;
    transition:
        border-color var(--t),
        box-shadow var(--t);
}
textarea {
    height: auto;
    padding: 12px 16px;
}
:focus-visible {
    outline: none;
}
.input-text:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--c-link);
    box-shadow: 0 0 0 3px rgba(0, 102, 192, 0.1);
}
/* ============================ MESSAGES ============================ */
.note-msg,
.success-msg,
.error-msg,
.notice-msg,
.messages li li {
    border: none;
    border-radius: var(--r-sm);
    padding: 14px 20px;
    margin-bottom: 12px;
}
.success-msg {
    background: #e8f5e9;
    color: #1b5e20;
}
.error-msg {
    background: #fbe9e7;
    color: #bf360c;
}
.notice-msg,
.note-msg {
    background: #fff3e0;
    color: #e65100;
}
/* ============================ TOP BAR ============================ */
.boi-topbar {
    background: var(--c-topbar-bg);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font: 600 var(--fs-md) / var(--lh-snug) var(--boi-font-body);
    overflow: hidden;
}
.boi-topbar a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color var(--t);
}
.boi-topbar a:hover {
    color: #fff;
    border-bottom-color: #fff;
}
.boi-topbar__slides {
    display: flex;
    width: 200%;
    animation: topbar-slide 8s ease-in-out infinite;
}
.boi-topbar__slide {
    flex: 0 0 50%;
    text-align: center;
}
@keyframes topbar-slide {
    0%,
    40% {
        transform: translateX(0);
    }
    50%,
    90% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}
/* ============================ HEADER ============================ */
.boi-header {
    background: var(--c-header-bg);
    color: var(--boi-header-color);
    position: relative;
    z-index: var(--header-z);
}
.boi-header a {
    color: inherit;
}
.boi-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 80px;
    position: relative;
}
.boi-header__logo {
    flex-shrink: 0;
}
.boi-header__logo img {
    max-height: 54px;
    width: auto;
}
/* Hamburger — desktop hidden, mobile visible (placed left of logo) */
.boi-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--boi-header-color);
    border-radius: var(--r-sm);
    transition: background var(--t);
}
.boi-header__burger:hover {
    background: rgba(128, 128, 128, 0.1);
}
.boi-header__burger-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.boi-header__burger-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform var(--t),
        opacity var(--t);
}
.boi-header__burger[aria-expanded="true"]
    .boi-header__burger-bars
    span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.boi-header__burger[aria-expanded="true"]
    .boi-header__burger-bars
    span:nth-child(2) {
    opacity: 0;
}
.boi-header__burger[aria-expanded="true"]
    .boi-header__burger-bars
    span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* Mobile nav close button + backdrop — hidden on desktop */
.boi-nav__close,
.boi-nav__backdrop {
    display: none;
}
/* Search — absolute-centred */
.boi-header__search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    max-width: 680px;
    min-width: 280px;
    z-index: calc(var(--header-z) + 10);
}
.boi-header__search #search_mini_form {
    position: relative;
}
.boi-header__search .input-box {
    display: flex;
    align-items: center;
    height: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--r-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.boi-header__search label {
    display: none;
}
.boi-header__search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px 0 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #333;
    font-size: var(--fs-md);
    -webkit-appearance: none;
    appearance: none;
}
.boi-header__search input[type="search"]::placeholder {
    color: #999;
}
.boi-header__search input[type="search"]:focus {
    outline: none;
    box-shadow: none;
}
.boi-header__search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    cursor: pointer;
    opacity: 0.6;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")
        center no-repeat;
}
.boi-header__search input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 1;
}
.boi-header__search .search-button {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
    cursor: pointer !important;
    transition: background var(--t) !important;
    position: relative !important;
    overflow: hidden !important;
}
.boi-header__search .search-button:hover {
    background: var(--c-primary-hover);
}
.boi-header__search .search-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #fff !important;
    display: block !important;
}
/* ─── Offcanvas (Cart Sidebar) ───────────────────────────────────── */
#offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: var(--c-bg) !important;
    border: none !important;
    border-left: 1px solid var(--c-border) !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2000 !important;
}
#offcanvas[open] {
    transform: translateX(0) !important;
}
#offcanvas::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
}
.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-bg-alt);
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.offcanvas-title {
    font-family: var(--boi-font-headings);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--c-text);
    text-transform: uppercase;
}
.offcanvas-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.offcanvas-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--c-text-muted);
    transition: color var(--t);
    display: flex;
    align-items: center;
    justify-content: center;
}
.offcanvas-close:hover {
    color: var(--c-primary);
}
.offcanvas-close svg {
    width: 24px;
    height: 24px;
}
/* Enhancements for minicart inside offcanvas */
#offcanvas .minicart-wrapper {
    padding: 20px;
}
#offcanvas .minicart-actions {
    padding: 20px;
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    display: grid;
    gap: 12px;
}
#offcanvas .mini-products-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#offcanvas .mini-products-list li {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--c-border);
}
#offcanvas .mini-products-list .product-image {
    flex-shrink: 0;
    width: 80px;
}
#offcanvas .mini-products-list .product-details {
    flex: 1;
}
#offcanvas .mini-products-list .product-name a {
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    font-size: var(--fs-sm);
}
#offcanvas .mini-products-list .price {
    color: var(--c-price);
    font-weight: 700;
    display: block;
    margin-top: 4px;
}
#offcanvas .minicart-actions .checkout-button {
    background: var(--c-primary);
    color: #fff;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--r-sm);
    text-transform: uppercase;
}
#offcanvas .minicart-actions .cart-link {
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-decoration: underline;
}
/* ─── Switcher dropdown (currency / language) — dark surface ─────── */
.boi-switcher__dropdown {
    position: absolute;
    background: var(--c-dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    z-index: var(--dropdown-z);
    list-style: none;
}
/* ─── Search autocomplete panel — light, two-column, megamenu-like ─
   Maho's /catalogsearch/ajax/suggest renders:
     <a class="view-all">N results</a>
     <div class="results-list">
         <div class="category-results">
             <div class="category-results-title">Categories</div>
             <ul class="category-list"><li class="category-item">
                 <a class="category-link">
                     <span class="category-path"><span class="path-item">…</span></span>
                     <span class="category-name">…</span>
         <div class="product-results">
             <div class="product-results-title">Products</div>
             [catalog/product/list.phtml — .products-list > li]
   Vendor styles live in maho styles.css; we override surface/typography to
   align with .nav-panel--dropdown.
   NOTE: maho-autocomplete.js (vendor) writes inline styles on every show:
     position: absolute; left: <rect.left>px; top: <rect.bottom>px; width: <rect.width>px
   Since #search_autocomplete lives inside #search_mini_form (which is
   position:relative), `left: <viewport x>` ends up meaning "viewport_x px to
   the right of the form's left edge" — the panel gets pushed off-screen to
   the right. We beat the inline styles with !important so the panel stays
   anchored at form left:0 with our intended width. */
.boi-header__search .search-autocomplete {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto;
    min-width: 100% !important;
    width: max(100%, 880px) !important;
    max-width: min(96vw, 1040px) !important;
    background: #fff;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    max-height: min(80vh, calc(100vh - 100px));
    overflow-y: auto;
    padding: 0;
    z-index: var(--dropdown-z);
    list-style: none;
    font-family: inherit;
    &:empty {
        display: none;
    }
    &::before {
        display: none !important;
    } /* kill vendor caret triangle */
    /* View-all banner sticks to the top in orange primary */
    .view-all {
        display: block;
        padding: 13px 16px;
        background: var(--c-primary);
        color: #fff !important;
        font-weight: 700;
        font-size: var(--fs-base);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        position: sticky;
        top: 0;
        z-index: 2;
        transition: background var(--t);
    }
    .view-all:hover {
        background: var(--c-primary-hover);
    }
    /* Two-column grid: category rail (left) + product tile grid (right) */
    .results-list {
        display: grid;
        grid-template-columns: 1fr;
        max-height: none;
        overflow: visible;
    }
    @media (min-width: 720px) {
        .results-list {
            grid-template-columns: 240px 1fr;
        }
        .category-results {
            border-right: 1px solid var(--c-border);
            border-bottom: none !important;
            margin: 0 !important;
        }
    }
    /* Section headers — shared uppercase label style */
    .category-results-title,
    .product-results-title {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--c-text-muted);
        letter-spacing: 0.08em;
        margin: 0;
        padding: 18px 16px 10px;
    }
    /* Category rail */
    .category-list {
        padding: 0 8px 14px;
        margin: 0;
        list-style: none;
    }
    .category-item {
        padding: 0;
        margin: 0;
    }
    .category-link {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 10px 12px;
        border-radius: var(--r-sm);
        text-decoration: none;
        color: var(--c-text);
        transition:
            background var(--t),
            color var(--t);
    }
    .category-link:hover {
        background: var(--c-bg-alt);
        color: var(--c-primary);
    }
    .category-path {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        line-height: 1.2;
        font-weight: 500;
    }
    .category-path .path-item::after {
        content: " › ";
        margin: 0 2px;
        opacity: 0.6;
    }
    .category-name {
        font-size: var(--fs-base);
        font-weight: 600;
        line-height: 1.3;
    }
    /* Products tile grid */
    .product-results {
        padding: 6px 10px 14px;
    }
    .products-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    .products-list > li {
        display: flex !important;
        flex-direction: column !important;
        place-items: stretch !important;
        padding: 8px !important;
        margin: 0 !important;
        border: 1px solid transparent;
        border-radius: var(--r-md);
        background: #fff;
        text-align: center;
        transition:
            border-color var(--t),
            box-shadow var(--t),
            transform var(--t);
        cursor: pointer;
    }
    .products-list > li:hover {
        border-color: var(--c-border);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    .product-image {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--r-sm);
        background: var(--c-bg-alt);
        margin: 0 0 8px;
    }
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .product-shop,
    .product-primary {
        padding: 0 !important;
        width: auto !important;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .product-name {
        margin: 0 0 6px;
        font-size: var(--fs-base) !important;
        font-weight: 600 !important;
        line-height: 1.3;
        text-transform: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-name a {
        color: var(--c-text);
        text-decoration: none;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-transform: none !important;
    }
    .product-name a:hover {
        color: var(--c-primary);
    }
    /* Price box — same layout as product card (old/special + regular) */
    .price-box {
        margin: auto 0 0;
        font-size: var(--fs-base);
    }
    .price-box .price-label {
        display: none;
    }
    .price-box .old-price {
        color: var(--c-price-old);
        font-size: var(--fs-sm);
        display: inline-block;
        margin: 0 4px 0 0;
    }
    .price-box .old-price .price {
        text-decoration: line-through;
    }
    .price-box .special-price,
    .price-box .regular-price {
        font-weight: 700;
        color: var(--c-price);
        display: inline-block;
    }
}
/* Header actions (right) */
.boi-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: calc(var(--header-z) + 1);
}
.boi-header__icon,
.boi-header__cart .skip-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: var(--r-sm);
    transition: background var(--t);
}
.boi-header__icon:hover,
.boi-header__cart .skip-cart:hover {
    background: rgba(255, 255, 255, 0.15);
}
.boi-header__icon svg,
.boi-header__cart svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}
.boi-header__cart .skip-cart .label {
    display: none;
}
.boi-header__cart .skip-cart .count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-sm);
    font: 700 10px / 16px var(--boi-font-body);
    text-align: center;
    background: var(--c-primary);
    color: #fff;
}
.boi-header__cart .skip-cart .count-0 {
    display: none;
}
/* Language / currency switcher */
.boi-switcher {
    position: relative;
}
.boi-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 10px;
    background: transparent;
    border: none;
    color: #fff;
    font: 600 var(--fs-base) / 1 var(--boi-font-body);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--t);
}
.boi-switcher__toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}
.boi-switcher__flag {
    font-size: 20px;
    line-height: 1;
}
.boi-switcher__symbol {
    font-size: var(--fs-md);
    font-weight: 700;
}
.boi-switcher__arrow {
    font-size: 10px;
    opacity: 0.8;
}
.boi-switcher__dropdown {
    display: none;
    top: 100%;
    right: 0;
    min-width: 160px;
    border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.boi-switcher.is-open .boi-switcher__dropdown {
    display: block;
}
.boi-switcher__dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-sm);
    transition:
        background var(--t),
        color var(--t);
}
.boi-switcher__dropdown a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.boi-switcher__dropdown .active a {
    color: var(--c-primary);
    font-weight: 600;
}
.boi-switcher__dropdown .boi-switcher__flag {
    font-size: 18px;
}
.boi-switcher__dropdown .boi-switcher__symbol {
    width: 28px;
    text-align: center;
}
/* ============================ NAVIGATION ============================ */
.boi-nav {
    background: var(--c-header-bg);
    position: sticky;
    top: 0;
    z-index: calc(var(--header-z) - 1);
    box-shadow: inset 0 -3px 0 var(--c-primary);
}
#nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
#nav > li > a,
.nav-regular .nav-item.level0 > a {
    display: block;
    padding: 12px 18px;
    line-height: 20px;
    color: var(--boi-nav-color);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    transition:
        background var(--t),
        color var(--t),
        opacity var(--t);
}
#nav > li > a:hover,
.nav-regular .nav-item.level0 > a:hover {
    background: rgba(128, 128, 128, 0.1);
    color: var(--boi-nav-color);
    opacity: 1;
}
#nav > li.active > a,
.nav-regular .nav-item.level0.active > a {
    background: rgba(128, 128, 128, 0.15);
    color: var(--boi-nav-color);
    opacity: 1;
}
.nav-panel--dropdown {
    background: var(--card-bg);
    color: var(--c-text);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--boi-shadow);
    border: var(--card-border);
    overflow: hidden;
    /* Centering and width reduction */
    width: max-content;
    max-width: 90vw;
    min-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.nav-panel--dropdown .nav-panel-inner {
    padding: 20px 24px;
}
.nav-panel--dropdown a {
    color: var(--c-text);
}
.nav-panel--dropdown a:hover {
    color: var(--c-primary);
}
/* Simple dropdown sub-items */
.nav-regular .nav-panel .nav-item > a {
    color: var(--c-text);
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.nav-regular .nav-panel .nav-item > a:hover {
    background: rgba(128, 128, 128, 0.05);
    color: var(--c-primary);
}
/* ─── Subcategory cards ─────────────────────────────────────────────
   Mega dropdowns render subcategories as a grid of full cards: image
   edge-to-edge on top (4:3 with light letterbox for transparent
   category PNGs), title block below with padded content, animated
   primary accent strip at the bottom on hover, chevron that slides
   in next to the title, label/badge overlaid on the thumb corner.
   Tile width adapts to panel width (~4 cards in a 720px panel,
   ~6 in a full-width 1280px panel). */
.nav-panel--dropdown .nav-submenu--mega {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 140px));
    justify-content: center; /* Center the cards if they don't fill the row */
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 1280px) {
    .nav-panel--dropdown .nav-submenu--mega {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item {
    position: relative;
    margin: 0;
    list-style: none;
    /* Beat the vendor .dd-itemgrid-Ncol sizing in megamenu.css:671-710.
       Admin's megamenu_dd_columns attribute emits classes dd-itemgrid-1col
       (Helmets) / dd-itemgrid-3col (Clothing) / etc., and the vendor ships
       per-Ncol widths (98%, 31.33%, 23%, …) + float:left + horizontal
       padding — all meaningful only in the legacy float grid, but they
       still fire on our CSS Grid tiles and make a 1col dropdown render
       wider-than-cell while a 3col dropdown renders shrunk. Reset so
       tile sizing is driven entirely by the grid track. */
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
}
/* Apple-style category tile.
   ─ Light hairline border instead of cream fill
   ─ Soft white→gray gradient inside the thumb so studio cutouts read
     premium instead of floating on cream
   ─ Generous 16px image padding
   ─ Display-font label, larger and tighter than before
   ─ Hover = bg fade to pure white + image 1.06 scale. No shadow,
     no lift, no underline. The tile stays flat. */
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #fbfbfb;
    border: 1px solid rgba(20, 17, 13, 0.05);
    border-radius: 10px;
    box-shadow: none;
    text-decoration: none;
    color: var(--c-text);
    transition:
        background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.25s ease,
        color 0.25s ease;
}
/* Hover affordance: 2px brand-color hairline at the bottom that scales
   in from the left. Flat (no shadow/lift), but unmistakable. */
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover {
    background: #ffffff;
    border-color: rgba(20, 17, 13, 0.18);
    color: var(--c-text);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover::after {
    transform: scaleX(1);
}

/* Thumbnail — 16:10 (wider, less tall — keeps the dropdown compact),
   soft white→very-light-gray gradient gives product shots a studio
   backdrop. Generous inner padding, hover scale only on the image (not
   the tile) for restrained motion. */
.nav-panel--dropdown .nav-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f3f3f5 100%);
    border: none;
}
.nav-panel--dropdown .nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover .nav-thumb img {
    transform: scale(1.06);
}

/* Placeholder for categories without a thumb — same neutral backdrop
   as a thumb with image. We don't draw any "missing image" hint; the
   tile reads as a quiet, intentional empty surface (Apple-style),
   not a broken thumbnail. */
.nav-panel--dropdown .nav-thumb--placeholder {
    background: linear-gradient(180deg, #ffffff 0%, #f3f3f5 100%);
}

/* Label — display font, confident size, tight tracking. */
.nav-panel--dropdown
    .nav-submenu--mega
    > .nav-item
    > a
    > span:not(.nav-thumb):not(.caret):not(.cat-label) {
    display: block;
    margin: 0;
    padding: 14px 14px 16px;
    font-family: var(--boi-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: inherit;
    text-align: left;
    overflow-wrap: break-word;
}
/* Label badge — overlay top-right on the thumb instead of inline with title */
.nav-panel--dropdown .nav-submenu--mega .cat-label {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--c-primary);
    color: #fff;
    line-height: 1.2;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Hide caret — tiles are visibly clickable on their own */
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a .caret {
    display: none;
}
/* Sub-subcategory flyout (level 2+) is a vestigial markup chunk that the
   megamenu module emits for any category with grandchildren — e.g. the
   Clothing → Footwear tile also carries a <ul.nav-submenu.nav-panel> of
   Off Road Boots / Riding Shoes / etc. inside its <li>. Left visible, it
   renders as an inline bullet list inside the card, making that one tile
   ~2× taller than its siblings. Hide them: the tile is a single-target
   link to the parent category, and the grandchildren are reachable from
   there. (The opener span is the mobile toggle handle — same deal.) */
.nav-panel--dropdown .nav-submenu--mega > .nav-item > .nav-submenu,
.nav-panel--dropdown .nav-submenu--mega > .nav-item > .nav-panel,
.nav-panel--dropdown .nav-submenu--mega > .nav-item > ul,
.nav-panel--dropdown .nav-submenu--mega > .nav-item > .opener {
    display: none;
}
/* ─── Featured pages strip (`.nav-block--bottom .links`) ────────────
   blocks[3] from the category megamenu_dd_blocks attribute renders as
   `<ul class="links"><li class="label">Featured pages:</li><li><a>…</a></li>…</ul>`
   inside a `.show-separators .category-title` wrapper, inside the
   .nav-block--bottom full-width strip at the bottom of the dropdown.
   Render as a horizontal row of pill chips with the section label as
   a small uppercase lead-in. (Base megamenu.css has equivalent rules
   scoped to `#nav .nav-regular` — that selector is a descendant combinator
   so it never matches on this theme where `.nav-regular` IS #nav.) */
.nav-panel--dropdown .nav-block--bottom .links,
.nav-panel--dropdown .show-separators > .links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-panel--dropdown .nav-block--bottom .links > li,
.nav-panel--dropdown .show-separators > .links > li {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    list-style: none;
    float: none;
    line-height: 1;
}
.nav-panel--dropdown .nav-block--bottom .links .label,
.nav-panel--dropdown .show-separators > .links .label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    margin-right: 4px;
}
.nav-panel--dropdown .nav-block--bottom .links .label strong,
.nav-panel--dropdown .show-separators > .links .label strong {
    font-weight: 700;
}
.nav-panel--dropdown .nav-block--bottom .links > li > a,
.nav-panel--dropdown .show-separators > .links > li > a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    transition:
        background var(--t),
        border-color var(--t),
        color var(--t);
}
.nav-panel--dropdown .nav-block--bottom .links > li > a:hover,
.nav-panel--dropdown .show-separators > .links > li > a:hover {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* Kill show-separators' horizontal rule / vertical separators so only
   our pill chips render. */
.nav-panel--dropdown .show-separators,
.nav-panel--dropdown .nav-block--bottom .category-title {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Nested level 2+ (flyouts from a tile) keep classic list styling */
.nav-panel--dropdown .nav-submenu:not(.nav-submenu--mega) a {
    display: block;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: var(--fs-base);
}
.nav-panel--dropdown .nav-submenu:not(.nav-submenu--mega) a:hover {
    color: var(--c-primary);
    background: rgba(0, 0, 0, 0.04);
}
/* CMS blocks above/below the tile grid — separated by a hair line */
.nav-panel--dropdown .nav-block {
    margin: 0;
}
.nav-panel--dropdown .nav-block--top {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}
.nav-panel--dropdown .nav-block--bottom {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--c-border);
}
/* Brands in blocks (Helmets, Clothing, etc.): render as tiles */
.nav-panel--dropdown .nav-block a:has(img),
.nav-panel--dropdown .nav-block img:not(a img) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 80px;
    padding: 10px;
    margin: 6px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition:
        border-color var(--t),
        box-shadow var(--t);
    vertical-align: top;
}
.nav-panel--dropdown .nav-block a:has(img):hover {
    border-color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.nav-panel--dropdown .nav-block img {
    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}
/* Specific grid for brand lists in CMS blocks */
.brands-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.brands-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.brands-list a {
    margin: 0 !important;
} /* override the margin from generic rule above */
/* ShopBy List (All Brands) multi-column organization */
.shop-by-list .shopby-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 32px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.shop-by-list .shopby-list > .item {
    padding: 0;
    margin: 0;
    list-style: none;
}
.shop-by-list dt {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-primary);
    border-bottom: 2px solid var(--c-border);
    margin-bottom: 16px;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.shop-by-list dd ol {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.shop-by-list .box-shopby {
    margin: 0;
}
.shop-by-list .shopby-brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    text-decoration: none;
    color: var(--c-text);
    padding: 12px 8px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition:
        transform var(--t),
        border-color var(--t),
        box-shadow var(--t);
    height: 100%;
}
.shop-by-list .shopby-brand-link:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.shop-by-list .shopby-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 0;
    background: transparent;
    border: none;
}
.shop-by-list .shopby-brand-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.shop-by-list .shopby-brand-count {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    display: block;
}
.shop-by-list .count {
    color: var(--c-text-muted);
    font-weight: 400;
    font-size: 0.9em;
}
/* ============================ PRODUCTS ============================ */
/* Grid: 5 cards per row on desktop with generous breathing room.
   Overrides base/default/styles.css which ships an auto-fit grid and
   caps <li> width at 210px — reset those so our 5-col layout actually
   fills the viewport.
   The :not(.splide__list) guard keeps this from clobbering Splide-based
   sliders: splide-init.js copies `products-grid` onto the generated
   `.splide__list` so `.products-grid .item` card styles still apply
   inside carousels — but `display: grid` there would break the flex
   track Splide needs to scroll. */
.products-grid:not(.splide__list):not(.splide) {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.products-grid:not(.splide__list):not(.splide) > li {
    max-width: none;
    box-shadow: none;
    transition: none;
}
.products-grid:not(.splide__list):not(.splide) > li:hover {
    transform: none;
}
.products-grid .item {
    margin: 0;
    float: none;
}
/* Card chrome — each item is a vertical flex column so name, price and CTA
   stay aligned across the row regardless of content length. */
.products-grid .item,
.products-list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}
.products-grid .item:hover,
.products-list .item:hover {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--boi-shadow);
    transform: translateY(-3px);
}
/* Image area — fixed 1:1 aspect ratio with internal padding so products with
   different native dimensions always render centered in the same footprint. */
.products-grid .item .product-image,
.products-grid .item .product-image-wrapper,
.products-list .product-image {
    position: relative;
    display: block;
    overflow: hidden;
}
.products-grid .item .product-image-wrapper {
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: 14px;
}
.products-grid .item .product-image {
    width: 100%;
    height: 100%;
}
.products-grid .item .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Hover reveal: .alt-img (second product image from media gallery) fades in
   on hover. Requires .product-image to be the positioning parent. */
.products-grid .product-image .alt-img,
.products-list .product-image .alt-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.products-grid .product-image:hover .alt-img,
.products-list .product-image:hover .alt-img {
    opacity: 1;
}
/* Card body — padding + vertical spacing between name/price. min-height on
   the name prevents one-line vs two-line cards from breaking grid rhythm. */
.products-grid .product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 4px;
}
.products-grid .product-name {
    margin: 0;
    min-height: calc(var(--fs-md) * var(--lh-snug) * 2);
}
.products-grid .product-name a,
.products-list .product-name a {
    color: var(--c-text);
    font-family: var(--boi-font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-snug);
    text-transform: none;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}
.products-grid .product-name a:hover,
.products-list .product-name a:hover {
    color: var(--c-link);
}
/* Price box — common + grid-specific. Final price large, old price small. */
.price-box .price {
    font-weight: 700;
    color: var(--c-price);
}
.price-box .old-price .price {
    color: var(--c-price-old);
    font-weight: 400;
    text-decoration: line-through;
}
.price-box .special-price .price {
    color: var(--c-price-special);
}
.price-box .discount-percent {
    display: none;
} /* shown via ribbon only */
.products-grid .price-box {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
.products-grid .price-box .special-price,
.products-grid .price-box .regular-price {
    order: 1;
}
.products-grid .price-box .old-price {
    order: 2;
}
.products-grid .price-box .special-price .price,
.products-grid .price-box .regular-price .price,
.products-grid .price-box .regular-price {
    font-size: var(--fs-lg);
}
.products-grid .price-box .old-price .price {
    font-size: var(--fs-sm);
}
.products-grid .price-box .price-label {
    display: none;
}
/* Actions — pinned to card bottom via margin-top:auto. .actions diventa flex
   column con align-items:stretch così il button (anchor o button element)
   prende l'intera larghezza disponibile. */
.products-grid .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
    padding: 12px 16px 16px;
}
.products-grid .actions .button {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font: 600 var(--fs-sm) / 1 var(--boi-font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Compensate trailing letter-spacing — l'ultimo carattere ha 0.04em di
       extra a destra che spinge il testo leggermente fuori centro. Padding
       sinistro extra riequilibra. */
    padding-left: calc(14px + 0.04em);
}
.products-grid .actions .availability {
    margin: 0;
    text-align: center;
    font-size: var(--fs-sm);
}
/* Sticker (NEW badge — top-left circular tag) */
.sticker-wrapper {
    position: absolute;
    z-index: 6;
    pointer-events: none;
}
.sticker-wrapper.top-left {
    top: 8px;
    left: 8px;
}
.sticker-wrapper.top-right {
    top: 8px;
    right: 8px;
}
.sticker-wrapper.bottom-left {
    bottom: 8px;
    left: 8px;
}
.sticker-wrapper.bottom-right {
    bottom: 8px;
    right: 8px;
}
.sticker {
    display: inline-block;
    padding: 4px 10px;
    font: 700 var(--fs-xs) / 1 var(--boi-font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--r-sm);
    background: var(--c-primary);
    color: #fff;
}
.sticker.new {
    background: #2e7dff;
}
.sticker.sale {
    background: var(--c-primary);
}
img.sticker {
    padding: 0;
    background: none;
    border-radius: 0;
    max-width: 72px;
    height: auto;
}

/* ============================ TOOLBAR + PAGINATION (Apple-style) ============
 * Toolbar = sort + pager bar sopra/sotto la products-grid. Pager standalone =
 * sotto la grid quando il toolbar non lo include. Nessuno style ereditato dal
 * theme parent maho/boi_theme — boi/default lo aveva lasciato senza CSS.
 *
 * Layout:
 *   .toolbar > .sorter > .sort-by + .category-asc/desc + .pager.pager-toolbar-inline
 *   .pager.pager-no-toolbar > .count-container + .pages
 */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
}
.toolbar .sorter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
}
.toolbar .sort-by {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.toolbar .sort-by label {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.toolbar .sort-by select {
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background-color: var(--c-bg);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--boi-icon-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}
.toolbar .sort-by .category-asc,
.toolbar .sort-by .category-desc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text-muted);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.toolbar .sort-by .category-asc:hover,
.toolbar .sort-by .category-desc:hover {
    border-color: var(--c-text-muted);
    color: var(--c-text);
    background: rgba(0, 0, 0, 0.03);
}
.toolbar .sort-by .category-asc svg,
.toolbar .sort-by .category-desc svg,
.toolbar .sort-by .maho-icon svg {
    width: 16px;
    height: 16px;
}

/* Pager wrapper — sia inline nel toolbar che standalone sotto la grid */
.pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}
.pager.pager-no-toolbar {
    justify-content: space-between;
    margin: 24px 0 0;
}
.pager-toolbar-inline {
    margin-left: auto;
}
.pager .count-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.pager .amount {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.pager .amount strong {
    font-weight: 500;
    color: var(--c-text);
}
.pager .limiter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pager .limiter label {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pager .limiter select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background-color: var(--c-bg);
    font-size: var(--fs-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Page numbers — pill 36px */
.pager .pages {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pager .pages > strong {
    /* "Page:" label — nascosto, lo stile parla da solo */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pager .pages ol {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pager .pages li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pager .pages li a,
.pager .pages li.current,
.pager .pages li > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pager .pages li a:hover {
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}
.pager .pages li.current,
.pager .pages li > strong {
    background: var(--c-text);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
/* Previous / Next chevrons */
.pager .pages li a.previous,
.pager .pages li a.next {
    padding: 0 16px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.pager .pages li a.previous:hover,
.pager .pages li a.next:hover {
    color: var(--c-text);
    background: rgba(0, 0, 0, 0.06);
}
.pager .pages li a.previous_jump,
.pager .pages li a.next_jump {
    color: var(--c-text-muted);
    cursor: pointer;
}

@media (max-width: 767px) {
    .toolbar .sorter {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar .sort-by select {
        flex: 1;
    }
    .pager-toolbar-inline {
        margin-left: 0;
    }
    .pager .pages li a.previous,
    .pager .pages li a.next {
        padding: 0 12px;
        font-size: var(--fs-xs);
    }
}

/* Diagonal ribbons (discount %, free-ship) — top-right corner */
.products-grid .item > .ribbon-corner,
.products-list .item .ribbon-corner,
.itemslider .item > .ribbon-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
    z-index: 6;
    pointer-events: none;
}
.ribbon-corner .ribbon-band {
    position: absolute;
    right: -22px;
    width: 90px;
    padding: 4px 0;
    text-align: center;
    font: 600 11px / 1.3 var(--boi-font-body);
    color: #fff;
    white-space: nowrap;
    transform: rotate(45deg);
    letter-spacing: 0.02em;
    background: var(--c-primary);
}
.ribbon-corner .ribbon-discount {
    top: 14px;
    background: var(--c-primary);
}
.ribbon-corner .ribbon-free-ship {
    top: 36px;
    background: #1978fc;
}
/* Product view: image + shop info side-by-side */
.product-view > form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* B: align all columns at top so gallery/details start on the same baseline */
    gap: 24px;
}
.product-view .product-img-column {
    flex: 0 0 45%;
    max-width: 560px;
}
.product-view .product-primary-column {
    flex: 1;
    min-width: 0;
}
.product-view .product-secondary-column {
    flex: 0 0 28%;
    max-width: 320px;
}
/* Quando manca la secondary column (vertical autorelated vuoto + niente size
   chart), la primary col con flex:1 cresceva fino a ~636px su 1200 — troppo
   lardo per leggere. Cap a max-width per mantenere proporzioni leggibili. */
.product-view > form:not(:has(.product-secondary-column)) .product-primary-column {
    max-width: 540px;
}
/* A: ritmo verticale uniforme in primary column. flex-direction:column con
   gap:20px (Apple-generous) sostituisce il margin-bottom inconsistente
   accumulato nei vari sotto-blocchi. */
.product-view .product-primary-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-view .product-primary-column > * {
    margin: 0; /* azzera margini ereditati legacy: con gap controlliamo solo da qui */
}
/* B: gallery — cap height immagine principale e centra thumbs sotto. Senza
   cap, prodotti con foto in formato verticale (4:5, 3:4) rendevano la column
   altissima sbilanciando il layout. */
.product-view .product-image-gallery img {
    max-height: 600px;
    object-fit: contain;
}
.product-view .product-image-thumbs {
    justify-content: center;
}
/* E: spacing tra form PDP e i box sotto (tabs / lower autorelated / extra). */
.product-view > .box-additional {
    margin-top: 64px;
}
@media (max-width: 767px) {
    .product-view > form {
        flex-direction: column;
    }
    .product-view .product-img-column,
    .product-view .product-primary-column,
    .product-view .product-secondary-column {
        flex: 1 1 100%;
        max-width: none;
    }
}
/* Do NOT set display on gallery images — the swatch swap relies on
   .gallery-image { display: none } + .gallery-image.visible { display: block }
   to show exactly one image at a time. Adding display:block here (more
   specific than .gallery-image) would stack every variant on top of
   the current one.
   width:100% is required — when a color swatch is selected, product-media.js
   swapImage() creates a new <img> with no width/height attributes. Without
   width:100%, the browser renders it at its natural pixel size (the resized
   BASE_IMAGE_WIDTH from store config, e.g. 470px) instead of filling the
   container, so the variant image looks smaller than the default main image
   which had explicit HTML width/height attrs. */
.product-view .product-image-gallery img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.product-view .product-image {
    display: block;
    max-width: 100%;
    height: auto;
}
.product-view .product-image-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
.product-view .product-image-thumbs li {
    flex: 0 0 72px;
}
.product-view .product-image-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md); /* leggermente più rounded — Apple touch */
    cursor: pointer;
    transition: border-color var(--t);
}
.product-view .product-image-thumbs img:hover,
.product-view .product-image-thumbs .active img {
    border-color: var(--c-primary);
}
/* Size chart — label + image inline on a single line */
#sizechart .attribute.right a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
#sizechart .attribute.right .label {
    font-size: var(--fs-sm);
    color: var(--c-text);
}
#sizechart .attribute.right img {
    max-height: 28px;
    width: auto;
}
/* ============================ SIDEBAR BLOCKS ============================ */
.sidebar .block {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}
.sidebar .block-title {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidebar .block-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .block-content li a {
    display: block;
    padding: 8px 12px;
    font-size: var(--fs-base);
    color: var(--c-text);
    border-radius: var(--r-sm);
    transition:
        background var(--t),
        color var(--t);
}
.sidebar .block-content li a:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--c-link);
}
.sidebar .block-content li.active > a {
    background: rgba(0, 102, 192, 0.08);
    color: var(--c-link);
    font-weight: 600;
}
/* ============================ BRAND TILES =============================
   Shared look between the homepage brand slider (.brand-slider .item)
   and the per-category brand grid inside megamenu dropdowns
   (.nav-brands-grid .nav-brand-item). Same tile chrome, same image
   fit, same hover — users see one consistent brand treatment
   regardless of where they discover it. */
.brand-slider-wrapper {
    margin: 16px 0;
}
/* When inside a megamenu nav-block, we might need to reset margins */
.nav-panel--dropdown .nav-block .brand-slider-wrapper {
    margin: 8px 0;
}
.brand-slider .item {
    padding: 6px;
    box-sizing: border-box;
}
.nav-brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-brands-grid .nav-brand-item {
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}
.brand-slider .item a,
.brand-slider .item > img,
.nav-brands-grid .nav-brand-item > a,
.nav-brands-grid .nav-brand-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    text-decoration: none;
    transition:
        border-color var(--t),
        box-shadow var(--t);
}
.brand-slider .item a:hover,
.nav-brands-grid .nav-brand-item > a:hover {
    border-color: var(--c-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.brand-slider .item img,
.nav-brands-grid .nav-brand-item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
/* Specific adjustments for Splide-based sliders to ensure they don't break flex layout */
.brand-slider.splide__list {
    display: flex !important;
}
.brand-slider.splide__list .item.splide__slide {
    flex-shrink: 0;
}
h3.section-title {
    font-size: var(--fs-md);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
/* Splide arrows */
.splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--r-sm);
    opacity: 0.6;
    cursor: pointer;
    transition:
        background 0.2s,
        opacity 0.2s;
}
.splide__arrow:hover {
    background: rgba(255, 255, 255, 0.95);
    opacity: 1;
}
.splide__arrow svg {
    fill: #333;
    width: 14px;
    height: 14px;
}
/* Splide ships the same `>` SVG for both arrows and normally flips the
   previous button via `transform: scaleX(-1)`; our override above sets
   `transform: translateY(-50%)` without scaleX, so both arrows pointed
   the same way. Re-add the mirror on the prev arrow while preserving
   the vertical centering. */
.splide__arrow--prev {
    left: 4px;
    transform: translateY(-50%) scaleX(-1);
}
.splide__arrow--next {
    right: 4px;
}
.splide:hover .splide__arrow {
    opacity: 0.8;
}
/* Homepage hero carousel (Boi_Slideshow) */
.boi-slideshow-wrapper {
    margin: 0 0 24px;
}
.boi-slideshow .splide__slide {
    position: relative;
    overflow: hidden;
}
.boi-slideshow .splide__slide img {
    display: block;
    width: 100%;
    height: auto;
}
.boi-slideshow .splide__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
    padding: 0;
    margin: 0;
    pointer-events: none;
}
.boi-slideshow .splide__pagination li {
    list-style: none;
    pointer-events: auto;
}
.boi-slideshow .splide__pagination__page {
    background: rgba(255, 255, 255, 0.6);
    opacity: 0.8;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.2s,
        opacity 0.2s,
        transform 0.2s;
}
.boi-slideshow .splide__pagination__page.is-active {
    background: #fff;
    opacity: 1;
    transform: scale(1.2);
}
/* Captions (legacy Ultimo markup: .caption + .dark1/.fade-on-hover/.fullsize) */
.boi-slideshow .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 80%;
    margin: 6%;
    padding: 0;
    z-index: 2;
}
.boi-slideshow .caption.fullsize {
    margin: 2%;
}
.boi-slideshow .caption > * {
    float: left;
    margin: 5px 5px 0 0;
    transition:
        color 0.45s ease-in-out,
        background-color 0.45s ease-in-out;
}
.boi-slideshow .caption .heading {
    clear: left;
    padding: 0.25em 0.5em;
    font-size: 2em;
    line-height: 1.1;
    font-weight: 600;
}
.boi-slideshow .caption p {
    clear: left;
    padding: 0.25em 0.5em;
    font-size: 1.1em;
    line-height: 1.2;
}
.boi-slideshow .caption.dark1 .heading,
.boi-slideshow .caption.dark1 p {
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}
.boi-slideshow a:hover .caption.dark1 .heading,
.boi-slideshow a:hover .caption.dark1 p {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.boi-slideshow .caption.fade-on-hover {
    transition: opacity 0.45s ease-in-out;
}
/* ============================ RESPONSIVE ============================ */
/* Tablet landscape: 5 cols → 4 so cards don't get cramped. */
@media (max-width: 1199px) {
    .products-grid:not(.splide__list):not(.splide) {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}
@media (max-width: 959px) {
    .boi-header__inner {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 0;
        gap: 10px;
    }
    .boi-header__burger {
        display: inline-flex;
        order: 0;
    }
    .boi-header__logo {
        order: 1;
        margin-right: auto;
    }
    .boi-header__actions {
        order: 2;
    }
    .boi-header__search {
        order: 3;
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    /* Mobile drawer */
    .boi-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 340px;
        background: var(--c-header-bg);
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4);
        transform: translateX(-100%);
        transition: transform var(--t) ease;
        z-index: calc(var(--header-z) + 20);
        overflow-y: auto;
        box-shadow: none;
    }
    .boi-nav.is-open {
        transform: translateX(0);
    }
    .boi-nav__panel {
        padding: 56px 0 24px;
    }
    .boi-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        border-radius: var(--r-sm);
    }
    .boi-nav__close:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    .boi-nav__backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity var(--t);
        z-index: calc(var(--header-z) + 10);
    }
    .boi-nav__backdrop.is-visible {
        opacity: 1;
    }
    body.boi-nav-open {
        overflow: hidden;
    }
    #nav {
        display: block;
    }
    #nav > li {
        display: block;
    }
    #nav > li > a,
    .nav-regular .nav-item.level0 > a {
        display: block;
        padding: 14px 20px;
        font-size: var(--fs-base);
        letter-spacing: 0.04em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .col2-left-layout .col-left.sidebar,
    .col2-right-layout .col-right.sidebar,
    .col2-left-layout .col-main,
    .col2-right-layout .col-main {
        float: none;
        width: 100%;
    }
    .col2-left-layout .main > .breadcrumbs,
    .col2-left-layout .main > .page-title {
        margin-left: 0;
    }
    .products-grid:not(.splide__list):not(.splide) {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .products-grid .product-info {
        padding: 12px 12px 2px;
    }
    .products-grid .actions {
        padding: 10px 12px 12px;
    }
    .boi-footer-usp__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .boi-footer-usp__item:nth-child(3)::before {
        display: none;
    }
    .brand-slider .item a {
        height: 60px;
        padding: 12px;
    }
    .boi-footer__bar {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
    }
    .boi-footer__payment,
    .boi-footer__social,
    .boi-footer__newsletter {
        justify-self: center;
    }
    .boi-footer__newsletter .block-subscribe {
        flex-wrap: wrap;
        justify-content: center;
    }
    .boi-footer__newsletter input[type="email"] {
        width: 100%;
        max-width: 280px;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: var(--fs-xl);
    }
    h2 {
        font-size: var(--fs-lg);
    }
    h3 {
        font-size: var(--fs-md);
    }
    .boi-header__logo img {
        max-height: 40px;
    }
    .boi-header__search .input-box {
        height: 46px;
    }
    .boi-header__search .search-button {
        width: 46px;
        height: 46px;
    }
    .boi-header__icon,
    .boi-header__cart .skip-cart {
        width: 36px;
        height: 36px;
    }
    .boi-topbar {
        font-size: var(--fs-sm);
        padding: 8px 12px;
    }
    .product-view .btn-cart,
    .product-view .btn-checkout {
        width: 100%;
    }
    .input-text,
    textarea,
    select {
        width: 100%;
    }
    .boi-footer__columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .boi-footer-usp__item {
        padding: 20px 16px;
    }
}
@media (max-width: 479px) {
    .products-grid:not(.splide__list):not(.splide) {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .boi-footer__columns {
        grid-template-columns: 1fr;
    }
    .boi-footer-usp__grid {
        grid-template-columns: 1fr;
    }
    .boi-footer-usp__item + .boi-footer-usp__item::before {
        display: none;
    }
    .boi-footer__newsletter input[type="email"],
    .boi-footer__newsletter .button {
        width: 100%;
        border-radius: var(--r-sm);
    }
    .boi-footer__newsletter .block-content {
        flex-wrap: wrap;
        gap: 8px;
    }
}