/* =============================================================================
   PRISM CANDLES & CO — Design System
   Palette sampled from the brand logo. Structure: Minimalism & Swiss Style.
   Type: Cormorant throughout. No frameworks, no dependencies.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --ink:          #4A1520;
  --ink-soft:     #7A4553;
  --ink-faint:    #A97F8B;
  --blush:        #FFE6ED;   /* sampled from the logo badge */
  --blush-light:  #FFF4F7;
  --blush-deep:   #FFD4E1;
  --cream:        #FFFFFF;   /* every content section is white */
  --marble:       #EFE9E3;
  --taupe:        #C9BDB2;
  --hairline:     #E3D9D0;
  --white:        #FFFFFF;

  /* Iridescence — reserved for the prism motif only */
  --prism-1: #F7C9D9;
  --prism-2: #E4D0F0;
  --prism-3: #C8D9F0;
  --prism-4: #FDE8C8;
  --prism-gradient: linear-gradient(115deg, var(--prism-1), var(--prism-2) 34%, #FDFBF7 52%, var(--prism-3) 72%, var(--prism-4));

  /* ---- Type ---- */
  /* --font-eb-garamond is set in fonts.css, which self-hosts the font. */
  --font-display: var(--font-eb-garamond), "EB Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  /* One typeface everywhere, matching the section headings. Cormorant is a
     light, high-contrast serif, so body copy is set a little larger and at
     weight 500 to hold up at small sizes. */
  --font-body:    var(--font-display);

  --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.16vw, 1.12rem);
  --step-1:  clamp(1.05rem, 1.00rem + 0.25vw, 1.20rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.90rem, 1.60rem + 1.50vw, 3.00rem);
  --step-4:  clamp(2.40rem, 1.80rem + 3.00vw, 4.75rem);

  /* ---- Spacing (density 3/10 — spacious) ---- */
  --space-2xs: 0.5rem;  --space-xs: 0.75rem; --space-sm: 1.25rem;
  --space-md: 2rem;     --space-lg: 3rem;    --space-xl: 4.5rem;
  --space-2xl: 6rem;    --space-3xl: 8rem;

  --container: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:     cubic-bezier(0.33, 0.9, 0.35, 1);
  --dur-fast: 200ms; --dur-mid: 320ms; --dur-slow: 520ms;

  --header-h: 6rem;
  /* Left edge of the centred content column. On wide screens the container
     drifts inward while full-bleed photos stay anchored to the screen edge, so
     banner photos derive their left edge from this, not from a fixed %. */
  --copy-left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));
}

/* =============================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-sm); z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1.25rem; font-size: var(--step--1); letter-spacing: 0.08em;
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.08; }

.display {
  font-size: var(--step-4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 300;
}
.h2 { font-size: var(--step-3); letter-spacing: 0.10em; text-transform: uppercase; }
.h3 { font-size: var(--step-2); letter-spacing: 0.06em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lede { font-size: var(--step-1); font-weight: 300; line-height: 1.7; max-width: 42ch; }
.muted { color: var(--ink-soft); }

/* =============================================================================
   LAYOUT
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, var(--space-3xl)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--space-xl)); }
.section--blush { background: var(--white); }
.section--marble { background: var(--white); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Section heading with prism divider ---- */
.section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, var(--space-xl)); }
.section-head .h2 { margin-bottom: var(--space-sm); }
.section-head p { max-width: 52ch; margin-inline: auto; color: var(--ink-soft); }

.prism-rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm); margin-block: var(--space-sm);
}
.prism-rule::before, .prism-rule::after {
  content: ""; height: 1px; width: clamp(2.5rem, 9vw, 6rem);
  background: linear-gradient(90deg, transparent, var(--taupe));
}
.prism-rule::after { background: linear-gradient(90deg, var(--taupe), transparent); }
.prism-rule span { font-size: 0.72rem; line-height: 1; color: var(--ink-faint); }

/* =============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--blush);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  min-height: 2.9rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur-mid) var(--ease-soft), border-color var(--dur-mid) var(--ease-soft);
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out-expo);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--cream); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn .btn__mark { transition: transform var(--dur-mid) var(--ease-soft); }
.btn:hover .btn__mark { transform: translateX(4px); }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.btn--ink::before { background: var(--blush); }
.btn--ink:hover { color: var(--ink); }
.btn--outline { --btn-bg: transparent; border-color: var(--ink); }
.btn--full { width: 100%; }

.link-underline {
  position: relative; display: inline-block;
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 3px;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* =============================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announce {
  background: var(--blush); color: var(--ink);
  text-align: center; padding: 0.6rem var(--gutter);
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.announce span { display: inline-block; }
.announce .spark { color: var(--ink-soft); }

/* =============================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  /* Solid rather than backdrop-filter: a blur here repaints every scroll frame
     and is the classic source of smearing artifacts on low-end GPUs. Against
     the cream page the visual difference is negligible. */
  background: rgba(251, 248, 245, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-mid) var(--ease-soft), background var(--dur-mid) var(--ease-soft);
}
.header.is-stuck { border-bottom-color: var(--hairline); }

.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-sm); min-height: var(--header-h);
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  position: relative; padding-block: 0.5rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.brand { display: block; justify-self: center; line-height: 0; }
.brand img {
  width: 4.5rem; height: 4.5rem;
  transition: transform var(--dur-mid) var(--ease-soft);
}
.brand:hover img { transform: scale(1.04); }
.brand--sm img { width: 3rem; height: 3rem; }

.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.icon-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 1.4; }
.cart-count {
  position: absolute; top: 0.35rem; right: 0.3rem;
  min-width: 1.05rem; height: 1.05rem; padding-inline: 0.2rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: 50%; font-size: 0.6rem; font-weight: 600; letter-spacing: 0;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.cart-count.is-bump { transform: scale(1.35); }

.burger { display: none; }

/* =============================================================================
   MOBILE MENU
   ========================================================================== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--cream);
  padding: var(--space-md) var(--gutter);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.mobile-menu.is-visible { visibility: visible; }
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu nav { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu.is-open nav a:nth-child(1) { transition-delay: 90ms; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: 150ms; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: 210ms; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: 270ms; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: 330ms; }
.mobile-menu__foot { margin-top: auto; padding-top: var(--space-lg); color: var(--ink-soft); font-size: var(--step--1); }

/* =============================================================================
   HERO — the photograph occupies the middle and right and is never cropped.
   Its own empty marble left edge is extended leftward with a gradient sampled
   from that very edge (x 0-60px of the source file), so the copy sits on what
   reads as one continuous banner rather than a panel beside a picture.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  --hero-photo-left: max(20%, calc((var(--copy-left) + 22.5rem - 19.5%) / 0.805));
  background: linear-gradient(180deg,
    #DBD0C5 0%,  #D8CEC6 12%, #D5CBC2 25%, #C9BCAC 36%,
    #CEC4B8 44%, #D7CDC4 60%, #DCD4CB 80%, #DCD5CE 100%);
}
.hero__bg {
  display: block;
  width: calc(100% - var(--hero-photo-left));
  margin-left: auto;            /* photograph sits to the right */
  /* Dissolve the photograph's left edge into the sampled gradient. 9% is well
     inside its own 19.5% of empty marble, so no candle is ever touched. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%);
}
.hero__bg img {
  display: block;
  width: 100%;
  height: auto;                 /* natural aspect — the whole photograph shows */
}
.hero__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center;
}
.hero__copy { max-width: 21rem; }
.hero__copy .lede { margin-bottom: var(--space-md); color: var(--ink-soft); }

/* =============================================================================
   MOTTO — one treatment, shared by the hero and the footer
   ========================================================================== */
/* `strong` defaults to `bolder`, which is relative: inside type set at 300 it
   lands on 400 and reads as not bold at all. Name the weight instead. */
.motto strong, .lede strong, .hero__copy p strong { font-weight: 600; }

.motto {
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.hero__motto {
  font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.4rem);
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

/* Headline reveal, word by word */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-words .word > span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 900ms var(--ease-out-expo);
}
.reveal-words.is-in .word > span { transform: translateY(0); }

/* =============================================================================
   PRODUCT CARD
   ========================================================================== */
.product-card { position: relative; display: flex; flex-direction: column; background: var(--white); }
.product-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--marble);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1100ms var(--ease-out-expo);
}

/* Prismatic sheen sweep — the brand's signature hover (see CARD HOVER) */
.product-card__media::after,
.collection-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 46%,
              rgba(247,201,217,.45) 50%, rgba(200,217,240,.45) 54%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1100ms var(--ease-out-expo);
  pointer-events: none;
}

.product-card__badge {
  position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 2;
  background: var(--white); color: var(--ink);
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.product-card__quick {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--space-xs);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { transform: translateY(0); }

.product-card__body {
  background: var(--blush); padding: var(--space-sm) var(--space-xs);
  text-align: center; flex: 1;
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: background var(--dur-mid) var(--ease-soft);
}
.product-card__name {
  font-family: var(--font-display); font-size: var(--step-1);
  letter-spacing: 0.10em; text-transform: uppercase; font-weight: 400;
}
.product-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__price { font-size: var(--step-0); color: var(--ink-soft); }
.product-card__scent { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.08em; }

/* =============================================================================
   COLLECTION CARD
   ========================================================================== */
/* No overflow clip on the card itself: the media box clips the photo, and the
   card's hover shadow has to reach outside its edges. */
.collection-card { position: relative; display: block; }
.collection-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--marble); }
.collection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out-expo); }
.collection-card__body { background: var(--blush); padding: var(--space-sm) var(--space-xs); text-align: center; transition: background var(--dur-mid) var(--ease-soft); }
.collection-card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.collection-card__note {
  position: relative; display: inline-block;
  font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.10em; text-transform: uppercase;
  margin-block: 0.35rem 0.75rem;
}
/* Underline that draws in beneath "Discover the scent" on hover. */
.collection-card__note::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

/* =============================================================================
   ABOUT SPLIT
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split__copy { padding: clamp(2rem, 6vw, var(--space-3xl)) clamp(1.25rem, 5vw, var(--space-2xl)); }
.split__copy .h2 { margin-bottom: var(--space-sm); }
.split__copy p { margin-bottom: var(--space-sm); color: var(--ink-soft); max-width: 46ch; }
.split__media { align-self: stretch; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================================
   NEWSLETTER + FOOTER
   ========================================================================== */
.footer { background: var(--blush-light); padding-block: var(--space-xl) var(--space-md); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.4fr repeat(3, 1fr); gap: var(--space-lg) var(--space-md); }
.footer h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer li a { font-size: var(--step-0); color: var(--ink-soft); transition: color var(--dur-fast); }
.footer li a:hover { color: var(--ink); }
.footer__tagline { font-size: var(--step-0); color: var(--ink-soft); margin-top: var(--space-sm); max-width: 22ch; }
.footer__bottom {
  margin-top: var(--space-xl); padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; font-size: var(--step--1); color: var(--ink-soft);
}
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; transition: transform var(--dur-fast) var(--ease-soft); }
.socials a:hover { transform: translateY(-3px); }
.socials svg { width: 1.15rem; height: 1.15rem; }

.subscribe { display: flex; flex-direction: column; gap: 0.75rem; max-width: 22rem; }
.subscribe__row { display: flex; border-bottom: 1px solid var(--taupe); }
.subscribe input {
  flex: 1; min-height: 2.75rem; background: none; border: 0; padding: 0.5rem 0;
  font-size: var(--step-0);
}
.subscribe input::placeholder { color: var(--ink-faint); }
.subscribe input:focus { outline: none; }
.subscribe__row:focus-within { border-bottom-color: var(--ink); }

/* =============================================================================
   CART DRAWER
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(74, 21, 32, 0.32);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-soft);
  backdrop-filter: blur(2px);
}
.overlay.is-visible { visibility: visible; }
.overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
  width: min(27rem, 100vw);
  background: var(--cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo);
  box-shadow: -20px 0 60px rgba(74, 21, 32, 0.10);
}
.drawer.is-visible { visibility: visible; }
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--hairline);
}
.drawer__title { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: 0.12em; text-transform: uppercase; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-sm) var(--space-md); }
.drawer__foot { padding: var(--space-md); border-top: 1px solid var(--hairline); background: var(--blush-light); }

.ship-meter { margin-bottom: var(--space-sm); }
.ship-meter__label { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.5rem; }
.ship-meter__track { height: 3px; background: var(--hairline); overflow: hidden; }
.ship-meter__fill {
  height: 100%; width: 0%; background: var(--ink);
  transform-origin: left;
  transition: width var(--dur-slow) var(--ease-out-expo);
}

.cart-line { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--hairline); }
.cart-line img { width: 4.5rem; aspect-ratio: 4/5; object-fit: cover; background: var(--marble); }
.cart-line__name { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.06em; text-transform: uppercase; }
.cart-line__meta { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.5rem; }
.cart-line__meta:has(+ .cart-line__scent) { margin-bottom: 0; }
.cart-line__scent { font-size: var(--step--1); color: var(--ink); margin-bottom: 0.5rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); }
.qty button { width: 2.2rem; height: 2.2rem; background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; transition: background var(--dur-fast); }
.qty button:hover { background: var(--blush); }
.qty span { min-width: 2rem; text-align: center; font-size: var(--step--1); }
.cart-line__price { font-size: var(--step-0); text-align: right; white-space: nowrap; }
.cart-line__remove { background: none; border: 0; cursor: pointer; font-size: var(--step--1); color: var(--ink-faint); text-decoration: underline; padding: 0.35rem 0; margin-top: 0.35rem; }
.cart-line__remove:hover { color: var(--ink); }

.cart-empty { text-align: center; padding-block: var(--space-2xl); color: var(--ink-soft); }
.cart-empty img { width: 2.5rem; margin: 0 auto var(--space-sm); opacity: .5; }

.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xs); font-size: var(--step-1); }
.cart-total strong { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.cart-note { font-size: var(--step--1); color: var(--ink-soft); text-align: center; margin-top: var(--space-xs); }

/* =============================================================================
   TOAST
   ========================================================================== */
.toast {
  position: fixed; z-index: 170; bottom: var(--space-md); left: 50%;
  background: var(--ink); color: var(--cream);
  padding: 0.85rem 1.5rem; font-size: var(--step--1); letter-spacing: 0.10em; text-transform: uppercase;
  transform: translate(-50%, 150%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.toast.is-visible { transform: translate(-50%, 0); }

/* =============================================================================
   PAGE HEADER / BREADCRUMB
   ========================================================================== */
.page-head { background: var(--blush-light); padding-block: clamp(2.5rem, 6vw, var(--space-2xl)); text-align: center; }
.page-head .display { font-size: var(--step-3); }
.breadcrumb { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* =============================================================================
   FILTERS
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: var(--space-lg); }
.chip {
  min-height: 2.6rem; padding: 0.55rem 1.25rem;
  background: none; border: 1px solid var(--hairline); cursor: pointer;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.product-card.is-hidden { display: none; }

/* =============================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 5vw, var(--space-2xl)); align-items: start; }
.pdp__gallery { display: grid; gap: var(--space-xs); }
.pdp__main { aspect-ratio: 4/5; overflow: hidden; background: var(--marble); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); }
.pdp__thumbs button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; aspect-ratio: 4/5; overflow: hidden; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--ink); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.pdp__price { font-family: var(--font-display); font-size: var(--step-2); margin-block: var(--space-xs) var(--space-sm); }
.pdp__desc { color: var(--ink-soft); margin-bottom: var(--space-sm); }
.pdp__sub { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; color: var(--ink); margin-bottom: var(--space-xs); }
.pdp__note {
  font-size: var(--step--1); color: var(--ink-soft);
  padding-left: 0.85rem; border-left: 1px solid var(--taupe);
  margin-bottom: var(--space-sm);
}
.spec-list { list-style: none; padding: 0; margin-block: var(--space-sm); display: grid; gap: 0.6rem; }
.spec-list li { display: flex; justify-content: space-between; gap: var(--space-sm); padding-bottom: 0.6rem; border-bottom: 1px solid var(--hairline); font-size: var(--step-0); }
.spec-list span:first-child { color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--step--1); }
.pdp__buy { display: flex; gap: var(--space-xs); align-items: stretch; margin-top: var(--space-md); }
.pdp__buy .qty { border-color: var(--taupe); }

/* =============================================================================
   ACCORDION (FAQ)
   ========================================================================== */
.accordion { max-width: 48rem; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--hairline); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.04em;
  min-height: 3.5rem;
  transition: color var(--dur-fast);
}
.accordion__trigger:hover { color: var(--ink-soft); }
.accordion__icon { position: relative; width: 0.9rem; height: 0.9rem; flex: none; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.accordion__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.accordion__icon::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translateX(-50%) scaleY(0); }
/* Opening: the panel's height slides open (0fr → 1fr) while the answer inside
   drifts down into place and fades in, slightly behind the height so it never
   appears before there is room for it. Closing runs quicker and fades first.
   Only the row track, transform and opacity animate. */
.accordion__panel {
  --acc-open: 650ms; --acc-close: 420ms;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-close) var(--ease-soft);
}
.accordion__panel.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-open) var(--ease-out-expo);
}
.accordion__panel > div { overflow: hidden; }
/* A closed answer is also hidden from keyboard and screen readers, not just
   clipped: without this, links inside a closed panel (the Candle Care guide,
   the contact form) could take focus while invisible. Visibility flips only
   after the closing slide has finished. */
.accordion__content {
  visibility: hidden;
  transition: visibility 0s linear var(--acc-close);
}
.accordion__panel.is-open .accordion__content { visibility: visible; transition-delay: 0s; }
.accordion__content > * {
  opacity: 0; transform: translateY(-0.9rem);
  transition: opacity 200ms var(--ease-soft), transform var(--acc-close) var(--ease-soft);
}
.accordion__panel.is-open .accordion__content > * {
  opacity: 1; transform: none;
  transition: opacity 480ms var(--ease-soft) 90ms, transform var(--acc-open) var(--ease-out-expo) 40ms;
}
.accordion__panel p { padding-bottom: var(--space-sm); color: var(--ink-soft); max-width: 60ch; }

/* =============================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: var(--space-sm); max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  min-height: 2.9rem; padding: 0.7rem 0.9rem;
  background: var(--white); border: 1px solid var(--hairline);
  transition: border-color var(--dur-fast);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field__error { font-size: var(--step--1); color: #B3261E; min-height: 1.1rem; }
.field.has-error input, .field.has-error textarea { border-color: #B3261E; }

.info-card { background: var(--blush-light); padding: var(--space-md); }
.info-card h3 { margin-bottom: var(--space-xs); }
.info-card p { color: var(--ink-soft); }
.info-card + .info-card { margin-top: var(--space-sm); }

/* =============================================================================
   VALUE ROW
   ========================================================================== */
.value-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; }
.value-row__item svg { width: 1.6rem; height: 1.6rem; margin: 0 auto var(--space-xs); stroke: var(--ink); fill: none; stroke-width: 1.2; }
.value-row__item h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; }
.value-row__item p { font-size: var(--step--1); color: var(--ink-soft); }

/* =============================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-out-expo), transform 620ms var(--ease-out-expo);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =============================================================================
   CARD HOVER — product cards and scent collection cards
   The card rises off the page on a soft burgundy-tinted shadow, the photograph
   drifts closer, the prismatic sheen crosses it and the panel below deepens.
   Only translate, transform and opacity animate, so a full shop grid stays on
   the compositor. The lift uses the `translate` property rather than
   `transform`, which the scroll reveal above already owns.
   ========================================================================== */
.product-card,
.collection-card {
  transition: opacity 620ms var(--ease-out-expo), transform 620ms var(--ease-out-expo),
              translate 700ms var(--ease-out-expo);
}
/* The shadow lives on its own layer and fades, instead of animating
   box-shadow, which would repaint every frame. An outer shadow never paints
   inside its box, so this sits harmlessly over the card's content. */
.product-card::after,
.collection-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 28px 50px -26px rgba(74, 21, 32, 0.30),
              0 6px 16px -8px rgba(74, 21, 32, 0.10);
  opacity: 0;
  transition: opacity 700ms var(--ease-out-expo);
}

/* Keyboard focus mirrors hover through :has(). Those selectors are kept in
   rules of their own: in a browser without :has() a mixed selector list would
   be dropped whole, taking the mouse hover down with it. */
.product-card:hover .product-card__body,
.collection-card:hover .collection-card__body { background: var(--blush-deep); }
.product-card:has(:focus-visible) .product-card__body,
.collection-card:has(:focus-visible) .collection-card__body { background: var(--blush-deep); }

/* Movement only for a real mouse or trackpad: on touch screens a tap would
   leave the card stuck in its raised state. */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover,
  .collection-card:hover { translate: 0 -8px; z-index: 3; }
  .product-card:hover::after,
  .collection-card:hover::after { opacity: 1; }

  /* Once raised, the card's bottom edge sits 8px above where the pointer
     entered; this strip fills that gap so the card doesn't drop and rise
     again in a loop when the pointer rests near its lower edge. */
  .product-card:hover::before,
  .collection-card:hover::before {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  }

  .product-card:hover .product-card__media img,
  .collection-card:hover .collection-card__media img { transform: scale(1.06); }

  .product-card:hover .product-card__media::after,
  .collection-card:hover .collection-card__media::after { transform: translateX(120%); }

  .collection-card:hover .collection-card__note::after { transform: scaleX(1); transform-origin: left; }

  .product-card:has(:focus-visible),
  .collection-card:has(:focus-visible) { translate: 0 -8px; z-index: 3; }
  .product-card:has(:focus-visible)::after,
  .collection-card:has(:focus-visible)::after { opacity: 1; }
  .collection-card:has(:focus-visible) .collection-card__note::after { transform: scaleX(1); transform-origin: left; }
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .value-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__info { position: static; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: grid; }
  /* Burger (one button) and the actions (three) are unequal, so the middle grid
     track cannot land on centre. There is room to centre the mark absolutely. */
  .header__inner { position: relative; grid-template-columns: 1fr auto 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; aspect-ratio: 16/10; }
}

@media (max-width: 620px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .grid--4.grid--keep-2, .grid--2.grid--keep-2 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .announce { font-size: 0.62rem; letter-spacing: 0.10em; }
  .drawer { width: 100vw; }
  .pdp__buy { flex-direction: column; }
}

/* Burger (one button) and actions (three) are unequal, so the middle grid track
   never lands on centre. Below ~360px the flanks leave too little room to centre
   the mark without colliding, so there we let the grid place it instead. */
@media (min-width: 360px) and (max-width: 860px) {
  .header__inner .brand {
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  /* The absolute brand leaves grid flow, so pin the flanks to their own tracks
     or the actions slide inward and collide with the mark. */
  .header__inner .burger { grid-column: 1; }
  .header__inner .header__actions { grid-column: 3; }
}

/* Below 1200px the left margin of the photograph is no longer wide enough to
   hold the copy clear of the Nefèles candle, so the banner stacks instead of
   overlapping. Threshold derived from the measured 19.5% content inset and the
   21rem copy column — re-check it if either changes. */
@media (max-width: 1200px) {
  .hero { background: var(--white); }
  .hero__bg {
    width: 100%; margin-left: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__inner { position: static; padding-block: var(--space-md) var(--space-lg); }
  .hero__copy { max-width: none; }
}

/* Coarse pointers never get hover — reveal quick-add permanently instead. */
@media (hover: none) {
  .product-card__quick { position: static; transform: none; padding-inline: 0; }
  .product-card__media::after { display: none; }
}

/* =============================================================================
   REDUCED MOTION — kill everything non-essential
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .reveal-words .word > span { transform: none; }
  /* Cards keep their colour and shadow feedback and don't lift or sheen. */
  .product-card, .collection-card { translate: none !important; }
  .product-card__media::after, .collection-card__media::after { display: none; }
  /* The one movement kept: a tiny, slow zoom of the photo inside its own frame.
     The visitor starts it, it stays within the card and nothing around it moves.
     It needs its own transition back, which the blanket rule above removes. */
  .product-card__media img, .collection-card__media img {
    transition: transform 900ms var(--ease-soft) !important;
  }
  /* The search panel still fades and drops in, just shorter and without the
     scale; its results appear together rather than one after another. */
  .search__panel {
    transform: translateY(-0.6rem);
    transition: transform 260ms var(--ease-soft), opacity 220ms var(--ease-soft) !important;
  }
  .search.is-open .search__panel { transform: none; }
  .search__scrim { transition: opacity 220ms var(--ease-soft) !important; }
  .search.is-entering .search__hit { animation: none !important; }
  /* The cookie banner and dialog fade in place, with no rise or scale. */
  .consent, .consent-modal__panel { transform: none !important; }
  .consent, .consent-modal__panel, .consent-modal__scrim { transition: opacity 240ms var(--ease-soft) !important; }
  /* FAQ answers still slide open and closed — a short, user-started reveal
     within the list — but without the extra downward drift. */
  .accordion__panel { transition: grid-template-rows 380ms var(--ease-soft) !important; }
  .accordion__content > * { transform: none !important; transition: opacity 300ms var(--ease-soft) !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__media img,
  .collection-card:hover .collection-card__media img { transform: scale(1.03); }
}

@media print {
  .header, .announce, .drawer, .overlay, .footer { display: none; }
}

/* Inline icon default — inherits colour, overridden by .icon-btn / .value-row rules. */
.ico {
  display: inline-block; vertical-align: -0.18em;
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: round;
}
.info-card h3 .ico { margin-right: 0.5rem; color: var(--ink-soft); }

/* --- Fixes found in browser verification --------------------------------- */
/* [hidden] must beat the component's own display value. */
.cart-count[hidden], [hidden] { display: none !important; }
/* Nav labels are two words; never let them wrap mid-item. */
.nav a, .mobile-menu nav a { white-space: nowrap; }
/* Keep the empty toast out of the layout until it has something to say. */
.toast { visibility: hidden; }
.toast.is-visible { visibility: visible; }

/* Product-name link is stretched over its whole card by ::after, so the real
   tap target is the card, not the text box. */

/* =============================================================================
   TOUCH TARGETS — WCAG 2.5.8 / 44px minimum
   Enforced on coarse pointers only, so mouse-driven layouts stay compact.
   ========================================================================== */
.chip { min-height: 2.75rem; }
.skip-link { padding: 0.85rem 1.25rem; }

@media (hover: none), (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer li a,
  .mobile-menu nav a,
  .mobile-menu__foot a,
  .socials a {
    display: flex; align-items: center; min-height: 44px;
  }
  .breadcrumb a,
  .subscribe a,
  .cart-line__remove { display: inline-block; padding-block: 0.8rem; }
  .link-underline { padding-block: 0.7rem; }
}

/* =============================================================================
   PROSE — care guide and policy pages
   ========================================================================== */
.prose { max-width: 46rem; }
.prose .lede { color: var(--ink-soft); margin-bottom: var(--space-lg); }
.prose__block + .prose__block { margin-top: var(--space-lg); }
.prose__h {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.06em;
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: var(--space-xs); }
.prose ul { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.prose li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
}
/* Prism diamond as the list marker — the brand mark doing quiet work. */
.prose li::before {
  content: "\25C6";                 /* ◆ */
  position: absolute; left: 0; top: 0;
  font-size: 0.62rem;
  line-height: 1.9;
  color: var(--ink-faint);
}
.prose strong { color: var(--ink); font-weight: 500; }
.prose__note {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--blush-light);
  border-left: 2px solid var(--blush-deep);
}
.prose__note p { color: var(--ink-soft); }

/* =============================================================================
   ACCORDION — rich answers
   ========================================================================== */
.accordion__q {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: normal; margin: 0;
}
/* No padding here: the 0fr grid row collapses the content box but not its
   padding, which would leave every closed panel 32px tall and leaking text.
   Spacing goes on a child margin instead, which overflow:hidden does clip. */
.accordion__content { max-width: 62ch; }
.accordion__content > :last-child { margin-bottom: var(--space-md); }
.accordion__content p { color: var(--ink-soft); }
.accordion__content p + p { margin-top: var(--space-xs); }
.accordion__content ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin-top: 0.25rem; }
.accordion__content li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.accordion__content li::before {
  content: "\25C6";                 /* ◆ */
  position: absolute; left: 0; top: 0;
  font-size: 0.58rem;
  line-height: 1.9;
  color: var(--ink-faint);
}
.accordion__content strong { color: var(--ink); font-weight: 500; }

/* The Candle Care pointer that closes the FAQ list. */
.accordion__item--feature {
  background: var(--blush-light);
  border-bottom: 0;
  margin-top: var(--space-md);
  padding-inline: var(--space-sm);
}
.accordion__item--feature .accordion__trigger { color: var(--ink); }

/* Email and phone links must never be case-transformed — an address is literal. */
a[href^="mailto:"], a[href^="tel:"] { text-transform: none; letter-spacing: 0.01em; }

/* =============================================================================
   PRICE + SCENT PICKER
   ========================================================================== */
.price--was {
  color: var(--ink-faint);
  margin-left: 0.4rem;
  text-decoration-thickness: 1px;
}
.product-card__badge { background: var(--ink); color: var(--cream); }

.scent-pick {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--blush-light);
}
.scent-pick__label {
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.scent-pick__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.scent-pick__list li,
.scent-opt__label {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--blush-deep);
}

/* Scent choice on product pages. The fieldset is unstyled so its legend lays
   out like any heading inside the pink panel. */
.scent-pick__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.scent-pick__set .scent-pick__label { padding: 0; }
.scent-opt { position: relative; cursor: pointer; }
/* Hidden visually only: the radios still take keyboard focus and arrow keys. */
.scent-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.scent-opt__label {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: 1rem;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.scent-opt:hover .scent-opt__label { border-color: var(--ink-faint); }
.scent-opt__input:checked + .scent-opt__label {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.scent-opt__input:focus-visible + .scent-opt__label { outline: 2px solid var(--ink); outline-offset: 3px; }
.scent-pick [data-scent-group].is-invalid .scent-opt__label { border-color: #9B1C31; }
/* Sculptural Duo: one row of design tiles per candle. */
.design-pick__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.design-pick__group + .design-pick__group { margin-top: var(--space-sm); }
.design-pick__name {
  padding: 0; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-size: var(--step-0); letter-spacing: 0.06em;
  color: var(--ink-soft);
}
[data-design-group].is-invalid .option { border-color: #9B1C31; }
/* A candle that comes with the set: shown for reference, not selectable. */
.option--fixed, .option--fixed:hover { cursor: default; border-color: var(--hairline); }
.design-pick .scent-pick__error:not(:empty) { margin-top: var(--space-xs); }
/* Sets: one row of scents per candle. */
.scent-pick__candle { border: 0; padding: 0; margin: 0; min-width: 0; }
.scent-pick__candle + .scent-pick__candle { margin-top: var(--space-sm); }
.scent-pick__candle-name {
  padding: 0; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-size: var(--step-0); letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.scent-pick__error { font-size: var(--step--1); font-weight: 600; color: #9B1C31; }
.scent-pick__error:not(:empty) { margin-top: var(--space-xs); }

/* .link-underline is a standalone CTA style; inline inside a sentence it must
   inherit the sentence's casing and size rather than shouting. */
p .link-underline, li .link-underline {
  text-transform: none;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: 500;
}

/* Real brand mark in the footer, at a size where its lettering stays legible. */
.footer__logo { width: 7rem; height: auto; }
@media (max-width: 860px) { .brand img { width: 3.25rem; height: 3.25rem; } }

.cart-empty__mark { font-size: 1.5rem; color: var(--ink-faint); margin-bottom: var(--space-sm); }


/* =============================================================================
   SCENT DETAIL PAGE
   ========================================================================== */
.scent-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, var(--space-2xl));
  align-items: center;
}
.scent-detail__media { overflow: hidden; background: var(--marble); }
.scent-detail__media img { width: 100%; height: auto; display: block; }
.scent-detail__copy p { color: var(--ink-soft); }
.scent-detail__copy p + p { margin-top: var(--space-sm); }
.scent-detail__closer {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink) !important;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 760px) { .scent-detail { grid-template-columns: 1fr; } }

/* The whole scent card is one link. */
.collection-card__link { display: block; color: inherit; }

/* Studio-supplied badge artwork, sized to sit level with the line icon beside it. */
.value-row__art {
  width: 3.25rem; height: 3.25rem;
  object-fit: contain;
  margin: 0 auto var(--space-xs);
}
.value-row__item svg.ico { width: 2.6rem; height: 2.6rem; stroke-width: 1; }

/* =============================================================================
   ABOUT BANNER — built like the hero, adapted to a photograph with no empty
   margin. The photo fills the right 64% (cover, anchored LEFT so the vase,
   woven ball, tray and candles always stay in frame; any crop comes off the
   sofa on the right). The copy sits entirely in the left 36%, on a gradient
   sampled from the photo's own left wall (x 5-14%) and heavily smoothed to
   remove the window-light stripes. Text never sits over the photograph, so it
   cannot cover anything in it.
   ========================================================================== */
.about-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(27rem, 34vw, 42rem);
  --about-photo-left: max(36%, calc(var(--copy-left) + 23.5rem));
  background: linear-gradient(180deg,
    #EAC299 0%, #E1B082 20%, #E2B486 40%, #DFBD92 60%, #D0A97F 80%, #C59266 100%);
}
.about-banner__bg {
  position: absolute; top: 0; right: 0; bottom: 0;
  left: var(--about-photo-left);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
.about-banner__bg img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}
.about-banner__inner {
  position: relative; z-index: 1;
  min-height: inherit;
  display: flex; align-items: center;
  /* Breathing room whichever language is longer: the copy never touches the
     top or bottom edge of the banner. */
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.about-banner__copy { max-width: 22rem; }
.about-banner__copy .h2 { margin-bottom: 0; }
.about-banner__copy .prism-rule { justify-content: flex-start; margin-block: var(--space-xs) var(--space-sm); }
.about-banner__copy .prism-rule::before { display: none; }
/* Full-strength ink: the muted tone falls to 2.2:1 on these warm tones. */
.about-banner__copy p { color: var(--ink); margin-bottom: var(--space-sm); }

@media (max-width: 1200px) {
  .about-banner { min-height: 0; background: var(--white); }
  .about-banner__bg {
    position: static; width: 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .about-banner__bg img { height: auto; object-fit: initial; }
  .about-banner__inner { min-height: 0; padding-block: var(--space-md) var(--space-lg); }
  .about-banner__copy { max-width: none; }
}

/* =============================================================================
   DESIGN OPTIONS — Meet the Divine / Meet Nefèles
   Native radio inputs (keyboard arrows, screen-reader grouping) styled as tiles.
   ========================================================================== */
.options { border: 0; padding: 0; margin: var(--space-md) 0 0; min-width: 0; }
.options__legend {
  padding: 0;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.options__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
.option {
  position: relative;
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; align-items: center;
  padding: 0.55rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.option img { width: 3.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.option__text { display: grid; gap: 0.1rem; }
.option__name { font-size: var(--step-0); letter-spacing: 0.06em; text-transform: uppercase; }
.option__meta, .option__price { font-size: var(--step--1); color: var(--ink-soft); }
.option:hover { border-color: var(--taupe); }
.option.is-selected,
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 420px) { .options__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   LANGUAGE TOGGLE
   Two letters rather than a flag: a flag stands for a country, not a language,
   and the label names the language you will get, not the one you are reading.
   ========================================================================== */
.lang-toggle {
  width: auto; min-width: 2.75rem; padding-inline: 0.5rem;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink);
}
.lang-toggle::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.55rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.lang-toggle:hover::after { transform: scaleX(1); transform-origin: left; }

/* =============================================================================
   SEARCH
   A panel that drops from under the header, over a tinted scrim. Visibility is
   split from the slide so the input is focusable the instant it opens — the
   same pattern the bag drawer uses.
   ========================================================================== */
.search { position: fixed; inset: 0; z-index: 170; visibility: hidden; }
.search.is-visible { visibility: visible; }
.search {
  --search-open: 560ms;
  --search-close: 260ms;
}
.search__scrim {
  position: absolute; inset: 0;
  background: rgba(74, 21, 32, 0.32);
  opacity: 0;
  transition: opacity var(--search-close) var(--ease-soft);
}
.search.is-open .search__scrim { opacity: 1; transition-duration: var(--search-open); }
.search__panel {
  position: relative;
  width: min(42rem, calc(100vw - 2 * var(--gutter)));
  margin: clamp(1rem, 6vh, 5rem) auto 0;
  background: var(--white);
  box-shadow: 0 30px 60px -30px rgba(74, 21, 32, 0.35);
  /* Drops in from behind the header and settles; closing is quicker. */
  transform: translateY(-1.5rem) scale(0.985);
  transform-origin: top center;
  opacity: 0;
  transition: transform var(--search-close) var(--ease-soft), opacity 160ms var(--ease-soft);
  max-height: calc(100vh - clamp(2rem, 12vh, 10rem));
  display: flex; flex-direction: column;
}
.search.is-open .search__panel {
  transform: none; opacity: 1;
  transition: transform var(--search-open) var(--ease-out-expo), opacity 260ms var(--ease-soft);
}
.search__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}
.search__icon { display: grid; place-items: center; color: var(--ink-faint); }
.search__icon svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 1.4; }
.search__input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline-offset: 4px;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 300;
  padding-block: 0.5rem;
}
.search__input::placeholder { color: var(--ink-faint); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__status {
  padding: var(--space-xs) var(--space-sm) 0;
  font-size: var(--step--1); color: var(--ink-soft);
}
.search__status:empty { display: none; }
.search__results { list-style: none; margin: 0; padding: var(--space-2xs) 0 var(--space-xs); overflow-y: auto; }
.search__hit {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  padding: 0.7rem var(--space-sm);
  min-height: 2.75rem;
  transition: background var(--dur-fast) var(--ease-soft);
}
.search__hit:hover, .search__hit:focus-visible { background: var(--blush-light); }
.search__hit-title { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.04em; }
.search__hit-kind {
  flex: none;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}

/* Results rise in one after another, but only on the first list after opening:
   `is-entering` is dropped as soon as the visitor types, so the list never
   re-animates under their fingers while they are still choosing a word. */
@keyframes search-hit-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}
.search.is-entering .search__hit { animation: search-hit-in 460ms var(--ease-out-expo) both; }
.search.is-entering li:nth-child(1) .search__hit { animation-delay: 90ms; }
.search.is-entering li:nth-child(2) .search__hit { animation-delay: 135ms; }
.search.is-entering li:nth-child(3) .search__hit { animation-delay: 180ms; }
.search.is-entering li:nth-child(4) .search__hit { animation-delay: 225ms; }
.search.is-entering li:nth-child(5) .search__hit { animation-delay: 270ms; }
.search.is-entering li:nth-child(6) .search__hit { animation-delay: 315ms; }
.search.is-entering li:nth-child(7) .search__hit { animation-delay: 360ms; }
.search.is-entering li:nth-child(8) .search__hit { animation-delay: 405ms; }

/* =============================================================================
   COOKIE CONSENT
   First-visit banner (a burgundy card at the foot of the screen) and the
   "Cookie and privacy preferences" dialog. Accept and Reject carry identical
   styling on purpose: refusing must be as easy and as visible as agreeing.
   Stacking: above the page, below the bag, menu and search; the dialog above all.
   ========================================================================== */
.consent {
  position: fixed; z-index: 150;
  left: 0; right: 0; bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  width: min(46rem, calc(100vw - 2 * var(--gutter)));
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ink); color: var(--white);
  box-shadow: 0 30px 60px -28px rgba(74, 21, 32, 0.55);
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity 300ms var(--ease-soft), transform 300ms var(--ease-soft);
}
.consent.is-open {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-soft), transform 650ms var(--ease-out-expo);
}
.consent__title {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  letter-spacing: 0.04em; margin-bottom: var(--space-xs);
}
.consent__text { font-size: var(--step--1); line-height: 1.65; color: rgba(255, 255, 255, 0.88); }
.consent__text a { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.consent__actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xs);
  align-items: center; margin-top: var(--space-md);
}
.consent__link {
  background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--white);
  font-size: var(--step--1); text-decoration: underline; text-underline-offset: 0.25em;
  min-height: 2.75rem;
}
.consent__link:hover { color: var(--blush); }
.consent__btn {
  min-height: 2.9rem; padding: 0.7rem 1rem; cursor: pointer;
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.consent__btn:hover { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.consent :focus-visible { outline-color: var(--white); }
@media (max-width: 560px) {
  .consent__actions { grid-template-columns: 1fr 1fr; }
  .consent__link { grid-column: 1 / -1; order: 3; }
}

.consent-modal { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: var(--gutter); }
.consent-modal__scrim {
  position: absolute; inset: 0; background: rgba(74, 21, 32, 0.4);
  opacity: 0; transition: opacity 280ms var(--ease-soft);
}
.consent-modal.is-open .consent-modal__scrim { opacity: 1; transition-duration: 450ms; }
.consent-modal__panel {
  position: relative;
  width: min(40rem, 100%); max-height: calc(100vh - 2 * var(--gutter));
  display: flex; flex-direction: column;
  background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(74, 21, 32, 0.45);
  opacity: 0; transform: translateY(1rem) scale(0.985);
  transition: opacity 240ms var(--ease-soft), transform 280ms var(--ease-soft);
}
.consent-modal.is-open .consent-modal__panel {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ease-soft), transform 560ms var(--ease-out-expo);
}
.consent-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) 0 clamp(1.25rem, 3vw, 2rem);
}
.consent-modal__title {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: 0.03em;
}
.consent-modal__title:focus { outline: none; }
.consent-modal__actions {
  display: grid; gap: 0.6rem;
  padding: var(--space-sm) clamp(1.25rem, 3vw, 2rem) var(--space-md);
  border-bottom: 1px solid var(--hairline);
}
.consent-modal__btn {
  min-height: 2.9rem; padding: 0.7rem 1rem; cursor: pointer;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink);
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.consent-modal__btn:hover { background: var(--blush); color: var(--ink); border-color: var(--blush); }
.consent-modal__btn--line { background: var(--white); color: var(--ink); }
.consent-modal__body { overflow-y: auto; padding: var(--space-md) clamp(1.25rem, 3vw, 2rem) var(--space-lg); }
.consent-modal__sub { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: 0.04em; }
.consent-modal__intro { margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-soft); }
.consent-cats { list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.consent-cat {
  display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.9rem; align-items: center;
  padding-block: var(--space-sm); border-top: 1px solid var(--hairline);
}
.consent-cat__box {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 1.35rem; height: 1.35rem; cursor: pointer;
  border: 1px solid var(--ink); background: var(--white);
  transition: background var(--dur-fast) var(--ease-soft);
}
.consent-cat__box:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.consent-cat__box:disabled { cursor: not-allowed; background-color: var(--ink-faint); border-color: var(--ink-faint); }
.consent-cat__box:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.consent-cat__name {
  font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.04em; cursor: pointer;
  min-height: 2.75rem; display: flex; align-items: center;
}
.consent-cat__box:disabled + .consent-cat__name { cursor: default; }
.consent-cat__desc { grid-column: 2; font-size: var(--step--1); color: var(--ink-soft); margin-top: -0.25rem; }

/* "Cookie preferences" in the footer is a button, styled as its neighbours. */
.footer__link {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--step-0); color: var(--ink-soft);
  transition: color var(--dur-fast);
}
.footer__link:hover { color: var(--ink); }
@media (hover: none), (pointer: coarse) { .footer__link { display: flex; align-items: center; min-height: 44px; } }

@media print { .consent, .consent-modal { display: none !important; } }

/* =============================================================================
   SECTION JOINS
   Every content section is white, so two consecutive ones stacked their full
   padding into a single large void (205px between Best Sellers and Scent
   Collections at 1280px). Collapse the join to one, smaller gap instead.
   The :has() rule is progressive: without it the join is still halved.
   ========================================================================== */
.section + .section { padding-top: 0; }
.section:has(+ .section) { padding-bottom: clamp(3rem, 6.5vw, 6rem); }

/* =============================================================================
   DROPS OF GLOW — wax melts collection, edit, design and scent cards.
   Built from the existing tokens and components (eyebrow, display, prism rule,
   value row, btn--ink); only the layout pieces below are new.
   ========================================================================== */
.dog-hero__media { margin: var(--space-sm) auto 0; max-width: 52rem; aspect-ratio: 3 / 2; overflow: hidden; background: var(--marble); }
.dog-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.dog-intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.dog-hero .dog-intro { margin-top: clamp(2rem, 5vw, var(--space-xl)); }
.dog-hero .dog-intro .display { font-size: var(--step-3); margin-top: var(--space-xs); }
.dog-intro__head { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); max-width: 34ch; margin: 0 auto var(--space-sm); }
.dog-intro__text { color: var(--ink-soft); max-width: 58ch; margin-inline: auto; }
.dog-intro__text + .dog-intro__text { margin-top: var(--space-xs); }
.dog-label { margin-top: 0.35rem; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
/* Edit no.1: the ink bar sits straight on the two designs, and the whole
   block is one link to the wax melts page. */
.dog-edit { display: block; max-width: 46rem; margin: clamp(2rem, 5vw, var(--space-xl)) auto 0; color: var(--ink); text-decoration: none; text-align: center; }
.dog-edit__bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.85rem 3rem; background: var(--ink); color: var(--cream); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.dog-edit__bar .btn__mark { position: absolute; right: 1.5rem; transition: transform var(--dur-mid) var(--ease-soft); }
.dog-edit:hover .dog-edit__bar .btn__mark { transform: translateX(4px); }
.dog-edit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.dog-edit .dog-pick { outline: 0; }
.dog-edit:hover .dog-pick__media img { transform: scale(1.03); }
.dog-edit:hover .dog-pick__name { background: var(--blush-deep); color: var(--ink); }
.dog-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .dog-edit:hover .dog-pick__media img { transform: none; } }
/* Each design is dressed like a scent collection card: the photo sits on a
   blush band carrying the name, which deepens on hover and when selected. */
.dog-pick { display: flex; text-decoration: none; flex-direction: column; gap: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: center; outline: 1px solid transparent; outline-offset: 4px; transition: outline-color 300ms ease; }
.dog-pick__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--marble); }
.dog-pick__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms ease, transform 1100ms var(--ease-out-expo); }
.dog-pick:hover .dog-pick__media img { opacity: 1; transform: scale(1.03); }
.dog-pick.is-selected { outline-color: var(--ink); }
.dog-pick.is-selected .dog-pick__media img { opacity: 1; }
.dog-pick__name { display: block; background: var(--blush); padding: var(--space-sm) var(--space-xs); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: background var(--dur-mid) var(--ease-soft), color 300ms ease; }
.dog-pick:hover .dog-pick__name,
.dog-pick.is-selected .dog-pick__name { background: var(--blush-deep); color: var(--ink); }
.dog-pick:focus-visible { outline: 2px solid var(--ink); }
.dog-pick__panel { margin-top: clamp(1.5rem, 4vw, var(--space-lg)); }
.dog-pick__sub { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin-bottom: var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .dog-pick:hover .dog-pick__media img { transform: none; } }

/* Two large cards side by side, stacked on phones. */
.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); max-width: 56rem; margin-inline: auto; }
.drop-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 27rem; }
.drop-card { display: flex; flex-direction: column; background: var(--blush-light); }
.drop-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--marble); }
.drop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out-expo); }
.drop-card:hover .drop-card__media img { transform: scale(1.04); }
.drop-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); text-align: center; }
.drop-card__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: 0.04em; }
.drop-card__sub { color: var(--ink-soft); max-width: 36ch; }
.drop-card__note { font-size: var(--step--1); letter-spacing: 0.08em; color: var(--ink-faint); }
.drop-card__body .btn { margin-top: auto; }
@media (max-width: 620px) {
  .drop-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .drop-card:hover .drop-card__media img { transform: none; } }

/* The chosen design and scent, spelled out above Add to bag. */
.dog-selection { margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--hairline); font-size: var(--step--1); color: var(--ink); }
.dog-selection__label { letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-right: 0.35rem; }
#find-your-scent { scroll-margin-top: var(--header-h); }

/* Scent Collections: five scents, the last two centred under the first three. */
@media (min-width: 621px) {
  .grid--scents { grid-template-columns: repeat(6, 1fr); }
  .grid--scents > * { grid-column: span 2; }
  .grid--scents > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* Best Sellers: five products in one row; on two-column layouts the fifth sits centred. */
.grid--4.grid--best { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .grid--4.grid--best { grid-template-columns: repeat(4, 1fr); }
  .grid--4.grid--best > * { grid-column: span 2; }
  .grid--4.grid--best > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}