/* =============================================================
   IG International — design system
   Token e componenti condivisi da tutte le pagine.
   Mobile-first: le regole base valgono da 320px in su,
   le media query aggiungono il layout desktop.
   ============================================================= */

/* ---------- 1. Token ---------- */
:root{
  /* colore */
  --bg:#F1EEE7;
  --surface:#FFFFFF;
  --surface-2:#F7F4EC;
  --ink:#1D1B16;
  --ink-muted:#5D5A50;
  --ink-faint:#6E695E;
  --line:#E3DFD4;
  --line-strong:#DAD5C8;
  --accent:#F2A900;
  --accent-hover:#DE9A00;
  --accent-ink:#231A00;
  --accent-soft:#F8E7B9;
  --accent-deep:#5C4400;
  --link:#8A6200;
  --link-hover:#6B4C00;
  --dark:#211E16;
  --dark-ink:#ECE9E0;
  --dark-muted:#B7B2A4;
  --dark-faint:#9C978A;

  /* elevazione — ombre calde, mai grigio puro */
  --e1:0 1px 2px rgba(30,26,16,.18), 0 1px 6px rgba(30,26,16,.07);
  --e2:0 2px 6px rgba(30,26,16,.20), 0 6px 18px rgba(30,26,16,.12);
  --e3:0 4px 12px rgba(30,26,16,.24), 0 12px 32px rgba(30,26,16,.16);

  /* spaziatura — griglia 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px;

  /* raggi */
  --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  /* layout */
  --wrap:1200px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:64px;
  --tabbar-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- 2. Reset essenziale ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px);scroll-padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  /* spazio per la tab bar mobile */
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b));
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent-soft)}

/* focus visibile e coerente ovunque */
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-ink);font-weight:700;
  padding:12px 20px;border-radius:var(--r-pill);box-shadow:var(--e2);
  transition:top .18s ease;
}
.skip-link:focus{top:var(--s4);text-decoration:none;color:var(--accent-ink)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Tipografia ---------- */
.eyebrow{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin:0;
}
h1{font-weight:800;font-size:clamp(30px,7vw,52px);line-height:1.08;letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(24px,5.5vw,38px);line-height:1.15}
h3,.h3{font-weight:800;font-size:clamp(19px,4.5vw,22px);line-height:1.25}
.lead{font-size:clamp(16px,4vw,18px);line-height:1.6;color:var(--ink-muted);max-width:56ch}
.lead a{text-decoration:underline}
.body-sm{font-size:15px;line-height:1.6;color:var(--ink-muted)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.section{padding-block:clamp(32px,7vw,56px)}
.section--tight{padding-block:clamp(24px,5vw,40px)}
.section--last{padding-bottom:clamp(40px,9vw,80px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.grid{display:grid;gap:var(--s4)}
.grid--2{grid-template-columns:1fr}
.grid--auto-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid--auto-md{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:var(--s5)}
.grid--auto-lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s5)}

/* ---------- 5. Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:12px 24px;border:1px solid transparent;
  border-radius:var(--r-pill);font-weight:700;font-size:15px;line-height:1.2;
  cursor:pointer;text-decoration:none;
  transition:background-color .16s ease,box-shadow .16s ease,transform .1s ease,color .16s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}
.btn .icon{flex:none}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--e1)}
.btn--primary:hover{background:var(--accent-hover);color:var(--accent-ink);box-shadow:var(--e2)}
.btn--dark{background:var(--accent-ink);color:#FFD867}
.btn--dark:hover{background:#3A2D00;color:#FFD867}
.btn--outline{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn--outline:hover{background:var(--surface-2);color:var(--ink)}
.btn--translucent{background:rgba(255,255,255,.55);color:var(--accent-ink)}
.btn--translucent:hover{background:rgba(255,255,255,.85);color:var(--accent-ink)}
.btn--block{width:100%}
.btn-link{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  min-height:44px;background:none;border:0;padding:0;
  color:var(--link);font-weight:700;font-size:14px;cursor:pointer;
}
.btn-link:hover{color:var(--link-hover);text-decoration:none}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;font-size:18px}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--surface);
  box-shadow:0 1px 2px rgba(30,26,16,.14),0 1px 6px rgba(30,26,16,.06);
}
.site-header__inner{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--header-h);padding-block:var(--s2);
}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none;color:inherit}
.brand img{height:38px;width:auto}
.brand__name{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:.02em;line-height:1.1}
.brand__tag{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--ink-faint);line-height:1.1;margin-top:2px}
.nav-desktop{display:none}
.header-cta{display:none}

/* ---------- 7. Tab bar mobile (thumb zone) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
  box-shadow:0 -1px 12px rgba(30,26,16,.08);
}
.tabbar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabbar-h);padding:6px 4px;
  color:var(--ink-faint);font-size:11px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;background:none;border:0;cursor:pointer;
  transition:color .16s ease;
}
.tabbar__item:hover{color:var(--ink);text-decoration:none}
.tabbar__item:active{transform:scale(.94)}
.tabbar__item .icon{font-size:22px;stroke-width:1.9}
.tabbar__item[aria-current="page"]{color:var(--accent-deep)}
.tabbar__item[aria-current="page"] .icon{stroke-width:2.4}
.tabbar__item{position:relative}
.tabbar__item[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);
}

/* Mentre si scrive in un campo la barra e il bottone tolgono spazio alla tastiera e coprono il campo stesso */
@media (max-width:899px){
  body:has(.field :focus) .tabbar,
  body:has(.field :focus) .fab{display:none}
}

/* ---------- 8. FAB WhatsApp ---------- */
.fab{
  position:fixed;right:calc(var(--s4) + env(safe-area-inset-right,0px));z-index:70;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:20px;
  background:var(--accent-ink);color:#FFD867;
  box-shadow:var(--e3);text-decoration:none;
  transition:background-color .16s ease,transform .12s ease;
}
.fab:hover{background:#3A2D00;color:#FFD867;text-decoration:none}
.fab:active{transform:scale(.93)}
.fab .icon{font-size:26px}

/* ---------- 9. Card ---------- */
.card{
  background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--e1);display:flex;flex-direction:column;gap:var(--s3);
}
.card--media{padding:0;overflow:hidden;gap:0}
.card--media .card__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.card--lift{transition:box-shadow .18s ease,transform .18s ease}
.card--lift:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.card__icon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent-deep);
}
.card__icon .icon{font-size:22px}
.card__icon--solid{background:var(--accent);color:var(--accent-ink);width:50px;height:50px;border-radius:16px}
.card__title{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;line-height:1.3}
.tag{
  display:inline-block;align-self:flex-start;background:var(--accent-soft);
  border-radius:var(--r-pill);padding:5px 12px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);
}
.pill{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 18px;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ratio-4-3{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover}

/* ---------- 10. Hero ---------- */
.hero{display:grid;gap:var(--s5);align-items:center;padding-top:clamp(24px,6vw,52px)}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);width:100%}
.hero__actions .btn{flex:1 1 100%}
.badge{
  display:inline-flex;align-items:center;gap:var(--s2);background:var(--accent-soft);
  border-radius:var(--r-pill);padding:7px 14px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--accent-deep);
}
.hero__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e2);background:var(--surface)}
.hero__media img{width:100%;height:clamp(220px,52vw,420px);object-fit:cover}

/* ---------- 11. Carosello categorie (mobile) ---------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,45vw);
  gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s2);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:none;scroll-padding-inline:var(--gutter);
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail-card{
  background:var(--surface);border-radius:var(--r-md);padding:8px;
  box-shadow:var(--e1);text-decoration:none;color:inherit;display:block;
  transition:box-shadow .18s ease,transform .18s ease;
}
.rail-card:hover{box-shadow:var(--e2);transform:translateY(-2px);text-decoration:none;color:inherit}
.rail-card img{border-radius:12px;aspect-ratio:1/1;width:100%;height:auto;object-fit:cover}
.rail-card span{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;padding:10px 6px 6px}

/* ---------- 12. Filtri prodotti ---------- */
.chips{
  display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) var(--s4);
  scrollbar-width:none;scroll-padding-inline:var(--gutter);
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;min-height:44px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  padding:10px 18px;font-weight:600;font-size:14px;color:var(--ink);
  cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease;
}
.chip:hover{border-color:#C9C2AE}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-deep);color:var(--accent-deep)}
.chip:active{transform:scale(.96)}

/* ---------- 13. Banda CTA ---------- */
.cta-band{
  background:var(--accent);border-radius:var(--r-xl);box-shadow:var(--e2);
  padding:clamp(24px,6vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5);
}
.cta-band h2{color:var(--accent-ink);margin-bottom:var(--s2)}
.cta-band p{color:var(--accent-deep);max-width:52ch}
.cta-band :focus-visible{outline-color:var(--accent-ink)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--s3);width:100%}
.cta-band__actions .btn{flex:1 1 100%}

/* ---------- 14. Contatti e form ---------- */
.contact-item{display:flex;gap:var(--s3);align-items:flex-start}
.contact-item a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.contact-item__label{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;margin-bottom:2px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink-muted)}
.field input,.field textarea{
  width:100%;border:none;border-bottom:2px solid var(--line-strong);
  background:#F4F1E9;border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:14px;font-size:16px; /* 16px: evita lo zoom automatico su iOS */
  transition:border-color .16s ease,background-color .16s ease;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent);background:#F0ECDF}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:#B3261E}
.form-note{
  background:var(--accent-soft);border-radius:var(--r-sm);padding:12px 16px;
  font-size:14px;line-height:1.5;color:var(--accent-deep);font-weight:600;
}
.form-note .icon{vertical-align:-4px;margin-right:6px}
.form-note a{color:var(--accent-deep);text-decoration:underline}
.map-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1);background:var(--surface)}
.map-frame iframe{display:block;width:100%;height:clamp(240px,50vw,340px);border:0}
.map-placeholder{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s5);min-height:clamp(200px,40vw,260px);justify-content:center;
  background:
    repeating-linear-gradient(45deg,var(--surface-2) 0 12px,var(--surface) 12px 24px);
}
.map-placeholder__actions{display:flex;flex-wrap:wrap;gap:var(--s3);width:100%}
.map-placeholder__actions .btn{flex:1 1 100%}
@media (min-width:900px){.map-placeholder__actions .btn{flex:0 0 auto}}

/* ---------- 15. Coming soon (Shop) ---------- */
.coming{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--e2);
  padding:clamp(28px,8vw,64px) clamp(20px,6vw,56px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
}
.coming__mark{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:24px;
  background:var(--accent-soft);color:var(--accent-deep);
}
.coming__mark .icon{font-size:34px}
.coming .lead{margin-inline:auto}
.coming__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;width:100%}
.coming__actions .btn{flex:1 1 100%}
.coming__meta{font-size:13px;color:var(--ink-faint)}

/* ---------- 16. Footer ---------- */
.site-footer{background:var(--dark);color:var(--dark-ink);margin-top:var(--s6)}
.site-footer .wrap{padding-block:clamp(32px,7vw,56px) var(--s5)}
.footer-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
.footer-col{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.footer-col h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dark-faint);margin-bottom:var(--s1)}
.site-footer a{color:var(--dark-ink);font-size:14px;min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.site-footer a:hover{color:var(--accent);text-decoration:none}
.site-footer p{color:var(--dark-muted);font-size:14px}
.footer-brand{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;color:var(--accent);letter-spacing:.02em}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s6);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);
  padding-right:72px; /* spazio per il bottone WhatsApp */
  font-size:13px;color:var(--dark-faint);
}

/* ---------- 17. Animazioni ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .32s ease both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{animation:none}
}

/* =============================================================
   18. Desktop — da 900px la tab bar sparisce e torna la nav in alto
   ============================================================= */
@media (min-width:900px){
  body{padding-bottom:0}
  .tabbar{display:none}
  .fab{bottom:var(--s5);right:calc(var(--s5) + env(safe-area-inset-right,0px))}
  .site-header__inner{min-height:72px}
  .brand img{height:44px}
  .brand__name{font-size:16px}
  .brand__tag{font-size:11px}
  .nav-desktop{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
  .nav-desktop a{
    padding:11px 16px;border-radius:var(--r-pill);
    color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;
    transition:background-color .16s ease;
  }
  .nav-desktop a:hover{background:#F3EEE1;color:var(--ink);text-decoration:none}
  .nav-desktop a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-deep)}
  .header-cta{display:inline-flex;margin-left:var(--s2)}
  .hero{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .hero__actions{width:auto}
  .hero__actions .btn{flex:0 0 auto}
  .grid--2{grid-template-columns:1fr 1fr}
  .cta-band__actions{width:auto}
  .cta-band__actions .btn{flex:0 0 auto}
  .coming__actions .btn{flex:0 0 auto}
  .rail{
    grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;
    margin-inline:0;padding-inline:0;
  }
  .chips{overflow:visible;flex-wrap:wrap;margin-inline:0;padding-inline:0}
  .footer-grid{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1100px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1.2fr 1.2fr}
}