/**
 * 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: var(--ty-h1);
    letter-spacing: -0.02em;
}
/* Category page intro copy (above the product grid) — spec: Inter 14
   con fallback Helvetica e color text-muted. Si applica anche alle
   /shopby/index/view (attribute option pages) che riusano la stessa
   classe sul wrapper `.std`. */
.category-description {
    font: var(--ty-cat-desc);
    color: var(--c-text-muted);
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
}
.category-description > *:first-child {
    margin-top: 0;
}
.category-description > *:last-child {
    margin-bottom: 0;
}
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 {
    font: var(--ty-breadcrumb);
    letter-spacing: var(--ty-breadcrumb-ls);
    text-transform: var(--ty-breadcrumb-tt);
    color: var(--c-text-muted);
}
.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;
}
/* Page title (categoria/CMS): kill default h1 browser margin and applica
   spaziature compatte e controllate. Senza questo, l'h1 con --ty-h1
   (clamp 40-60px) ereditava ~32px di margine sopra/sotto. */
.page-title {
    margin: 8px 0 8px;
}
.page-title h1,
.page-title h2 {
    margin: 0;
}
/* Numero prodotti accanto al titolo categoria/search/shopby — stile mono,
   peso normale, color mute, baseline-aligned con l'H1 (font-size relativo).
   Reso solo se il template title.phtml trova un `current_layer` o
   `current_category` valido (vedi page/html/title.phtml). */
.page-title h1 .page-title-count {
    margin-left: 12px;
    font-family: var(--boi-font-mono, var(--font-family));
    font-size: 0.45em;
    font-weight: 400;
    color: var(--c-text-mute);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.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;
}
/* ============================ MINICART (offcanvas drawer) ============================ */
#offcanvas .minicart-wrapper {
    padding: 16px 20px;
}
#offcanvas .minicart-message:empty {
    display: none;
}
#offcanvas .minicart-message {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
}
#offcanvas .minicart-content > div:first-child {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}
#offcanvas .mini-products-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#offcanvas .mini-products-list li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
    align-items: flex-start;
}
#offcanvas .mini-products-list li:last-child {
    border-bottom: none;
}
#offcanvas .mini-products-list .product-image {
    flex-shrink: 0;
    width: 72px;
    display: block;
}
#offcanvas .mini-products-list .product-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: #fff;
}
#offcanvas .mini-products-list .product-details {
    flex: 1;
    min-width: 0;
}
#offcanvas .mini-products-list .product-name {
    margin: 0 0 6px;
    line-height: 1.3;
}
#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 .product-name a:hover {
    color: var(--c-primary);
}
/* Price/Qty info table — re-styled flat to look like 2 metadata rows */
#offcanvas .mini-products-list .info-wrapper {
    margin: 0;
    border-collapse: collapse;
    width: 100%;
}
#offcanvas .mini-products-list .info-wrapper th,
#offcanvas .mini-products-list .info-wrapper td {
    padding: 2px 0;
    text-align: left;
    background: transparent;
    border: none;
    font-size: var(--fs-xs);
    line-height: 1.4;
    vertical-align: middle;
}
#offcanvas .mini-products-list .info-wrapper th {
    color: var(--c-text-muted);
    font-weight: 500;
    width: 40px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#offcanvas .mini-products-list .info-wrapper td {
    font-weight: 600;
    color: var(--c-price);
}
#offcanvas .mini-products-list .qty-wrapper td {
    color: var(--c-text);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}
#offcanvas .mini-products-list input.qty {
    width: 50px;
    height: 28px;
    padding: 4px 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    text-align: center;
}
/* OK button mostrato solo quando l'input ha focus (la classe .visible è
   aggiunta da Minicart.displayQuantityButton in JS). */
#offcanvas .mini-products-list .quantity-button {
    display: none;
    height: 28px;
    padding: 0 10px;
    font-size: var(--fs-xs);
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
}
#offcanvas .mini-products-list .quantity-button.visible {
    display: inline-block;
}
#offcanvas .mini-products-list .btn-edit,
#offcanvas .mini-products-list .remove {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-decoration: none;
}
#offcanvas .mini-products-list .btn-edit:hover,
#offcanvas .mini-products-list .remove:hover {
    color: var(--c-primary);
    text-decoration: underline;
}
#offcanvas .mini-products-list .product-details > a + a,
#offcanvas .mini-products-list .product-details > * + a {
    margin-left: 4px;
}
#offcanvas .block-content {
    padding: 14px 0;
    border-top: 1px solid var(--c-border);
    margin-top: 4px;
}
#offcanvas .block-content .subtotal {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-sm);
}
#offcanvas .block-content .subtotal .label {
    color: var(--c-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: var(--fs-xs);
}
#offcanvas .minicart-actions {
    padding: 16px 20px 20px;
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    display: grid;
    gap: 10px;
}
#offcanvas .minicart-actions .checkout-types {
    list-style: none;
    margin: 0;
    padding: 0;
}
#offcanvas .minicart-actions .checkout-types li {
    margin: 0 0 8px;
}
#offcanvas .minicart-actions .checkout-button {
    display: block;
    background: var(--c-primary);
    color: #fff;
    padding: 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
    transition: background 0.15s ease;
}
#offcanvas .minicart-actions .checkout-button:hover {
    background: var(--c-primary-dark, #c64018);
    color: #fff;
}
#offcanvas .minicart-actions .cart-link {
    display: block;
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    text-decoration: underline;
    padding: 6px;
}
#offcanvas .minicart-actions .cart-link:hover {
    color: var(--c-primary);
}
#offcanvas .minicart-wrapper p.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
/* ─── 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(--c-d-text);
    font: var(--ty-nav);
    letter-spacing: var(--ty-nav-ls);
    text-transform: var(--ty-nav-tt);
    transition:
        background var(--t),
        color var(--t);
}
#nav > li > a:hover,
.nav-regular .nav-item.level0 > a:hover {
    background: rgba(128, 128, 128, 0.1);
    color: var(--c-d-text);
}
#nav > li.active > a,
.nav-regular .nav-item.level0.active > a {
    background: rgba(128, 128, 128, 0.15);
    color: var(--c-d-text);
}
.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(120px, 150px));
    justify-content: center; /* Center the cards if they don't fill the row */
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 1280px) {
    .nav-panel--dropdown .nav-submenu--mega {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 16px;
    }
}
.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;
}
/* Categoria tile — flat editorial style. Tile bianca, immagine top,
   label sotto su stessa tile (no dark bar). Hover: tile resta bianca
   + accent line top + image scale + leggera ombra/lift.

   Coerente con LEFT brand tile e RIGHT Most Wanted card: radius 4,
   accent line 2px, lift -2px, box-shadow soft. Same visual language. */
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    text-decoration: none;
    color: var(--c-text);
    aspect-ratio: 1 / 1;
    transition:
        border-color 0.2s ease,
        box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a::after {
    display: none;
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover {
    color: var(--c-text);
    border-color: var(--l-line);
    box-shadow: 0 6px 18px rgba(20, 17, 13, 0.08);
    transform: translateY(-2px);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover::before {
    transform: scaleX(1);
}

/* Thumbnail riempie l'intera tile (absolute fill). Image scaled-contain
   per non croppare prodotti studio-cutout. */
.nav-panel--dropdown .nav-thumb {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    aspect-ratio: auto;
    display: block;
}
.nav-panel--dropdown .nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px 8px 42px;
    box-sizing: border-box;
    display: block;
    /* JPG cutout cat-thumbnails — multiply per "fake alpha" on hover bg */
    mix-blend-mode: multiply;
    transition: transform 0.35s 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 per categorie senza thumbnail — niente sfondo (la tile
   bianca passa attraverso). */
.nav-panel--dropdown .nav-thumb--placeholder {
    background: transparent;
}

/* Label = caption bar nera semi-trasparente in fondo alla tile (Live
   Tile style). On hover diventa arancione piena. */
.nav-panel--dropdown
    .nav-submenu--mega
    > .nav-item
    > a
    > span:not(.nav-thumb):not(.caret):not(.cat-label) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 4px 6px 8px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--c-text);
    font: var(--ty-cat-card-label);
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item > a:hover > span:not(.nav-thumb):not(.caret):not(.cat-label) {
    color: var(--accent);
}
.nav-panel--dropdown .nav-submenu--mega > .nav-item.active > a > span:not(.nav-thumb):not(.caret):not(.cat-label) {
    color: var(--accent);
    font-weight: 700;
}
/* 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;
}
/* Metro tiles: rectangular sharp chips, white surface, full-color
   accent on hover (no rounded pills, no border). */
.nav-panel--dropdown .nav-block--bottom .links > li > a,
.nav-panel--dropdown .show-separators > .links > li > a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #ffffff;
    border: none;
    border-radius: 2px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.nav-panel--dropdown .nav-block--bottom .links > li > a:hover,
.nav-panel--dropdown .show-separators > .links > li > a:hover {
    background: var(--c-primary);
    color: #ffffff;
}
/* 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) — A-Z grid con tile cream pill coerenti
   col linguaggio brand option page + megamenu rail. Inline SVG dentro
   .shopby-brand-logo eredita color: #14110d via currentColor. */
.shop-by-list .shopby-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
    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-family: var(--boi-font-headings, inherit);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--sys-ink, #14110d);
    border-bottom: 1px solid var(--sys-hairline, rgba(0, 0, 0, 0.08));
    margin: 0 0 14px;
    padding: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.shop-by-list dd {
    margin: 0;
}
.shop-by-list dd ol {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.shop-by-list .box-shopby {
    margin: 0;
}
.shop-by-list .shopby-brand-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    color: #14110d;                 /* drives inline-SVG currentColor */
    padding: 12px 10px 8px;
    background: linear-gradient(180deg, #faf7f0 0%, #efeadd 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform var(--t), box-shadow var(--t);
    height: 100%;
    overflow: hidden;
}
.shop-by-list .shopby-brand-link:hover {
    color: #14110d;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 14px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.shop-by-list .shopby-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0;
    background: transparent;
    border: none;
}
.shop-by-list .shopby-brand-logo img,
.shop-by-list .shopby-brand-logo .shopby-brand-logo-svg {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.shop-by-list .shopby-brand-count {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text, #2a2a2a);
    display: block;
}
.shop-by-list .count {
    color: var(--c-text-muted, #777);
    font-weight: 400;
    font-size: 0.92em;
}
/* ============================ 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;
    /* JPG cutouts (white bg baked-in) → multiply per "fake alpha" su
       qualsiasi tile/bg color futuro. Costo zero su tile bianche. */
    mix-blend-mode: multiply;
}
/* 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: var(--ty-pcard-title);
    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: var(--ty-pcard-price);
    color: var(--c-price);
}
.products-grid .price-box .old-price .price {
    font: var(--ty-pcard-price-old);
}
.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 responsive: scala col viewport. min 32px (mobile/tablet),
       ideale 4vw (~77px @1920, ~58px @1440), max 80px. */
    gap: clamp(32px, 4vw, 80px);
}
/* `.no-display` wrapper degli hidden inputs (formkey + related_product) è
   width:0/height:0 ma `display: block` → in flex layout consuma comunque un
   gap-slot, sovraccaricando il container e spingendo la sidebar a wrappare.
   Gli `<input type="hidden">` interni restano serializzati anche con
   display:none sul wrapper. */
.product-view > form > .no-display {
    display: none;
}
/* Specificity bump (`> form` child combinator) per battere le regole legacy
   `.grid12-N { flex: 0 0 calc(X% - Ypx) }` (linee 366-382).
   Proporzioni a percentuale → scalano col container (max 1800px).
   - IMG 32%: cap 560px (@1750+ container)
   - Centro elastica: cap 640px
   - Sidebar 22%: cap 400px
   Math @1920 viewport (~1720 content): IMG 550 + Center 638 + Side 378 + gap 154 = 1720
   Math @1440 viewport (~1382 content): IMG 442 + Center 521 + Side 304 + gap 115 = 1382
   Math @1280 viewport (~1224 content): IMG 391 + Center 434 + Side 269 + gap 96  = 1190 */
.product-view > form > .product-img-column {
    flex: 0 0 32%;
    max-width: 560px;
}
.product-view > form > .product-primary-column {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
}
.product-view > form > .product-secondary-column {
    flex: 0 0 22%;
    max-width: 400px;
}
/* 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;
}
/* Viewport laptop standard (1200-1599): cap centro ridotto a 540 e gap 3vw
   per evitare che IMG+Center+Side+gap eccedano lo spazio del container e
   facciano wrappare la sidebar. Le proporzioni base (32% / 22%) restano. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .product-view > form {
        gap: clamp(28px, 3vw, 56px);
    }
    .product-view > form > .product-primary-column {
        max-width: 540px;
    }
}
/* Viewport intermedi (tablet landscape / laptop piccolo): le proporzioni
   desktop sono pensate per ≥1400px. Sotto i 1200px, allentiamo gap e cap
   per non schiacciare la primary column (label come "please enter shipping
   address" che wrappano su 2-3 righe). */
@media (max-width: 1199px) {
    .product-view > form {
        gap: 32px;
    }
    .product-view > form > .product-img-column {
        flex: 0 0 40%;
        max-width: 440px;
    }
    .product-view > form > .product-primary-column {
        max-width: none;
    }
    .product-view > form > .product-secondary-column {
        flex: 0 0 26%;
        max-width: 320px;
    }
}
@media (max-width: 767px) {
    .product-view > form {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 24px;
    }
    .product-view > form > .product-img-column,
    .product-view > form > .product-primary-column,
    .product-view > form > .product-secondary-column {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
}

/* =====================================================================
   PDP Buy-box — visual grouping di price + info-extra (SKU/MPN/avail) + CTA
   in un'unica zona transazionale. Wrapper .product-buy-box dichiarato in
   view.phtml; #product-info-extra viene spostato qui dentro via JS.
   ===================================================================== */
.product-view .product-buy-box {
    border: 1px solid var(--c-border-2);
    border-radius: 12px;
    padding: 20px 24px;
    background: var(--c-bg-alt);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Reset margin di sotto-elementi (la primary-column ha gap 20px che gestisce il
   ritmo verticale tra i fratelli, ma dentro la buy-box usiamo gap locale 14px) */
.product-view .product-buy-box > * {
    margin: 0;
}

/* =====================================================================
   PDP Info-extra (SKU / Barcode / MPN / Availability / Delivery date)
   Override delle regole vintage in boi_theme.css righe 213-229.
   Trasforma la table dotted-row in una compact info list con label
   uppercase mute + value bold a destra.
   ===================================================================== */
.product-view #product-info-extra {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.product-view #product-info-extra tr {
    border-bottom: 1px solid var(--c-border);
}
.product-view #product-info-extra tr:last-child {
    border-bottom: 0;
}
.product-view #product-info-extra td {
    padding: 8px 0;
    vertical-align: baseline;
    font-size: 13px;
    line-height: 1.4;
}
.product-view #product-info-extra td.label {
    width: auto;
    color: var(--c-text-mute);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    white-space: nowrap;
    padding-right: 16px;
}
.product-view #product-info-extra td.value {
    text-align: right;
    color: var(--c-text);
    font-weight: 500;
}

/* =====================================================================
   PDP Sidebar cards — "Riders Who Also Viewed" (AutoRelated vertical).
   Lo slider verticale renderizza i prodotti come `.itemslider--vertical .item`
   (Splide). Card con padding, hover lift + soft shadow.
   ===================================================================== */
.product-secondary-column .itemslider--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.product-secondary-column .itemslider--vertical .item {
    display: block;
    width: 100%;
    /* !important per battere `.itemslider--vertical .item { max-width: none }`
       in product-gallery.css (carica dopo styles.css).
       border-box per cap = box totale, non solo content. */
    box-sizing: border-box;
    max-width: 280px !important;
    padding: 14px 12px;
    /* !important richiesto per battere `border: 1px solid transparent !important`
       in product-gallery.css (regola globale per .itemslider--vertical .item).
       --c-border-2 (0.16) invece di --c-border (0.08): più visibile su bg bianco
       per dare alla card un perimetro percepibile, non da fantasma. */
    border: 1px solid var(--c-border-2) !important;
    border-radius: 10px;
    background: var(--c-bg);
    transition: transform 0.2s var(--sys-ease),
                box-shadow 0.2s var(--sys-ease),
                border-color 0.2s var(--sys-ease);
}
.product-secondary-column .itemslider--vertical .item:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 17, 13, 0.28) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.product-secondary-column .itemslider--vertical .item .product-image-wrapper {
    text-align: center;
    margin-bottom: 8px;
}
.product-secondary-column .itemslider--vertical .item .product-image img {
    max-width: 140px;
    height: auto;
    margin: 0 auto;
}
.product-secondary-column .itemslider--vertical .item .product-name {
    text-align: center;
    font-size: 13px;
    margin: 0 0 6px;
    line-height: 1.3;
}
.product-secondary-column .itemslider--vertical .item .product-name a {
    color: var(--c-text);
    text-decoration: none;
    font-weight: 500;
}
.product-secondary-column .itemslider--vertical .item .product-name a:hover {
    color: var(--c-primary);
}
.product-secondary-column .itemslider--vertical .item .price-box {
    margin: 0;
    justify-content: center;
    font-size: 13px;
}
.product-secondary-column .itemslider--vertical .item .price-box .price-label {
    display: none;
}
/* product-gallery.css inietta un kicker `PRICE` prima del valore via
   `::before` su tutti i .price-box dentro `.product-view`. Nelle card
   autorelated della sidebar il kicker è ridondante e occupa spazio. */
.product-secondary-column .itemslider--vertical .item .price-box::before {
    content: none;
}
/* Compatta gli swatch lists nelle card sidebar (alcuni prodotti hanno
   liste di 7+ varianti che spaccano l'altezza della card). */
.product-secondary-column .itemslider--vertical .item .configurable-swatch-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 6px 0;
    padding: 0;
}
.product-secondary-column .itemslider--vertical .item .configurable-swatch-list li {
    margin: 0;
    float: none;
}

/* Mobile/tablet: quando la sidebar wrappa sotto le altre colonne (≤1199px) il
   layout verticale delle card diventa una "barra lunga inutile". Switch a
   carosello orizzontale scrollabile (snap on x). */
@media (max-width: 1199px) {
    /* Specificity bumped (`.product-view` prefix) per battere
       `.itemslider.itemslider--vertical { flex-direction: column !important }`
       in product-gallery.css (carica dopo styles.css → !important + stessa
       specificity vince product-gallery senza il bump). */
    .product-view .product-secondary-column .itemslider--vertical {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: stretch;
        gap: 12px;
        padding: 4px 0 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .product-view .product-secondary-column .itemslider--vertical .item {
        flex: 0 0 240px;
        max-width: 240px !important;
        scroll-snap-align: start;
    }
    /* Sidebar full-width quando wrappa, così il carosello ha respiro reale. */
    .product-view > form > .product-secondary-column {
        flex: 1 1 100% !important;
        max-width: none !important;
    }
}
/* Mobile stretto (<768px): il card 240px schiaccia il viewport (358px utili).
   Cap a ~165px così 2 card sono visibili side-by-side, swatch e prezzo
   compatti. */
@media (max-width: 767px) {
    .product-view .product-secondary-column .itemslider--vertical .item {
        flex: 0 0 165px !important;
        max-width: 165px !important;
        padding: 10px 8px;
    }
    .product-view .product-secondary-column .itemslider--vertical .item .product-image img {
        max-width: 100%;
        max-height: 110px;
    }
    .product-view .product-secondary-column .itemslider--vertical .item .product-name {
        font-size: 12px;
        line-height: 1.25;
    }
    .product-view .product-secondary-column .itemslider--vertical .item .price-box {
        font-size: 12px;
    }
}

/* 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 =============================
   Brand slider (.brand-slider .item) — tile cream pill coerenti con la
   shop-by-list e con la brand option page hero.
   La megamenu per-category brand rail (.nav-brand-tile) è in
   boi_theme.css sotto il dark-rail design — contesti indipendenti. */
.brand-slider-wrapper {
    margin: 16px 0;
}
.brand-slider .item {
    padding: 6px;
    box-sizing: border-box;
}
.brand-slider .item a,
.brand-slider .item > img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    padding: 16px 18px;
    box-sizing: border-box;
    color: #14110d;                 /* drives inline-SVG currentColor */
    background: linear-gradient(180deg, #faf7f0 0%, #efeadd 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: transform var(--t), box-shadow var(--t);
    overflow: hidden;
}
.brand-slider .item a:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 14px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.brand-slider .item img,
.brand-slider .item .brand-logo-svg {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    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,
    .nav-mobile .nav-item.level0 > a {
        display: block;
        padding: 14px 20px;
        font-size: var(--fs-base);
        letter-spacing: 0.04em;
        color: var(--c-d-text);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    /* Mobile drawer — forza tutto il menu (livelli, dropdown, sotto-tile)
       a tema dark del drawer (var(--c-header-bg)). Override delle regole
       desktop di styles.css ~1260 (.nav-panel--dropdown { background:
       var(--card-bg) }, ~1340 .nav-submenu--mega > .nav-item > a {
       background: #fff }, ecc) che renderizzavano i pannelli bianchi
       dentro un drawer nero. Scope: solo dentro .boi-nav, solo in mobile.

       Le colonne complesse del megamenu (brand rail sx, Most Wanted dx,
       featured pages bottom) sono desktop-only design — nascoste qui per
       lasciare solo le category tile centrali, navigabili in colonna.

       Nota: il megamenu su mobile aggiunge `.nav-mobile` a #nav e una
       regola legacy in megamenu.css:225 (`#nav.nav-mobile { display: none }`)
       lo nasconde finché qualcuno aggiunge .show. Quel toggle è cablato
       sull'antico `a.mobnav-trigger` del modulo, non al nostro
       `.boi-header__burger` → il drawer si apriva ma il menu dentro era
       display:none. Force show qui dentro .boi-nav. */
    .boi-nav #nav,
    .boi-nav #nav.nav-mobile {
        display: block !important;
    }
    .boi-nav .nav-panel,
    .boi-nav .nav-panel--dropdown,
    .boi-nav .nav-panel--dropdown .nav-panel-inner,
    .boi-nav .nav-block,
    .boi-nav .nav-block--center,
    .boi-nav .nav-block--top,
    .boi-nav .nav-submenu--mega > .nav-item > a,
    .boi-nav .nav-item--only-subcategories > .nav-panel--dropdown {
        background: transparent !important;
        color: var(--c-d-text) !important;
        box-shadow: none !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    .boi-nav .nav-panel--dropdown {
        border-radius: 0 !important;
        border: none !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* Reset 3-col grid → single column flow su mobile */
    .boi-nav .nav-panel--dropdown .nav-panel-inner {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    /* Hide blocchi desktop-only del megamenu (brand rail, Most Wanted,
       featured pages bottom strip) — irrilevanti dentro l'accordion mobile. */
    .boi-nav .nav-block--left,
    .boi-nav .nav-block--right,
    .boi-nav .nav-block--bottom {
        display: none !important;
    }
    /* Category tile interni (.nav-submenu--mega > .nav-item > a) — sul
       desktop sono bg #fff con accent line top, qui dark con divider sottile. */
    .boi-nav .nav-submenu--mega {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    .boi-nav .nav-submenu--mega > .nav-item > a {
        aspect-ratio: auto !important;
        /* Il rendering desktop usa una grid quadrata con height controllata da
           aspect-ratio; in mobile flow drawer serve altezza naturale. Lo
           shorthand `height: auto` non basta perché il parent UL.dd-itemgrid è
           ancora un grid container con righe a height 0 → uso `display: flex`
           + min-height per dare al link una touch target garantita. */
        display: flex !important;
        align-items: center;
        min-height: 44px !important;
        height: auto !important;
        overflow: visible !important;
        padding: 12px 20px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        transform: none !important;
        background: transparent !important;
        color: var(--c-d-text) !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    .boi-nav .nav-submenu--mega > .nav-item > a::before {
        display: none !important;
    }
    /* Reset grid del UL.dd-itemgrid → flow verticale flex */
    .boi-nav .nav-submenu--mega.dd-itemgrid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    .boi-nav .nav-thumb,
    .boi-nav .nav-thumb--placeholder {
        display: none !important;
    }
    /* Section title del block top (es. "Featured Brands") in versione dark mobile */
    .boi-nav .section-title,
    .boi-nav .nav-block h3 {
        color: rgba(255, 255, 255, 0.55) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    /* Tutti i link dentro il drawer: light text + accent on hover.
       Include `a span` perché il rendering del megamenu wrappa le label
       sub-categoria in un `<span>` figlio che eredita color dal CSS desktop
       (--c-text, quasi nero) → testo invisibile su drawer scuro. Forziamo
       light anche sullo span. */
    .boi-nav a,
    .boi-nav a span,
    .boi-nav .nav-panel a,
    .boi-nav .nav-panel a span,
    .boi-nav .nav-panel--dropdown a,
    .boi-nav .nav-panel--dropdown a span {
        color: var(--c-d-text) !important;
    }
    .boi-nav a:hover,
    .boi-nav a:hover span,
    .boi-nav .nav-panel a:hover,
    .boi-nav .nav-panel--dropdown a:hover {
        color: var(--c-primary) !important;
    }
    .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;
    }
    /* USP grid responsive ora gestito in boi_theme/footer.css (specificity uguale ma
       footer.css carica dopo styles.css, quindi le regole vivono lì). */
    .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;
    }
    /* USP grid responsive: gestito in boi_theme/footer.css (load order). */
    .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;
    }
}


/* ============================ /manufacturers/ page ============================
   Boi_ShopBy index/index — listing dei brand. Layout pulito con tile
   uniformi e loghi normalizzati per visual size identico (loghi
   sorgente hanno densità diversa: AGV con bandiera italia tall vs
   Akrapovic logotype wide — senza max-height alcuni sforavano la tile).
   ============================================================================== */
.boi-shopby-index-index .page-title h1 {
    font: var(--ty-h1);
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    text-transform: none;
}
.boi-shopby-index-index .block-title {
    margin: 0 0 16px;
    padding: 0;
    border: none;
    background: none;
}
.boi-shopby-index-index .block-title strong,
.boi-shopby-index-index .block-title strong span {
    font: var(--ty-kicker);
    letter-spacing: var(--ty-kicker-ls);
    text-transform: var(--ty-kicker-tt);
    color: var(--c-text-mute);
    background: none;
    font-weight: 500;
}
.boi-shopby-index-index .block {
    margin: 0 0 40px;
    background: none;
    border: none;
    padding: 0;
}
.boi-shopby-index-index .products-grid.itemgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.boi-shopby-index-index .products-grid.itemgrid > .item {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.boi-shopby-index-index .box-brand {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #ffffff;
    border: 1px solid var(--l-line);
    border-radius: 6px;
    overflow: hidden;
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.boi-shopby-index-index .box-brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}
.boi-shopby-index-index .box-brand:hover {
    border-color: var(--l-line-2);
    box-shadow: 0 8px 24px rgba(20, 17, 13, 0.10);
    transform: translateY(-2px);
}
.boi-shopby-index-index .box-brand:hover::before {
    transform: scaleX(1);
}
.boi-shopby-index-index .box-brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 18px 22px;
    text-decoration: none;
}
.boi-shopby-index-index .box-brand img {
    max-width: 88%;
    max-height: 72%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: saturate(0.92);
    transition:
        filter 0.3s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.boi-shopby-index-index .box-brand:hover img {
    filter: saturate(1);
    transform: scale(1.04);
}