:root{--bg:oklch(98% .011 80);--ink:oklch(21% .025 67);--muted:oklch(46% .028 67);--line:oklch(86% .025 75);--paper:oklch(99% .009 80);--soft:oklch(95% .024 82);--accent:oklch(54% .115 42);--accent-2:oklch(64% .09 138);--danger:oklch(54% .16 28);--ok:oklch(50% .12 145);--radius:28px;--shadow:0 22px 70px color-mix(in oklch,var(--ink),transparent 88%);--ease:cubic-bezier(.32,.72,0,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
body[data-cat=terroir]{--bg:oklch(97% .018 78);--ink:oklch(22% .035 54);--muted:oklch(44% .04 63);--soft:oklch(93% .035 78);--accent:oklch(50% .13 45);--accent-2:oklch(59% .115 128)}
body[data-cat=beauty]{--bg:oklch(98% .015 25);--ink:oklch(23% .032 20);--muted:oklch(47% .028 24);--soft:oklch(95% .024 18);--accent:oklch(57% .108 18);--accent-2:oklch(67% .075 345)}
body[data-cat=home]{--bg:oklch(97% .01 230);--ink:oklch(20% .026 238);--muted:oklch(45% .03 235);--soft:oklch(94% .019 230);--accent:oklch(52% .11 244);--accent-2:oklch(62% .1 178)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 12% 8%,color-mix(in oklch,var(--accent-2),transparent 78%),transparent 34rem),linear-gradient(135deg,var(--bg),color-mix(in oklch,var(--soft),var(--paper) 40%));color:var(--ink);min-width:320px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:radial-gradient(color-mix(in oklch,var(--ink),transparent 55%) .55px,transparent .55px);background-size:14px 14px;z-index:20}
a{color:inherit}
.skip{position:absolute;inset-block-start:8px;inset-inline-start:8px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:999px;z-index:50;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{inline-size:auto;block-size:auto;overflow:visible;clip-path:none;outline:3px solid color-mix(in oklch,var(--accent),var(--paper) 28%);outline-offset:3px}
.page{max-width:1180px;margin:0 auto;padding:18px 16px 92px}
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(340px,.72fr);gap:22px;align-items:stretch;padding:22px 0 30px}
.hero-copy,.order-shell,.section-shell{border-radius:calc(var(--radius) + 8px);background:color-mix(in oklch,var(--ink),transparent 96%);padding:7px;box-shadow:var(--shadow);ring:1px solid transparent}
.hero-core,.order-card,.section-core{border:1px solid color-mix(in oklch,var(--line),var(--paper) 45%);background:linear-gradient(180deg,color-mix(in oklch,var(--paper),transparent 2%),color-mix(in oklch,var(--soft),var(--paper) 70%));border-radius:var(--radius);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--paper),transparent 18%)}
.hero-core{display:grid;grid-template-columns:minmax(0,.9fr) minmax(250px,1.1fr);gap:18px;padding:18px}
.product-media{position:relative;min-height:430px;border-radius:22px;overflow:hidden;background:var(--soft);isolation:isolate}
.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,color-mix(in oklch,var(--ink),transparent 82%));z-index:1}
.copy-block{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:8px 0}
.eyebrow,.pill{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;border:1px solid color-mix(in oklch,var(--accent),transparent 74%);background:color-mix(in oklch,var(--accent),transparent 91%);color:color-mix(in oklch,var(--accent),var(--ink) 38%);border-radius:999px;padding:7px 11px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.hero h1{font-size:clamp(34px,5.3vw,68px);line-height:.94;letter-spacing:-.055em;margin:18px 0 14px;max-width:10ch}
.hero p{font-size:18px;line-height:1.55;color:var(--muted);margin:0;max-width:58ch}
.price-panel{display:grid;gap:14px;padding:16px;border-radius:22px;background:color-mix(in oklch,var(--paper),transparent 12%);border:1px solid color-mix(in oklch,var(--line),transparent 20%)}
.price{font-size:32px;letter-spacing:-.04em;font-weight:900}
.compare{color:var(--muted);text-decoration:line-through;font-weight:650;margin-inline-start:8px}
.offer-list{display:grid;gap:10px}
.offer{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:18px;background:color-mix(in oklch,var(--paper),transparent 7%);padding:12px;cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease)}
.offer:hover,.offer:has(input:checked){transform:translateY(-1px);border-color:color-mix(in oklch,var(--accent),var(--line) 35%)}
.offer input{width:20px;height:20px;accent-color:var(--accent)}
.offer strong{font-size:15px}
.offer small{display:block;color:var(--muted);margin-top:3px}
.offer b{font-size:17px}
.trust-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.trust-item{border:1px solid var(--line);border-radius:20px;padding:14px;background:color-mix(in oklch,var(--paper),transparent 22%)}
.trust-item span{display:block;font-weight:850;margin-bottom:6px}
.trust-item p{font-size:14px;line-height:1.45}
.order-shell{position:sticky;top:16px;align-self:start}
.order-card{padding:18px}
.order-card h2,.section-core h2{font-size:28px;letter-spacing:-.035em;margin:0 0 8px}
.order-card>p{color:var(--muted);margin:0 0 14px;line-height:1.45}
.form-grid{display:grid;gap:11px}
label{display:grid;gap:6px;font-size:13px;font-weight:760;color:color-mix(in oklch,var(--ink),var(--muted) 20%)}
input,select,textarea{width:100%;border:1px solid var(--line);background:color-mix(in oklch,var(--paper),transparent 3%);color:var(--ink);border-radius:15px;padding:12px 13px;font:inherit;min-height:46px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
textarea{min-height:82px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent),transparent 84%)}
.hint{font-size:12px;color:var(--muted)}
.error{display:none;color:var(--danger);font-size:12px;font-weight:750}
.invalid .error{display:block}
.invalid input,.invalid select,.invalid textarea{border-color:var(--danger)}
.consent{font-size:12px;color:var(--muted);line-height:1.45}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:7px 7px 7px 18px;min-height:54px;font-weight:900;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease)}
.btn:hover{background:color-mix(in oklch,var(--ink),var(--accent) 15%)}
.btn:active{transform:scale(.985)}
.btn .dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in oklch,var(--paper),transparent 86%);transition:transform .18s var(--ease)}
.btn:hover .dot{transform:translateX(2px)}
[dir=rtl] .btn:hover .dot{transform:translateX(-2px)}
.status{min-height:22px;font-size:13px;font-weight:800;color:var(--ok);padding-top:8px}
.sections{display:grid;gap:18px}
.section-core{padding:24px}
.split{display:grid;grid-template-columns:.78fr 1fr;gap:18px;align-items:start}
.section-core p{color:var(--muted);line-height:1.65}
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.benefit{padding:16px;border-radius:20px;background:color-mix(in oklch,var(--soft),var(--paper) 35%);border:1px solid color-mix(in oklch,var(--line),transparent 24%)}
.benefit strong{display:block;font-size:17px;margin-bottom:6px}
.benefit p{margin:0;font-size:14px}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:18px;background:color-mix(in oklch,var(--paper),transparent 20%);padding:13px}
.faq summary{cursor:pointer;font-weight:850}
.faq p{margin:10px 0 0}
.review-empty{border:1px dashed color-mix(in oklch,var(--accent),transparent 55%);background:color-mix(in oklch,var(--accent),transparent 93%);border-radius:20px;padding:16px;color:var(--muted)}
.review{padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.footer{padding:28px 0 0;color:var(--muted);font-size:13px}
.sticky-cta{display:none;position:fixed;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:25;padding:8px;border-radius:999px;background:color-mix(in oklch,var(--paper),transparent 6%);box-shadow:0 12px 45px color-mix(in oklch,var(--ink),transparent 84%);border:1px solid color-mix(in oklch,var(--line),transparent 20%)}
.sticky-cta a{text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:860px){.page{padding:10px 10px calc(132px + env(safe-area-inset-bottom))}.hero{grid-template-columns:1fr;padding-top:8px}.hero-core{grid-template-columns:1fr;padding:10px}.product-media{min-height:auto;aspect-ratio:4/5}.hero h1{font-size:42px;max-width:11ch}.hero p{font-size:16px}.trust-rail,.benefits,.split{grid-template-columns:1fr}.order-shell{position:relative;top:auto}.section-core{padding:18px}body.sticky-cta-ready:not(.sticky-cta-hidden) .sticky-cta{display:block}}
@media (min-width:861px){.mobile-order-link{display:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}