/* ==========================================================
   EcoBen Store: long product description components (.ebd), EcoBen style:
   Outfit, centred bold green headings, white cards with soft green shadow,
   hero in the product line colour (--ebd-from / --ebd-to set per product).
   Descriptions contain only markup + these classes, never inline CSS.
   ========================================================== */
.ebd{ font-family:var(--eb-font); color:var(--eb-ink); line-height:1.6; letter-spacing:var(--eb-tracking); }
.ebd *{ box-sizing:border-box; }
.ebd section{ margin:0 auto; padding:52px 0; text-align:center; }
.ebd section:nth-of-type(even):not(:first-child){ position:relative; }
.ebd section:nth-of-type(n+3){ content-visibility:auto; contain-intrinsic-size:auto 640px; }
.ebd h2{ font-weight:700; font-size:clamp(26px,3vw,34px); line-height:1.2; color:var(--eb-primary); margin:0 auto 12px; max-width:820px; text-wrap:balance; }
.ebd h2 em{ font-style:normal; color:var(--eb-accent); }
.ebd h3{ font-size:16.5px; font-weight:600; color:var(--eb-ink-strong); margin:0 0 6px; line-height:1.3; }
.ebd p{ margin:0 0 12px; }
.ebd .ebd-eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:0; color:var(--eb-primary); background:var(--eb-tint); border-radius:999px; padding:6px 14px; margin-bottom:12px; }
.ebd .ebd-sub{ font-size:16.5px; color:var(--eb-ink-soft); max-width:680px; margin:0 auto 30px; }
.ebd ul, .ebd ol, .ebd .ebd-dose, .ebd details, .ebd .ebd-note{ text-align:left; }

/* Hero in the product line colour */
.ebd .ebd-hero{ background:linear-gradient(135deg,var(--ebd-from,#1A2E1A),var(--ebd-to,#008000)); color:#fff; border-radius:var(--eb-radius-l); padding:clamp(28px,5vw,56px); }
.ebd .ebd-hero .ebd-eyebrow{ background:rgb(255 255 255 / .16); color:#fff; }
.ebd .ebd-hero h2{ color:#fff; font-size:clamp(28px,3.4vw,40px); }
.ebd .ebd-hero h2 em{ color:#fff; opacity:.85; }
.ebd .ebd-lead{ font-size:17px; color:rgb(255 255 255 / .9); max-width:720px; margin:0 auto 28px; }
.ebd .ebd-wins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.ebd .ebd-wins li{ background:rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .2); border-radius:var(--eb-radius); padding:16px 18px; text-align:center; }
.ebd .ebd-wins strong{ display:block; font-size:17px; font-weight:700; color:#fff; margin-bottom:2px; line-height:1.25; }
.ebd .ebd-wins span{ font-size:13.5px; color:rgb(255 255 255 / .82); }

/* Checklists */
.ebd .ebd-checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; list-style:none; margin:0 auto; padding:0; max-width:900px; }
.ebd .ebd-checks li{ position:relative; background:var(--eb-paper); border-radius:var(--eb-radius); box-shadow:var(--eb-shadow); padding:14px 16px 14px 50px; font-size:15px; font-weight:500; color:var(--eb-ink-strong); }
.ebd .ebd-checks li::before{ content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--eb-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.ebd .ebd-checks--problem li::before{ background:#E8A33D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Numbered steps */
.ebd .ebd-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; list-style:none; margin:0; padding:0; counter-reset:ebd-step; }
.ebd .ebd-steps li{ counter-increment:ebd-step; background:var(--eb-paper); border-radius:var(--eb-radius-card); box-shadow:var(--eb-shadow); padding:24px 22px; text-align:center; }
.ebd .ebd-steps li::before{ content:counter(ebd-step); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--eb-radius); background:var(--eb-accent); color:#fff; font-weight:700; font-size:18px; margin-bottom:12px; }
.ebd .ebd-steps p{ font-size:14.5px; color:var(--eb-ink-soft); margin:0; }

/* Tiles */
.ebd .ebd-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.ebd .ebd-tiles li{ background:var(--eb-paper); border-radius:var(--eb-radius-card); box-shadow:var(--eb-shadow); padding:22px; border-top:3px solid var(--eb-accent); }
.ebd .ebd-tiles p{ font-size:14.5px; color:var(--eb-ink-soft); margin:0; }

/* Dosage cards */
.ebd .ebd-dose{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; max-width:900px; margin:0 auto; }
.ebd .ebd-dose > div{ background:var(--eb-paper); border-radius:var(--eb-radius-card); box-shadow:var(--eb-shadow); padding:22px; border:2px solid transparent; }
.ebd .ebd-dose > div:first-child{ border-color:var(--eb-accent); }
.ebd .ebd-dose h3{ color:var(--eb-primary); font-size:18px; }
.ebd .ebd-dose dl{ margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14.5px; }
.ebd .ebd-dose dt{ color:var(--eb-ink-faint); }
.ebd .ebd-dose dd{ margin:0; font-weight:600; color:var(--eb-ink-strong); }

/* Before / after picture */
.ebd .ebd-ba{ max-width:900px; margin:0 auto; }
.ebd .ebd-ba img{ display:block; width:100%; height:auto; border-radius:var(--eb-radius-card); box-shadow:var(--eb-shadow); }
.ebd .ebd-ba figcaption{ margin-top:10px; font-size:13px; color:var(--eb-ink-faint); }

/* Notes */
.ebd .ebd-note{ max-width:900px; margin:16px auto 0; border-radius:var(--eb-radius); padding:14px 18px; font-size:14.5px; background:var(--eb-tint); border-left:4px solid var(--eb-accent); }
.ebd .ebd-note--warn{ background:#FFF7EA; border-left-color:#E8A33D; }

/* Timeline */
.ebd .ebd-timeline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.ebd .ebd-timeline li{ background:var(--eb-paper); border-radius:var(--eb-radius-card); box-shadow:var(--eb-shadow); padding:20px; }
.ebd .ebd-timeline b{ display:block; font-weight:700; font-size:26px; color:var(--eb-primary); line-height:1; margin-bottom:8px; }
.ebd .ebd-timeline p{ font-size:14.5px; color:var(--eb-ink-soft); margin:0; }

/* FAQ + specs (details/summary, no JS) */
.ebd details{ max-width:900px; margin:0 auto 10px; background:var(--eb-paper); border-radius:var(--eb-radius); box-shadow:var(--eb-shadow); }
.ebd summary{ cursor:pointer; list-style:none; padding:16px 52px 16px 20px; font-weight:600; color:var(--eb-ink-strong); position:relative; }
.ebd summary::-webkit-details-marker{ display:none; }
.ebd summary::after{ content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:var(--eb-tint); color:var(--eb-primary); font-size:18px; line-height:26px; text-align:center; }
.ebd details[open] summary::after{ content:"−"; background:var(--eb-accent); color:#fff; }
.ebd details > div{ padding:0 20px 18px; font-size:14.5px; color:var(--eb-ink-soft); }
.ebd details ul{ margin:0; padding-left:18px; }

@media (max-width:640px){
	.ebd section{ padding:36px 0; }
	.ebd .ebd-sub{ font-size:15.5px; }
}