/* =========================================================================
   hummingbird-wholesale — FONDAZIONE (wh-base.css) · 22/09/2026
   Si carica DOPO custom.css di ECM (identico al .com) e ne corregge solo quello che il
   wholesale fa diversamente. Proprietà: fondazione. Le aree hanno il loro file
   (wh-home / wh-listing / wh-product / wh-account): qui non si scrivono regole di area.

   Regole:
   - i 9 token --ecs-* li definisce custom.css (valori del .com): qui NON si ridefiniscono;
   - le estensioni del wholesale hanno il prefisso --wh-* e stanno su :root;
   - custom.css NON dichiara cascade layer, come questo file: vincono sulle regole normali di
     Hummingbird ma NON sulle utility !important di Bootstrap (@layer utilities). Per nascondere
     o mostrare qualcosa che porta d-*-block/none si agisce su un contenitore nostro.
   ========================================================================= */

:root {
  /* One typeface, inherited from the ECM brand layer; applies to codes too. */
  --wh-font: var(--bs-body-font-family);
  --bs-font-monospace: var(--bs-body-font-family);
  /* palette di marca (canoni ECS: docs/knowledge-base/ecs-brand-canoni.md) */
  --wh-rubin: #e64b38;          /* = --ecs-accent: marchio, pillole, prezzi */
  --wh-terracotta: #a4755c;
  --wh-navy: #323340;           /* deep navy dei canoni; il .com usa --ecs-ink #32323f */
  --wh-neutral: #dadada;
  --wh-olive: #beb35f;

  /* accessibilità: il bianco su #e64b38 fa 3,9:1 (sotto AA a 16px) → i PIENI con testo bianco
     usano l'arancio scuro (4,8:1); a occhio è lo stesso colore */
  --wh-fill: #d13a28;
  --wh-fill-hover: #b8321f;
  --wh-fill-active: #a12c1b;
  --wh-accent-ink: #c63b28;     /* arancio per testo piccolo su carta/bianco: 4,6:1 */
  --wh-text-2: #5f5a54;         /* testo secondario: 6,0:1 su carta (il --ecs-muted fa 3,4:1) */
  --wh-field-border: #8e8882;   /* bordo dei campi: 3,5:1 (WCAG 1.4.11) */
  --wh-ok: #2e7d5b;
  --wh-ok-050: #e8f3ee;
  --wh-warn: #8a5a00;
  --wh-warn-050: #fdf3e1;

  /* forme e ombre del .com (card header 15px, azioni 10px).
     07/10/2026 tasti squadrati (Federico: «più in stile ECS, meno generati dall'AI»): niente più pillole,
     --wh-radius-pill resta col suo nome (lo leggono anche ecs-ui.css e i moduli) ma vale 8px come le
     schede del .com (.ecmsel-tab); --wh-radius-tag 4px per i badge di testo. Tondi veri (pallini,
     interruttore, contatori) hanno 50%/999px scritto a mano e non cambiano. */
  --wh-radius-sm: 4px;
  --wh-radius: 10px;
  --wh-radius-lg: 15px;
  --wh-radius-pill: 8px;
  --wh-radius-tag: 4px;
  --wh-shadow-card: 0 4px 40px 0 rgba(0, 0, 0, .10);
  --wh-shadow-soft: 0 4px 20px rgba(50, 50, 63, .06);
}

/* Descrizioni incollate da altri cataloghi possono imporre Poppins, Verdana, ecc.
   Solo la famiglia viene normalizzata: formattazione e icone restano intatte.
   !important serve a prevalere sulle dichiarazioni inline dei contenuti. */
.rich-text[style*="font" i],
.rich-text [style*="font" i],
.rich-text font[face] { font-family: var(--wh-font) !important; }

/* ---- Pulsanti ------------------------------------------------------------ */
.btn-primary {
  --bs-btn-bg: var(--wh-fill);
  --bs-btn-border-color: var(--wh-fill);
  --bs-btn-hover-bg: var(--wh-fill-hover);
  --bs-btn-hover-border-color: var(--wh-fill-hover);
  --bs-btn-active-bg: var(--wh-fill-active);
  --bs-btn-active-border-color: var(--wh-fill-active);
  --bs-btn-disabled-bg: var(--wh-fill);
  --bs-btn-disabled-border-color: var(--wh-fill);
}
.btn-outline-primary {
  --bs-btn-color: var(--wh-accent-ink);
  --bs-btn-border-color: var(--wh-accent-ink);
  --bs-btn-hover-bg: var(--wh-fill);
  --bs-btn-hover-border-color: var(--wh-fill);
  --bs-btn-active-bg: var(--wh-fill-active);
  --bs-btn-active-border-color: var(--wh-fill-active);
}
/* il pulsante "scuro" del .com: inchiostro, raggio 10 */
.wh-btn-ink, .btn-dark {
  --bs-btn-bg: var(--ecs-ink); --bs-btn-border-color: var(--ecs-ink);
  --bs-btn-hover-bg: var(--ecs-ink-800); --bs-btn-hover-border-color: var(--ecs-ink-800);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
  border-radius: var(--wh-radius);
}

/* ---- Focus sempre visibile (il .com lo toglie sui campi) ------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wh-fill);
  outline-offset: 2px;
}

/* ---- Campi ------------------------------------------------------------------ */
.form-control, .form-select {
  border-color: var(--wh-field-border);
  border-radius: var(--wh-radius);
  color: var(--ecs-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--wh-fill);
  box-shadow: 0 0 0 .2rem rgba(209, 58, 40, .18);
}
.form-control::placeholder { color: var(--wh-text-2); opacity: 1; }
.form-label, label { color: var(--ecs-ink); }
.form-check-input:checked { background-color: var(--wh-fill); border-color: var(--wh-fill); }

/* ---- Card: superfici bianche su carta, come le card del .com ------------------ */
.card, .wh-card {
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--wh-radius-lg);
  --bs-card-inner-border-radius: var(--wh-radius-lg);
  background: #fff;
  border: 0;
  border-radius: var(--wh-radius-lg);
  box-shadow: var(--wh-shadow-soft);
}
.wh-card { padding: 1.5rem; }

/* ---- Badge --------------------------------------------------------------------- */
.badge { border-radius: var(--wh-radius-tag); font-weight: 700; }
.wh-badge { display: inline-block; padding: .3em .7em; font-size: 12px; line-height: 1; border-radius: var(--wh-radius-tag); font-weight: 700; background: var(--wh-fill); color: #fff; }
.wh-badge--ink { background: var(--ecs-ink); color: #fff; }
.wh-badge--soft { background: var(--ecs-accent-050); color: var(--wh-accent-ink); }
/* (le utility .bg-* e .text-* di Bootstrap stanno in @layer utilities con !important: da qui non si battono) */

/* ---- Prezzi B2B -------------------------------------------------------------- */
/* Etichetta fiscale accanto ai prezzi netti: sul wholesale si dice sempre «tasse escluse».
   Le aree listing/prodotto/carrello usano questa classe, non la ridisegnano. */
.wh-tax-note { font-size: 12px; font-weight: 600; color: var(--wh-text-2); letter-spacing: .01em; }

/* testo secondario leggibile (sostituisce --ecs-muted per il testo piccolo) */
.wh-muted { color: var(--wh-text-2); }

/* ---- Intestazione: il logo WHOLESALE è più largo di quello del .com --------------- */
.wh-header .wh-logo img { height: 46px; width: auto; max-height: none; }
@media (max-width: 1199.98px) {
  .wh-header .wh-logo img { height: 38px; }
}
/* Sul telefono il .com mostra il solo logomark: sul wholesale resta il logo completo, perché la
   parola WHOLESALE è quello che distingue il sito (misurato a 390px: logo 28px + lingua +
   account + carrello stanno su una riga). */
@media (max-width: 767px) {
  .wh-header .ecs-header__logo--full { display: flex; }
  .wh-header .ecs-header__logo--mark { display: none; }
  .wh-header .wh-logo img { height: 28px; }
  .wh-header .ecs-header__logo h1 { font-size: inherit; }
}

/* Menu categorie: nelle pagine interne; in home la classe ereditata lascia spazio alle sei card.
   Voci: il grigio del .com (#AFAFAF su bianco) fa 2,1:1; qui #767676 (4,5:1), a occhio lo stesso.
   Hover e voce corrente restano quelli del .com (colore della categoria). */
.wh-header .ecs-header__nav .ps-mainmenu__tree > li .ps-mainmenu__tree-link { color: #767676; }
.wh-header .ecs-header__nav .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover { color: var(--ecs-menu-color, var(--ecs-ink)); }
.wh-header .ecs-header__nav .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link { color: #fff; }
/* anello di focus: la regola di Hummingbird sul menu (fuori dai layer, molto specifica) lo faceva grigio */
.wh-header .wh-header__nav .ps-mainmenu .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus-visible,
.wh-header .ecs-header__tools :is(a, button, select):focus-visible,
.wh-header .ecs-header__search :is(input, button, a):focus-visible {
  outline: 2px solid var(--wh-fill); outline-offset: 2px;
}
.wh-header .wh-header__nav .ps-mainmenu .ps-mainmenu__tree > li .ps-mainmenu__tree-link:focus:not(:focus-visible) { outline: 0; }
/* Menu del telefono (offcanvas): l'elenco scorre. Hummingbird mette `overflow:hidden` sull'offcanvas e
   nessuno scorrimento dentro: con le 9 voci dell'8.2 e i due gruppi aperti il fondo del menu (lingua
   compresa) finiva fuori schermo e non si poteva raggiungere. `min-height:0` serve o il figlio flex non
   si stringe mai. */
.wh-header #mobileMenu .ps-mainmenu__mobile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.wh-header #mobileMenu .ps-mainmenu__additionnals { flex: 0 0 auto; }

/* Menu del telefono (offcanvas): voci in inchiostro, separate da un filo, con la striscia del colore
   della categoria a sinistra (come le barre colorate del menu mobile del wholesale 8.2). I colori
   --ecs-menu-color li dà custom.css su [data-id="category-N"] dentro .ecs-header__nav. */
.wh-header #mobileMenu .menu__list { list-style: none; margin: 0; padding: 0; }
.wh-header #mobileMenu .menu__list > li {
  border-bottom: 1px solid var(--ecs-line);
  border-left: 4px solid var(--ecs-menu-color, var(--ecs-ink));
}
.wh-header #mobileMenu .menu__link {
  display: block; padding: .85rem .9rem; color: var(--ecs-ink); font-size: 16px; font-weight: 600; text-decoration: none;
}
.wh-header #mobileMenu li.current .menu__link { background: var(--ecs-menu-color, var(--ecs-ink)); color: #fff; }
/* Sotto le voci, i gruppi del pie' di pagina con `menu` (come «Espresso Coffee Shop +» e «Assistenza e
   servizi +» del menu mobile dell'8.2): <details> nativo, niente JS; «+» che diventa «−» da aperto. */
.wh-header #mobileMenu .wh-mmenu-group { border-bottom: 1px solid var(--ecs-line); }
.wh-header #mobileMenu .wh-mmenu-group:first-of-type { margin-top: 1rem; border-top: 1px solid var(--ecs-line); }
.wh-header #mobileMenu .wh-mmenu-group__title {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none;
  padding: .85rem .9rem; color: var(--ecs-ink); font-size: 16px; font-weight: 600;
}
.wh-header #mobileMenu .wh-mmenu-group__title::-webkit-details-marker { display: none; }
.wh-header #mobileMenu .wh-mmenu-group__title::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
.wh-header #mobileMenu .wh-mmenu-group[open] > .wh-mmenu-group__title::after { content: "\2212"; }
.wh-header #mobileMenu .wh-mmenu-group__title:focus-visible { outline: 2px solid var(--wh-fill); outline-offset: -2px; }
.wh-header #mobileMenu .wh-mmenu-group__links { list-style: none; margin: 0; padding: 0 .9rem .75rem; }
.wh-header #mobileMenu .wh-mmenu-group__links a {
  display: block; padding: .55rem 0; color: var(--wh-text-2); font-size: 15px; font-weight: 500; text-decoration: none;
}
.wh-header #mobileMenu .wh-mmenu-group__links a:hover { color: var(--ecs-ink); text-decoration: underline; }

/* ---- Pulsanti fatti con <a> ------------------------------------------------------ */
/* custom.css di ECM colora TUTTI i link (`a{color:#e64b38}`) fuori dai cascade layer: così batte il
   colore dei pulsanti di Bootstrap, che sta in un layer → «Procedi con il checkout» (un <a>) veniva
   arancio su arancio. Qui il pulsante torna a usare le sue variabili. */
a.btn { color: var(--bs-btn-color); }
a.btn:hover { color: var(--bs-btn-hover-color); }
a.btn:focus-visible { color: var(--bs-btn-hover-color); }
a.btn:active, a.btn.active { color: var(--bs-btn-active-color); }
a.btn.disabled { color: var(--bs-btn-disabled-color); }

/* ---- Pagine CMS ------------------------------------------------------------------ */
/* ⚠️ `.page-cms` è anche una classe del <body> sulle pagine CMS: si usa `.page-content--cms`. */
.page-content--cms { background: #fff; border-radius: var(--wh-radius-lg); padding: 2rem; }
@media (max-width: 767px) { .page-content--cms { padding: 1.25rem; } }
/* Le pagine del wholesale sono scritte per il tema V12: `.tabs > .tab > .title (h3 + span «+») + .content`,
   i pannelli chiusi con `.hidden`. L'apertura la fa views/js/cms-accordion.js di ecs_wholesale_ui, che
   aggiunge `.wh-acc`: senza JS i pannelli restano tutti aperti (niente testo irraggiungibile). */
.page-content--cms .tabs { margin: 1.25rem 0; border-top: 1px solid var(--ecs-line); }
.page-content--cms .tab { border-bottom: 1px solid var(--ecs-line); }
.page-content--cms .tab > .title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.page-content--cms .tab > .title h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; }
.page-content--cms .tab > .title h3.bold { font-weight: 700; }
.page-content--cms .tab > .title > span {
  flex: 0 0 28px; height: 28px; border: 1px solid var(--ecs-ink); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1;
}
.page-content--cms .tab > .content { padding: 0 0 1rem; }
.page-content--cms .wh-acc .tab > .title { cursor: pointer; }
.page-content--cms .wh-acc .tab > .content.hidden { display: none; }

/* ---- Tasti squadrati (07/10/2026) ---------------------------------------------------
   custom.css di ECM (identico al .com, non si tocca) disegna pillole da 999px: qui tornano ai 10px
   dei bottoni del .com (Configura, Confronta, Rilevanza) e i flag a etichetta da 4px. */
.btn-primary, .btn-outline-primary, .btn-secondary,
.products-section-title + a, .featured-products .all-product-link { border-radius: var(--wh-radius); }
.product-flag, .ecs-flag, .product-miniature__discount-badge { border-radius: var(--wh-radius-tag); }


/* ---- Testata su telefono (08/10/2026) ----
   Su telefono la ricerca e' un campo vero nella testata, a destra del logo: si tocca e si scrive,
   senza la lente da premere e senza la tendina che scendeva dall'alto. Il campo e' quello del tema
   (#ps_searchbar, che Hummingbird sposta nel pannello #searchCanvas sotto i 768px): il pannello si
   tiene fermo nella riga come contenitore normale, il tasto lente e "Annulla" si spengono.
   - Il contenitore strumenti e' vuoto su telefono (account e carrello sono nella barra in basso):
     si nasconde, altrimenti ruba spazio alla ricerca.
   - iPhone ingrandisce la pagina quando si tocca un campo con il testo sotto i 16px e la lascia
     ingrandita: su touch tutti i campi stanno a 16px (il testo d'esempio della ricerca a 14px,
     quello non fa scattare lo zoom). */
@media (max-width: 767.98px) {
  body:has(.wh-mbar) .ecs-header__tools { display: none; }
  body:has(.wh-mbar) .ecs-header__row { flex-wrap: nowrap; column-gap: 12px; }
  /* .ecs-header__row > : piu' specifica della regola in wh-home.css (caricato dopo) che fissa flex: 0 0 auto */
  body:has(.wh-mbar) .ecs-header__row > .ecs-header__search { flex: 1 1 0; min-width: 0; margin-left: 0; }
  .ecs-header__search .ps-searchbar--mobile { width: 100%; }
  .ecs-header__search #searchCanvas.offcanvas {
    position: static; visibility: visible; transform: none; transition: none;
    width: 100%; height: auto; background: transparent; border: 0; box-shadow: none; z-index: auto;
  }
  .ecs-header__search #searchCanvas .offcanvas-header { padding: 0; width: 100%; }
  .ecs-header__search #searchCanvas .offcanvas-header > .btn-link { display: none; }
  .ecs-header__search #searchCanvas .ps-searchbar__container,
  .ecs-header__search #searchCanvas #ps_searchbar { width: 100%; }
  /* lente dentro il campo, a destra (il tema mette il padding del campo con !important) */
  .ecs-header__search #searchCanvas .ps-searchbar__form { position: relative; width: 100%; }
  .ecs-header__search #searchCanvas #ps_searchbar_input { width: 100%; padding-left: 12px !important; padding-right: 38px !important; text-overflow: ellipsis; }
  .ecs-header__search #searchCanvas #ps_searchbar_input::placeholder { font-size: 14px; }
  .ecs-header__search #searchCanvas .ps-searchbar__magnifier {
    position: absolute; left: auto; right: 10px; top: 0; bottom: 0; margin: auto 0; height: 22px; width: auto; transform: none;
    pointer-events: none; /* disegno: il tocco passa al campo (il tasto lente del tema non invia, nemmeno da PC) */
  }
}
/* Il tasto lente ha .d-flex di Bootstrap, che sta in @layer utilities: un !important dentro un layer
   batte quelli fuori, quindi si spegne dentro lo stesso layer (li' vince la specificita' maggiore). */
@layer utilities {
  @media (max-width: 767.98px) { .ecs-header__search .ps-searchbar--mobile > .header-block { display: none !important; } }
}
@media (max-width: 991.98px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}