@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Stardos+Stencil:wght@400;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   DOMIA · base.css
   Reset, variabili, tipografia, animazioni, bottoni: serve a ogni pagina.
   ═══════════════════════════════════════════════════════════ */


/* ── COOKIE BANNER ────────────────────────────────────── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9997;
  transform:translateY(120%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  padding:0 16px 16px;pointer-events:none}

.cookie-banner.show{transform:translateY(0);pointer-events:auto}

.cookie-banner-inner{max-width:1100px;margin:0 auto;background:#271205;color:#FAFAF8;
  border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);
  padding:18px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.cookie-banner-text{font-size:13px;line-height:1.6;color:rgba(250,250,248,.82);flex:1;min-width:240px}

.cookie-banner-text a{color:#D9B98A;text-decoration:underline}

.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0}

.cookie-btn{font-family:var(--sans);font-size:13px;font-weight:600;padding:11px 22px;
  border-radius:100px;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}

.cookie-btn-ghost{background:transparent;color:rgba(250,250,248,.85);border-color:rgba(250,250,248,.3)}

.cookie-btn-ghost:hover{border-color:rgba(250,250,248,.6);color:#fff}

.cookie-btn-primary{background:#B08D57;color:#fff}

.cookie-btn-primary:hover{background:#c29a5f}

@media(max-width:560px){
  .cookie-banner{padding:0 10px 10px}
  .cookie-banner-inner{padding:16px;gap:12px}
  .cookie-banner-actions{width:100%}
  .cookie-btn{flex:1}
}

/* ── RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;overflow-x:clip}

/* overflow-x:clip e non hidden: `hidden` renderebbe il body un contenitore di
   scroll e disattiverebbe position:sticky per tutto quello che sta dentro
   (indice dei capitoli, barra filtri del catalogo). `clip` taglia l'eccedenza
   orizzontale senza creare lo scroller. Il fallback resta html{overflow-x:clip}. */
body{background:var(--bg);color:var(--cream);font-family:'Plus Jakarta Sans','Segoe UI Symbol','Apple Color Emoji',sans-serif;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}

::-webkit-scrollbar{width:3px}

::-webkit-scrollbar-thumb{background:#A8A8A5;border-radius:2px}

img{display:block;max-width:100%}

button{font-family:inherit;cursor:pointer}

a{text-decoration:none;color:inherit}

/* Anti-zoom iOS: tutti gli input devono avere font-size >= 16px per evitare lo zoom automatico al focus */
input,select,textarea{font-size:16px}

/* ── CSS VARS ─────────────────────────────────────────── */
/* Palette Domia: Bianco puro + Marrone caldo + Ottone */
:root{
  --cream:#271205;         /* marrone Domia — testo principale */
  --ink:#271205;           /* alias */
  --bg:#ffffff;            /* bianco puro — sfondo */
  --bg2:#f8f4ef;           /* bianco caldo — sfondo sezioni alternate */
  --bg3:#f0ebe3;           /* beige — sfondo terziario */
  --line:rgba(39,18,5,.1); /* bordi tenui */
  --muted:rgba(39,18,5,.62);      /* testo secondario */
  --muted-light:rgba(39,18,5,.4); /* dettagli */
  --amber:#B08D57;         /* ottone — CTA e accenti */
  --amber-dark:#8A6D3F;    /* ottone scuro — hover */
  --green:#3d7a38;
  --blue:#5878c8;
  --serif:'Plus Jakarta Sans',sans-serif;
  --sans:'Plus Jakarta Sans',sans-serif;
  --display:'Playfair Display',Georgia,serif;
}

/* ── TYPOGRAPHY ───────────────────────────────────────── */
.jak{font-family:var(--sans)}

h1,h2,h3{font-family:var(--serif);font-weight:700}

em{font-style:normal;color:var(--amber);font-weight:600}

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

@keyframes spin{to{transform:rotate(360deg)}}

@keyframes floatUp{
  0%{opacity:0;transform:translateY(30px) rotate(-4deg) scale(.85)}
  20%{opacity:.18}
  60%{opacity:.09;transform:translateY(-90px) rotate(3deg) scale(1.04)}
  100%{opacity:0;transform:translateY(-170px)}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

@keyframes overlayIn{from{opacity:0}to{opacity:1}}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Float sulle card prodotto */
@keyframes cardFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  40%{transform:translateY(-10px) rotate(.8deg)}
  70%{transform:translateY(5px) rotate(-.5deg)}
}

/* Scroll reveal */
@keyframes revealIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}

.fade-up{animation:fadeUp .7s ease both}

/* ── SCROLL REVEAL ────────────────────────────────────── */
/* Velocità standard (tutti gli elementi tranne le card prodotto) */
.reveal-ready{opacity:0;transform:translateY(36px) scale(.99);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}

.reveal-ready.is-revealed{opacity:1;transform:translateY(0) scale(1)}

@media(prefers-reduced-motion:reduce){
  .reveal-ready{opacity:1!important;transform:none!important;transition:none}
}

.fade-up-d1{animation:fadeUp .7s .1s ease both}

.fade-up-d2{animation:fadeUp .7s .2s ease both}

.fade-up-d3{animation:fadeUp .7s .3s ease both}

.fade-up-d4{animation:fadeUp .7s .4s ease both}

/* ── PAGES ────────────────────────────────────────────── */
.page{display:none}

.page.active{display:block}

/* ── BUTTONS ──────────────────────────────────────────── */
.btn{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;border:none;padding:16px 34px;border-radius:100px;cursor:pointer;transition:all .28s}

.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 28px rgba(28,28,28,.15)}

.btn-amber{background:var(--amber);color:#271205;box-shadow:0 2px 8px rgba(176,141,87,.35)}

.btn-ghost{background:rgba(28,28,28,.06);border:1px solid rgba(28,28,28,.18);color:var(--cream)}

.btn-ghost:hover{background:rgba(28,28,28,.12)}

.btn-wide{width:100%;border-radius:8px;padding:18px;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:12px}

.btn-dark{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}

/* ── SECTION ──────────────────────────────────────────── */
.section{padding:72px 56px;background:#ffffff}

.eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#6E6E6B;margin-bottom:10px}

.section-title{font-size:clamp(26px,3.5vw,38px);font-weight:400;margin-bottom:48px}

.section-title em{font-weight:800}

/* Titolo prodotto */
.eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(39,18,5,.45);margin-bottom:10px;display:block}

/* Griglia prodotti */
/* Contenitore catalogo (pagina prodotti + home): padding + larghezza max + centrato */
#catalogContent,#prodGrid{padding:40px 48px 72px;max-width:1480px;margin:0 auto;
  /* Su PC: griglia 4 colonne con tutti i blocchi categoria appiattiti */
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}

@keyframes catSkelShimmer{100%{transform:translateX(100%)}}

/* Info tooltip "i" */
.info-tip{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;
  background:rgba(39,18,5,.13);color:var(--muted);
  font-size:8px;font-weight:700;font-style:normal;font-family:var(--sans);
  cursor:default;position:relative;vertical-align:middle;margin-left:3px;
  line-height:1;text-transform:none;letter-spacing:0;
}

.info-tip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#271205;color:#fff;
  font-size:10px;font-weight:500;letter-spacing:.03em;
  padding:5px 10px;border-radius:4px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s;
  font-family:var(--sans);
}

.info-tip:hover::after{opacity:1}

/* Mobile */
@media(max-width:640px){
  .catalog-hero{padding:32px 20px 28px}
  .catalog-filters{padding:12px 20px;top:64px}
  .engrave-banner{padding:14px 20px;flex-direction:column;align-items:flex-start;gap:10px}
  .cat-section{padding:32px 20px 28px}
  /* ── Griglia prodotti mobile: 2 colonne verticali ───────────────────────────
     Layout pulito stile e-commerce moderno (niente carosello orizzontale).
     I .cat-block e .catalog-grid restano display:contents → titolo categoria e
     card finiscono nella stessa griglia 2 colonne; il titolo occupa l'intera
     riga come intestazione di sezione. */
  #catalogContent,#prodGrid{
    padding:18px 14px 48px;
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:24px 12px;align-content:start;
  }
  .cat-block .catalog-card{width:auto}
  .catalog-card-body{padding:10px 11px 14px}
  .catalog-card-name{font-size:13px}
  .catalog-card-price{font-size:13px}
  .card-hover-cta{display:none}
  /* Titolo categoria = intestazione di sezione a tutta larghezza */
  .mobile-cat-title{
    display:block;grid-column:1 / -1;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#271205;margin:8px 0 0;padding:0 4px 8px;
    border-bottom:1px solid rgba(39,18,5,.12);
  }
  /* Primo titolo senza margine extra in cima */
  .mobile-cat-title:first-child{margin-top:0}
}

input,select{background:var(--bg2);border:1px solid #D4D4D0;border-radius:6px;
  color:var(--cream);font-family:var(--sans);font-size:14px;padding:14px 18px;
  width:100%;outline:none;transition:border-color .2s}

input:focus,select:focus{border-color:var(--amber)}

input::placeholder{color:#A8A8A5}

.spinner{width:16px;height:16px;border:2px solid #D4D4D0;border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}

@keyframes cbScroll{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* ── STICKY CTA ───────────────────────────────────────── */
.sticky-qty-ctrl{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}

/* ── COOKIE BANNER ────────────────────────────────────── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:18px 40px;background:#1C1C1C;color:#F4F4F2;
  box-shadow:0 -4px 32px rgba(0,0,0,.2)}

.cookie-text{font-family:var(--sans);font-size:13px;color:rgba(245,241,234,.85);line-height:1.6;max-width:640px}

.cookie-link{color:var(--amber);text-decoration:underline;cursor:pointer}

.cookie-actions{display:flex;gap:10px;flex-shrink:0}

.cookie-btn-secondary{background:transparent;border:1px solid rgba(245,241,234,.3);color:rgba(245,241,234,.7);
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;padding:9px 18px;border-radius:6px;cursor:pointer;
  transition:border-color .2s}

.cookie-btn-secondary:hover{border-color:rgba(245,241,234,.6)}

.cookie-btn-primary{background:var(--amber);border:none;color:#F4F4F2;
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;padding:9px 22px;border-radius:6px;cursor:pointer;
  transition:opacity .2s}

.cookie-btn-primary:hover{opacity:.88}

.btn-wa-inline{
  font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--amber);text-decoration:none;letter-spacing:.04em;
  border-bottom:1px solid rgba(212,169,104,.4);
  padding-bottom:2px;transition:color .2s,border-color .2s;
}

.btn-wa-inline:hover{color:#271205;border-color:#271205;}

.catalog-page,.cm-page,.about-page,.ct-page{flex:1;display:flex;flex-direction:column}

/* ── RESPONSIVE ───────────────────────────────────────── */
/* Catalog tablet: 3 colonne (tra 641 e 1100px) */
@media(min-width:641px) and (max-width:1100px){
  #catalogContent,#prodGrid{grid-template-columns:repeat(3,1fr);gap:32px 20px;padding:32px 32px 56px}
}

@media(max-width:900px){
  .cookie-banner{padding:16px 24px}
  .section{padding:56px 32px}
}

/* sticky CTA visibile solo su mobile */
@media(min-width:641px){
  .sticky-cta{display:none !important}
}

@media(max-width:640px){
  /* Layout */
  .section{padding:48px 20px}
  /* Cookie mobile */
  .cookie-banner{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 20px}
  .cookie-actions{width:100%;justify-content:flex-end}
  /* Section title mobile */
  .section-title{font-size:clamp(22px,7vw,32px);margin-bottom:32px}
}

/* ════════════════════════════════════════════════════════════════════════
   RIFINITURA ELEGANTE — pass globale (sottile e reversibile)
   Dettagli "sentiti, non visti": tipografia, micro-eleganze, coerenza.
   Vale su tutte le pagine; l'effetto si nota di più su home e prodotti.
   ════════════════════════════════════════════════════════════════════════ */

/* Testo più nitido e leggero — resa premium sugli schermi ad alta densità */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Selezione del testo nei colori del brand (piccolo tocco di cura) */
::selection{background:rgba(176,141,87,.20);color:#271205}

/* Focus da tastiera elegante e discreto — solo per chi naviga con TAB
   (chi usa il mouse non vede outline) → accessibilità senza sporcare l'estetica.
   Esclusi i campi form, che hanno già il loro stile di focus (bordo amber). */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;
}

/* Titoli: interruzioni di riga bilanciate → niente parole "orfane", resa editoriale */
h1,h2,h3,.catalog-hero-title,.cat-title,.section-title,
.about-hero-title,.ct-hero-title,.cm-hero-title,.catalog-card-name{text-wrap:balance}

/* Paragrafi: riempimento più armonioso dove supportato dal browser */
p{text-wrap:pretty}

/* Prezzi e cifre allineati con numeri tabellari (dettaglio da catalogo curato) */
.catalog-card-price,.price-old,.prod-price{font-variant-numeric:tabular-nums}

/* Rispetto delle preferenze di sistema: riduce il movimento se richiesto */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Con sei voci di menu (Home · Prodotti · Come nasce · Su misura · Chi siamo ·
   Contatti) la barra sta comoda solo oltre i 1040px: sotto si passa all’hamburger,
   che mostra le stesse voci nel menu mobile. */
@media(max-width:1180px){
  .nav{padding:0 24px}
  .nav-links{gap:20px}
  .nav-link{white-space:nowrap}
  .nav-brand-wrap{padding-right:14px;margin-right:4px}
}