/* ===== Tokens ===== */
:root {
  --paper: #F3F6F2;
  --paper-2: #E6ECE6;
  --ink: #1F2A26;
  --ink-soft: #4B5A54;
  --pine: #1E4D40;
  --pine-ink: #F3F6F2;
  --slim: #C98300;
  --cardio: #B23A48;
  --joints: #3F659E;
  --beauty: #7B4E6E;
  --hair: #8A5A2B;
  --men: #2F5D6B;
  --sleep: #4B4F9E;
  --line: #CBD5CE;
  --accent: var(--pine);
  --radius-s: 6px;
  --radius-l: 22px;
  --f-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Literata", Georgia, "Times New Roman", serif;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131A17; --paper-2: #1B2420; --ink: #E7EEE9; --ink-soft: #A9B8B0;
    --pine: #7FC4A8; --pine-ink: #10201A; --line: #2C3A34;
    --slim: #F0B43C; --cardio: #E97584; --joints: #8FB0E6; --beauty: #D69BC4; --hair: #E0A86E; --men: #7FC0D0; --sleep: #A9AEF0;
  }
}
.niche-slim   { --accent: var(--slim); }
.niche-cardio { --accent: var(--cardio); }
.niche-joints { --accent: var(--joints); }
.niche-beauty { --accent: var(--beauty); }
.niche-hair { --accent: var(--hair); }
.niche-men { --accent: var(--men); }
.niche-sleep { --accent: var(--sleep); }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.1875rem/1.65 var(--f-body);
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 650; margin-top: 2.2em; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 99; }

/* ===== Header ===== */
.adbar { background: var(--paper-2); color: var(--ink-soft); font: 500 .8rem/1.4 var(--f-head); padding: .45rem 0; }
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.logo { font: 750 1.35rem/1 var(--f-head); text-decoration: none; letter-spacing: -0.03em; display: flex; align-items: center; gap: .5rem; }
.logo-mark { width: 1.6rem; height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--pine) 50%, var(--line) 50%); transform: rotate(-30deg); }
.lang { position: relative; font-family: var(--f-head); font-size: .95rem; }
.lang summary { cursor: pointer; list-style: none; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + .4rem); margin: 0; padding: .4rem; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); min-width: 11rem; z-index: 20; box-shadow: 0 12px 30px -12px rgba(20,40,30,.35); }
.lang a { display: block; padding: .45rem .7rem; text-decoration: none; border-radius: 4px; }
.lang a:hover, .lang a[aria-current] { background: var(--paper-2); }

/* ===== Home hero ===== */
.hero { position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-block: 3rem 2rem; }
.hero-copy { max-width: 34rem; position: relative; z-index: 2; }
.hero-copy p { font-size: 1.25rem; color: var(--ink-soft); }
.hero-stage { position: relative; height: 320px; margin-inline: -1.25rem; }
.hero-stage canvas { width: 100%; height: 100%; }
.hero-stage .fallback { position: absolute; inset: 0; margin: auto; width: min(80%, 360px); height: auto; }
.hero-stage.is-live .fallback { display: none; }
@media (min-width: 860px) {
  .hero .wrap { grid-template-columns: 1.05fr 1fr; align-items: center; padding-block: 5rem 4rem; min-height: 72vh; }
  .hero-stage { height: 520px; margin: 0; }
}

/* ===== Topic rows (home) ===== */
.topics { padding-block: 1rem 5rem; }
.topics h2 { font-size: 1rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 1rem; }
.topic {
  display: grid; grid-template-columns: .5rem 1fr auto; gap: 1.25rem; align-items: center;
  padding: 1.6rem 0; border-top: 1px solid var(--line); text-decoration: none;
}
.topics .topic:last-child { border-bottom: 1px solid var(--line); }
.topic::before { content: ""; align-self: stretch; background: var(--accent); border-radius: 999px; transition: transform .25s ease; transform-origin: center; }
.topic:hover::before { transform: scaleY(1.25); }
.topic b { display: block; font: 700 clamp(1.5rem, 3.4vw, 2.3rem)/1.1 var(--f-head); letter-spacing: -0.02em; }
.topic span { color: var(--ink-soft); }
.topic i { font-style: normal; font-family: var(--f-head); font-weight: 600; color: var(--accent); white-space: nowrap; }
.markets { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; margin: 1rem 0 0; }
.markets a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--paper-2); text-decoration: none; font-family: var(--f-head); }

/* ===== Article ===== */
.article { padding-block: 2.5rem 4rem; }
.article > .wrap { width: min(100% - 2.5rem, 46rem); }
.article-head { max-width: 46rem; }
.crumbs { font: 500 .9rem var(--f-head); color: var(--ink-soft); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.dek { font-size: 1.3rem; color: var(--ink-soft); line-height: 1.5; }
.meta { font: 500 .9rem var(--f-head); color: var(--ink-soft); display: flex; gap: 1.2rem; flex-wrap: wrap; }
.meta span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); margin-right: .45rem; vertical-align: .05em; }
.body { max-width: var(--measure); }
.body > p:first-of-type::first-letter { font: 700 3.3em/.85 var(--f-head); float: left; margin: .08em .1em 0 0; color: var(--accent); }
.ingredients { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: 1rem 0 1rem 1.2rem; border-left: 3px solid var(--accent); margin-bottom: .8rem; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.ingredients h3 { margin-bottom: .2em; }
.ingredients p { margin: 0; }
.note { font-size: .95rem; color: var(--ink-soft); }
.habits { padding-left: 1.3rem; } .habits li { margin-bottom: .6rem; } .habits li::marker { color: var(--accent); font-weight: 700; }
.expect { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1.2rem 1.3rem; background: var(--paper-2); }
.faq details { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.faq summary { cursor: pointer; font: 600 1.1rem/1.4 var(--f-head); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .7rem 0 0; }

/* ===== Offer box with 3D pack ===== */
.offer { margin: 2.5rem 0; display: grid; gap: 1.5rem; align-items: center; padding: 1.6rem; border-radius: var(--radius-l); background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) { .offer { background: var(--paper-2); color: var(--ink); } }
@media (min-width: 620px) { .offer { grid-template-columns: 170px 1fr; } }
.offer h2 { margin: 0 0 .3em; font-size: 1.4rem; }
.offer p { margin: 0 0 1rem; opacity: .85; font-size: 1rem; }
.price { font: 700 1.8rem/1 var(--f-head); margin-bottom: 1rem; display: flex; gap: .7rem; align-items: baseline; }
.price s { font-size: 1.1rem; opacity: .55; font-weight: 500; }
.scene { perspective: 700px; height: 190px; display: grid; place-items: center; }
.tilt { --rx: -14deg; --ry: -28deg; }
.product-shot { max-height: 200px; width: auto; transform: perspective(700px) rotateX(calc(var(--rx) + 14deg)) rotateY(calc(var(--ry) + 28deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
.offer .scene:has(.product-shot) { height: auto; background: #fff; border-radius: 14px; padding: .8rem; }
.pack { --rx: -14deg; --ry: -28deg; width: 92px; height: 150px; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pack .face { position: absolute; inset: 0; border-radius: 6px; display: grid; place-items: center; text-align: center; padding: .4rem; font: 700 .8rem/1.15 var(--f-head); }
.pack .front { background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color: #fff; transform: translateZ(26px); }
.pack .back { background: color-mix(in srgb, var(--accent) 55%, #000); transform: rotateY(180deg) translateZ(26px); }
.pack .side { width: 52px; left: 20px; background: color-mix(in srgb, var(--accent) 70%, #000); transform: rotateY(90deg) translateZ(46px); }
.pack .side2 { width: 52px; left: 20px; background: color-mix(in srgb, var(--accent) 70%, #000); transform: rotateY(-90deg) translateZ(46px); }
.pack .top { height: 52px; top: 49px; background: color-mix(in srgb, var(--accent) 80%, #fff); transform: rotateX(90deg) translateZ(75px); }
.pack .front small { display: block; font-weight: 500; opacity: .85; margin-top: .3rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.4rem; padding: .9rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: 700 1.1rem/1.2 var(--f-head); text-decoration: none; text-align: center;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.cod { font-size: .9rem; opacity: .75; margin-top: .8rem; }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s; z-index: 30; }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

.more { margin-top: 3rem; }
.more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.more a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-family: var(--f-head); }

/* ===== Embedded order form ===== */
.order-form { margin-top: 3rem; padding: 1.6rem; border-radius: var(--radius-l); background: var(--paper-2); border: 2px solid var(--accent); scroll-margin-top: 1rem; }
.order-form h2 { margin-top: 0; }
.order-form iframe { width: 100%; height: 380px; border: 0; display: block; background: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.footnotes { margin-top: 2.5rem; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }
.footnotes p { margin: 0 0 .6rem; }

/* ===== Footer, legal, cookies ===== */
.site-foot { border-top: 1px solid var(--line); padding-block: 2.5rem 6rem; font-size: .95rem; color: var(--ink-soft); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1rem; font-family: var(--f-head); }
.legal { max-width: var(--measure); padding-block: 3rem 5rem; }
.cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 30rem; margin-inline: auto; padding: 1rem 1.2rem; border-radius: var(--radius-s); background: var(--ink); color: var(--paper); font-size: .95rem; z-index: 50; display: none; box-shadow: 0 20px 40px -15px rgba(0,0,0,.5); }
.cookie.show { display: block; }
.cookie p { margin: 0 0 .8rem; }
.cookie button { font: 600 .95rem var(--f-head); padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; margin-right: .5rem; }
.cookie button[data-consent="yes"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   Motion & shop layer
   ========================================================= */

/* ---- Hero headline: one orchestrated entrance ---- */
.rise span { display: inline-block; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
.rise-after { animation: fadeUp .8s cubic-bezier(.2,.8,.2,1) .55s both; }
@keyframes rise { from { opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(4px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }

/* ---- Product grid ---- */
.shop { padding-block: 1rem 5rem; }
.shop h2 { margin: 0 0 2.2rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.cards { display: grid; gap: 3.2rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); padding-top: 2.5rem; }
.card {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-radius: var(--radius-l); background: var(--paper);
  border: 1px solid var(--line);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s;
  animation: cardIn .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d) * 90ms + 500ms);
}
@keyframes cardIn { from { opacity: 0; transform: perspective(900px) translateY(30px) rotateX(8deg); } }
.card::after { /* soft light that follows the pointer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.35), transparent 45%);
}
.card:hover { border-color: var(--accent); box-shadow: 0 30px 50px -28px color-mix(in srgb, var(--accent) 70%, #000); }
.card:hover::after { opacity: 1; }
.card-media {
  position: relative; height: 190px; border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 8%, transparent) 70%);
  display: grid; place-items: end center;
}
.card-media img { /* product pops out above the card edge */
  height: 235px; width: auto; margin-top: -45px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.28));
  transform: translateZ(40px); transition: transform .5s cubic-bezier(.2,.8,.2,1);
  animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1.3s);
}
.card:hover .card-media img { transform: translateY(-10px) scale(1.04); }
@keyframes bob { 50% { translate: 0 -7px; } }
.card-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card-kicker { font: 600 .9rem var(--f-head); color: var(--accent); }
.card h3 { font-size: 1.45rem; margin: 0; }
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.card .price { margin: .6rem 0 .2rem; font-size: 1.6rem; }
.card-foot { margin-top: auto; padding-top: .9rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; font: 600 .9rem var(--f-head); }
.card-foot .cod { color: var(--ink-soft); font-weight: 500; }
.card-cta { padding: .55rem 1rem; border-radius: 999px; background: var(--accent); color: #fff; transition: padding .3s; }
.card:hover .card-cta { padding-inline: 1.25rem; }

/* ---- Prices: struck old price draws in, discount pops ---- */
.price .old { position: relative; text-decoration: none; font-size: .6em; opacity: .6; font-weight: 500; }
.price .old::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: currentColor; transform-origin: left; transform: scaleX(1); }
.price .save { font: 700 .5em/1 var(--f-head); padding: .35em .55em; border-radius: 999px; background: var(--cardio); color: #fff; align-self: center; }
.offer .price .old::after, .order-form .price .old::after { transform: scaleX(0); transition: transform .6s cubic-bezier(.6,0,.2,1) .25s; }
.offer .price .save, .order-form .price .save { transform: scale(0) rotate(-12deg); transition: transform .5s cubic-bezier(.3,1.6,.4,1) .75s; }
.in .price .old::after { transform: scaleX(1); }
.in .price .save { transform: scale(1) rotate(-4deg); }

/* ---- Button shine: runs once when the offer comes into view, and on hover ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); }
.in .btn::after { animation: shine 1.1s ease 1.1s; }
.btn:hover::after { animation: shine .9s ease; }
@keyframes shine { to { transform: translateX(120%); } }

/* ---- Article header with floating product ---- */
.article-head.has-shot { max-width: none; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
  .article > .wrap:has(.has-shot) { width: min(100% - 2.5rem, 62rem); }
  .article-head.has-shot { grid-template-columns: 1fr 290px; gap: 3rem; }
  .article:has(.has-shot) .body { margin-inline: 0; }
}
.head-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.head-price { font: 700 1.5rem var(--f-head); }
.head-shot { --rx: 0deg; --ry: 0deg; margin: 0; position: relative; display: grid; place-items: center; padding: 1.5rem 1rem 2.4rem;
  border-radius: var(--radius-l); background: radial-gradient(100% 80% at 50% 90%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
  animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) .2s both; }
.head-shot img { max-height: 320px; width: auto; animation: bob 5.5s ease-in-out infinite; filter: drop-shadow(0 22px 20px rgba(0,0,0,.25)); }
.head-shot .shadow { position: absolute; bottom: 1.1rem; width: 55%; height: 14px; border-radius: 50%; background: rgba(0,0,0,.18); filter: blur(6px); animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleX(.85); opacity: .7; } }
@media (max-width: 899px) { .head-shot img { max-height: 240px; } .head-shot { order: -1; } }

/* ---- Order form: glow when the visitor jumps to it ---- */
.order-form.flash { animation: flash 1.4s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } }
.price { flex-wrap: wrap; row-gap: .4rem; }
.card-cta { white-space: nowrap; }
.card-foot .cod { font-size: .85rem; line-height: 1.25; }
.offer .scene:has(.product-shot) { background: radial-gradient(90% 80% at 50% 85%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 75%); }

/* ---- Category chips (small filters above the products) ---- */
.shop-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: .5rem; }
.shop-head h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip[data-filter="all"] { --accent: var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem .38rem .7rem; border-radius: 999px; cursor: pointer;
  font: 600 .88rem/1 var(--f-head); color: var(--ink); background: transparent;
  border: 1.5px solid var(--line); transition: background .25s, color .25s, border-color .25s, transform .15s;
}
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); transition: transform .3s cubic-bezier(.3,1.6,.4,1); }
.chip span { font-weight: 500; font-size: .78rem; opacity: .6; }
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip[aria-pressed="true"]::before { background: #fff; transform: scale(1.25); }
.chip[aria-pressed="true"] span { opacity: .85; }
@media (prefers-color-scheme: dark) { .chip[data-filter="all"] { --accent: var(--pine); } .chip[aria-pressed="true"] { color: var(--pine-ink); } }

/* filtering motion */
.card.is-out { opacity: 0; transform: perspective(900px) scale(.92) translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.card.is-hidden { display: none; }
.card.is-in { animation: cardIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 60ms); }

/* small tags on each card */
.card-tags { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; font: 600 .82rem var(--f-head); }
.card-tags .tag { padding: .22rem .6rem; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.card-tags .where { color: var(--ink-soft); font-weight: 500; }

/* "other products" row under a product page */
.more-products { padding-top: 0; }
.crumbs a + a, .crumbs a { color: inherit; }

/* =========================================================
   Product detail page
   ========================================================= */
.pdp .crumbs { padding-top: 1.6rem; margin-bottom: 1rem; }
.pdp .crumbs span { color: var(--ink); }
.tag { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font: 600 .85rem var(--f-head); color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }

.pdp-hero { display: grid; gap: 2rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .pdp-hero { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; } }

/* gallery */
.pdp-gallery { position: relative; }
@media (min-width: 900px) { .pdp-gallery { position: sticky; top: 1.5rem; } }
.stage {
  --rx: 0deg; --ry: 0deg; position: relative; margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 88%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(90% 70% at 20% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--paper-2);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.stage::before { /* soft rings behind the product */
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 0 0 38px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 80px color-mix(in srgb, var(--accent) 3%, transparent);
  animation: spinIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes spinIn { from { opacity: 0; transform: scale(.7) rotate(-30deg); } }
.stage img { position: absolute; inset: 0; margin: auto; height: 74%; width: 80%; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 26px 22px rgba(0,0,0,.25)); opacity: 0; transform: scale(.94); transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
.stage img.on { opacity: 1; transform: none; animation: bob 5.5s ease-in-out infinite, heroIn 1s cubic-bezier(.2,.8,.2,1) .15s backwards; }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.stage .shadow { position: absolute; bottom: 9%; width: 42%; height: 18px; border-radius: 50%; background: rgba(0,0,0,.2); filter: blur(8px); animation: breathe 5.5s ease-in-out infinite; }
.burst { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; width: 4.6rem; height: 4.6rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--cardio); color: #fff; font: 800 1.2rem var(--f-head); transform: rotate(-10deg);
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); animation: pop .6s cubic-bezier(.3,1.6,.4,1) .9s backwards; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.thumbs { display: flex; gap: .6rem; margin-top: .8rem; }
.thumbs button { width: 4.2rem; aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--line); background: var(--paper-2); padding: .3rem; cursor: pointer; }
.thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* buy column */
.pdp-buy h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: .6rem 0 .4rem; }
.pdp-dek { font-size: 1.2rem; color: var(--ink-soft); }
.price.big { font-size: 2.6rem; margin: 1rem 0 1.2rem; gap: .8rem; display: flex; align-items: baseline; }
.price.big .now { font-family: var(--f-head); font-weight: 800; letter-spacing: -.02em; }
.pdp-buy .price.big .old::after { transform: scaleX(0); animation: strike .6s cubic-bezier(.6,0,.2,1) .7s forwards; }
@keyframes strike { to { transform: scaleX(1); } }
.pdp-buy .price.big .save { animation: pop .5s cubic-bezier(.3,1.6,.4,1) 1.1s backwards; transform: rotate(-4deg); }
.trust { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; font: 500 1rem var(--f-head); }
.trust li { display: flex; align-items: center; gap: .6rem; }
.trust .ico { width: 1.35rem; height: 1.35rem; color: var(--accent); flex: none; }
.order-card { border-radius: 22px; padding: 1.4rem 1.4rem .6rem; background: var(--paper); border: 2px solid var(--accent);
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--accent) 80%, #000); scroll-margin-top: 1rem; }
.order-card h2 { margin: 0 0 .3rem; font-size: 1.45rem; }
.order-card p { font-size: .98rem; color: var(--ink-soft); margin-bottom: .6rem; }
.order-card iframe { width: 100%; height: 360px; border: 0; display: block; }
.order-card.flash { animation: flash 1.4s ease; }

/* at a glance band */
.band { background: var(--paper-2); padding-block: 3.5rem; }
.band h2 { margin: 0 0 1.8rem; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.features li { background: var(--paper); border-radius: 20px; padding: 1.5rem; border: 1px solid var(--line); transition: transform .3s, border-color .3s; }
.features li:hover { transform: translateY(-4px); border-color: var(--accent); }
.features .ico { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom: .9rem; }
.features h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.features p { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }

/* details */
.pdp-details { max-width: 52rem; padding-block: 1rem 3rem; }
.block { margin-top: 3.2rem; }
.block > h2 { margin-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; counter-reset: s; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { position: relative; padding-top: 3.4rem; }
.steps .num { position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 800 1.15rem var(--f-head); }
@media (min-width: 720px) { .steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.3rem; left: 3.2rem; right: -.6rem; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); opacity: .5; } }
.steps h3 { margin: 0 0 .3rem; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.55; }
.inside { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.inside li { padding: 1rem 1.1rem; border-radius: 16px; background: var(--paper-2); display: grid; gap: .2rem; }
.inside b { font: 700 1.05rem var(--f-head); color: var(--accent); }
.inside span { font-size: .98rem; line-height: 1.5; }
.guide h2 { margin: .6rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.guide h3 { margin-top: 1.8rem; }
.guide .expect { margin-top: 1.6rem; }
.guide .expect h3 { margin-top: 0; }

/* ready-to-order band */
.ready { margin-top: 3.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: center;
  padding: 1.4rem 1.6rem; border-radius: 24px; background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) { .ready { background: var(--paper-2); color: var(--ink); } }
.ready img { height: 110px; width: auto; filter: drop-shadow(0 12px 12px rgba(0,0,0,.35)); animation: bob 5s ease-in-out infinite; }
.ready h2 { margin: 0; font-size: 1.4rem; }
.ready .price { margin: .4rem 0 0; font-size: 1.6rem; }
.ready .btn { grid-column: 1 / -1; }
@media (min-width: 720px) { .ready { grid-template-columns: auto 1fr auto; } .ready .btn { grid-column: auto; } }
.block .note { margin-top: 1rem; }