@import url("./motion.css?v=20260811-1");
@import url("./ambient-effects.css?v=20260811-1");

.page-hero {
  display: grid;
  align-items: end;
  min-height: min(58vh, 38rem);
  padding-block: calc(var(--header-height) + var(--space-12)) var(--space-10);
  background:
    radial-gradient(circle at 20% 15%, rgb(var(--color-gold-rgb) / 0.12), transparent 35%),
    linear-gradient(145deg, #fff, var(--color-ivory));
}

.page-hero__content {
  display: grid;
  max-width: 43rem;
  gap: var(--space-3);
}

.page-hero__title {
  margin-block-end: var(--space-3);
}

.page-hero__lead {
  max-width: 38rem;
  color: var(--color-warm-gray-strong);
  font-size: var(--text-lg);
}

.video-story {
  position: relative;
  min-height: 420vh;
  background: #1c1716;
  color: #fff;
}

.home-hero {
  position: relative;
  min-height: 420vh;
  padding: 0;
  background: #1c1716;
  color: #fff;
}

.home-hero__stage {
  position: sticky;
  inset-block-start: 0.35rem;
  height: calc(100svh - 0.35rem);
  min-height: 30rem;
  overflow: hidden;
}

.home-hero__stage canvas,
.home-hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__copy {
  display: grid;
  align-content: end;
  gap: var(--space-3);
  z-index: 2;
}

.home-hero__copy h1 {
  color: #fff;
}

.home-hero__frame {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 47%;
  width: clamp(11rem, 25vw, 23rem);
  aspect-ratio: 4 / 5;
  border: 1px solid rgb(var(--color-gold-rgb) / 0.78);
  border-radius: var(--radius-sm);
  opacity: clamp(0, calc((var(--video-progress, 0) - 0.62) * 4), 1);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.94 + var(--video-progress, 0) * 0.06));
}

[dir="rtl"] .home-hero__frame {
  transform: translate(50%, -50%) scale(calc(0.94 + var(--video-progress, 0) * 0.06));
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.section-heading h2,
.section-heading p {
  margin-block-end: 0;
}

.section-heading > div,
.newsletter > div,
.centered-cta {
  display: grid;
  gap: var(--space-2);
}

.section-heading > div > :where(h1, h2, h3, p),
.newsletter > div > :where(h1, h2, h3, p),
.centered-cta > :where(h1, h2, h3, p) {
  margin-block: 0;
}

.eyebrow {
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: 800;
}

.section--tinted {
  background: var(--color-surface-muted);
}

.newsletter {
  display: grid;
  gap: var(--space-5);
}

.field-action {
  display: flex;
  gap: 10px;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.search-form > label {
  grid-column: 1 / -1;
  margin: 0;
}

.size-guide-open {
  width: max-content;
  margin-block-start: 10px;
  border-color: var(--color-brand);
  background: #fff;
  color: var(--color-brand);
}
.size-guide-open:is(:hover, :focus-visible) {
  border-color: var(--color-champagne);
  background: var(--color-champagne);
  color: #fff;
}
.product-size-selector { display: grid; gap: 10px; margin: 0 0 10px; padding: 0; border: 0; }
.product-size-selector > legend { padding: 0; font-weight: 800; }
.product-size-selector__guide { justify-self: start; margin-block-start: -2.2rem; }
.product-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.product-size-option { position: relative; display: grid; gap: 2px; min-height: 4.5rem; margin: 0; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.product-size-option:has(input:checked) { border-color: var(--color-champagne); box-shadow: inset 0 0 0 1px var(--color-champagne); background: color-mix(in srgb, var(--color-champagne) 12%, white); }
.product-size-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.product-size-option span { color: var(--color-text); font-weight: 800; }
.product-size-option small { color: var(--color-text-muted); font-size: 0.76rem; }
.size-guide-dialog { width: min(94vw, 68rem); max-height: 92vh; padding: var(--space-5); overflow: auto; border: 1px solid var(--color-champagne); border-radius: var(--radius-lg); background: var(--color-ivory); }
.size-guide-dialog::backdrop { background: rgb(24 16 16 / 72%); backdrop-filter: blur(4px); }
.size-guide-dialog__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.size-guide-dialog__header :where(p, h2) { margin-block: 0 6px; }
.size-guide-dialog > img { width: 100%; height: auto; border: 1px solid var(--color-champagne); border-radius: var(--radius-md); background: white; }
.size-guide-dialog > p:last-child { margin-block-end: 0; color: var(--color-text-muted); }

.field-action input {
  min-width: 0;
  flex: 1;
  border-radius: var(--radius-sm);
}

.field-action .button {
  border-radius: var(--radius-sm);
}

.video-story__sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
}

.video-story canvas,
.video-story__fallback,
[data-video-fallback] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-story canvas {
  position: absolute;
  inset: 0;
}

.video-story__fallback {
  position: absolute;
  inset: 0;
}

.video-story__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(20 12 11 / 0.66), transparent 55%);
  pointer-events: none;
}

.video-story__copy {
  position: absolute;
  inset-inline: max(var(--space-4), calc((100% - var(--container)) / 2));
  inset-block-end: max(var(--space-8), env(safe-area-inset-bottom));
  z-index: 2;
  max-width: 35rem;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.34);
}

.video-story__copy h1,
.video-story__copy h2 {
  color: #fff;
}

.video-story__motion-toggle {
  position: absolute;
  inset-block-start: calc(var(--header-height) + var(--space-4));
  inset-inline-end: var(--space-4);
  z-index: 4;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-champagne);
  border-radius: 999px;
  background: rgb(28 23 22 / 0.82);
  color: #fff;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.video-story__motion-toggle:hover,
.video-story__motion-toggle:focus-visible {
  border-color: var(--color-champagne-strong);
  background: var(--color-champagne-soft);
  color: var(--color-charcoal);
}

.video-story[data-video-state="loading"] canvas {
  opacity: 0;
}

.video-story[data-video-state="ready"] canvas {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.category-grid,
.benefit-grid,
.article-grid,
.product-grid,
[data-product-grid] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.benefit-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  min-height: 14rem;
  align-content: end;
  overflow: hidden;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-charcoal);
  text-decoration: none;
}

.category-card > :where(h2, h3, p) {
  margin-block: 0;
}

.category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(25 20 18 / 0.64), transparent 65%);
  content: "";
}

.category-card__content {
  position: relative;
  z-index: 1;
  color: #fff;
}

.category-card__content > :where(span, h3, small) {
  display: block;
  margin-block: 0;
}

.category-card__content h3 { margin-block: 0.25rem; color: #fff; }

.fragrance-language {
  display: grid;
  gap: var(--space-6);
}

.fragrance-language__layers,
.fragrance-language__terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
}

.fragrance-language__layers article,
.fragrance-language__terms article {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.fragrance-language__layers article { border-block-start: 2px solid var(--color-champagne); }
.fragrance-language__layers :where(h3, p),
.fragrance-language__terms :where(h3, p) { margin-block: 0; }
.fragrance-language__layers p,
.fragrance-language__terms p { margin-block-start: var(--space-2); color: var(--color-warm-gray-strong); }

.scent-cta > .container.scent-cta__layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.scent-cta__image {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  border: 1px solid rgb(var(--color-gold-rgb) / 0.5);
  border-radius: var(--radius-lg);
}

.testimonial-carousel { display: grid; gap: var(--space-5); }
.testimonial-carousel__viewport { overflow: hidden; }
.testimonial-carousel .quote-grid { grid-template-columns: 1fr; }
.testimonial-carousel figure { display: grid; align-content: space-between; min-height: 13rem; }
.testimonial-carousel blockquote { margin: 0; font-size: var(--text-lg); line-height: 1.9; }
.testimonial-carousel figcaption { margin-block-start: var(--space-4); color: var(--color-brand); font-weight: 750; }
.testimonial-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.testimonial-carousel__status { min-width: 5.5rem; text-align: center; }

.magazine-hero {
  background:
    linear-gradient(to top, rgb(28 18 18 / 0.84), rgb(28 18 18 / 0.22)),
    url("../images/editorial/magazine-hero-v2.webp") center / cover no-repeat;
}

.magazine-hero :where(h1, p, label) { color: #fff; }
.magazine-hero .eyebrow { color: var(--color-champagne); }
.magazine-search { width: min(100%, 38rem); }
.magazine-search input { background: rgb(255 255 255 / 0.94); }

.scent-family-grid a,
.scent-family-list a,
.page--notes .note-card { text-decoration: none; }

.signature-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.signature-gallery figure { margin: 0; }
.signature-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgb(var(--color-gold-rgb) / 0.45); border-radius: var(--radius-md); }
.about-manifesto { max-width: 68rem; }
.about-manifesto > p { font-size: var(--text-lg); line-height: 2; }
.section--burgundy .stats > div { color: var(--color-charcoal); }
.section--burgundy .stats :where(dt, dd) { color: inherit; }
.page--about .signature-gallery + .stats { margin-block-start: 25px; }

.benefit-card,
.benefit-grid > li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  border-block-start: 2px solid var(--color-gold);
}

.shop-layout {
  display: grid;
  gap: var(--space-6);
}

.shop-sidebar {
  display: none;
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.shop-sidebar.is-open {
  position: fixed;
  inset: max(var(--space-2), env(safe-area-inset-top)) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
  z-index: var(--z-modal);
  display: block;
  margin: 0;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}

.shop-sidebar form,
.shop-sidebar fieldset {
  display: grid;
  gap: var(--space-3);
}

.shop-sidebar fieldset > legend {
  margin-block-end: var(--space-2);
}

.shop-sidebar fieldset > label,
.shop-sidebar form > label:has(input[type="checkbox"]) {
  display: flex;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
}

.filter-group {
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.filter-group__title {
  margin-block-end: var(--space-3);
  font-size: var(--text-base);
}

.filter-options {
  display: grid;
  gap: var(--space-1);
}

.filter-options label {
  display: flex;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.result-summary {
  color: var(--color-warm-gray);
  font-size: var(--text-sm);
}

.product-detail {
  display: grid;
  gap: var(--space-8);
}

.page--product .product-detail {
  max-width: 64rem;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

.page--product .product-buybox {
  width: min(100%, 58rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.page--product .product-story {
  width: min(100%, 58rem);
  margin-inline: auto;
}

.order-builder__heading,
.order-grand-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.order-builder__heading h2,
.order-builder__heading p {
  margin: 0;
}

.order-builder__heading p {
  margin-block-start: var(--space-1);
  color: var(--color-warm-gray);
  font-size: var(--text-sm);
}

.order-lines {
  display: grid;
  gap: var(--space-3);
}

.order-line {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1fr) minmax(10rem, 1.15fr) 4rem;
  gap: var(--space-3);
  max-height: 8rem;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    max-height 380ms var(--ease-emphasized),
    margin 380ms var(--ease-emphasized),
    padding 380ms var(--ease-emphasized),
    border-width 380ms var(--ease-emphasized),
    opacity 260ms ease,
    transform 380ms var(--ease-emphasized),
    background 260ms ease;
}

.order-line.is-entering {
  max-height: 0;
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-0.75rem) scale(0.98);
}

.order-line.is-removing {
  max-height: 0;
  margin-block: calc(var(--space-3) * -0.5);
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  transform: translateX(-2rem) scale(0.96);
}

.order-line.is-resetting {
  animation: order-line-reset 620ms var(--ease-emphasized);
}

.order-line__cell {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: var(--space-1);
}

.order-line__cell > span:first-child {
  color: var(--color-warm-gray);
  font-size: var(--text-xs);
  font-weight: 700;
}

.order-line select,
.order-line input {
  min-width: 0;
  min-height: var(--control-height);
}

.order-line select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.order-line__quantity {
  grid-template-columns: var(--touch-target) minmax(2.5rem, 1fr) var(--touch-target);
}

.order-line__price output {
  color: var(--color-brand);
  font-weight: 800;
}

.order-line__price output.is-updating {
  animation: price-update 320ms ease;
}

.order-line__remove {
  display: grid;
  width: var(--touch-target);
  height: var(--touch-target);
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.order-line__remove:hover {
  background: var(--color-brand);
  color: #fff;
  transform: rotate(-7deg) scale(1.06);
}

.order-line__remove :where(svg, img) {
  width: 1.25rem;
  height: 1.25rem;
}

.order-line__remove svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.order-line__remove img { object-fit: contain; }

.order-grand-total {
  padding: var(--space-4);
  border: 1px solid rgb(var(--color-champagne-rgb) / 0.72);
  border-radius: var(--radius-md);
  background: var(--color-champagne-soft);
}

.order-grand-total strong {
  color: var(--color-brand);
  font-size: var(--text-lg);
}

@keyframes price-update {
  45% { opacity: 0.45; transform: translateY(-0.2rem); }
}

@keyframes order-line-reset {
  35% { background: var(--color-champagne-soft); transform: scale(0.985); }
}

.page--product .product-detail,
.page--product .breadcrumbs {
  width: min(100% - 2rem, var(--container-wide));
}

.product-story,
.scent-pyramid,
.product-specs {
  grid-column: 1 / -1;
}

.product-buybox,
.product-buybox > form {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.product-gallery {
  display: grid;
  gap: var(--space-3);
}

.product-gallery__main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail--unavailable .product-gallery__main img {
  filter: grayscale(0.85);
  opacity: 0.58;
}

.product-detail--unavailable .product-buybox {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger, #9f1239) 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-danger, #9f1239) 5%, var(--color-surface));
}

.product-gallery__thumbs {
  display: grid;
  grid-auto-columns: 4.5rem;
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
}

.product-gallery__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.product-gallery__thumb[aria-current="true"] {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info,
.product-buybox {
  align-self: start;
}

.product-info__sku {
  color: var(--color-warm-gray);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.product-info__price {
  margin-block: var(--space-5);
  font-size: var(--text-xl);
}

.product-specs,
.product-specs > dl {
  display: grid;
  gap: var(--space-3);
}

.product-specs > dl {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin: 0;
}

.product-spec,
.product-specs > dl > div {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.product-spec dt,
.product-specs dt {
  color: var(--color-warm-gray);
  font-size: var(--text-xs);
}

.product-spec dd,
.product-specs dd {
  margin: 0;
  font-weight: 700;
}

.notes-pyramid {
  display: grid;
  gap: var(--space-3);
}

.note-level {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.note-level:nth-child(2) {
  margin-inline: 5%;
}

.note-level:nth-child(3) {
  margin-inline: 10%;
}

.scent-wizard {
  display: grid;
  gap: var(--space-6);
  max-width: var(--container-sm);
  margin-inline: auto;
}

.scent-steps {
  display: grid;
  grid-template-columns: repeat(var(--step-count, 4), minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.scent-steps li {
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.scent-steps li.is-complete,
.scent-steps li[aria-current="step"] {
  background: var(--color-brand);
}

.scent-step {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.match-score {
  display: inline-grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  border: 4px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-brand);
  font-weight: 850;
}

.cart-layout,
.checkout-layout {
  display: grid;
  gap: var(--space-6);
}

.cart-empty {
  margin-block: clamp(2rem, 7vw, 5rem);
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  text-align: center;
}

.cart-empty > * {
  margin-inline: auto;
}

.cart-empty .button {
  margin-top: 1rem;
}

.cart-list {
  display: grid;
  gap: var(--space-3);
}

.cart-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.cart-item__image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__details {
  min-width: 0;
}

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.order-summary {
  display: grid;
  gap: var(--space-4);
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.order-summary dl {
  display: grid;
  gap: var(--space-1);
}

.order-summary dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.order-summary dl > div:last-child {
  border-block-end: 0;
}

.order-summary dd {
  text-align: end;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.summary-row--total {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-brand);
  font-size: var(--text-lg);
  font-weight: 850;
}

.checkout-step {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.payment-option,
.shipping-option,
.address-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.payment-option:has(input:checked),
.shipping-option:has(input:checked),
.address-option:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.auth-shell {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  align-items: center;
  padding-block: var(--space-8);
}

.auth-card {
  display: grid;
  width: min(100%, 31rem);
  margin-inline: auto;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.password-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.password-meter span {
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.password-meter[data-strength="1"] span:nth-child(-n + 1) {
  background: var(--color-danger);
}

.password-meter[data-strength="2"] span:nth-child(-n + 2) {
  background: var(--color-warning);
}

.password-meter[data-strength="3"] span:nth-child(-n + 3),
.password-meter[data-strength="4"] span {
  background: var(--color-success);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.stat-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.stat-card__value {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--text-xl);
  font-weight: 850;
}

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.article-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-muted);
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-champagne);
  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
}

.article-card__body {
  display: grid;
  align-content: start;
  gap: 10px;
  flex: 1;
  padding: var(--space-4);
}

.article-card__body > :where(.eyebrow, h3, p) {
  margin-block: 0;
}

.article-body {
  width: min(100%, 45rem);
  margin-inline: auto;
}

/* Layouts for the standalone page set. */
.page-heading {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

.page-heading > :where(h1, h2, h3, p) {
  margin-block: 0;
}

.account-heading,
.checkout-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.page-heading--center {
  display: grid;
  justify-items: center;
  text-align: center;
}

.page-heading p,
.account-heading p {
  max-width: 46rem;
  color: var(--color-warm-gray);
}

.filters,
.filters--inline,
.account-filters,
.shop-search,
.magazine-search,
.note-filters,
.track-form,
.contact-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.shop-search,
.magazine-search {
  display: grid;
  align-items: stretch;
  gap: var(--space-2);
}

.shop-search > label,
.magazine-search > label {
  margin: 0;
}

.shop-search .field-action,
.magazine-search .field-action {
  width: 100%;
}

.filters > label,
.account-filters > label {
  min-width: min(100%, 12rem);
  flex: 1 1 10rem;
}

.filters--inline > .filters__header {
  width: 100%;
  margin-block-end: 0;
}

.filters--inline > form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.filters--inline > form > label {
  min-width: min(100%, 10rem);
  flex: 1 1 10rem;
}

.filters__header,
.results-toolbar,
.wishlist-toolbar,
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.results-toolbar > label {
  display: flex;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.results-toolbar select {
  min-height: var(--control-height);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-charcoal);
}

.shop-results,
.search-results {
  min-width: 0;
}

.recent-searches,
.active-filters {
  padding: 0;
  list-style: none;
}

.recent-searches a,
.active-filters a,
.alphabet-filter a,
.topic-nav a {
  display: inline-flex;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-charcoal);
  text-decoration: none;
}

.section-heading > label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.section-heading > label select {
  min-height: var(--control-height);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.filter-open {
  width: 100%;
  margin-block-end: var(--space-4);
}

.auth-header,
.error-header,
.admin-login-header {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: max(var(--space-4), calc((100% - var(--container)) / 2));
  border-block-end: 1px solid var(--color-border);
  background: var(--color-ivory);
}

.auth-layout {
  display: grid;
  min-height: calc(100svh - var(--header-height));
}

.auth-visual {
  display: none;
  min-height: 28rem;
  align-items: end;
  padding: clamp(var(--space-8), 8vw, var(--space-20));
  background:
    radial-gradient(circle at 75% 18%, rgb(var(--color-gold-rgb) / 0.34), transparent 28%),
    linear-gradient(145deg, var(--color-brand-strong), var(--color-brand));
  color: #fff;
}

.auth-visual h1 {
  color: #fff;
}

.auth-visual ul {
  display: grid;
  gap: var(--space-2);
}

.auth-panel,
.auth-single {
  display: grid;
  min-width: 0;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding: var(--space-6) var(--space-4);
}

.auth-single {
  background:
    radial-gradient(circle at 15% 10%, rgb(var(--color-gold-rgb) / 0.13), transparent 30%),
    var(--color-ivory);
}

.auth-card--wide {
  width: min(100%, 42rem);
}

.auth-card--verification {
  text-align: center;
}

.auth-card form {
  display: grid;
  gap: var(--space-4);
}

.auth-note,
.admin-security-note {
  margin-block-start: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-warm-gray);
  font-size: var(--text-sm);
}

.auth-footer,
.error-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) max(var(--space-4), calc((100% - var(--container)) / 2));
  border-block-start: 1px solid var(--color-border);
}

.status-icon {
  display: inline-grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--text-2xl);
}

.code-input {
  direction: ltr;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  letter-spacing: 0.45em;
  text-align: center;
}

.about-hero,
.magazine-hero {
  position: relative;
  display: grid;
  min-height: min(64vh, 42rem);
  align-items: end;
  overflow: hidden;
  padding-block: calc(var(--header-height) + var(--space-12)) var(--space-12);
  background:
    radial-gradient(circle at 20% 20%, rgb(var(--color-gold-rgb) / 0.24), transparent 36%),
    linear-gradient(145deg, #fff, #f7eee8);
}

.faq-hero {
  padding-block: clamp(var(--space-8), 7vw, var(--space-12));
  background:
    radial-gradient(circle at 20% 20%, rgb(var(--color-gold-rgb) / 0.18), transparent 38%),
    linear-gradient(145deg, #fff, #f7eee8);
}

.faq-hero > .container {
  display: grid;
  gap: var(--space-3);
}

.about-hero img,
.magazine-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.about-hero::after,
.magazine-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(36 32 31 / 0.82), rgb(36 32 31 / 0.16) 78%);
  content: "";
  z-index: 1;
}

.about-hero > *,
.magazine-hero > * {
  position: relative;
  z-index: 1;
}

.about-hero > img { z-index: 0; }
.about-hero > .container,
.magazine-hero > .container { z-index: 2; }
.about-hero .container > div { display: grid; max-width: 46rem; gap: var(--space-3); }
.about-hero :where(.eyebrow, p) { color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / 0.34); }

.about-hero h1,
.magazine-hero h1 {
  color: #fff;
}

.section--burgundy {
  background: var(--color-brand);
  color: #fff;
}

.section--burgundy h2,
.section--burgundy h3 {
  color: #fff;
}

.section--burgundy .eyebrow {
  color: var(--color-champagne);
}

.split-feature,
.editorial-columns,
.contact-layout,
.track-layout,
.tracking-grid,
.detail-grid {
  display: grid;
  gap: var(--space-6);
}

.split-feature > :where(ul, ol) {
  margin-block: 0;
}

.split-feature > div > .button {
  justify-self: start;
  margin-block-start: var(--space-2);
}

.scent-cta > .container {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.scent-cta .button {
  margin-block-start: var(--space-2);
}

.split-feature > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.article-cover {
  width: min(100% - 2rem, var(--container));
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.stats,
.value-grid,
.quote-grid,
.privacy-points,
.process > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.value-grid,
.privacy-points,
.process > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats > *,
.value-grid > *,
.quote-grid > *,
.privacy-points > *,
.process > ol > * {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.process > ol > li {
  display: grid;
  gap: var(--space-2);
}

.quote-grid > figure {
  margin: 0;
}

.featured-article {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.featured-article img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

.featured-article > div {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
}

.popular-articles,
.topic-nav,
.alphabet-filter,
.share-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-nav {
  justify-content: center;
  gap: var(--space-2);
  margin-inline: auto;
  padding-block: var(--space-5);
}

.article-layout,
.article-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  gap: var(--space-8);
}

.article-layout > * {
  min-width: 0;
  max-width: 100%;
}

.article-header {
  display: grid;
  max-width: 52rem;
  margin-inline: auto;
  gap: var(--space-3);
  text-align: center;
}

.article-lead {
  color: var(--color-warm-gray-strong);
  font-size: var(--text-lg);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-warm-gray);
  font-size: var(--text-sm);
}

.article-body {
  min-width: 0;
  max-width: 100%;
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  overflow-wrap: anywhere;
}

.article-body img {
  margin-block: var(--space-8);
  border: 1px solid var(--color-champagne);
  border-radius: var(--radius-md);
}

.article-callout {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-8);
  padding: var(--space-5);
  border-inline-start: 4px solid var(--color-gold);
  background: var(--color-gold-soft);
}

.table-of-contents {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.table-of-contents :where(nav, a),
.share-tools {
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-tools :where(button, a),
.table-of-contents nav a {
  display: inline-flex;
  min-height: var(--touch-target);
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

.note-grid,
.scent-family-grid,
.scent-family-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.scent-family-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-grid > *,
.scent-family-grid > *,
.scent-family-list > * {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.note-card {
  display: grid;
  gap: var(--space-2);
  color: var(--color-charcoal);
  text-align: start;
  cursor: pointer;
}

.note-card:hover,
.note-card:focus-visible {
  border-color: var(--color-champagne);
  box-shadow: var(--shadow-sm);
}

.finder {
  display: grid;
  gap: var(--space-6);
  width: min(100%, var(--container-sm));
  margin-inline: auto;
}

.finder-progress {
  display: grid;
  gap: var(--space-2);
}

.finder-progress > * {
  margin: 0;
}

.finder-progress progress {
  width: 100%;
  height: 0.45rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  accent-color: var(--color-brand);
}

.finder-progress progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--color-border);
}

.finder-progress progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--color-brand);
}

.finder-progress progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--color-brand);
}

.finder-step,
.finder-summary,
.finder-results {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.step-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.step-heading > span {
  display: inline-grid;
  width: var(--touch-target);
  height: var(--touch-target);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--color-champagne);
  border-radius: 50%;
  background: var(--color-champagne-soft);
  color: var(--color-brand);
  font-weight: 800;
}

.step-heading > :where(h1, h2, h3, p) {
  margin: 0;
}

.finder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  transform: translateY(-0.25rem);
}

.page--scent-finder .site-footer { margin-block-start: 40px; }

.is-removing-shared {
  pointer-events: none;
  animation: shared-item-exit 280ms var(--ease-emphasized) forwards;
}

@keyframes shared-item-exit {
  to { opacity: 0; transform: translateX(-1.25rem) scale(0.98); }
}

@media (min-width: 48rem) {
  .scent-cta > .container.scent-cta__layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); }
  .testimonial-carousel .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .brand__sprayer > span,
  .brand__sprayer::before,
  .brand__sprayer::after { animation: none !important; }
  .is-removing-shared { animation-duration: 1ms; }
}

.finder-results .api-states[hidden],
.finder-results section[hidden] {
  display: none;
}

.finder-results .product-grid + section {
  margin-block-start: var(--space-7);
}

.scent-pyramid {
  display: grid;
  gap: var(--space-3);
}

.scent-pyramid > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.scent-pyramid--main-notes > div { grid-template-columns: minmax(0, 1fr); }
.scent-pyramid--main-notes article:not([hidden]) { text-align: start; }
.scent-pyramid [data-top-notes],
.scent-pyramid [data-heart-notes],
.scent-pyramid [data-base-notes] { unicode-bidi: plaintext; }

.scent-pyramid article {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}

.scent-pyramid article h3,
.scent-pyramid article p {
  margin: 0;
}

.product-story {
  display: grid;
  gap: var(--space-3);
  max-width: 72rem;
}

.product-story [data-product-description] {
  display: grid;
  gap: var(--space-2);
}

.product-story [data-product-description] > p {
  margin: 0;
}

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.faq-item > h3 {
  margin: 0;
}

.faq-item > button,
.faq-item > summary,
.faq-item > h3 > button {
  display: flex;
  width: 100%;
  min-height: var(--touch-target);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: transparent;
  color: var(--color-charcoal);
  font-weight: 750;
  text-align: start;
}

.faq-item > h3 > button::after {
  flex: 0 0 auto;
  color: var(--color-brand);
  content: "+";
  font-size: var(--text-lg);
}

.faq-item > h3 > button[aria-expanded="true"]::after {
  content: "−";
}

.faq-item > div,
.faq-item > p {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

.contact-layout > aside,
.contact-form {
  align-self: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.contact-layout > aside,
.track-layout > div,
.split-feature > div,
.editorial-columns > div {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.contact-form {
  display: grid;
  align-items: stretch;
}

.field-honeypot {
  position: absolute !important;
  inset-inline-start: -9999px !important;
}

.cart-content,
.checkout-main {
  min-width: 0;
}

.cart-content > .button {
  margin-block-start: var(--space-4);
}

.checkout-card,
.saved-addresses,
.secure-note,
.stock-warning,
.wallet-partial {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.checkout-card {
  display: grid;
  gap: var(--space-4);
}

.checkout-card > .step-heading {
  margin-block-end: 0;
}

.checkout-card + .checkout-card {
  margin-block-start: var(--space-4);
}

.saved-addresses > label {
  display: flex;
  min-height: var(--touch-target);
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.checkout-items {
  display: grid;
  gap: var(--space-3);
}

.summary-total {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-brand);
  font-size: var(--text-lg);
  font-weight: 850;
}

.status-main,
.error-main,
.tracking-page {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.status-card,
.error-card {
  display: grid;
  width: min(100%, 42rem);
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.status-card > form,
.error-card > form {
  display: grid;
  gap: var(--space-4);
}

.status-card--success {
  border-block-start: 5px solid var(--color-success);
}

.status-card--failed,
.error-card--form {
  border-block-start: 5px solid var(--color-danger);
}

.status-card--cancelled {
  border-block-start: 5px solid var(--color-warning);
}

.status-details,
.reference-code {
  margin-block: 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

[data-order-items] {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  text-align: start;
}

.status-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgb(var(--color-champagne-rgb) / 0.45);
  border-radius: var(--radius-sm);
  background: var(--color-champagne-soft);
}

.status-order-item div {
  display: grid;
  gap: var(--space-1);
}

.error-code {
  display: block;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 16vw, 8rem);
  font-weight: 850;
  line-height: 1;
}

.track-form {
  display: grid;
}

.tracking-timeline,
.compact-timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracking-timeline li,
.compact-timeline li {
  position: relative;
  padding-inline-start: var(--space-8);
}

.tracking-timeline li::before,
.compact-timeline li::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 3px solid var(--color-brand-soft);
  border-radius: 50%;
  background: var(--color-brand);
  content: "";
}

.tracking-timeline li:not(:last-child)::after,
.compact-timeline li:not(:last-child)::after {
  position: absolute;
  inset-inline-start: 0.375rem;
  inset-block-start: 1.4rem;
  width: 2px;
  height: calc(100% + var(--space-3));
  background: var(--color-border);
  content: "";
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.metric-grid article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.metric-grid strong {
  color: var(--color-brand);
  font-size: var(--text-xl);
}

.metric-grid a,
.verification-list a {
  display: inline-flex;
  min-height: var(--touch-target);
  align-items: center;
}

.account-card {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.account-card > .section-heading {
  margin-block-end: 0;
}

.account-card > form {
  display: grid;
  gap: var(--space-4);
}

.account-heading {
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.verification-list {
  display: grid;
  gap: var(--space-3);
}

.verification-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.quick-actions > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.quick-actions a {
  display: grid;
  min-height: var(--touch-target);
  place-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
}

.order-list,
.address-grid,
.notification-list,
.transaction-list {
  display: grid;
  gap: var(--space-3);
}

.order-card,
.address-card,
.notification-card,
.transaction-card,
.order-summary-card,
.order-item-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.order-card > div:first-child,
.address-card > div:first-child,
.notification-card > div:first-child,
.transaction-card > div:first-child,
.order-summary-card > div:first-child,
.order-item-row > div:first-child {
  display: grid;
}

.order-card small,
.notification-card time,
.transaction-card small,
.order-item-row small {
  color: var(--color-warm-gray);
  font-size: var(--text-xs);
}

.notification-card.is-unread {
  border-inline-start: 4px solid var(--color-brand);
  background: var(--color-brand-soft);
}

.wallet-hero {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: clamp(var(--space-6), 6vw, var(--space-10));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 20%, rgb(var(--color-gold-rgb) / 0.35), transparent 34%),
    linear-gradient(145deg, var(--color-brand-strong), var(--color-brand));
  color: #fff;
}

.wallet-hero strong {
  display: block;
  margin-block: 0;
  font-size: var(--text-3xl);
}

.profile-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.profile-photo img {
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  object-fit: cover;
}

.danger-zone {
  border-color: #e5aeb2;
  background: var(--color-danger-soft);
}

.order-detail dl {
  display: grid;
  gap: var(--space-2);
}

.order-detail dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.order-detail dd {
  text-align: end;
}

.article-body > * + * {
  margin-block-start: 1.25em;
}

.article-body :where(table, pre) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.article-body img {
  border-radius: var(--radius-md);
}

.article-toc {
  padding: var(--space-5);
  border-inline-start: 3px solid var(--color-gold);
  background: var(--color-surface-muted);
}

.contact-grid {
  display: grid;
  gap: var(--space-6);
}

.contact-details {
  display: grid;
  gap: var(--space-3);
}

.contact-details > :where(h1, h2, h3, p, dl, ul, ol) {
  margin-block: 0;
}

.contact-details address {
  display: grid;
  gap: var(--space-3);
  font-style: normal;
}

.contact-details address > div {
  display: grid;
  gap: var(--space-1);
}

.contact-details address p {
  margin-block: 0;
}

.contact-detail {
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.faq-layout {
  display: grid;
  gap: var(--space-6);
}

.faq-categories {
  display: flex;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
  overflow-x: auto;
}

.status-page {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.status-page__content {
  width: min(100%, 37rem);
}

.status-page__code {
  margin: 0;
  color: rgb(var(--color-brand-rgb) / 0.12);
  font-size: clamp(6rem, 24vw, 13rem);
  font-weight: 900;
  line-height: 0.9;
}

.payment-status__icon {
  display: grid;
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.payment-status[data-status="failed"] .payment-status__icon,
.payment-status[data-status="cancelled"] .payment-status__icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.policy-page {
  padding-block: clamp(var(--space-8), 8vw, var(--space-16));
}

.policy-hero {
  display: grid;
  max-width: 52rem;
  margin-block-end: var(--space-8);
  gap: var(--space-3);
  padding: clamp(var(--space-6), 6vw, var(--space-10));
  border: 1px solid var(--color-champagne);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-surface), var(--color-champagne-soft));
  box-shadow: var(--shadow-sm);
}

.policy-hero h1 {
  margin-block: 0;
}

.policy-hero small {
  display: block;
  margin-block-start: 0;
  color: var(--color-text-muted);
}

.policy-layout {
  display: grid;
  gap: var(--space-6);
}

.policy-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  border-block: 1px solid var(--color-border);
}

.policy-nav strong,
.policy-nav a {
  display: flex;
  min-width: 0;
  min-height: var(--touch-target);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  white-space: normal;
}

.policy-nav strong {
  grid-column: 1 / -1;
}

.policy-nav a {
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  text-decoration: none;
}

.policy-nav a:hover,
.policy-nav a:focus-visible {
  background: var(--color-champagne-soft);
  color: var(--color-brand);
}

.policy-content {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.policy-content section {
  display: grid;
  gap: var(--space-3);
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
  padding: clamp(var(--space-5), 5vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-champagne);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.policy-content h2 {
  margin-block-start: 0;
}

.policy-content li + li {
  margin-block-start: var(--space-2);
}

@media (min-width: 64rem) {
  .policy-layout {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    align-items: start;
  }

  .policy-nav {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .policy-nav strong,
  .policy-nav a {
    white-space: normal;
  }
}

/* Sarl 60/20/20 surface composition --------------------------------------- */

:where(
  .page--shop,
  .page--search,
  .page--scent-finder,
  .page--cart,
  .page--checkout,
  .page--wishlist,
  .page--contact,
  .page--faq,
  .page--notes,
  .page--track,
  .page--policy
) .page-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: var(--space-4) var(--space-8);
  padding: clamp(var(--space-6), 6vw, var(--space-12));
  border: 1px solid rgb(var(--color-gold-rgb) / 0.62);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 12% 15%, rgb(var(--color-gold-rgb) / 0.3), transparent 14rem),
    linear-gradient(135deg, var(--sarl-burgundy), var(--sarl-burgundy-deep));
  box-shadow: var(--shadow-md);
}

:where(
  .page--shop,
  .page--search,
  .page--scent-finder,
  .page--cart,
  .page--checkout,
  .page--wishlist,
  .page--contact,
  .page--faq,
  .page--notes,
  .page--track,
  .page--policy
) .page-heading :where(h1, h2, p, strong) { color: #fff; }

:where(
  .page--shop,
  .page--search,
  .page--scent-finder,
  .page--cart,
  .page--checkout,
  .page--wishlist,
  .page--contact,
  .page--faq,
  .page--notes,
  .page--track,
  .page--policy
) .page-heading .eyebrow { color: var(--sarl-champagne); }

/* Home: champagne carries secondary stories; burgundy keeps brand moments. */
.page--home .section--tinted:has(.category-grid) {
  background:
    radial-gradient(circle at 8% 16%, rgb(var(--color-ivory-rgb) / 0.44), transparent 22rem),
    var(--sarl-champagne);
  color: var(--color-charcoal);
}

.page--home .section--tinted:has(.category-grid) :where(h2, .eyebrow) { color: var(--sarl-burgundy); }

.page--home .fragrance-language {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  border: 1px solid rgb(var(--color-gold-rgb) / 0.5);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(105deg, var(--sarl-champagne) 0 31%, var(--sarl-champagne-light) 31% 42%, var(--color-surface) 42%);
}

.page--home .fragrance-language__layers article:nth-child(2),
.page--home .fragrance-language__terms article:nth-child(3) {
  border-color: var(--sarl-champagne);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}

.page--home .fragrance-language__layers article:nth-child(2) :where(h3, p),
.page--home .fragrance-language__terms article:nth-child(3) :where(h3, p) { color: inherit; }

.page--home .benefit-grid > li:nth-child(3n + 2) {
  border-color: var(--sarl-champagne);
  border-radius: var(--radius-md);
  background: var(--sarl-champagne-soft);
}

.page--home [data-api-section="latest-articles"] {
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  border-radius: var(--radius-xl);
  background: linear-gradient(100deg, var(--sarl-champagne) 0 34%, var(--color-surface-muted) 34%);
}

.page--home .section--tinted:has([data-testimonial-carousel]) {
  background:
    radial-gradient(circle at 88% 20%, rgb(var(--color-gold-rgb) / 0.2), transparent 24rem),
    var(--sarl-burgundy-deep);
}

.page--home .section--tinted:has([data-testimonial-carousel]) :where(h2, blockquote) { color: #fff; }
.page--home .section--tinted:has([data-testimonial-carousel]) .eyebrow,
.page--home .section--tinted:has([data-testimonial-carousel]) figcaption { color: var(--sarl-champagne); }
.page--home .testimonial-carousel figure {
  border-color: rgb(var(--color-gold-rgb) / 0.46);
  background: rgb(255 255 255 / 0.08);
}

.page--home .newsletter {
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  border: 1px solid var(--sarl-champagne);
  border-radius: var(--radius-xl);
  background: var(--sarl-champagne-soft);
}

/* Shop and search: keep products light, make navigation and filters structural. */
.page--shop .shop-sidebar {
  border-color: var(--sarl-champagne-dark);
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.28), transparent 34%),
    var(--sarl-champagne);
  color: var(--color-charcoal);
  box-shadow: var(--shadow-md);
}

.page--shop .shop-sidebar :where(h2, legend, label) { color: var(--color-charcoal); }
.page--shop .shop-sidebar .filters__header { border-color: rgb(var(--color-brand-rgb) / 0.35); }
.page--shop .shop-sidebar :where(.text-button, .icon-button) { color: var(--sarl-burgundy); }
.page--shop .shop-sidebar :where(select, input:not([type="radio"], [type="checkbox"])) {
  border-color: rgb(var(--color-gold-rgb) / 0.52);
  background: #fff;
  color: var(--color-charcoal);
}

.page--shop .shop-search,
.page--search .filters--inline {
  padding: var(--space-5);
  border: 1px solid var(--sarl-champagne);
  border-radius: var(--radius-lg);
  background: var(--sarl-champagne-soft);
}

.page--search .search-results {
  padding-inline: var(--space-4);
  padding-block-end: var(--space-10);
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg, transparent 0 72%, var(--sarl-champagne) 72%);
}

:where(.page--shop, .page--search) .product-grid > .product-card:nth-child(4n + 2) .product-card__media {
  background: var(--sarl-champagne);
}

:where(.page--shop, .page--search) .product-grid > .product-card:nth-child(8n + 2) {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
}

/* Product: alternate editorial and commerce surfaces. */
.page--product .product-detail {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page--product .product-story {
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid rgb(var(--color-gold-rgb) / 0.55);
  border-radius: var(--radius-lg);
  background: var(--sarl-burgundy);
  color: rgb(255 255 255 / 0.82);
}

.page--product .product-story :where(h2, h3, p) { color: inherit; }
.page--product .product-story .eyebrow { color: var(--sarl-champagne); }
.page--product .scent-pyramid article:nth-child(2) {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--product .scent-pyramid article:nth-child(2) :where(h3, p) { color: inherit; }
.page--product .product-specs > dl > div:nth-child(3n + 2) {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
}
.page--product #reviews { padding: clamp(var(--space-5), 4vw, var(--space-8)); border-radius: var(--radius-xl); background: var(--sarl-champagne-soft); }
.page--product .section--tinted:has([data-product-group="similar"]) {
  background:
    radial-gradient(circle at 8% 20%, rgb(var(--color-ivory-rgb) / 0.42), transparent 22rem),
    var(--sarl-champagne);
}
.page--product .section--tinted:has([data-product-group="similar"]) h2 { color: var(--sarl-burgundy); }

/* Scent finder: the active decision surface carries the brand color. */
.page--scent-finder .finder {
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border-radius: var(--radius-xl);
  background: var(--sarl-champagne);
}

.page--scent-finder .finder-step {
  border-color: rgb(var(--color-gold-rgb) / 0.58);
  background:
    radial-gradient(circle at 10% 3rem, rgb(var(--color-gold-rgb) / 0.2), transparent 13rem),
    var(--sarl-burgundy);
  color: var(--color-charcoal);
}
.page--scent-finder .finder-step :where(h2, label) { color: inherit; }
.page--scent-finder .finder-step > :where(legend, .field-hint, label) { color: #fff; }
.page--scent-finder .finder-step > :where(input, select),
.page--scent-finder .finder-step .form-grid :where(input, select),
.page--scent-finder .choice-grid label { background: #fff; color: var(--color-charcoal); }
.page--scent-finder .finder-summary dt { color: var(--sarl-champagne); }
.page--scent-finder .finder-summary dd {
  margin-block-start: 2px;
  color: #fff;
  unicode-bidi: plaintext;
}
.page--scent-finder .finder-progress + form { margin-block-start: 6px; }
.page--scent-finder [data-scent-step="2"] > [data-family-search] { margin-block-end: 10px; }
.page--scent-finder .finder-step[hidden] { display: none; }
.page--scent-finder .finder-step:not([hidden]) { display: flow-root; }
.page--scent-finder .finder-step > legend {
  margin-block-end: var(--space-2);
  position: relative;
  top: 30px;
  background-color: none;
}
.page--scent-finder .finder-step > .field-hint { margin-block-end: var(--space-3); }
.page--scent-finder .finder-step .choice-grid { margin-block-start: 10px; }
.page--scent-finder .page-heading {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
}
.page--scent-finder .page-heading :where(h1, h2, p, strong) { color: var(--color-charcoal); }
.page--scent-finder .page-heading .eyebrow { color: var(--sarl-burgundy); }

/* Magazine and article: editorial pages can carry stronger burgundy surfaces. */
.page--magazine .featured-article {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--magazine .featured-article > figure {
  margin: 0;
  padding-inline-start: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
}
.page--magazine .featured-article > figure img { border-radius: var(--radius-md); }
.page--magazine .magazine-hero {
  background:
    linear-gradient(to top, rgb(36 20 24 / 0.82), rgb(36 20 24 / 0.18) 78%),
    url("../images/editorial/magazine-feature-v2.webp") center 42% / cover no-repeat;
  color: #fff;
}
.page--magazine .magazine-hero::after { display: none; }
.page--magazine .magazine-hero :where(p, label) { color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / 0.45); }
.page--magazine .magazine-hero + .featured-article { margin-block-start: 15px; }

.page--home .section--tinted:has(.category-grid) + .fragrance-language,
.page--home .fragrance-language + .scent-cta,
.page--home .section--tinted:has([data-testimonial-carousel]) + .newsletter {
  margin-block-start: 15px;
}

.page--home [data-api-section="latest-articles"] + .section--tinted:has([data-testimonial-carousel]) {
  margin-block-start: 10px;
}

.faq-item > h3 > button { font-size: var(--text-sm); }
.faq-decorated,
.faq-help .centered-cta { position: relative; isolation: isolate; overflow: hidden; }
.fragrance-trail {
  width: min(100%, 20rem);
  height: auto;
  margin-inline: auto;
  color: var(--color-brand);
  opacity: 0.72;
}
.fragrance-trail path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: fragrance-trail-draw 4.5s var(--ease-emphasized) infinite alternate;
}
.fragrance-trail circle {
  fill: var(--color-champagne);
  transform-box: fill-box;
  transform-origin: center;
  animation: fragrance-trail-pulse 2.4s ease-in-out infinite alternate;
}
.fragrance-trail circle:nth-of-type(2) { animation-delay: 420ms; }
.fragrance-trail circle:nth-of-type(3) { animation-delay: 840ms; }
@keyframes fragrance-trail-draw { from { stroke-dashoffset: 1; opacity: 0.45; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fragrance-trail-pulse { from { opacity: 0.35; transform: scale(0.72); } to { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .fragrance-trail :is(path, circle) { animation: none; }
}
.page--search .results-toolbar,
.page--search .filters--inline {
  width: min(100%, 62rem);
  margin-inline: auto;
}
.page--magazine .featured-article :where(h2, p, a) { color: inherit; }
.page--magazine .featured-article .eyebrow,
.page--magazine .featured-article .text-link { color: var(--sarl-burgundy); }
.page--magazine .section--tinted:has(.scent-family-grid) {
  background:
    linear-gradient(110deg, var(--sarl-burgundy-deep) 0 38%, var(--sarl-burgundy) 38%);
  color: #fff;
}
.page--magazine .section--tinted:has(.scent-family-grid) :where(h2, .text-link) { color: #fff; }
.page--magazine .section--tinted:has(.scent-family-grid) .eyebrow { color: var(--sarl-champagne); }
.page--magazine .scent-family-grid > * { border-color: var(--sarl-champagne); background: var(--sarl-champagne-soft); }

.page--article .article-header {
  max-width: min(100% - 2rem, var(--container));
  padding: clamp(var(--space-6), 6vw, var(--space-12));
  border: 1px solid rgb(var(--color-gold-rgb) / 0.55);
  border-radius: var(--radius-xl);
  background: var(--sarl-burgundy);
}
.page--article .article-header :where(h1, p, span, time, b) { color: #fff; }
.page--article .article-header .eyebrow { color: var(--sarl-champagne); }
.page--article .table-of-contents { border-color: var(--sarl-champagne); background: var(--sarl-champagne-soft); }
.page--article .section--tinted:has([data-product-group="article-related"]) { background: var(--sarl-champagne); }
.page--article .section--tinted:has([data-product-group="article-related"]) h2 { color: var(--sarl-burgundy); }

/* About: brand story and signature alternate between deep and light surfaces. */
.page--about .about-manifesto {
  padding: clamp(var(--space-6), 6vw, var(--space-12));
  border: 1px solid rgb(var(--color-gold-rgb) / 0.58);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 12% 14%, rgb(var(--color-gold-rgb) / 0.22), transparent 18rem),
    var(--sarl-burgundy);
  color: rgb(255 255 255 / 0.82);
}
.page--about .about-manifesto :where(h2, p, strong) { color: inherit; }
.page--about .about-manifesto .eyebrow { color: var(--sarl-champagne); }
.page--about .section--tinted:has(.value-grid) { background: var(--color-surface-muted); }
.page--about .process > ol > li:nth-child(even) { border-color: var(--sarl-champagne-dark); background: var(--sarl-champagne); color: var(--color-charcoal); }
.page--about .about-manifesto .editorial-columns > p {
  padding: var(--space-5);
  border: 1px solid var(--sarl-champagne-dark);
  border-radius: var(--radius-md);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--about .section--burgundy:has(.signature-gallery) {
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--about .section--burgundy:has(.signature-gallery) :where(h2, h3, p) { color: inherit; }
.page--about .section--burgundy:has(.signature-gallery) .eyebrow { color: var(--sarl-burgundy); }

/* Cart and checkout: surround light transaction cards with structural color. */
.page--cart main {
  background:
    linear-gradient(to bottom, var(--color-ivory) 0 10rem, var(--sarl-champagne) 10rem 48rem, var(--color-ivory) 48rem);
}
.page--cart { display: flex; min-height: 100svh; flex-direction: column; }
.page--cart > main { width: 100%; flex: 1 0 auto; }
.page--cart .cart-empty { border-color: var(--sarl-champagne); box-shadow: var(--shadow-md); }
.page--cart .order-summary {
  border-color: var(--sarl-champagne);
  background: var(--sarl-burgundy-deep);
  color: #fff;
}
.page--cart .order-summary :where(h2, dt, dd, label, p, strong) { color: inherit; }
.page--cart .order-summary dl > div { border-color: rgb(var(--color-gold-rgb) / 0.35); }
.page--cart .order-summary .summary-total,
.page--cart .order-summary .discount { color: var(--sarl-champagne); }
.page--cart .order-summary input { background: #fff; color: var(--color-charcoal); }
.page--cart .section--tinted:has([data-product-group="cart-recommended"]) { background: var(--sarl-champagne); }
.page--cart .section--tinted:has([data-product-group="cart-recommended"]) h2 { color: var(--sarl-burgundy); }

.page--checkout main {
  background: linear-gradient(90deg, var(--color-ivory) 0 66%, var(--sarl-champagne) 66% 100%);
}
.page--checkout .page-heading { background: linear-gradient(135deg, var(--sarl-burgundy-deep), var(--sarl-burgundy)); }
.page--checkout .checkout-card:first-of-type {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--checkout .checkout-card:first-of-type :where(h2, p, label) { color: inherit; }
.page--checkout .checkout-card:first-of-type :where(input, select, textarea) { background: #fff; color: var(--color-charcoal); }
.page--checkout .checkout-card:nth-of-type(3) {
  border-color: var(--sarl-champagne-dark);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--checkout .checkout-card:nth-of-type(3) :where(h2, p, label) { color: inherit; }
.page--checkout .checkout-card:nth-of-type(3) .option-card { background: #fff; color: var(--color-charcoal); }
.page--checkout .checkout-card:nth-of-type(4) { border-color: var(--sarl-champagne); background: var(--sarl-champagne-soft); }
.page--checkout .order-summary {
  border-color: var(--sarl-champagne);
  background: var(--sarl-burgundy-deep);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.page--checkout .order-summary :where(h2, dt, dd, label, p, strong) { color: inherit; }
.page--checkout .order-summary dl > div { border-color: rgb(var(--color-gold-rgb) / 0.35); }
.page--checkout .order-summary :where(.summary-total, a) { color: var(--sarl-champagne); }

/* Authenticated account area: burgundy navigation plus varied dashboard cards. */
.page--account .account-sidebar {
  padding: var(--space-5);
  border: 1px solid rgb(var(--color-gold-rgb) / 0.55);
  border-radius: var(--radius-lg);
  background: var(--sarl-burgundy-deep);
  color: #fff;
}
.page--account .account-sidebar :where(b, small) { color: inherit; }
.page--account .account-sidebar > nav :where(a, button) { border-color: rgb(var(--color-gold-rgb) / 0.38); background: rgb(255 255 255 / 0.08); color: #fff; }
.page--account .account-sidebar > nav a[aria-current="page"] { border-color: var(--sarl-champagne); background: var(--sarl-champagne); color: var(--sarl-burgundy-deep); }
.page--account .account-heading {
  padding: var(--space-5);
  border: 1px solid rgb(var(--color-gold-rgb) / 0.52);
  border-radius: var(--radius-lg);
  background: var(--sarl-champagne);
  color: var(--color-charcoal);
}
.page--account .account-heading :where(h1, p) { color: inherit; }
.page--account .account-heading .eyebrow { color: var(--sarl-burgundy); }
.page--account .metric-grid article:nth-child(2n) { border-color: var(--sarl-champagne-dark); background: var(--sarl-champagne); color: var(--color-charcoal); }
.page--account .metric-grid article:nth-child(2n) :where(strong, a) { color: var(--sarl-burgundy); }
.page--account .account-card:nth-of-type(even) { border-color: var(--sarl-champagne); background: var(--sarl-champagne-soft); }

@media (max-width: 47.999rem) {
  .page--home .fragrance-language,
  .page--home [data-api-section="latest-articles"] {
    background: linear-gradient(to bottom, var(--sarl-champagne) 0 12rem, var(--sarl-champagne-light) 12rem 16rem, var(--color-surface) 16rem);
  }

  .page--checkout main { background: var(--color-ivory); }
  .page--checkout .checkout-card:nth-of-type(3) { background: var(--sarl-champagne); }
  .page--cart main {
    background: linear-gradient(to bottom, var(--sarl-burgundy) 0 10rem, var(--sarl-champagne) 10rem 20rem, var(--color-ivory) 20rem);
  }
}