:root {
    /* Palette Cromotools: nero / rosso / cromo */
    --cromo-primary: #d92027;
    --cromo-primary-dark: #a8141a;
    --cromo-primary-bright: #ff3b3b;
    --cromo-secondary: #0d0e12;
    --cromo-secondary-soft: #16181d;
    --cromo-secondary-line: #23262d;
    --cromo-chrome: #c9cfd6;
    --cromo-chrome-light: #eef1f4;
    --cromo-chrome-dark: #8b9299;
    --cromo-chrome-gradient: linear-gradient(135deg, #f7f9fb 0%, #d5dbe2 42%, #9aa2ab 52%, #e6eaee 100%);
    --cromo-surface: #ffffff;
    --cromo-surface-2: #f4f6f8;
    --cromo-border: #dde2e8;
    --cromo-text: #14171c;
    --cromo-muted: #5b6470;
    --cromo-shadow: rgba(13, 14, 18, 0.06);
    --cromo-shadow-strong: rgba(13, 14, 18, 0.12);
}

html {
    scrollbar-gutter: stable;
}

body {
    color: var(--cromo-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-wrapper,
.page-main {
    background: transparent;
}

.page-title-wrapper .page-title,
.block-title,
.widget-title,
h1, h2, h3, h4 {
    color: var(--cromo-secondary);
    letter-spacing: -0.02em;
}

a {
    transition: color 0.2s ease;
}

a:hover {
    color: var(--cromo-primary-dark);
}

.action.primary,
button.primary,
.button.primary {
    background: linear-gradient(180deg, #e2262d 0%, var(--cromo-primary) 55%, var(--cromo-primary-dark) 100%);
    border: 1px solid var(--cromo-primary-dark);
    color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(217, 32, 39, 0.25);
}

.action.primary:hover,
button.primary:hover,
.button.primary:hover {
    background: linear-gradient(180deg, var(--cromo-primary) 0%, var(--cromo-primary-dark) 100%);
    border-color: var(--cromo-primary-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 32, 39, 0.32);
}

.action.secondary,
button.secondary,
.button.secondary {
    border: 1px solid var(--cromo-chrome);
    background: linear-gradient(180deg, #ffffff 0%, var(--cromo-chrome-light) 100%);
    color: var(--cromo-secondary);
    border-radius: 0.5rem;
}

.action.secondary:hover,
button.secondary:hover,
.button.secondary:hover {
    border-color: var(--cromo-chrome-dark);
    background: linear-gradient(180deg, var(--cromo-chrome-light) 0%, #dfe4ea 100%);
    color: var(--cromo-secondary);
}

.header.panel,
.page-header,
.page-header .panel.wrapper,
.page-header .header.panel,
.nav-sections,
.nav-sections .navigation,
.nav-sections .navigation .level0 > .level-top {
    background-color: var(--cromo-secondary) !important;
    color: #fff !important;
}

.page-header .panel.wrapper {
    border-bottom: 1px solid var(--cromo-secondary-line);
}

.header.panel > .header.links a,
.page-header > a,
.page-header .panel.wrapper > .header.links a,
.page-header .panel.wrapper .switcher-trigger,
.page-header .panel.wrapper .switcher-options,
.nav-sections .navigation .level0 > .level-top,
.nav-sections .navigation .level0 .submenu a {
    color: #fff !important;
}

.header.panel > .header.links a:hover,
.nav-sections .navigation .level0 > .level-top:hover {
    color: var(--cromo-primary-bright) !important;
}

#customer-menu + nav a,
#customer-menu + nav .customer-menu-link,
#customer-menu + nav .header.customer.logged.in.links a,
#customer-menu + nav .header.customer.logged.out.links a {
    color: var(--cromo-text) !important;
}

.navigation .level0 > .level-top {
    color: #fff;
    font-weight: 600;
}

.minicart-wrapper .action.showcart .counter.qty {
    background: var(--cromo-primary);
    color: #fff;
}

.products-grid .product-item,
.product-item-info,
.product-card,
.category-product-item {
    border: 1px solid var(--cromo-border);
    background: var(--cromo-surface);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px var(--cromo-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.products-grid .product-item:hover,
.product-item-info:hover,
.product-card:hover,
.category-product-item:hover {
    transform: translateY(-3px);
    border-color: var(--cromo-chrome-dark);
    box-shadow: 0 16px 34px var(--cromo-shadow-strong);
}

.price-box .price-wrapper .price,
.product-item .price-box .price {
    color: var(--cromo-primary);
    font-weight: 700;
}

.breadcrumbs {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--cromo-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.breadcrumbs .item:not(:last-child) a {
    color: var(--cromo-muted);
}

.filter-options,
.checkout-index-index .opc-wrapper,
.cart-summary {
    background: var(--cromo-surface);
    border: 1px solid var(--cromo-border);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px var(--cromo-shadow);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--cromo-primary);
    box-shadow: 0 0 0 3px rgba(217, 32, 39, 0.18);
}

.block-collapsible-nav {
    border: 1px solid var(--cromo-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header-action-btn:hover,
.header-action-btn:focus-visible {
    background-color: var(--cromo-secondary-line);
    color: var(--cromo-primary-bright);
}

.header-action-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Menu Snowdog desktop: link bianchi sull'header nero, hover rosso */
.snowdog-menu-link,
.snowdog-menu-link:hover,
.snowdog-menu-link:focus-visible {
    color: #fff !important;
    text-decoration: none !important;
}

.snowdog-menu-link:hover,
.snowdog-menu-link:focus-visible {
    color: var(--cromo-primary-bright) !important;
}

/* Menu Snowdog mobile: drawer su fondo bianco, testo scuro */
.snowdog-menu-link-topmenu-mobile,
.snowdog-menu-link-topmenu-mobile:hover,
.snowdog-menu-link-topmenu-mobile:focus-visible {
    color: var(--cromo-text) !important;
    text-decoration: none !important;
}

.snowdog-menu-link-topmenu-mobile:hover,
.snowdog-menu-link-topmenu-mobile:focus-visible {
    color: var(--cromo-primary-dark) !important;
}

/* ==========================================================================
   Banner slider della homepage (blocco CMS "home_banner")

   Il CSS di Hyvä per gli slider PageBuilder ancora la nav al bordo inferiore
   e riserva spazio sotto il banner per ospitarla:
     [data-content-type="slider"] { padding-block-end: 48px }
     [data-page-builder-slider-nav] { inset: auto 0 0 }
     .snap-track { padding-block: 24px }
   Qui la nav viene sovrapposta al banner, le frecce centrate verticalmente
   ai lati e i puntini spostati in basso. Scoped alla classe body .cms-index-index.
   ========================================================================== */

.cms-index-index [data-content-type="slider"] {
    padding-block: 0;
}

.cms-index-index [data-content-type="slider"] .snap-track {
    padding-block: 0;
}

/* La nav copre tutto il banner ma lascia passare i click al link della slide */
.cms-index-index [data-page-builder-slider-nav] {
    inset: 0;
    padding-inline: 1rem;
    pointer-events: none;
}

/* Frecce: centrate verticalmente, agli estremi */
.cms-index-index [data-page-builder-slider-nav] > button {
    pointer-events: auto;
    align-self: center;
}

/* Puntini: sovrapposti in basso, non al centro verticale */
.cms-index-index [data-page-builder-slider-nav] .snap-pager {
    pointer-events: auto;
    position: absolute;
    inset-inline: 0;
    bottom: 0.75rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Slide del banner: cover + altezza proporzionale alla larghezza.

   Perché qui e non negli stili inline del blocco CMS: PageBuilder riscrive il
   contenuto del blocco a ogni salvataggio da admin e perde gli stili inline
   del wrapper (background-size e min-height). Nel CSS del tema invece sono
   permanenti. Gli !important servono proprio a vincere sugli stili inline che
   PageBuilder rigenera.

   L'altezza deriva da aspect-ratio, quindi segue la larghezza del viewport
   invece di essere un valore fisso. Rapporti allineati ai formati immagine
   consigliati: 3:1 desktop (2400x800), 6:5 mobile (1080x900).
   -------------------------------------------------------------------------- */

.cms-index-index [data-content-type="slider"] {
    min-height: 0 !important;
}

.cms-index-index [data-content-type="slide"] .pagebuilder-slide-wrapper {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 1;
    /* evita altezze eccessive sugli schermi molto larghi */
    max-height: 640px;
}

@media (max-width: 767px) {
    .cms-index-index [data-content-type="slide"] .pagebuilder-slide-wrapper {
        aspect-ratio: 6 / 5;
        max-height: none;
    }
}