/* =================================================================
   HITO HOMEPAGE
================================================================== */

.hito-home {
  background-color: var(--hito-bg);
  color: var(--hito-text);
  font-family: 'Poppins', sans-serif;
}

/* =================================================================
   HERO
================================================================== */
.hito-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filetti di sezione a tutta schermata (Vector 115/136/137) */
.hito-sep {
  position: relative;
}

.hito-sep::before,
.hito-sep-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 0;
  transform: translateX(-50%);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
}

.hito-sep::before {
  top: 0;
}

.hito-sep-bottom::after {
  bottom: 0;
}

/* Filetti staccati dalla sezione invece che a filo. Le percentuali sono
   calcolate sull'altezza della sezione (~700px a desktop: 7% = ~49px,
   6% = ~42px) e definiscono la distanza dalla foto: per allontanare i
   filetti dai contenuti sopra e sotto si agisce sui padding delle sezioni
   vicine, non su questi valori. Serve sulla fascia "Man, naturally.",
   dove a filo finirebbero dentro la foto scura e sparirebbero. */
.hito-sep-gap::before {
  top: -7%;
}

.hito-sep-gap.hito-sep-bottom::after {
  bottom: -6%;
}

/* Nel Figma la hero e' 510px su frame 1440 (35.4vw): qui e' alzata a 720px
   (48vw). Le manopole della hero sono tutte qui.

   ATTENZIONE: Home-hero.webp e' 1440x510, cioe' larga quanto il frame. Con
   object-fit: cover la foto viene scalata esattamente sull'altezza e NON
   avanza nulla in verticale: object-position lascia l'inquadratura identica.
   Per spostarla davvero bisogna ingrandirla oltre la hero (--hito-hero-zoom)
   e poi farla scorrere (--hito-hero-shift). Regola: lo zoom deve valere
   almeno 100% + |shift|, altrimenti sotto la foto spunta il fondo. */
.hito-hero {
  /* altezza della foto rispetto alla hero: 100% = nessun ingrandimento */
  --hito-hero-zoom: 90%;
  /* scorrimento verticale: negativo alza la foto, positivo la abbassa */
  --hito-hero-shift: 10%;

  position: relative;
  display: flex;
  min-height: clamp(550px, 48vw, 720px);
  overflow: hidden;
  background: var(--hito-bg);
}

.hito-hero-media {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hito-hero-shift);
  height: var(--hito-hero-zoom);
}

.hito-hero-media img,
.hito-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  object-position: center;
}

/* Rectangle 637: gradiente verticale sul 56% basso (287px su 510) */
.hito-hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  z-index: 1;
}

/* Blocco testuale ancorato in basso a destra: nel Figma logo (top 127),
   claim (top 224) e pulsante (top 398) chiudono a 66px dal bordo destro
   e a 56px dal fondo della foto. */
.hito-hero-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  padding: 0 clamp(24px, 4.58vw, 66px) clamp(28px, 3.9vw, 56px);
  text-align: right;
}

/* Logo Hito. 243x71, tutto bianco */
.hito-hero-logo {
  display: block;
  width: clamp(158px, 16.9vw, 243px);
  height: auto;
}

/* Lora 700 48/50, allineato a destra, larghezza massima 762px */
.hito-hero-title {
  max-width: 762px;
  margin: clamp(14px, 1.8vw, 26px) 0 0;
  font-family: 'Lora', serif;
  font-size: clamp(26px, 3.33vw, 48px);
  font-weight: 700;
  line-height: 1.042;
  letter-spacing: normal;
  text-transform: none;
  color: #FFFFFF;
}

/* Button 205x56, pillola crema, Poppins 700 16/24 */
.hito-hero-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(176px, 14.24vw, 205px);
  height: 56px;
  margin-top: clamp(22px, 5vw, 72px);
  padding: 16px 24px;
  border-radius: 100px;
  background: #F0EFEB;
  color: #464646;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.hito-hero-cta:hover,
.hito-hero-cta:focus-visible {
  background: #FFFFFF;
  color: var(--hito-accent);
}

.hito-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  margin-top: 5%;
}

.hito-btn-primary {
  background: var(--hito-accent-dark);
  color: var(--hito-bg);
}

.hito-btn-primary:hover {
  filter: brightness(1.08);
}

.hito-btn-secondary {
  background: transparent;
  color: var(--hito-accent-dark);
  border-color: var(--hito-accent-dark);
}

.hito-btn-secondary:hover {
  background: var(--hito-accent-dark);
  color: var(--hito-bg);
}

/* =================================================================
   BENVENUTO
================================================================== */
.hito-welcome {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 35px;
  justify-content: center;
  padding: 120px 10vw !important;
  background-color: var(--hito-bg);
}

/* Vector 12/16: filetti verticali da 111px, spessi 3px */
.hito-welcome-line {
  width: 3px;
  height: 111px;
  background: #4A494A;
  justify-self: center;
}

.hito-welcome-text {
  text-align: center;
}

/* Raleway 700 36/42 */
.hito-welcome-text h2 {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 42px;
  letter-spacing: normal;
  color: #010101;
}

/* PingFang MO 400 24/28 */
.hito-welcome-text p {
  font-family: "PingFang MO", "PingFang HK", 'Roboto', Helvetica, sans-serif;
  margin: 12px 0 0;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 28px;
  color: #4A494A;
}

/* =================================================================
   LA LINEA COMPLETA + CLAIM
   Figma: foto 1046x530 centrata, claim PingFang MO 24/28 a 1563.
================================================================== */
.hito-family {
  padding: 0 7vw 64px;
  background: var(--hito-bg);
  text-align: center;
}

.hito-family img {
  display: block;
  width: min(1046px, 100%);
  height: auto;
  margin: 0 auto;
}

.hito-family-claim {
  max-width: 900px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  font-family: "PingFang MO", "PingFang HK", 'Roboto', Helvetica, sans-serif;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 28px;
  color: #4A494A;
}

/* =================================================================
   PRODOTTI
   Figma 1440: colonna di contenuto da 88px a 1352px (1264px utili),
   griglia di 5 schede da 226px con passo 260 (gap 34). La sezione e'
   anche l'ancora #prodotti della navbar, da cui lo scroll-margin.
================================================================== */
/* Il padding in fondo e' anche l'aria fra l'ultimo elemento e il filetto
   divisorio, che sta 34px sopra la foto di "Man, naturally.": lo stacco
   percepito e' questo valore meno quei 34px. */
.hito-products {
  padding: 90px clamp(24px, 6.1vw, 88px) 160px;
  background: var(--hito-bg);
  scroll-margin-top: 96px;
}

.hito-products-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Raleway 20/23, letter-spacing 0.05em; la voce attiva e' in 600.
   Allineate a sinistra con la prima scheda, passo 30px. */
.hito-products-tabs {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 30px);
  flex-wrap: wrap;
  width: min(1264px, 100%);
  margin: 0 auto 56px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hito-accent);
}

.hito-products-tabs button {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0 0 10px;
  cursor: pointer;
  position: relative;
  font: inherit;
}

.hito-products-tabs button.is-active {
  font-weight: 600;
}

/* Vector 59: sottolineatura da 96px, spessa 2px */
.hito-products-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96px;
  max-width: 100%;
  height: 2px;
  background: var(--hito-accent);
  transform: translateX(-50%);
}

/* Figma: cinque prodotti affiancati (226px ciascuno, passo 260).
   Le tracce restano cinque anche con meno schede, cosi' BARBA e FULL BODY
   si allineano a sinistra mantenendo la stessa larghezza di scheda. */
.hito-products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 56px 34px;
  width: min(1264px, 100%);
  margin: 0 auto;
}

.hito-product-card {
  display: flex;
  flex-direction: column;
}

/* Le PNG dei prodotti hanno gia' il loro fondo chiaro: niente sfondo qui */
.hito-product-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 226 / 292;
}

.hito-product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Etichetta sovrapposta in alto a sinistra (es. "SENZA RISCIACQUO") */
.hito-product-badge {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 7px 12px;
  background: #4A494A;
  color: var(--hito-bg);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Raleway 700 14/16, letter-spacing 0.05em */
.hito-product-card h3 {
  margin: 13px 0 0;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--hito-accent);
}

/* PingFang HK 600 14/120%, tre righe: denominazione, descrizione, formato */
.hito-product-card p {
  display: flex;
  flex-direction: column;
  margin: 3px 0 0;
  color: #4A494A;
  font-family: "PingFang HK", "PingFang MO", 'Roboto', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.hito-product-card p strong {
  font-weight: 600;
  text-transform: uppercase;
}

/* Descrizione e formato in Light: solo la denominazione resta in 600 */
.hito-product-desc,
.hito-product-size {
  font-weight: 300;
}

/* Rectangle 640 + Vector 24: riquadro 226x39 con freccia da 33px */
.hito-product-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 226px;
  max-width: 100%;
  height: 39px;
  margin-top: auto;
  padding: 0 10px;
  border: 1px solid #4A494A;
  color: #4A494A;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Da JS il link e' un <button>: azzero gli stili nativi */
button.hito-product-link {
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.hito-product-visual[data-open-view] {
  cursor: pointer;
}

/* Freccia: asta da 33px piu' punta a chevron, disegnata in CSS */
.hito-product-link span {
  position: relative;
  flex-shrink: 0;
  width: 33px;
  height: 1px;
  background: currentColor;
}

.hito-product-link span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.hito-product-link:hover,
.hito-product-link:focus-visible {
  background: #4A494A;
  color: var(--hito-bg);
}

/* Il pulsante resta allineato in basso anche con descrizioni di lunghezza diversa */
.hito-product-card {
  height: 100%;
}

.hito-product-card p {
  margin-bottom: 30px;
}

/* ---- Scheda depliant della tab MERCH ---- */
.hito-catalog-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.hito-catalog-download {
  width: auto;
  margin-top: 0;
  padding: 0 14px;
  gap: 14px;
}

.hito-catalog-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.hito-catalog-download:hover .hito-catalog-icon,
.hito-catalog-download:focus-visible .hito-catalog-icon {
  filter: invert(1);
}

.hito-catalog-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #4A494A;
  font-size: 17px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hito-catalog-preview:hover,
.hito-catalog-preview:focus-visible {
  color: var(--hito-accent);
}

/* Button 224x56: pillola bordeaux sotto la griglia, incolonnata a sinistra
   con la prima scheda (da cui il margine che replica il centraggio griglia) */
.hito-products-catalog {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  max-width: 100%;
  height: 56px;
  margin: 71px auto 0 max(0px, calc((100% - 1264px) / 2));
  padding: 16px 24px;
  border-radius: 100px;
  background: var(--hito-accent-dark);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.hito-products-catalog:hover,
.hito-products-catalog:focus-visible {
  background: #3E121D;
}

/* =================================================================
   QUICK VIEW
   Figma: velo grigio al 10% con blur 2px, scheda bianca 1021x660,
   colonna foto 512px a sinistra e testo a destra. La colonna testo
   scorre da sola, cosi' la scheda non cresce mai oltre i 660px.
================================================================== */
body.hito-view-open {
  overflow: hidden;
}

.hito-view[hidden] {
  display: none;
}

.hito-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hito-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(70, 70, 70, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hito-view-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 512px minmax(0, 1fr);
  width: min(1021px, 100%);
  height: min(660px, 100%);
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

/* close: 24x24 nell'angolo in alto a destra */
.hito-view-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: #1D1B20;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hito-view-close:hover,
.hito-view-close:focus-visible {
  color: var(--hito-accent);
}

/* Rectangle 271: fondo #F4F4F2 sotto lo scatto 522x660 */
.hito-view-media {
  background: #F4F4F2;
  overflow: hidden;
}

.hito-view-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hito-view-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 55px 25px 31px 55px;
}

/* Frame 245: l'area di testo scorre, la riga download resta ancorata */
.hito-view-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 13px;
}

/* Raleway 700 24/28 su due righe: nome e denominazione */
.hito-view-dialog h2 {
  margin: 10px 0 0;
  font-family: 'Raleway', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: normal;
  color: #010101;
}

/* Sottotitolo (denominazione inglese) in Light: il nome resta in 700 */
.hito-view-title-type {
  display: block;
  font-weight: 300;
  text-transform: uppercase;
}

/* Roboto 400 14/16 */
.hito-view-text {
  margin-top: 39px;
  color: #58585A;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.hito-view-text p {
  margin: 0 0 16px;
}

.hito-view-text p:last-child {
  margin-bottom: 0;
}

.hito-view-text em {
  font-style: italic;
  font-weight: 700;
}

/* Vector 41 + "Formato:" in Roboto 700 20/23 */
.hito-view-format {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid #58585A;
  color: #58585A;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
}

.hito-view-text + .hito-view-format {
  margin-top: 34px;
}

/* Riga download in basso a destra, Roboto 400 14/16 */
.hito-view-download {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 17px;
  margin-top: 20px;
  color: #58585A;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hito-view-download svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.hito-view-download:hover,
.hito-view-download:focus-visible {
  color: var(--hito-accent);
}

.hito-products-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid rgba(87, 26, 41, 0.12);
  background: rgba(225, 219, 208, 0.22);
}

.hito-products-empty p {
  margin: 0;
  color: var(--hito-accent-dark);
  font-family: 'Noto Sans HK', 'PingFang HK', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =================================================================
   MAN, NATURALLY.
   Figma: fascia alta 702px con foto e velo nero al 50%, testo in basso
   a sinistra. Contenuto spostato qui dalla hero, come da frame.
================================================================== */
/* Niente overflow: hidden, altrimenti taglierebbe i due filetti staccati.
   La foto non deborda comunque: e' in absolute inset:0 con object-fit. */
.hito-concept {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 48.7vw, 702px);
  padding: clamp(40px, 6vw, 88px) 0;
}

.hito-concept-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hito-concept-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rectangle 335: velo nero al 50% */
.hito-concept-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hito-concept-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

/* Raleway 700 36/42, letter-spacing 0.05em */
.hito-concept-content h2 {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #F5F0E7;
}

/* PingFang HK 400 24/34 */
.hito-concept-content p {
  max-width: 520px;
  margin: 23px 0 0;
  font-family: "PingFang HK", "PingFang MO", 'Roboto', Helvetica, sans-serif;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #F5F0E7;
}

/* Button 138x56, pillola blu, Poppins 400 16/24 */
.hito-concept-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  height: 56px;
  margin-top: 34px;
  padding: 0 24px;
  border-radius: 100px;
  background: #003B71;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.hito-concept-btn:hover,
.hito-concept-btn:focus-visible {
  background: #00284D;
}

/* =================================================================
   ACADEMY
================================================================== */
.hito-academy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 72px 7vw 96px;
  background: var(--hito-bg);
}

.hito-academy-content {
  max-width: 600px;
}

.hito-academy-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 40px;
  margin-left: -7%;
}

/* Vector 17: filetto verticale da 278px, spesso 3px, blu */
.hito-academy-line {
  width: 3px;
  height: clamp(180px, 20vw, 278px);
  margin-top: 120px;
  background: #003B71;
}

.hito-academy-heading-text {
  display: grid;
  gap: 18px;
}

/* "ACADEMY HITO.": Big Shoulders Display 400 48/57, blu */
.hito-academy-kicker {
  display: block;
  margin: 0;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(34px, 3.3vw, 48px);
  font-weight: 400;
  line-height: 57px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #003B71;
  margin-top: 20%;
}

/* Lora 700 20/45 */
.hito-academy-content h2 {
  margin: 0;
  font-family: 'Lora', serif;
  font-size: clamp(17px, 1.4vw, 20px) !important;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: normal;
  text-transform: none;
  color: #4A494A;
}

/* PingFang MO 400 17.25/25, larghezza 531 */
.hito-academy-content p {
  max-width: 531px;
  margin: 28px 3px 0;
  font-family: "PingFang MO", "PingFang HK", 'Roboto', Helvetica, sans-serif;
  font-size: clamp(14px, 1.2vw, 17.25px);
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  margin-top: -25%;
  color: #4A494A;
}

/* Button 166x56, pillola bordeaux, Poppins 400 16/24 */
.hito-academy .hito-btn-secondary {
  box-sizing: border-box;
  min-width: 166px;
  height: 56px;
  margin-top: 60px;
  padding: 0 24px;
  background: var(--hito-accent-dark);
  color: #FFFFFF;
  border-color: var(--hito-accent-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
}

.hito-academy .hito-btn-secondary:hover {
  background: transparent;
  color: var(--hito-accent-dark);
}

.hito-academy-media {
  position: relative;
  min-height: 640px;
}

/* Nel Figma la dicitura verticale e' visibile, accanto alla foto in alto */
/* Incolonnata a filo a sinistra della foto grande */
.hito-academy-vertical-wrap {
  position: absolute;
  top: 14px;
  right: calc(min(64vw, 338px) + 40px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Vector 18: filetto da 33px, spesso 3px, con estremi arrotondati */
.hito-academy-vertical-line {
  width: 2.5px;
  height: 33px;
  border-radius: 999px;
  background: #4A494A;
}

/* "THE BARBER ALLIES" ruotata di -90deg, a corpo triplo rispetto al Figma.
   NB: l'interlinea e' in rapporto, non in px: in writing-mode verticale
   definisce la larghezza della riga, quindi un valore fisso taglierebbe
   le lettere al crescere del corpo. */
.hito-academy-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "PingFang HK", "PingFang MO", 'Roboto', Helvetica, sans-serif;
  font-size: clamp(15px, 3.2vw, 22px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: #4A494A;
}

.hito-academy-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.12);
  background: var(--hito-neutral);
}

.hito-academy-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hito-academy-image-primary {
  top: 0;
  right: 0;
  width: min(64vw, 338px);
  aspect-ratio: 337 / 380;
}

.hito-academy-image-secondary {
  left: 5%;
  bottom: 12%;
  width: min(56vw, 300px);
  aspect-ratio: 337 / 380;
}

/* =================================================================
   RESPONSIVE
   Tutte le media query del file, raggruppate per soglia e in ordine
   decrescente. Dentro ogni blocco le regole sono nell'ordine in cui
   comparivano prima, cosi' la cascata resta identica.
================================================================== */

@media (min-width: 768px) {
  /* =================================================================
  RESPONSIVE
  ================================================================== */
  .hito-welcome {
    padding: 24px 10vw;
  }

  .hito-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hito-academy {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    align-items: center;
    gap: 42px;
    padding: 88px 10vw 104px;
  }

  .hito-academy-media {
    min-height: 700px;
    padding-left: 92px;
  }

  /* A corpo triplo la scritta e' alta ~450px e incrocerebbe la foto in
     basso a sinistra: la porto nella corsia libera tra le due colonne.
     Niente bottom, cosi' l'altezza la detta il testo (che non va a capo). */
  /* left: auto obbligatorio, altrimenti con right impostato piu' sotto
     il blocco si stira invece di dimensionarsi sul testo */
  .hito-academy-vertical-wrap {
    position: absolute;
    top: 12px;
    left: auto;
    right: calc(min(32vw, 338px) + 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .hito-academy-image-primary {
    width: min(32vw, 338px);
  }

  .hito-academy-image-secondary {
    left: 0;
    width: min(28vw, 337px);
  }
}

@media (min-width: 1200px) {
  .hito-products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hito-academy {
    padding: 104px 10vw 118px;
    gap: 56px;
  }

  .hito-academy-content {
    max-width: 590px;
  }

  .hito-academy-content h2 {
    font-size: clamp(34px, 2.85vw, 44px);
  }

  .hito-academy-content p {
    font-size: 19px;
  }

  .hito-academy-media {
    min-height: 760px;
    padding-left: 118px;
  }
}

@media (max-width: 1199px) {
  /* =================================================================
  EXTRA RESPONSIVE OVERRIDES
  ================================================================== */
  .hito-welcome {
    gap: 22px;
    padding: 88px 7vw !important;
  }

  .hito-welcome-line {
    height: 62px;
  }

  .hito-products {
    padding: 72px 7vw 132px;
  }

  .hito-products-tabs {
    margin: 0 auto 40px;
    gap: 18px;
    font-size: 17px;
  }

  .hito-products-grid {
    gap: 44px 20px;
  }

  .hito-academy {
    gap: 40px;
    padding: 88px 7vw 96px;
  }

  .hito-academy-heading {
    gap: 28px;
  }

  /* Fino a 768px la colonna del testo si stringe parecchio: il corpo scende
     con essa invece di restare inchiodato a 18px. */
  .hito-academy-content p {
    max-width: 520px;
    font-size: clamp(15px, 1.9vw, 18px);
  }

  .hito-academy-media {
    min-height: 680px;
    padding-left: 84px;
  }

  .hito-academy-vertical-wrap {
    left: auto;
    right: calc(min(30vw, 320px) + 36px);
  }

  .hito-academy-image-primary {
    width: min(30vw, 320px);
  }

  .hito-academy-image-secondary {
    width: min(28vw, 300px);
  }
}

@media (max-width: 991px) {
  .hito-btn {
    margin-top: 32px;
  }

  .hito-welcome {
    gap: 16px;
    padding: 72px 6vw !important;
  }

  .hito-products {
    padding: 64px 6vw 116px;
  }

  .hito-products-tabs {
    gap: 14px;
    font-size: 16px;
  }

  .hito-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* L'Academy resta a due colonne fino a 768px: le regole che la mandano
     in colonna unica stanno nel blocco 767px. */
}

@media (max-width: 900px) {
  /* Sotto i 900px la scheda diventa una colonna sola e scorre tutta */
  .hito-view {
    padding: 16px;
  }

  .hito-view-dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: min(90vh, 100%);
  }

  .hito-view-media {
    height: 38vh;
  }

  .hito-view-body {
    padding: 28px 20px 24px;
  }

  .hito-view-text {
    margin-top: 24px;
  }

  .hito-view-text + .hito-view-format {
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  /* Sotto i 768px la foto non regge piu' il rapporto del frame: alzo la
     hero per far respirare logo, claim e pulsante. */
  .hito-hero {
    min-height: 500px;
  }

  .hito-hero-content {
    padding: 0 24px 32px;
  }

  /* Il ritorno a capo del Figma qui spezzerebbe male il claim */
  .hito-hero-title br {
    display: none;
  }

  .hito-hero-title {
    max-width: 100%;
    font-size: clamp(24px, 5.6vw, 30px);
  }

  .hito-btn {
    margin-top: 24px;
  }

  .hito-welcome {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 56px 24px !important;
  }

  .hito-welcome-line {
    display: none;
  }

  .hito-welcome-text h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .hito-products {
    padding: 56px 24px 104px;
  }

  .hito-products-tabs {
    margin: 0 auto 28px;
    gap: 12px 14px;
    font-size: 14px;
  }

  .hito-products-tabs button {
    padding-bottom: 8px;
  }

  /* Le card non si allargano a tutta pagina: la griglia si stringe e resta
     centrata, cosi' la foto prodotto non diventa sproporzionata. */
  .hito-products-grid {
    gap: 36px 16px;
    max-width: 560px;
    margin-inline: auto;
  }

  .hito-product-card p {
    font-size: 13px;
  }

  .hito-products-catalog {
    margin-top: 48px;
  }

  /* ---- Quickview: corpi ridotti per la scheda a colonna unica ---- */
  .hito-view-dialog h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .hito-view-text {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.45;
  }

  .hito-view-format {
    font-size: 16px;
    line-height: 19px;
  }

  .hito-view-text + .hito-view-format {
    margin-top: 24px;
  }

  .hito-view-download {
    gap: 12px;
    font-size: 13px;
  }

  /* Da qui l'Academy passa a colonna unica: sopra i 768px resta affiancata
     come sul desktop. */
  .hito-academy {
    grid-template-columns: 1fr;
    padding: 72px 24px 80px;
    gap: 28px;
  }

  .hito-academy-heading {
    gap: 16px;
    margin-left: 0;
  }

  .hito-academy-line {
    height: 96px;
    margin-top: 6px;
    margin-left: 0;
  }

  /* Il 20% del desktop e' calcolato sulla LARGHEZZA del contenitore: in
     colonna unica diventa un distacco enorme e "ACADEMY HITO." finisce molto
     sotto al filetto e al resto del testo. */
  .hito-academy-kicker {
    margin-top: 0;
    line-height: 1.15;
    font-size: clamp(34px, 12vw, 48px);
  }

  .hito-academy-content,
  .hito-academy-content p {
    max-width: 100%;
  }

  .hito-academy-vertical-wrap {
    display: none !important;
  }

  .hito-academy-content h2 {
    font-size: clamp(24px, 7.4vw, 32px) !important;
  }

  /* Il -25% del desktop serviva solo a risalire sotto al kicker spinto giu'
     dal suo 20%: tolto quello, il paragrafo finirebbe sopra al titolo. */
  .hito-academy-content p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.25;
  }

  .hito-academy .hito-btn-secondary {
    margin-top: 28px;
  }

  .hito-academy-media {
    min-height: 560px;
    padding-left: 0;
  }

  .hito-academy-image-primary {
    width: min(62vw, 260px);
  }

  .hito-academy-image-secondary {
    width: min(58vw, 250px);
  }
}

@media (max-width: 575px) {
  .hito-hero-content {
    padding: 0 18px 28px;
  }

  .hito-hero-title {
    font-size: 24px;
  }

  .hito-welcome {
    padding: 48px 18px !important;
  }

  .hito-products {
    padding: 48px 18px 92px;
  }

  .hito-products-tabs {
    font-size: 13px;
    gap: 10px 12px;
  }

  .hito-products-grid {
    gap: 32px 14px;
    max-width: 440px;
  }

  .hito-view-dialog h2 {
    font-size: 18px;
    line-height: 22px;
  }

  /* Il riquadro prende la forma dello scatto (522x660), cosi' la foto si
     vede intera; la scheda non ha piu' altezza fissa e scorre tutta. */
  .hito-view-dialog {
    grid-template-rows: auto auto;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
  }

  .hito-view-media {
    grid-row: 1;
    grid-column: 1;
    height: auto;
    aspect-ratio: 522 / 660;
  }

  .hito-view-body {
    grid-row: 2;
    grid-column: 1;
  }

  /* La croce occupa entrambe le righe ed e' sticky: scende con lo scroll
     e resta sempre a portata di pollice. */
  .hito-view-close {
    position: sticky;
    top: 8px;
    right: auto;
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: start;
    justify-self: end;
    width: 40px;
    height: 40px;
    margin: 8px 8px 0 0;
  }

  .hito-view-format {
    font-size: 15px;
    line-height: 18px;
  }

  .hito-academy {
    padding: 64px 18px 72px;
  }

  .hito-academy-heading {
    grid-template-columns: 12px 1fr;
    gap: 12px;
  }

  .hito-academy-line {
    height: 84px;
  }

  .hito-academy-content p {
    font-size: 15px;
  }

  .hito-academy-media {
    min-height: 500px;
  }

  .hito-academy-image-primary {
    width: min(78vw, 290px);
  }

  .hito-academy-image-secondary {
    width: min(62vw, 220px);
  }
}

@media (max-width: 419px) {
  .hito-hero-media img {
    object-position: 35% center;
  }

  /* A una colonna sola la card prenderebbe tutta la larghezza: la tengo a
     280px e centrata. */
  .hito-products-grid {
    grid-template-columns: minmax(0, 280px);
    justify-content: center;
    max-width: 280px;
  }

  .hito-academy-media {
    min-height: 460px;
  }

  .hito-academy-image-primary {
    width: 190px;
  }

  .hito-academy-image-secondary {
    width: 190px;
  }
}