/* Kindred — soft, airy, clinical-but-warm skincare look. */
:root {
  --heading-weight: 300;
  --heading-tracking: -0.03em;
  --radius: 24px;
  --radius-button: 999px;
}
product-form, skin-quiz, bundle-builder, before-after { display: block; }
.header { background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); }
.header__logo { font-weight: 300; letter-spacing: .3em; text-transform: uppercase; font-size: 1.15rem; }
.header__logo-mark { display: none; }
.announcement { background: var(--color-surface); color: var(--color-text); letter-spacing: .04em; }
.hero { background: var(--color-surface); color: var(--color-text); }
.hero::after { background: linear-gradient(90deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 60%, transparent) 45%, transparent 70%); opacity: 1; }
.hero .eyebrow { color: var(--color-accent); opacity: 1; }
.hero .button--ghost { color: var(--color-text); }
.hero__heading { font-weight: 300; }
.section__title, .product__title { font-weight: 300; }
.card__media { border-radius: var(--radius); }
.card__title { font-weight: 500; }
.usp-bar { background: var(--color-bg); }
.footer { background: var(--color-dark); }
.chip--ingredient { background: color-mix(in srgb, var(--color-dark) 10%, var(--color-bg)); }

/* Rating + skin types */
.rating { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; text-decoration: none; color: var(--muted); }
.star--empty { opacity: .25; }
.skin-types__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.skin-type { padding: .35rem .9rem .35rem .75rem; border-radius: 999px; border: 1px dashed var(--border); font-size: .85rem; color: var(--muted); }
.skin-type.is-match { border-style: solid; border-color: var(--color-dark); color: var(--color-text); }
.skin-type.is-match::before { content: '✓ '; color: var(--color-dark); font-weight: 700; }

/* Subscribe options (shared markup) */
.purchase { display: grid; gap: .6rem; }
.purchase__option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .25rem .75rem; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 18px; cursor: pointer; }
.purchase__option:has(input:checked) { border-color: var(--color-dark); background: color-mix(in srgb, var(--color-dark) 6%, var(--color-bg)); }
.purchase__option input { accent-color: var(--color-dark); margin: 0; }
.purchase__label, .purchase__price { font-weight: 600; }
.purchase__details { grid-column: 2 / -1; display: none; gap: .4rem; }
.is-subscribing .purchase__details { display: grid; }
.purchase__details small { color: var(--muted); }

/* Quiz */
.quiz { display: block; text-align: center; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: var(--color-bg); box-shadow: 0 30px 60px -40px rgb(60 40 30 / .35); }
.quiz__intro .rte { color: var(--muted); max-width: 32rem; margin: 0 auto 2rem; }
.quiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__progress { font-size: .8rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.quiz__bar { height: 4px; border-radius: 999px; background: var(--color-surface); margin: 0 auto 2rem; max-width: 18rem; overflow: hidden; }
.quiz__bar span { display: block; height: 100%; background: var(--color-accent); transition: width .4s var(--ease); }
.quiz__question { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 auto 1.75rem; padding: 0; float: none; width: 100%; }
.quiz__answers { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: left; }
.quiz__answer { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 16px; cursor: pointer; transition: border-color .15s, transform .15s; }
.quiz__answer:hover { border-color: var(--color-text); transform: translateY(-2px); }
.quiz__answer:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
.quiz__answer input { accent-color: var(--color-accent); }
.quiz__nav { margin-top: 1.5rem; }
.quiz__products { text-align: left; margin-block: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: center; }
.quiz__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Bundle builder */
.bundle__sub { color: var(--muted); margin: 0; }
.bundle { display: grid; gap: 2rem; }
@media (min-width: 990px) { .bundle { grid-template-columns: 1fr 340px; align-items: start; } .bundle__summary { position: sticky; top: 7rem; } }
.bundle__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.bundle__item { display: grid; gap: .75rem; padding: .75rem; border-radius: 20px; border: 2px solid transparent; background: var(--color-surface); transition: border-color .2s; }
.bundle__item.is-selected { border-color: var(--color-accent); }
.bundle__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.bundle__info { display: grid; font-size: .9rem; }
.bundle__title { font-weight: 600; text-decoration: none; }
.bundle__price { color: var(--muted); }
.bundle__added-label, [aria-pressed="true"] .bundle__add-label { display: none; }
[aria-pressed="true"] .bundle__added-label { display: inline; }
[data-bundle-toggle][aria-pressed="true"] { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.bundle__summary { padding: 1.75rem; border-radius: var(--radius); background: var(--color-bg); border: 1px solid var(--border); }
.bundle__summary-title { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.bundle__slots { display: flex; gap: .75rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.bundle__slot { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 16px; border: 2px dashed var(--border); color: var(--muted); font-weight: 600; }
.bundle__slot.is-filled { border: 0; }
.bundle__slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.bundle__remove { position: absolute; top: -.4rem; right: -.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: var(--color-text); color: var(--color-bg); cursor: pointer; line-height: 1; }
.bundle__totals { display: flex; align-items: baseline; gap: .6rem; font-size: 1.5rem; }
.bundle__totals s { font-size: 1rem; color: var(--muted); }
.bundle__saving { color: var(--color-accent); font-size: .9rem; font-weight: 600; }

/* Before / after */
.ba { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; user-select: none; }
.ba__img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.ba__handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--color-text); box-shadow: var(--shadow); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible ~ .ba__handle::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ba__label { position: absolute; bottom: 1rem; padding: .3rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .85); font-size: .8rem; font-weight: 600; pointer-events: none; }
.ba__label--before { left: 1rem; }
.ba__label--after { right: 1rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 0; }
.stats dt { font-family: var(--font-heading); font-weight: 300; font-size: 3rem; color: var(--color-accent); line-height: 1; }
.stats dd { margin: .3rem 0 0; color: var(--muted); }