/* ============================================================
   OK SWEETENERS — Professional (B2B)
   Estilo editorial/tecnico istituzionale.
   Eredita TUTTI gli stili comuni da ok-sweeteners-retail.css
   (hero, AID, intro, line/Gold/Green, soon, faq, modal, prod card,
   tabella nutrizionali). Qui SOLO le sezioni nuove B2B.
   ============================================================ */

/* Badge "Professional · B2B" sotto al titolo hero — segno distintivo */
.oksw-hero__badge-pro{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:8px;
  padding:8px 18px;border-radius:999px;
  background:rgba(155,203,156,.12);
  border:1px solid rgba(155,203,156,.32);
  color:var(--color-sage);
  font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;
}
.oksw-hero__badge-pro::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--color-sage);
}

/* Nota micronizzata sotto i prodotti (B2B detail) */
.oksw-line__micronized{
  margin-top:clamp(40px,4vw,56px);
  font-family:var(--font-sans);font-style:italic;font-weight:300;
  font-size:13px;color:rgba(255,253,250,.55);
  text-align:center;letter-spacing:.02em;
}

/* ============================================================
   4. TREND DI MERCATO — riusa .chi-inn (scrollytelling Chi Siamo)
   Background paper editoriale per stacco con sezione precedente.
   ============================================================ */

/* Espone le CSS variables --chi-* (definite originariamente in body.chi)
   anche fuori dal contesto Chi Siamo, così il markup .chi-inn funziona. */
.okswp-trend-inn{
  --chi-cream:     #FFFDFA;
  --chi-cream-w:   #F6F1E7;
  --chi-cream-s:   #FAF5EB;
  --chi-paper:     #F0EADF;
  --chi-sage:      #9BCB9C;
  --chi-sage-3:    #C3DFC4;
  --chi-sage-7:    #7FAA80;
  --chi-forest:    #41594C;
  --chi-forest-9:  #2B3D35;
  --chi-forest-7:  #38493F;
  --chi-ink:       #1C1C1C;
  --chi-ink-s:     #2B2B2B;
  --chi-gold:      #B8925A;
  --chi-line:      rgba(43,61,53,.14);
  --chi-line-soft: rgba(43,61,53,.08);

  /* Sfondo bianco (richiesta cliente) */
  background:var(--oksw-bg, #FFFFFF);
}
/* Niente fascia verde dietro le immagini (parallax rimosso + sfondo neutro) */
.okswp-trend-inn .chi-inn__item-media{ background:transparent; }
/* Trend di mercato: tutti i testi in NERO, nessuna differenziazione di colore. */
.okswp-trend-inn .chi-inn__title,
.okswp-trend-inn .chi-inn__title em,
.okswp-trend-inn .chi-inn__pinned-title,
.okswp-trend-inn .chi-inn__pinned-title em,
.okswp-trend-inn .chi-inn__item-title,
.okswp-trend-inn .chi-inn__item-title em,
.okswp-trend-inn .chi-inn__lede,
.okswp-trend-inn .chi-inn__pinned-text,
.okswp-trend-inn .chi-inn__item-text,
.okswp-trend-inn .chi-inn__head .eyebrow,
.okswp-trend-inn .chi-inn__kicker,
.okswp-trend-inn .chi-inn__item-tag,
.okswp-trend-inn .chi-inn__nav-num,
.okswp-trend-inn .chi-inn__nav-lbl,
.okswp-trend-inn .chi-inn__support h5,
.okswp-trend-inn .chi-inn__support p{ color:var(--color-ink, #1C1C1C); }

/* ============================================================
   3b. MOOD (divisorio editoriale — stile "IL FUTURO DEL DOLCE")
   ============================================================ */
.okswp-mood{
  position:relative;
  min-height:clamp(340px,48vh,520px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(72px,9vw,130px) 0;
  overflow:hidden;isolation:isolate;
  background:var(--oksw-bg, var(--oksw-black, #1e1c1c));
  color:var(--color-cream);
}
.okswp-mood__media{position:absolute;inset:0;z-index:0}
.okswp-mood__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform 18s linear;
}
.okswp-mood:hover .okswp-mood__media img{transform:scale(1.06)}
.okswp-mood__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.72) 100%);
}
.okswp-mood:not(.okswp-mood--has-media) .okswp-mood__overlay{background:none}
.okswp-mood__inner{position:relative;z-index:2;text-align:center;max-width:var(--rail);padding:0 24px}
.okswp-mood__eyebrow{
  display:inline-block;margin:0 auto 24px;
  padding:9px 20px;border-radius:999px;
  background:rgba(255,253,250,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,253,250,.22);
  font-family:var(--font-sans);font-weight:500;font-size:11.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--oksw-title, var(--color-cream));
}
.okswp-mood__title{
  font-family:var(--font-display);font-weight:var(--title-weight);
  font-size:clamp(34px,4.6vw,68px);line-height:1.05;letter-spacing:-.018em;
  color:var(--oksw-title, var(--color-cream));text-wrap:balance;margin:0;
  text-shadow:0 8px 32px rgba(0,0,0,.45);
}
.okswp-mood__title em{font-style:italic;color:var(--oksw-em, var(--color-cream))}
.oksw-professional .okswp-mood__title em{color:var(--oksw-em, #FFFFFF)}

/* ============================================================
   7. SEZIONE DIVISORIA EDITORIALE (immagine full-bleed + headline)
   ============================================================ */
.okswp-divisor{
  position:relative;
  min-height:clamp(380px,55vh,540px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;
  background:var(--oksw-bg, var(--oksw-black, #1e1c1c));
  color:var(--color-cream);
}
.okswp-divisor__media{
  position:absolute;inset:0;z-index:0;
}
.okswp-divisor__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
  transition:transform 18s linear;
}
.okswp-divisor:hover .okswp-divisor__media img{transform:scale(1.06)}
.okswp-divisor__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,13,12,.35) 0%, rgba(15,13,12,.7) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(15,13,12,.25), rgba(15,13,12,.55));
}
.okswp-divisor__inner{
  position:relative;z-index:2;
  text-align:center;max-width:var(--rail);
  padding:0 24px;
}
.okswp-divisor__eyebrow{
  display:inline-block;margin-bottom:24px;
  padding:8px 18px;border-radius:999px;
  background:var(--oksw-chip-bg, rgba(255,253,250,.12));
  border:1px solid rgba(255,253,250,.22);
  font-family:var(--font-sans);font-weight:500;font-size:11.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--oksw-chip-text, var(--color-cream));
  backdrop-filter:blur(8px);
}
.okswp-divisor__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(36px,5vw,76px);line-height:1.04;letter-spacing:-.02em;
  color:var(--oksw-title, var(--color-cream));text-wrap:balance;
  text-shadow:0 8px 32px rgba(0,0,0,.4);
}
.okswp-divisor__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--color-cream));
}

/* ============================================================
   8. OPPORTUNITÀ + STAT EDITORIAL CARD
   ============================================================ */
.okswp-opp{
  background:var(--oksw-bg, var(--color-cream));
  padding:clamp(80px,10vw,140px) 0;
}
.okswp-opp__inner{
  display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,88px);
  align-items:center;
}
@media (min-width:900px){
  .okswp-opp__inner{grid-template-columns:1.1fr 0.9fr;}
}
.okswp-opp__copy .eyebrow{
  display:inline-block;margin-bottom:14px;color:var(--color-ink, #1C1C1C);
}
.okswp-opp__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(34px,4.2vw,62px);line-height:1.08;letter-spacing:-.02em;
  color:var(--oksw-title, var(--color-ink, #1C1C1C));margin-bottom:28px;
  text-wrap:balance;
}
.okswp-opp__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--color-ink, #1C1C1C));
}
.okswp-opp__text{
  font-family:var(--font-sans);font-weight:var(--body-weight);
  font-size:var(--body-size);line-height:var(--body-lh);
  color:var(--oksw-text, var(--color-ink-soft));
}
.okswp-opp__text p{margin-bottom:18px}
.okswp-opp__text strong{font-weight:600;color:var(--color-ink, #1C1C1C)}

/* Stat editoriale — card "monograph" forest dark */
.okswp-opp__stat-card{
  position:relative;
  background:var(--oksw-card-bg, #171515);
  color:var(--oksw-card-text, var(--color-cream));
  border-radius:24px;
  padding:clamp(36px,4vw,56px);
  overflow:hidden;isolation:isolate;
}
/* Glow verde/ouro rimossi: sfondo uniforme. */
.okswp-opp__stat-card::before{ display:none; }
.okswp-opp__stat-tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--oksw-chip-bg, rgba(255,253,250,.12));color:var(--oksw-chip-text, var(--color-cream));
  font-family:var(--font-sans);font-weight:600;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:24px;
  border:1px solid rgba(255,253,250,.3);
}
.okswp-opp__stat-value{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(56px,7vw,108px);line-height:.98;letter-spacing:-.02em;
  color:var(--color-cream);margin-bottom:18px;
}
.okswp-opp__stat-label{
  font-family:var(--font-sans);font-weight:500;
  font-size:15px;line-height:1.5;color:var(--color-cream);
  margin-bottom:8px;max-width:34ch;
}
.okswp-opp__stat-sub{
  font-family:var(--font-sans);font-weight:300;
  font-size:13px;line-height:1.5;
  color:rgba(255,253,250,.65);letter-spacing:.02em;
}
.okswp-opp__stat-chart{
  margin-top:28px;padding-top:28px;
  border-top:1px solid rgba(255,253,250,.12);
}
.okswp-opp__stat-chart img{
  width:100%;height:auto;display:block;
  filter:brightness(1.08) contrast(1.05);
  opacity:.95;
}

/* ============================================================
   11. SCARICA DOCUMENTI (cards "monograph" PDF download)
   ============================================================ */
.okswp-docs{
  background:var(--oksw-bg, #F1F1F0);
  padding:clamp(80px,10vw,140px) 0;
}
.okswp-docs__head{
  max-width:var(--rail);margin:0 auto clamp(48px,5vw,72px);
  text-align:center;
}
.okswp-docs__head .eyebrow{
  display:inline-block;margin-bottom:14px;color:var(--color-ink, #1C1C1C);
}
.okswp-docs__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(34px,4vw,58px);line-height:1.1;letter-spacing:-.018em;
  color:var(--oksw-title, var(--color-ink, #1C1C1C));text-wrap:balance;
}
.okswp-docs__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--color-ink, #1C1C1C));
}
.okswp-docs__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);
}
@media (min-width:700px){
  .okswp-docs__grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1100px){
  .okswp-docs__grid{grid-template-columns:repeat(3,1fr);}
}
.okswp-doc{
  position:relative;
  background:var(--oksw-card-bg, var(--color-cream));
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--color-line-soft);
  display:flex;flex-direction:column;
  transition:transform .5s var(--easing-out), box-shadow .5s, border-color .5s;
}
.okswp-doc:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 56px rgba(43,61,53,.12);
  border-color:var(--color-sage);
}
.okswp-doc__cover{
  position:relative;
  aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(135deg, var(--color-paper), var(--color-cream-warm));
  display:flex;align-items:center;justify-content:center;
}
.okswp-doc__cover img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s var(--easing-out);
}
.okswp-doc:hover .okswp-doc__cover img{transform:scale(1.03)}
.okswp-doc__cover-placeholder{
  color:var(--color-forest);
  opacity:.4;
}
.okswp-doc__badge{
  position:absolute;top:16px;right:16px;z-index:2;
  padding:6px 12px;border-radius:6px;
  background:var(--color-forest-900);color:var(--color-cream);
  font-family:var(--font-sans);font-weight:700;font-size:10px;letter-spacing:.18em;
}
.okswp-doc__badge--pdf{
  background:var(--color-forest);
}
.okswp-doc--soon .okswp-doc__badge{
  background:rgba(43,61,53,.65);color:var(--color-cream-warm);
}
.okswp-doc--soon .okswp-doc__cover{filter:saturate(.5)}
.okswp-doc__body{
  padding:clamp(24px,2.5vw,32px);
  display:flex;flex-direction:column;gap:10px;
  flex:1;
}
.okswp-doc__label{
  font-family:var(--font-sans);font-weight:500;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--color-ink, #1C1C1C);margin-bottom:6px;
}
.okswp-doc__title{
  font-family:var(--font-sans);font-weight:700;
  font-size:20px;line-height:1.25;
  color:var(--color-ink, #1C1C1C);
}
.okswp-doc__desc{
  font-family:var(--font-sans);font-weight:var(--body-sm-weight);
  font-size:var(--body-sm-size);line-height:var(--body-sm-lh);
  color:var(--color-ink-soft);
}
.okswp-doc__cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  background:var(--oksw-btn-bg, var(--color-forest));color:var(--oksw-btn-text, var(--color-cream));
  text-decoration:none;
  font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.04em;
  transition:background .3s, transform .3s var(--easing-out);
}
.okswp-doc__cta:hover{
  background:var(--color-forest-900);
  transform:translateY(-2px);
}
.okswp-doc__cta--soon{
  background:transparent;color:var(--color-forest-500);
  border:1px dashed var(--color-forest-500);
  cursor:default;
  font-style:italic;font-weight:500;
}
.okswp-doc__cta--soon:hover{
  background:transparent;transform:none;
}

/* ============================================================
   12. CTA TECNICA FINALE (forest dark con CTA verde sage)
   ============================================================ */
.okswp-cta{
  background:var(--oksw-bg, var(--color-forest-900));
  color:var(--color-cream);
  padding:clamp(80px,10vw,140px) 0;
  position:relative;overflow:hidden;isolation:isolate;
}
.okswp-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:none;
}
/* Immagine di sfondo opzionale (admin) + overlay scuro */
.okswp-cta__media{position:absolute;inset:0;z-index:-2}
.okswp-cta__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.okswp-cta__overlay{position:absolute;inset:0;z-index:-1;pointer-events:none}
.okswp-cta__inner{
  max-width:min(1040px, 92vw);margin:0 auto;text-align:center;
}
.okswp-cta__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(36px,4.6vw,68px);line-height:1.1;letter-spacing:-.018em;
  color:var(--oksw-title, var(--color-cream));margin-bottom:24px;
  text-wrap:balance;
}
.okswp-cta__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--color-cream));
}
.okswp-cta__text{
  font-family:var(--font-sans);font-style:italic;font-weight:var(--lede-weight);
  font-size:var(--lede-size);line-height:var(--lede-lh);
  color:var(--oksw-text, rgba(255,253,250,.82));
  max-width:var(--measure-lede);margin:0 auto 40px;
}
.okswp-cta__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
}
/* Bottone CTA: default neutro bianco (override via admin → Colori → Bottoni). */
.okswp-cta .btn--sage{
  background:var(--oksw-btn-bg, #FFFFFF);color:var(--oksw-btn-text, var(--color-ink, #1C1C1C));
  border:1px solid var(--oksw-btn-bg, #FFFFFF);
}
.okswp-cta .btn--sage:hover{
  background:var(--oksw-btn-bg, rgba(255,255,255,.88));border-color:var(--oksw-btn-bg, rgba(255,255,255,.88));
  color:var(--oksw-btn-text, var(--color-ink, #1C1C1C));
  transform:translateY(-2px);
}
.okswp-cta .btn--ghost-light{
  background:transparent;color:var(--color-cream);
  border:1px solid rgba(255,253,250,.32);
}
.okswp-cta .btn--ghost-light:hover{
  background:rgba(255,253,250,.08);border-color:rgba(255,253,250,.6);
  color:var(--color-cream);
}

/* Mobile responsive polish */
@media (max-width:700px){
  .okswp-divisor{min-height:340px}
  .okswp-divisor__title{font-size:clamp(28px,8vw,44px)}
  .okswp-opp__stat-value{font-size:clamp(48px,12vw,72px)}
  .okswp-cta__actions{flex-direction:column;align-items:stretch}
  .okswp-cta__actions .btn{justify-content:center}
}

/* ============================================================
   Lead magnet gate — modale con Fluent Form per il download
   ============================================================ */
.okswp-gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.okswp-gate.is-open{ opacity:1; visibility:visible; }
.okswp-gate__overlay{ position:absolute; inset:0; background:rgba(8,7,7,.72); backdrop-filter:blur(6px); }
.okswp-gate__panel{
  position:relative; z-index:2;
  width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  background:var(--oksw-black, #1e1c1c); color:var(--oksw-cream, #FFFDFA);
  border:1px solid rgba(255,253,250,.12); border-radius:22px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8);
  transform:translateY(14px) scale(.98); transition:transform .4s var(--easing-out, cubic-bezier(.22,.61,.36,1));
}
.okswp-gate.is-open .okswp-gate__panel{ transform:none; }
.okswp-gate__close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,253,250,.06); border:1px solid rgba(255,253,250,.16);
  color:var(--oksw-cream, #FFFDFA); transition:background .25s;
}
.okswp-gate__close:hover{ background:rgba(255,253,250,.14); }
.okswp-gate__eyebrow{
  font-family:var(--font-sans); font-weight:500; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,253,250,.62); margin:0 0 12px;
}
.okswp-gate__title{
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(22px,2.6vw,30px); line-height:1.15; margin:0 0 10px; color:#fff;
}
.okswp-gate__title em{ font-style:normal; color:var(--oksw-cream, #FFFDFA); }
.okswp-gate__intro{
  font-family:var(--font-sans); font-weight:300;
  font-size:14.5px; line-height:1.6; color:rgba(255,253,250,.78); margin:0 0 22px;
}

/* Theming dei campi Fluent Forms dentro al modale (dark) */
.okswp-gate__form .ff-el-input--label label,
.okswp-gate__form .ff_t_container label{ color:rgba(255,253,250,.86); font-family:var(--font-sans); font-weight:500; font-size:13.5px; }
.okswp-gate__form input[type="text"],
.okswp-gate__form input[type="email"],
.okswp-gate__form input[type="tel"],
.okswp-gate__form input[type="number"],
.okswp-gate__form textarea,
.okswp-gate__form select{
  background:rgba(255,253,250,.06) !important;
  border:1px solid rgba(255,253,250,.18) !important;
  color:var(--oksw-cream, #FFFDFA) !important;
  border-radius:12px !important;
}
.okswp-gate__form input::placeholder,
.okswp-gate__form textarea::placeholder{ color:rgba(255,253,250,.45) !important; }
.okswp-gate__form input:focus,
.okswp-gate__form textarea:focus,
.okswp-gate__form select:focus{ border-color:rgba(255,253,250,.55) !important; box-shadow:none !important; }
.okswp-gate__form .ff-el-group{ margin-bottom:16px; }
.okswp-gate__form a{ color:var(--oksw-cream, #FFFDFA); text-decoration:underline; }
.okswp-gate__form .ff-btn-submit,
.okswp-gate__form button[type="submit"]{
  background:var(--oksw-cream, #FFFDFA) !important; color:#1e1c1c !important;
  border:none !important; border-radius:999px !important;
  font-weight:600 !important; padding:13px 26px !important; cursor:pointer;
}

/* Stato "download pronto" */
.okswp-gate__done{ text-align:center; padding:8px 0; }
.okswp-gate__done-msg{
  font-family:var(--font-sans); font-weight:300; font-size:16px;
  color:rgba(255,253,250,.9); margin:0 0 20px;
}
.okswp-gate__done .okswp-doc__cta{ display:inline-flex; }
.okswp-gate__done-hint{ font-family:var(--font-sans); font-weight:300; font-size:12.5px; color:rgba(255,253,250,.5); margin:14px 0 0; }

body.okswp-gate-open{ overflow:hidden; }