/* ==========================================================================
   Components: header, navigation, hero, product cards, filters, engraving
   preview, basket, timeline, footer and the assistance dock.
   ========================================================================== */

/* ------------------------------------------------------------ Announcement */
.announcement {
  background: var(--brand-deep);
  color: var(--on-dark);
  font-size: var(--step--2);
  letter-spacing: 0.03em;
}
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 2.4rem;
  padding-block: var(--space-2xs);
  text-align: center;
}
.announcement a { color: var(--gold-light); text-decoration: underline; }
.announcement__dismiss {
  position: absolute;
  right: var(--space-md);
  background: none;
  border: 0;
  color: var(--on-dark-subtle);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-2xs);
}
.announcement__wrap { position: relative; }

.demo-banner {
  background: var(--warning-soft);
  border-bottom: 1px solid var(--warning);
  color: var(--warning);
  font-size: var(--step--2);
  text-align: center;
  padding-block: var(--space-2xs);
  /* It is a <p>, and the global paragraph rule caps text at 68ch for
     readability. On a full-width strip that measure applies to the *box*, so
     the banner rendered as a coloured block across the left third of the
     page. */
  max-width: none;
  margin: 0;
}

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Slim utility row above the main bar. Desktop only - on mobile these links
   live in the drawer, where there is room for them. */
.header-utility {
  max-height: 2.1rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  font-size: var(--step--2);
  opacity: 1;
  transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .header-utility {
  max-height: 0;
  border-color: transparent;
  opacity: 0;
}
.header-utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  min-height: 2.1rem;
}
.header-social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-right: auto;
}
.header-social a {
  width: 1.75rem;
  height: 1.75rem;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.header-social a:hover {
  border-color: var(--line-gold);
  background: var(--accent-soft);
}
.drawer-social {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.header-utility a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.header-utility a:hover { color: var(--wine); }

/* The one dominant action in the chrome. Sits after the icons so the icon row
   keeps its own rhythm and the CTA reads as separate from it. */
.header-cta { margin-left: var(--space-xs); }

.header-shell {
  width: 100%;
  max-width: none;
  padding-inline: clamp(var(--space-md), 2.1vw, var(--space-xl));
}

.header-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-bar-height);
}

.brand {
  display: inline-grid;
  gap: 0.18rem;
  justify-items: start;
  min-width: max-content;
  text-decoration: none;
  color: var(--text);
}
.brand__mark {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2vw, 2.25rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.01em;
}
.brand__sub {
  padding-top: 0.24rem;
  border-top: 1px solid var(--line-gold);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 30rem) {
  .brand__sub { display: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  justify-self: end;
}
.icon-btn.header-menu-toggle { display: none; }
@media (max-width: 30rem) {
  .header-actions .header-theme-toggle { display: none; }
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--line); color: var(--accent); }
.icon-btn__count {
  position: absolute;
  top: 0.25rem;
  right: 0.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: 0.22rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-gold);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Main nav */
.nav-primary { justify-self: center; }
.nav-primary__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 84.99rem) {
  .nav-primary { display: none; }
  .icon-btn.header-menu-toggle { display: inline-flex; }
}
/* The full menu is about 1090px wide, and with every action beside it the bar
   needs roughly 1900px. Below that the menu takes its own row under the logo
   and actions, so nothing has to be hidden or pushed past the edge. */
@media (min-width: 95rem) and (max-width: 121.99rem) {
  :root { --header-height: calc(var(--header-bar-height) + 3rem); }
  .header-bar {
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--header-bar-height) 3rem;
    grid-template-areas:
      "brand actions"
      "nav nav";
    row-gap: 0;
    min-height: 0;
  }
  .brand { grid-area: brand; }
  .header-actions { grid-area: actions; }
  .nav-primary {
    grid-area: nav;
    align-self: stretch;
    justify-self: stretch;
    border-top: 1px solid var(--line);
  }
  .nav-primary__list {
    height: 100%;
    justify-content: center;
  }
}

.nav-primary__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav-primary__link:hover,
.nav-primary__item[data-open="true"] > .nav-primary__link { color: var(--wine); }
.nav-primary__link[aria-current="page"] { color: var(--wine); }
.nav-primary__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 1px;
  background: var(--accent);
}
.nav-primary__item { position: static; }

.nav-caret { transition: transform var(--dur-fast) var(--ease); }
.nav-primary__item[data-open="true"] .nav-caret { transform: rotate(180deg); }

/* Mega panel */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(-8px);
  width: 100%;
  max-height: calc(100vh - var(--header-height) - 4rem);
  overflow-y: auto;
  background: var(--surface-raised);
  border-block: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}
.nav-primary__item[data-open="true"] > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega__inner { padding-block: var(--space-xl) var(--space-2xl); }
.mega__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.mega__eyebrow {
  margin: 0 0 var(--space-2xs);
  color: var(--accent);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.mega__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}
.mega__all {
  flex: none;
  color: var(--text);
  font-size: var(--step--1);
  text-decoration: none;
}
.mega__all:hover { color: var(--accent-hover); }
.mega__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--space-2xl);
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-lg);
}
.mega__item { min-width: 0; }
.mega__image {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  text-decoration: none;
}
.mega__image img {
  width: 100%;
  height: 3.6rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .mega__image img { mix-blend-mode: normal; }
.mega__col-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.mega__col-title a { color: inherit; text-decoration: none; }
.mega__col-title a:hover { color: var(--accent-hover); }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a {
  display: block;
  padding: 0.28rem 0;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--text-muted);
}
.mega__list a:hover { color: var(--accent); }
.mega__description {
  margin: var(--space-xs) 0 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}
.mega__feature {
  border-left: 1px solid var(--line);
  padding-left: var(--space-lg);
}
.mega__aside {
  padding-left: var(--space-xl);
  border-left: 1px solid var(--line);
}
.mega__aside-title {
  margin: 0 0 var(--space-sm);
  color: var(--text-subtle);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.mega__aside a {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.mega__aside a:hover span { color: var(--accent-hover); }
.mega__aside span { display: block; font-weight: 600; }
.mega__aside small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: var(--step--2);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(22rem, 90vw);
  z-index: var(--z-drawer);
  background: var(--bg);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.drawer__body { padding: var(--space-md); flex: 1; }
.drawer__foot { padding: var(--space-md); border-top: 1px solid var(--line); }
.drawer-theme-toggle { justify-content: flex-start; }
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.drawer-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.nav-accordion { list-style: none; margin: 0; padding: 0; }
.nav-accordion > li { border-bottom: 1px solid var(--line); }
.nav-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.nav-accordion__panel {
  display: none;
  padding-bottom: var(--space-md);
}
.nav-accordion__panel[data-open="true"] { display: block; }
.nav-accordion__panel a {
  display: block;
  padding: 0.35rem 0 0.35rem var(--space-md);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}
.nav-accordion__panel a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ Search */
/* Absolute, not fixed, and hidden with `visibility` rather than only a
   transform.

   The panel lives inside .site-header, which carries a backdrop-filter - and
   a backdrop-filter makes an element the containing block for its
   `position: fixed` descendants. So `inset: 0` resolved against the header
   rather than the viewport, `translateY(-100%)` moved the panel up by its own
   height from *there*, and roughly 84px of it stayed on screen above the
   header on every page. Positioning it against the header on purpose is both
   the fix and the better design: it drops below the bar, where a search panel
   belongs.

   `visibility` matters independently: a panel hidden only by a transform
   keeps its input and buttons in the tab order. */
.search-panel {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease);
  padding-block: var(--space-lg);
}
.search-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.search-form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.search-form input[type="search"] {
  min-height: 3.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}
.search-suggestions { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.search-suggestions li + li { border-top: 1px solid var(--line); }
.search-suggestions a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  text-decoration: none;
}
.search-suggestions__kind {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  /* Keep the campaign cinematic without hiding the useful content beneath it.
     On a typical laptop the Houses we Carry band now enters the first
     viewport instead of the carousel consuming almost the entire screen. */
  min-height: clamp(34rem, 68svh, 40rem);
  background: var(--image-bg);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--overlay-scrim); }
.hero__content {
  padding-block: var(--space-2xl);
  max-width: 40rem;
  color: var(--on-dark);
}
.hero__content .kicker { color: var(--gold-light); }
.hero__content h1,
.hero__content .hero__headline {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  font-size: var(--step-5);
  margin: 0 0 var(--space-md);
  max-width: none;
}
.hero__content p {
  /* Full strength, not --on-dark-muted. The scrim is flat now rather than
     graded, and at its 0.62 alpha muted copy falls to 3.58:1 over a
     blown-out photograph. Hierarchy here is carried by size and weight
     instead, which costs nothing. */
  color: var(--on-dark);
  font-size: var(--step-1);
  max-width: 34rem;
}
.hero__actions { margin-top: var(--space-lg); }

.hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--on-dark-line);
}
.hero__quicklinks a {
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
}
.hero__quicklinks a::after {
  content: "\2197";
  margin-left: 0.35em;
  color: var(--gold-light);
}
.hero__quicklinks a:hover { color: var(--gold-light); }

@media (max-width: 39.99rem) {
  .hero {
    min-height: 36rem;
    align-items: end;
  }
  .hero__media img { object-position: 64% center; }
  .hero__content { padding-block: var(--space-lg) var(--space-3xl); }
  .hero__content h1,
  .hero__content .hero__headline { font-size: clamp(2.6rem, 12vw, 3.5rem); }
  .hero__content p { font-size: var(--step-0); }
  .hero__actions,
  .hero__quicklinks { margin-top: var(--space-md); }
  .hero__actions .btn { min-height: 3rem; padding: 0.75rem 1.25rem; }
  .hero__quicklinks { gap: var(--space-sm); }
}

/* --------------------------------------------------------- Assurance strip */
/* Sits directly under the hero. Four short promises, evenly spaced, on a
   quiet ground so it reads as a rule between the hero and the catalogue
   rather than as another band competing for attention. */
.assurances {
  border-block: 1px solid var(--line);
  background: var(--surface-muted);
}
.assurances__list {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  grid-template-columns: 1fr;
  margin: 0;
  padding-block: var(--space-lg);
  list-style: none;
}
@media (min-width: 40rem) {
  .assurances__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .assurances__list { grid-template-columns: repeat(4, 1fr); }
}
.assurances__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.assurances__icon {
  flex: none;
  display: inline-flex;
  color: var(--accent);
  margin-top: 0.1em;
}
.assurances__text { display: block; }
.assurances__title {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}
.assurances__body {
  display: block;
  margin-top: 0.15em;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

/* ------------------------------------------------------------ Hero carousel */
/* The band is only a carousel when the business has published more than one
   hero banner; a single banner renders as a plain .hero with no controls and
   none of this applies. */
.hero-band { position: relative; }
.inscription-demo .engrave-preview__body { color: var(--text); background: var(--surface); padding: var(--space-lg); }
.inscription-demo .field__hint { color: var(--text-muted); }
.inscription-demo .link-etched { color: var(--accent-hover); display: inline-block; }
.collection-consultation { display: grid; gap: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--line); background: var(--surface); }
.collection-consultation h2 { font-size: var(--step-3); }
.collection-consultation__aside { padding: var(--space-lg); background: var(--surface-muted); }
.collection-consultation__aside > svg { color: var(--accent-hover); }
.collection-consultation__aside h3 { font-size: var(--step-2); margin-top: var(--space-md); }
.collection-consultation__aside ul { padding-left: var(--space-lg); font-size: var(--step--1); color: var(--text-muted); }
@media (min-width: 62rem) { .collection-consultation { grid-template-columns: 1.4fr 1fr; align-items: center; } }
@media (max-width: 39.99rem) { .collection-consultation { padding: var(--space-lg); } }
.award-specimen { background: var(--brand-deep); color: var(--on-dark); text-align: center; padding: var(--space-2xl) var(--space-lg); border: 1px solid var(--line-gold); }
.award-specimen > svg { color: var(--gold-light); margin-bottom: var(--space-md); }
.award-specimen p { margin-inline: auto; }
.award-specimen__name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; }
.award-specimen__rule { display: block; width: 3rem; height: 1px; margin: var(--space-lg) auto; background: var(--gold-light); }
.award-specimen__caption { color: var(--on-dark-muted); font-size: var(--step--2); }
.craft-detail { border-bottom: 1px solid var(--line); padding-bottom: var(--space-lg); }

/* An editorial split keeps the photograph visible and the copy readable. */
@media (min-width: 62rem) {
  .hero-band--editorial .hero { background: var(--brand-deep); min-height: clamp(33rem, 65svh, 43rem); }
  .hero-band--editorial .hero__media { inset-inline-start: 49%; }
  .hero-band--editorial .hero__scrim { inset-inline-end: 51%; background: var(--brand-deep); }
  .hero-band--editorial .hero__content { width: 44%; max-width: 34rem; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero-band--editorial .hero__content h1,
  .hero-band--editorial .hero__headline { font-size: clamp(2.8rem, 4.2vw, 4.6rem); }
  .hero-band--editorial .hero__content > p:not(.kicker):not(.hero__headline) { font-size: var(--step-0); }
  .hero-band--editorial .hero__actions .btn { font-size: var(--step--1); padding: var(--space-sm) var(--space-md); }
  .hero-band--editorial .hero-band__arrow { background: var(--brand-deep); }
  .hero-band--editorial .hero-band__dots { background: var(--brand-deep); border-radius: var(--radius-pill); }
}
.hero-band__position { color: var(--on-dark); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-wide); white-space: nowrap; }
.hero-band__arrow[data-hero-pause] { width: auto; padding-inline: var(--space-md); font-size: var(--step--2); }
@media (max-width: 47.99rem) {
  .hero-band__arrow[data-hero-pause] { display: inline-flex; }
}
.discovery-paths { border-bottom: 1px solid var(--line); background: var(--surface); }
.discovery-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.discovery-paths a { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-md); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); transition: background var(--dur-fast) var(--ease); }
.discovery-paths a:hover { background: var(--accent-soft); }
.discovery-paths strong { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.discovery-paths small { display: block; font-size: var(--step--2); color: var(--text-muted); margin-top: var(--space-2xs); }
.discovery-paths__number { color: var(--accent-hover); font-family: var(--font-mono); font-size: var(--step--2); }
.discovery-paths a > :last-child { margin-left: auto; }
@media (min-width: 75rem) {
  .discovery-paths__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .discovery-paths a { border-bottom: 0; }
  .discovery-paths a + a { border-left: 1px solid var(--line); }
}
@media (max-width: 39.99rem) {
  .discovery-paths a { padding: var(--space-md) var(--space-xs); gap: var(--space-xs); }
  .discovery-paths__number, .discovery-paths a > :last-child { display: none; }
  .discovery-paths strong { font-size: 1.15rem; }
}

.hero-band--slider .hero-band__viewport {
  display: grid;
  /* Every slide occupies the same cell, so the band is as tall as its tallest
     slide and nothing reflows as they change. */
  grid-template-areas: "slide";
}
.hero-band--slider .hero-slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}
.hero-band--slider .hero-slide[data-current] {
  opacity: 1;
  visibility: visible;
}
.hero-band__controls {
  position: absolute;
  inset-inline: auto max(var(--space-md), calc((100vw - var(--container)) / 2 + var(--space-xl)));
  bottom: var(--space-lg);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: auto;
  max-width: calc(100% - (2 * var(--space-md)));
  margin: 0;
  padding: var(--space-2xs);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-deep) 88%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.hero-band__controls > * { pointer-events: auto; }

.hero-band__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  background: var(--on-dark-wash);
  backdrop-filter: blur(6px);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.hero-band__arrow:hover {
  background: var(--on-dark-faint);
  border-color: var(--on-dark-subtle);
}

.hero-band__dots {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-xs);
}
.hero-band__dot {
  position: relative;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* The active dot lengthens into a bar rather than only changing colour: a
   colour-only cue fails for a reader who cannot distinguish the two. */
.hero-band__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--on-dark-faint);
  transform: translate(-50%, -50%);
  transition: background-color var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}
.hero-band__dot[aria-selected="true"]::before {
  width: 1.6rem;
  background: var(--on-dark);
}

@media (max-width: 47.99rem) {
  .hero-band__controls {
    inset-inline: 50% auto;
    bottom: var(--space-sm);
    transform: translateX(-50%);
  }
  .hero-band__arrow { display: none; }
}

/* ---------------------------------------------------------- Brand strip */
.brand-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.brand-strip__head .kicker { margin-bottom: 0; }
.brand-strip__viewport {
  position: relative;
  margin-top: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.brand-strip__viewport::-webkit-scrollbar { display: none; }
/* The rail itself is outside the page shell, so it spans the full viewport. */
.brand-strip__viewport.is-slider {
  width: 100%;
  padding-inline: var(--space-md);
}
.brand-strip__rail { width: 100%; }
@media (min-width: 48rem) {
  .brand-strip__viewport.is-slider { padding-inline: var(--space-xl); }
}

.brand-strip__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Without JavaScript, or with reduced motion, the logos still spread across
   the whole width rather than huddling at one end. */
.brand-strip__viewport.is-slider .brand-strip__track {
  min-width: 100%;
  justify-content: space-evenly;
}

/* Running: the track is slid by exactly one set of logos, forever. */
.is-marquee .brand-strip__viewport.is-slider {
  overflow: hidden;
  padding-inline: 0;
}
.is-marquee .brand-strip__viewport.is-slider .brand-strip__track {
  width: max-content;
  min-width: 0;
  justify-content: flex-start;
  animation: brand-marquee var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.is-marquee .brand-strip__viewport.is-slider:hover .brand-strip__track,
.is-marquee .brand-strip__viewport.is-slider:focus-within .brand-strip__track,
.is-marquee.is-paused .brand-strip__viewport.is-slider .brand-strip__track,
.is-marquee.is-hidden .brand-strip__viewport.is-slider .brand-strip__track {
  animation-play-state: paused;
}
@keyframes brand-marquee {
  to { transform: translateX(var(--marquee-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .is-marquee .brand-strip__viewport.is-slider .brand-strip__track { animation: none; }
}

.brand-strip__item { flex: none; }
/* Circular tiles rather than bare marks.

   Supplied logos are JPEGs that carry their own background - one arrives as
   white-on-black, the next as black-on-white - so there is no filter that
   flatters both, and inverting for dark mode turns one of them into a white
   slab. Cropping each to a disc makes the background part of the design
   instead of a defect, and it is what the reference site does. */
.brand-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.25rem;
  height: 7.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.brand-strip__link:hover,
.brand-strip__link:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.brand-strip__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-strip__lede {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.hero--split {
  display: grid;
  min-height: 0;
  gap: 0;
}
@media (min-width: 62rem) {
  .hero--split { grid-template-columns: 1fr 1fr; }
}

.page-hero {
  position: relative;
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--line);
}
.page-hero--image {
  min-height: 22rem;
  display: grid;
  align-items: end;
  border-bottom: 0;
  color: var(--on-dark);
  background: var(--image-bg);
  isolation: isolate;
  overflow: hidden;
}
.page-hero--image h1 { color: var(--on-dark); }
.page-hero--image .lede { color: var(--on-dark); }

/* ------------------------------------------------------------ Product card */
.media picture,
.hero__media picture,
.brand-strip__link picture,
.product-card__media picture,
.gallery picture {
  display: contents;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--image-bg);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.product-card:hover .product-card__media,
.product-card:focus-within .product-card__media {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-out);
}
/* Cross-fade to the second image rather than swapping abruptly. */
.product-card__media img + img,
.product-card__media picture + picture img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .product-card__media img + img,
.product-card:hover .product-card__media picture + picture img { opacity: 1; }
.product-card:hover .product-card__media img:first-child,
.product-card:hover .product-card__media picture:first-child img { opacity: 0; }
.product-card__media--single:hover img { transform: scale(1.035); }

.product-card__badges {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 2;
  /* Leaves room for the wishlist button in the opposite corner. */
  max-width: calc(100% - 3.4rem);
}
/* Badge sizing follows the card, not the viewport.

   A tracked-out "ENGRAVABLE" needs about 100px, and the card is narrow in two
   quite different situations: two-up on a phone, and four-up on a 1440px
   desktop. Keying off the viewport fixed the first and left the second
   clipping mid-word, because the card is ~230px either way. A container query
   asks the question that actually matters. */
.product-card { container-type: inline-size; }

@container (max-width: 17rem) {
  .product-card__badges .badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  .product-card__badges { gap: 0.15rem; }
  /* Three stacked badges cover a third of the photograph. Two is the most a
     narrow card can carry without hiding what it is selling. */
  .product-card__badges .badge:nth-child(n + 3) { display: none; }
}

/* Floor for browsers without container query support: the phone case is the
   one where clipping is worst. */
@supports not (container-type: inline-size) {
  @media (max-width: 40rem) {
    .product-card__badges .badge {
      padding: 0.15rem 0.4rem;
      font-size: 0.58rem;
      letter-spacing: 0.04em;
    }
  }
}

.product-card__wish {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.product-card__wish:hover,
.product-card__wish[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.product-card__quick {
  position: absolute;
  inset-inline: var(--space-xs);
  bottom: var(--space-xs);
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
@media (hover: none) {
  .product-card__quick { display: none; }
}

.product-card__body { padding-top: var(--space-sm); flex: 1; display: flex; flex-direction: column; }
.product-card__eyebrow {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ------------------------------------------------------ Category campaigns */
.category-showcase { background: var(--bg-alt); }
.category-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.category-story {
  position: relative;
  isolation: isolate;
  min-height: 21rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--image-bg);
  color: var(--on-dark);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.category-story > .media {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
}
.category-story__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-scrim);
  opacity: 0.3;
  transition: opacity var(--dur) var(--ease);
}
.category-story__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-xl);
  border-top: 1px solid var(--on-dark-line);
  background: var(--overlay-scrim);
}
.category-story__content .small-caps {
  margin-bottom: var(--space-xs);
  color: var(--gold-light);
}
.category-story__content h3 {
  margin-bottom: var(--space-xs);
  color: var(--on-dark);
  font-size: var(--step-3);
}
.category-story__content p:not(.small-caps) {
  max-width: 36rem;
  margin-bottom: var(--space-md);
  color: var(--on-dark-muted);
}
.category-story__link {
  display: inline-flex;
  gap: var(--space-xs);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gold-light);
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.category-story:hover .category-story__scrim { opacity: 0.16; }
.category-story:hover .media img { transform: scale(1.035); }

@media (min-width: 48rem) {
  .category-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-story--feature { grid-column: 1 / -1; min-height: 28rem; }
}
@media (min-width: 68rem) {
  .category-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-story--feature { grid-column: span 2; }
}

.product-card__brand { color: var(--accent); font-weight: 650; }
.product-card__name {
  margin: var(--space-2xs) 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.24;
}
.product-card__name a { text-decoration: none; }
.product-card__price {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.product-card__price del { color: var(--text-subtle); margin-left: 0.4rem; font-size: var(--step--1); }
.price-saving {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.product-card__state {
  font-size: var(--step--1);
  color: var(--accent);
  font-weight: 600;
}
.product-card__actions { margin-top: var(--space-sm); }
.product-card__compare {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  margin-top: var(--space-xs);
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-subtle);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  cursor: pointer;
}
.product-card__compare:hover { color: var(--accent); border-bottom-color: var(--line-gold); }
.product-card__compare[aria-pressed="true"] { color: var(--accent); }
.product-card__compare-mark {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1;
}

/* ----------------------------------------------------------------- Filters */
.filters__group + .filters__group {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}
.filters__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.filters__options {
  margin-top: var(--space-sm);
  max-height: 15rem;
  overflow-y: auto;
}
.filters__options[hidden] { display: none; }
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.2rem 0;
  font-size: var(--step--1);
  cursor: pointer;
}
.filter-option input { accent-color: var(--accent); }
.filter-option__count { margin-left: auto; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.filter-option__swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--step--2);
  font-family: var(--font-ui);
  text-decoration: none;
  color: var(--text-muted);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-lg);
}
.toolbar__count { font-size: var(--step--1); color: var(--text-muted); }
.toolbar__controls { display: flex; align-items: center; gap: var(--space-sm); }
.toolbar select { min-height: 2.4rem; font-size: var(--step--1); width: auto; }
.view-toggle {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.view-toggle__button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
}
.view-toggle__button:hover { color: var(--accent); }
.view-toggle__button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 61.99rem) {
  .view-toggle { display: none; }
}
@media (min-width: 62rem) {
  [data-product-grid][data-grid-view="comfortable"] .grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- Gallery */
.gallery { display: grid; gap: var(--space-sm); }
@media (min-width: 48rem) {
  .gallery { grid-template-columns: 4.5rem 1fr; align-items: start; }
  .gallery__thumbs { order: -1; display: grid; gap: var(--space-xs); }
}
.gallery__stage {
  position: relative;
  background: var(--image-bg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.gallery__stage.is-zoomed img { transform: scale(1.9); cursor: zoom-out; }
.gallery__thumbs { display: flex; gap: var(--space-xs); overflow-x: auto; }
.gallery__thumb {
  flex: none;
  width: 4.5rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--image-bg);
  cursor: pointer;
  overflow: hidden;
}
.gallery__thumb[aria-current="true"] { border-color: var(--accent); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom-hint {
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  padding: 0.2rem 0.5rem;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--line);
  font-size: var(--step--2);
  color: var(--text-muted);
}
.gallery__controls {
  position: absolute;
  left: 50%;
  bottom: var(--space-sm);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.28rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%);
}
.gallery__control {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.gallery__control:hover { background: var(--accent-soft); color: var(--accent); }
.gallery__counter {
  min-width: 2.5rem;
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- Brand index */
.brand-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.brand-directory__card {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  min-height: 9rem;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.brand-directory__card:hover {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.brand-directory__logo {
  display: grid;
  place-items: center;
  height: 5rem;
  padding: var(--space-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-align: center;
}
.brand-strip__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.brand-strip__control {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.brand-strip__control:hover,
.brand-strip__control:focus-visible {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--surface-raised);
}
.brand-strip__control:disabled {
  opacity: 0.45;
  cursor: default;
}
.brand-strip__control[hidden] { display: none; }
.brand-strip__control-play { display: none; }
.brand-strip__control[aria-pressed="true"] .brand-strip__control-play { display: inline-flex; }
.brand-strip__control[aria-pressed="true"] .brand-strip__control-pause { display: none; }
@media (max-width: 31.99rem) {
  .brand-strip__track { gap: var(--space-lg); }
}
.brand-directory__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-directory__copy { display: grid; gap: var(--space-xs); }
.brand-directory__copy strong { font-family: var(--font-display); font-size: var(--step-2); }
.brand-directory__copy span { color: var(--text-muted); font-size: var(--step--1); }
.brand-directory__arrow { color: var(--accent); transition: transform var(--dur) var(--ease); }
.brand-directory__card:hover .brand-directory__arrow { transform: translateX(0.25rem); }
@media (max-width: 61.99rem) {
  .brand-directory { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .brand-directory__card { grid-template-columns: 5.5rem 1fr; gap: var(--space-md); }
  .brand-directory__logo { height: 4rem; }
  .brand-directory__copy span, .brand-directory__arrow { display: none; }
}

/* --------------------------------------------------------- Product detail */
.product-layout { display: grid; gap: var(--space-xl); }
@media (min-width: 62rem) {
  .product-layout { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); align-items: start; }
  .product-layout__aside { position: sticky; top: calc(var(--header-height) + var(--space-md)); }
}

.price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.price-block__amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
}
.price-block__was { color: var(--text-subtle); text-decoration: line-through; }
.price-block__tax { font-size: var(--step--1); color: var(--text-subtle); }
.price-block__quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
}

.option-group + .option-group { margin-top: var(--space-md); }
.option-group__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.option-swatches { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.option-swatch {
  min-width: 3rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.option-swatch:hover { border-color: var(--accent); }
.option-swatch[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty button {
  width: 2.5rem;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1;
  cursor: pointer;
}
.qty button:hover { color: var(--accent); }
.qty input {
  width: 3.25rem;
  min-height: auto;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  background: var(--bg-alt);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sticky mobile action bar: Add to Enquiry + WhatsApp, thumb height. */
.sticky-actions {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticky-actions.is-visible { transform: none; }
.sticky-actions .btn { flex: 1; }
.sticky-actions .btn--icon { flex: none; }
@media (min-width: 62rem) {
  .sticky-actions { display: none; }
}

/* Optional brief fields stay available without making a first-time visitor
   confront the full operational questionnaire. Validation errors reopen the
   disclosure in the template, so no failed field is hidden. */
.form-extras {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.form-extras > summary {
  min-height: 3rem;
  padding: 0.8rem var(--space-md);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 650;
  cursor: pointer;
}
.form-extras > summary::marker { color: var(--accent); }
.form-extras[open] > summary { border-bottom: 1px solid var(--line); }
.form-extras__body { padding: var(--space-md); }
.form-extras__body > :last-child { margin-bottom: 0; }

.faq-row {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.faq-row > summary { font-weight: 600; cursor: pointer; }

/* ----------------------------------------------------- Engraving Studio */
.wizard { display: grid; gap: var(--space-xl); }
@media (min-width: 68rem) {
  .wizard { grid-template-columns: 1fr 22rem; gap: var(--space-2xl); align-items: start; }
  .wizard__preview { position: sticky; top: calc(var(--header-height) + var(--space-md)); }
}

.stepper {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-lg);
  scrollbar-width: thin;
}
.stepper--short { max-width: 34rem; }
.stepper--short .stepper__item { flex: 1 1 0; justify-content: center; }
.stepper__item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--step--2);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.stepper__item[aria-current="step"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.stepper__item.is-complete { color: var(--text); border-color: var(--line-strong); }
.stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: 0.62rem;
  font-weight: 700;
}
.stepper__item.is-complete .stepper__num { background: var(--accent); border-color: var(--accent); color: var(--text-on-gold); }

.step-panel { display: block; margin-bottom: var(--space-xl); }
.js .step-panel { display: none; margin-bottom: 0; }
.js .step-panel.is-active { display: block; }
.step-panel__head { margin-bottom: var(--space-md); }
.step-panel__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

/* Card-style choices for object type, style and placement. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-sm);
}
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--accent); }
.choice[aria-checked="true"],
.choice.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice__title { font-weight: 600; font-size: var(--step--1); }
.choice__meta { font-size: var(--step--2); color: var(--text-subtle); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

/* Live 2D preview. SVG so it scales and prints cleanly, and so a future
   3D renderer can replace this panel without touching the wizard. */
.engrave-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
/* The stage simulates a polished metal surface for the live engraving
   preview. Its colours are deliberately literal rather than tokenised: it
   depicts a physical material the machine will cut, and metal does not change
   colour because the reader picked a theme. Only the light/dark pair below
   differs, and only to keep the engraved stroke legible. */
.engrave-preview__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #c4bba6;
  display: grid;
  place-items: center;
}
:root[data-theme="dark"] .engrave-preview__stage { background: #332e28; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .engrave-preview__stage { background: #332e28; }
}
.engrave-preview__svg { width: 100%; height: 100%; }
.engrave-preview__text {
  fill: none;
  stroke: rgba(60, 45, 25, 0.75);
  stroke-width: 0.4;
  paint-order: stroke;
}
:root[data-theme="dark"] .engrave-preview__text { stroke: rgba(255, 246, 224, 0.8); }
.engrave-preview__body { padding: var(--space-md); }
.engrave-preview__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  font-size: var(--step--1);
}
.engrave-preview__row + .engrave-preview__row { border-top: 1px solid var(--line); }
.engrave-preview__total {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
}
.char-counter { font-size: var(--step--2); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.char-counter.is-over { color: var(--danger); font-weight: 600; }

.file-drop {
  display: grid;
  place-items: center;
  gap: var(--space-xs);
  padding: var(--space-xl);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.file-drop:hover,
.file-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.file-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; font-size: var(--step--1); }
.file-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------ Basket lines */
.basket-line {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .basket-line { grid-template-columns: 7rem 1fr auto; align-items: start; }
}
.basket-line__media {
  aspect-ratio: 1;
  background: var(--image-bg);
  overflow: hidden;
  border-radius: var(--radius-md);
}
.basket-line__media img { width: 100%; height: 100%; object-fit: cover; }
.basket-line__title { font-family: var(--font-display); font-size: var(--step-1); margin: 0; }
.basket-line__meta { font-size: var(--step--1); color: var(--text-muted); }
.basket-line__personalisation {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--line-gold);
  background: var(--accent-soft);
  font-size: var(--step--1);
}
.basket-line__side { text-align: right; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  font-size: var(--step-0);
}
.summary-row + .summary-row { border-top: 1px solid var(--line); }
.summary-row--total {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--step-2);
}

/* -------------------------------------------------------------- Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
  border-left: 1px solid var(--line);
}
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -0.3rem;
  top: 0.35rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.timeline > li.is-current::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline > li.is-done::before { background: var(--success); }
.timeline__when { font-size: var(--step--2); color: var(--text-subtle); }
.timeline__what { font-weight: 600; }

.progress-track {
  display: flex;
  gap: 2px;
  margin-block: var(--space-md);
}
.progress-track__seg {
  flex: 1;
  height: 3px;
  background: var(--line);
}
.progress-track__seg.is-done { background: var(--accent); }

/* --------------------------------------------------------------- Reviews */
.stars { display: inline-flex; gap: 1px; color: var(--accent); }
.stars--muted { color: var(--line-strong); }
.review {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.review__head { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; }
.review__author { font-weight: 600; }
.review__quote { font-family: var(--font-display); font-size: var(--step-1); font-style: italic; }
.review__response {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--line-gold);
  background: var(--surface-muted);
  font-size: var(--step--1);
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-gold);
  background: var(--surface);
  height: 100%;
}
.quote-card__mark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--line-gold);
}
.section--olive .quote-card { border-top-color: var(--olive); }
.section--olive .quote-card__mark { color: var(--olive); }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); }

/* --------------------------------------------------------------- Branches */
.branch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
}
.branch-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); }
.branch-card__services { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.branch-card__actions { margin-top: auto; padding-top: var(--space-sm); }
.open-now { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); font-weight: 600; }
.open-now__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--success); }
.open-now--closed { color: var(--text-subtle); }
.open-now--closed .open-now__dot { background: var(--line-strong); }

/* ----------------------------------------------------------- Slot picker */
.day-strip { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-xs); }
.day-chip {
  flex: none;
  display: grid;
  gap: 0.1rem;
  place-items: center;
  min-width: 4.25rem;
  padding: var(--space-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--step--1);
}
.day-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.day-chip__dow { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.day-chip[aria-pressed="true"] .day-chip__dow { color: inherit; }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.slot {
  min-height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.slot:hover { border-color: var(--accent); }
.slot[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--text-on-gold); font-weight: 600; }

/* --------------------------------------------------------- Assistance dock */
.assist-dock {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: calc(var(--z-header) - 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
}
.assist-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.assist-dock__btn:hover { border-color: var(--accent); color: var(--accent); }
.assist-dock__btn--whatsapp { border-color: #1f9d57; color: #1f9d57; }
@media (max-width: 61.99rem) {
  .assist-dock { bottom: calc(var(--space-md) + 3.75rem); }
  .assist-dock__label { display: none; }
  .assist-dock__btn { padding: 0.8rem; }
}

/* --------------------------------------------------------- Product compare */
.compare-tray {
  position: fixed;
  left: 50%;
  bottom: var(--space-md);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: min(34rem, calc(100vw - 2rem));
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}
.compare-tray[hidden] { display: none; }
.compare-tray__summary {
  display: block;
  color: var(--text-subtle);
  font-size: var(--step--2);
}
.compare-tray__actions { display: flex; align-items: center; gap: var(--space-xs); }
.modal-card--wide { width: min(68rem, 100%); }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
}
.compare-card {
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--space-sm);
  background: var(--image-bg);
}
.compare-card__title { font-size: var(--step-1); }
.compare-card__title a { text-decoration: none; }
.compare-card__details {
  display: grid;
  grid-template-columns: minmax(5rem, 0.8fr) 1.2fr;
  margin-block: var(--space-md);
  font-size: var(--step--1);
}
.compare-card__details dt,
.compare-card__details dd {
  margin: 0;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
}
.compare-card__details dt { color: var(--text-subtle); font-weight: 500; }
.compare-card__details dd { color: var(--text); font-weight: 600; }
@media (max-width: 39.99rem) {
  .compare-tray {
    bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    gap: var(--space-sm);
  }
  .compare-tray .btn--ghost { display: none; }
  body:has(.compare-tray:not([hidden])) .assist-dock {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }
  .compare-modal { place-items: end center; padding: 0; }
  .compare-modal .modal-card {
    width: 100%;
    max-height: 92vh;
    border-inline: 0;
  }
  .compare-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    padding-bottom: var(--space-sm);
  }
  .compare-card { flex: 0 0 82vw; scroll-snap-align: center; }
}

/* ------------------------------------------------------------------ Toasts */
.toast-stack {
  position: fixed;
  top: calc(var(--header-height) + var(--space-md));
  right: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  font-size: var(--step--1);
  animation: toast-in var(--dur) var(--ease-out);
}
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--info { border-left-color: var(--info); }
.toast--warning { border-left-color: var(--warning); }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--text-subtle); cursor: pointer; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
}

/* ------------------------------------------------------------------ Modal */
.modal-backdrop-custom {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-backdrop-custom[data-open="true"] { opacity: 1; visibility: visible; }
.modal-card {
  width: min(56rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.modal-backdrop-custom[data-open="true"] .modal-card { transform: none; }
.modal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.modal-card__body { padding: var(--space-lg); }

/* -------------------------------------------------------------- Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xl);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination [aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-gold);
  font-weight: 600;
}
.pagination .is-gap { border-color: transparent; }

/* --------------------------------------------------------------- Empty state */
.empty-state {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}
.empty-state__icon { color: var(--line-strong); }

/* ------------------------------------------------------------------ Footer */
.site-footer {
  margin-top: var(--space-3xl);
  background: var(--onyx);
  color: var(--on-dark-muted);
  font-size: var(--step--1);
}
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.footer-top {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--line-inverse);
}
@media (min-width: 48rem) {
  .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.footer-col__title {
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-light);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: var(--space-2xs); }
.footer-brand__mark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--on-dark);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  font-size: var(--step--2);
  color: var(--on-dark-subtle);
}
.footer-note {
  padding: var(--space-md);
  border: 1px solid var(--line-inverse);
  border-left: 2px solid var(--gold);
  background: var(--on-dark-wash);
  font-size: var(--step--2);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------- Theme toggle affordance */
.theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
}

/* Radio-driven choice cards: styled from the input state so the visual and
   the accessible state can never disagree. */
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.choice:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.stepper__item.is-optional .stepper__num::after {
  content: "";
}
.stepper__item.is-optional { opacity: 0.75; }

/* File-drop keyboard affordance. */
.file-drop:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Details/summary disclosure used for FAQs. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 400;
}
details[open] > summary::after { content: "\2212"; }