/* ============================================================================
   ALVANY — theme.css
   Header · footer · homepage · components. Consumes tokens.css ONLY (no raw
   themed hex/px beyond glass alphas). Mobile-first. Quiet luxury, editorial,
   compact (4px grid). Multi-category: Jewellery · Bags · Homeware · Perfumes.
   ========================================================================== */

/* ---- Primitives ---------------------------------------------------------- */
.alv-body { background: var(--surface-page); color: var(--text-body); }

img { max-width: 100%; display: block; }
a { color: inherit; }

.alv-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 768px) { .alv-container { padding: 0 var(--space-7); } }

/* Compact editorial section rhythm (tightened with the 4px-grid migration).
   Vertical rhythm capped at --space-8 (48px) on every breakpoint. */
.alv-section { padding: var(--space-8) 0; }
.alv-section--cream { background: var(--surface-sunken); }

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

.alv-skip {
  position: absolute; left: var(--space-3); top: -60px; z-index: var(--z-toast);
  background: var(--ink-900); color: var(--paper); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xs); text-decoration: none; font-size: var(--fs-body-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.alv-skip:focus { top: var(--space-3); }

/* ---- Shared type helpers ------------------------------------------------- */
.alv-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.alv-eyebrow--light { color: var(--gold-300); }

.alv-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 24px;
  letter-spacing: var(--ls-wordmark);
  text-indent: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
@media (min-width: 768px) { .alv-wordmark { font-size: 26px; } }
.alv-wordmark--sm { font-size: 20px; }
.alv-wordmark--footer { font-size: 30px; }

/* ---- Buttons ------------------------------------------------------------- */
.alv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none;
  padding: 13px var(--space-6); border: var(--bw-hairline) solid transparent;
  border-radius: var(--radius-xs); cursor: pointer; min-height: var(--tap-min);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.alv-btn--dark { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.alv-btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); }
.alv-btn--dark:active { background: var(--ink-800); transform: translateY(1px); }
.alv-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--line-strong); }
.alv-btn--ghost:hover { background: var(--overlay-veil); border-color: var(--ink-900); }
.alv-btn--light { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.alv-btn--light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.alv-btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(253, 251, 247, 0.7); }
.alv-btn--ghost-light:hover { background: rgba(253, 251, 247, 0.12); border-color: var(--paper); }

/* ---- The page layer (opaque; reserves fixed-footer height) --------------- */
/* .alv-footer-fixed is set by JS only when the footer FITS the viewport — so a tall
   footer (e.g. stacked mobile) never gets trapped off-screen as a fixed element. */
.alv-page { position: relative; z-index: 1; background: var(--surface-page); }
/* Reserve the footer's height only where the reveal actually engages (desktop). */
@media (min-width: 768px) {
  html.alv-footer-fixed .alv-page { margin-bottom: var(--alv-footer-h, 0); }
}

/* ============================================================ HEADER ======= */
.alv-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(253, 251, 247, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: var(--bw-hairline) solid var(--line);
  font-family: var(--font-ui); color: var(--ink-900);
}

.alv-announce {
  background: var(--ink-900); color: var(--paper); text-align: center;
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 8px var(--space-4);
}

.alv-header__bar {
  max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter-mobile);
  min-height: 60px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2);
}
@media (min-width: 768px) { .alv-header__bar { min-height: 74px; padding: 0 var(--space-7); } }
@media (min-width: 900px) { .alv-header__bar { grid-template-columns: 1fr auto 1fr; gap: var(--space-4); } }

/* Nav (left) — mobile shows hamburger + search beside it; desktop shows the list */
.alv-nav { display: flex; align-items: center; gap: var(--space-1); }
.alv-nav__toggle, .alv-nav__msearch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; background: transparent; color: inherit; cursor: pointer;
  text-decoration: none;
}
.alv-nav__list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-6); }
@media (min-width: 900px) {
  .alv-nav { gap: var(--space-6); }
  .alv-nav__list { display: flex; }
  .alv-nav__toggle, .alv-nav__msearch { display: none; }
}
.alv-nav__item { position: static; }
.alv-nav__link {
  display: inline-block; font-size: var(--fs-caption); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: inherit; text-decoration: none; padding: 6px 0;
  position: relative;
}
.alv-nav__link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: var(--bw-hairline);
  background: var(--gold-500); transition: right var(--dur-base) var(--ease-out);
}
.alv-nav__item:hover > .alv-nav__link::after,
.alv-nav__item:focus-within > .alv-nav__link::after { right: 0; }

/* Mega-menu */
.alv-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-header);
  background: var(--paper); border-top: var(--bw-hairline) solid var(--line);
  border-bottom: var(--bw-hairline) solid var(--line); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
@media (max-width: 899px) { .alv-mega { display: none; } }
.alv-nav__item.has-mega:hover .alv-mega,
.alv-nav__item.has-mega:focus-within .alv-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.alv-mega__inner {
  max-width: var(--container-wide); margin: 0 auto; padding: var(--space-8) var(--space-7);
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: var(--space-8);
}
.alv-mega__col { display: flex; flex-direction: column; gap: var(--space-3); }
.alv-mega__head {
  font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-400); margin-bottom: var(--space-2);
}
.alv-mega__link {
  font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink-800);
  text-decoration: none; width: max-content;
  border-bottom: var(--bw-hairline) solid transparent; transition: border-color var(--dur-fast) var(--ease-out);
}
.alv-mega__link:hover { border-bottom-color: var(--gold-500); }
.alv-mega__feature { position: relative; overflow: hidden; border-radius: var(--radius-xs); min-height: 200px; text-decoration: none; }
.alv-mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alv-mega__feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,17,14,0.6), transparent 60%); }
.alv-mega__feature-label { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); color: var(--paper); }
.alv-mega__feature-title { font-family: var(--font-display); font-size: var(--fs-h3); }

/* Wordmark (center) */
.alv-header .alv-wordmark { justify-self: center; text-align: center; color: inherit; }

/* Utilities (right) */
.alv-util { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
@media (min-width: 900px) { .alv-util { gap: var(--space-1); } }
.alv-util__btn {
  position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
@media (min-width: 900px) { .alv-util__btn { width: 40px; height: 40px; } }
.alv-util__btn--search, .alv-util__btn--acct { display: none; }
@media (min-width: 900px) { .alv-util__btn--search, .alv-util__btn--acct { display: inline-flex; } }
.alv-util__count {
  position: absolute; top: 3px; right: 0; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--gold-700); color: var(--paper); border-radius: var(--radius-pill);
  font-size: 9px; font-weight: var(--w-medium); display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* --- Transparent homepage header (DESKTOP ONLY) over the hero ------------- */
@media (min-width: 900px) {
  .alv-header--transparent {
    position: fixed; left: 0; right: 0; top: 0;
    background: transparent; border-bottom-color: transparent; color: var(--paper);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Light dark overlay behind the header content only, for legibility on any hero */
  .alv-header--transparent::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0) 100%);
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .alv-header--transparent .alv-announce { display: none; }
  .alv-header--transparent .alv-nav__link,
  .alv-header--transparent .alv-wordmark,
  .alv-header--transparent .alv-util__btn { color: var(--paper); }

  /* Scrolled → frosted glass, dark ink (the sticky-header glass from Alvany remote) */
  .alv-header--transparent.is-scrolled {
    background: rgba(253, 251, 247, 0.85);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom-color: var(--line); color: var(--ink-900);
    box-shadow: 0 10px 28px rgba(20, 17, 14, 0.06);
  }
  .alv-header--transparent.is-scrolled::before { opacity: 0; }
  .alv-header--transparent.is-scrolled .alv-nav__link,
  .alv-header--transparent.is-scrolled .alv-wordmark,
  .alv-header--transparent.is-scrolled .alv-util__btn { color: var(--ink-900); }
}

/* Mobile off-canvas nav — glass scrim (reused site-wide for modal overlays) */
.alv-mobile-nav { position: fixed; inset: 0; z-index: var(--z-drawer); }
.alv-mobile-nav[hidden] { display: none; }
.alv-mobile-nav__scrim {
  position: absolute; inset: 0; background: rgba(20, 17, 14, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit);
}
.alv-mobile-nav__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(84vw, 340px); background: var(--paper);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-7);
  transform: translateX(-100%); transition: transform var(--dur-exit) var(--ease-exit); box-shadow: var(--shadow-lg);
}
/* Entrance overrides the (default) exit transition — see the overlay-motion tokens. */
.alv-mobile-nav.is-open .alv-mobile-nav__panel { transform: translateX(0); transition: transform var(--dur-enter) var(--ease-entrance); }
.alv-mobile-nav.is-open .alv-mobile-nav__scrim { opacity: 1; transition: opacity var(--dur-enter) var(--ease-entrance); }
/* The panel's contents drift in just behind the panel itself — a short, staggered settle
   that reads as one considered gesture rather than a slab of menu arriving at once. */
.alv-mobile-nav__top,
.alv-mobile-nav__list li,
.alv-mobile-nav__foot { opacity: 0; transform: translateX(-10px); transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit); }
.alv-mobile-nav.is-open .alv-mobile-nav__top,
.alv-mobile-nav.is-open .alv-mobile-nav__list li,
.alv-mobile-nav.is-open .alv-mobile-nav__foot {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-entrance) var(--d, 0ms), transform var(--dur-enter) var(--ease-entrance) var(--d, 0ms);
}
.alv-mobile-nav.is-open .alv-mobile-nav__list li:nth-child(1) { --d: 90ms; }
.alv-mobile-nav.is-open .alv-mobile-nav__list li:nth-child(2) { --d: 130ms; }
.alv-mobile-nav.is-open .alv-mobile-nav__list li:nth-child(3) { --d: 170ms; }
.alv-mobile-nav.is-open .alv-mobile-nav__list li:nth-child(4) { --d: 210ms; }
.alv-mobile-nav.is-open .alv-mobile-nav__list li:nth-child(n+5) { --d: 250ms; }
.alv-mobile-nav.is-open .alv-mobile-nav__foot { --d: 290ms; }
@media (prefers-reduced-motion: reduce) {
  .alv-mobile-nav__scrim, .alv-mobile-nav__panel,
  .alv-mobile-nav__top, .alv-mobile-nav__list li, .alv-mobile-nav__foot { transition: none; }
  .alv-mobile-nav__top, .alv-mobile-nav__list li, .alv-mobile-nav__foot { opacity: 1; transform: none; }
}
.alv-mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.alv-mobile-nav__close { border: 0; background: transparent; color: var(--ink-900); cursor: pointer; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.alv-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alv-mobile-nav__list a {
  display: block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-900);
  text-decoration: none; padding: var(--space-3) 0; border-bottom: var(--bw-hairline) solid var(--line);
}
.alv-mobile-nav__foot { margin-top: auto; display: flex; gap: var(--space-6); }
.alv-mobile-nav__foot a { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500); text-decoration: none; }

/* ============================================================ SECTION HEAD = */
/* Section titles reduced ~30% + tighter margins for the compact language. */
.alv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
@media (min-width: 768px) { .alv-head { margin-bottom: var(--space-7); } }
.alv-head__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(19px, 2vw, 26px); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--ink-900); }
.alv-head__action { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-900); text-decoration: none; border-bottom: var(--bw-hairline) solid var(--gold-500); padding-bottom: 3px; white-space: nowrap; }
.alv-head--center { justify-content: center; text-align: center; }

/* ============================================================ 1 · HERO ===== */
.alv-hero { position: relative; overflow: hidden; background: var(--ink-900); }
.alv-hero__media, .alv-hero__media img { display: block; width: 100%; }
.alv-hero__media img { height: auto; object-fit: cover; }

/* --- Slideshow variant: stacked slides, slow crossfade (no bounce) ---------
   Height comes from the canonical asset ratios: 1920×660 desktop masters and
   purpose-built 4:5 portrait mobile assets (<=767px). */
.alv-hero--slideshow .alv-hero__slides { position: relative; aspect-ratio: 1920 / 660; }
@media (max-width: 767px) { .alv-hero--slideshow .alv-hero__slides { aspect-ratio: 4 / 5; } }
.alv-hero__slide {
  position: absolute; inset: 0; display: block; text-decoration: none;
  opacity: 0; z-index: 0; pointer-events: none;
  transition: opacity 1100ms var(--ease-out);
}
.alv-hero__slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.alv-hero--slideshow .alv-hero__media,
.alv-hero--slideshow .alv-hero__media img { width: 100%; height: 100%; }
.alv-hero--slideshow .alv-hero__media img { object-fit: cover; }

/* Arrows — same glass circles as the Houses carousel, inside the hero edges */
.alv-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid rgba(253, 251, 247, 0.35); border-radius: var(--radius-pill);
  background: rgba(20, 17, 14, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--paper); cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alv-hero__arrow:hover { background: rgba(20, 17, 14, 0.5); border-color: rgba(253, 251, 247, 0.7); }
.alv-hero__arrow--prev { left: var(--space-3); }
.alv-hero__arrow--next { right: var(--space-3); }
@media (min-width: 768px) {
  .alv-hero__arrow--prev { left: var(--space-5); }
  .alv-hero__arrow--next { right: var(--space-5); }
  /* Desktop: arrows reveal only while hovering, or when a control is keyboard-
     focused. Uses :has(:focus-visible) not :focus-within — a mouse CLICK focuses
     the arrow button, and :focus-within would then keep the arrows shown after
     the pointer left (the reported glitch). :focus-visible is set only for
     keyboard focus, so mouse-out now correctly hides them. */
  .alv-hero__arrow { opacity: 0; pointer-events: none; }
  .alv-hero--slideshow:hover .alv-hero__arrow,
  .alv-hero--slideshow:has(:focus-visible) .alv-hero__arrow { opacity: 1; pointer-events: auto; }
}

/* Dots — thin gold-foil bars, bottom center */
.alv-hero__dots {
  position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%);
  z-index: 2; display: flex; gap: var(--space-2);
}
.alv-hero__dot {
  width: 28px; height: 22px; padding: 0; border: 0; background: transparent;
  cursor: pointer; position: relative;
}
.alv-hero__dot::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgba(253, 251, 247, 0.45); border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-out);
}
.alv-hero__dot:hover::after { background: rgba(253, 251, 247, 0.8); }
.alv-hero__dot.is-active::after { background: var(--gold-300); }
.alv-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.alv-hero__overlay::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,17,14,0.62), rgba(20,17,14,0.12) 55%, rgba(20,17,14,0) 80%),
              linear-gradient(0deg, rgba(20,17,14,0.5), rgba(20,17,14,0) 46%);
}
.alv-hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: var(--space-8) var(--gutter-mobile); color: var(--paper); }
@media (min-width: 768px) { .alv-hero__content { padding: var(--space-9) var(--space-7); } }
.alv-hero__kicker { display: inline-block; color: var(--gold-300); font-size: var(--fs-micro); font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.alv-hero__title { display: block; margin: var(--space-3) 0 var(--space-3); max-width: 16ch; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(28px, 4vw, 48px); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--paper); text-shadow: 0 2px 24px rgba(20,17,14,0.5); }
.alv-hero__sub { display: block; max-width: 42ch; margin: 0 0 var(--space-6); color: rgba(253,251,247,0.86); font-size: var(--fs-body); text-shadow: 0 1px 16px rgba(20,17,14,0.5); }
.alv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================ 2 · SERVICE == */
.alv-service { border-bottom: var(--bw-hairline) solid var(--line); background: var(--paper); }
.alv-service__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .alv-service__grid { grid-template-columns: repeat(4, 1fr); } }
.alv-service__item {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 60px; padding: var(--space-3) var(--space-4); text-align: center;
  border-bottom: var(--bw-hairline) solid var(--line); border-right: var(--bw-hairline) solid var(--line);
  font-size: var(--fs-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-700);
}
.alv-service__item:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) { .alv-service__item { border-bottom: 0; } .alv-service__item:nth-child(2n) { border-right: var(--bw-hairline) solid var(--line); } .alv-service__item:last-child { border-right: 0; } }
.alv-service__icon { color: var(--gold-700); display: inline-flex; }

/* ============================================================ 3 · CATEGORIES */
.alv-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .alv-cats { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
/* position:relative anchors the absolute .__copy caption to the card itself.
   (Without it the caption's containing block flips to .alv-page once the card's
   data-reveal transform clears, collapsing every caption to the page corner.) */
.alv-cat { position: relative; display: block; text-decoration: none; }
.alv-cat__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream-deep); border-radius: var(--radius-xs); }
.alv-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.alv-cat:hover .alv-cat__img { transform: scale(1.04); }
/* Scrim lives behind the caption only (a bottom text panel) — the rest of the
   image stays clean and fully visible. Guarantees legible copy on any photo. */
.alv-cat__copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--space-7) var(--space-4) var(--space-4); color: var(--paper); text-shadow: 0 1px 12px rgba(20,17,14,0.55); background: linear-gradient(0deg, rgba(20,17,14,0.78) 0%, rgba(20,17,14,0.5) 46%, rgba(20,17,14,0) 100%); }
.alv-cat__eyebrow { display: block; margin-bottom: var(--space-1); color: var(--gold-300); font-size: 10px; font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.alv-cat__name { font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); line-height: 1.05; }

/* ============================================================ 4 · AD BANNER = */
/* Flush: no vertical padding — continues straight on from the Category section
   (contained, not full-bleed like the Lookbook Band). */
.alv-adbanner { padding: 0; }
.alv-adbanner__link { display: block; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-mobile); }
@media (min-width: 768px) { .alv-adbanner__link { padding: 0 var(--space-7); } }
.alv-adbanner__link picture { display: block; }
.alv-adbanner__img { width: 100%; height: auto; border-radius: var(--radius-xs); transition: transform 1100ms var(--ease-out); }
.alv-adbanner__link:hover .alv-adbanner__img { transform: scale(1.012); }

/* ============================================================ PRODUCT RAIL == */
.alv-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-3); }
@media (min-width: 640px) { .alv-rail--5 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); } }
@media (min-width: 1024px) { .alv-rail--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-7) var(--space-3); } }
/* Mobile: centered product meta for the rails */
@media (max-width: 639px) {
  .alv-rail .alv-card__meta { align-items: center; text-align: center; }
  .alv-rail .alv-card__title { align-self: center; }
}

/* ---- Product card -------------------------------------------------------- */
.alv-card { position: relative; display: block; text-decoration: none; color: inherit; font-family: var(--font-ui); }
/* Hairline border on the IMAGE only (client request); warms to gold on hover.
   The caption below stays flush-left with no side padding. */
.alv-card__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream);
  border: var(--bw-hairline) solid var(--line); border-radius: var(--radius-xs);
  transition: border-color var(--dur-base) var(--ease-out);
}
.alv-card:hover .alv-card__media { border-color: var(--gold-300); }
.alv-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alv-card__img--primary { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.alv-card__img--hover { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
/* Hover keys off the whole card (.alv-card), not the media: the stretched-link
   ::after overlay (z-index 1) otherwise swallows pointer events everywhere except
   the badge/wish (z-index 2), so media:hover only fired over the badge. */
.alv-card:hover .alv-card__media.has-hover .alv-card__img--primary { opacity: 0; }
.alv-card:hover .alv-card__media.has-hover .alv-card__img--hover { opacity: 1; }
.alv-card:hover .alv-card__media:not(.has-hover) .alv-card__img--primary { transform: scale(1.035); }
.alv-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); font-size: 10px; letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 5px 9px; font-weight: var(--w-medium); z-index: 2; border-radius: var(--radius-xs); }
.alv-card__badge--default { background: var(--paper); color: var(--ink-900); }
.alv-card__badge--new { background: var(--gold-100); color: var(--ink-900); }
.alv-card__badge--best { background: rgba(253, 251, 247, 0.9); color: var(--gold-700); border: var(--bw-hairline) solid var(--gold-500); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.alv-card__badge--sale { background: var(--sale-500); color: var(--paper); }
.alv-card__wish {
  position: absolute; top: var(--space-2); right: var(--space-2); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid rgba(20, 17, 14, 0.12); border-radius: var(--radius-pill);
  background: rgba(253, 251, 247, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--ink-900); cursor: pointer; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); z-index: 2;
}
.alv-card:hover .alv-card__wish, .alv-card__wish:focus-visible, .alv-card__wish.is-active { opacity: 1; transform: translateY(0); }
.alv-card__wish.is-active { color: var(--gold-500); border-color: var(--gold-300); }
.alv-card__meta { padding-top: var(--space-3); display: flex; flex-direction: column; gap: 5px; }
.alv-card__brand { font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-400); font-weight: var(--w-medium); }
.alv-card__title { font-family: var(--font-ui); font-size: var(--fs-h4); color: var(--ink-900); text-decoration: none; line-height: var(--lh-snug); align-self: flex-start; border-bottom: var(--bw-hairline) solid transparent; transition: border-color var(--dur-base) var(--ease-out); padding-bottom: 1px; }
.alv-card__title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.alv-card:hover .alv-card__title { border-bottom-color: var(--gold-500); }

/* ---- Price --------------------------------------------------------------- */
.alv-price { font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--ink-900); }
.alv-price__was { color: var(--ink-400); text-decoration: line-through; margin-right: var(--space-1); }
.alv-price__now { color: var(--sale-500); }

/* ============================================================ 6 · HOUSES ==== */
/* Flush section: no vertical padding — the neighbouring sections' own rhythm
   carries the spacing (client request, READY_PROMPT-3). */
.alv-houses { padding: 0; }
.alv-carousel { position: relative; }
.alv-carousel__track {
  display: grid; grid-auto-flow: column; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: var(--space-1);
}
.alv-carousel__track::-webkit-scrollbar { display: none; }
.alv-carousel__track--4 { grid-auto-columns: calc((100% - var(--space-3)) / 2); }
@media (min-width: 1024px) { .alv-carousel__track--4 { grid-auto-columns: calc((100% - 3 * var(--space-3)) / 4); } }
.alv-house { position: relative; scroll-snap-align: start; display: block; text-decoration: none; }
.alv-house__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); border-radius: var(--radius-xs); }
.alv-house__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); }
.alv-house:hover .alv-house__img { transform: scale(1.04); }
/* Scrim sits behind the caption only (same pattern as .alv-cat__copy) — the
   image above stays clean and fully visible. */
.alv-house__copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5); color: var(--paper); text-shadow: 0 1px 12px rgba(20,17,14,0.55); background: linear-gradient(0deg, rgba(20,17,14,0.78) 0%, rgba(20,17,14,0.5) 46%, rgba(20,17,14,0) 100%); }
.alv-house__tag { display: block; margin-bottom: var(--space-1); color: var(--gold-300); font-size: 8px; font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.alv-house__name { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.05; }
.alv-carousel__arrow {
  position: absolute; top: 38%; z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-pill);
  background: rgba(253, 251, 247, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink-900); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.alv-carousel__arrow:hover { background: var(--paper); }
.alv-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
/* Mobile: arrows sit just inside the track edges (no room outside the gutter). */
.alv-carousel__arrow--prev { left: var(--space-2); }
.alv-carousel__arrow--next { right: var(--space-2); }
@media (min-width: 768px) {
  .alv-carousel__arrow--prev { left: calc(-1 * var(--space-5)); }
  .alv-carousel__arrow--next { right: calc(-1 * var(--space-5)); }
}
.alv-carousel.is-static .alv-carousel__arrow { display: none; }

/* ============================================================ 8 · LOOKBOOK == */
/* Image-only band — copy is composited into the artwork itself (no overlay/scrim). */
.alv-lookbook { position: relative; display: block; text-decoration: none; overflow: hidden; min-height: 280px; height: min(48vh, 420px); }
.alv-lookbook picture { display: contents; }
.alv-lookbook__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================ 9 · BOUTIQUES = */
.alv-boutiques__head { text-align: center; margin-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-1); align-items: center; }
.alv-boutiques__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .alv-boutiques__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.alv-boutique { position: relative; display: block; text-decoration: none; }
.alv-boutique__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-deep); border-radius: var(--radius-xs); outline: 0 solid var(--gold-500); transition: outline-width var(--dur-fast) var(--ease-out); }
.alv-boutique:hover .alv-boutique__media { outline-width: 2px; outline-offset: -2px; }
.alv-boutique__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,17,14,0.7) 0%, rgba(20,17,14,0.28) 40%, rgba(20,17,14,0.02) 72%); }
.alv-boutique__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.alv-boutique:hover .alv-boutique__img { transform: scale(1.045); }
.alv-boutique__copy { position: absolute; z-index: 1; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); color: var(--paper); text-shadow: 0 2px 16px rgba(20,17,14,0.7); }
.alv-boutique__note { display: block; margin-bottom: var(--space-1); color: var(--gold-300); font-size: 10px; font-weight: var(--w-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.alv-boutique__name { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; }

/* ============================================================ BREADCRUMBS === */
.alv-crumbs {
  padding-top: var(--space-5); font-size: var(--fs-caption); color: var(--ink-400);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.alv-crumbs a { color: var(--ink-500); text-decoration: none; }
.alv-crumbs a:hover { color: var(--ink-900); }
.alv-crumbs__sep { color: var(--gold-500); }

/* ============================================================ PRODUCT PAGE == */
.alv-pdp { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-5); padding-bottom: var(--space-6); }
@media (min-width: 900px) {
  .alv-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
  .alv-pdp__panel { position: sticky; top: 120px; }
}
.alv-pdp__gallery { position: relative; }
.alv-pdp__track { display: flex; flex-direction: column; gap: var(--space-3); }
.alv-pdp__frame { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); border-radius: var(--radius-xs); }
.alv-pdp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mobile: full-bleed, swipeable slideshow (no arrows) — each image is one snap
   page at the full viewport width; native touch gives the smooth left/right swipe. */
.alv-pdp__dots { display: none; }
@media (max-width: 899px) {
  .alv-pdp__track {
    flex-direction: row; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter-mobile)); /* cancel .alv-container gutter → 100vw */
  }
  .alv-pdp__track::-webkit-scrollbar { display: none; }
  .alv-pdp__frame { flex: 0 0 100%; scroll-snap-align: center; border-radius: 0; }
  .alv-pdp__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
  .alv-pdp__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .alv-pdp__dot.is-active { background: var(--ink-900); transform: scale(1.15); }
}

/* ---- Gallery zoom affordance -------------------------------------------------
   The button covers the whole frame so the image itself is the target; only the
   small gold-foil mark in the top-right corner is visible, and on desktop it waits
   for hover (or keyboard focus) before appearing. Touch devices have no hover, so
   there the mark is simply always present. */
.alv-pdp__zoom { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.alv-pdp__zoom:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.alv-pdp__zoom-mark {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); color: var(--ink-900);
  background: rgba(253, 251, 247, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) and (min-width: 900px) {
  .alv-pdp__zoom-mark {
    opacity: 0; transform: translateY(-6px) scale(0.94);
    transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit);
  }
  .alv-pdp__frame:hover .alv-pdp__zoom-mark,
  .alv-pdp__zoom:focus-visible .alv-pdp__zoom-mark {
    opacity: 1; transform: none;
    transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance);
  }
  .alv-pdp__zoom:hover .alv-pdp__zoom-mark { color: var(--gold-700); }
}
@media (prefers-reduced-motion: reduce) { .alv-pdp__zoom-mark { transition: none; } }

/* ---- Gallery lightbox ---------------------------------------------------------
   Full-viewport, ink-dark stage. Slides are stacked and crossfaded (never scrolled),
   so stepping between views is a single settled dissolve rather than a slide race. */
.alv-lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; }
.alv-lightbox[hidden] { display: none; }
.alv-lightbox__scrim {
  position: absolute; inset: 0; background: rgba(20, 17, 14, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit);
}
.alv-lightbox.is-open .alv-lightbox__scrim { opacity: 1; transition: opacity var(--dur-enter) var(--ease-entrance); }
.alv-lightbox__dialog {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding: var(--space-7) var(--space-4) var(--space-4);
  opacity: 0; transform: scale(0.97);
  transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit);
  touch-action: none; /* own the vertical dismiss drag; nothing inside needs native panning */
}
.alv-lightbox.is-open .alv-lightbox__dialog {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-entrance) 40ms, transform var(--dur-enter) var(--ease-entrance) 40ms;
}
/* Live touch-drag (vertical dismiss) drives transform/opacity directly every frame —
   suspend the entrance transition (and its 40ms delay) so the drag tracks the finger
   1:1; main.js sets its own transition for the release (spring-back or commit-close). */
.alv-lightbox__dialog.is-dragging { transition: none; }
.alv-lightbox__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--paper); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.alv-lightbox__close:hover { background: rgba(253, 251, 247, 0.12); color: var(--gold-300); }
.alv-lightbox__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.alv-lightbox__stage { position: relative; width: 100%; height: 100%; min-height: 0; }
.alv-lightbox__slide {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(1.03); visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit), visibility 0s linear var(--dur-base);
}
.alv-lightbox__slide.is-active {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance), visibility 0s;
}
.alv-lightbox__slide img {
  /* min-width/height: 0 override the grid item's default auto-minimum (= its intrinsic
     size), which otherwise inflates the implicit grid row to the image's natural size and
     defeats max-width/max-height — the image would render near-full-res instead of being
     clamped to the stage, blowing out edge-to-edge on wide desktop viewports. */
  max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0;
  object-fit: contain; border-radius: var(--radius-xs);
}

.alv-lightbox__nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid rgba(253, 251, 247, 0.28); border-radius: var(--radius-pill);
  background: rgba(20, 17, 14, 0.4); color: var(--paper); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.alv-lightbox__nav:hover { background: rgba(253, 251, 247, 0.16); border-color: var(--gold-500); color: var(--gold-300); }
.alv-lightbox__nav:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.alv-lightbox__nav--prev { left: var(--space-4); }
.alv-lightbox__nav--next { right: var(--space-4); }
@media (max-width: 639px) { .alv-lightbox__nav { display: none; } } /* swipe instead */

.alv-lightbox__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
.alv-lightbox__thumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
.alv-lightbox__thumb {
  width: 48px; height: 60px; padding: 0; overflow: hidden; cursor: pointer;
  border: var(--bw-hairline) solid rgba(253, 251, 247, 0.24); border-radius: var(--radius-xs);
  background: transparent; opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alv-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alv-lightbox__thumb:hover { opacity: 0.85; }
.alv-lightbox__thumb.is-active { opacity: 1; border-color: var(--gold-500); }
.alv-lightbox__thumb:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.alv-lightbox__counter { margin: 0; color: rgba(253, 251, 247, 0.6); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); }
@media (prefers-reduced-motion: reduce) {
  .alv-lightbox__scrim, .alv-lightbox__dialog, .alv-lightbox__slide { transition: none; }
}
.alv-pdp__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(24px, 3vw, 34px); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--ink-900); }
.alv-pdp__price { margin-top: var(--space-3); }
.alv-pdp__price .alv-price { font-size: var(--fs-body-lg); }
.alv-pdp__desc { margin: var(--space-4) 0 0; color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); max-width: 52ch; }

/* ---- PDP finish/colour variant swatches ---------------------------------- */
.alv-pdp__variant { margin: var(--space-5) 0 0; }
.alv-pdp__variant-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-500);
}
.alv-pdp__variant-current { color: var(--ink-900); text-transform: none; letter-spacing: normal; font-weight: var(--w-medium); }
.alv-pdp__variant-row { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.alv-pdp__variant-swatch {
  width: 36px; height: 36px; padding: 0; border-radius: var(--radius-pill);
  border: var(--bw-hairline) solid var(--line-strong); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alv-pdp__variant-swatch:hover { border-color: var(--ink-900); }
.alv-pdp__variant-swatch:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.alv-pdp__variant-swatch.is-active { border-color: var(--paper); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--gold-500); }
.alv-pdp__variant-swatch--gold { background: var(--gold-500); }
.alv-pdp__variant-swatch--silver { background: var(--metal-silver-500); }

.alv-pdp__actions { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
.alv-pdp__actions > .alv-btn { width: 100%; }
/* Add-to-Bag row: the quantity stepper sits beside the button, sharing its height. */
.alv-pdp__addrow { display: flex; align-items: stretch; gap: var(--space-3); }
.alv-pdp__addrow .alv-pdp__add { flex: 1 1 auto; width: auto; }
.alv-pdp__qty {
  flex: 0 0 auto; display: inline-flex; align-items: stretch; height: var(--control-h);
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs); background: var(--paper);
}
.alv-pdp__qty-btn {
  width: 40px; display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: transparent; border: none; padding: 0; color: var(--ink-900); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.alv-pdp__qty-btn:hover { background: var(--overlay-veil); }
.alv-pdp__qty-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); z-index: 1; }
.alv-pdp__qty-btn:disabled { color: var(--ink-300); cursor: not-allowed; background: transparent; }
.alv-pdp__qty-input {
  width: 42px; border: none; border-left: var(--bw-hairline) solid var(--line); border-right: var(--bw-hairline) solid var(--line);
  text-align: center; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--ink-900); background: transparent;
}
.alv-pdp__qty-input:focus-visible { outline: none; box-shadow: var(--shadow-focus); position: relative; z-index: 1; }
/* Native spinner arrows stay as the no-JS fallback; hidden only once the custom
   +/- buttons are actually wired up (see main.js initQtyStepper). */
html.alv-js .alv-pdp__qty-input { -moz-appearance: textfield; }
html.alv-js .alv-pdp__qty-input::-webkit-inner-spin-button,
html.alv-js .alv-pdp__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- PDP estimated delivery ------------------------------------------------
   Quiet hairline panel — no boxed/shadowed widget, no traffic-light icon colour;
   the truck glyph carries the same ink as the rest of the interface. */
.alv-pdp__edd {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-4) 0;
  border-top: var(--bw-hairline) solid var(--line); border-bottom: var(--bw-hairline) solid var(--line);
}
.alv-pdp__edd-icon { flex: 0 0 auto; display: inline-flex; color: var(--gold-700); margin-top: 1px; }
.alv-pdp__edd-copy { display: flex; flex-direction: column; gap: var(--space-1); }
.alv-pdp__edd-line { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-900); }
.alv-pdp__edd-label { font-family: var(--font-ui); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-500); margin-right: var(--space-2); }
.alv-pdp__edd-sub { margin: 0; font-size: var(--fs-caption); color: var(--ink-400); }

/* Primary row: Add to Bag flexes, the wishlist icon sits square beside it. */
.alv-pdp__buy { display: flex; align-items: stretch; gap: var(--space-3); }
.alv-pdp__buy .alv-btn { flex: 1 1 auto; width: auto; }
/* Standalone wishlist control — heart glyph with a small gold "+" (add-to-wishlist). */
.alv-pdp__wish {
  flex: 0 0 auto; width: 52px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs);
  background: var(--paper); color: var(--ink-900); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.alv-pdp__wish:hover { border-color: var(--ink-900); background: var(--overlay-veil); }
.alv-pdp__wish:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.alv-pdp__wish-mark { position: relative; display: inline-flex; }
.alv-pdp__wish-plus {
  position: absolute; top: -5px; right: -7px; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: var(--radius-pill);
  background: var(--gold-700); color: var(--paper);
}
.alv-pdp__wish-plus .alv-icon { width: 9px; height: 9px; stroke-width: 2.4; }
.alv-pdp__wish.is-active { color: var(--gold-700); border-color: var(--gold-300); background: var(--gold-100); }
.alv-pdp__wish.is-active .alv-pdp__wish-mark .alv-icon:first-child { fill: currentColor; }
.alv-pdp__notes { margin-top: var(--space-2); }
.alv-pdp__note { border-bottom: var(--bw-hairline) solid var(--line); }
.alv-pdp__note summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; font-family: var(--font-ui); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-900);
}
.alv-pdp__note summary::-webkit-details-marker { display: none; }
.alv-pdp__note summary::after { content: '+'; color: var(--gold-700); font-size: var(--fs-body); }
.alv-pdp__note[open] summary::after { content: '–'; }
.alv-pdp__note p { margin: 0 0 var(--space-4); color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.alv-pdp__features { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.alv-pdp__features li { list-style: disc; }

/* Mobile sticky add-to-bag bar (desktop uses the sticky purchase panel instead).
   Hidden off-screen by default; JS toggles .is-visible once the main button leaves. */
.alv-pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  display: none; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--gutter-mobile);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: var(--bw-hairline) solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 17, 14, 0.08);
  transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out);
}
@media (max-width: 899px) { .alv-pdp-sticky { display: flex; } }
.alv-pdp-sticky.is-visible { transform: translateY(0); }
.alv-pdp-sticky__info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.alv-pdp-sticky__name {
  font-family: var(--font-display); font-size: var(--fs-body-sm); color: var(--ink-900);
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alv-pdp-sticky__price .alv-price { font-size: var(--fs-body-sm); }
.alv-pdp-sticky__add { margin-left: auto; flex: 0 0 auto; width: auto; padding-inline: var(--space-6); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .alv-pdp-sticky { transition: none; } }

/* Four-across rail (collection grid / related pieces) */
@media (min-width: 640px) { .alv-rail--4 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); } }
@media (min-width: 1024px) { .alv-rail--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-4); } }

/* ============================================================ COLLECTION ==== */
.alv-collection__head { padding-top: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.alv-collection__head .alv-crumbs { align-self: stretch; justify-content: center; padding-top: var(--space-5); margin-bottom: var(--space-5); }
.alv-collection__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(24px, 3vw, 34px); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--ink-900); }
.alv-collection__desc { margin: 0; max-width: 52ch; color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.alv-collection.alv-section { padding-top: var(--space-6); }
/* Filter left · piece count centred · sort right. The two 1fr rails are equal, so the
   count sits on the true optical centre of the row regardless of how wide either side is.
   Where the count is hidden (narrow phones) its `auto` track collapses and the rails simply
   push filter and sort to the two edges. */
.alv-collection__toolbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  padding-bottom: var(--space-4); margin-bottom: var(--space-6);
  border-bottom: var(--bw-hairline) solid var(--line);
}
.alv-collection__count { justify-self: center; text-align: center; font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); }
.alv-collection__sort { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.alv-collection__sort-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); }
.alv-collection__sort-select {
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs);
  background: var(--paper); color: var(--ink-900); font-family: var(--font-ui); font-size: var(--fs-caption);
  padding: var(--space-2) var(--space-3); cursor: pointer;
}
.alv-collection__toolbar-left { display: flex; align-items: center; gap: var(--space-4); }
.alv-collection__filters-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4);
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs);
  background: transparent; color: var(--ink-900); font-family: var(--font-ui); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alv-collection__filters-btn:hover { background: var(--overlay-veil); border-color: var(--ink-900); }
/* Live filtered-product count inside the trigger — "Filter (12)". Warms to gold when a filter is on. */
.alv-collection__filters-count { color: var(--ink-400); transition: color var(--dur-fast) var(--ease-out); }
.alv-collection__filters-count.is-active { color: var(--gold-700); font-weight: var(--w-medium); }
/* (The standalone "×" beside the trigger was removed — the "Clear All" chip and the
   sidebar's "Clear all" already cover clearing, and three affordances for one action
   is noise.) */

/* Active-filter summary chips (FilterChip DS primitive — selected + removable) */
.alv-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); }
.alv-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 14px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--paper); background: var(--ink-900); border-radius: var(--radius-pill); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.alv-chip:hover { background: var(--ink-700); }
.alv-chip__x { opacity: 0.75; margin-right: -3px; }
.alv-chip--clear {
  background: transparent; color: var(--ink-500); border: var(--bw-hairline) solid var(--line-strong);
  text-decoration: underline; text-underline-offset: 3px;
}
.alv-chip--clear:hover { color: var(--ink-900); border-color: var(--ink-900); background: transparent; }

/* Facet checkbox (Checkbox DS primitive — square, hairline, ink-fill when checked) */
.alv-check { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--ink-700); cursor: pointer; user-select: none; }
.alv-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alv-check__box {
  position: relative; width: 18px; height: 18px; flex: 0 0 auto; border-radius: var(--radius-xs);
  border: 1.5px solid var(--line-strong); background: var(--white);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alv-check__box::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 7px; height: 11px;
  border-right: 1.6px solid var(--paper); border-bottom: 1.6px solid var(--paper);
  transform: rotate(40deg) scale(0); transition: transform var(--dur-fast) var(--ease-out);
}
.alv-check input:checked + .alv-check__box { background: var(--ink-900); border-color: var(--ink-900); }
.alv-check input:checked + .alv-check__box::after { transform: rotate(40deg) scale(1); }
.alv-check input:focus-visible + .alv-check__box { box-shadow: var(--shadow-focus); }
.alv-check__label { flex: 1; }
.alv-check__count { color: var(--ink-400); font-size: var(--fs-caption); }

/* Filter drawer facet groups */
.alv-filters__group { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: var(--bw-hairline) solid var(--line); }
.alv-filters__group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.alv-filters__group-title { margin: 0 0 var(--space-2); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-900); font-weight: var(--w-medium); }
.alv-filters-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.alv-filters__clear { align-self: center; color: var(--ink-500); font-family: var(--font-ui); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; }
.alv-filters__clear:hover { color: var(--ink-900); }

/* Dual price-range slider — native range inputs stacked (thumb-only hit area), number-input
   fallback shown until JS confirms it's running (html.alv-js), matching the sort control's
   progressive-enhancement pattern elsewhere on this page. */
.alv-pricerange { display: flex; flex-direction: column; gap: var(--space-4); }
.alv-pricerange__values { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--fs-body-sm); font-weight: var(--w-medium); color: var(--ink-900); }
.alv-pricerange__sep, .alv-pricerange__fallback-sep { color: var(--ink-400); }
.alv-pricerange__fallback { display: flex; align-items: center; gap: var(--space-3); }
.alv-pricerange__fallback input[type="number"] {
  width: 100%; height: 40px; padding: 0 var(--space-3); border: var(--bw-hairline) solid var(--line-strong);
  border-radius: var(--radius-xs); background: var(--white); color: var(--ink-900);
  font-family: var(--font-ui); font-size: var(--fs-body-sm);
}
.alv-pricerange__slider { display: none; position: relative; height: 18px; margin: var(--space-1) 0; }
html.alv-js .alv-pricerange__slider { display: block; }
html.alv-js .alv-pricerange__fallback { display: none; }
.alv-pricerange__track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--line-strong); border-radius: var(--radius-pill); }
.alv-pricerange__fill { position: absolute; top: 0; bottom: 0; background: var(--gold-500); border-radius: var(--radius-pill); }
.alv-pricerange__slider input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; pointer-events: none;
}
.alv-pricerange__slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 18px; }
.alv-pricerange__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--gold-700); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.alv-pricerange__slider input[type="range"]::-moz-range-track { background: transparent; height: 18px; border: 0; }
.alv-pricerange__slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--paper);
  border: 1.5px solid var(--gold-700); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.alv-pricerange__slider input[type="range"]:hover::-webkit-slider-thumb,
.alv-pricerange__slider input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.14); box-shadow: var(--shadow-focus); }
.alv-pricerange__slider input[type="range"]:hover::-moz-range-thumb,
.alv-pricerange__slider input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.14); box-shadow: var(--shadow-focus); }
@media (prefers-reduced-motion: reduce) {
  .alv-pricerange__slider input[type="range"]::-webkit-slider-thumb, .alv-pricerange__slider input[type="range"]::-moz-range-thumb { transition: none; }
}

/* ---- Collection layout: results + docked filter sidebar (desktop) / off-canvas (mobile) ---- */
.alv-collection__toolbar { position: relative; z-index: 30; } /* keep the sort dropdown above the grid */
.alv-collection__layout { display: block; }
.alv-collection__results { min-width: 0; }
[data-collection].is-loading .alv-collection__results { opacity: 0.55; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }

/* JS-only controls (the in-flow sidebar is the no-JS fallback, always reachable). */
html:not(.alv-js) .alv-collection__filters-btn,
html:not(.alv-js) .alv-collection__sidebar-scrim,
html:not(.alv-js) .alv-collection__sidebar-close { display: none; }

/* Sidebar shell — sensible in-flow block without JS; JS turns it into an off-canvas drawer. */
.alv-collection__sidebar-panel { display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.alv-collection__sidebar-scrim { display: none; }
.alv-collection__sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: var(--bw-hairline) solid var(--line); }
.alv-collection__sidebar-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-900); }
.alv-collection__sidebar-close { border: 0; background: transparent; color: var(--ink-900); cursor: pointer; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.alv-filters { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-5); flex: 1; min-height: 0; overflow-y: auto; }
.alv-filters__foot { padding: var(--space-5); border-top: var(--bw-hairline) solid var(--line); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.alv-filters__apply { width: 100%; }

/* JS on: off-canvas overlay (mobile-first), slid in over a blur scrim.
   The container is kept RENDERED and hidden with `visibility` rather than `display: none` —
   a display-none element has no prior rendered state, so the panel's slide would be skipped
   entirely on open and cut dead on close. `visibility: hidden` still removes the panel from
   the tab order; its own transition is delayed by the exit duration so it only takes effect
   once the panel has finished sliding out. */
html.alv-js .alv-collection__sidebar {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; transition: visibility 0s linear var(--dur-exit);
}
html.alv-js.is-filters-open .alv-collection__sidebar { visibility: visible; transition: visibility 0s; }
html.alv-js .alv-collection__sidebar-scrim {
  display: block; position: absolute; inset: 0; background: rgba(20, 17, 14, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit);
}
html.alv-js.is-filters-open .alv-collection__sidebar-scrim { opacity: 1; transition: opacity var(--dur-enter) var(--ease-entrance); }
html.alv-js .alv-collection__sidebar-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(90vw, 360px);
  box-shadow: var(--shadow-lg); transform: translateX(-100%);
  transition: transform var(--dur-exit) var(--ease-exit);
}
/* Entrance overrides the (default) exit transition — see the overlay-motion tokens. */
html.alv-js.is-filters-open .alv-collection__sidebar-panel { transform: translateX(0); transition: transform var(--dur-enter) var(--ease-entrance); }
@media (prefers-reduced-motion: reduce) {
  html.alv-js .alv-collection__sidebar,
  html.alv-js .alv-collection__sidebar-panel, html.alv-js .alv-collection__sidebar-scrim { transition: none; }
}

/* Desktop: the panel becomes a docked, sticky sidebar column that reflows the grid when open.
   The reflow itself is the animation — the layout is a grid whose first track widens from 0
   as the panel fades and slides into the space it opens up. */
@media (min-width: 900px) {
  html.alv-js .alv-collection__layout {
    display: grid; align-items: start;
    grid-template-columns: 0px minmax(0, 1fr); column-gap: 0px;
    transition: grid-template-columns var(--dur-exit) var(--ease-exit), column-gap var(--dur-exit) var(--ease-exit);
  }
  html.alv-js.is-filters-open .alv-collection__layout {
    grid-template-columns: clamp(224px, 22vw, 288px) minmax(0, 1fr); column-gap: var(--space-6);
    transition: grid-template-columns var(--dur-enter) var(--ease-entrance), column-gap var(--dur-enter) var(--ease-entrance);
  }
  html.alv-js .alv-collection__sidebar {
    position: sticky; inset: auto; top: 96px; z-index: auto;
    align-self: start; overflow: hidden; max-height: calc(100vh - 120px);
  }
  html.alv-js .alv-collection__sidebar-scrim { display: none; }
  /* Filtering auto-applies, and the grid is visible right beside the sidebar — so the
     "Show N results" button has nothing to do here. Its footer goes with it unless the
     "Clear all" link is present. */
  html.alv-js .alv-filters__apply { display: none; }
  html.alv-js .alv-filters__foot:not(:has(.alv-filters__clear)) { display: none; }
  html.alv-js .alv-collection__sidebar-panel {
    /* Fixed width so the panel never squashes while the track behind it animates — the
       sidebar's own overflow clip is what reveals it. */
    position: static; width: clamp(224px, 22vw, 288px); box-shadow: none;
    border: var(--bw-hairline) solid var(--line); border-radius: var(--radius-sm);
    max-height: calc(100vh - 120px); overflow: hidden;
    opacity: 0; transform: translateX(-14px);
    transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit);
  }
  html.alv-js.is-filters-open .alv-collection__sidebar-panel {
    opacity: 1; transform: none;
    transition: opacity var(--dur-enter) var(--ease-entrance) 80ms, transform var(--dur-enter) var(--ease-entrance) 80ms;
  }
  @media (prefers-reduced-motion: reduce) {
    html.alv-js .alv-collection__layout, html.alv-js .alv-collection__sidebar-panel { transition: none; }
  }
}

/* ---- Custom sort dropdown (JS enhancement over the native <select>) ---- */
.alv-select { display: none; }
html.alv-js .alv-select { display: inline-flex; position: relative; }
html.alv-js .alv-collection__sort-fallback { display: none; }
.alv-collection__sort-fallback { display: inline-flex; align-items: center; gap: var(--space-2); }
.alv-select__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3);
  border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs);
  background: var(--paper); color: var(--ink-900); font-family: var(--font-ui); font-size: var(--fs-caption); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.alv-select__trigger:hover { border-color: var(--ink-900); background: var(--overlay-veil); }
.alv-select__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.alv-select__icon { display: inline-flex; color: var(--gold-700); }
.alv-select__value { min-width: 96px; text-align: left; }
.alv-select__chev { display: inline-flex; color: var(--ink-400); transition: transform var(--dur-fast) var(--ease-out); }
.alv-select.is-open .alv-select__chev { transform: rotate(180deg); }
.alv-select__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; min-width: 224px; margin: 0; padding: var(--space-1);
  list-style: none; background: var(--paper); border: var(--bw-hairline) solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.alv-select.is-open .alv-select__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.alv-select__option {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs); font-size: var(--fs-body-sm); color: var(--ink-700); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.alv-select__option:hover { background: var(--overlay-veil); color: var(--ink-900); }
.alv-select__option.is-selected { color: var(--ink-900); font-weight: var(--w-medium); }
.alv-select__opt-icon { display: inline-flex; color: var(--gold-700); }
@media (prefers-reduced-motion: reduce) {
  .alv-select__menu, .alv-select.is-open .alv-select__menu { transform: none; }
}

/* Hide the standalone piece-count on mobile — the Filter trigger already carries "(N)". */
/* Phones: the piece count is dropped, so the centre track goes with it and the row becomes
   filter-left / sort-right. The sort value also stops reserving its desktop min-width —
   without that the two controls plus the wider gaps overflow the 375px gutter box. */
@media (max-width: 640px) {
  .alv-collection__count { display: none; }
  .alv-collection__toolbar { grid-template-columns: auto auto; gap: var(--space-3); }
  html.alv-js .alv-select__value { min-width: 0; }
}

/* ============================================================ NOT FOUND ===== */
.alv-notfound { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) 0; }
.alv-notfound__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(22px, 3vw, 30px); color: var(--ink-900); }
.alv-notfound__text { margin: 0; color: var(--ink-500); font-size: var(--fs-body-sm); max-width: 46ch; }
.alv-notfound .alv-btn { margin-top: var(--space-3); }

/* ============================================================ PROMO POPUP === */
.alv-promo { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); }
.alv-promo[hidden] { display: none; }
.alv-promo__scrim {
  position: absolute; inset: 0; background: rgba(20, 17, 14, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit);
}
.alv-promo.is-open .alv-promo__scrim { opacity: 1; transition: opacity var(--dur-enter) var(--ease-entrance); }
.alv-promo__dialog {
  position: relative; z-index: 1; width: min(760px, 100%); max-height: calc(100dvh - var(--space-8));
  overflow: auto; display: grid; grid-template-columns: 1fr; background: var(--paper);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(22px) scale(0.965);
  transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit);
}
@media (min-width: 720px) { .alv-promo__dialog { grid-template-columns: 0.82fr 1fr; } }
/* Entrance overrides the (default) exit transition — see the overlay-motion tokens. The
   dialog rises and settles on the expo-out curve; on dismissal it drops away briskly. */
.alv-promo.is-open .alv-promo__dialog {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-entrance) 60ms, transform var(--dur-enter) var(--ease-entrance) 60ms;
}
@media (prefers-reduced-motion: reduce) {
  .alv-promo__scrim, .alv-promo__dialog { transition: none; }
}
.alv-promo__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-700); cursor: pointer; }
/* Media shows on every breakpoint. On mobile the dialog is single-column, so the media
   becomes a top banner — it needs an explicit height because the <img> is absolute; the
   aspect-ratio supplies it. On desktop it's a grid cell sized by the row, so we clear it. */
.alv-promo__media { position: relative; margin: 0; display: block; background: var(--cream); aspect-ratio: 16 / 10; }
@media (min-width: 720px) { .alv-promo__media { aspect-ratio: auto; } }
.alv-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.alv-promo__body { padding: var(--space-8) var(--space-7); display: flex; flex-direction: column; }
.alv-promo__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(24px, 3vw, 32px); line-height: var(--lh-snug); color: var(--ink-900); }
.alv-promo__text { margin: var(--space-3) 0 0; color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.alv-promo__offer { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.alv-promo__offer-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--ink-900); }
.alv-promo__tick { display: inline-flex; color: var(--gold-700); }
.alv-promo__form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.alv-promo__field { height: 48px; padding: 0 var(--space-4); border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-xs); background: var(--white); color: var(--ink-900); font-family: var(--font-ui); font-size: var(--fs-body-sm); }
.alv-promo__cta { width: 100%; }
.alv-promo__done { margin: 0; color: var(--success-600); font-size: var(--fs-body-sm); }
.alv-promo__dismiss { margin-top: var(--space-4); align-self: flex-start; border: 0; background: transparent; color: var(--ink-500); font-family: var(--font-ui); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.alv-promo__note { margin: var(--space-3) 0 0; color: var(--ink-400); font-size: var(--fs-caption); }

/* ============================================================ FOOTER ======== */
/* Fixed-reveal footer: dark ink, revealed as .alv-page scrolls past its end. */
.alv-footer {
  position: static; z-index: 0; overflow: hidden;
  background: var(--ink-900); color: var(--paper);
  padding: var(--space-9) var(--gutter-mobile) var(--space-6);
  font-family: var(--font-ui);
}
/* Fixed-reveal engages at desktop widths only (mobile footer is tall → stays static). */
@media (min-width: 768px) {
  html.alv-footer-fixed .alv-footer { position: fixed; left: 0; right: 0; bottom: 0; }
}
@media (min-width: 768px) { .alv-footer { padding: var(--space-10) var(--space-7) var(--space-7); } }
.alv-footer__inner { position: relative; max-width: var(--container-wide); margin: 0 auto; }
.alv-footer__bracket { position: absolute; width: 26px; height: 26px; border: 0 solid var(--gold-500); pointer-events: none; }
.alv-footer__bracket--tr { top: 0; right: 0; border-top-width: var(--bw-hairline); border-right-width: var(--bw-hairline); }
.alv-footer__bracket--bl { bottom: 0; left: 0; border-bottom-width: var(--bw-hairline); border-left-width: var(--bw-hairline); }

.alv-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
@media (min-width: 768px) { .alv-footer__grid { grid-template-columns: repeat(3, 1fr) 1.5fr; gap: var(--space-8); } }
.alv-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.alv-footer__head { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-300); margin-bottom: var(--space-2); font-weight: var(--w-semibold); }
.alv-footer__link { font-size: var(--fs-body-sm); color: rgba(253, 251, 247, 0.68); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.alv-footer__link:hover { color: var(--paper); }

/* Subscribe box — wordmark sits under the field, inside the same box */
.alv-footer__subscribe { grid-column: 1 / -1; border: var(--bw-hairline) solid rgba(253, 251, 247, 0.18); border-radius: var(--radius-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) { .alv-footer__subscribe { grid-column: auto; } }
.alv-footer__sub-note { margin: 0; color: rgba(253, 251, 247, 0.6); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.alv-footer__form { display: flex; align-items: stretch; margin-top: var(--space-1); }
.alv-footer__field { flex: 1; min-width: 0; height: 46px; padding: 0 var(--space-4); border: var(--bw-hairline) solid rgba(253, 251, 247, 0.3); border-right: 0; background: transparent; color: var(--paper); font-family: var(--font-ui); font-size: var(--fs-body-sm); border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.alv-footer__field::placeholder { color: rgba(253, 251, 247, 0.5); }
.alv-footer__submit { width: 52px; display: inline-flex; align-items: center; justify-content: center; border: var(--bw-hairline) solid var(--paper); background: var(--paper); color: var(--ink-900); cursor: pointer; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.alv-footer__submit:hover { background: transparent; color: var(--paper); }
.alv-footer__subscribe .alv-wordmark--footer { color: var(--paper); margin-top: var(--space-3); }

/* Social boxes — bespoke ALVANY glyphs */
.alv-footer__socials { display: grid; grid-template-columns: 1fr; border-top: var(--bw-hairline) solid rgba(253, 251, 247, 0.16); margin-top: var(--space-8); }
@media (min-width: 640px) { .alv-footer__socials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .alv-footer__socials { grid-template-columns: repeat(4, 1fr); } }
.alv-footer__social { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-2); border-bottom: var(--bw-hairline) solid rgba(253, 251, 247, 0.16); color: rgba(253, 251, 247, 0.82); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
@media (min-width: 640px) { .alv-footer__social { border-right: var(--bw-hairline) solid rgba(253, 251, 247, 0.16); padding-inline: var(--space-4); } }
.alv-footer__social:hover { color: var(--paper); background: rgba(253, 251, 247, 0.04); }
.alv-footer__social-glyph { display: inline-flex; color: var(--gold-300); }
.alv-footer__social-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.alv-footer__social-arrow { margin-left: auto; display: inline-flex; color: rgba(253, 251, 247, 0.6); }

.alv-footer__bottom { border-top: var(--bw-hairline) solid rgba(253, 251, 247, 0.16); margin-top: var(--space-6); padding-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-caption); color: rgba(253, 251, 247, 0.55); }
.alv-footer__legal { display: flex; gap: var(--space-5); }
.alv-footer__legal a { color: rgba(253, 251, 247, 0.55); text-decoration: none; }
.alv-footer__legal a:hover { color: var(--paper); }

/* ============================================================ BAG DRAWER ==== */
.alv-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.alv-drawer[hidden] { display: none; }
.alv-drawer__scrim { position: absolute; inset: 0; background: rgba(20, 17, 14, 0.32); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit); }
.alv-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 400px); background: var(--paper); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--dur-exit) var(--ease-exit); display: flex; flex-direction: column; }
/* Entrance overrides the (default) exit transition — see the overlay-motion tokens. */
.alv-drawer.is-open .alv-drawer__panel { transform: translateX(0); transition: transform var(--dur-enter) var(--ease-entrance); }
.alv-drawer.is-open .alv-drawer__scrim { opacity: 1; transition: opacity var(--dur-enter) var(--ease-entrance); }
/* Header and contents settle in just behind the panel edge. */
.alv-drawer__top, .alv-drawer__body { opacity: 0; transform: translateX(14px); transition: opacity var(--dur-exit) var(--ease-exit), transform var(--dur-exit) var(--ease-exit); }
.alv-drawer.is-open .alv-drawer__top,
.alv-drawer.is-open .alv-drawer__body {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-entrance) var(--d, 0ms), transform var(--dur-enter) var(--ease-entrance) var(--d, 0ms);
}
.alv-drawer.is-open .alv-drawer__top { --d: 100ms; }
.alv-drawer.is-open .alv-drawer__body { --d: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .alv-drawer__scrim, .alv-drawer__panel, .alv-drawer__top, .alv-drawer__body { transition: none; }
  .alv-drawer__top, .alv-drawer__body { opacity: 1; transform: none; }
}
.alv-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: var(--bw-hairline) solid var(--line); }
.alv-drawer__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-900); }
.alv-drawer__close { border: 0; background: transparent; color: var(--ink-900); cursor: pointer; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.alv-drawer__body { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); flex: 1; min-height: 0; overflow-y: auto; }
.alv-drawer__empty { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink-500); margin: 0; }
.alv-drawer__cta { align-self: flex-start; }
.alv-drawer__footer { padding: var(--space-5); border-top: var(--bw-hairline) solid var(--line); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.alv-drawer__footer .alv-drawer__cta { align-self: stretch; }

/* Left-side variant (filter panel) — mirrors the right-side (bag/nav) panel, opposite edge. */
.alv-drawer--left .alv-drawer__panel { left: 0; right: auto; transform: translateX(-100%); }
.alv-drawer--left.is-open .alv-drawer__panel { transform: translateX(0); }

/* ============================================================ REVEAL ======== */
html.alv-js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.alv-js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.alv-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==================================================== EDITORIAL PAGES ======== */
/* Shared chrome for the static inner pages (FAQ · Our Story · Contact): a centered
   page header, a reusable accordion, narrative rows, value pillars, and a form. */

/* Centered page header (mirrors the collection head). */
.alv-page-head { padding-top: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.alv-page-head .alv-crumbs { align-self: stretch; justify-content: center; padding-top: var(--space-5); margin-bottom: var(--space-4); }
.alv-page-head__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(28px, 4vw, 44px); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--ink-900); }
.alv-page-head__lede { margin: var(--space-2) 0 0; max-width: 60ch; color: var(--ink-500); font-size: var(--fs-body); line-height: var(--lh-relaxed); }

/* Reusable accordion (FAQ + anywhere a disclosure is needed). */
.alv-acc { border-bottom: var(--bw-hairline) solid var(--line); }
.alv-acc__q {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0; font-family: var(--font-ui); font-size: var(--fs-body-sm);
  font-weight: var(--w-medium); color: var(--ink-900);
}
.alv-acc__q::-webkit-details-marker { display: none; }
.alv-acc__q::after { content: '+'; color: var(--gold-700); font-size: var(--fs-body-lg); line-height: 1; flex: 0 0 auto; }
.alv-acc[open] .alv-acc__q::after { content: '\2013'; }
.alv-acc__a { margin: 0 0 var(--space-4); max-width: 68ch; color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }

/* FAQ — single readable column, grouped, with a closing help card. */
.alv-faq__inner { max-width: 760px; margin: 0 auto; }
.alv-faq__group { scroll-margin-top: 96px; }
.alv-faq__group + .alv-faq__group { margin-top: var(--space-7); }
.alv-faq__group-title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(18px, 2vw, 22px); color: var(--ink-900); }
.alv-help { margin-top: var(--space-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7); background: var(--surface-sunken); border-radius: var(--radius-md); }
.alv-help__text { margin: 0; color: var(--ink-500); font-size: var(--fs-body-sm); max-width: 46ch; }

/* Our Story — alternating image + copy narrative rows. */
.alv-story__row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; }
.alv-story__row + .alv-story__row { margin-top: var(--space-8); }
.alv-story__row { scroll-margin-top: 96px; }
@media (min-width: 860px) {
  .alv-story__row { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .alv-story__row--reverse .alv-story__media { order: 2; }
}
.alv-story__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); border-radius: var(--radius-sm); }
.alv-story__media img { width: 100%; height: 100%; object-fit: cover; }
.alv-story__title { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(22px, 2.6vw, 30px); line-height: var(--lh-snug); color: var(--ink-900); }
.alv-story__copy p { margin: 0 0 var(--space-3); color: var(--ink-500); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: 54ch; }
.alv-story__copy p:last-child { margin-bottom: 0; }

/* Three house values. */
.alv-values__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-7); }
.alv-values__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(20px, 2.4vw, 28px); color: var(--ink-900); }
.alv-values__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 720px) { .alv-values__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.alv-pillar { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--bw-hairline) solid var(--line-strong); }
.alv-pillar__index { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); color: var(--gold-700); }
.alv-pillar__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-body-lg); color: var(--ink-900); }
.alv-pillar__body { margin: 0; color: var(--ink-500); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }

/* Closing CTA band. */
.alv-story-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.alv-story-cta__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(22px, 2.8vw, 32px); color: var(--ink-900); }
.alv-story-cta__text { margin: 0; color: var(--ink-500); font-size: var(--fs-body-sm); max-width: 46ch; }
.alv-story-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Contact — form + direct-channel aside. */
.alv-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 860px) { .alv-contact__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: start; } }
.alv-contact__form { display: flex; flex-direction: column; gap: var(--space-4); }
.alv-field { display: flex; flex-direction: column; gap: var(--space-2); }
.alv-field__label { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); }
.alv-field__input {
  width: 100%; padding: 0 var(--space-4); height: 48px; border: var(--bw-hairline) solid var(--line-strong);
  border-radius: var(--radius-xs); background: var(--white); color: var(--ink-900);
  font-family: var(--font-ui); font-size: var(--fs-body-sm);
}
.alv-field__textarea { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; min-height: 132px; line-height: var(--lh-relaxed); }
.alv-field__input:focus-visible { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.alv-contact__submit { align-self: flex-start; margin-top: var(--space-2); }
.alv-contact__done { margin: 0; color: var(--success-600); font-size: var(--fs-body-sm); }
.alv-contact__note { margin: 0; color: var(--ink-400); font-size: var(--fs-caption); }
.alv-contact__aside { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); background: var(--surface-sunken); border-radius: var(--radius-md); }
.alv-contact__channel { display: flex; gap: var(--space-3); align-items: flex-start; }
.alv-contact__channel-icon { color: var(--gold-700); flex: 0 0 auto; margin-top: 2px; }
.alv-contact__channel-label { display: block; font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--space-1); }
.alv-contact__channel-value { display: inline-block; font-family: var(--font-ui); font-size: var(--fs-body-sm); color: var(--ink-900); text-decoration: none; border-bottom: var(--bw-hairline) solid var(--gold-500); }
.alv-contact__channel-value:hover { color: var(--gold-700); }
.alv-contact__channel-note { display: block; color: var(--ink-500); font-size: var(--fs-caption); margin-top: var(--space-1); }
.alv-contact__hours p { margin: var(--space-1) 0 0; color: var(--ink-500); font-size: var(--fs-body-sm); }
.alv-contact__social-row { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.alv-contact__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--bw-hairline) solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-700); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.alv-contact__social-link:hover { color: var(--gold-700); border-color: var(--gold-500); }

/* ============================================================ MOBILE TYPE ==== */
/* Proportionally smaller section + card titles on small screens — keeps the
   editorial hierarchy while easing density on 375–767px viewports. */
@media (max-width: 767px) {
  .alv-head__title { font-size: 17px; }
  .alv-cat__name,
  .alv-house__name,
  .alv-boutique__name { font-size: 17px; }
  .alv-card__title { font-size: var(--fs-body); }
}