/* ============================================================
   OK SWEETENERS — Retail (B2C)
   Page template page-ok-sweeteners-retail.php
   Replica fedele al PDF "OK SWEETENERS RETAIL".
   Tipografia: tokens NVI (Gotham di default, override .title-display).
   ============================================================ */

.oksw-retail{
  --oksw-black: #1e1c1c;
  --oksw-cream: #FFFDFA;
  --oksw-accent: #ebb800;       /* override via inline style su .oksw-line */
  --oksw-aid: #115297;
}

/* ============================================================
   1. HERO (sezione nera)
   ============================================================ */
.oksw-hero{
  position:relative;
  background:var(--oksw-bg, var(--oksw-black));
  color:var(--oksw-cream);
  padding:calc(var(--nav-h) + 80px) 0 120px;
  min-height:70vh;min-height:70dvh;
  display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
/* Glow ouro/verde rimosso: sfondo hero uniforme (--oksw-black). */
.oksw-hero__glow{ display:none; }
/* Background image/video — riempie tutta la hero */
.oksw-hero__bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.oksw-hero__bg img,
.oksw-hero__bg video{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}
/* Overlay scuro per leggibilità del testo sopra bg image/video */
.oksw-hero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
.oksw-hero__inner{
  position:relative;z-index:2;
}
/* Variante con bg media: rimuove eventuali tinte glow per non interferire */
.oksw-hero--image,
.oksw-hero--video{
  background:var(--oksw-black);
}
.oksw-hero__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(32px,4vw,56px);
}
.oksw-hero__logo{
  max-width:280px;height:auto;
}
.oksw-hero__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(48px,6.4vw,104px);line-height:1.04;letter-spacing:-.02em;
  color:var(--oksw-title, var(--oksw-cream));max-width:none;
  white-space:nowrap;  /* desktop/tablet: una riga; sotto 700px torna a capo */
}
.oksw-hero__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  background:linear-gradient(180deg, #f5d54d, var(--oksw-accent));
  -webkit-background-clip:text;background-clip:text;
  color:var(--oksw-em, transparent);
  -webkit-text-fill-color:var(--oksw-em, transparent);
}
.oksw-hero__sub{
  font-family:var(--font-sans);font-weight:var(--lede-weight);
  font-size:var(--lede-size);line-height:var(--lede-lh);
  color:var(--oksw-text, rgba(255,253,250,.86));max-width:var(--measure-lede);
}

/* ============================================================
   2. INTRO (sezione bianca)
   ============================================================ */
.oksw-intro{
  background:var(--oksw-bg, var(--color-cream));
  padding:clamp(80px,9vw,140px) 0;
}
.oksw-intro__inner{
  display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);
  align-items:center;
}
@media (min-width:900px){
  .oksw-intro__inner{grid-template-columns:1.05fr 1fr;}
}
.oksw-intro__copy{max-width:var(--measure-lede)}
.oksw-intro__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:-.02em;
  color:var(--oksw-title, var(--color-forest-900));margin-bottom:28px;
  text-wrap:balance;
}
.oksw-intro__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));
}
/* Professional: titolo intro in nero + sfondo bianco (solo questa pagina) */
.oksw-professional .oksw-intro{ background:var(--oksw-bg, #FFFFFF); }
.oksw-professional .oksw-intro__title{ color:var(--oksw-title, var(--color-ink, #1C1C1C)); }
.oksw-professional .oksw-intro__title em{ color:var(--oksw-em, var(--color-ink, #1C1C1C)); }
/* FAQ Retail + Professional: verde/oro → nero (entrambe le pagine) */
.oksw-retail .oksw-faq__title{ color:var(--oksw-title, var(--color-ink, #1C1C1C)); }
.oksw-retail .oksw-faq__title em{ color:var(--oksw-em, var(--color-ink, #1C1C1C)); }
.oksw-retail .oksw-faq__item summary{ color:var(--color-ink, #1C1C1C); }
.oksw-retail .oksw-faq__item summary:hover{ color:var(--color-ink, #1C1C1C); opacity:.65; }
.oksw-retail .oksw-faq__toggle-h,
.oksw-retail .oksw-faq__toggle-v{ background:var(--color-ink, #1C1C1C); }
.oksw-retail .oksw-faq__item[open] .oksw-faq__toggle{ background:var(--color-ink, #1C1C1C); border-color:var(--color-ink, #1C1C1C); }
.oksw-retail .oksw-faq__item[open] .oksw-faq__toggle-h,
.oksw-retail .oksw-faq__item[open] .oksw-faq__toggle-v{ background:#FFFFFF; }
.oksw-intro__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));
}
.oksw-intro__text p{margin-bottom:18px}
.oksw-intro__cta{
  margin-top:32px;
  font-family:var(--font-sans);font-style:italic;font-weight:500;
  font-size:18px;line-height:1.5;color:var(--oksw-em, var(--color-ink, #1C1C1C));
}
.oksw-intro__media img{
  width:100%;height:auto;display:block;border-radius:24px;
}

/* ============================================================
   3. BANNER AID (striscia blu)
   ============================================================ */
.oksw-aid{padding:22px 0;color:var(--color-cream)}
.oksw-aid__inner{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:24px;
}
.oksw-aid__logo{
  height:56px;width:auto;flex:none;
  background:transparent;mix-blend-mode:screen;
}
.oksw-aid__text{
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(14px,1.1vw,18px);letter-spacing:.08em;
  text-transform:uppercase;color:var(--oksw-text, var(--color-cream));
}

/* ============================================================
   4-5. OK GOLD / OK GREEN (sezione nera)
   ============================================================ */
.oksw-line{
  background:var(--oksw-bg, var(--oksw-black));color:var(--oksw-cream);
  padding:clamp(80px,10vw,140px) 0;
  position:relative;overflow:hidden;isolation:isolate;
}
.oksw-line::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% 0%, color-mix(in srgb, var(--oksw-accent) 18%, transparent), transparent 60%);
}
.oksw-line__head{
  text-align:center;margin-bottom:clamp(48px,5vw,72px);
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.oksw-line__logo{
  max-width:300px;height:auto;margin-bottom:8px;
}
.oksw-line__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, rgba(255,253,250,.82));max-width:var(--measure-lede);
}
.oksw-line__chips{
  list-style:none;padding:0;margin:8px 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.oksw-line__chips li{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;
  background:var(--oksw-chip-bg, rgba(255,253,250,.08));border:1px solid rgba(255,253,250,.22);
  font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.06em;
  color:var(--oksw-chip-text, var(--oksw-cream));
}
.oksw-line__chip-check{
  color:var(--oksw-accent);font-weight:700;font-size:14px;
}
.oksw-line__power{
  font-family:var(--font-sans);font-weight:300;
  font-size:clamp(15px,1.1vw,17px);letter-spacing:.04em;
  color:rgba(255,253,250,.7);margin-top:4px;
}
.oksw-line__power strong{
  font-weight:700;color:var(--oksw-accent);letter-spacing:.06em;
}

/* Slider */
.oksw-line__slider{
  position:relative;
  max-width:1280px;margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.oksw-line__track-wrap{
  overflow:hidden;
  margin:0 clamp(0px,6vw,80px);
}
.oksw-line__track{
  display:flex;gap:clamp(20px,2.5vw,40px);
  transition:transform .65s var(--easing-out);
  will-change:transform;
}
.oksw-line__nav{
  position:absolute;top:48%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,253,250,.1);color:var(--oksw-cream);
  border:1px solid rgba(255,253,250,.24);
  font-size:22px;font-family:var(--font-sans);font-weight:300;line-height:1;
  cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s, transform .3s, color .3s;
}
.oksw-line__nav:hover{
  background:var(--oksw-accent);color:var(--oksw-black);
  transform:translateY(-50%) scale(1.08);
}
.oksw-line__nav[disabled]{opacity:.35;cursor:not-allowed}
.oksw-line__nav--prev{left:0}
.oksw-line__nav--next{right:0}
.oksw-line__dots{
  display:flex;gap:8px;justify-content:center;
  margin-top:36px;
}
.oksw-line__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,253,250,.24);border:0;padding:0;cursor:pointer;
  transition:background .3s, width .3s;
}
.oksw-line__dot.is-active{background:var(--oksw-accent);width:24px;border-radius:4px}

/* ============================================================
   Product showcase card — 1 prodotto per slide, layout orizzontale
   cinematografico ispirato alla Company Profile.
   ============================================================ */
.oksw-prod{
  flex:0 0 100%;
  position:relative;
  display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,48px);
  padding:clamp(28px,3vw,48px);
  background:var(--oksw-card-bg, linear-gradient(180deg, rgba(255,253,250,.04) 0%, rgba(255,253,250,.02) 100%));
  border:1px solid rgba(255,253,250,.1);
  border-radius:28px;
  text-align:left;color:var(--oksw-card-text, var(--oksw-cream));
  overflow:hidden;isolation:isolate;
}
@media (min-width:760px){
  .oksw-prod{
    grid-template-columns:minmax(340px, 1.05fr) 1fr;
    align-items:center;
  }
}
.oksw-prod::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 0% 50%, color-mix(in srgb, var(--oksw-accent) 14%, transparent), transparent 65%);
}

/* ── Lado esquerdo: foto + callout ── */
.oksw-prod__media{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.oksw-prod__photo{
  position:relative;
  width:100%;max-width:480px;aspect-ratio:1/1;
  background:var(--oksw-cream);
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  box-shadow:0 24px 48px rgba(0,0,0,.32);
  overflow:hidden;
}
.oksw-prod__photo::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 100%, rgba(235,184,0,.08), transparent 60%);
}
.oksw-prod__photo img{
  position:relative;z-index:1;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.18));
}
/* Callout dorato — "3 gocce = 1 cucchiaino di zucchero" */
.oksw-prod__callout{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;
  background:var(--oksw-accent);color:#0f0d0c;
  font-family:var(--font-sans);font-weight:700;
  font-size:13.5px;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(235,184,0,.32);
  max-width:100%;text-align:center;
}
.oksw-prod__callout-icon{font-size:14px;line-height:1}

/* Verde per OK Green */
.oksw-line--green .oksw-prod__callout{
  background:var(--oksw-accent);
  box-shadow:0 8px 24px color-mix(in srgb, var(--oksw-accent) 32%, transparent);
}

/* ── Lado direito: info dettagliata ── */
.oksw-prod__info{
  display:flex;flex-direction:column;gap:24px;
}
.oksw-prod__header{display:flex;flex-direction:column;gap:10px}
.oksw-prod__eyebrow{
  font-family:var(--font-sans);font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oksw-accent);
}
.oksw-prod__name{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.015em;
  color:var(--oksw-cream);
}
.oksw-prod__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:rgba(255,253,250,.92);
}
.oksw-prod__section{
  display:flex;flex-direction:column;gap:10px;
  padding-top:18px;border-top:1px solid rgba(255,253,250,.12);
}
.oksw-prod__label{
  font-family:var(--font-sans);font-weight:600;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oksw-accent);
}
.oksw-prod__ing{
  font-family:var(--font-sans);font-weight:300;
  font-size:14px;line-height:1.65;color:rgba(255,253,250,.9);
}

/* Label "Valori nutrizionali per 100g" — formato a 2 livelli (titolo + sotto) */
.oksw-prod__label-sub{
  display:block;font-weight:500;font-size:11px;letter-spacing:.22em;
  color:var(--oksw-accent);margin-top:4px;opacity:.85;
}
.oksw-prod__section--nutr .oksw-prod__label{
  border-bottom:1px dotted color-mix(in srgb, var(--oksw-accent) 50%, transparent);
  padding-bottom:14px;margin-bottom:0;
}

/* Tabella valori nutrizionali editoriale */
.oksw-nutr{
  width:100%;border-collapse:collapse;
  font-family:var(--font-sans);font-size:14px;
  color:var(--oksw-cream);
}
.oksw-nutr__row{
  transition:background .25s;
}
/* Pattern alternato di default: usa --oksw-accent del brand corrente */
.oksw-nutr__row.is-even:not([style*="background"]){
  background:color-mix(in srgb, var(--oksw-accent) 18%, transparent);
}
.oksw-nutr__row.is-odd:not([style*="background"]){
  background:color-mix(in srgb, var(--oksw-accent) 8%, transparent);
}
.oksw-nutr__row--main .oksw-nutr__label{
  font-weight:600;letter-spacing:.04em;color:var(--oksw-cream);
  text-transform:uppercase;font-size:13px;
}
.oksw-nutr__row--sub .oksw-nutr__label{
  font-weight:400;color:rgba(255,253,250,.78);
  padding-left:32px;font-size:13.5px;
}
.oksw-nutr__row--sub .oksw-nutr__label::before{
  content:"";display:inline-block;width:16px;height:1px;
  background:rgba(255,253,250,.4);margin-right:10px;vertical-align:middle;
  transform:translateY(-2px);
}
.oksw-nutr__label{
  text-align:left;padding:11px 16px;
  font-weight:600;color:var(--oksw-cream);
}
.oksw-nutr__value{
  text-align:right;padding:11px 16px;
  font-weight:500;color:rgba(255,253,250,.92);
  white-space:nowrap;
}
.oksw-nutr__row--sub .oksw-nutr__value{
  font-weight:400;color:rgba(255,253,250,.78);
}

@media (max-width:600px){
  .oksw-prod__photo{max-width:360px;aspect-ratio:1/1;padding:16px}
  .oksw-prod__callout{font-size:12px;padding:10px 16px}
}

/* ============================================================
   Preset COMPACT — card sintetico con CTA che apre modal
   ============================================================ */
.oksw-prod--compact{
  /* Stesso layout 2 colonne ma info più snella */
}
.oksw-prod__cta{
  margin-top:8px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 24px;border-radius:999px;
  background:transparent;color:var(--oksw-btn-text, var(--oksw-cream));
  border:1.5px solid var(--oksw-btn-bg, var(--oksw-accent));
  font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.04em;
  cursor:pointer;
  transition:background .3s, color .3s, transform .3s var(--easing-out);
}
.oksw-prod__cta:hover{
  background:var(--oksw-btn-bg, var(--oksw-accent));color:#0f0d0c;
  transform:translateX(4px);
}
.oksw-prod__cta-arrow{
  font-size:18px;line-height:1;
  transition:transform .3s var(--easing-out);
}
.oksw-prod__cta:hover .oksw-prod__cta-arrow{transform:translateX(4px)}
.oksw-prod__cta:focus-visible{outline:2px solid var(--oksw-accent);outline-offset:4px}

/* ============================================================
   Modal cinematografico — usato dal preset "compact"
   ============================================================ */
.oksw-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,40px);
  opacity:0;visibility:hidden;
  --oksw-accent: #ebb800;
  transition:opacity .35s var(--easing-out), visibility .35s;
}
.oksw-modal.is-open{opacity:1;visibility:visible}
.oksw-modal__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.oksw-modal__content{
  position:relative;z-index:1;
  width:min(1080px, 100%);max-height:90vh;
  background:linear-gradient(180deg, #1a1817 0%, #0f0d0c 100%);
  border:1px solid color-mix(in srgb, var(--oksw-accent) 28%, transparent);
  border-radius:28px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(20px) scale(.96);opacity:0;
  transition:transform .45s var(--easing-out), opacity .4s;
}
.oksw-modal.is-open .oksw-modal__content{
  transform:translateY(0) scale(1);opacity:1;
}
.oksw-modal__close{
  position:absolute;top:18px;right:18px;z-index:5;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,253,250,.1);color:var(--oksw-cream);
  border:1px solid rgba(255,253,250,.2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s, color .25s, transform .25s;
}
.oksw-modal__close:hover{
  background:var(--oksw-accent);color:#0f0d0c;
  transform:rotate(90deg);
}
.oksw-modal__grid{
  display:grid;grid-template-columns:1fr;
  overflow-y:auto;
}
@media (min-width:760px){
  .oksw-modal__grid{grid-template-columns:.85fr 1.15fr;align-items:stretch}
  /* Prodotto fissato in alto, sempre visibile mentre si scorre l'info */
  .oksw-modal__photo{position:sticky;top:0}
}
.oksw-modal__media{
  position:relative;
  /* Pannello pieno (come i brand): default chiaro, l'admin può forzare un colore via modal_bg */
  background:var(--oksw-modal-bg, #F4F1EB);
  display:flex;align-items:flex-start;justify-content:center;
  padding:0;
  min-height:340px;
}
.oksw-modal__media::before{display:none}
/* Prodotto "flottante" — senza frame (coerente con i modali degli altri brand) */
.oksw-modal__photo{
  position:relative;
  width:100%;max-width:none;
  background:none;
  border-radius:0;padding:clamp(22px,2.6vw,34px);
  display:flex;align-items:flex-start;justify-content:center;
  box-shadow:none;
}
.oksw-modal__photo img{
  width:100%;height:auto;max-height:78vh;
  object-fit:contain;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.25));
}
.oksw-modal__body{
  padding:clamp(32px,4vw,56px);
  color:var(--oksw-cream);
  display:flex;flex-direction:column;gap:18px;
  overflow-y:auto;
}
.oksw-modal__name{
  font-family:var(--title-font);font-weight:700;
  font-size:clamp(28px,3.2vw,48px);line-height:1.1;letter-spacing:-.015em;
  color:#FFFFFF;margin-bottom:4px;
}
/* Tabella nutrizionali DENTRO al modal: forza testi bianchi puri
   per leggibilità sopra il pattern zebra dorato/verde */
.oksw-modal .oksw-nutr__row--main .oksw-nutr__label,
.oksw-modal .oksw-nutr__row--main .oksw-nutr__value{
  color:#FFFFFF;
}
.oksw-modal .oksw-nutr__row--sub .oksw-nutr__label,
.oksw-modal .oksw-nutr__row--sub .oksw-nutr__value{
  color:rgba(255,255,255,.85);
}
.oksw-modal .oksw-nutr__row--sub .oksw-nutr__label::before{
  background:rgba(255,255,255,.55);
}
.oksw-modal__extra{
  display:inline-flex;align-self:flex-start;
  font-family:var(--font-sans);font-weight:700;
  font-size:14px;color:#0f0d0c;
  padding:10px 18px;background:var(--oksw-accent);
  border-radius:999px;letter-spacing:.02em;
  box-shadow:0 6px 18px color-mix(in srgb, var(--oksw-accent) 32%, transparent);
}
.oksw-modal__divider{
  height:1px;background:rgba(255,253,250,.14);margin:8px 0;
}
.oksw-modal__section{display:flex;flex-direction:column;gap:12px}
.oksw-modal__label{
  font-family:var(--font-sans);font-weight:600;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oksw-accent);
}
.oksw-modal__ing{
  font-family:var(--font-sans);font-weight:300;
  font-size:14.5px;line-height:1.65;color:rgba(255,253,250,.92);
}

@media (max-width:760px){
  .oksw-modal__content{max-height:95vh}
  .oksw-modal__media{min-height:220px}
  .oksw-modal__photo{position:static;max-width:none;padding:20px}
  .oksw-modal__photo img{max-height:300px}
}

body.oksw-modal-open{overflow:hidden}

/* ============================================================
   6. RESPONSABILITÀ (sezione bianca)
   Pattern allineato a Chi Siamo Filosofia: media stretch full-height
   con object-fit cover + caption decorativa overlay.
   ============================================================ */
.oksw-resp{
  background:var(--oksw-bg, var(--color-cream));
  padding:clamp(80px,10vw,140px) 0;
}
.oksw-resp__inner{
  display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);
  align-items:stretch;
}
@media (min-width:900px){
  .oksw-resp__inner{grid-template-columns:minmax(360px,0.95fr) 1.1fr;gap:clamp(48px,6vw,100px)}
}
.oksw-resp__media{
  position:relative;
  border-radius:28px;overflow:hidden;
  background:var(--color-forest-900);isolation:isolate;
  min-height:560px;
}
@media (max-width:899px){
  .oksw-resp__media{aspect-ratio:4/5;min-height:0;height:auto}
}
.oksw-resp__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  will-change:transform;
}
.oksw-resp__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,30,25,0) 55%, rgba(20,30,25,.5) 100%);
}
.oksw-resp__media-caption{
  position:absolute;left:28px;bottom:24px;z-index:2;
  color:var(--color-cream);
  font-family:var(--font-sans);font-weight:500;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.oksw-resp__media-caption::before{
  content:"";width:24px;height:1px;background:var(--color-cream);opacity:.7;
}
.oksw-resp__copy{max-width:var(--measure-lede)}
.oksw-resp__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(34px,4vw,58px);line-height:1.12;letter-spacing:-.018em;
  color:var(--oksw-title, var(--color-forest-900));margin-bottom:32px;
}
.oksw-resp__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--oksw-accent, var(--color-forest)));
}
.oksw-resp__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));
}
.oksw-resp__text p{margin-bottom:18px}
.oksw-resp__text strong{font-weight:500;color:var(--color-forest-900)}

/* Highlight card editoriale — testo di chiusura sul processo brevettato.
   Stile coerente con i card statistiche di Chi Siamo: forest-900 background,
   testo cream, palette istituzionale (no callout amarelo). */
.oksw-resp__highlight{
  position:relative;
  margin-top:40px;padding:clamp(28px,3vw,40px) clamp(28px,3vw,44px);
  background:var(--oksw-card-bg, var(--color-forest-900));
  border-radius:24px;
  color:var(--oksw-card-text, var(--color-cream));
  display:flex;gap:24px;align-items:flex-start;
  overflow:hidden;isolation:isolate;
}
/* Glow verde/ouro rimosso: sfondo del card uniforme. */
.oksw-resp__highlight::before{ display:none; }
.oksw-resp__highlight-mark{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:rgba(255,253,250,.12);color:var(--color-cream);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,253,250,.28);
}
.oksw-resp__highlight-body{
  flex:1;
  font-family:var(--font-sans);font-weight:300;
  font-size:16.5px;line-height:1.75;color:var(--oksw-card-text, rgba(255,253,250,.92));
}
.oksw-resp__highlight-body p{margin:0}
.oksw-resp__highlight-body p + p{margin-top:14px}
.oksw-resp__highlight-body strong{
  font-weight:600;color:var(--color-cream);
}

@media (max-width:600px){
  .oksw-resp__highlight{padding:24px;flex-direction:column;gap:18px}
}

/* ============================================================
   7. COMING SOON (sezione nera)
   ============================================================ */
.oksw-soon{
  background:var(--oksw-bg, var(--oksw-black));color:var(--oksw-cream);
  padding:clamp(80px,9vw,120px) 0;
}
.oksw-soon__eyebrow{
  font-family:var(--font-sans);font-weight:500;
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--oksw-accent);text-align:center;margin-bottom:48px;
}
.oksw-soon__grid{
  --soon-gap:clamp(24px,3vw,40px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--soon-gap);
}
/* Logica di esposizione per numero di prodotti: {1,2,4} base 2 col · {3,5,...} base 3 col.
   justify-content:center centra l'ultima riga incompleta. */
.oksw-soon__grid--c2 .oksw-soon__card{ flex:0 1 calc(50% - var(--soon-gap) / 2); }
.oksw-soon__grid--c3 .oksw-soon__card{ flex:0 1 calc(33.333% - var(--soon-gap) * 2 / 3); }
@media (max-width:860px){
  .oksw-soon__grid--c3 .oksw-soon__card{ flex:0 1 calc(50% - var(--soon-gap) / 2); }
}
@media (max-width:600px){
  .oksw-soon__grid--c2 .oksw-soon__card,
  .oksw-soon__grid--c3 .oksw-soon__card{ flex:0 1 100%; }
}
.oksw-soon__card{
  position:relative;
  aspect-ratio:16/9;min-height:220px;
  border-radius:24px;
  overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  background:var(--oksw-black);
  transition:transform .5s var(--easing-out), box-shadow .5s;
}
.oksw-soon__card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
/* Immagine o video di sfondo full-bleed */
.oksw-soon__photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
}
.oksw-soon__photo img,
.oksw-soon__photo video{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
  transition:transform .8s var(--easing-out);
}
.oksw-soon__card:hover .oksw-soon__photo img,
.oksw-soon__card:hover .oksw-soon__photo video{transform:scale(1.06)}
/* Overlay scuro per leggibilità del logo */
.oksw-soon__photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
  transition:opacity .5s;
}
.oksw-soon__card:hover .oksw-soon__photo::after{opacity:.7}
/* Badge "Coming Soon" pill in alto */
.oksw-soon__badge{
  position:absolute;top:16px;right:16px;z-index:3;
  padding:6px 14px;border-radius:999px;
  background:rgba(0,0,0,.55);
  color:var(--oksw-accent);
  font-family:var(--font-sans);font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  border:1px solid rgba(235,184,0,.4);
}
/* Logo centrato sopra l'immagine */
.oksw-soon__logo{
  position:relative;z-index:2;
  max-width:64%;max-height:180px;width:auto;height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));
}
.oksw-soon__name{
  position:relative;z-index:2;
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(32px,3.4vw,52px);color:var(--oksw-cream);
  letter-spacing:.04em;text-align:center;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));
}

@media (max-width:700px){
  .oksw-soon__card{aspect-ratio:16/10;min-height:180px}
  .oksw-soon__logo{max-width:60%;max-height:120px}
}

/* ============================================================
   8. FAQ (sezione bianca)
   ============================================================ */
.oksw-faq{
  background:var(--oksw-bg, var(--color-cream));
  padding:clamp(80px,9vw,120px) 0;
}
.oksw-faq__inner{max-width:var(--rail);margin:0 auto}
.oksw-faq__title{
  font-family:var(--title-font);font-weight:var(--title-weight);
  font-size:clamp(34px,4vw,58px);line-height:1.12;letter-spacing:-.018em;
  color:var(--oksw-title, var(--color-forest-900));text-align:center;margin-bottom:48px;
}
.oksw-faq__title em{
  font-family:var(--title-font);font-weight:var(--title-em-weight);font-style:var(--title-em-style);
  color:var(--oksw-em, var(--oksw-accent, var(--color-forest)));
}
.oksw-faq__list{display:flex;flex-direction:column;gap:0}
.oksw-faq__item{border-bottom:1px solid var(--color-line)}
.oksw-faq__item:first-child{border-top:1px solid var(--color-line)}
.oksw-faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:28px 0;
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(17px,1.4vw,22px);line-height:1.35;
  color:var(--oksw-title, var(--color-forest-900));
  transition:color .25s;
}
.oksw-faq__item summary::-webkit-details-marker{display:none}
.oksw-faq__item summary:hover{color:var(--color-forest)}
.oksw-faq__toggle{
  position:relative;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--color-line);flex:none;
}
.oksw-faq__toggle-h, .oksw-faq__toggle-v{
  position:absolute;top:50%;left:50%;background:var(--oksw-accent, var(--color-forest));
}
.oksw-faq__toggle-h{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.oksw-faq__toggle-v{width:1.5px;height:13px;transform:translate(-50%,-50%);transition:transform .3s}
.oksw-faq__item[open] .oksw-faq__toggle{background:var(--color-forest);border-color:var(--color-forest)}
.oksw-faq__item[open] .oksw-faq__toggle-h,
.oksw-faq__item[open] .oksw-faq__toggle-v{background:var(--color-cream)}
.oksw-faq__item[open] .oksw-faq__toggle-v{transform:translate(-50%,-50%) scaleY(0)}
.oksw-faq__answer{
  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(--oksw-text, var(--color-ink-soft));
  padding:0 0 28px;max-width:64ch;
}
.oksw-faq__answer p{margin-bottom:12px}

/* ============================================================
   9. RICETTE — usa markup uniforme con Linee Prodotti
   (classi .product-recipes / .ricette-card definite in ricette.css,
   caricato via enqueue condizionale per questa page template)
   ============================================================ */

/* ============================================================
   Responsive polish
   ============================================================ */
@media (max-width:700px){
  .oksw-hero{padding:calc(var(--nav-h) + 56px) 0 80px}
  .oksw-hero__title{font-size:clamp(36px,9vw,56px);white-space:normal}
  .oksw-line__head{padding:0 16px}
}

/* ====== DOVE ACQUISTARLI — sezione canali (Retail/Pro) — giu 2026 (vedi §37)
   Fascia scura --oksw-black + canali light; rispetta i token §31 (--oksw-text/title/em). ====== */
.oksw-buy{position:relative;overflow:hidden;background:var(--oksw-bg, var(--oksw-black));color:var(--oksw-cream);padding:clamp(80px,10vw,140px) 0}
.oksw-buy__head{max-width:720px;margin:0 auto clamp(40px,5vw,60px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.oksw-buy__leaf{width:clamp(34px,3.4vw,48px);height:auto;opacity:.95}
.oksw-buy__eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oksw-cream)}
.oksw-buy__eyebrow::before,.oksw-buy__eyebrow::after{content:"";width:26px;height:1px;background:rgba(255,253,250,.4)}
.oksw-buy__title{font-family:var(--font-sans);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.01em;color:var(--oksw-title, var(--oksw-cream))}
.oksw-buy__title em{font-style:italic;color:var(--oksw-em, var(--oksw-cream))}
.oksw-buy__lede{font-weight:var(--body-weight);font-size:var(--body-size);line-height:var(--body-lh);color:var(--oksw-text, rgba(255,253,250,.86));max-width:var(--measure-lede)}
.oksw-buy__channels{width:100%;max-width:var(--rail-wide);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);text-align:left}
.oksw-buy__channels--2{grid-template-columns:repeat(2,1fr);max-width:760px}
.oksw-buy__ch{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:6px clamp(20px,2.6vw,40px);border-left:1px solid rgba(255,253,250,.18)}
.oksw-buy__ch:first-child{border-left:0;padding-left:0}
.oksw-buy__ch:last-child{padding-right:0}
.oksw-buy__ch-icon{color:var(--oksw-cream)}
.oksw-buy__ch-icon svg{width:26px;height:26px;display:block}
.oksw-buy__ch-title{font-weight:700;font-size:17px;color:var(--oksw-cream)}
.oksw-buy__ch-text{font-weight:300;font-size:14.5px;line-height:1.6;color:rgba(255,253,250,.78);flex:1}
.oksw-buy__ch-tag{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oksw-cream);padding:7px 14px;border:1px solid rgba(255,253,250,.26);border-radius:999px}
.oksw-buy__ch-link{font-weight:500;font-size:14px;color:var(--oksw-cream);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.oksw-buy__ch-link:hover{gap:12px}
.oksw-buy__btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:var(--oksw-cream);color:var(--oksw-black);font-weight:600;font-size:14px;text-decoration:none;transition:transform .3s,box-shadow .3s}
.oksw-buy__btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.oksw-buy__btn--soon{background:transparent;color:var(--oksw-cream);border:1px solid rgba(255,253,250,.26);font-weight:500;cursor:default}
.oksw-buy__btn--soon:hover{transform:none;box-shadow:none}
@media(max-width:820px){
  .oksw-buy__channels,.oksw-buy__channels--2{grid-template-columns:1fr;max-width:420px}
  .oksw-buy__ch{border-left:0;border-top:1px solid rgba(255,253,250,.18);padding:24px 0;align-items:center;text-align:center}
  .oksw-buy__ch:first-child{border-top:0;padding-top:0}
}

/* ====== MODI VISUALIZZAZIONE PRODOTTI full / medium / small (Caminho 2) — giu 2026 §37
   Full = card orizzontale 1/riga (look attuale). Medium/Small = card verticale 2/3 per riga.
   L'accento (oro Gold / verde Green) colora l'eyebrow "Formato". ====== */
.oksw-prod__eyebrow{ color:var(--oksw-accent) }

/* MEDIUM / SMALL — card verticale compatta */
.oksw-line--medium .oksw-prod,
.oksw-line--small  .oksw-prod{
  display:flex;flex-direction:column;gap:0;padding:0;
  background:#262320;border:1px solid rgba(255,253,250,.08);border-radius:20px;overflow:hidden;
}
.oksw-line--medium .oksw-prod__media,
.oksw-line--small  .oksw-prod__media{ gap:0 }
.oksw-line--medium .oksw-prod__photo,
.oksw-line--small  .oksw-prod__photo{ width:100%;max-width:none;aspect-ratio:4/3;border-radius:0 }
.oksw-line--medium .oksw-prod__info,
.oksw-line--small  .oksw-prod__info{ padding:22px 24px 26px;gap:10px }
.oksw-line--medium .oksw-prod__name,
.oksw-line--small  .oksw-prod__name{ font-size:20px;line-height:1.18 }
.oksw-line--medium .oksw-prod__desc,
.oksw-line--small  .oksw-prod__desc{ font-size:14px;line-height:1.55 }
.oksw-line--medium .oksw-prod__cta,
.oksw-line--small  .oksw-prod__cta{ margin-top:6px;padding:11px 18px;font-size:13px }

/* larghezze per vista (track è flex con gap clamp(20px,2.5vw,40px)) */
.oksw-line--medium .oksw-prod{ flex:0 0 calc((100% - clamp(20px,2.5vw,40px)) / 2) }
.oksw-line--small  .oksw-prod{ flex:0 0 calc((100% - clamp(20px,2.5vw,40px) * 2) / 3) }
@media(max-width:900px){
  .oksw-line--small .oksw-prod{ flex:0 0 calc((100% - clamp(20px,2.5vw,40px)) / 2) }
}
@media(max-width:620px){
  .oksw-line--medium .oksw-prod,
  .oksw-line--small  .oksw-prod{ flex:0 0 100% }
}

/* ============================================================
   Modale editoriale (Caminho 2): descrizione + claims + tabella hairline
   ============================================================ */
.oksw-modal__desc{
  font-family:var(--font-sans);font-weight:300;
  font-size:clamp(15px,1.1vw,16.5px);line-height:1.65;
  color:rgba(255,253,250,.82);margin:0;
}
.oksw-modal__badges{
  list-style:none;margin:2px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
}
.oksw-modal__badges li{
  font-family:var(--font-sans);font-weight:300;font-size:13.5px;
  color:rgba(255,253,250,.88);display:inline-flex;align-items:center;gap:8px;
}
.oksw-modal__badges li::before{
  content:"✓";color:var(--oksw-accent);font-weight:700;font-size:13px;
}
/* Divisori editoriali tra le sezioni del modale (come i brand) */
.oksw-modal__section[hidden]{ display:none; }
.oksw-modal__section{
  border-top:1px solid rgba(255,253,250,.14);
  padding-top:clamp(20px,2vw,26px);
  margin-top:clamp(4px,1vw,10px);
}
/* Tabella nutrizionale in stile hairline (allineata ai brand) */
.oksw-modal .oksw-nutr__row{ background:none !important; }
.oksw-modal .oksw-nutr__row .oksw-nutr__label,
.oksw-modal .oksw-nutr__row .oksw-nutr__value{
  border-bottom:1px solid rgba(255,253,250,.12);
  padding:12px 0;
}
.oksw-modal .oksw-nutr__row--sub .oksw-nutr__label{ padding-left:18px; }
.oksw-modal .oksw-nutr__row--sub .oksw-nutr__label::before{ display:none; }