/* ============================================================
   CreaWell® Mind — v2 trust & ingredient modules
   Shared by all PDPs (mind/sport/longevity); themed via each page's --mind accent.
   Reuses tokens from creawell.css (--mind, --ink, --navy-deep,
   --gold, --ff-serif, --ease, --section-y, etc.)
   ============================================================ */

/* closing system line in the blended why/system section */
.why-stack .why-sum{margin-top:1.5rem;font-family:var(--ff-serif);font-style:italic;font-size:1.35rem;line-height:1.3;color:var(--ink);}
.why-stack .why-sum em{color:var(--mind);font-style:italic;}

/* ---------- 1. COMPARISON — "jumătate din ecuație" ---------- */
.compare .head{margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center;}
.compare .head .eyebrow{justify-content:center;}
.compare .head .h2{margin-top:1rem;white-space:nowrap;}
.compare .head .h2 .serif-accent{display:block;}
@media(max-width:640px){.compare .head .h2{white-space:normal;}}
.compare .head .lede{margin-top:1rem;margin-inline:auto;color:var(--muted);}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);align-items:stretch;}
.cmp{position:relative;border-radius:18px;padding:clamp(1.6rem,2.6vw,2.4rem);display:flex;flex-direction:column;gap:1.1rem;}
.cmp.plain{background:var(--bg-2);border:none;}
.cmp.ours{background:var(--navy-deep);color:#eaf0fa;border:none;overflow:hidden;}
.cmp.ours::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0,color-mix(in srgb,var(--mind) 32%,transparent),transparent 62%);pointer-events:none;}
.cmp.ours > *{position:relative;z-index:1;}
.cmp-tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted-2);}
.cmp.ours .cmp-tag{color:var(--mind-soft);}
.cmp h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.01em;line-height:1.15;}
.cmp .cmp-price{font-family:var(--ff-serif);font-style:italic;font-size:1.05rem;color:var(--muted);}
.cmp.ours .cmp-price{color:rgba(234,240,250,.72);}
.cmp ul{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem;}
.cmp li{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:start;font-size:.95rem;line-height:1.45;}
.cmp li svg{width:20px;height:20px;margin-top:.05rem;flex:none;}
.cmp.plain li{color:var(--muted);}
.cmp.plain li svg{stroke:var(--muted-2);}
.cmp.ours li{color:rgba(234,240,250,.92);}
.cmp.ours li svg{stroke:var(--mind-soft);}
.cmp-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft);font-size:.86rem;color:var(--muted);}
.cmp.ours .cmp-foot{border-top-color:rgba(255,255,255,.12);color:rgba(234,240,250,.7);}

.compare-anchor{text-align:center;margin-top:clamp(2rem,4vw,3rem);}
.compare-anchor b{font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--mind);}
.compare-anchor span{display:block;margin-top:.4rem;font-size:.92rem;color:var(--muted);letter-spacing:.01em;}

/* ---------- 2. INGREDIENT DEEP-DIVE (extends dark .ingredients) ---------- */
.ing-pillar{margin-bottom:clamp(2rem,3.5vw,3rem);}
.ing-pillar:last-child{margin-bottom:0;}
.ing-pillar-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.3rem;}
.ing-pillar-head .pic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--mind) 22%,transparent);}
.ing-pillar-head .pic svg{width:19px;height:19px;stroke:var(--mind-soft);fill:none;stroke-width:1.6;}
.ing-pillar-head h3{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(234,240,250,.82);}

.ing-list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.3rem);}

/* expandable card — builds on .ing look */
.ing.is-expandable{min-height:0;padding:0;cursor:pointer;}
.ing-toggle{all:unset;display:block;width:100%;box-sizing:border-box;padding:clamp(1.3rem,2vw,1.7rem);cursor:pointer;}
.ing-toggle:focus-visible{outline:2px solid var(--mind-soft);outline-offset:-3px;border-radius:16px;}
.ing-summary{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:start;}
.ing-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;}
.ing-name h4{font-size:1.06rem;letter-spacing:-.01em;line-height:1.2;text-transform:uppercase;}
.ing-dose{font-family:var(--ff-serif);font-style:italic;font-size:1.02rem;color:var(--mind-soft);white-space:nowrap;}
.ing-role{grid-column:1/-1;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,240,250,.55);font-weight:700;}
.ing-mech{grid-column:1/-1;font-size:.9rem;color:rgba(234,240,250,.7);line-height:1.5;margin-top:.35rem;}
.ing-plus{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;flex:none;position:relative;transition:background .3s,border-color .3s;}
.ing-plus::before,.ing-plus::after{content:"";position:absolute;background:var(--mind-soft);border-radius:2px;transition:transform .35s var(--ease),opacity .3s;}
.ing-plus::before{width:11px;height:1.6px;}
.ing-plus::after{width:1.6px;height:11px;}
.ing.is-open .ing-plus{background:color-mix(in srgb,var(--mind) 30%,transparent);border-color:transparent;}
.ing.is-open .ing-plus::after{transform:scaleY(0);opacity:0;}

.ing-detail{height:0;overflow:hidden;transition:height .42s var(--ease);}
.ing-detail .inner{padding:0 clamp(1.3rem,2vw,1.7rem) clamp(1.4rem,2vw,1.7rem);border-top:1px solid rgba(255,255,255,.09);margin-top:.2rem;padding-top:1.1rem;}
.ing-detail p{font-size:.9rem;color:rgba(234,240,250,.78);line-height:1.6;}
.ing-detail p + p{margin-top:.7rem;}
.ing-detail .why{color:rgba(234,240,250,.92);}
.ing-detail .why b{color:#fff;}
.ing-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
.ing-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;letter-spacing:.04em;padding:.4em .8em;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(234,240,250,.9);background:rgba(255,255,255,.04);}
.ing-badge b{color:var(--mind-soft);font-weight:800;}

/* ---------- INGREDIENT LEDGER (merged white panel: official-label look, enriched) ---------- */
.spec-head{max-width:60ch;margin:0 auto clamp(2rem,4vw,3rem);text-align:center;}
.spec-head .eyebrow{justify-content:center;}
.spec-head .h2{margin-top:1rem;}
.spec-head .lede{margin-top:1rem;color:var(--muted);}

.ss-stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:980px;margin:clamp(1.8rem,3vw,2.6rem) auto 0;}
.ss-stat{background:var(--bg);padding:1.25rem 1.4rem;text-align:center;}
.ss-stat b{display:block;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;letter-spacing:-.02em;color:var(--mind);font-variant-numeric:tabular-nums;line-height:1;}
.ss-stat span{display:block;margin-top:.5rem;font-size:.8rem;color:var(--muted);letter-spacing:.02em;line-height:1.3;}

.ledger{max-width:980px;margin:clamp(1.6rem,3vw,2.4rem) auto 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:0 30px 70px -42px rgba(9,28,58,.45);}
.ledger-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.15rem 1.6rem;background:var(--navy-deep);color:#eaf0fa;}
.ledger-head b{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;}
.ledger-head small{font-size:.8rem;color:rgba(234,240,250,.7);}
.ledger-table{width:100%;border-collapse:collapse;}
.ledger-table thead th{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700;text-align:left;padding:1rem 1.6rem .8rem;border-bottom:1px solid var(--line);background:var(--bg-2);white-space:nowrap;}
.ledger-table th.rec,.ledger-table td.rec,.ledger-table th.hi,.ledger-table td.hi{font-variant-numeric:tabular-nums;width:1px;white-space:nowrap;padding-right:1.7rem;}
.ledger-table tr.grp td{padding:1.5rem 1.6rem .55rem;border-top:0;}
.ledger-table tbody:first-of-type tr.grp td{padding-top:1.15rem;}
.ledger-table .grp-label{display:inline-flex;align-items:center;gap:.7rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mind);}
.ledger-table .grp-label .pic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--mind) 12%,transparent);}
.ledger-table .grp-label .pic svg{width:17px;height:17px;stroke:var(--mind);fill:none;stroke-width:1.6;}
.ledger-table tbody td{padding:.72rem 1.6rem;border-top:1px solid var(--line-soft);vertical-align:baseline;}
.ledger-table tbody tr:not(.grp):hover td{background:color-mix(in srgb,var(--mind) 3%,transparent);}
.ledger-table .ing-cell b{display:block;color:var(--ink);font-weight:700;font-size:.95rem;letter-spacing:-.01em;}
.ledger-table .ing-cell small{display:block;color:var(--muted);font-size:.77rem;margin-top:.12rem;}
.ledger-table td.rec{color:var(--muted);font-size:.9rem;}
.ledger-table td.hi{font-weight:800;color:var(--mind);font-size:1.02rem;}
.ledger-table td.hi .vnr{display:inline-block;margin-left:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.03em;color:var(--mind);background:color-mix(in srgb,var(--mind) 9%,transparent);border:1px solid color-mix(in srgb,var(--mind) 26%,transparent);border-radius:100px;padding:.18em .55em;vertical-align:middle;font-variant-numeric:normal;}
.ledger-table td.ben{color:var(--muted);font-size:.88rem;line-height:1.35;}
.ledger-table td.ben::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mind);margin-right:.55rem;vertical-align:middle;opacity:.7;}
.ledger-foot{padding:.95rem 1.6rem;font-size:.74rem;color:var(--muted);background:var(--bg-2);line-height:1.5;border-top:1px solid var(--line);}

.ss-note{margin:1.4rem auto 0;max-width:980px;font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:.6rem;justify-content:center;text-align:center;flex-wrap:wrap;}
.ss-note > svg{width:18px;height:18px;flex:none;stroke:var(--mind);fill:none;}
.ss-note .ss-label-link{background:none;border:0;font:inherit;color:var(--mind);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .compare-grid{grid-template-columns:1fr;}
  .ledger-table .ben{display:none;}
  .ledger-head,.ledger-foot{padding-left:1.1rem;padding-right:1.1rem;}
  .ledger-table thead th,.ledger-table tbody td,.ledger-table tr.grp td{padding-left:1.1rem;padding-right:1.1rem;}
  .ledger-table th.rec,.ledger-table td.rec,.ledger-table th.hi,.ledger-table td.hi{padding-right:1.1rem;}
}
@media (max-width:560px){
  .ss-stats{grid-template-columns:repeat(2,1fr);}
  .ledger-head,.ledger-foot{padding-left:1rem;padding-right:1rem;}
  /* stack the ledger into per-ingredient cards (no horizontal clipping) */
  .ledger-table thead{display:none;}
  .ledger-table,.ledger-table tbody,.ledger-table tr,.ledger-table td{display:block;width:auto;}
  .ledger-table tr.grp td{padding:1.4rem 1rem .4rem;border:0;}
  .ledger-table tbody:first-of-type tr.grp td{padding-top:1rem;}
  .ledger-table tbody tr:not(.grp){padding:.95rem 1rem;border-top:1px solid var(--line-soft);}
  .ledger-table tbody tr:not(.grp):hover td{background:none;}
  .ledger-table tbody td{padding:0;border:0;white-space:normal;}
  .ledger-table .ing-cell{margin-bottom:.55rem;}
  .ledger-table .ing-cell small{display:block;}
  .ledger-table td.rec,.ledger-table td.hi{display:flex;align-items:center;gap:.6rem;width:auto;padding:.13rem 0;font-size:.95rem;}
  .ledger-table td.rec{color:var(--ink);}
  .ledger-table td.rec::before{content:"Doză recomandată";}
  .ledger-table td.hi::before{content:"CreaWell® Mind";}
  .ledger-table td.rec::before,.ledger-table td.hi::before{flex:0 0 9.5rem;color:var(--muted-2);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
  .ledger-table td.ben{display:block;margin-top:.55rem;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ing-detail{transition:none;}
  .cmrow .link path{transition:none;stroke-dashoffset:0;}
}

/* ---------- LABEL LIGHTBOX (Vezi eticheta originală) ---------- */
.mv2-lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(9,18,33,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;cursor:zoom-out;}
.mv2-lightbox.open{opacity:1;visibility:visible;}
.mv2-lightbox img{max-width:min(900px,94vw);max-height:92vh;object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:scale(.97);transition:transform .3s var(--ease);cursor:default;}
.mv2-lightbox.open img{transform:scale(1);}
.mv2-lightbox .mv2-close{position:absolute;top:1.1rem;right:1.3rem;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#0f1a2b;font-size:1.05rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.5);}
.ss-note .ss-label-link{background:none;border:0;font:inherit;color:var(--mind);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;}

/* ---------- NEWSLETTER — keep title on one row ---------- */
.news .h2{max-width:none;white-space:nowrap;}
@media (max-width:480px){ .news .h2{white-space:normal;} }

/* ---------- CROSS-SELL — taller cards, product clearly separated from text ---------- */
.cross-grid .xcard{min-height:clamp(420px,38vw,520px);}
.cross-grid .xcard::after{background:linear-gradient(0deg,rgba(9,20,40,.92) 0%,rgba(9,20,40,.5) 40%,rgba(9,20,40,0) 72%);}
.cross-grid .xcard img{object-position:center 42%;}

/* ---------- BUY BOX — description in product-name ink + benefit pills with icons ---------- */
.buy .desc{color:var(--ink);}
.buy .quick span::before{display:none;}
.buy .quick span svg{width:14px;height:14px;stroke:var(--mind);fill:none;stroke-width:1.7;flex:none;}

/* Marquee benefit labels carry inline SVG icons in the redesigned markup — size them
   (without this they render at the SVG default size and blow up the marquee row). */
.marquee .grp span{display:inline-flex;align-items:center;gap:.5em;}
.marquee .grp span svg{width:15px;height:15px;flex:none;stroke:var(--accent-soft);fill:none;stroke-width:1.7;}

/* ---------- BUY BOX — align buymode radio/text rail with the tier rail; draw the
   selected dot INSIDE the ring (was a separate ::after that kept desyncing) ---------- */
.buymode .bm{padding-left:3.5rem;}
.buymode .bm::before{left:20px;}                 /* ring aligned with tier radios */
.buymode .bm.on::after{display:none;}            /* drop the separately-positioned dot */
.buymode .bm.on::before{background:radial-gradient(circle at center, var(--mind) 6px, transparent 6.5px);}