/* Ri-vestizione BOTANICO dell'header/strip condivisi + rimozione barra demo.
   GLOBALE (le classi header sono fuori da .botanico). Solo grafica: nessun impatto sul backend/wiring.
   Palette botanico: foresta #14251C / #0E1B14, oro #C4A24B / #E4CD86, avorio #F3EEE1. */

/* --- Via la barra "demo flow": si naviga come in produzione --- */
.demo-bar, .demo-hint { display: none !important; }

/* --- HERO CINEMA (home): il film a schermo intero DIETRO il contenuto, stile maison --- */
.botanico .hero-cinema .hero-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.botanico .hero-cinema .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,27,20,.46) 0%, rgba(14,27,20,.24) 42%, rgba(14,27,20,.86) 100%); }
.botanico .hero-cinema .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 940px; }
.botanico .hero-cinema .hero-sub { margin-left: auto; margin-right: auto; }
.botanico .hero-cinema .hero-actions { justify-content: center; }
.botanico .hero-cinema h1 { text-shadow: 0 2px 30px rgba(0,0,0,.45); }
/* rispetto per chi preferisce meno movimento: niente video, resta il fondale botanico */
@media (prefers-reduced-motion: reduce) {
  .botanico .hero-cinema .hero-bgvideo { display: none; }
}

/* ===== CHI SIAMO — il filmato verticale NON si taglia piu' (01/09/2026) =====
   La grafica lo consegna in formato reel. Riempire uno schermo largo con un verticale si puo'
   fare in due modi: tagliarlo (e buttare via meta' inquadratura, com'era fino a ieri) oppure
   dargli una cornice sua e riempire il resto. Qui si fa la seconda: il filmato si vede INTERO,
   identico a come lo si vede dal telefono, dentro una cornice a ritratto; dietro, a riempire lo
   schermo, la sua stessa fotografia ingrandita e sfocata.
   Il fondale e' una FOTO e non un secondo video: sfocato a quel modo nessuno vede la differenza,
   e non costa una seconda decodifica al computer di chi guarda.
   SOTTO I 960px NON CAMBIA NIENTE: la cornice torna a essere tutto lo schermo, come prima. */
.botanico .hero-ritratto .cs-fondale { display: none; }
.botanico .hero-ritratto .cs-ritratto { position: absolute; inset: 0; z-index: 0; }
.botanico .hero-ritratto .cs-cornice { position: absolute; inset: 0; }

@media (min-width: 961px) {
  /* il fondale: la stessa immagine, ingrandita e sfocata fino a diventare atmosfera */
  .botanico .hero-ritratto .cs-fondale {
    display: block; position: absolute; inset: 0; z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    filter: blur(40px) saturate(.95) brightness(.78);
    transform: scale(1.18);
  }
  /* Ogni pagina il fondale del SUO filmato: e' la sua stessa fotografia, sfocata. Prenderne una
     qualsiasi si vedrebbe -- i colori non tornerebbero con quello che si muove nella cornice. */
  .botanico .hero-cinema-cs .cs-fondale { background-image: url('img/chisiamo.jpg'); }
  .botanico .hero-cinema-hm .cs-fondale { background-image: url('img/hero-home-nuovo.jpg'); }
  /* il velo si sposta a sinistra, dove sta il testo: la cornice a destra resta limpida */
  .botanico .hero-ritratto .hero-veil {
    background:
      linear-gradient(100deg, rgba(14,27,20,.88) 0%, rgba(14,27,20,.60) 30%, rgba(14,27,20,.18) 58%, rgba(14,27,20,.28) 100%),
      linear-gradient(180deg, rgba(14,27,20,.30) 0%, transparent 34%, rgba(14,27,20,.52) 100%);
  }
  /* LA CORNICE A RITRATTO: 9/16 esatti, quindi il filmato ci sta dentro senza perdere un pixel */
  .botanico .hero-ritratto .cs-ritratto {
    position: absolute; inset: auto; z-index: 2;
    top: 50%; transform: translateY(-50%);
    /* Si tiene sul bordo della COLONNA del contenuto, non su quello dello schermo: su un monitor
       largo, incollata al vetro, lasciava in mezzo un vuoto che sembrava un errore. */
    right: max(clamp(1.6rem, 5vw, 4rem), calc((100vw - 1240px) / 2));
    /* L'altezza tiene conto della barra in alto, che occupa spazio prima che l'hero cominci:
       misurata in sole "vh" la cornice usciva sotto il bordo dello schermo su un portatile. */
    height: var(--cornice-h); aspect-ratio: var(--rapporto); width: auto;
  }
  /* l'alone dorato dietro: stacca la cornice dal fondale senza disegnarci una riga sopra */
  .botanico .hero-ritratto .cs-ritratto::before {
    content: ''; position: absolute; inset: -12% -20%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(196,162,75,.26), transparent 64%); filter: blur(26px);
  }
  /* Il passe-partout: una seconda cornice d'oro sottile, spostata di poco. E' il dettaglio che
     fa leggere il filmato come un QUADRO appeso invece che come un video incollato sulla pagina. */
  .botanico .hero-ritratto .cs-ritratto::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: -18px -18px 18px 18px; border-radius: 24px;
    border: 1px solid rgba(196,162,75,.34);
  }
  .botanico .hero-ritratto .cs-cornice {
    position: relative; inset: auto; width: 100%; height: 100%;
    border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(196,162,75,.45);
    box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
    animation: csFluttua 9s ease-in-out infinite;
  }
  .botanico .hero-ritratto .hero-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* il testo lascia libera la destra e sta a sinistra: al centro finirebbe sotto la cornice */
  .botanico .hero-ritratto .hero-inner { grid-template-columns: 1fr; text-align: left; justify-items: start; }
  .botanico .hero-ritratto .hero-actions { justify-content: flex-start; }
  .botanico .hero-ritratto .hero-kicker { margin-bottom: 1.1rem; }

  /* ===== TESTO E IMMAGINI COME UN RETTANGOLO SOLO — HOME E "CHI SIAMO" =====
     (Angela, 13/09/2026: «il rettangolo del testo centrato nello schermo, che occupi una gran
      fetta fino alle immagini» e poi «adatta anche Chi siamo alle medesime dimensioni».)
     Prima, misurato su 1440x900: 287px di vuoto in mezzo, blocco del testo alto 282 su 900,
     e testo 26px piu' basso della cornice.
     Le due meta' si legano a QUATTRO misure; tutto il resto si calcola da li', cosi' l'aria in
     mezzo e' esatta per costruzione e non cambia da uno schermo all'altro.
     L'unica cosa che distingue le due pagine e' il RAPPORTO della cornice, che ognuna dichiara
     per conto suo: la home 7/10 (i ritratti dei marchi), Chi siamo 9/16 (il suo filmato). */
  .botanico .hero-cinema-hm { --rapporto: .7; }
  .botanico .hero-cinema-cs { --rapporto: .5625; }
  .botanico .hero-ritratto {
    /* imbottiture UGUALI sopra e sotto: quelle di serie sono 100 e 120, e il testo le seguiva
       restando piu' in basso della cornice, che invece e' centrata per conto suo */
    /* 72 e non 96: con 96 la fascia veniva alta 912 su uno schermo da 900 e il fondo della
       cornice finiva appena sotto il bordo. Cosi' la composizione sta tutta nella prima
       schermata, che e' il punto di tutto questo. */
    padding-top: 72px; padding-bottom: 72px;
    /* il tetto e' 720: piu' in alto la cornice cresceva mentre il testo restava fermo, e sopra
       e sotto tornava l'aria che si voleva togliere */
    --cornice-h: clamp(380px, calc(100vh - 180px), 720px);
    --cornice-w: calc(var(--cornice-h) * var(--rapporto));
    --bordo: max(clamp(1.6rem, 4vw, 3.5rem), calc((100vw - 1560px) / 2));
    --vuoto: clamp(38px, 4vw, 70px);                    /* l'aria fra il testo e le immagini */
  }
  .botanico .hero-ritratto .cs-ritratto { right: var(--bordo); }
  /* la colonna arriva fin dove comincia la cornice, meno l'aria; e il blocco si centra in
     verticale sulla stessa riga della cornice */
  .botanico .hero-ritratto .hero-inner {
    max-width: none; width: 100%;
    padding-left: var(--bordo);
    padding-right: calc(var(--bordo) + var(--cornice-w) + var(--vuoto));
    min-height: var(--cornice-h);
    align-content: center;
  }
  .botanico .hero-ritratto .hero-copy { max-width: none; }
  /* IL TITOLO (opzione B, scelta da Angela il 13/09/2026). A questa misura riempie la colonna
     e va a capo da solo: sulla home diventa tre righe, e il blocco passa da 270 a 390 di
     altezza contro una cornice di 720 -- l'aria sopra e sotto scende da 225 a 165 per parte. */
  .botanico .hero-ritratto h1 { font-size: clamp(2.6rem, 4.6vw, 5rem); line-height: 1.08; }
  /* ⚠ La larghezza del sottotitolo in EM, non in "ch": i "ch" si contano sul carattere del
     contenitore, molto piu' stretto del serif del titolo -- con 36ch il titolo si spezzava in
     cinque righe. */
  .botanico .hero-ritratto .hero-sub {
    font-size: clamp(1.02rem, 1.28vw, 1.3rem); line-height: 1.6;
    max-width: 40em; margin-top: 1.3rem; margin-left: 0; margin-right: 0;
  }
  .botanico .hero-ritratto .hero-actions { margin-top: 1.9rem; }
}
@keyframes csFluttua { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
/* Chi ha chiesto meno animazioni non vede il filmato (regola gia' esistente): senza questo gli
   resterebbe una cornice VUOTA. Al suo posto la fotografia, ferma. */
@media (prefers-reduced-motion: reduce) {
  .botanico .hero-ritratto .cs-cornice { animation: none; background: url('img/chisiamo.jpg') center/cover no-repeat; }
}

/* --- Barra bloccata UNICA: header + strip spedizione (la strip ora SOTTO l'header) --- */
.site-sticky { position: sticky; top: 0; z-index: 200; }
.site-sticky .header { position: static !important; }
/* --- Strip spedizione: sotto l'header, tono scuro, centrata --- */
.top-strip { background: #0E1B14; color: #E4CD86; border-bottom: 1px solid rgba(196,162,75,.20); text-align: center; }
.top-strip span { opacity: .85; }

/* --- Header: verde scuro botanico --- */
.header { background: #14251C !important; border-bottom: 1px solid rgba(196,162,75,.22); }

/* Logo: foglia + testo oro/avorio */
.logo { color: #F3EEE1; }
.logo-mark { border-color: #C4A24B; color: #C4A24B; }
.logo-text small { color: #C4A24B; opacity: .95; }

/* Nav: voci avorio, attiva/hover oro */
.nav a { color: rgba(243,238,225,.82); }
.nav a:hover { color: #E4CD86; }
.nav a.active { color: #E4CD86; }
.nav a.active::after { background: #C4A24B; }
.nav-sep { background: rgba(196,162,75,.28); }

/* Strumenti (I miei corsi/ordini, Accedi/account, Carrello) */
.header-tools .tool-btn { color: rgba(243,238,225,.82); }
.header-tools .tool-btn:hover { color: #E4CD86; }
.header-tools .tool-btn svg { color: inherit; }
.cart-count { background: #C4A24B; color: #14251C; }
.user-pill { background: rgba(196,162,75,.14); color: rgba(243,238,225,.9); }
.user-pill strong { color: #E4CD86; }
.burger span { background: #E4CD86; }

/* Dropdown account: un filo di calore botanico sul bordo */
.user-dropdown { border-color: rgba(196,162,75,.28); }
.user-dropdown-head .ud-name { color: #14251C; }

/* ===== HOME — LA SEQUENZA DEI VOLTI (Angela, 13/09/2026) =====
   Le fotografie stanno una sopra l'altra e si scambiano con una dissolvenza; quella in vista fa
   un lento avvicinamento, cosi' l'immagine "respira" invece di stare ferma come un manifesto.
   Il movimento e' LENTO di proposito: su un viso, un movimento veloce sembra un errore. */
.botanico .hm-galleria { position: relative; overflow: hidden; background: #0E1B14; }
.botanico .hm-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;   /* si tiene il viso, non il mento */
  opacity: 0; transition: opacity 1.4s ease-in-out;
  /* L'avvicinamento e l'alzata passano da due variabili, non da un transform scritto a mano:
     la lastra ha gia' la sua animazione (il "respiro"), e sovrascriverle il transform la
     spegnerebbe. Cosi' una singola fotografia puo' avere la sua inquadratura senza toccare
     il meccanismo. */
  --zoom: 1; --su: 0%;
  transform: translateY(var(--su)) scale(var(--zoom));
  will-change: opacity, transform;
}
.botanico .hm-slide.on { opacity: 1; animation: hmRespiro 9s ease-out forwards; }
@keyframes hmRespiro {
  from { transform: translateY(var(--su)) scale(var(--zoom)) }
  to   { transform: translateY(var(--su)) scale(calc(var(--zoom) * 1.065)) }
}
/* LA CORNICE DELLA HOME E' 7/10, non 9/16: i ritratti dei marchi vanno da 0,55 a 0,77 e in un
   9/16 quello di Phyris avrebbe perso un quarto della larghezza -- su un viso si nota. */
@media (min-width: 961px) {
  .botanico .hero-cinema-hm .cs-ritratto { aspect-ratio: 7 / 10; }
}
/* SUL TELEFONO il titolo nuovo e' lungo: alla misura di serie (43px) prendeva quattro righe
   alte quasi 200px, e insieme a occhiello, sottotitolo e bottoni riempiva tutto lo schermo
   prima ancora di scorrere. Qui si stringe quel tanto che basta. Vale solo per la home:
   le altre pagine non si toccano. */
@media (max-width: 960px) {
  .botanico .hero-ritratto h1 { font-size: clamp(1.7rem, 7.6vw, 2.3rem); line-height: 1.16; }
  .botanico .hero-ritratto .hero-sub { font-size: 1rem; line-height: 1.58; margin-top: 1rem; }
  /* WONDER, SOLO SUL TELEFONO (Angela, 13/09/2026). Li' la cornice e' tutto lo schermo e ogni
     ritratto ci entra intero in altezza: non c'e' niente da spostare in verticale, c'e' da
     AVVICINARE. Nello scatto di Wonder la modella e' piu' lontana delle altre (mezzo busto, il
     gesto del rossetto) e il viso risulta piu' piccolo. Qui si avvicina e si alza di un filo,
     cosi' il volto sta nella fascia alta, quella libera dal testo. */
  .botanico .hm-slide[src$="viso-wonder.jpg"] { --zoom: 1.18; --su: -5%; }

  /* Il velo di serie e' quasi trasparente proprio a meta' altezza (.24), che sul telefono e' dove
     cade il sottotitolo: bianco sopra una confezione chiara si leggeva a fatica. Qui si scurisce
     quella fascia -- quel tanto che basta a leggere, non tanto da spegnere la fotografia. */
  .botanico .hero-cinema-hm .hero-veil {
    background: linear-gradient(180deg, rgba(14,27,20,.50) 0%, rgba(14,27,20,.46) 38%,
                rgba(14,27,20,.58) 62%, rgba(14,27,20,.88) 100%);
  }
}

/* Chi ha chiesto meno animazioni vede una fotografia ferma, non uno schermo vuoto. */
@media (prefers-reduced-motion: reduce) {
  .botanico .hm-slide.on { animation: none; }
  .botanico .hm-slide { transition: none; }
}