/* ============================================================
   assets/css/style.css - Componenti custom GetinArt
   ============================================================ */

/* ── TOKEN DI DESIGN ── */
:root {
  --gia-bg:        #FFFFFF;
  --gia-bg-alt:    #FDFAF6; /* ex #F6F5F2 - grigi di sfondo unificati sul crema */
  --gia-bg-deep:   #FDFAF6; /* ex #EDECEA */
  --gia-ink:       #1A1816;
  --gia-ink-2:     #4A4744;
  --gia-ink-3:     #8C8884;
  --gia-terra:     #BC0100;
  --gia-terra-lt:  #F7E0E0;
  --gia-border:    #E4E1DC;
  --gia-success:   #2D7A3D;
  --gia-warning:   #C8842B;
  --gia-error:     #BC0100;
  --gia-rating:    #00B67A; /* verde Trustpilot: firma Feedaty (scritta + stelle) */
  --gia-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --gia-dur-fast:  0.2s;
  --gia-dur-mid:   0.35s;
}

/* ── BLOCCA OVERFLOW ORIZZONTALE - swiper overflow:visible non sfora il viewport ── */
main { overflow-x: clip; }

/* ── VIEWPORT MOBILE BLOCCATO - larghezza dispositivo, niente scroll/spostamento laterale ── */
html, body {
  max-width: 100%;
  overflow-x: clip;         /* clip (non hidden) per non rompere position: sticky */
  touch-action: manipulation; /* niente doppio-tap-to-zoom, tap normali ok */
}
/* Rete di sicurezza: nessun media/tabella più largo del contenitore (causa tipica di sforamento su mobile) */
img, svg, video, iframe, table { max-width: 100%; }

/* ── SEZIONE INNER ── */
.gia-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (max-width: 768px) {
  .gia-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── SECTION HEADER ── */
.gia-section-header { margin-bottom: 2.5rem; }
.gia-section-header h2 {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--gia-ink);
  margin-bottom: 0;
  line-height: 1.1;
}
.gia-section-header p { color: var(--gia-ink-3); font-size: 14px; margin-top: 6px; margin-bottom: 0; }
.gia-section-header .gia-see-all {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gia-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--gia-dur-fast) var(--gia-ease);
}
.gia-section-header .gia-see-all:hover { color: var(--gia-terra); }

/* ── SCROLL REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--gia-ease), transform .7s var(--gia-ease);
}
.rv.on { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; }
.rv.d4 { transition-delay: .32s; }
.rv.d5 { transition-delay: .40s; }

/* ═══════════════════════════════════
   PROMO BAR
════════════════════════════════════ */
#promo-bar {
  background: var(--gia-ink);
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  padding: 10px 52px;
  text-align: center;
  position: relative;
  line-height: 1.4;
}
#promo-bar strong { color: #fff; }
.gia-code {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--gia-radius-sm);
  padding: 0 8px;
  font-family: var(--gia-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: #fff;
  cursor: pointer;
  transition: background var(--gia-dur-fast);
  margin: 0 4px;
}
.gia-code:hover { background: rgba(255,255,255,.1); }
.gia-code.copied::after { content: attr(data-copied); }
#promo-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  transition: color var(--gia-dur-fast);
}
#promo-close:hover { color: #fff; }

/* ═══════════════════════════════════
   HEADER + NAV
════════════════════════════════════ */
#gia-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f7eddd; /* top bar (riga logo) a tutta larghezza */
  border-bottom: 1px solid var(--gia-border);
}
.gia-navbar-row {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
/* Mobile: flexbox logo | icone a destra, nessuno spazio perso dalla search hidden */
@media (max-width: 767.98px) {
  .gia-navbar-row {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }
  .gia-actions { gap: 2px; margin-left: auto; }
}
.gia-logo { display: inline-flex; align-items: flex-start; }
.gia-logo img { height: 39px; width: auto; display: block; }
.gia-logo-copy {
  font-size: 9px;
  font-weight: 500;
  color: var(--gia-ink-3);
  line-height: 1;
  margin-top: 3px;
  margin-left: -2px;
  user-select: none;
}
/* Footer: stesso stile ma su sfondo scuro */
.gia-footer-logo {
  display: inline-flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.gia-footer-logo .gia-logo-copy { color: rgba(255,255,255,.3); }
.gia-search {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}
.gia-search-wrap {
  position: relative;
  width: 100%;
}
/* Lucide sostituisce <i> con <svg> - target entrambi */
.gia-search-wrap i,
.gia-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gia-ink-3);
  pointer-events: none;
  display: block;
  flex-shrink: 0;
}
.gia-search-wrap input {
  width: 100%;
  background: rgba(255, 255, 255, 0.5); /* bianco 50%: campo più chiaro sul top bar crema */
  border: 1px solid var(--gia-border);
  border-radius: 24px;
  padding: 10px 16px 10px 42px;
  font-size: 13.5px;
  color: var(--gia-ink);
  outline: none;
  transition: border-color var(--gia-dur-fast), background var(--gia-dur-fast);
  font-family: var(--gia-font-body);
}
.gia-search-wrap input::placeholder { color: var(--gia-ink-3); }
.gia-search-wrap input:focus { border-color: var(--gia-ink); background: var(--gia-bg); }
.gia-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gia-tp-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gia-ink-2);
  padding-right: 12px;
  border-right: 1px solid var(--gia-border);
  margin-right: 4px;
}
.gia-tp-badge .stars { color: var(--gia-rating); font-size: 13px; letter-spacing: 1px; }
.gia-tp-badge .score { font-weight: 700; font-size: 12.5px; color: var(--gia-ink); }
.gia-tp-badge .label { color: var(--gia-ink-3); font-size: 11.5px; }
.gia-lang-wrap {
  position: relative;
}
.gia-lang-btn {
  display: flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--gia-ink-2);
  background: none; border: none;
  padding: 8px;
  border-radius: var(--gia-radius-sm);
  cursor: pointer;
  transition: background var(--gia-dur-fast), color var(--gia-dur-fast);
}
.gia-lang-btn:hover { background: var(--gia-bg-alt); color: var(--gia-ink); }
.gia-lang-btn[aria-expanded="true"] { background: var(--gia-bg-alt); color: var(--gia-ink); }
.gia-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gia-lang-btn svg { transition: transform var(--gia-dur-fast); }

.gia-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gia-bg);
  border: 1px solid var(--gia-border);
  border-radius: var(--gia-radius-md);
  box-shadow: var(--gia-shadow-warm-md);
  min-width: 130px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--gia-dur-fast) var(--gia-ease), transform var(--gia-dur-fast) var(--gia-ease);
  z-index: 200;
}
.gia-lang-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.gia-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--gia-ink-2);
  font-size: 13px;
  transition: background var(--gia-dur-fast), color var(--gia-dur-fast);
}
.gia-lang-option:hover { background: var(--gia-bg-alt); color: var(--gia-ink); }
.gia-lang-code { font-weight: 700; font-size: 12px; color: var(--gia-ink); min-width: 22px; }
.gia-lang-name { color: var(--gia-ink-2); font-size: 12.5px; }
.gia-flag {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  vertical-align: middle;
}
.gia-flag svg { display: block; width: 100%; height: 100%; }
.gia-lang-btn .gia-flag { margin-right: 5px; }
.gia-icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gia-ink-2);
  border: none; background: none;
  border-radius: var(--gia-radius-md);
  cursor: pointer; position: relative;
  text-decoration: none;
  transition: background var(--gia-dur-fast), color var(--gia-dur-fast);
}
.gia-icon-btn:hover { background: var(--gia-bg-alt); color: var(--gia-ink); }
.gia-cart-badge {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: var(--gia-terra);
  color: #fff;
  font-size: 9px;
  font-family: var(--gia-font-mono);
  font-weight: 500;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Category nav - scroll-collapse */
#gia-cat-nav {
  background: var(--gia-bg); /* la barra categorie resta bianca, solo il top bar è crema */
  border-top: 1px solid var(--gia-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}
#gia-cat-nav::-webkit-scrollbar { display: none; }
.gia-cat-nav-inner { display: flex; align-items: stretch; }
/* Primo item allineato al margine sinistro del logo */
.gia-cat-nav-inner > :first-child .gia-cat-link { padding-left: 0; }
.gia-cat-link {
  display: inline-flex; align-items: center;
  padding: 12px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--gia-ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--gia-dur-fast), border-color var(--gia-dur-fast);
  flex-shrink: 0;
}
.gia-cat-link:hover { color: var(--gia-terra); }
.gia-cat-link.active { color: var(--gia-ink); border-bottom-color: var(--gia-terra); }
.gia-cat-link.pro { color: var(--gia-terra); }
.gia-cat-link.pro:hover { color: var(--gia-terra); }

/* ═══════════════════════════════════
   HERO SLIDER
════════════════════════════════════ */
#hero-slider { position: relative; overflow: hidden; line-height: 0; }

.gia-hero-swiper {
  height: 75vh;
  min-height: 420px;
  max-height: 720px;
}

.gia-hs-slide {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.gia-hs-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay: gradiente chiaro a sinistra → testo leggibile con stesso stile hero */
.gia-hs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(245,240,229,.96) 0%,
    rgba(245,240,229,.82) 38%,
    rgba(245,240,229,.3)  62%,
    transparent           100%
  );
  display: flex;
  align-items: center;
}

.gia-hs-content {
  max-width: 520px;
  padding: 2rem 0;
}

/* Riutilizza le classi hero esistenti; aggiunge solo il titolo slide */
.gia-hs-title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--gia-ink);
  margin: 0 0 1.25rem;
}

.gia-hs-desc {
  font-size: 16px;
  color: var(--gia-ink-2);
  line-height: 1.65;
  margin-bottom: 2.25rem;
  max-width: 44ch;
}

/* Mobile: overlay quasi pieno, testo centrato in basso */
@media (max-width: 767.98px) {
  .gia-hs-overlay {
    background: linear-gradient(
      to top,
      rgba(245,240,229,.98) 0%,
      rgba(245,240,229,.85) 45%,
      rgba(245,240,229,.2)  75%,
      transparent           100%
    );
    align-items: flex-end;
    padding-bottom: 2rem;
  }
  .gia-hs-content { max-width: 100%; padding: 0; }
  .gia-hs-desc    { display: none; }
  .gia-hs-content .gia-hero-link { display: none; }
  .gia-hs-content .gia-pills     { display: none; }
}

/* ── Frecce ── */
.gia-hs-arrow {
  width: 46px !important; height: 46px !important;
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  color: #fff !important;
  transition: background .2s, transform .2s;
  margin-top: -23px !important;
}
.gia-hs-arrow:hover { background: rgba(255,255,255,.28) !important; transform: scale(1.08); }
.gia-hs-arrow::after { font-size: 13px !important; font-weight: 800 !important; }
.swiper-button-prev.gia-hs-arrow { left: 20px; }
.swiper-button-next.gia-hs-arrow { right: 20px; }

/* ── Pagination ── */
.gia-hs-pagination { bottom: 1.5rem !important; }
.gia-hs-pagination .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.45);
  opacity: 1;
  transition: width .3s, background .3s;
}
.gia-hs-pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 4px;
  background: #fff;
}

/* Mobile */
@media (max-width: 767.98px) {
  .gia-hero-swiper { height: 58vh; min-height: 300px; }
  .gia-hs-arrow { display: none !important; }
  .gia-hs-overlay { padding-bottom: 2.5rem; }
}

/* ═══════════════════════════════════
   HERO - slider full-bleed
════════════════════════════════════ */
#hero {
  background: var(--gia-bg);
  padding: 1.5rem 0 0.75rem; /* spazio ridotto tra hero e sezione successiva */
}

/* Wrapper esterno */
.gia-hero-outer {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 768px) { .gia-hero-outer { padding: 0 1.25rem; } }

/* Swiper hero: bordi arrotondati + dimensioni */
#hero-swiper {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 480px;
  background: var(--gia-bg-deep);
}

/* Ogni slide occupa tutto il frame */
.gia-hero-slide {
  position: relative;
  height: 100%;
}

/* Immagine di sfondo */
.gia-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradiente desktop: opaco a sinistra, trasparente a destra */
.gia-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(18,12,8,.60) 0%,
    rgba(18,12,8,.34) 45%,
    transparent 72%
  );
}

/* Contenuto testo sovrapposto - desktop */
.gia-hero-body {
  position: relative;
  z-index: 2;
  padding: 3.5rem 3rem 6rem;
  max-width: 500px;
}

.gia-hero-eyebrow {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

#hero h1, #hero h2 {
  font-size: clamp(36px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1.1rem;
}

#hero .hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.65;
  max-width: 38ch;
  margin-bottom: 2rem;
}

/* ── MOBILE HERO ─────────────────────────────
   Testo ancorato in basso, veil dal basso verso
   l'alto, dimensioni ottimizzate per smartphone
──────────────────────────────────────────── */
@media (max-width: 767.98px) {

  #hero { padding: 1rem 0 2rem; }

  #hero-swiper {
    aspect-ratio: unset;
    height: 58dvh;        /* occupa ~60% viewport - si vede bene in portrait */
    min-height: 340px;
    max-height: 520px;
    border-radius: 8px;
  }

  /* Veil: dark in basso dove starà il testo */
  .gia-hero-veil {
    background: linear-gradient(
      to top,
      rgba(10,6,4,.90) 0%,
      rgba(10,6,4,.58) 40%,
      rgba(10,6,4,.18) 72%,
      transparent 100%
    );
  }

  /* Testo in basso, staccato dal bordo inferiore */
  .gia-hero-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.25rem 3.75rem;
    max-width: 100%;
  }

  #hero h1, #hero h2 {
    font-size: clamp(26px, 7.2vw, 38px);
    margin-bottom: .75rem;
  }

  .gia-hero-eyebrow { margin-bottom: .5rem; font-size: 11.5px; }

  #hero .hero-desc {
    font-size: 13.5px;
    margin-bottom: 1.25rem;
    max-width: 38ch;
  }

  /* Link Pro nascosto su mobile - troppo affollato */
  #hero .gia-hero-link { display: none; }

  /* CTA più compatta */
  .gia-hero-cta { font-size: 13px; padding: 9px 14px; margin-bottom: 0; }
  .gia-hero-cta-icon { width: 24px; height: 24px; }
}

/* CTA button - vetro caldo stile screenshot */
.gia-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245,240,229,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background var(--gia-dur-fast), border-color var(--gia-dur-fast);
  margin-bottom: 1.25rem;
}
.gia-hero-cta:hover { background: rgba(255,255,255,.28); color: #fff; }
.gia-hero-cta-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.22);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Link "Sono un Professionista" sopra l'immagine */
.gia-hero-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.6);
  transition: color var(--gia-dur-fast);
  text-decoration: none;
}
.gia-hero-link:hover { color: #fff; }

/* Wrapper frecce - FUORI dal #hero-swiper, sovrapposto via position:absolute.
   Essendo fuori dall'overflow:hidden del swiper, le slide fade non li coprono mai. */
.gia-hero-nav-btns {
  position: absolute;
  bottom: 1.75rem;
  left: 5rem; /* 2rem (outer padding) + 3rem (hero-body padding-left) */
  display: flex;
  gap: 8px;
  z-index: 20; /* abbondante sopra il swiper */
}

/* Singolo bottone prev/next */
.gia-hero-nav {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--gia-dur-fast), transform var(--gia-dur-fast);
}
.gia-hero-nav:hover  { background: rgba(255,255,255,.28); transform: scale(1.06); }
.gia-hero-nav:active { transform: scale(.96); }

@media (max-width: 767.98px) {
  .gia-hero-nav-btns { display: none; } /* su mobile si usa lo swipe */
}

/* Pallini paginazione - bottom-center */
.swiper-pagination.gia-hero-dots {
  bottom: 1.9rem;
  z-index: 10;
}
.gia-hero-dots .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.42);
  opacity: 1;
  border-radius: 50%;
  transition: width .28s var(--gia-ease), background .28s var(--gia-ease), border-radius .28s var(--gia-ease);
}
.gia-hero-dots .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 4px;
  background: #fff;
}

/* Card flottante in basso a destra */
.gia-hero-card {
  position: absolute;
  bottom: -4rem; /* sporge sotto il frame */
  right: 2rem;
  width: 420px;
  background: var(--gia-bg);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(26,24,22,.13), 0 2px 8px rgba(26,24,22,.06);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  z-index: 4;
}
@media (max-width: 991.98px) { .gia-hero-card { display: none; } }

.gia-hero-card-body {
  padding: 1.4rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
}
.gia-hero-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gia-ink);
  line-height: 1.35;
  margin: 0;
}
.gia-hero-card-desc {
  font-size: 12.5px;
  color: var(--gia-ink-3);
  line-height: 1.55;
  margin: 0;
}
.gia-hero-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gia-terra-lt);
  color: var(--gia-terra);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--gia-dur-fast);
}
.gia-hero-card-tag:hover { background: var(--gia-terra); color: #fff; }
.gia-hero-card-tag-icon {
  width: 18px; height: 18px;
  background: var(--gia-terra);
  border-radius: 4px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gia-hero-card-tag:hover .gia-hero-card-tag-icon { background: rgba(255,255,255,.3); }
.gia-hero-card-img {
  width: 130px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

/* Pill e hero-ctas usate anche in altri contesti */
.gia-hero-ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 2rem;
}
.gia-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gia-pill {
  background: var(--gia-bg);
  border: 1px solid var(--gia-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--gia-ink-2);
  cursor: pointer;
  transition: border-color var(--gia-dur-fast), color var(--gia-dur-fast);
  text-decoration: none;
}
.gia-pill:hover { border-color: var(--gia-ink); color: var(--gia-ink); }

/* (mantenuto per compatibilità) */
.gia-htile-label {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--gia-ink);
  letter-spacing: .01em;
}

/* ═══════════════════════════════════
   FAMIGLIE PRODOTTO
════════════════════════════════════ */
#families { padding: 5rem 0; background: var(--gia-bg); }
.gia-family-card {
  position: relative;
  border-radius: var(--gia-radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.gia-family-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gia-dur-slow) var(--gia-ease);
}
.gia-family-card:hover img { transform: scale(1.04); }
.gia-family-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,24,22,.72) 0%, rgba(26,24,22,.18) 55%, transparent 100%);
}
.gia-family-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
}
.gia-family-count { font-size: 12.5px; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.gia-family-name {
  font-size: 22px; font-weight: 700; color: #fff;
  line-height: 1.2; margin-bottom: 10px;
}
.gia-family-cta {
  display: inline-block;
  background: var(--gia-terra);
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--gia-radius-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--gia-dur-fast) var(--gia-ease), transform var(--gia-dur-fast) var(--gia-ease);
}
.gia-family-card:hover .gia-family-cta { opacity: 1; transform: none; }

/* ═══════════════════════════════════
   SPLIT SCREEN
════════════════════════════════════ */
#split { padding: 5rem 0; background: var(--gia-bg-alt); }
.gia-split-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--gia-radius-lg);
  aspect-ratio: 16/10;
  cursor: pointer;
}
.gia-split-panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gia-dur-slow) var(--gia-ease);
}
.gia-split-panel:hover img { transform: scale(1.03); }
.gia-split-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,24,22,.78) 0%, rgba(26,24,22,.25) 60%, transparent 100%);
}
.gia-split-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.75rem;
}
.gia-split-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gia-terra);
  margin-bottom: 8px;
}
.gia-split-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.gia-split-desc { font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.6; margin-bottom: 1.25rem; max-width: 36ch; }
.gia-split-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #fff;
  transition: color var(--gia-dur-fast);
}
.gia-split-link:hover { color: var(--gia-terra); }

/* ═══════════════════════════════════
   COLLECTIONS SWIPER
════════════════════════════════════ */
#stili-top { padding: 5rem 0; background: var(--gia-bg-alt); }
#stili      { padding: 5rem 0; background: var(--gia-bg-alt); }
#collections .gia-inner { overflow: visible; }
.gia-coll-slide {
  position: relative;
  border-radius: var(--gia-radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.gia-coll-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gia-dur-slow) var(--gia-ease); }
.gia-coll-slide:hover img { transform: scale(1.04); }
.gia-coll-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(26,24,22,.7) 0%, transparent 60%);
  padding: 1.25rem 1rem;
}
.gia-coll-badge {
  display: inline-block;
  background: var(--gia-terra);
  color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  margin-bottom: 6px;
}
.gia-coll-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 2px; }
.gia-coll-sub { font-size: 12px; color: rgba(255,255,255,.65); }
.swiper-button-next, .swiper-button-prev {
  width: 40px !important; height: 40px !important;
  background: #fff;
  border: 1px solid var(--gia-border);
  border-radius: 50%;
  color: var(--gia-ink) !important;
  box-shadow: var(--gia-shadow-warm-sm);
  transition: box-shadow var(--gia-dur-fast);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 13px !important; font-weight: 700 !important; }
.swiper-button-next:hover, .swiper-button-prev:hover { box-shadow: var(--gia-shadow-warm-md); }

/* ═══════════════════════════════════
   PRODUCT CARD .gia-pc
════════════════════════════════════ */
.gia-pc {
  display: flex; flex-direction: column;
  border-radius: var(--gia-radius-md);
  overflow: hidden;
  background: var(--gia-bg);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--gia-dur-med) var(--gia-ease);
}
.gia-pc:hover { box-shadow: var(--gia-shadow-warm-md); color: inherit; }
.gia-pc-img {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--gia-bg-alt);
}
.gia-pc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gia-dur-slow) var(--gia-ease);
}
.gia-pc:hover .gia-pc-img img { transform: scale(1.06); }
.gia-pc-wish {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%; background: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--gia-dur-fast) var(--gia-ease);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.gia-pc:hover .gia-pc-wish,
.gia-pc-wish.active { opacity: 1; }
.gia-pc-wish.active { color: var(--gia-terra); }
.gia-pc-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.gia-pc-badge.novita  { background: var(--gia-ink); color: #fff; }
.gia-pc-badge.bestseller { background: var(--gia-terra); color: #fff; }
.gia-pc-badge.eco     { background: var(--gia-success); color: #fff; }
.gia-pc-body { padding: 12px 14px 0; flex: 1; }
.gia-pc-material {
  font-size: 11px; font-family: var(--gia-font-mono);
  color: var(--gia-ink-3); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 3px;
}
.gia-pc-name { font-size: 14.5px; font-weight: 600; color: var(--gia-ink); margin-bottom: 5px; line-height: 1.3; }
.gia-pc-price { font-size: 13.5px; color: var(--gia-ink-2); margin-bottom: 6px; }
.gia-pc-stars { font-size: 11px; color: var(--gia-terra); display: flex; align-items: center; gap: 4px; }
.gia-pc-stars span { color: var(--gia-ink-3); }
.gia-pc-cta {
  display: none;
  width: 100%;
  background: var(--gia-ink); color: #fff;
  border: none;
  padding: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  border-radius: 0 0 var(--gia-radius-md) var(--gia-radius-md);
  cursor: pointer;
  font-family: var(--gia-font-body);
  transition: background var(--gia-dur-fast);
}
.gia-pc:hover .gia-pc-cta { display: block; }
.gia-pc-cta:hover { background: var(--gia-terra); }

/* ═══════════════════════════════════
   STEP 3-STEP PREVIEW
════════════════════════════════════ */
#steps-preview { padding: 5rem 0; background: var(--gia-bg); }
/* hero-link usato fuori dall'hero: testo scuro */
#steps-preview .gia-hero-link { color: var(--gia-ink-2); }
#steps-preview .gia-hero-link:hover { color: var(--gia-terra); }
.gia-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gia-terra-lt);
  color: var(--gia-terra);
  font-family: var(--gia-font-mono);
  font-size: 13px; font-weight: 700;
  margin-bottom: 1rem;
}
.gia-step-icon { font-size: 1.5rem; color: var(--gia-terra); margin-bottom: .75rem; }
.gia-step-title { font-size: 16px; font-weight: 700; color: var(--gia-ink); margin-bottom: .5rem; }
.gia-step-desc { font-size: 13.5px; color: var(--gia-ink-3); line-height: 1.65; }

/* ═══════════════════════════════════
   MASONRY GALLERY
════════════════════════════════════ */
#gallery { padding: 5rem 0; background: var(--gia-bg-alt); }
.gia-masonry {
  column-count: 4;
  column-gap: 6px;
}
@media (max-width: 1024px) { .gia-masonry { column-count: 3; } }
@media (max-width: 768px)  { .gia-masonry { column-count: 2; } }
@media (max-width: 480px)  { .gia-masonry { column-count: 1; } }
.gia-masonry-item {
  break-inside: avoid;
  margin-bottom: 6px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gia-masonry-item img {
  width: 100%; height: auto; display: block;
  transition: transform var(--gia-dur-slow) var(--gia-ease);
}
.gia-masonry-item:hover img { transform: scale(1.04); }

/* ═══════════════════════════════════
   PRO BANNER
════════════════════════════════════ */
#pro-banner { padding: 5rem 0; background: var(--gia-ink); }
#pro-banner .gia-pre { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gia-terra); margin-bottom: 1rem; }
#pro-banner h2 { font-size: clamp(26px, 3vw, 40px); color: #fff; margin-bottom: 1rem; }
#pro-banner .pro-desc { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 2rem; max-width: 46ch; }
.gia-pro-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
.gia-pro-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px; color: rgba(255,255,255,.75);
}
.gia-pro-img {
  border-radius: var(--gia-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gia-pro-img img { width: 100%; height: 100%; object-fit: cover; }
.btn-outline-light-gia {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: var(--gia-radius-md);
  padding: .75rem 1.75rem;
  font-size: 14px; font-weight: 700;
  transition: background var(--gia-dur-fast), border-color var(--gia-dur-fast);
  text-decoration: none;
}
.btn-outline-light-gia:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }

/* ═══════════════════════════════════
   MATERIALS TABS
════════════════════════════════════ */
#materials { padding: 5rem 0; background: var(--gia-bg-alt); }
.gia-mat-spec { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gia-border); font-size: 13.5px; }
.gia-mat-spec:last-child { border-bottom: none; }
.gia-mat-spec-label { color: var(--gia-ink-3); }
.gia-mat-spec-value { font-weight: 600; color: var(--gia-ink); }
.gia-cert-badge {
  display: inline-block;
  background: var(--gia-bg-deep);
  border: 1px solid var(--gia-border);
  border-radius: var(--gia-radius-sm);
  padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: var(--gia-ink-2);
  margin: 2px;
}
.gia-cert-badge.eco { background: var(--gia-success); color: #fff; border-color: var(--gia-success); }
.gia-mat-img { border-radius: var(--gia-radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.gia-mat-img img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════
   HOW IT WORKS
════════════════════════════════════ */
#how-it-works { padding: 5rem 0; background: var(--gia-bg); }
.gia-how-box {
  padding: 2rem;
  height: 100%;
}
.gia-how-num {
  font-family: var(--gia-font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--gia-terra);
  margin-bottom: .75rem;
  display: block;
}
.gia-how-title { font-size: 16px; font-weight: 700; margin-bottom: .5rem; }
.gia-how-desc { font-size: 13.5px; color: var(--gia-ink-3); line-height: 1.65; }

/* ═══════════════════════════════════
   CASE STUDIES
════════════════════════════════════ */
#case-studies { padding: 5rem 0; background: var(--gia-bg-alt); }
.gia-case-card { border-radius: var(--gia-radius-lg); overflow: hidden; background: var(--gia-bg); box-shadow: var(--gia-shadow-warm-sm); }
.gia-case-img { aspect-ratio: 16/10; overflow: hidden; }
.gia-case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gia-dur-slow) var(--gia-ease); }
.gia-case-card:hover .gia-case-img img { transform: scale(1.04); }
.gia-case-body { padding: 1.5rem; }
.gia-case-sector {
  display: inline-block;
  background: var(--gia-terra-lt);
  color: var(--gia-terra);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px;
  margin-bottom: .75rem;
}
.gia-case-title { font-size: 17px; font-weight: 700; margin-bottom: .5rem; }
.gia-case-meta { font-size: 12.5px; color: var(--gia-ink-3); margin-bottom: 1rem; }
.gia-case-quote { font-size: 14px; font-style: italic; color: var(--gia-ink-2); line-height: 1.6; border-left: 2px solid var(--gia-terra); padding-left: 12px; margin-bottom: .75rem; }
.gia-case-author { font-size: 12.5px; font-weight: 600; color: var(--gia-ink-3); }

/* ═══════════════════════════════════
   TRUSTPILOT BAND
════════════════════════════════════ */
#trustpilot { padding: 3.5rem 0; background: var(--gia-ink); }

/* Unica riga: score + 3 card affiancate */
.gia-tp-row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 991.98px) {
  .gia-tp-row { grid-template-columns: 1fr 1fr; }
  .gia-tp-score { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 575.98px) {
  .gia-tp-row { grid-template-columns: 1fr; }
}

.gia-tp-score { text-align: left; }
.gia-tp-logo {
  font-size: 17px; font-weight: 800;
  color: var(--gia-rating); letter-spacing: -.3px;
  margin-bottom: .6rem; display: block;
}
.gia-tp-stars-lg { color: var(--gia-rating); font-size: 20px; letter-spacing: 2px; margin-bottom: .4rem; }
.gia-tp-main-score {
  font-size: 38px; font-weight: 700;
  color: #fff; font-family: var(--gia-font-mono);
  line-height: 1; margin-bottom: .2rem;
}
.gia-tp-main-score span { font-size: .45em; opacity: .5; }
.gia-tp-label { font-size: 11.5px; color: rgba(255,255,255,.45); }

.gia-review-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--gia-radius-md);
  padding: 1.1rem;
  height: 100%;
}
.gia-review-stars { color: var(--gia-rating); font-size: 12px; letter-spacing: 1px; margin-bottom: .4rem; }
.gia-review-text { font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.55; margin-bottom: .85rem; }
.gia-review-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gia-terra); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.gia-review-meta { display: flex; align-items: center; gap: 8px; }
.gia-review-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.gia-review-date { font-size: 10.5px; color: rgba(255,255,255,.38); font-family: var(--gia-font-mono); }

/* ═══════════════════════════════════
   NEWSLETTER
════════════════════════════════════ */
#newsletter { padding: 5rem 0; background: var(--gia-bg-alt); }
#newsletter h2 { font-size: clamp(24px,3vw,36px); }
#newsletter p { color: var(--gia-ink-2); font-size: 15px; margin-bottom: 0; }
.gia-newsletter-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 500px; margin: 0 auto;
}
.gia-newsletter-form input[type="email"] {
  flex: 1 1 260px;
  border: 1px solid var(--gia-border);
  border-radius: var(--gia-radius-md);
  padding: .75rem 1rem;
  font-size: 14px;
  background: var(--gia-bg);
  outline: none;
  font-family: var(--gia-font-body);
  transition: border-color var(--gia-dur-fast);
}
.gia-newsletter-form input[type="email"]:focus { border-color: var(--gia-ink); }
.gia-privacy-note { font-size: 12px; color: var(--gia-ink-3); margin-top: .75rem; }

/* ═══════════════════════════════════
   FOOTER
════════════════════════════════════ */
#gia-footer { background: var(--gia-ink); padding-top: 4rem; }
.gia-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 992px) {
  .gia-footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Telefono: il footer non va tutto in colonna, si organizza per righe.
     riga 1  dati aziendali (logo, descrizione, indirizzo)  ← larghezza piena
     riga 2  Prodotti | Servizi                             ← due colonne
     riga 3  Assistenza                                     ← larghezza piena
     riga 4  Newsletter e social                            ← larghezza piena
   Prodotti e Servizi sono elenchi di voci brevi e stanno bene affiancati;
   Assistenza ha voci più lunghe (Chi siamo, Contatti, Come ordinare…) che
   affiancate andrebbero a capo. L'ordine è quello del markup: se si aggiunge
   o si sposta una colonna nel footer, vanno riviste le posizioni qui sotto. */
@media (max-width: 576px) {
  .gia-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.5rem;
  }
  .gia-footer-grid > :nth-child(1),   /* dati aziendali */
  .gia-footer-grid > :nth-child(4),   /* Assistenza     */
  .gia-footer-grid > :nth-child(5) {  /* Newsletter     */
    grid-column: 1 / -1;
  }
  .gia-footer-desc { max-width: none; }
}
.gia-footer-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); margin-bottom: .75rem; }
.gia-footer-desc { font-size: 13.5px; color: rgba(255,255,255,.42); line-height: 1.7; margin-bottom: 1.25rem; max-width: 220px; }
.gia-footer-addr { font-size: 12px; font-family: var(--gia-font-body); color: rgba(255,255,255,.28); line-height: 1.9; font-style: normal; }
.gia-footer-col-title { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 1.1rem; }
.gia-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gia-footer-links a { font-size: 13.5px; color: rgba(255,255,255,.58); transition: color var(--gia-dur-fast); }
.gia-footer-links a:hover { color: #fff; }
/* "Cookie Settings": rosso brand schiarito per restare leggibile sul footer scuro */
.gia-footer-links a.gia-cookie-settings { color: #FF5B4F; cursor: pointer; }
.gia-footer-links a.gia-cookie-settings:hover { color: #FF8A80; }
.gia-footer-nl-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--gia-radius-md);
  padding: .625rem .875rem;
  font-size: 13px; color: #fff;
  outline: none;
  font-family: var(--gia-font-body);
  margin-bottom: 8px;
  transition: border-color var(--gia-dur-fast);
}
.gia-footer-nl-input::placeholder { color: rgba(255,255,255,.3); }
.gia-footer-nl-input:focus { border-color: rgba(255,255,255,.3); }
.gia-footer-nl-btn {
  background: var(--gia-terra); color: #fff;
  border: none; border-radius: var(--gia-radius-md);
  padding: .6rem 1.25rem;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; font-family: var(--gia-font-body);
  transition: background var(--gia-dur-fast);
}
.gia-footer-nl-btn:hover { background: #8B3420; }
.gia-social-row { display: flex; gap: 8px; margin-top: 1.25rem; }
.gia-social-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--gia-radius-md);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.42);
  transition: color var(--gia-dur-fast), border-color var(--gia-dur-fast);
  text-decoration: none;
}
.gia-social-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.gia-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 1.25rem 0;
}
.gia-footer-copy { font-size: 12px; font-family: var(--gia-font-body); color: rgba(255,255,255,.28); }
.gia-payment-badges { display: flex; align-items: center; gap: 6px; }
.gia-payment-badge {
  font-size: 10px; font-family: var(--gia-font-body);
  color: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 2px 8px;
}
.gia-legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.gia-legal-links a { font-size: 12px; font-family: var(--gia-font-body); color: rgba(255,255,255,.28); transition: color var(--gia-dur-fast); }
.gia-legal-links a:hover { color: rgba(255,255,255,.65); }

/* ═══════════════════════════════════
   MOBILE OFFCANVAS DRAWER
════════════════════════════════════ */
.gia-drawer-logo img { height: 28px; width: auto; }
.gia-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0;
  font-size: 15px; font-weight: 500;
  color: var(--gia-ink);
  border-bottom: 1px solid var(--gia-border);
  text-decoration: none;
}
.gia-drawer-link:hover { color: var(--gia-terra); }
.gia-drawer-link.pro { color: var(--gia-terra); }

/* ═══════════════════════════════════
   COOKIE BANNER (placeholder)
════════════════════════════════════ */
.iubenda-cs-container { display: none; }

/* ═══════════════════════════════════════════════════
   MEGA MENU
════════════════════════════════════════════════════ */

/* Nav separator */
.gia-nav-sep {
  display: inline-flex; align-items: center;
  width: 1px; height: 18px;
  background: var(--gia-border);
  margin: 0 8px;
  align-self: center;
  flex-shrink: 0;
}

/* Mega item container */
.gia-mega-item {
  position: static; /* panels anchor to #gia-cat-nav */
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
}
/* Dropdown items anchor panels to themselves */
.gia-mega-item--dropdown { position: relative; }

/* Trigger button - inherits .gia-cat-link appearance */
.gia-mega-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--gia-font-body);
  gap: 4px;
}
.gia-mega-trigger:focus-visible {
  outline: 2px solid var(--gia-terra);
  outline-offset: -3px;
  border-radius: 3px;
}

/* Chevron rotates when panel open */
.gia-chevron { transition: transform .2s var(--gia-ease); flex-shrink: 0; }
.gia-mega-trigger[aria-expanded="true"] .gia-chevron,
.gia-mega-trigger[aria-expanded="true"] svg.gia-chevron { transform: rotate(180deg); }

/* Trigger attivo → colore terra */
.gia-mega-trigger[aria-expanded="true"] {
  color: var(--gia-terra) !important;
}

/* Pro & Artist link colours */
.gia-cat-link--pro   { color: var(--gia-terra); gap: 5px; }
.gia-cat-link--pro:hover { color: var(--gia-terra); opacity: .8; }
.gia-cat-link--artist { gap: 5px; }
.gia-eco-dot { color: var(--gia-success); font-size: 10px; }

/* ── Mega panel (full-width, position:fixed via JS top) ── */
.gia-mega-panel {
  position: fixed;
  left: 0; right: 0;
  z-index: 300;
  background: var(--gia-bg);
  border-top: 1px solid var(--gia-border);
  border-bottom: 1px solid var(--gia-border);
  box-shadow: 0 12px 40px -12px rgba(26,24,22,.13);
  padding: 2rem 0;
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--gia-ease),
              transform .2s var(--gia-ease),
              visibility 0s .2s;
}
.gia-mega-panel.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .2s var(--gia-ease),
              transform .2s var(--gia-ease),
              visibility 0s;
}

/* Dropdown variant (Pro / Artisti) */
.gia-mega-panel--dropdown {
  right: auto;
  width: 340px;
  padding: 1.5rem 0;
}

/* ── Column grid inside panel ── */
.gia-mega-inner { display: grid; }

/* 4-col wallpaper */
#mega-wallpaper .gia-mega-inner { grid-template-columns: 1fr 1fr 1fr 1.15fr; }

/* 3-col canvas & stampe */
#mega-canvas .gia-mega-inner,
#mega-stampe  .gia-mega-inner { grid-template-columns: 1fr 1fr 1.15fr; }

/* Single column */
.gia-mega-col {
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
  border-right: 1px solid var(--gia-border);
}
.gia-mega-col:first-child { padding-left: 0; }
.gia-mega-col:last-child  { border-right: none; padding-right: 0; }

/* Column heading */
.gia-mega-col-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gia-ink-3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gia-bg-deep);
}

/* Standard mega link */
.gia-mega-link {
  display: flex; align-items: center; gap: 7px;
  padding: 5.5px 0;
  font-size: 13px; font-weight: 400;
  color: var(--gia-ink-2);
  text-decoration: none;
  transition: color .15s, padding-left .15s;
  line-height: 1.35;
}
.gia-mega-link:hover { color: var(--gia-ink); padding-left: 3px; }

/* Spec link (name + sub-text) */
.gia-mega-link--spec {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 8px;
  border-radius: 6px;
  margin: 1px -8px;
}
.gia-mega-link--spec:hover { background: var(--gia-bg-alt); padding-left: 8px; }
.gia-mega-link-name { font-size: 13px; font-weight: 500; color: var(--gia-ink); }
.gia-mega-link-sub  { font-size: 11.5px; font-weight: 400; color: var(--gia-ink-3); }

/* ── Spotlight column ── */
.gia-mega-spotlight { padding-left: 1.5rem; border-right: none; }
.gia-mega-spotlight-card {
  display: block;
  border-radius: var(--gia-radius-md);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  height: 100%; min-height: 180px;
}
.gia-mega-spotlight-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--gia-ease);
  display: block;
}
.gia-mega-spotlight-card:hover img { transform: scale(1.04); }
.gia-mega-spotlight-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(26,24,22,.84) 0%, rgba(26,24,22,.1) 60%, transparent 100%);
  padding: 1.25rem 1rem .9rem;
}
.gia-mega-spotlight-label {
  display: inline-block;
  background: var(--gia-terra); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.gia-mega-spotlight-title {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: #fff; margin: 0 0 6px;
}
.gia-mega-spotlight-cta { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); }

/* ── Dropdown inner (Pro / Artisti) ── */
.gia-dropdown-inner { padding: 0 1.25rem; }
.gia-dropdown-cta {
  display: flex; align-items: center;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--gia-border);
}

/* ── Mobile drawer: accordion buttons ── */
.gia-drawer-accord-btn {
  font-size: 15px; font-weight: 500;
  color: var(--gia-ink);
  padding: 13px 0;
  background: none; border: none;
  border-bottom: 1px solid var(--gia-border);
  width: 100%; text-align: left;
  cursor: pointer;
  font-family: var(--gia-font-body);
}
/* Remove Bootstrap default chevron */
.gia-drawer-accord-btn::after,
.gia-drawer-accord-btn.collapsed::after { display: none; }

/* Sub-links inside accordion */
.gia-drawer-sub {
  padding: 6px 0 4px 14px;
  border-bottom: 1px solid var(--gia-border);
  display: flex; flex-direction: column;
}
.gia-drawer-sub a {
  padding: 9px 0;
  font-size: 14px; color: var(--gia-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--gia-bg-alt);
}
.gia-drawer-sub a:last-child { border-bottom: none; }
.gia-drawer-sub a:hover { color: var(--gia-terra); }

/* ── Mobile: nasconde la cat-nav (tutto è nel drawer) ── */
@media (max-width: 991.98px) {
  #gia-cat-nav      { display: none !important; }
  .gia-mega-panel   { display: none !important; }
}

/* ── Mobile search bar (dentro il drawer) ── */
.gia-drawer-search {
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--gia-border);
}
.gia-drawer-search .gia-search-wrap input {
  background: var(--gia-bg-alt);
  border: 1px solid var(--gia-border);
  border-radius: 24px;
  padding: 10px 16px 10px 42px;
  font-size: 14px;
  width: 100%;
  outline: none;
  font-family: var(--gia-font-body);
  color: var(--gia-ink);
}
.gia-drawer-search .gia-search-wrap input:focus {
  border-color: var(--gia-ink);
  background: var(--gia-bg);
}

/* ════════════════════════════════════════════
   CATEGORY PRODUCT SECTIONS
════════════════════════════════════════════ */
#cat-products {
  padding: 3rem 0 5rem; /* top ridotto: meno spazio dopo l'hero */
  background: var(--gia-bg);
  overflow-x: clip;
}

.gia-cat-row {
  margin-bottom: 3.5rem;
}
.gia-cat-row:last-child { margin-bottom: 0; }

/* Header: titolo sopra, frecce a sinistra + "Vedi tutti" a destra */
.gia-cat-hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: .55rem;
}
.gia-cat-hdr h3 {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--gia-ink);
}
.gia-cat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Frecce circolari */
.gia-arr-btn {
  width: 38px; height: 38px;
  border: 1.5px solid var(--gia-border);
  border-radius: 50%;
  background: var(--gia-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--gia-ink);
  padding: 0;
  transition: border-color var(--gia-dur-fast), background var(--gia-dur-fast), color var(--gia-dur-fast);
}
.gia-arr-btn:hover {
  border-color: var(--gia-ink);
  background: var(--gia-ink);
  color: #fff;
}
.gia-arr-btn.swiper-button-disabled {
  opacity: .32;
  pointer-events: none;
}

/* "Vedi tutti" pill - spinto a destra nella riga frecce */
.gia-vedi-tutti {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--gia-bg-alt);
  font-size: 13px; font-weight: 500;
  color: var(--gia-ink);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  transition: background var(--gia-dur-fast), color var(--gia-dur-fast);
}
.gia-vedi-tutti:hover { background: var(--gia-ink); color: #fff; }

/* Swiper prodotti - overflow visibile per mostrare slide parziale */
.gia-products-swiper { overflow: visible !important; }

/* Product card */
.gia-prod-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gia-prod-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--gia-radius-md);
  background: var(--gia-bg-alt);
  margin-bottom: 10px;
}
.gia-prod-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--gia-ease);
}
.gia-prod-card:hover .gia-prod-img img { transform: scale(1.04); }

.gia-prod-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gia-prod-name {
  font-size: 13px; font-weight: 400;
  color: var(--gia-ink); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Prezzo - chip terra coerente con l'accent del sito, inverte in hover */
.gia-prod-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--gia-terra);
  background: var(--gia-terra-lt);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--gia-dur-fast) var(--gia-ease),
              color var(--gia-dur-fast) var(--gia-ease);
}
.gia-prod-from {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: .65;
}
.gia-prod-card:hover .gia-prod-price {
  background: var(--gia-terra);
  color: #fff;
}

/* Clip orizzontale per non mostrare slide fuori schermo */
#cat-products .gia-swiper-clip {
  overflow: hidden;
  margin: 0 calc(-1 * var(--gia-inner-px, 0px));
  padding: 0 var(--gia-inner-px, 0px);
}

/* ════════════════════════════════════════════
   PREFERITI - cuore sulle card + toast (globale)
════════════════════════════════════════════ */
.gia-prod-card-wrap { position: relative; }
.gia-fav-btn {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--gia-ink, #1a1816);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,24,22,.16);
  transition: background .15s, transform .15s, color .15s;
}
.gia-fav-btn:hover { background: #fff; transform: scale(1.08); }
.gia-fav-btn svg { fill: none; transition: fill .15s; }
.gia-fav-btn.is-fav { color: var(--gia-terra, #bc0100); }
.gia-fav-btn.is-fav svg { fill: var(--gia-terra, #bc0100); }
.gia-fav-btn.pulse { animation: giaFavPulse .32s cubic-bezier(.16,1,.3,1); }
@keyframes giaFavPulse { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.gia-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 10px);
  background: var(--gia-ink, #1a1816); color: #fff; border-radius: 10px;
  padding: .7rem 1.1rem; font-size: 13.5px; box-shadow: 0 8px 28px rgba(26,24,22,.28);
  z-index: 99999; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: min(90vw, 420px); text-align: center;
}
.gia-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gia-toast a { color: #fff; }
.gia-toast.gia-toast--success { background: #206A38; color: #fff; }
.gia-toast.gia-toast--terra { background: var(--gia-terra, #bc0100); color: #fff; }

/* Google Places Autocomplete: il menu deve stare SOPRA tutto ed essere cliccabile */
.pac-container { z-index: 100000 !important; pointer-events: auto; }
.pac-item { cursor: pointer; }

/* ════════════════════════════════════════════
   LE TRAME - banda scura sui supporti (home)
   Sta fra i caroselli prodotto (bianco) e "Cerca per stile" (crema): il fondo
   scuro è quello che fa risaltare le macro delle superfici.
════════════════════════════════════════════ */
#trame-home { padding: 5rem 0; background: var(--gia-ink); color: #fff; }

.gia-trame-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.gia-trame-intro { max-width: 62ch; }
.gia-trame-eyebrow {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gia-terra);
  margin-bottom: 1rem;
}
.gia-trame-head h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 1rem;
}
.gia-trame-lead { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0; }
.gia-trame-head-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  padding: .7rem 1.15rem;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px;
  transition: background var(--gia-dur-fast) var(--gia-ease), color var(--gia-dur-fast) var(--gia-ease), border-color var(--gia-dur-fast) var(--gia-ease);
}
.gia-trame-head-cta:hover { background: #fff; color: var(--gia-ink); border-color: #fff; }

.gia-trame-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.gia-trama-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--gia-radius-lg);
  overflow: hidden;
  transition: transform var(--gia-dur-mid) var(--gia-ease), background var(--gia-dur-fast) var(--gia-ease), border-color var(--gia-dur-fast) var(--gia-ease);
}
.gia-trama-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.gia-trama-img { position: relative; aspect-ratio: 16 / 10.35; overflow: hidden; background: #000; } /* 16/9 alzato del 15% */
.gia-trama-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--gia-dur-slow, .6s) var(--gia-ease),
              opacity .45s linear;
}
/* Incrocio vero: mentre la seconda entra, la macro sotto si smorza invece di
   restare piena. A metà strada le due immagini sono entrambe in trasparenza -
   è il momento in cui il passaggio si legge come dissolvenza e non come
   sostituzione. Solo dove la seconda immagine esiste (.has-alt). */
.gia-trama-card:hover .gia-trama-img.has-alt > img:first-of-type,
.gia-trama-card:focus-visible .gia-trama-img.has-alt > img:first-of-type { opacity: .18; }
.gia-trama-card:hover .gia-trama-img img,
.gia-trama-card:focus-visible .gia-trama-img img { transform: scale(1.06); }

/* Seconda immagine (galleria del supporto): sovrapposta alla macro, entra in
   dissolvenza al passaggio del mouse. Se la carta non ha galleria il secondo
   <img> non viene nemmeno stampato e resta solo lo zoom. */
.gia-trama-img img.gia-trama-img-alt {
  position: absolute; inset: 0;
  /* .001 e non 0: a opacità zero il browser può rimandare la decodifica del
     JPEG, e il primo passaggio del mouse partiva a scatto. Così l'immagine è
     già pronta e su un livello suo, e la dissolvenza la fa la GPU. */
  opacity: .001;
  will-change: opacity;
  backface-visibility: hidden;
  /* Dissolvenza LINEARE: qualsiasi curva concentra il cambio in un tratto del
     tempo e si vede come uno stacco. Una dissolvenza si fa a velocità costante. */
  transition: opacity .45s linear, transform var(--gia-dur-slow, .6s) var(--gia-ease);
}
.gia-trama-card:hover .gia-trama-img img.gia-trama-img-alt,
.gia-trama-card:focus-visible .gia-trama-img img.gia-trama-img-alt { opacity: 1; }
.gia-trama-badge {
  position: absolute; top: 9px; left: 9px;
  background: var(--gia-terra); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
}
.gia-trama-body { display: flex; flex-direction: column; flex: 1; padding: .95rem 1rem 1.05rem; }
.gia-trama-cat {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .35rem;
}
.gia-trama-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.gia-trama-desc { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.55); margin: .4rem 0 0; flex: 1; }
.gia-trama-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.gia-trama-price { font-size: 12px; color: rgba(255,255,255,.55); }
.gia-trama-price strong { font-family: var(--gia-font-mono); font-size: 13px; font-weight: 700; color: #fff; }
.gia-trama-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #fff; opacity: .75;
  transition: opacity var(--gia-dur-fast) var(--gia-ease), gap var(--gia-dur-fast) var(--gia-ease);
}
.gia-trama-card:hover .gia-trama-link { opacity: 1; gap: 8px; }
/* Etichette della riga prezzo: versione lunga da tablet in su, corta su mobile
   (nella card stretta "a partire da" mandava il link a capo). */
.gia-trama-foot .gia-t-short { display: none; }

.gia-trame-claims {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 2rem;
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.gia-trame-claims > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.gia-trame-claims > span svg { color: var(--gia-terra); flex: 0 0 auto; }
.gia-trame-claims-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: none;
  transition: color var(--gia-dur-fast) var(--gia-ease);
}
.gia-trame-claims-cta:hover { color: var(--gia-terra); }

/* Dispositivi senza mouse: l'hover non arriva mai. La seconda immagine compare
   al tocco (:active) così resta comunque raggiungibile. */
@media (hover: none) {
  .gia-trama-card:active .gia-trama-img img.gia-trama-img-alt { opacity: 1; }
  .gia-trama-card:active .gia-trama-img.has-alt > img:first-of-type { opacity: .18; }
}

@media (max-width: 1399.98px) {
  .gia-trame-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1199.98px) {
  .gia-trame-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .gia-trame-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}
@media (max-width: 767.98px) {
  #trame-home { padding: 3.5rem 0; }
  /* Otto trame in colonna sarebbero un muro da scorrere: su mobile diventano un
     carosello a scatti, con un rientro di 20px prima della prima card. */
  .gia-trame-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 8px;
    /* Senza questo lo snap allinea la prima card al bordo dello schermo
       scavalcando il padding: i 20px di respiro a sinistra sparivano. */
    scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gia-trame-grid::-webkit-scrollbar { display: none; }
  .gia-trama-card { flex: 0 0 68%; scroll-snap-align: start; }
  .gia-trama-foot .gia-t-long { display: none; }
  .gia-trama-foot .gia-t-short { display: inline; }
  .gia-trame-claims { gap: .7rem 1.5rem; }
  .gia-trame-claims-cta { margin-left: 0; }
}

/* ════════════════════════════════════════════
   CERCA PER STILE
════════════════════════════════════════════ */
#stili {
  padding: 5rem 0;
  background: var(--gia-bg);
}

.gia-stili-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}

.gia-stile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.gia-stile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gia-bg-alt);
}

.gia-stile-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--gia-ease);
}

.gia-stile-card:hover .gia-stile-img img { transform: scale(1.06); }

.gia-stile-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--gia-ink-2);
  text-align: center;
  transition: color var(--gia-dur-fast);
}

.gia-stile-card:hover .gia-stile-label { color: var(--gia-ink); }

@media (max-width: 991.98px) {
  .gia-stili-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 575.98px) {
  .gia-stili-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ════════════════════════════════════════════
   MEGA MENU - COLOR SWATCHES
════════════════════════════════════════════ */
.gia-mega-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 4px;
}
.gia-mega-color-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--gia-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.gia-mega-color-link:hover {
  background: var(--gia-bg-alt);
  color: var(--gia-ink);
}
.gia-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--gia-terra);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s, transform .14s;
}
.gia-mega-cta:hover {
  background: var(--gia-ink);
  color: #fff;
  transform: translateX(2px);
}
.gia-mega-cta i { flex-shrink: 0; }
.gia-mega-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .1);
  display: inline-block;
}
.gia-mega-color-dot--tutti {
  background: conic-gradient(
    #D4849A   0deg  51deg,
    #7BA8C4  51deg 102deg,
    #6B9E6B 102deg 153deg,
    #D4B84A 153deg 204deg,
    #C47A2C 204deg 255deg,
    #B04040 255deg 306deg,
    #9A9590 306deg 357deg,
    #1A1816 357deg 360deg
  );
  border: none;
}

/* ── Modali sempre centrate verticalmente (anche senza .modal-dialog-centered) ── */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin, .5rem) * 2);
}


/* ════════════════════════════════════════════
   PORTALE ARTISTA - shell condivisa (area privata artista)
════════════════════════════════════════════ */
    /* ── Shared private page layout ── */
    .art-mobile-tabs { display:flex;gap:.4rem;overflow-x:auto;padding:.25rem 0 .75rem;scrollbar-width:none;margin-bottom:1rem; }
    .art-mobile-tabs::-webkit-scrollbar { display:none; }
    .art-mobile-tab { display:inline-flex;align-items:center;gap:5px;padding:.35rem .8rem;border-radius:20px;font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--gia-ink-2);background:#fff;border:1px solid var(--gia-border); }
    .art-mobile-tab.active { background:var(--gia-ink);color:#fff;border-color:var(--gia-ink); }

    /* ── Page header ── */
    .art-page-header { margin-bottom:1.5rem; }
    .art-page-header h1 { font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-0.025em;color:var(--gia-ink);margin-bottom:.2rem; }
    .art-page-header .subtitle { font-size:13.5px;color:var(--gia-ink-3);margin:0; }
    .art-breadcrumb { font-size:12px;color:var(--gia-ink-3);margin-bottom:.5rem;display:flex;align-items:center;gap:5px; }
    .art-breadcrumb a { color:var(--gia-ink-3);text-decoration:none; }
    .art-breadcrumb a:hover { color:var(--gia-terra); }

    /* ── Form sections ── */
    .art-form-section { background:#fff;border:1px solid var(--gia-border);border-radius:12px;margin-bottom:1.25rem;overflow:hidden; }
    .art-form-section-header { padding:1rem 1.25rem;border-bottom:1px solid var(--gia-border); }
    .art-form-section-title { font-size:14px;font-weight:700;color:var(--gia-ink);margin:0; }
    .art-form-section-sub { font-size:12.5px;color:var(--gia-ink-3);margin-top:2px; }
    .art-form-body { padding:1.25rem; }

    /* Form inputs */
    .art-label { font-size:13px;font-weight:600;color:var(--gia-ink);margin-bottom:.35rem;display:block; }
    .art-label span { font-weight:400;color:var(--gia-ink-3);font-size:12px; }
    .art-input { width:100%;border:1px solid var(--gia-border);border-radius:var(--gia-radius-md);padding:.65rem .9rem;font-size:13.5px;color:var(--gia-ink);font-family:var(--gia-font-body);background:#fff;outline:none;transition:border-color var(--gia-dur-fast); }
    .art-input:focus { border-color:var(--gia-ink); }
    .art-textarea { resize:vertical;min-height:90px; }
    .art-char-counter { font-size:11.5px;color:var(--gia-ink-3);text-align:right;margin-top:.25rem;font-family:var(--gia-font-mono); }
    .art-input-prefix { display:flex;align-items:center;background:var(--gia-bg-alt);border:1px solid var(--gia-border);border-right:none;border-radius:var(--gia-radius-md) 0 0 var(--gia-radius-md);padding:.65rem .9rem;font-size:13px;color:var(--gia-ink-3);font-family:var(--gia-font-mono);white-space:nowrap;flex-shrink:0; }
    .art-input-prefixed { border-radius:0 var(--gia-radius-md) var(--gia-radius-md) 0;border-left:none; }
    .art-input-group { display:flex; }

    /* Style checkboxes */
    .art-style-grid { display:flex;flex-wrap:wrap;gap:.4rem; }
    .art-style-check { position:relative; }
    .art-style-check input { position:absolute;opacity:0;width:0;height:0; }
    .art-style-pill { display:inline-flex;align-items:center;padding:.35rem .9rem;border-radius:20px;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--gia-border);background:var(--gia-bg-alt);color:var(--gia-ink-2);transition:all var(--gia-dur-fast); }
    .art-style-check input:checked + .art-style-pill { background:var(--gia-ink);color:#fff;border-color:var(--gia-ink); }
    .art-style-pill:hover { border-color:var(--gia-ink-2);color:var(--gia-ink); }

    /* Payment toggle */
    .art-payment-panel { display:none; }
    .art-payment-panel.visible { display:block; }

    /* Notification checkboxes */
    .art-notify-row { display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--gia-border);gap:1rem; }
    .art-notify-row:last-child { border-bottom:none; }
    .art-notify-label { font-size:13.5px;color:var(--gia-ink-2);flex:1; }
    .art-toggle { position:relative;width:38px;height:22px;flex-shrink:0; }
    .art-toggle input { opacity:0;width:0;height:0; }
    .art-toggle-slider { position:absolute;inset:0;background:var(--gia-border);border-radius:11px;cursor:pointer;transition:background var(--gia-dur-fast); }
    .art-toggle-slider::before { content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform var(--gia-dur-fast); }
    .art-toggle input:checked + .art-toggle-slider { background:var(--gia-ink); }
    .art-toggle input:checked + .art-toggle-slider::before { transform:translateX(16px); }

    /* Danger zone */
    .art-danger-zone { background:#fff;border:1px solid #F0C0BA;border-radius:12px;padding:1.25rem; }

    /* Unsaved banner */
    .art-unsaved-banner { display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--gia-ink);color:#fff;border-radius:10px;padding:.65rem 1.25rem;font-size:13.5px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:500;align-items:center;gap:10px;white-space:nowrap; }
    .art-unsaved-banner.visible { display:flex; }

    /* Success toast */
    .art-toast { display:none;position:fixed;bottom:1.5rem;right:1.5rem;background:var(--gia-success);color:#fff;border-radius:10px;padding:.65rem 1.25rem;font-size:13.5px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:600;align-items:center;gap:8px; }
    .art-toast.visible { display:flex; }
    /* ═══ ACCOUNT SIDEBAR ═══ */
    .priv-sidebar {
      background:#fff;border:1px solid var(--gia-border);
      border-radius:16px;overflow:hidden;
    }
    .priv-sidebar-profile {
      padding:1.25rem 1.25rem 1rem;
      border-bottom:1px solid var(--gia-border);
    }
    .priv-sidebar-avatar {
      width:46px;height:46px;border-radius:12px;
      background:var(--gia-ink);color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-weight:800;font-size:14px;letter-spacing:-.02em;
      flex-shrink:0;margin-bottom:.85rem;
    }
    .priv-sidebar-name  { font-size:14.5px;font-weight:700;color:var(--gia-ink);line-height:1.2;margin-bottom:2px; }
    .priv-sidebar-email { font-size:12px;color:var(--gia-ink-3); }
    .priv-sidebar-role  {
      display:inline-block;margin-top:.6rem;
      font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      background:var(--gia-terra-lt);color:var(--gia-terra);
      padding:3px 9px;border-radius:20px;
    }
    .priv-sidebar-nav { padding:.6rem .6rem .75rem; }
    .priv-nav-section {
      font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--gia-ink-3);padding:.35rem .65rem .2rem;margin-top:.3rem;
    }
    .priv-nav-item {
      display:flex;align-items:center;gap:.7rem;
      padding:.58rem .7rem;border-radius:9px;
      font-size:13.5px;font-weight:500;
      color:var(--gia-ink-2);text-decoration:none;
      transition:background .13s,color .13s;
      border:none;background:transparent;
      cursor:pointer;width:100%;font-family:var(--gia-font-body);text-align:left;
    }
    .priv-nav-item i { opacity:.55;flex-shrink:0;transition:opacity .13s; }
    .priv-nav-item:hover { background:var(--gia-bg-alt);color:var(--gia-ink); }
    .priv-nav-item:hover i { opacity:.8; }
    .priv-nav-item.active { background:var(--gia-ink);color:#fff;font-weight:600;pointer-events:none; }
    .priv-nav-item.active i { opacity:1; }
    .priv-nav-badge {
      margin-left:auto;min-width:20px;height:20px;border-radius:20px;
      background:var(--gia-terra);color:#fff;
      font-size:10.5px;font-weight:700;font-family:var(--gia-font-mono);
      display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;
    }
    .priv-nav-item.active .priv-nav-badge { background:rgba(255,255,255,.2);color:rgba(255,255,255,.9); }
    .priv-nav-sep { height:1px;background:var(--gia-border);margin:.6rem .6rem; }
    .priv-nav-item.logout { color:var(--gia-terra); }
    .priv-nav-item.logout i { opacity:.7; }
    .priv-nav-item.logout:hover { background:var(--gia-terra-lt);color:var(--gia-terra); }
    .priv-nav-item.logout:hover i { opacity:1; }

/* ══════════════════════════════════════════════════════════════════════
   Campi form: 16px sui touch screen piccoli
   ──────────────────────────────────────────────────────────────────────
   iOS Safari ingrandisce automaticamente la pagina quando si tocca un campo
   con testo sotto i 16px, e non la rimpicciolisce più. Finché il viewport
   bloccava lo zoom (`user-scalable=no`) l'effetto non si vedeva; ora che lo
   zoom è libero, come richiede WCAG 1.4.4, i campi vanno portati a 16px.

   Solo sotto i 768px: sopra resta la dimensione decisa dal design.
   `!important` serve per battere i pochi font-size inline (es. campo IBAN).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .gia-search-wrap input,
  .gia-newsletter-form input[type="email"],
  .gia-footer-nl-input,
  .gia-drawer-search .gia-search-wrap input,
  .art-input,
  .art-input-prefix,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Avviso lingua (non bloccante)
   ──────────────────────────────────────────────────────────────────────
   Sostituisce il vecchio redirect automatico alla prima visita. Sta in cima
   alla pagina, si può chiudere, e non copre nulla: scorre via col contenuto
   invece di restare fisso, così non ruba spazio sopra la piega su mobile.
   ══════════════════════════════════════════════════════════════════════ */
.gia-lang-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  padding: .6rem 2.6rem .6rem 1rem;
  position: relative;
  background: var(--gia-bg-alt, #f6f5f2);
  border-bottom: 1px solid var(--gia-border, #e4e1dc);
  font-size: 13.5px;
  color: var(--gia-ink-2, #4a4744);
  text-align: center;
}
.gia-lang-hint-cta {
  font-weight: 700;
  color: var(--gia-terra, #bc0100);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.gia-lang-hint-cta:hover { color: var(--gia-terra, #bc0100); opacity: .8; }
.gia-lang-hint-x {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none;
  font-size: 20px; line-height: 1;
  color: var(--gia-ink-3, #8c8884);
  cursor: pointer;
  border-radius: 50%;
}
.gia-lang-hint-x:hover { color: var(--gia-ink, #1a1816); background: rgba(0,0,0,.05); }
@media (max-width: 575.98px) {
  .gia-lang-hint { font-size: 12.5px; padding: .55rem 2.4rem .55rem .8rem; }
}