*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:#c3002f;text-decoration:none}
a:hover{text-decoration:underline}
:root{
  --bg:#ffffff;--text:#111;--muted:#555;--brand:#df012d;--line:#e7e7e7;--ok:#21a67a;--accent:#ffe9ee;--accent-line:#ffd1dc;
  --radius:10px;--shadow:0 8px 22px rgba(0,0,0,.08);--container:960px;
  --header-offset:72px;
}
html{scroll-padding-top:var(--header-offset);height:100%}
@media (min-width:992px){
  :root{--header-offset:96px}
}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
main > .sticky-cta{
  margin-top:auto;
}
footer{
  flex-shrink:0;
  margin-top:0;
}
.container{width:100%;max-width:var(--container);margin:auto;padding:0 16px}

/* Ancore sotto header sticky */
#how-it-works,
#faq,
#subscribe,
#contatti,
#buyer-form{
  scroll-margin-top:var(--header-offset);
}

/* Header + Hamburger */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
  flex-shrink:0;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.brand img{width:60px;height:auto;transition:transform .2s ease}
.brand img:hover{transform:scale(1.04)}
@media (min-width:992px){.brand img{width:120px;height:auto}}
.hamburger{display:inline-flex;flex-direction:column;gap:4px;width:36px;height:28px;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
.hamburger span{display:block;width:18px;height:2px;background:#111}
nav{position:relative}
.nav-links{display:none;position:absolute;right:0;top:42px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;min-width:220px}
.nav-links a{display:block;padding:8px 10px;color:var(--text)}
.nav-links.open{display:block}
.cta-head{display:block;margin-top:6px;color:#fff!important}
@media (min-width:992px){
  .hamburger{display:none}
  .nav-links{display:flex;position:static;border:0;box-shadow:none;padding:0;gap:14px;min-width:auto}
  .nav-links a{display:inline-block;padding:0}
  .cta-head{margin-top:0;padding:0 6px!important;color:#fff!important}
}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid #ccc;background:#f6f6f6;color:#111;font-weight:700;text-align:center;transition:transform .08s ease, box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-outline{background:#fff;border-color:#111;color:#111}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}

/* Pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#25D366;border:1px solid #25D366;color:#fff;font-weight:600;font-size:13px}
.pill svg{width:14px;height:14px;fill:#fff}

/* Hero homepage (sfondo nero) — font come index.html */
.hero{background:linear-gradient(180deg,#101010 0%,#1b1b1b 100%);color:#fff}
.hero .container{padding:28px 16px}
.kicker{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:4px 10px;border-radius:999px;font-size:14px;margin-bottom:10px;font-weight:600}
.hero h1{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  font-size:28px;
  font-weight:700;
  margin:20px 0 14px;
  line-height:1.3;
}
.hero h2{font-size:28px;margin:8px 0 10px;text-align:center}
.hero p{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:#efefef;
  margin:0 0 14px;
  font-size:1em;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Sections */
section{padding:28px 0;border-top:1px solid var(--line)}
section.alt{background:#fafafa}
h2,h3{margin:0 0 14px}
h2{font-size:24px}
h3{font-size:20px}
.section-title{font-size:22px;margin:0 0 14px}
h3.section-title{font-size:22px;margin:0 0 14px}
.lead{font-size:16px;color:var(--muted)}
.grid{display:grid;gap:14px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

/* Contatti box (come homepage) */
.contatti-box{background:#f0f9ff;padding:20px;border-radius:var(--radius);margin-top:20px}
.contatti-box h4{margin:0 0 10px}
.contatti-box p{margin:5px 0}

/* FAQ: nessun override su details/summary — come homepage (font e colori di body) */

/* Steps */
.steps{counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-10px;left:-10px;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 6px 16px rgba(223,1,45,.25)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.item{display:flex;gap:10px;align-items:flex-start}
.icon{width:24px;height:24px;flex:0 0 24px;border-radius:8px;background:var(--brand);display:grid;place-items:center}
.icon svg{width:14px;height:14px;fill:#fff}

/* Form */
form{display:grid;gap:10px}
input:not([type="checkbox"]):not([type="radio"]),textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:12px;color:var(--muted)}
.form-label{display:block;margin-bottom:5px}
.invalid-feedback{display:block;color:#dc3545;font-size:0.875rem;margin-top:-5px;margin-bottom:10px}
.message-box{padding:1rem;margin-bottom:1rem;border-radius:10px;font-size:1rem}
.message-box.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}
.message-box.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* Sticky CTA */
.sticky-cta{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;justify-content:space-between;z-index:40}
.sticky-cta .btn{flex:1}
@media(min-width:992px){
  .sticky-cta{justify-content:center;gap:16px}
  .sticky-cta .btn{flex:0 0 auto;min-width:160px}
}

/* Footer */
footer{background:#0e0e0e;color:#e6e6e6;margin-top:0}
footer a{color:#fff}
.footer-top{padding:28px 0}
.sub{border-top:1px solid #1e1e1e;padding:12px 0;color:#aaa;font-size:14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

@media (min-width:992px){
  body{font-size:17px;line-height:1.7}
  .hero .container{padding:56px 24px}
  .hero h1{font-size:42px;margin:28px 0 18px;line-height:1.3}
  .hero h2{font-size:42px}
  .hero p{max-width:62ch;font-size:17px}
  #come-funziona .steps{grid-template-columns:repeat(3,1fr);gap:18px}
  #cosa-compriamo .grid-auto{grid-template-columns:repeat(4,1fr);gap:18px}
  footer .footer-top .grid{grid-template-columns:2fr 1fr 1fr}
}

#cf-page .cta-bar .btn-whatsapp{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}

.btn-whatsapp{background:#25D366;border-color:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1ebe5d;border-color:#1ebe5d}

/* ================================
   Stili pagina contenuti stock
   Scope: #cf-page
   ================================ */
#cf-page {
  --w: 860px;
  --pad: 20px;
  --radius: 12px;
  --muted: rgba(0,0,0,.08);
  --color-primary: var(--brand, #0b1320);
  --color-bg-soft: #fafafa;
}

#cf-page .page-hero {
  text-align: center;
  padding: 24px var(--pad) 0;
}
#cf-page .page-hero .breadcrumb {
  margin: 0 auto 8px;
  font-size: .95rem;
  opacity: .8;
}
#cf-page .page-hero h1 {
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem);
  line-height: 1.25;
  margin: 6px 0 8px;
}
#cf-page .page-hero .lead {
  max-width: 48ch;
  margin: 0 auto;
  font-size: 1.05rem;
  opacity: .9;
}

#cf-page .wrap.content.flow {
  max-width: var(--w);
  margin: 0 auto;
  padding: 12px var(--pad) 28px;
  text-align: left;
}
#cf-page .wrap.content.flow h2 {
  font-size: 1.25rem;
  margin: 24px 0 12px;
}
#cf-page .wrap.content.flow h3 {
  font-size: 1.05rem;
  margin: 18px 0 8px;
}
#cf-page .wrap.content.flow p {
  max-width: 70ch;
  margin: 0 0 12px;
  text-align: left;
}
#cf-page .wrap.content.flow ul {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  max-width: 70ch;
}
#cf-page .wrap.content.flow ul li {
  text-align: left;
  background: var(--color-bg-soft);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 8px 0;
}

#cf-page .note { font-size: .95rem; opacity: .9; }
#cf-page hr {
  height: 1px; border: 0;
  background: var(--muted);
  max-width: 680px; margin: 24px auto;
}
#cf-page .muted {
  opacity: .85; font-size: .95rem;
  text-align: center; margin-top: 16px;
}

#cf-page .cta-bar {
  display: flex; gap: 12px; justify-content: flex-start;
  flex-wrap: wrap; margin: 20px 0;
}
#cf-page .btn {
  padding: 12px 18px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
#cf-page .btn:hover { transform: translateY(-1px); }
#cf-page .btn-primary {
  background: var(--color-primary); color: #fff;
}
#cf-page .btn-primary:hover { filter: brightness(1.1); }
#cf-page .btn-outline {
  background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
#cf-page .btn-outline:hover {
  background: var(--color-primary); color: #fff;
}

@media (max-width: 600px) {
  #cf-page .wrap.content.flow p,
  #cf-page .wrap.content.flow ul,
  #cf-page .page-hero .lead {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.lead {
  background: transparent;
  color: #222 !important;
}

.reveal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Buyer profile form ===== */
.page-intro{padding:36px 0 12px;border-top:0}
.page-intro h1{margin:0 0 16px;font-size:28px;line-height:1.3;font-weight:700}
@media(min-width:992px){.page-intro h1{font-size:36px}}

.buyer-form{display:grid;gap:18px;max-width:820px}
.form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 8px;
  box-shadow:var(--shadow);
  margin:0;
  overflow:hidden;
}
.form-card-title{
  margin:0 0 12px;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--text);
}
.form-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media(min-width:700px){
  .form-grid{grid-template-columns:1fr 1fr}
  .field-span{grid-column:1 / -1}
}
.field{display:grid;gap:6px;margin-bottom:14px;align-content:start}
.field label{font-weight:600;font-size:0.95rem}
.field .hint{margin:0;font-size:12px;color:var(--muted)}
.buyer-form input[type="text"],
.buyer-form input[type="email"],
.buyer-form input[type="tel"],
.buyer-form input[type="url"],
.buyer-form input[type="file"],
.buyer-form select,
.buyer-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:14px;
  background:#fff;
  color:var(--text);
}
.buyer-form select[multiple]{
  padding:8px;
  min-height:120px;
}
.buyer-form textarea{min-height:120px;resize:vertical}
.note-text{margin:0 0 10px;color:var(--muted);font-size:15px;line-height:1.6}
.form-submit{padding-bottom:18px}
.check-privacy{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
  font-size:14px;
  line-height:1.45;
  color:var(--text);
  cursor:pointer;
}
.check-privacy input[type="checkbox"]{
  flex:0 0 auto;
  width:20px;
  height:20px;
  max-width:20px;
  margin:1px 0 0;
  accent-color:var(--brand);
  cursor:pointer;
}
.check-privacy span{flex:1;min-width:0}
.buyer-form .btn-primary{width:100%;max-width:360px;padding:12px 18px}
.btn-link-secondary{
  display:inline-block;
  color:var(--muted);
  font-weight:600;
  text-decoration:underline;
  font-size:15px;
}
.btn-link-secondary:hover{color:var(--text)}
input[readonly]{background:#f6f6f6;color:var(--muted)}
.field-label{display:block;font-weight:600;margin:0 0 6px}
.choice-list{display:grid;gap:8px;margin:8px 0 4px;width:100%}
.choice-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
  font-weight:500;
}
.choice-item:hover{border-color:#ccc}
.choice-item input[type="checkbox"]{
  margin:3px 0 0;
  flex:0 0 auto;
  width:18px;
  height:18px;
  max-width:18px;
  accent-color:var(--brand);
  cursor:pointer;
}
.choice-item span{
  flex:1 1 auto;
  min-width:0;
  line-height:1.4;
  white-space:normal;
  overflow-wrap:anywhere;
}

.subscribe-form{display:grid;gap:14px;margin-top:16px;padding-bottom:18px}
.subscribe-form .btn-primary{width:100%;max-width:100%}

.file-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.file-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-size:14px;
}
.file-list-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list-remove{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--brand);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  padding:0;
}
.file-list-remove:hover{text-decoration:underline}

.hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important}

/* Requests viewer */
.requests-table{width:100%;border-collapse:collapse;font-size:14px}
.requests-table th,.requests-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.requests-table th{font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.requests-actions{min-width:160px}
.requests-status-form,
.requests-delete-form{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin:0;
}
.requests-status-form select{
  width:auto;
  min-width:120px;
  max-width:100%;
  padding:6px 8px;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.requests-status-form .btn,
.requests-delete-form .btn{
  width:auto;
  padding:6px 10px;
  font-size:13px;
}
.requests-delete-form{margin-top:6px}
.requests-delete-form .btn{color:#a00;border-color:#ccc;background:#fff}
.requests-unsub-link{margin-top:6px;font-size:12px}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* Sticky Call/WhatsApp non deve coprire i pulsanti del pannello */
.page-intro + .alt .container{padding-bottom:72px}
.request-dl{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;margin:16px 0 0}
.request-dl dt{margin:0;font-weight:700;color:var(--muted);font-size:13px}
.request-dl dd{margin:0;font-size:14px}
@media(max-width:600px){
  .request-dl{grid-template-columns:1fr}
}

/* Privacy / legal document */
.legal-wrap{
  max-width:760px;
  margin:0 auto;
}
.legal-updated{
  margin:0 0 8px;
  color:var(--muted);
  font-size:15px;
}
.legal-doc{
  padding:28px 28px 32px;
  margin:0 0 24px;
}
.legal-doc h2{
  margin:28px 0 12px;
  font-size:1.2rem;
  line-height:1.35;
  color:var(--text);
}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{
  margin:20px 0 8px;
  font-size:1.05rem;
  line-height:1.35;
  color:var(--text);
}
.legal-doc p{
  margin:0 0 12px;
  color:var(--text);
  font-size:15px;
  line-height:1.65;
  max-width:none;
}
.legal-doc ul{
  margin:0 0 14px;
  padding-left:1.25rem;
  color:var(--text);
  font-size:15px;
  line-height:1.65;
}
.legal-doc li{margin:0 0 6px}
.legal-doc code{
  font-size:0.92em;
  background:#f6f6f6;
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
}
.legal-cookie-title{
  margin-top:36px !important;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:1.4rem !important;
}
@media(max-width:600px){
  .legal-doc{padding:18px 16px 22px}
}