/* ==========================================================================
   Luxe Income Lounge — Design System
   shadcn/ui-inspired component language, adapted for a premium beauty brand.
   Change the tokens below to re-theme the entire site.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Color */
  --bg: #FAF7F2;              /* warm ivory */
  --bg-soft: #F3EDE5;         /* sand */
  --bg-deep: #EAE1D5;         /* deeper sand */
  --surface: #FFFFFF;
  --surface-warm: #FFFDF9;
  --fg: #1D1A17;              /* near-black */
  --fg-soft: #3A342F;
  --muted-fg: #6B6159;
  --border: #E6DED3;
  --border-strong: #D3C7B8;
  --accent: #A57465;          /* dusty rose / mauve-brown */
  --accent-strong: #865646;   /* accessible accent for text */
  --accent-soft: #F1E4DD;
  --champagne: #C9AE8A;
  --sale: #9B3D32;
  --success: #4E6A50;
  --success-soft: #E6EEE3;
  --danger: #A33A2E;
  --overlay: rgba(29, 26, 23, .45);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(165, 116, 101, .55);

  /* Type */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;

  /* Shape & depth */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(29, 26, 23, .05);
  --shadow: 0 10px 30px -12px rgba(29, 26, 23, .18);
  --shadow-lg: 0 24px 60px -20px rgba(29, 26, 23, .28);

  /* Layout */
  --container: 1360px;
  --gutter: 16px;
  --header-h: 64px;
  --section-y: clamp(56px, 8vw, 112px);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
  --dur-slow: 320ms;
}

@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 72px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p a, .prose a, .text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }
hr, .separator { border: 0; height: 1px; background: var(--border); }
table { border-collapse: collapse; width: 100%; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); transition: top var(--dur); }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.container--mid { max-width: 1120px; }
.section { padding-block: var(--section-y); }
.section--sand { background: var(--bg-soft); }
.section--white { background: var(--surface); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section + .section:not(.section--sand):not(.section--white) { padding-top: 0; }

/* ---------- 3. Typography ---------- */
.display, .h1, .h2, .h3, .h4, h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: var(--fg); }
h4, h5, h6 { font-weight: 500; }
.display { font-size: clamp(3rem, 9vw, 6.75rem); line-height: .92; letter-spacing: -.02em; }
.h1, h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); }
.h2, h2 { font-size: clamp(2.05rem, 3.6vw, 3.1rem); }
.h3, h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.15; }
.h4 { font-size: 1.35rem; line-height: 1.2; }
.italic, em.serif { font-style: italic; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; display: block; }
.lead { font-size: var(--fs-lg); line-height: 1.65; color: var(--fg-soft); }
.muted { color: var(--muted-fg); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.upper { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 500; }
.text-center { text-align: center; }
.prose { max-width: 70ch; color: var(--fg-soft); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.4em; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap var(--dur) var(--ease), color var(--dur); white-space: nowrap; }
.link-arrow:hover { gap: 12px; color: var(--accent-strong); }
.link-arrow .icon { width: 14px; height: 14px; }
.link-btn { font-size: var(--fs-sm); color: var(--muted-fg); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur); }
.link-btn:hover { color: var(--fg); }

.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- 4. Components ---------- */

/* Button */
.btn {
  --btn-h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding-inline: 26px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur);
}
.btn .icon { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn--sm { --btn-h: 38px; padding-inline: 16px; font-size: 11px; }
.btn--lg { --btn-h: 54px; padding-inline: 34px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { background: #000; }
.btn--accent { background: var(--accent-strong); color: #fff; }
.btn--accent:hover { background: #714536; }
.btn--secondary { background: var(--bg-soft); color: var(--fg); border-color: var(--bg-soft); }
.btn--secondary:hover { background: var(--bg-deep); border-color: var(--bg-deep); }
.btn--outline { border-color: var(--fg); color: var(--fg); background: transparent; }
.btn--outline:hover { background: var(--fg); color: var(--bg); }
.btn--light { background: var(--surface); color: var(--fg); }
.btn--light:hover { background: var(--bg-soft); }
.btn--outline-light { border-color: rgba(255,255,255,.9); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--fg); }
.btn--ghost { color: var(--fg); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--link { height: auto; padding: 0; border-bottom: 1px solid currentColor; border-radius: 0; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.5px solid currentColor; border-color: var(--bg) var(--bg) transparent transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn--outline.is-loading::after, .btn--secondary.is-loading::after, .btn--light.is-loading::after { border-color: var(--fg) var(--fg) transparent transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-full); color: var(--fg); transition: background-color var(--dur); }
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn .icon { width: 21px; height: 21px; }
.count-dot { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--fg); color: var(--bg); font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; }
.count-dot.is-bump { animation: bump .35s var(--ease); }
@keyframes bump { 50% { transform: scale(1.3); } }

/* Badge */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.badge--dark { background: var(--fg); color: var(--bg); }
.badge--light { background: var(--surface); color: var(--fg); border-color: var(--border); }
.badge--outline { background: rgba(255,255,255,.85); color: var(--fg); border-color: var(--fg); }
.badge--accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge--sale { background: var(--sale); color: #fff; }
.badge--muted { background: var(--bg-soft); color: var(--fg-soft); }
.badge--success { background: var(--success-soft); color: var(--success); }

/* Form controls */
.field { display: grid; gap: 7px; }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--fg); }
.label__req { color: var(--accent-strong); }
.label__opt { color: var(--muted-fg); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font-size: var(--fs-md);
  transition: border-color var(--dur), box-shadow var(--dur);
  appearance: none;
}
.input--lg { min-height: 54px; }
.textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: #9A8F85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted-fg); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(165,116,101,.18); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea, .input.has-error { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--muted-fg); }
.field__error { font-size: var(--fs-xs); color: var(--danger); min-height: 0; }
.field__error:empty { display: none; }
.select-wrap { position: relative; }
.select { padding-right: 40px; cursor: pointer; }
.select-wrap__icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--muted-fg); }
.form-grid { display: grid; gap: 18px; }
.form-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.form-success { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--success-soft); color: var(--success); border-radius: var(--radius-lg); }
.form-success .icon { width: 22px; height: 22px; margin-top: 1px; }
.form-success strong { display: block; color: var(--fg); font-weight: 500; }

/* Checkbox & radio */
.check, .radio { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: var(--fs-base); padding: 5px 0; user-select: none; }
.check__input, .radio__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface); transition: background var(--dur), border-color var(--dur); flex-shrink: 0; }
.check__box .icon { width: 13px; height: 13px; color: var(--bg); opacity: 0; transform: scale(.6); transition: opacity var(--dur), transform var(--dur) var(--ease); stroke-width: 2.4; }
.check__input:checked + .check__box { background: var(--fg); border-color: var(--fg); }
.check__input:checked + .check__box .icon { opacity: 1; transform: none; }
.check__input:focus-visible + .check__box, .radio__input:focus-visible + .radio__dot { box-shadow: var(--ring); }
.check:hover .check__box { border-color: var(--fg); }
.check__label { flex: 1; }
.check__count { font-size: var(--fs-xs); color: var(--muted-fg); }
.check.is-empty { opacity: .45; }
.radio__dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); flex-shrink: 0; display: grid; place-items: center; transition: border-color var(--dur); }
.radio__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); transform: scale(0); transition: transform var(--dur) var(--ease); }
.radio__input:checked + .radio__dot { border-color: var(--fg); }
.radio__input:checked + .radio__dot::after { transform: scale(1); }

/* Option cards (delivery, quiz, payment) */
.option-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.option-card:hover { border-color: var(--muted-fg); }
.option-card:has(input:checked) { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); background: var(--surface-warm); }
.option-card:has(input:focus-visible) { box-shadow: var(--ring); }
.option-card input { position: absolute; opacity: 0; }
.option-card__body { flex: 1; display: grid; gap: 2px; }
.option-card__title { font-weight: 500; }
.option-card__desc { font-size: var(--fs-sm); color: var(--muted-fg); }
.option-card__end { font-weight: 500; }
.option-card .radio__dot { pointer-events: none; }
.option-card input:checked ~ .radio__dot { border-color: var(--fg); }
.option-card input:checked ~ .radio__dot::after { transform: scale(1); }
.option-list { display: grid; gap: 10px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-size: var(--fs-sm); background: var(--surface); transition: border-color var(--dur), background var(--dur); white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; color: var(--muted-fg); }
.chip:hover { border-color: var(--fg); }
.chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip.is-active .icon { color: var(--bg); }
.chip--remove { background: var(--bg-soft); border-color: var(--bg-soft); }
.chip--remove:hover { border-color: var(--fg); }

.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 11px; color: var(--muted-fg); background: var(--surface); }

/* Stars / rating / price */
.stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.stars svg { width: 13px; height: 13px; display: inline-block; }
.stars--md svg { width: 16px; height: 16px; }
.stars--lg svg { width: 20px; height: 20px; }
.stars__base { display: inline-flex; gap: 1px; fill: var(--border-strong); }
.stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; display: inline-flex; gap: 1px; fill: var(--fg); white-space: nowrap; }
.rating { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--fg-soft); }
.rating__n { color: var(--muted-fg); }
.price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 500; }
.price__now--sale { color: var(--sale); }
.price__was { color: var(--muted-fg); font-weight: 400; font-size: .9em; }
.swatch-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); vertical-align: middle; }

/* Quantity selector */
.qty { display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.qty__btn { width: 40px; height: 100%; display: grid; place-items: center; color: var(--fg-soft); transition: color var(--dur), background var(--dur); }
.qty__btn:hover { color: var(--fg); background: var(--bg-soft); }
.qty__btn .icon { width: 15px; height: 15px; }
.qty__input { width: 36px; height: 100%; border: 0; text-align: center; background: transparent; font-weight: 500; -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; }
.qty:focus-within { border-color: var(--fg); }
.qty--sm { height: 36px; }
.qty--sm .qty__btn { width: 32px; }
.qty--sm .qty__input { width: 28px; font-size: var(--fs-sm); }

/* Accordion */
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__heading { font: inherit; margin: 0; }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; text-align: left; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.accordion__trigger:hover span { color: var(--accent-strong); }
.accordion__icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }
.accordion__content { padding-bottom: 20px; color: var(--fg-soft); }
.accordion--faq .accordion__trigger { font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: 0; text-transform: none; font-weight: 500; padding: 22px 0; }
.accordion--faq .accordion__content { max-width: 70ch; }
.accordion--filters .accordion__trigger { padding: 16px 0; }
.accordion--filters .accordion__content { padding-bottom: 16px; }

/* Tabs */
.tabs__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__trigger { position: relative; padding: 14px 18px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; transition: color var(--dur); }
.tabs__trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--fg); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.tabs__trigger:hover { color: var(--fg); }
.tabs__trigger[aria-selected="true"], .tabs__trigger[aria-current="true"] { color: var(--fg); }
.tabs__trigger[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel { animation: fade-in var(--dur-slow) var(--ease); }
.tabs--pill .tabs__list { border: 0; background: var(--bg-soft); padding: 4px; border-radius: var(--radius-lg); display: inline-flex; max-width: 100%; }
.tabs--pill .tabs__trigger { border-radius: var(--radius); padding: 10px 16px; }
.tabs--pill .tabs__trigger::after { display: none; }
.tabs--pill .tabs__trigger[aria-selected="true"], .tabs--pill .tabs__trigger[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted-fg); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--fg); }
.breadcrumb__sep { width: 12px; height: 12px; }

/* Pagination */
.pagination ul { display: flex; justify-content: center; gap: 6px; }
.pagination__link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); transition: border-color var(--dur), background var(--dur); }
a.pagination__link:hover { border-color: var(--fg); }
.pagination__link.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pagination__link.is-disabled { opacity: .35; }
.pagination__link .icon { width: 16px; height: 16px; }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-deep) 50%, var(--bg-soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
.skeleton--media { aspect-ratio: 4 / 5; }
.skeleton--line { height: 12px; margin-bottom: 12px; }
.skeleton--title { height: 32px; margin-bottom: 16px; width: 80%; }
.skeleton--btn { height: 46px; margin-top: 18px; }
.w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Avatar */
.avatar { display: inline-block; border-radius: 50%; overflow: hidden; background: var(--bg-deep); flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 26px; height: 26px; }
.avatar--sm { width: 36px; height: 36px; }
.avatar--md { width: 48px; height: 48px; }
.avatar--lg { width: 72px; height: 72px; }
.avatar--xl { width: 96px; height: 96px; }
.avatar--initials { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.05rem; color: var(--accent-strong); background: var(--accent-soft); }

/* Progress */
.progress { height: 4px; background: var(--bg-deep); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--fg); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }

/* Tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 6px 10px; background: var(--fg); color: var(--bg); font-size: 11px; letter-spacing: .02em; text-transform: none; white-space: nowrap; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur) var(--ease); z-index: 5; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Toast */
.toaster { position: fixed; z-index: 150; bottom: 16px; right: 16px; left: 16px; display: grid; gap: 10px; justify-items: end; pointer-events: none; }
@media (min-width: 640px) { .toaster { left: auto; bottom: 24px; right: 24px; width: 380px; } }
.toast { pointer-events: auto; width: 100%; display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: toast-in var(--dur-slow) var(--ease); }
.toast.is-leaving { animation: toast-out var(--dur) var(--ease) forwards; }
.toast__media { width: 48px; height: 60px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.toast__media img { width: 100%; height: 100%; object-fit: cover; }
.toast__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex-shrink: 0; }
.toast__icon .icon { width: 18px; height: 18px; }
.toast--error .toast__icon { background: #F6E3DF; color: var(--danger); }
.toast__body { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.toast__title { font-weight: 500; color: var(--fg); }
.toast__text { color: var(--muted-fg); }
.toast__action { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid currentColor; white-space: nowrap; }
.toast__close { color: var(--muted-fg); }
.toast__close .icon { width: 16px; height: 16px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Overlay: Dialog & Sheet */
.dialog, .sheet { position: fixed; inset: 0; z-index: 120; }
.overlay-backdrop { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.is-open > .overlay-backdrop { opacity: 1; }
.dialog { display: grid; place-items: center; padding: 16px; }
.dialog__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); overscroll-behavior: contain; }
.dialog.is-open .dialog__panel { opacity: 1; transform: none; }
.dialog__panel--wide { max-width: 980px; }
.dialog__close { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(255,255,255,.9); }
.dialog__close--light { background: rgba(255,255,255,.92); }
.sheet__panel { position: absolute; top: 0; bottom: 0; width: min(440px, 100%); background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); transition: transform var(--dur-slow) var(--ease); overscroll-behavior: contain; }
.sheet--right .sheet__panel { right: 0; transform: translateX(100%); }
.sheet--left .sheet__panel { left: 0; transform: translateX(-100%); width: min(400px, 92vw); }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--border); min-height: 64px; }
.sheet__title { font-size: 1.6rem; }
.sheet__count { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--muted-fg); letter-spacing: 0; }
.sheet__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.sheet__footer { border-top: 1px solid var(--border); padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); }

/* Command (search) */
.dialog--command { align-items: start; padding-top: clamp(16px, 10vh, 120px); }
.command { max-width: 680px; max-height: min(720px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.command__input-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--border); }
.command__icon { color: var(--muted-fg); }
.command__input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: 1.05rem; }
.command__input:focus { outline: none; }
.command__input::-webkit-search-cancel-button { display: none; }
.command__body { overflow-y: auto; padding: 8px 8px 16px; flex: 1; }
.command__group { padding: 12px 12px 4px; }
.command__label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 10px; }
.command__list { display: grid; gap: 2px; }
.command__item { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--radius); transition: background var(--dur); }
.command__item:hover, .command__item.is-active { background: var(--bg-soft); }
.command__thumb { width: 44px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); flex-shrink: 0; }
.command__thumb img { width: 100%; height: 100%; object-fit: cover; }
.command__text { flex: 1; min-width: 0; display: grid; }
.command__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command__name mark { background: var(--accent-soft); color: inherit; border-radius: 2px; }
.command__meta { font-size: var(--fs-xs); color: var(--muted-fg); }
.command__price { font-size: var(--fs-sm); font-weight: 500; }
.command__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .command__cats { grid-template-columns: repeat(3, 1fr); } }
.command__cat { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); transition: border-color var(--dur); }
.command__cat:hover, .command__cat.is-active { border-color: var(--fg); }
.command__cat-media { width: 36px; height: 36px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.command__cat-media img { width: 100%; height: 100%; object-fit: cover; }
.command__footer { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted-fg); background: var(--bg); }
.command__footer .kbd { margin-right: 2px; }
.command__empty { text-align: center; padding: 40px 16px; color: var(--muted-fg); }
.command__close { display: inline-grid; }
@media (min-width: 640px) { .command__close { display: none; } }

/* ---------- 5. Global layout ---------- */

/* Announcement */
.announcement { background: var(--fg); color: #F4EEE6; font-size: 12px; letter-spacing: .06em; }
.announcement__inner { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; }
.announcement__track { flex: 1; max-width: 640px; text-align: center; min-width: 0; }
.announcement__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fade-in var(--dur-slow) var(--ease); }
.announcement__msg strong { font-weight: 600; letter-spacing: .08em; }
.announcement__nav { color: rgba(255,255,255,.7); display: grid; place-items: center; width: 28px; height: 28px; }
.announcement__nav:hover { color: #fff; }
.announcement__nav .icon { width: 14px; height: 14px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 90; background: rgba(250, 247, 242, .94); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); transition: box-shadow var(--dur); }
.site-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(29,26,23,.35); }
.site-header__bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.site-header__left { display: flex; align-items: center; gap: 2px; }
.site-header__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.logo { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; color: var(--fg); }
.logo__word { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.85rem; line-height: 1; letter-spacing: -.01em; }
.logo__rest { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.site-header__bar { grid-template-areas: "left logo actions"; }
.site-header__left { grid-area: left; }
.site-header .logo { grid-area: logo; justify-self: center; }
.main-nav { grid-area: nav; }
.logo--sm .logo__word { font-size: 1.55rem; }
.logo--sm .logo__rest { font-size: 9.5px; letter-spacing: .28em; }
.main-nav { display: none; }
.hide-sm { display: none !important; }
@media (max-width: 380px) { .logo__rest { display: none; } }
@media (min-width: 768px) { .hide-sm { display: inline-grid !important; } .site-header__search-m { display: none; } }
@media (min-width: 1180px) {
  .site-header__bar { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav actions"; gap: 28px; }
  .site-header__left { display: none; }
  .main-nav { display: block; justify-self: center; }
}
.main-nav__list { display: flex; align-items: center; gap: 2px; }
.main-nav__item { display: flex; align-items: center; }
.main-nav__link { position: relative; display: inline-flex; align-items: center; height: var(--header-h); padding: 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: color var(--dur); }
.main-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 22px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.main-nav__item:hover .main-nav__link::after, .main-nav__item.is-open .main-nav__link::after, .main-nav__link[aria-current]::after { transform: scaleX(1); }
.main-nav__toggle { width: 18px; height: 28px; margin-left: -10px; margin-right: 2px; display: grid; place-items: center; color: var(--muted-fg); opacity: 0; transition: opacity var(--dur); }
.main-nav__toggle:focus-visible { opacity: 1; }
.main-nav__toggle .icon { width: 12px; height: 12px; transition: transform var(--dur); }
.main-nav__item.is-open .main-nav__toggle .icon { transform: rotate(180deg); }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); z-index: 2; }
.main-nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding-block: 36px 44px; }
.mega__cols { display: grid; gap: 32px; grid-template-columns: repeat(var(--cols, 2), minmax(140px, 1fr)); align-content: start; }
.mega__cols--2 { --cols: 2; } .mega__cols--5 { --cols: 5; }
.mega__title { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 14px; }
.mega__col li a { display: inline-block; padding: 5px 0; font-size: var(--fs-base); transition: color var(--dur), transform var(--dur) var(--ease); }
.mega__col li a:hover { color: var(--accent-strong); transform: translateX(3px); }
.mega__features { display: grid; gap: 20px; grid-template-columns: repeat(var(--f, 2), 240px); }
.mega__features--1 { --f: 1; }
.mega-card { display: grid; gap: 4px; }
.mega-card__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); margin-bottom: 10px; background: var(--bg-soft); }
.mega-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.mega-card:hover .mega-card__media img { transform: scale(1.04); }
.mega-card .eyebrow { margin-bottom: 0; }
.mega-card__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 1.3rem; }
.mega-card__title .icon { width: 14px; height: 14px; }
.site-header.has-mega-open::after { content: ""; position: fixed; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(29,26,23,.18); z-index: -1; pointer-events: none; animation: fade-in var(--dur); }
.site-header__bar { position: relative; }
@media (min-width: 1180px) { .site-header__bar { position: static; } }

/* Mobile nav */
.mobile-nav { padding-top: 4px; }
.accordion--nav .accordion__trigger { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: 0; text-transform: none; padding: 16px 0; }
.mobile-nav__all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; }
.mobile-nav__all .icon { width: 14px; height: 14px; }
.mobile-nav__title { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); margin: 16px 0 6px; }
.mobile-nav__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.mobile-nav__links a { display: block; padding: 8px 0; font-size: var(--fs-md); }
.mobile-nav__primary li a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.1; }
.mobile-nav__primary .icon { width: 16px; height: 16px; color: var(--muted-fg); }
.mobile-nav__promo { margin-top: 28px; display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--bg-soft); border-radius: var(--radius-lg); }
.mobile-nav__promo-media { width: 84px; height: 84px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.mobile-nav__promo-media img { width: 100%; height: 100%; object-fit: cover; }
.mobile-nav__promo .eyebrow { margin-bottom: 4px; }
.mobile-nav__promo-title { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.1; display: block; }
.mobile-nav__footer { display: flex; justify-content: space-between; gap: 8px; }
.mobile-nav__footer a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 8px 0; }
.mobile-nav__footer .icon { width: 18px; height: 18px; }

/* Trust bar */
.trust-bar { border-top: 1px solid var(--border); background: var(--bg); }
.trust-bar__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-block: 36px; }
@media (min-width: 1024px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item > .icon { width: 26px; height: 26px; color: var(--accent-strong); stroke-width: 1.25; }
.trust-item__title { font-weight: 500; font-size: var(--fs-sm); }
.trust-item__text { font-size: var(--fs-xs); color: var(--muted-fg); }

/* Footer */
.site-footer { background: var(--fg); color: #E9E1D7; padding-top: clamp(56px, 7vw, 88px); }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: grid; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1.1fr 1.6fr; gap: 80px; } }
.logo--footer { color: #fff; }
.logo--footer .logo__word { font-size: 2.4rem; }
.site-footer__tagline { margin-top: 16px; max-width: 42ch; color: #B9AEA3; font-size: var(--fs-sm); }
.footer-news { margin-top: 28px; max-width: 440px; }
.footer-news__label { display: block; font-size: var(--fs-sm); margin-bottom: 10px; color: #fff; }
.footer-news__row { display: flex; gap: 8px; }
.footer-news .input { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.footer-news .input::placeholder { color: #9C9085; }
.footer-news .input:focus { border-color: #fff; box-shadow: none; }
.footer-news .btn--primary { background: #F4EEE6; color: var(--fg); }
.footer-news .btn--primary:hover { background: #fff; }
.footer-news .field__error { color: #F2B8AE; margin-top: 6px; }
.socials { display: flex; gap: 8px; margin-top: 28px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transition: border-color var(--dur), background var(--dur); }
.socials a:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.socials .icon { width: 18px; height: 18px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
@media (min-width: 768px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col__title { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: 16px; }
.footer-col li a { display: inline-block; padding: 5px 0; font-size: var(--fs-sm); color: #B9AEA3; transition: color var(--dur); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 24px; }
.site-footer__copy { font-size: var(--fs-xs); color: #9C9085; }
.payments { display: flex; flex-wrap: wrap; gap: 6px; }
.payment-pill { height: 26px; padding: 0 9px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); font-size: 10.5px; letter-spacing: .04em; color: #D9CFC4; }
.demo-note { font-size: 11px; color: #8E8278; padding-bottom: 28px; max-width: 90ch; }
.demo-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 6. Section patterns ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head__text { max-width: 640px; }
.section-head__desc { margin-top: 14px; color: var(--muted-fg); font-size: var(--fs-md); }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .section-head__text { margin-inline: auto; }

/* Carousel (scroll-snap) */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--item, 72%); gap: var(--gap, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-bottom: 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel__nav { display: none; gap: 8px; }
.carousel__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); transition: border-color var(--dur), background var(--dur), opacity var(--dur); }
.carousel__btn:hover { border-color: var(--fg); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn .icon { width: 18px; height: 18px; }
.carousel--products { --item: 66%; }
@media (min-width: 640px) { .carousel--products { --item: 42%; } }
@media (min-width: 1024px) {
  .carousel__nav { display: flex; }
  .carousel--products { --item: calc((100% - 3 * var(--gap, 16px)) / 4); --gap: 24px; }
  .carousel__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1180px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; } }

/* ---------- 7. Cards ---------- */

/* Product card */
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-soft); border-radius: var(--radius); }
.product-card__img-link { position: absolute; inset: 0; }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 450ms var(--ease), transform 900ms var(--ease); }
.product-card__img--alt { opacity: 0; }
@media (hover: hover) {
  .product-card:hover .product-card__img--alt { opacity: 1; }
  .product-card:hover .product-card__img { transform: scale(1.035); }
}
.product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; max-width: calc(100% - 56px); }
.wish-btn { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--fg); transition: background var(--dur), transform var(--dur) var(--ease), color var(--dur); z-index: 2; }
.wish-btn:hover { background: #fff; transform: scale(1.06); }
.wish-btn .icon { width: 18px; height: 18px; transition: fill var(--dur), transform var(--dur) var(--ease); }
.wish-btn.is-active { color: var(--accent-strong); }
.wish-btn.is-active .icon { fill: currentColor; }
.wish-btn.is-pop .icon { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.product-card__quick { position: absolute; left: 10px; right: 10px; bottom: 10px; display: none; transform: translateY(8px); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 2; }
@media (hover: hover) and (min-width: 1024px) {
  .product-card__quick { display: block; }
  .product-card:hover .product-card__quick, .product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
}
.product-card__body { position: relative; padding-top: 14px; display: grid; gap: 5px; }
.product-card__type { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); padding-right: 40px; }
.product-card__name { font-family: var(--font-serif); font-size: 1.28rem; line-height: 1.12; font-weight: 500; padding-right: 36px; }
.product-card__name a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); }
.product-card__name a:hover { background-size: 100% 1px; }
.product-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.product-card__body .rating { position: relative; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: var(--fs-base); }
.product-card__shades { display: inline-flex; align-items: center; gap: 3px; }
.product-card__shades .swatch-dot { width: 10px; height: 10px; }
.product-card__more { font-size: 10.5px; color: var(--muted-fg); margin-left: 2px; }
.product-card__mobile-add { position: absolute; top: 12px; right: 0; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; display: grid; place-items: center; background: var(--surface); z-index: 1; transition: background var(--dur), color var(--dur); }
.product-card__mobile-add:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.product-card__mobile-add .icon { width: 16px; height: 16px; }
@media (hover: hover) and (min-width: 1024px) { .product-card__mobile-add { display: none; } .product-card__type, .product-card__name { padding-right: 0; } }

/* Mini product row */
.mini-product { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.mini-product + .mini-product { border-top: 1px solid var(--border); }
.mini-product__media { width: 60px; height: 74px; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); flex-shrink: 0; }
.mini-product__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-product__body { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.mini-product__name { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.15; }
.mini-product > .icon { width: 16px; height: 16px; color: var(--muted-fg); }
.mini-product--card { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Category card */
.cat-card { display: grid; gap: 14px; }
.cat-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__title { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-card__title .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.cat-card:hover .cat-card__title .icon { transform: translateX(4px); }
.cat-card__meta { font-size: var(--fs-xs); color: var(--muted-fg); margin-top: -10px; }
.cat-carousel { --item: 44%; --gap: 12px; }
@media (min-width: 640px) { .cat-carousel { --item: 30%; } }
@media (min-width: 1024px) { .cat-carousel { --item: calc((100% - 5 * 20px) / 6); --gap: 20px; } .cat-carousel .carousel__track { overflow: visible; } }

/* UGC card */
.ugc-card { display: grid; gap: 10px; min-width: 0; }
.ugc-card__media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); color: #fff; text-align: left; }
.ugc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.ugc-card__media:hover .ugc-card__img { transform: scale(1.04); }
.ugc-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%); }
.ugc-card__top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.ugc-card__creator { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.ugc-card__creator > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ugc-card__creator .avatar { box-shadow: 0 0 0 1.5px #fff; }
.ugc-card__dur { padding: 2px 7px; background: rgba(0,0,0,.4); border-radius: 99px; font-size: 11px; }
.ugc-card__play { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.55); transition: transform var(--dur) var(--ease), background var(--dur); }
.ugc-card__play .icon { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.ugc-card__media:hover .ugc-card__play { transform: scale(1.08); background: rgba(255,255,255,.35); }
.ugc-card__bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 8px; }
.ugc-card__caption { font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ugc-card__stats { display: flex; gap: 14px; font-size: 11.5px; opacity: .92; }
.ugc-card__stats span { display: inline-flex; align-items: center; gap: 4px; }
.ugc-card__stats .icon { width: 14px; height: 14px; }
.ugc-card__product { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--dur); }
.ugc-card__product:hover { border-color: var(--fg); }
.ugc-card__pimg { width: 40px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.ugc-card__pimg img { width: 100%; height: 100%; object-fit: cover; }
.ugc-card__pinfo { flex: 1; min-width: 0; display: grid; }
.ugc-card__pname { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ugc-card__pcta { font-size: 11px; color: var(--muted-fg); letter-spacing: .02em; }
.ugc-card__product > .icon { width: 14px; height: 14px; color: var(--muted-fg); }
.ugc-carousel { --item: 62%; --gap: 12px; }
@media (min-width: 640px) { .ugc-carousel { --item: 36%; } }
@media (min-width: 1024px) { .ugc-carousel { --item: calc((100% - 4 * 20px) / 5); --gap: 20px; } }

/* UGC lightbox */
.dialog__panel--ugc { max-width: 920px; overflow: hidden; }
.ugc-view { display: grid; }
@media (min-width: 768px) { .ugc-view { grid-template-columns: minmax(0, 1fr) 380px; } }
.ugc-view__media { position: relative; background: #111; aspect-ratio: 9 / 16; max-height: min(78vh, 760px); width: 100%; }
@media (max-width: 767px) { .ugc-view__media { aspect-ratio: 4 / 5; max-height: 60vh; } }
.ugc-view__media img { width: 100%; height: 100%; object-fit: cover; }
.ugc-view__demo { position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: 11px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: var(--radius); }
.ugc-view__info { padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.ugc-view__creator { display: flex; align-items: center; gap: 12px; }
.ugc-view__creator-name { font-weight: 500; }
.ugc-view__caption { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.25; }
.ugc-view__stats { display: flex; gap: 18px; font-size: var(--fs-sm); color: var(--muted-fg); }
.ugc-view__stats span { display: inline-flex; align-items: center; gap: 6px; }
.ugc-view__stats .icon { width: 16px; height: 16px; }
.ugc-view__product { margin-top: auto; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; gap: 14px; }

/* Review card */
.review-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); height: 100%; }
.review-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review-card__date { font-size: var(--fs-xs); color: var(--muted-fg); }
.review-card__title { font-size: 1.35rem; line-height: 1.2; }
.review-card__body { color: var(--fg-soft); font-size: var(--fs-base); flex: 1; }
.review-card__author { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.review-card__name { font-weight: 500; font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.review-card__meta { font-size: var(--fs-xs); color: var(--muted-fg); }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--success); }
.verified .icon { width: 14px; height: 14px; }
.verified__demo { color: var(--muted-fg); font-weight: 400; }
.review-card__product { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 500; }
.review-card__product:hover { color: var(--accent-strong); }
.review-card__pimg { width: 40px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.review-card__pimg img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 8. Homepage ---------- */

/* Hero */
.hero { position: relative; background: var(--bg-soft); overflow: hidden; }
.hero__grid { display: grid; }
.hero__media { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%; animation: hero-zoom 1.6s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.04); } to { transform: none; } }
.hero__content { padding: 36px var(--gutter) 48px; display: flex; flex-direction: column; justify-content: center; }
.hero__title { margin: 6px 0 22px; text-transform: uppercase; font-size: clamp(2.5rem, 9.6vw, 4.6rem); }
@media (min-width: 1024px) { .hero__title { font-size: clamp(3.4rem, 4.6vw, 5.6rem); } }
.hero__title span { display: block; }
.hero__title em { font-style: italic; text-transform: none; color: var(--accent-strong); font-weight: 400; }
.hero__text { font-size: var(--fs-lg); color: var(--fg-soft); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-size: var(--fs-sm); color: var(--muted-fg); }
.hero__avatars { display: flex; }
.hero__avatars .avatar { box-shadow: 0 0 0 2px var(--bg-soft); }
.hero__avatars .avatar + .avatar { margin-left: -10px; }
.hero__card { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 290px; transition: transform var(--dur) var(--ease); }
.hero__card:hover { transform: translateY(-2px); }
.hero__card-media { width: 52px; height: 64px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.hero__card-media img { width: 100%; height: 100%; object-fit: cover; }
.hero__card-name { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.1; }
.hero__card .eyebrow { margin-bottom: 2px; font-size: 9.5px; }
.hero__card .muted { font-size: var(--fs-xs); }
@media (min-width: 640px) { .hero__actions .btn { min-width: 190px; } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(calc(100vh - var(--header-h) - 38px), 860px); }
  .hero__media { order: 2; aspect-ratio: auto; max-height: none; height: 100%; }
  .hero__content { padding: 64px 48px 64px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
  .hero__card { right: 28px; bottom: 28px; }
}

/* Ticker */
.ticker { border-block: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.ticker__track { display: flex; width: max-content; gap: 48px; padding-block: 16px; animation: ticker 38s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 48px; font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; white-space: nowrap; color: var(--fg-soft); }
.ticker__item::after { content: "✦"; font-style: normal; font-size: .7rem; color: var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Concern cards */
.concern-carousel { --item: 42%; --gap: 12px; }
@media (min-width: 640px) { .concern-carousel { --item: 28%; } }
@media (min-width: 1024px) { .concern-carousel { --item: calc((100% - 6 * 16px) / 7); --gap: 16px; } }
.concern-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; color: #fff; background: var(--bg-deep); }
.concern-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.concern-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.concern-card:hover img { transform: scale(1.05); }
.concern-card__label { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; }
.concern-card__name { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.05; display: block; }
.concern-card__cta { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }

/* Routine builder */
.routine { display: grid; gap: 28px; }
.routine .tabs__list { gap: 0; }
.routine .tabs__trigger { flex: 1; display: grid; justify-items: start; gap: 2px; padding: 16px 16px 18px; text-align: left; min-width: 120px; }
.routine__num { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0; font-style: italic; color: var(--accent-strong); text-transform: none; }
.routine__name { font-size: 12px; }
.routine__panel { display: grid; gap: 28px; padding-top: 32px; }
@media (min-width: 1024px) { .routine__panel { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } }
.routine__intro .h3 { margin-bottom: 12px; }
.routine__intro p { color: var(--fg-soft); }
.routine__intro .btn { margin-top: 22px; }

/* Split editorial */
.split { display: grid; background: var(--bg-soft); }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; min-height: 640px; } .split--reverse .split__media { order: 2; } }
.split__media { position: relative; min-height: 420px; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__content { padding: clamp(40px, 6vw, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .split__content { padding-inline: clamp(48px, 6vw, 112px); } }
.split__content .h1 { margin-bottom: 18px; }
.split__list { margin: 28px 0 32px; border-top: 1px solid var(--border-strong); }
.split__list .mini-product { border-top: 0; border-bottom: 1px solid var(--border-strong); padding: 14px 0; }
.split__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.split--dark { background: var(--fg); color: #EDE5DB; }
.split--dark .h1, .split--dark .h2 { color: #fff; }
.split--dark .eyebrow { color: var(--champagne); }

/* Creator favorites */
.creator-fav { display: grid; gap: 24px; }
@media (min-width: 1024px) { .creator-fav { grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; } }
.creator-fav__feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; color: #fff; display: flex; align-items: flex-end; }
.creator-fav__feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.creator-fav__feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.7)); z-index: 1; }
.creator-fav__quote { position: relative; z-index: 2; padding: 28px; display: grid; gap: 14px; }
.creator-fav__quote blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; font-style: italic; }
.creator-fav__by { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.creator-fav__by .muted { color: rgba(255,255,255,.75); }
.creator-fav__demo { font-size: 10.5px; opacity: .7; }
.creator-fav__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 768px) { .creator-fav__grid { gap: 32px 20px; } }

/* Before / after */
.ba-wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ba-wrap { grid-template-columns: 6fr 5fr; gap: 72px; } }
.ba { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; user-select: none; touch-action: pan-y; background: var(--bg-deep); --pos: 50%; }
@media (min-width: 640px) { .ba { aspect-ratio: 5 / 4; } }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; pointer-events: none; }
.ba__before { filter: saturate(.72) contrast(.92) brightness(.97) sepia(.08); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); pointer-events: none; }
.ba__handle .icon { width: 16px; height: 16px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible ~ .ba__handle { box-shadow: var(--ring); }
.ba__label { position: absolute; top: 14px; padding: 5px 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.88); border-radius: var(--radius-sm); pointer-events: none; }
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }
.ba__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted-fg); display: flex; gap: 8px; }
.ba__note .icon { width: 14px; height: 14px; margin-top: 2px; }
.ba-steps { margin: 26px 0 30px; display: grid; gap: 0; border-top: 1px solid var(--border); }
.ba-steps li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ba-steps__num { font-family: var(--font-serif); font-style: italic; color: var(--accent-strong); font-size: 1.1rem; width: 24px; }
.ba-steps__img { width: 46px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.ba-steps__img img { width: 100%; height: 100%; object-fit: cover; }
.ba-steps a { font-weight: 500; }
.ba-steps a:hover { color: var(--accent-strong); }
.ba-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 0; }
.ba-stats__num { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; }
.ba-stats__label { font-size: var(--fs-xs); color: var(--muted-fg); margin-top: 6px; }

/* Quiz */
.quiz { display: grid; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 1024px) { .quiz { grid-template-columns: 5fr 7fr; min-height: 600px; } }
.quiz__media { position: relative; min-height: 280px; }
.quiz__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiz__body { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.quiz__intro .h1 { margin-bottom: 16px; }
.quiz__intro .lead { margin-bottom: 30px; }
.quiz__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: var(--fs-sm); color: var(--muted-fg); }
.quiz__meta span { display: inline-flex; align-items: center; gap: 6px; }
.quiz__meta .icon { width: 16px; height: 16px; }
.quiz__progress { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; font-size: var(--fs-xs); color: var(--muted-fg); letter-spacing: .1em; text-transform: uppercase; }
.quiz__progress .progress { flex: 1; }
.quiz__question { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 8px; }
.quiz__hint { color: var(--muted-fg); margin-bottom: 26px; }
.quiz__options { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .quiz__options { grid-template-columns: 1fr 1fr; } }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.quiz__step { animation: fade-in var(--dur-slow) var(--ease); }
.quiz__results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0; }
@media (min-width: 640px) { .quiz__results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quiz-pick { display: grid; gap: 8px; }
.quiz-pick__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.quiz-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.quiz-pick__step { position: absolute; top: 8px; left: 8px; }
.quiz-pick__name { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.15; }
.quiz-pick__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.quiz-pick__price { font-size: var(--fs-sm); }
.quiz__summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Community */
.community-score { display: flex; align-items: center; gap: 18px; }
.community-score__num { font-family: var(--font-serif); font-size: 3.6rem; line-height: 1; }
.review-carousel { --item: 86%; --gap: 12px; }
@media (min-width: 768px) { .review-carousel { --item: 46%; } }
@media (min-width: 1024px) { .review-carousel { --item: calc((100% - 2 * 20px) / 3); --gap: 20px; } }
.demo-flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted-fg); padding: 6px 10px; background: var(--bg-soft); border-radius: var(--radius); }
.demo-flag .icon { width: 14px; height: 14px; }

/* Social grid */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 1024px) { .social-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
.social-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-deep); }
.social-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.social-tile__over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29,26,23,.35); color: #fff; opacity: 0; transition: opacity var(--dur); }
.social-tile__over .icon { width: 28px; height: 28px; }
.social-tile:hover img { transform: scale(1.05); }
.social-tile:hover .social-tile__over, .social-tile:focus-visible .social-tile__over { opacity: 1; }
.social-handle { font-family: var(--font-serif); font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: .02em; line-height: 1; word-break: break-word; }

/* Newsletter */
.newsletter { background: var(--bg-soft); }
.newsletter__grid { display: grid; align-items: center; padding-inline: 0; }
@media (min-width: 1024px) { .newsletter__grid { grid-template-columns: 1fr 1fr; padding-inline: var(--gutter); gap: 72px; padding-block: 72px; } }
.newsletter__media { aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 1024px) { .newsletter__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); } }
.newsletter__media img { width: 100%; height: 100%; object-fit: cover; }
.newsletter__content { padding: 44px var(--gutter) 56px; }
@media (min-width: 1024px) { .newsletter__content { padding: 0; } }
.newsletter__title { margin-bottom: 16px; }
.newsletter__text { color: var(--fg-soft); max-width: 44ch; margin-bottom: 28px; font-size: var(--fs-md); }
.newsletter__row { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
@media (min-width: 640px) { .newsletter__row { flex-direction: row; } .newsletter__row .input { flex: 1; } }
.newsletter__form .field__error { margin-top: 8px; }
.newsletter__fine { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted-fg); max-width: 520px; }

/* ---------- 9. Shop / collection ---------- */
.page-hero { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.page-hero .breadcrumb { margin-bottom: 20px; }
.page-hero__desc { margin-top: 14px; max-width: 60ch; color: var(--fg-soft); font-size: var(--fs-md); }

.col-hero { position: relative; display: grid; background: var(--bg-soft); overflow: hidden; }
@media (min-width: 1024px) { .col-hero { grid-template-columns: 1fr 1fr; min-height: 440px; } }
.col-hero__content { padding: 32px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .col-hero__content { padding: 56px 64px 56px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); } }
.col-hero__content .breadcrumb { margin-bottom: 22px; }
.col-hero__media { position: relative; min-height: 260px; aspect-ratio: 16 / 10; }
@media (min-width: 1024px) { .col-hero__media { aspect-ratio: auto; } }
.col-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.col-hero__desc { margin-top: 16px; max-width: 52ch; color: var(--fg-soft); font-size: var(--fs-md); }
.col-hero__count { margin-top: 18px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); }

.subnav { padding-block: 20px; border-bottom: 1px solid var(--border); }
.subnav .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subnav .chips::-webkit-scrollbar { display: none; }
.concern-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 110px; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.concern-nav::-webkit-scrollbar { display: none; }
.concern-pill { display: grid; gap: 8px; justify-items: center; text-align: center; font-size: var(--fs-sm); }
.concern-pill__img { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--dur); }
.concern-pill__img img { width: 100%; height: 100%; object-fit: cover; }
.concern-pill:hover .concern-pill__img, .concern-pill.is-active .concern-pill__img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
.concern-pill.is-active { font-weight: 500; }

.shop-layout { display: grid; gap: 32px; padding-block: 28px var(--section-y); }
@media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; } }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.shop-toolbar__count { font-size: var(--fs-sm); color: var(--muted-fg); }
.shop-toolbar__right { display: flex; align-items: center; gap: 10px; }
.shop-toolbar .select { min-height: 40px; font-size: var(--fs-sm); padding-block: 8px; }
.sort-label { font-size: var(--fs-sm); color: var(--muted-fg); white-space: nowrap; }
.filter-btn { display: inline-flex; }
@media (min-width: 1024px) { .filter-btn { display: none; } }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.active-filters .chip .icon { width: 12px; height: 12px; color: inherit; }
.results { position: relative; transition: opacity var(--dur); }
.results.is-loading { opacity: .45; pointer-events: none; }
.load-more { display: grid; justify-items: center; gap: 14px; margin-top: 48px; }
.load-more__text { font-size: var(--fs-sm); color: var(--muted-fg); }
.load-more .progress { width: 220px; }
.empty-state { text-align: center; padding: 64px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-warm); }
.empty-state .icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--accent); }
.empty-state p { color: var(--muted-fg); margin: 8px auto 22px; max-width: 44ch; }

/* Filters (sidebar on desktop, sheet on mobile) */
.filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.filters__title { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.filters__title .icon { width: 16px; height: 16px; }
.filters__options { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; padding-right: 6px; }
.filters__rating { display: grid; gap: 4px; }
.filters__rating .radio { font-size: var(--fs-sm); }
.filters__footer { display: none; }
.filters__close { display: none; }
@media (max-width: 1023px) {
  .filters { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s linear var(--dur-slow); }
  .filters.is-open { visibility: visible; transition-delay: 0s; }
  .filters__backdrop { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
  .filters.is-open .filters__backdrop { opacity: 1; }
  .filters__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(400px, 92vw); background: var(--bg); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); }
  .filters.is-open .filters__panel { transform: none; }
  .filters__head { padding: 14px 16px 14px 24px; min-height: 64px; }
  .filters__body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
  .filters__footer { display: flex; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .filters__footer .btn { flex: 1; }
  .filters__close { display: inline-grid; }
}
@media (min-width: 1024px) {
  .filters__panel { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
  .filters__backdrop { display: none; }
}

/* ---------- 10. Product detail ---------- */
.pdp { display: grid; gap: 28px; padding-block: 12px 56px; }
@media (min-width: 1024px) { .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding-block: 24px 88px; align-items: start; } }
.pdp__crumbs { padding-top: 18px; }
.gallery { display: grid; gap: 12px; }
@media (min-width: 1024px) { .gallery { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; position: sticky; top: calc(var(--header-h) + 20px); } }
.gallery__thumbs { display: none; }
@media (min-width: 1024px) { .gallery__thumbs { display: grid; align-content: start; gap: 10px; } }
.gallery__thumb { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; opacity: .6; box-shadow: 0 0 0 1px var(--border); transition: opacity var(--dur), box-shadow var(--dur); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--fg); }
.gallery__main { position: relative; margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 768px) { .gallery__main { margin-inline: 0; } }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--bg-soft); }
@media (min-width: 768px) { .gallery__track { border-radius: var(--radius-lg); } }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) ease-out; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.gallery__slide.is-zoomed img { transform: scale(1.9); }
.gallery__slide.is-zoomed { cursor: zoom-out; }
.gallery__badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
.gallery__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
@media (min-width: 1024px) { .gallery__dots { display: none; } }
.gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background var(--dur), width var(--dur); }
.gallery__dot[aria-current="true"] { background: var(--fg); width: 18px; border-radius: 3px; }
.gallery__hint { position: absolute; right: 14px; bottom: 14px; display: none; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.85); font-size: 11px; pointer-events: none; }
.gallery__hint .icon { width: 14px; height: 14px; }
@media (hover: hover) and (min-width: 1024px) { .gallery__hint { display: inline-flex; } }
.gallery__view { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.85); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }

.pdp-info { display: grid; gap: 22px; }
@media (min-width: 1024px) { .pdp-info { position: sticky; top: calc(var(--header-h) + 20px); } }
.pdp-info__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-info__type { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); }
.pdp-info__title { font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1; margin-top: 8px; }
.pdp-info__rating { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); margin-top: 12px; }
.pdp-info__rating a { text-decoration: underline; text-underline-offset: 3px; color: var(--muted-fg); }
.pdp-info__price { font-size: 1.35rem; }
.pdp-info__short { color: var(--fg-soft); font-size: var(--fs-md); }
.pdp-info__meta { font-size: var(--fs-sm); color: var(--muted-fg); }
.variant-group { display: grid; gap: 12px; border: 0; padding: 0; }
.variant-group__legend { font-size: var(--fs-sm); padding: 0; margin-bottom: 12px; }
.variant-group__legend strong { font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch__color { position: absolute; inset: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px transparent; transition: box-shadow var(--dur); }
.swatch:hover::after { box-shadow: 0 0 0 1px var(--border-strong); }
.swatch:has(input:checked)::after { box-shadow: 0 0 0 1.5px var(--fg); }
.swatch:has(input:focus-visible)::after { box-shadow: var(--ring); }
.size-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill { position: relative; }
.size-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-pill span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--fs-sm); transition: border-color var(--dur), background var(--dur); }
.size-pill span em { font-style: normal; color: var(--muted-fg); }
.size-pill:hover span { border-color: var(--fg); }
.size-pill input:checked + span { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); background: var(--surface); }
.size-pill input:focus-visible + span { box-shadow: var(--ring); }
.buy-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
.buy-row .btn--primary { height: 46px; }
.wish-square { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); transition: border-color var(--dur), color var(--dur); }
.wish-square:hover { border-color: var(--fg); }
.wish-square .icon { width: 20px; height: 20px; }
.wish-square.is-active { color: var(--accent-strong); }
.wish-square.is-active .icon { fill: currentColor; }
.stock-line { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.stock-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.stock-line.is-low::before { background: #C08A2E; box-shadow: 0 0 0 3px #F6EBD6; }
.stock-line.is-out::before { background: var(--danger); box-shadow: 0 0 0 3px #F6E3DF; }
.assurances { display: grid; gap: 12px; padding: 18px 20px; background: var(--bg-soft); border-radius: var(--radius-lg); }
.assurance { display: flex; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.assurance .icon { width: 19px; height: 19px; color: var(--accent-strong); }
.assurance .progress { margin-top: 6px; }
.assurance__body { flex: 1; }
.pdp-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pdp-highlight { padding: 14px 10px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; font-size: 11.5px; line-height: 1.35; }
.pdp-highlight .icon { width: 20px; height: 20px; margin: 0 auto 6px; color: var(--accent-strong); }
.benefit-list li, .ingredient-list li { position: relative; padding-left: 22px; }
.benefit-list li + li, .ingredient-list li + li { margin-top: 8px; }
.benefit-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--accent); }
.ingredient-list li { padding-left: 0; }
.ingredient-list strong { display: block; color: var(--fg); font-weight: 500; }
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(250,247,242,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease); }
.sticky-atc.is-visible { transform: none; }
.sticky-atc__media { width: 44px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.sticky-atc__media img { width: 100%; height: 100%; object-fit: cover; }
.sticky-atc__info { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.sticky-atc__name { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__variant { color: var(--muted-fg); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .sticky-atc { left: auto; right: 24px; bottom: 24px; width: 460px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px; transform: translateY(140%); } }

.ingredient-band { display: grid; gap: 20px; }
@media (min-width: 768px) { .ingredient-band { grid-template-columns: repeat(3, 1fr); } }
.ingredient-card { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ingredient-card__num { font-family: var(--font-serif); font-style: italic; color: var(--accent-strong); font-size: 1.1rem; }
.ingredient-card h3 { margin: 10px 0 8px; font-size: 1.45rem; }
.ingredient-card p { color: var(--muted-fg); font-size: var(--fs-sm); }

/* Reviews block */
.reviews { display: grid; gap: 40px; }
@media (min-width: 1024px) { .reviews { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: start; } }
.reviews__summary { display: grid; gap: 18px; }
@media (min-width: 1024px) { .reviews__summary { position: sticky; top: calc(var(--header-h) + 24px); } }
.reviews__avg { display: flex; align-items: center; gap: 16px; }
.reviews__avg-num { font-family: var(--font-serif); font-size: 4.2rem; line-height: .9; }
.dist { display: grid; gap: 8px; }
.dist__row { display: grid; grid-template-columns: 34px 1fr 44px; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--muted-fg); }
.dist__row .progress { height: 6px; }
.reviews__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.reviews__list { display: grid; gap: 16px; }
.reviews__list .review-card { height: auto; }
.reviews__more { margin-top: 24px; display: flex; justify-content: center; }

/* ---------- 11. Cart & checkout ---------- */
.ship-progress { padding: 16px 24px; background: var(--bg-soft); font-size: var(--fs-sm); display: grid; gap: 10px; }
.ship-progress p { display: flex; align-items: center; gap: 8px; }
.ship-progress .icon { width: 18px; height: 18px; color: var(--success); }
.cart-drawer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart-lines { flex: 1; overflow-y: auto; padding: 4px 24px; }
.cart-line { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); animation: fade-in var(--dur-slow) var(--ease); }
.cart-line.is-removing { opacity: .4; }
.cart-line__media { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: 12px; }
.cart-line__name { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.1; }
.cart-line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-line__variant { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted-fg); display: flex; align-items: center; gap: 6px; }
.cart-line__price { font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
.cart-line__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cart-upsell { padding: 14px 24px 4px; }
.cart-upsell .eyebrow { margin-bottom: 8px; }
.cart-drawer__footer { border-top: 1px solid var(--border); padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 8px; background: var(--bg); }
.cart-drawer__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-base); }
.summary-row strong { font-weight: 500; }
.summary-row--total { font-size: 1.1rem; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 6px; }
.summary-row--total strong { font-weight: 600; }
.summary-row--discount { color: var(--success); }
.cart-empty { padding: 40px 24px; text-align: center; display: grid; gap: 10px; overflow-y: auto; }
.cart-empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; margin: 0 auto 6px; }
.cart-empty__icon .icon { width: 26px; height: 26px; }
.cart-empty__actions { display: grid; gap: 10px; margin: 18px 0 28px; }
.cart-empty__picks { text-align: left; }

.cart-page { display: grid; gap: 40px; padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .cart-page { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; } }
.cart-table__head { display: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
@media (min-width: 768px) {
  .cart-table__head { display: grid; grid-template-columns: 1fr 140px 110px; gap: 24px; }
  .cart-row { grid-template-columns: 110px 1fr 140px 110px !important; align-items: center; }
  .cart-row .cart-line__bottom { display: contents; }
  .cart-row__qty { order: 0; }
  .cart-row .cart-line__body { display: contents; }
}
.cart-row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.cart-row__info { display: grid; gap: 6px; align-content: center; }
.cart-row__total { font-weight: 500; text-align: right; }
.cart-row__actions { display: flex; gap: 16px; }
.summary-card { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; gap: 14px; }
@media (min-width: 1024px) { .summary-card { position: sticky; top: calc(var(--header-h) + 24px); } }
.summary-card__title { font-size: 1.8rem; margin-bottom: 4px; }
.promo-form { display: flex; gap: 8px; }
.promo-form .input { min-height: 44px; text-transform: uppercase; }
.promo-applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: var(--success-soft); color: var(--success); border-radius: var(--radius); font-size: var(--fs-sm); }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted-fg); }
.secure-note .icon { width: 14px; height: 14px; }

.checkout { display: grid; gap: 40px; padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .checkout { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: start; } }
.checkout__section { padding: 28px 0; border-top: 1px solid var(--border); }
.checkout__section:first-child { border-top: 0; padding-top: 0; }
.checkout__heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; font-size: 1.7rem; }
.checkout__heading span { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--accent-strong); letter-spacing: .14em; }
.express-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.express-pay__btn { height: 46px; border-radius: var(--radius); display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); background: var(--fg); color: #fff; letter-spacing: .02em; opacity: .9; }
.express-pay__btn--light { background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); }
.or-divider { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xs); color: var(--muted-fg); letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 18px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.payment-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 22px; background: var(--surface-warm); display: grid; gap: 14px; }
.payment-placeholder__mock { display: grid; gap: 10px; }
.payment-placeholder__field { height: 46px; border-radius: var(--radius); background: var(--bg-soft); display: flex; align-items: center; padding: 0 14px; font-size: var(--fs-sm); color: var(--muted-fg); gap: 10px; }
.payment-placeholder__field .icon { width: 18px; height: 18px; }
.payment-placeholder__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-summary { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; }
@media (min-width: 1024px) { .order-summary { position: sticky; top: calc(var(--header-h) + 24px); } }
.order-summary__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; font-size: var(--fs-sm); }
.order-summary__img { position: relative; width: 56px; height: 68px; border-radius: var(--radius); overflow: visible; }
.order-summary__img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.order-summary__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--muted-fg); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.order-summary__name { font-weight: 500; line-height: 1.3; }
.confirm { text-align: center; max-width: 640px; margin-inline: auto; padding-block: var(--section-y); }
.confirm__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 24px; }
.confirm__icon .icon { width: 32px; height: 32px; }
.confirm__box { margin: 32px 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 10px; text-align: left; }

/* ---------- 12. Content pages ---------- */
.about-hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.about-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.6)); z-index: 1; }
.about-hero__content { position: relative; z-index: 2; padding-block: 64px; }
.about-hero__content .h1, .about-hero__content .display { color: #fff; max-width: 16ch; }
.about-hero__content .eyebrow { color: #F1E4DD; }
.about-hero__content p { max-width: 52ch; margin-top: 18px; font-size: var(--fs-lg); color: rgba(255,255,255,.9); }
.statement { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.2; text-align: center; max-width: 26ch; margin-inline: auto; }
.statement em { color: var(--accent-strong); }
.pillars { display: grid; gap: 20px; }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pillar { padding: 34px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pillar__num { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--accent-strong); }
.pillar h3 { margin: 18px 0 10px; }
.pillar p { color: var(--muted-fg); }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 1024px) { .mosaic { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 16px; } .mosaic > :first-child { grid-row: span 2; } }
.mosaic__item { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 1; }
@media (min-width: 1024px) { .mosaic__item { aspect-ratio: auto; } }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value .icon { width: 30px; height: 30px; color: var(--accent-strong); stroke-width: 1.25; margin-bottom: 14px; }
.value h3 { font-size: 1.4rem; margin-bottom: 8px; }
.value p { font-size: var(--fs-sm); color: var(--muted-fg); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.stat__label { font-size: var(--fs-sm); color: var(--muted-fg); margin-top: 8px; }

/* Creators page */
.creator-hero { position: relative; min-height: min(84vh, 760px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.creator-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.creator-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 70%), linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.4)); z-index: 1; }
.creator-hero__content { position: relative; z-index: 2; padding-block: 72px; }
.creator-hero__content .display { color: #fff; max-width: 13ch; text-transform: uppercase; }
.creator-hero__content .display em { text-transform: none; font-weight: 400; color: #F1E4DD; }
.creator-hero__content .eyebrow { color: #F1E4DD; }
.creator-hero__content p { max-width: 46ch; margin: 20px 0 30px; font-size: var(--fs-lg); color: rgba(255,255,255,.9); }
.creator-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.creator-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .creator-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.creator-card { padding: 26px 18px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; justify-items: center; gap: 6px; transition: border-color var(--dur), transform var(--dur) var(--ease); }
.creator-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.creator-card .avatar { margin-bottom: 10px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-soft); }
.creator-card__name { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.1; }
.creator-card__handle { font-size: var(--fs-xs); color: var(--muted-fg); }
.creator-card__focus { margin-top: 8px; }
.creator-card__stats { font-size: var(--fs-xs); color: var(--fg-soft); margin-top: 4px; }
.ugc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .ugc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1180px) { .ugc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.routine-cards { display: grid; gap: 20px; }
@media (min-width: 1024px) { .routine-cards { grid-template-columns: repeat(3, 1fr); } }
.routine-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.routine-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.routine-card__media img { width: 100%; height: 100%; object-fit: cover; }
.routine-card__time { position: absolute; top: 12px; left: 12px; }
.routine-card__body { padding: 22px; display: grid; gap: 14px; flex: 1; }
.routine-card__by { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.routine-card__steps { display: grid; gap: 0; }
.routine-card__steps li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.routine-card__steps .num { font-family: var(--font-serif); font-style: italic; color: var(--accent-strong); width: 18px; }
.routine-card__steps img { width: 34px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); }
.routine-card__steps a:hover { text-decoration: underline; text-underline-offset: 3px; }
.apply { display: grid; gap: 40px; }
@media (min-width: 1024px) { .apply { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.perk-list { display: grid; gap: 16px; margin-top: 28px; }
.perk { display: flex; gap: 14px; }
.perk .icon { width: 22px; height: 22px; color: var(--accent-strong); margin-top: 2px; }
.perk strong { display: block; font-weight: 500; }
.perk p { font-size: var(--fs-sm); color: var(--muted-fg); }
.form-card { padding: clamp(24px, 4vw, 44px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Contact & FAQ */
.contact { display: grid; gap: 40px; padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .contact { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } }
.support-card { padding: 28px; background: var(--bg-soft); border-radius: var(--radius-lg); display: grid; gap: 18px; }
.support-item { display: flex; gap: 14px; }
.support-item .icon { width: 20px; height: 20px; color: var(--accent-strong); margin-top: 2px; }
.support-item strong { display: block; font-weight: 500; }
.support-item p, .support-item a { font-size: var(--fs-sm); color: var(--muted-fg); }
.faq-shortcuts { display: grid; gap: 8px; }
.faq-shortcut { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); transition: border-color var(--dur); }
.faq-shortcut:hover { border-color: var(--fg); }
.faq-shortcut .icon { width: 16px; height: 16px; }
.faq-layout { display: grid; gap: 32px; padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; } }
.faq-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.faq-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .faq-nav { position: sticky; top: calc(var(--header-h) + 24px); flex-direction: column; gap: 2px; } .faq-nav a { padding: 8px 12px; border-radius: var(--radius); } .faq-nav a:hover, .faq-nav a.is-active { background: var(--bg-soft); } }
.faq-nav a { white-space: nowrap; font-size: var(--fs-sm); }
@media (max-width: 1023px) { .faq-nav a { padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 99px; } }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group__title { margin-bottom: 8px; font-size: 2rem; }

/* Account */
.auth { display: grid; min-height: 640px; }
@media (min-width: 1024px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth__media { position: relative; min-height: 240px; }
.auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__media-quote { position: absolute; left: 32px; right: 32px; bottom: 32px; color: #fff; font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.2; z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.auth__body { padding: clamp(32px, 6vw, 88px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.auth__inner { width: 100%; max-width: 440px; margin-inline: auto; }
.auth__inner .tabs { margin-bottom: 28px; }
.auth__switch { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted-fg); text-align: center; }
.auth__switch a, .auth__switch button { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.dash { display: grid; gap: 32px; padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .dash { grid-template-columns: 240px 1fr; gap: 56px; } }
.dash-nav { display: grid; gap: 2px; align-content: start; }
.dash-nav a, .dash-nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); font-size: var(--fs-sm); text-align: left; }
.dash-nav a:hover, .dash-nav button:hover, .dash-nav .is-active { background: var(--bg-soft); }
.dash-nav .icon { width: 18px; height: 18px; }
.dash-cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .dash-cards { grid-template-columns: repeat(3, 1fr); } }
.dash-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dash-card__num { font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; margin-top: 10px; }
.order-table th, .order-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.order-table th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); font-weight: 500; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

/* Journal */
.journal-grid { display: grid; gap: 36px 20px; }
@media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }
.journal-card { display: grid; gap: 12px; }
.journal-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.journal-card:hover .journal-card__media img { transform: scale(1.04); }
.journal-card__meta { display: flex; gap: 12px; align-items: center; font-size: var(--fs-xs); color: var(--muted-fg); }
.journal-card h3 { font-size: 1.6rem; }
.journal-card p { color: var(--muted-fg); font-size: var(--fs-sm); }

.credits-table td, .credits-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); text-align: left; vertical-align: middle; }
.credits-table th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-fg); font-weight: 500; }
.credits-table img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }

.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--fg-soft); font-size: var(--fs-sm); }
.notice .icon { width: 18px; height: 18px; color: var(--accent-strong); flex-shrink: 0; margin-top: 2px; }
.notice--neutral { background: var(--bg-soft); }

.error-page { text-align: center; padding-block: var(--section-y); }
.error-page .display { color: var(--accent); }

/* Quick view */
.quickview { display: grid; }
@media (min-width: 768px) { .quickview { grid-template-columns: 1fr 1fr; } }
.quickview__media { position: relative; aspect-ratio: 4 / 5; background: var(--bg-soft); }
.quickview__media img { width: 100%; height: 100%; object-fit: cover; }
.quickview__info { padding: 32px 28px; display: grid; gap: 18px; align-content: center; }
.quickview__info .pdp-info__title { font-size: 2.2rem; }
.quickview--loading .skeleton--media { aspect-ratio: 4 / 5; border-radius: 0; }

/* ---------- 13. Utilities ---------- */
.stack-sm > * + * { margin-top: 8px; }
.stack > * + * { margin-top: 16px; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mb-m { margin-bottom: 24px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.center-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticker__track { animation: none; }
}

@media print {
  .announcement, .site-header, .site-footer, .trust-bar, .toaster, .sticky-atc { display: none !important; }
}