/* ============================================================
   Boxes Trading — polish layer
   Solaris Futura · https://solarisfutura.net
   Caricato PER ULTIMO: contiene solo correzioni.
   Per disattivarlo basta commentare il <link> nelle pagine.
   ============================================================ */


/* ------------------------------------------------------------
   1. TIPOGRAFIA ARABA — spaziatura fra lettere
   In arabo le lettere si legano fra loro: il letter-spacing
   spezza le legature e il testo appare rotto.
   Resta attivo su [lang="en"], dove dir diventa ltr.
   ------------------------------------------------------------ */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  letter-spacing: normal !important;
}

/* eccezione: elementi di sola interfaccia latina */
html[dir="rtl"] .lang-btn,
html[dir="rtl"] .nav-burger-label,
html[dir="rtl"] .footer-credit {
  letter-spacing: .02em !important;
}

/* l'arabo ha bisogno di un filo d'aria in più fra le righe */
html[dir="rtl"] p,
html[dir="rtl"] .section-desc,
html[dir="rtl"] .hero-desc,
html[dir="rtl"] li {
  line-height: 1.85;
}


/* ------------------------------------------------------------
   2. DIMENSIONI MINIME DEL TESTO
   Nessun testo sotto i 12px. L'arabo, a parità di corpo,
   risulta otticamente più piccolo del latino.
   ------------------------------------------------------------ */
.pc-photo-count            { font-size: .75rem !important; }
.brand-title small         { font-size: .78rem !important; }
.sc-num                    { font-size: .78rem !important; }
.product-tag               { font-size: .78rem !important; }
.cat-pill-n                { font-size: .78rem !important; }
.bsp-est-note              { font-size: .78rem !important; }
.bsp-size-cm               { font-size: .75rem !important; }
.sim-badge                 { font-size: .78rem !important; }
.section-tag               { font-size: .82rem !important; }
.marquee-item              { font-size: .82rem; }
.footer-bottom             { font-size: .82rem; }

.counter-lbl               { font-size: .82rem !important; }
.bsp-size-tag              { font-size: .75rem !important; }
.nav-burger-label          { font-size: .75rem !important; }
.bsp-est i,
.bsp-cur,
.bsp-size-price i,
.bsp-size-name,
.bsp-pill span             { font-size: .78rem !important; }

.product-cat,
#productGrid .product-cat,
#shopGrid   .product-cat   { font-size: .78rem !important; }

@media (max-width: 640px) {
  .hero-subtitle           { font-size: .78rem !important; }
  .counter-lbl             { font-size: .78rem !important; }
  #productGrid .product-cat,
  #shopGrid   .product-cat { font-size: .78rem !important; }
  .product-tag             { font-size: .78rem !important; }
}


/* ------------------------------------------------------------
   3. BOTTONE WHATSAPP — in palette oro
   Il verde #25D366 con testo bianco dava 1,98:1 (AA chiede 4,5)
   ed era l'unico elemento acceso in una tavolozza oro su nero.
   Ora: 7,1:1, coerente con gli altri CTA.
   ------------------------------------------------------------ */
.btn-whatsapp-order {
  background: linear-gradient(135deg, #f0d9a2 0%, #cda459 56%, #a77935 100%) !important;
  color: #2a1c06 !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(205, 164, 89, .55);
  transition: filter .25s ease, box-shadow .25s ease, transform .2s ease;
}
.btn-whatsapp-order:hover {
  filter: brightness(1.07);
  box-shadow: 0 14px 32px -10px rgba(205, 164, 89, .7) !important;
  transform: translateY(-1px);
}
.btn-whatsapp-order svg,
.btn-whatsapp-order .icon-svg { color: #2a1c06 !important; }

/* il pulsante flottante resta verde: lì è un'icona-marchio riconoscibile,
   ma con anello dorato per legarlo al resto */
.wa-float {
  border: 2px solid rgba(212, 175, 55, .55);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
}


/* ------------------------------------------------------------
   4. AREE DI TOCCO
   Riferimento: 44x44 su touch, 40x40 su desktop.
   ------------------------------------------------------------ */
.home-product-nav {
  width: 44px  !important;
  height: 44px !important;
}

.cart-close-btn,
.lb-close,
.img-modal-close,
.modal-close {
  min-width: 44px  !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.footer-col ul li a,
.footer-col ul li {
  display: inline-block;
  padding-block: 5px;
  line-height: 1.5;
}

@media (hover: none), (max-width: 900px) {
  .home-product-nav {
    width: 44px  !important;
    height: 44px !important;
    opacity: 1;
  }
  .btn-add-cart,
  #productGrid .btn-add-cart,
  #shopGrid .btn-add-cart {
    width: 44px  !important;
    min-width: 44px  !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .footer-col ul li a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-block: 8px;
  }
  .nav-burger  { min-height: 44px; }
  .lang-btn,
  .cart-btn    { min-height: 42px; }
  .tab-btn     { min-height: 42px; }
  /* i puntini restano piccoli visivamente, ma l'area cliccabile cresce */
  .home-product-dots { gap: 10px !important; }
  .home-product-dots button,
  .home-product-dots span {
    position: relative;
  }
  .home-product-dots button::after,
  .home-product-dots span::after {
    content: '';
    position: absolute;
    inset: -14px;
  }
}


/* ------------------------------------------------------------
   6. SCALA TIPOGRAFICA — chiusura dei passi ravvicinati
   Erano 12 corpi distinti sulla sola home. Consolidati
   gli scarti da 1px, che leggono come imprecisione.
   ------------------------------------------------------------ */
:root {
  --step-xs: .78rem;   /* 12.5px */
  --step-sm: .875rem;  /* 14px   */
  --step-md: 1rem;     /* 16px   */
  --step-lg: 1.25rem;  /* 20px   */
}

.product-desc,
.card-desc,
.footer-col ul li a,
.footer-grid p          { font-size: var(--step-sm); }

.product-name,
.footer-col h3, .footer-col h4          { font-size: var(--step-lg); }

.section-desc,
.hero-desc              { font-size: clamp(var(--step-md), 1.1vw, 1.06rem); }


/* ------------------------------------------------------------
   7. RITMO VERTICALE
   Quasi tutte le sezioni avevano 122px di padding, ma
   corp-sec ne aveva 34 in alto e counters-band 30:
   nello scroll si sentivano come scalini.
   ------------------------------------------------------------ */
.corp-sec {
  padding-top: clamp(70px, 8vw, 130px) !important;
}
.counters-band {
  padding-block: clamp(46px, 5vw, 74px) !important;
}
.tst-sec,
.simulator-section {
  padding-block: clamp(70px, 8vw, 130px);
}


/* ------------------------------------------------------------
   8. GRIGLIA PRODOTTI IN HOME
   Passata da 12 a 8 pezzi + card "vedi tutto": tre righe
   piene su desktop invece di cinque.
   ------------------------------------------------------------ */
.view-all-card {
  min-height: 100%;
}


/* ------------------------------------------------------------
   Rifiniture
   ------------------------------------------------------------ */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--gold-primary, #d4af37);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Pagina Corporate Gifting
   ============================================================ */
.cg-hero .ab-bg img { object-fit: cover; opacity: .34; }

.cg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.cg-card{
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(212,175,55,.18);
  border-radius:14px;
  padding:28px 24px;
  transition:border-color .3s ease,transform .3s ease;
}
.cg-card:hover{ border-color:rgba(212,175,55,.42); transform:translateY(-3px); }
.cg-ico{ width:30px; height:30px; color:var(--gold-primary,#d4af37); margin-bottom:14px; }
.cg-card h3{ font-size:1.14rem; margin:0 0 8px; color:var(--text-main); }
.cg-card p{ font-size:.9rem; color:var(--text-muted); line-height:1.75; margin:0; }

.cg-uses{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px;
}
.cg-uses li{
  position:relative;
  padding:15px 44px;
  border:1px solid rgba(212,175,55,.14);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  font-size:.95rem;
  color:var(--text-main);
}
.cg-uses li::before{
  content:'';
  position:absolute;
  inset-inline-start:18px;
  top:50%;
  width:8px; height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--gold-primary,#d4af37);
}

.cg-process{ background:rgba(255,255,255,.018); }
.cg-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px;
}
.cg-steps li{ display:flex; gap:16px; align-items:flex-start; }
.cg-n{
  flex:0 0 auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.4);
  color:var(--gold-primary,#d4af37);
  font-weight:700;
}
.cg-steps h3{ font-size:1.05rem; margin:6px 0 6px; }
.cg-steps p{ font-size:.9rem; color:var(--text-muted); line-height:1.75; margin:0; }

.cg-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.cg-tier{
  border:1px solid rgba(212,175,55,.18);
  border-radius:14px;
  padding:26px 22px;
  text-align:center;
  background:rgba(255,255,255,.02);
}
.cg-tier-mid{
  border-color:rgba(212,175,55,.46);
  background:linear-gradient(165deg,rgba(212,175,55,.09),rgba(255,255,255,.02));
}
.cg-tier h3{ font-size:1.2rem; margin:0 0 10px; color:var(--gold-primary,#d4af37); }
.cg-tier p{ font-size:.9rem; color:var(--text-muted); line-height:1.75; margin:0; }

.cg-end-card{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
  border:1px solid rgba(212,175,55,.2);
  border-radius:16px;
  padding:38px;
  background:linear-gradient(150deg,rgba(212,175,55,.07),rgba(255,255,255,.015));
}
.cg-end-txt p{ color:var(--text-muted); line-height:1.85; margin:12px 0 22px; }

@media (max-width:820px){
  .cg-end-card{ grid-template-columns:1fr; padding:26px; }
}

/* ============================================================
   Marquee continuo — traslazione in pixel, non in percentuale
   ============================================================ */
html[dir="ltr"] .marquee-track.mq-fixed.is-ready {
  animation: mqShiftLTR var(--mq-dur, 26s) linear infinite !important;
}
html[dir="rtl"] .marquee-track.mq-fixed.is-ready {
  animation: mqShiftRTL var(--mq-dur, 26s) linear infinite !important;
}
@keyframes mqShiftLTR {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--mq-shift) * -1), 0, 0); }
}
@keyframes mqShiftRTL {
  from { transform: translate3d(calc(var(--mq-shift) * -1), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Valuta e contatore carrello: mai sotto i 12px, anche su mobile */
.product-price span,
.product-price i,
.pd-price span,
.pd-price i,
.cart-btn span,
.cart-count { font-size: .78rem !important; }

/* ============================================================
   MOBILE — rifinitura
   Solaris Futura · https://solarisfutura.net
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- Navbar: tre pulsanti uguali, niente etichetta ---------- */
  .nav-burger {
    width: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
  }
  .nav-burger-label { display: none !important; }
  .nav-burger,
  .lang-btn,
  .cart-btn {
    height: 44px !important;
    border-radius: 12px;
  }
  .lang-btn { padding-inline: 11px !important; }
  /* i tre pulsanti restano un blocco unico: lo spazio libero va fra logo e gruppo */
  .container.nav-content { gap: 8px !important; }
  /* la colonna del burger era rimasta a 72px, larghezza dell'etichetta "Menu" */
  header.navbar .nav-content {
    grid-template-columns: minmax(0, 1fr) auto 44px !important;
    gap: 8px !important;
  }
  .nav-actions {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    gap: 8px !important;
  }
  .nav-burger { margin: 0 !important; }

  /* ---------- Shop: ogni scheda come la prima ---------- */
  #shopGrid { gap: 15px; }

  #shopGrid .product-card {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    border-radius: 19px !important;
    /* nessuna sovrascrittura dello sfondo: resta quello originale,
       cosi' texture e motivi sotto restano visibili */
  }

  #shopGrid .product-card .product-img-wrapper,
  #shopGrid .product-card:not(:first-child) .product-img-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.48 / 1 !important;
    padding: 12px !important;
    border-inline-end: 0 !important;
    border-bottom: 1px solid rgba(240,217,164,.18) !important;
  }

  #shopGrid .product-details { padding: 18px 17px 16px !important; }

  #shopGrid .product-card .product-title,
  #shopGrid .product-card:not(:first-child) .product-title {
    min-height: 0 !important;
    margin-bottom: 7px !important;
    font-size: 1.26rem !important;
    line-height: 1.18 !important;
  }

  #shopGrid .product-card .product-desc {
    display: -webkit-box !important;
    margin: 0 0 13px !important;
    color: #cfc2b2 !important;
    font-size: .82rem !important;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  #shopGrid .product-footer {
    grid-template-columns: minmax(0,1fr) 44px !important;
    margin-top: 0 !important;
    padding-top: 13px !important;
  }
  #shopGrid .product-price { font-size: 1.2rem !important; }
  #shopGrid .btn-add-cart {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }
  #shopGrid .btn-add-cart svg { width: 18px !important; height: 18px !important; }
  #shopGrid .product-cat { font-size: .78rem !important; letter-spacing: .05em !important; }
  #shopGrid .product-tag { font-size: .72rem !important; padding: 5px 10px !important; }

  /* ---------- Home: stessa scheda della shop ---------- */
  #productGrid { grid-template-columns: 1fr !important; gap: 15px; }
  #productGrid .product-img-wrapper { aspect-ratio: 1.48 / 1 !important; padding: 12px !important; }
  #productGrid .product-details { padding: 18px 17px 16px !important; }
  #productGrid .product-title { font-size: 1.26rem !important; }
  #productGrid .product-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #cfc2b2 !important;
    font-size: .82rem !important;
    line-height: 1.65;
    margin: 0 0 13px !important;
  }
  #productGrid .btn-add-cart { border-radius: 12px !important; }

  /* ---------- Carrello vuoto: contenuto centrato, niente vuoto ---------- */
  .cart-body { display: flex; flex-direction: column; }
  .cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 22px 60px;
    text-align: center;
  }
  .cart-empty svg { width: 54px; height: 54px; opacity: .34; }
  .cart-empty p { margin: 0; color: var(--text-muted); font-size: .95rem; }
  .cart-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid rgba(212,175,55,.5);
    border-radius: 12px;
    background: rgba(212,175,55,.08);
    color: var(--gold-primary, #d4af37);
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
  }
}

/* La griglia a colonna singola vale anche sotto i 350px */
@media (max-width: 350px) {
  #shopGrid, #productGrid { grid-template-columns: 1fr !important; }
}

/* Etichette prodotto: mai sotto i 12px su nessuna larghezza */
.product-tag,
#shopGrid .product-tag,
#productGrid .product-tag { font-size: .78rem !important; }

/* ============================================================
   Carrello nascosto quando e' vuoto
   ============================================================ */
html.cart-is-empty .cart-btn {
  display: none !important;
}
html.cart-is-empty header.navbar .nav-content {
  grid-template-columns: minmax(0, 1fr) auto 44px !important;
}

/* ============================================================
   HERO — via i pannelli neri sovrapposti alla fotografia
   Prima: pillola piena, lastra opaca dietro il paragrafo e
   velatura uniforme. La foto dell'atelier non si vedeva.
   Ora: una sola velatura verticale, testo leggibile per
   contrasto e ombra, fotografia visibile.
   ============================================================ */

.hero-section .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(7,5,4,.80) 0%,
    rgba(7,5,4,.46) 24%,
    rgba(7,5,4,.34) 48%,
    rgba(7,5,4,.66) 78%,
    rgba(7,5,4,.94) 100%
  ) !important;
}

.hero-section .hero-bg img,
.hero-section .hero-media img {
  opacity: 1 !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

/* pillola: da blocco pieno a contorno sottile */
.hero-subtitle {
  background: rgba(8,5,3,.28) !important;
  backdrop-filter: blur(3px) !important;
  border: 1px solid rgba(212,175,55,.34) !important;
  box-shadow: none !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}

/* paragrafo: niente lastra, solo ombra per la leggibilita' */
.hero-desc {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.75);
}

.hero-title,
.hero-section h1 {
  text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 4px 34px rgba(0,0,0,.6);
}

/* la fascia dei plus resta, ma piu' leggera */
.hero-features {
  background: linear-gradient(180deg, rgba(19,14,10,.42), rgba(12,9,7,.58)) !important;
  border-color: rgba(212,175,55,.20) !important;
}

@media (max-width: 640px) {
  .hero-desc { margin-inline: 2px !important; font-size: .96rem !important; line-height: 1.85 !important; }
  .hero-subtitle { font-size: .78rem !important; padding: 8px 16px !important; }
}

@media (max-width: 640px) {
  /* il titolo spezzava in quattro righe strette con una parola orfana */
  .hero-title,
  .hero-section h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.35rem) !important;
    line-height: 1.32 !important;
    margin-bottom: 16px !important;
  }
  /* il pulsante WhatsApp copriva l'ultima fascia */
  .wa-float { bottom: 84px !important; }
}

@media (max-width: 640px) {
  /* il titolo inglese e' piu' lungo dell'arabo: andava su sei righe */
  html[lang="en"] .hero-title,
  html[lang="en"] .hero-section h1 {
    font-size: clamp(1.42rem, 6.2vw, 1.95rem) !important;
    line-height: 1.24 !important;
  }
  html[lang="ar"] .hero-title,
  html[lang="ar"] .hero-section h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.2rem) !important;
    line-height: 1.34 !important;
  }
  .hero-subtitle { line-height: 1.55 !important; }
}

@media (max-width: 640px) {
  /* il titolo aveva max-width:12ch — in inglese sono 145px su una
     colonna da 358, quindi finiva su sei righe strettissime */
  html[lang="en"] .hero-title,
  html[lang="en"] .hero-section h1 {
    max-width: 100% !important;
    font-size: clamp(1.72rem, 7.6vw, 2.25rem) !important;
    line-height: 1.2 !important;
    text-wrap: balance;
  }
  html[lang="ar"] .hero-title,
  html[lang="ar"] .hero-section h1 {
    max-width: 16ch !important;
    font-size: clamp(1.85rem, 8.2vw, 2.35rem) !important;
    line-height: 1.34 !important;
  }
}

/* ============================================================
   Sezione "chi siamo" su mobile
   Erano tre paragrafi identici in fila: nessuna gerarchia,
   nessuna immagine vicina, un muro di testo.
   ============================================================ */
@media (max-width: 640px) {

  /* la foto sale accanto al testo invece di restare in fondo */
  .story-grid { display: flex !important; flex-direction: column; gap: 22px; }
  .story-card-wrapper { order: -1; margin: 0 !important; }
  .story-card-wrapper .story-img-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(212,175,55,.22);
  }

  /* primo paragrafo come apertura, gli altri piu' piccoli */
  .story-grid .section-desc {
    font-size: 1.02rem !important;
    line-height: 1.9 !important;
    color: var(--text-main) !important;
  }
  .story-grid p + p {
    font-size: .92rem !important;
    line-height: 1.85 !important;
    margin-top: 16px !important;
  }

  /* filetto dorato che separa il blocco di testo dai numeri */
  .story-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 26px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(212,175,55,.22);
  }
  .story-stats > div:last-child { grid-column: 1 / -1; }
  .story-stats .stat-num { font-size: 1.28rem !important; line-height: 1.25; }
  .story-stats .stat-label { font-size: .78rem !important; line-height: 1.5; margin-top: 4px; }
}

/* ============================================================
   Saldi — prezzo precedente barrato ed etichetta
   ============================================================ */
.product-price .price-was {
  display: inline-block;
  margin-inline-end: 9px;
  color: var(--text-muted, #a2947f);
  font-size: .78em;
  text-decoration-thickness: 1px;
  opacity: .8;
}
.sale-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 99px;
  background: linear-gradient(135deg, #f0d9a2, #cda459);
  color: #2a1c06;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.8);
  pointer-events: none;
}
html[dir="rtl"] .sale-badge { letter-spacing: normal !important; }
.product-img-wrapper { position: relative; }

/* Richiamo alla pagina Bespoke in home: la lista sta in colonna singola
   perche' vive dentro meta' della scheda, non a tutta larghezza. */
.bsp-teaser-list{ grid-template-columns:1fr; gap:8px; margin-bottom:24px; }
.bsp-teaser-list li{ padding-block:12px; font-size:.92rem; }