:root {
    /* Palette Cromotools: nero / arancio / cromo.
       L'arancio brand va usato come riempimento, mai come testo su fondo
       chiaro (3.5:1 sul bianco, ne servono 4.5). Per testo/link/bordi ci sono
       le varianti scure: -ink (5.3:1 sul bianco, per testo, link e prezzi) e
       -dark (4.6:1, per bordi, focus e hover dei bottoni pieni), mentre
       -bright serve solo sopra il nero (7.5:1). Stessi valori dei token
       Tailwind --color-primary-* in web/tailwind/tailwind-source.css:
       -ink = --color-primary-darker, -dark = --color-primary-dark. */
    --cromo-primary: #fc4701;
    --cromo-primary-dark: #d93b00;
    --cromo-primary-ink: #c93500;
    --cromo-primary-bright: #ff7a45;
    --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;
    /* Niente zoom da doppio tap: il layout è già responsive e il doppio tap
       serve solo a far saltare la pagina. Il pinch-zoom lo blocca il meta
       viewport (default_head_blocks.xml) + js/no-zoom.js su iOS. */
    touch-action: manipulation;
    /* Safari iOS ingrandisce da solo il testo in landscape se non lo si blocca. */
    -webkit-text-size-adjust: 100%;
}

/* Su iOS, se un campo ha font-size < 16px il browser zooma la pagina al focus
   e non la riporta indietro. Sui dispositivi touch si forza quindi il minimo. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: max(16px, 1rem);
    }
}

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;
}

/**
 * Colore dei titoli sui fondi chiari.
 *
 * Attenzione alla cascata: Tailwind v4 emette le utility dentro
 * `@layer utilities`, mentre questo file e' fuori da ogni layer, e il CSS
 * senza layer batte quello nei layer *a prescindere dalla specificita'*.
 * Quindi il selettore di elemento `h2` qui sotto vince anche su `.text-white`:
 * senza l'esclusione, gli h2 del footer (che hanno text-white) venivano
 * dipinti di nero su fondo nero e sparivano. Dentro i contenitori scuri
 * lasciamo quindi decidere alle utility del template.
 */
.page-title-wrapper .page-title,
.block-title,
.widget-title,
:is(h1, h2, h3, h4):not(
    .bg-cromo-black *,
    .bg-cromo-black-soft *,
    .bg-secondary *
) {
    color: var(--cromo-secondary);
    letter-spacing: -0.02em;
}

a {
    transition: color 0.2s ease;
}

/* I bottoni sono esclusi: questo foglio non sta in nessun @layer, mentre le
   utility di Tailwind girano dentro @layer utilities, e una regola senza layer
   batte SEMPRE una in layer a prescindere dalla specificita'. Senza il :not()
   questa riga vincerebbe quindi su .btn:hover e il testo bianco del bottone
   pieno tornerebbe arancio all'hover. Sono elencate tutte le classi con cui i
   bottoni compaiono su un <a>: .btn del tema, .action/.button di Luma e le
   pagebuilder-button-*, che ricevono lo stile con @apply btn e quindi non
   hanno la classe .btn nel markup. */
a:hover:not(.btn):not(.action):not(.button):not([class*="pagebuilder-button"]) {
    color: var(--cromo-primary-ink);
}

/* Bottone pieno: niente bordo e testo bianco, come .btn-primary del tema
   (web/tailwind/components/button.css). Il fondo resta arancio pieno, senza
   gradiente verso -bright: sotto il testo bianco quella sfumatura chiara
   scenderebbe a 2.6:1. L'hover scende su -dark, non sale su -bright. */
.action.primary,
button.primary,
.button.primary {
    background: var(--cromo-primary);
    border: 1px solid transparent;
    color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(201, 53, 0, 0.25);
}

.action.primary:hover,
button.primary:hover,
.button.primary:hover {
    background: var(--cromo-primary-dark);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(201, 53, 0, 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: var(--cromo-text);
}

/* La card e' l'elemento che Hyva marca con .card, e va selezionato quello:
   nel listing e' il .product-item stesso, nella wishlist e' il .product-item-info
   interno, mentre il <li class="product-item"> esterno e' solo la cella della
   griglia. Senza il .card qui sotto, sulla wishlist i due elementi annidati
   ricevevano entrambi bordo, ombra e lift: due riquadri e due hover sovrapposti. */
.products-grid .product-item.card,
.product-item-info.card,
.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.card:hover,
.product-item-info.card: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);
}

/* Il prezzo e' testo su fondo bianco: arancio pieno = 3.5:1, si usa il
   ruggine scuro (7.4:1) che mantiene l'accento brand restando leggibile. */
.price-box .price-wrapper .price,
.product-item .price-box .price {
    color: var(--cromo-primary-ink);
    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{
    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-dark);
    box-shadow: 0 0 0 3px rgba(252, 71, 1, 0.35);
}

.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;
    display: flex !important;
}

.snowdog-menu-link-topmenu-mobile:hover,
.snowdog-menu-link-topmenu-mobile:focus-visible {
    color: var(--cromo-primary-ink) !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;
}

/* L'altezza sta sulla slide, non sul wrapper: il tema dà a
   [data-element="content"] un min-height di 50px e all'overlay 2rem di padding,
   quindi una slide senza testo collasserebbe a ~114px.
   La catena slide > a > wrapper va resa tutta block-level, altrimenti l'anchor
   (inline di default) non propaga l'altezza generata dall'aspect-ratio. */
.cms-index-index [data-content-type="slide"] {
    aspect-ratio: 3 / 1;
}

.cms-index-index [data-content-type="slide"] > a,
.cms-index-index [data-content-type="slide"] > [data-element="empty_link"] {
    display: block;
    height: 100%;
}

.cms-index-index [data-content-type="slide"] .pagebuilder-slide-wrapper {
    height: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 0 !important;
}

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

/* --------------------------------------------------------------------------
   Larghezza del banner in funzione del viewport.

   Il blocco sta in page.top, fuori da <main>, quindi non eredita nessun
   max-width: di base occupa tutta la larghezza del viewport.
     - sotto md (768px): resta a tutta larghezza, edge to edge
     - da md in su: viene riportato alla stessa larghezza del contenuto,
       replicando la scala di .container del tema (max-width + padding 1.5rem)
       così il banner risulta allineato agli slider prodotto sottostanti.
   -------------------------------------------------------------------------- */

.cms-index-index [data-content-type="slider"] {
    width: 100%;
    /* 96rem = il max-width massimo di .container (2xl), lo stesso che
       raggiunge il contenuto della pagina. Sotto i 1536px non vincola nulla,
       quindi il banner resta a tutta larghezza; sopra, si ferma e si centra. */
    max-width: 96rem;
    margin-inline: auto;
}

.pagebuilder-slider {
    margin-bottom: -20px;
}

/* --------------------------------------------------------------------------
   Barra di navigazione fissa in fondo, solo mobile
   (Magento_Theme/templates/html/mobile-bottom-nav.phtml).

   La barra è position:fixed, quindi esce dal flusso e coprirebbe l'ultima
   fascia di ogni pagina (footer, bottone "Aggiungi al carrello" a fondo
   scheda prodotto). Si compensa con un padding sul body, presente solo sotto
   lg — la stessa soglia a cui il template si nasconde con lg:hidden.

   env(safe-area-inset-bottom) è l'altezza della home indicator su iPhone senza
   tasto: senza, la barra ci finisce sotto e l'ultima riga di etichette è
   tagliata. Fuori da iOS vale 0, il calc() resta corretto.
   -------------------------------------------------------------------------- */

:root {
    /* h-14 dell'<ul> nel template (3.5rem) + il bordo superiore da 1px: senza
       quel pixel l'ultima riga del footer finisce sotto il bordo della barra. */
    --cromo-bottom-nav-height: calc(3.5rem + 1px);
}

@media (max-width: 1023.98px) {
    body {
        padding-bottom: calc(var(--cromo-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    /* Il padding sta sul body, ma la barra è ancorata al viewport: lo spazio
       sicuro sotto le icone va aggiunto dentro la barra stessa. */
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}