/* =========================================================
   GIOIELLI-ORO.COM — stylesheet
   Design tokens
   -----------------------------------------------------------
   Color:
     --ink        #171310   (quasi nero, fondo scuro caldo)
   --ink-2      #241d17   (fondo scuro secondario / card)
     --ivory      #FAF6EF   (fondo chiaro caldo)
     --gold       #B08D4F   (oro antico, accento primario)
     --gold-light #E8CE9B   (oro chiaro, hover / dettagli)
     --wine       #6E1420   (rosso rubino, accento raro / CTA speciale)
   Type:
     Display: "Playfair Display" (serif, elegante, per titoli)
     Body/UI: "Jost" (sans geometrica, per testo e interfaccia)
   Signature:
     Sigillo circolare inciso (ispirato al punzone orafo) usato come
     separatore di sezione al posto di numerazioni generiche.
   ========================================================= */

@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-latin-900-normal.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin-300-normal.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin-600-normal.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --ink:#171310;
  --ink-2:#241d17;
  --ivory:#FAF6EF;
  --ivory-2:#F1E9DA;
  --gold:#B08D4F;
  --gold-light:#E8CE9B;
  --wine:#6E1420;
  --line:rgba(176,141,79,.28);
  --shadow: 0 20px 45px rgba(23,19,16,.18);
  --radius:2px;
  --maxw:1220px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden; max-width:100%;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Jost",sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:"Playfair Display",serif;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:.01em;
}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold);
}
:focus-visible{outline:2px solid var(--wine); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Seal / signature element ---------- */
.seal{
  width:64px; height:64px; margin:0 auto 18px; position:relative;
  border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.seal::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed var(--line);
}
.seal svg{width:26px; height:26px; fill:var(--gold);}
.section-head{text-align:center; max-width:640px; margin:0 auto 52px;}
.section-head p{color:#4a4038;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ivory);
  border-top:3px solid var(--gold);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(176,141,79,.25);
  transition:transform .35s ease;
}
.site-header.hide{transform:translateY(-100%);}
.nav-toggle{display:none; flex:none; background:none; border:none; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; padding:4px 2px; z-index:60; position:relative;}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto;}
.brand img{height:52px; width:auto; flex:none;}
.brand-name{font-family:"Playfair Display",serif; font-size:19px; font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-name span{display:block; font-family:"Jost",sans-serif; font-size:10.5px; letter-spacing:.2em; font-weight:500; color:var(--gold); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
nav.main-nav{display:flex; gap:30px;}
nav.main-nav a{
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  position:relative; padding:6px 0;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .25s ease;
}
nav.main-nav a:hover::after{width:100%;}
.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--ivory);
  padding:11px 22px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border-radius:var(--radius);
  transition:background .25s ease;
  white-space:nowrap;
}
.header-cta:hover{background:var(--wine);}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:var(--ivory);
  min-height:86vh; display:flex; align-items:flex-end;
  background:var(--ink);
  overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:.82;}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,19,16,.15) 0%, rgba(23,19,16,.55) 55%, rgba(23,19,16,.94) 100%);
}
.hero-content{position:relative; z-index:2; padding:120px 24px 76px; max-width:var(--maxw); margin:0 auto; width:100%;}
.hero-content .eyebrow{color:var(--gold-light);}
.hero-content .eyebrow::before{background:var(--gold-light);}
.hero h1{
  font-size:clamp(34px,5.4vw,64px); line-height:1.06; max-width:15ch;
  color:var(--ivory); margin-bottom:22px;
}
.hero h1 em{color:var(--gold-light); font-style:italic;}
.hero p.lead{max-width:46ch; color:#E9E2D4; font-size:17px; margin-bottom:34px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{border-color:rgba(250,246,239,.55); color:var(--ivory);}
.btn-outline:hover{border-color:var(--ivory); background:rgba(250,246,239,.08);}
.btn-dark{background:var(--ink); color:var(--ivory);}
.btn-dark:hover{background:var(--wine);}

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--ink); color:var(--ivory);
  padding:20px 0;
}
.trust-row{
  display:flex; flex-wrap:wrap; gap:22px 40px; justify-content:center;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--gold-light);
}
.trust-row span{display:flex; align-items:center; gap:9px;}
.trust-row svg{width:15px; height:15px; fill:var(--gold);}

/* ---------- Section base ---------- */
section{padding:96px 0;}
.section-alt{background:var(--ivory-2);}
.section-dark{background:var(--ink); color:var(--ivory);}
.section-dark .section-head p{color:#cfc4b3;}
.section-dark h2{color:var(--ivory);}

/* ---------- Product grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.card{
  background:var(--ivory); border:1px solid var(--gold);
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--gold-light);}
.card-media{
  aspect-ratio:1/1; background:#fff; overflow:hidden; position:relative;
  border-bottom:1px solid var(--line);
}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.045);}
.card-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-tag{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.card-body h3{font-size:18px; margin-bottom:2px;}
.card-body p{font-size:13.5px; color:#544a3f; flex:1;}
.card-link{
  margin-top:6px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--ink);
  border-top:1px solid var(--line); padding-top:12px;
}
.card-link svg{width:13px; height:13px; fill:var(--gold); transition:transform .2s ease;}
.card:hover .card-link svg{transform:translateX(4px);}

.category-block + .category-block{margin-top:76px;}
.category-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:34px; border-bottom:1px solid var(--line); padding-bottom:18px;
}
.category-head h2{font-size:clamp(24px,3vw,32px); margin:0;}
.category-head .cat-desc{max-width:520px; font-size:14px; color:#544a3f; margin:8px 0 0;}
.category-head a.view-all{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--wine); white-space:nowrap;}

/* ---------- Story / about ---------- */
.story{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.story-figure{position:relative;}
.story-figure img{width:100%; border:1px solid var(--line);}
.story-figure .seal-badge{
  position:absolute; bottom:-24px; left:-24px;
  background:var(--ivory); border:1px solid var(--gold);
  border-radius:50%; width:112px; height:112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:var(--shadow);
}
.seal-badge strong{font-family:"Playfair Display",serif; font-size:22px; line-height:1;}
.seal-badge span{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:4px;}
.story-text h2{font-size:clamp(26px,3.4vw,38px);}
.story-text address{font-style:normal; margin:22px 0; padding:18px 20px; border-left:2px solid var(--gold); background:var(--ivory-2); font-size:14px;}
.story-list{list-style:none; padding:0; margin:22px 0; display:grid; gap:14px;}
.story-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px;}
.story-list svg{width:17px; height:17px; fill:var(--gold); flex:none; margin-top:3px;}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:"Playfair Display",serif; font-size:18px; color:var(--ink);
}
.faq-q .plus{font-family:"Jost",sans-serif; font-size:22px; color:var(--gold); transition:transform .25s ease; flex:none;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-a{padding:0 4px 22px; font-size:14.5px; color:#544a3f; max-width:70ch;}
.faq-item summary{list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}

/* ---------- Final CTA ---------- */
.final-cta{
  text-align:center; background:linear-gradient(180deg,var(--ink),#0f0c0a);
  color:var(--ivory);
}
.final-cta h2{font-size:clamp(28px,4vw,44px); max-width:16ch; margin:0 auto 18px;}
.final-cta p{max-width:52ch; margin:0 auto 34px; color:#cfc4b3;}
.final-actions{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{background:#0f0c0a; color:#cfc4b3; padding:64px 0 30px; font-size:13.5px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(176,141,79,.2);}
.footer-brand img{height:34px; margin-bottom:14px;}
.footer-brand p{color:#a89c8a; font-size:13px; max-width:32ch;}
.footer-col h4{font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:16px; font-weight:600;}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:24px; font-size:12px; color:#8a7e6d;
}
.footer-bottom .p-iva{letter-spacing:.03em;}
.ai-disclosure{
  max-width:var(--maxw); margin:0 auto; padding:0 24px 22px;
  font-size:11.5px; color:#7d7364; line-height:1.7; text-align:center;
}

/* ---------- Floating contact buttons ---------- */
.float-actions{
  position:fixed; right:20px; bottom:88px; z-index:60;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.float-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(23,19,16,.35); transition:transform .2s ease;
  position:relative;
}
.float-btn:hover{transform:scale(1.07);}
.float-btn svg{width:26px; height:26px;}
.float-call{background:var(--ink); color:var(--gold-light);}
.float-whatsapp{background:#25D366; color:#fff;}
.float-btn .float-label{
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--ivory); padding:7px 12px; font-size:12px;
  white-space:nowrap; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.float-btn:hover .float-label{opacity:1;}

/* ---------- Cookie-free banner ---------- */
.privacy-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:70; background:var(--ink); color:#e9e2d4;
  border:1px solid var(--line); border-radius:6px;
  padding:12px 16px; max-width:min(92vw,560px);
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
  font-size:12px; line-height:1.5;
  transition:opacity .3s ease, transform .3s ease;
}
.privacy-banner.hidden{opacity:0; pointer-events:none; transform:translate(-50%,20px);}
.privacy-banner button{
  flex:none; background:var(--gold); color:var(--ink); border:none; padding:8px 16px;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:3px; cursor:pointer;
}
.privacy-banner button:hover{background:var(--gold-light);}

/* ---------- Klarna strip ---------- */
.klarna-section{padding:40px 0;}
.klarna-strip{
  display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;
  background:var(--ivory-2); border:1px solid var(--line); padding:16px 22px; margin-top:20px; font-size:13px;
}
.klarna-strip strong{color:var(--wine);}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .header-row{padding:10px 16px; gap:10px;}
  .brand img{height:46px;}
  nav.main-nav{
    position:fixed; top:0; right:0; bottom:0; left:0;
    background:var(--ivory);
    flex-direction:column; justify-content:flex-start;
    padding:88px 28px 40px; gap:4px;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    border-left:1px solid var(--line);
    overflow-y:auto; z-index:40;
    visibility:hidden;
  }
  nav.main-nav.open{transform:translateX(0); visibility:visible;}
  nav.main-nav a{padding:16px 2px; border-bottom:1px solid var(--line); font-size:16px;}
  nav.main-nav a::after{display:none;}
  .nav-toggle{display:block;}
  .header-cta{display:none;}
  .story{grid-template-columns:1fr;}
  .story-figure{margin-bottom:40px;}
  body.nav-open{overflow:hidden;}
}
@media (max-width:420px){
  .brand img{height:40px;}
}
@media (max-width:640px){
  section{padding:64px 0;}
  .grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .card-body{padding:14px 14px 16px;}
  .hero{min-height:78vh;}
  .hero-content{padding:96px 20px 56px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .category-head{flex-direction:column; align-items:flex-start;}
  .float-actions{right:14px; bottom:78px;}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr 1fr;}
}