.product-hero { background:var(--mint); padding:42px 0 82px; }
.product-hero-grid { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr); gap:72px; align-items:center; }
.product-visual { min-height:430px; position:relative; display:grid; place-items:center; padding:48px; border-radius:30px; background:linear-gradient(145deg,#d6eee3 0%,#b9decf 100%); box-shadow:20px 24px 0 #c8e5d9; overflow:hidden; }
.product-visual::after { content:""; position:absolute; width:260px; height:260px; border:1px solid #ffffff88; border-radius:50%; }
.product-visual img { position:relative; z-index:1; display:block; width:min(100%,330px); height:330px; object-fit:contain; border-radius:12px; box-shadow:0 18px 35px #083f3828; image-rendering:auto; }
.product-visual-label { position:absolute; left:26px; top:24px; z-index:2; color:var(--green-dark); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.product-visual-note { position:absolute; right:24px; bottom:20px; z-index:2; color:var(--green-dark); font-size:11px; }
.product-summary { max-width:610px; }
.product-summary h1 { font-size:clamp(46px,6vw,78px); }
.product-summary h1 em { color:var(--green); font-style:normal; }
.product-lede { max-width:570px; margin:24px 0 28px; color:var(--muted); font-size:19px; }
.product-price-block { display:grid; grid-template-columns:auto auto; align-items:end; column-gap:16px; width:max-content; margin:4px 0 28px; }
.product-price-block span { color:var(--muted); font-size:12px; grid-column:1 / -1; }
.product-price-block strong { color:var(--green-dark); font-size:34px; line-height:1.15; }
.product-price-block small { max-width:225px; color:var(--muted); font-size:11px; line-height:1.45; }
.product-mini-facts { display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border-top:1px solid #c8e5d9; }
.product-mini-facts span { min-width:125px; padding:14px 18px 0 0; color:var(--muted); font-size:12px; }
.product-mini-facts strong { display:block; margin-top:2px; color:var(--green-dark); font-size:14px; }
.product-trust { background:#fff; border-bottom:1px solid var(--line); }
.product-trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.product-trust-grid > div { padding:24px 26px; border-right:1px solid var(--line); }
.product-trust-grid > div:first-child { padding-left:0; }
.product-trust-grid > div:last-child { border-right:0; }
.product-trust-grid strong, .product-trust-grid span { display:block; }
.product-trust-grid strong { color:var(--green-dark); font-size:15px; }
.product-trust-grid span { margin-top:2px; color:var(--muted); font-size:13px; }
.product-content { padding:88px 0 76px; }
.product-content-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr); gap:68px; align-items:start; }
.product-copy { min-width:0; }
.product-copy h2 { margin:42px 0 16px; font-size:38px; }
.product-copy h2:first-of-type { margin-top:0; }
.product-copy h3 { margin:0 0 7px; font-size:20px; }
.product-copy p { max-width:760px; margin:0 0 18px; color:var(--muted); font-size:17px; }
.product-note { margin:28px 0 34px; padding:18px 21px; border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:14px; background:#fff; color:var(--muted); font-size:14px; }
.product-note strong { color:var(--green-dark); }
.ingredient-table-wrap { margin:26px 0 30px; border:1px solid var(--line); border-radius:17px; background:#fff; overflow-x:auto; }
.ingredient-table { width:100%; min-width:620px; border-collapse:collapse; font-size:14px; }
.ingredient-table th { padding:14px 16px; background:#edf7f1; color:var(--green-dark); font-size:12px; text-align:left; }
.ingredient-table td { padding:13px 16px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; }
.ingredient-table td:first-child { color:var(--green-dark); font-weight:700; }
.ingredient-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.ingredient-card { min-height:150px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.ingredient-card > span { display:block; margin-bottom:14px; color:var(--coral); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.ingredient-card p { margin:0; font-size:14px; line-height:1.55; }
.use-steps { display:grid; gap:0; padding:0; margin:24px 0 0; list-style:none; counter-reset:usage; }
.use-steps li { display:grid; grid-template-columns:38px 1fr; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.use-steps li::before { counter-increment:usage; content:"0" counter(usage); color:var(--coral); font-weight:800; }
.use-steps strong { display:block; margin-bottom:2px; color:var(--green-dark); }
.product-side { position:sticky; top:20px; }
.product-buy-card { padding:30px; border-radius:23px; background:var(--green-dark); color:#d8eee5; box-shadow:14px 16px 0 #c8e5d9; }
.product-buy-card .eyebrow { color:#bde7d5; }
.product-buy-card h2 { color:#fff; font-size:30px; }
.product-buy-card > p { margin:14px 0 22px; color:#c5e2d8; font-size:15px; }
.product-buy-card .button-primary { width:100%; }
.product-facts { margin-top:34px; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.product-facts h3 { margin-bottom:15px; font-size:22px; }
.product-facts dl { margin:0; }
.product-facts dl > div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.product-facts dl > div:last-child { border-bottom:0; }
.product-facts dt { color:var(--muted); }
.product-facts dd { margin:0; color:var(--green-dark); font-weight:700; text-align:right; }
.product-faq { padding:80px 0; background:#fff; }
.product-faq-heading { max-width:650px; margin-bottom:30px; }
.product-faq-heading h2 { font-size:42px; }
.product-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.product-faq-grid details { padding:21px 23px; border:1px solid var(--line); border-radius:17px; background:var(--cream); }
.product-faq-grid summary { cursor:pointer; color:var(--green-dark); font-weight:700; line-height:1.4; }
.product-faq-grid summary::marker { color:var(--coral); }
.product-faq-grid p { margin:12px 0 0; color:var(--muted); font-size:14px; }
.product-callout { margin:72px auto 88px; padding:38px 46px; border-radius:22px; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.product-callout h2 { color:#fff; font-size:32px; }
.product-callout p { max-width:630px; margin:8px 0 0; color:#fff6f3; }
.product-callout .eyebrow { color:#ffe1d8; margin-bottom:9px; }
@media (max-width:850px) { .product-hero-grid, .product-content-grid { grid-template-columns:1fr; gap:48px; } .product-visual { max-width:560px; min-height:380px; } .product-side { position:static; } .product-trust-grid { grid-template-columns:1fr; } .product-trust-grid > div, .product-trust-grid > div:first-child { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); } .product-trust-grid > div:last-child { border-bottom:0; } .product-callout { margin-left:15px; margin-right:15px; } }
@media (max-width:580px) { .product-hero { padding:30px 0 62px; } .product-visual { min-height:300px; padding:28px; border-radius:22px; box-shadow:12px 15px 0 #c8e5d9; } .product-visual img { width:240px; height:240px; } .product-summary h1 { font-size:48px; } .product-lede { font-size:17px; } .product-price-block { width:100%; } .product-price-block small { max-width:none; } .product-content { padding:62px 0 54px; } .product-copy h2, .product-faq-heading h2 { font-size:32px; } .ingredient-grid, .product-faq-grid { grid-template-columns:1fr; } .product-buy-card { box-shadow:10px 12px 0 #c8e5d9; } .product-callout { align-items:flex-start; flex-direction:column; margin-top:52px; margin-bottom:55px; padding:30px 24px; } .product-callout h2 { font-size:28px; } }