/* Etna experience — compiled from etna-xl mockup styles, scoped to #etna-experience */
/* --- tokens.css --- */
#etna-experience {
  --nivo-ink: #1a1a1a;
  --nivo-ink-soft: #4a4a48;
  --nivo-yellow: #ffb00b;
  --nivo-yellow-ink: #1a1a1a;
  --nivo-paper: #ffffff;
  --nivo-off-white: #f7f5f1;
  --nivo-warm-grey: #ece8e1;
  --nivo-line: rgba(26, 26, 26, 0.12);
  --nivo-line-soft: rgba(26, 26, 26, 0.08);

  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 900ms;
  --dur-med: 500ms;
  --dur-fast: 250ms;

  --container-max: 1360px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Dark tonal system — the whole ETNA experience after the header lives in
     this world. Depth comes from these four steps plus photography, never
     from a light section breaking the mood. */
  --etna-black: #0d0e0d;
  --etna-bg: #111210;
  --etna-bg-soft: #161714;
  --etna-panel: #1a1b18;
  --etna-border: rgba(255, 255, 255, 0.1);
  --etna-text: #f2f0ea;
  --etna-muted: rgba(242, 240, 234, 0.58);
  --etna-radius: 6px;

  --etna-pick: #1f211e;
  --etna-pick-hover: #262925;
  --etna-pick-on: #33372f;
  --etna-pick-ink: var(--etna-text);
  --etna-pick-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --etna-pick-shadow-on: 0 6px 18px rgba(0, 0, 0, 0.36);
  --etna-pick-edge: rgba(255, 255, 255, 0.1);
  --etna-pick-edge-on: rgba(255, 255, 255, 0.34);
  --etna-plate: radial-gradient(ellipse 80% 66% at 50% 56%, #26281f 0%, #1e201b 52%, #161814 100%);
  --etna-plate-flat: #1e201b;

  /* Chrome tones, expressed as roles rather than as literal white alphas.
     Every one of these used to be a hardcoded rgba(255,255,255,…), which is
     what made a light theme impossible: the same value has to become a dark
     alpha when the ground is light. */
  --etna-text-strong: #ffffff;
  /* Type that sits ON a photograph. The photo does not change with the
     theme, so neither may this — it is light in both. */
  --etna-on-photo: #f4f2ec;
  --etna-on-photo-soft: rgba(244, 242, 236, 0.92);
  --etna-on-photo-muted: rgba(244, 242, 236, 0.7);

  /* Type that overlays the 3D VIEWPORT. This is a separate role from
     --etna-text on purpose: the station nav and the story copy sit on top of
     the ETNA, and the ETNA is near-black in every theme and every finish.
     Deriving these from the page theme made them black-on-black in light
     mode the moment the product moved behind them, so they stay light in
     BOTH themes and lean on --etna-halo for separation from the stage. */
  --etna-on-stage: #f6f4ef;
  --etna-on-stage-muted: rgba(246, 244, 239, 0.72);
  --etna-on-stage-faint: rgba(246, 244, 239, 0.46);
  /* 0.34 measured 3.12:1 on --etna-bg — below AA for the accessory
     index/state and the purchase disclaimer that use it. 0.52 reads 4.7:1
     and is still clearly a recessive tone. */
  --etna-faint: rgba(255, 255, 255, 0.52);
  --etna-dim: rgba(255, 255, 255, 0.58);
  --etna-soft: rgba(255, 255, 255, 0.62);
  --etna-strong: rgba(255, 255, 255, 0.8);
  --etna-tint: rgba(255, 255, 255, 0.03);
  --etna-hairline: rgba(255, 255, 255, 0.12);
  --etna-ring: rgba(255, 255, 255, 0.16);
  --etna-ring-strong: rgba(255, 255, 255, 0.22);
  --etna-line-strong: rgba(255, 255, 255, 0.4);
  /* Panels that float over the 3D canvas / photography. */
  --etna-scrim: rgba(16, 17, 15, 0.96);
  --etna-footer-bg: var(--nivo-ink);
  --etna-footer-text: rgba(255, 255, 255, 0.72);
  /* The film band's studio card matches the animation's own backdrop. */
  --etna-film-frame: #d9d9d9;
  /* The 3D stage's vignette. The product is lit for a studio, so the ground
     behind it is a soft radial pool rather than a flat fill in either theme. */
  --etna-stage: radial-gradient(circle at 50% 42%, #242520 0%, #191a17 42%, #0e0f0e 100%);
  /* Halo behind type that floats over the 3D canvas. The product is dark and
     the stage behind it is not, so in EITHER theme the copy can end up over
     the opposite tone; a soft glow of the stage colour keeps it readable
     without putting a visible box on the composition. */
  --etna-halo: rgba(14, 15, 14, 0.72);

  /* Exploded-diagram annotation. A SEPARATE role from --etna-on-stage, which
     is deliberately light in both themes because it sits on the near-black
     product. These labels sit in the margins AROUND the product, i.e. on the
     stage itself — so on the light stage light type is invisible, and they
     have to follow the theme instead. */
  --etna-diagram-text: rgba(246, 244, 239, 0.92);
  --etna-diagram-note: rgba(246, 244, 239, 0.55);
  --etna-diagram-line: rgba(246, 244, 239, 0.34);
  --etna-diagram-dot: rgba(246, 244, 239, 0.6);
  --etna-diagram-halo: rgba(13, 14, 12, 0.96);
  /* Local contrast fields behind the overlay typography, painted as part of
     the stage lighting rather than as UI.
     Dark mode used to need none, because the stage behind the type was always
     dark. That is no longer reliably true: the fire chamber now returns a
     proper brushed-metal response, so at the ACÉL station the brightest
     surface in the composition sits exactly where the copy is set and white
     type on it was close to unreadable. These are deliberately much weaker
     than the light theme's — just enough to hold the type when the product's
     bright steel is behind it, and invisible over the dark stage everywhere
     else, so the approved dark composition is otherwise untouched. */
  --etna-field-left: linear-gradient(
    to right,
    rgba(10, 11, 10, 0.56) 0%,
    rgba(10, 11, 10, 0.3) 46%,
    rgba(10, 11, 10, 0.1) 72%,
    transparent 100%
  );
  --etna-field-right: linear-gradient(
    to left,
    rgba(10, 11, 10, 0.64) 0%,
    rgba(10, 11, 10, 0.36) 48%,
    rgba(10, 11, 10, 0.12) 74%,
    transparent 100%
  );

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Light theme.
   Only the ETNA tonal system flips. The NÍVÓ brand tokens (yellow, ink,
   paper) are fixed brand values and stay put, and so does anything sitting
   ON a photograph — a caption over a dusk photo needs light type in both
   themes, because the photo does not change.
   --------------------------------------------------------------------------- */
#etna-experience[data-theme="light"] {
  --etna-black: #ffffff;
  --etna-bg: #f6f4ef;
  --etna-bg-soft: #efece5;
  --etna-panel: #e8e4db;
  --etna-border: rgba(26, 26, 26, 0.14);
  --etna-text: #17181a;
  --etna-muted: rgba(23, 24, 26, 0.62);

  --etna-text-strong: #0f1011;
  --etna-faint: rgba(23, 24, 26, 0.66);
  --etna-dim: rgba(23, 24, 26, 0.66);
  --etna-soft: rgba(23, 24, 26, 0.66);
  --etna-strong: rgba(23, 24, 26, 0.84);
  --etna-tint: rgba(23, 24, 26, 0.04);
  --etna-hairline: rgba(23, 24, 26, 0.14);
  --etna-ring: rgba(23, 24, 26, 0.18);
  --etna-ring-strong: rgba(23, 24, 26, 0.26);
  --etna-line-strong: rgba(23, 24, 26, 0.42);
  --etna-scrim: rgba(255, 255, 255, 0.96);

  --etna-pick: #f4f2ee;
  --etna-pick-hover: #f8f7f4;
  --etna-pick-on: #ffffff;
  --etna-pick-ink: var(--etna-text);
  --etna-pick-shadow: 0 1px 2px rgba(23, 24, 26, 0.06), 0 2px 10px rgba(23, 24, 26, 0.05);
  --etna-pick-shadow-on: 0 2px 4px rgba(23, 24, 26, 0.08), 0 10px 28px rgba(23, 24, 26, 0.12);
  --etna-pick-edge: rgba(23, 24, 26, 0.08);
  --etna-pick-edge-on: rgba(23, 24, 26, 0.24);
  --etna-plate: radial-gradient(ellipse 80% 66% at 50% 56%, #faf9f6 0%, #f4f2ee 52%, #eae7e0 100%);
  --etna-plate-flat: #f4f2ee;
  --etna-footer-bg: #17181a;
  --etna-footer-text: rgba(255, 255, 255, 0.72);
  --etna-film-frame: #e4e1da;
  /* Warm architectural studio, not a white cutout. The old ramp started at
     pure #ffffff, which left no tonal room: light overlay type vanished
     wherever the product was not behind it, and the black frame read as a
     hole punched in the page. This keeps the product area the lightest point
     but never white, and lets the corners fall far enough to give both the
     silhouette and the typography something to sit against. */
  --etna-stage: radial-gradient(ellipse 78% 62% at 50% 46%, #f0eee8 0%, #e9e6df 46%, #ddd9d0 78%, #cfcbc1 100%);
  /* Light theme: the overlay type is DARK INK, so its halo is light.
     This is the reverse of what it used to be, and the change matters.
     Keeping white type on the light stage meant the type could only be read
     where a darkening side field sat behind it — which worked on desktop and
     failed completely below 900px, where the station nav is hidden and the
     story copy is bottom-centred over bare stage with no field at all. The
     headline was white on #efece5.
     Dark ink with a light halo reads on the pale stage AND, thanks to the
     halo, over the near-black product at the detail stations — exactly the
     technique the exploded labels already use here (--etna-diagram-halo). */
  --etna-halo: rgba(250, 249, 246, 0.92);
  --etna-on-stage: rgba(15, 16, 17, 0.96);

  /* Diagram annotation follows the theme, unlike --etna-on-stage. That is
     only safe because the exploded intro suppresses the side contrast fields
     (see .etna-experience__stage--diagram): during it the labels are the ONLY
     overlay type, so the margins can stay genuinely light and dark type reads
     against them. The contour in explodedLabels.css covers the frames where an
     exploded panel sweeps underneath a label. */
  --etna-diagram-text: rgba(15, 16, 17, 0.94);
  --etna-diagram-note: rgba(23, 24, 26, 0.66);
  --etna-diagram-line: rgba(23, 24, 26, 0.42);
  --etna-diagram-dot: rgba(23, 24, 26, 0.66);
  --etna-diagram-halo: rgba(249, 247, 243, 1);
  /* The light stage is far brighter than the dark one, so the same alphas do
     not survive it. Raised HERE only, leaving the approved dark composition
     untouched. */
  --etna-on-stage-muted: rgba(23, 24, 26, 0.78);
  --etna-on-stage-faint: rgba(23, 24, 26, 0.55);
  /* Light mode does the work here. A wide, soft edge falloff that reads as
     atmosphere in the corners of the studio — no card, no pill, no boundary.
     It only has to guarantee that light type survives when the product is
     NOT behind it. */
  /* With dark ink on the stage these are no longer load-bearing for
     legibility — they are only the soft corner falloff that keeps the studio
     from reading as a flat sheet. A LIGHT wash now, in the same direction as
     the stage gradient, so the margins stay bright under the type. */
  --etna-field-left: linear-gradient(
    to right,
    rgba(255, 254, 250, 0.62) 0%,
    rgba(255, 254, 250, 0.34) 40%,
    rgba(255, 254, 250, 0.1) 74%,
    transparent 100%
  );
  --etna-field-right: linear-gradient(
    to left,
    rgba(255, 254, 250, 0.66) 0%,
    rgba(255, 254, 250, 0.36) 42%,
    rgba(255, 254, 250, 0.11) 76%,
    transparent 100%
  );

  color-scheme: light;
}

#etna-experience,
#etna-experience * {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #etna-experience,
  #etna-experience *,
  #etna-experience *::before,
  #etna-experience *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#etna-experience {
  margin: 0;
  font-family: var(--font-body);
  color: var(--etna-text);
  background: var(--etna-bg);
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

#etna-experience.etna-experience--focus {
  isolation: auto;
  position: relative;
  z-index: 1100;
}

#etna-experience img,
#etna-experience video,
#etna-experience canvas,
#etna-experience iframe {
  display: block;
  max-width: 100%;
}

#etna-experience a {
  color: inherit;
}

#etna-experience button {
  font-family: inherit;
}

#etna-experience .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Every section that uses .eyebrow now lives on a dark background — the
   hero, header, and footer are the only remaining light chrome, and none of
   them use this class. */
#etna-experience .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etna-muted);
}

#etna-experience .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-editorial),
    background var(--dur-fast) var(--ease-editorial),
    border-color var(--dur-fast) var(--ease-editorial);
  text-decoration: none;
  white-space: nowrap;
}

#etna-experience .btn:active {
  transform: scale(0.97);
}

#etna-experience .btn-primary {
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
}

#etna-experience .btn-primary:hover {
  background: #ffc23d;
}

#etna-experience .btn-outline {
  background: transparent;
  color: var(--nivo-paper);
  border-color: rgba(255, 255, 255, 0.55);
}

#etna-experience .btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

#etna-experience .btn-outline-dark {
  background: transparent;
  color: var(--nivo-ink);
  border-color: var(--nivo-line);
}

#etna-experience .btn-outline-dark:hover {
  border-color: var(--nivo-ink);
}

#etna-experience .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;
}

#etna-experience .etna-embed-theme {
  position: fixed;
  top: calc(80px + 12px);
  right: 16px;
  z-index: 1025;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--etna-hairline);
  background: var(--etna-scrim);
  color: var(--etna-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#etna-experience .etna-embed-theme:hover {
  border-color: var(--etna-ring-strong);
}

/* --- objectIntro.css --- */
.etna-object-intro {
  background: var(--etna-bg);
  color: var(--etna-text);
  padding: clamp(64px, 10vw, 110px) 0;
}

.etna-object-intro__inner {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.etna-object-intro__title {
  margin: 20px 0 24px;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--etna-text);
  text-align: center;
}

.etna-object-intro__body {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--etna-muted);
}

/* --- sizeIntro.css --- */
.etna-sizes {
  position: relative;
  padding: clamp(56px, 10vh, 120px) 0 clamp(48px, 8vh, 96px);
  background: var(--etna-bg);
}

.etna-sizes__head {
  padding: 0 var(--gutter);
  margin-bottom: clamp(24px, 4vh, 52px);
}

.etna-sizes__head .eyebrow {
  margin: 0 0 clamp(14px, 2vh, 22px);
}

.etna-sizes__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--etna-text-strong);
}

.etna-sizes__sub {
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
  color: var(--etna-muted);
  max-width: 34ch;
}

.etna-sizes__pick {
  padding: 0 var(--gutter);
  max-width: 1120px;
  margin: 0 auto;
}

/* --- sizeChoice.css --- */
.etna-sizepick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.etna-sizepick__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--etna-pick);
  box-shadow: var(--etna-pick-shadow);
  color: var(--etna-pick-ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: background 220ms var(--ease-editorial), box-shadow 220ms var(--ease-editorial),
    transform 220ms var(--ease-editorial);
}

.etna-sizepick__item:hover {
  background: var(--etna-pick-hover);
  box-shadow: var(--etna-pick-shadow-on);
}

.etna-sizepick__item:active {
  transform: scale(0.995);
}

.etna-sizepick__item--on {
  background: var(--etna-pick-on);
  box-shadow: var(--etna-pick-shadow-on), inset 0 0 0 1px var(--etna-pick-edge-on);
  transform: translateY(-2px);
}

.etna-sizepick__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--etna-text);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 180ms var(--ease-editorial), transform 180ms var(--ease-editorial);
}

.etna-sizepick__item--on .etna-sizepick__check {
  opacity: 1;
  transform: scale(1);
}

.etna-sizepick__item--on .etna-sizepick__name {
  font-weight: 700;
}

.etna-sizepick__check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--etna-bg);
  border-bottom: 2px solid var(--etna-bg);
  transform: rotate(45deg);
}

.etna-sizepick__figure {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--etna-plate);
}

.etna-sizepick__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.etna-sizepick__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.6vw, 20px) clamp(14px, 1.8vw, 20px);
}

.etna-sizepick__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.etna-sizepick__dims {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--etna-muted);
  font-variant-numeric: tabular-nums;
}

.etna-sizepick__item:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

.etna-sizepick--editorial {
  gap: clamp(10px, 1.6vw, 20px);
}

.etna-sizepick--editorial .etna-sizepick__name {
  font-size: clamp(18px, 2vw, 26px);
}

.etna-sizepick--editorial .etna-sizepick__dims {
  font-size: 13px;
}

@media (max-width: 460px) {
  .etna-sizepick__name {
    font-size: 13px;
  }
  .etna-sizepick__dims {
    font-size: 11px;
  }
  .etna-sizepick--editorial .etna-sizepick__name {
    font-size: 15px;
  }
}

/* --- stage.css --- */
.etna-stage {
  position: relative;
  background: var(--etna-bg);
  --etna-scrub: 130svh;
  height: calc(100svh + var(--etna-scrub));
}

.etna-stage__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--etna-stage);
}

.etna-stage__frame {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.etna-stage__frame--scrub {
  pointer-events: none;
}

.etna-stage__frame .etna-experience__canvas {
  position: absolute;
  inset: 0;
  height: auto;
}

.etna-stage__frame canvas,
.etna-stage__frame .etna-experience__canvas canvas {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
}

.etna-stage__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vw, 28px);
  transform: translateX(-50%);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--etna-scrim);
  backdrop-filter: blur(10px);
  color: var(--etna-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 4;
  animation: etna-hint-in 420ms var(--ease-editorial) both;
}

.etna-stage__hint[hidden] {
  display: none;
}

.etna-stage__hintdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nivo-yellow);
  animation: etna-hint-drag 1900ms var(--ease-editorial) infinite;
}

@keyframes etna-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes etna-hint-drag {
  0%, 100% { transform: translateX(-5px); opacity: 0.55; }
  50%      { transform: translateX(5px);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .etna-stage__hint,
  .etna-stage__hintdot {
    animation: none;
  }
}

.etna-stage--ready .etna-stage__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.etna-stage__panel {
  flex: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--ease-editorial), transform 280ms var(--ease-editorial);
  pointer-events: none;
  margin: clamp(14px, 2vw, 28px) auto clamp(14px, 2vw, 24px);
  padding: 0 var(--gutter);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.etna-stage__cta {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms var(--ease-editorial), filter 160ms var(--ease-editorial);
}

.etna-stage__cta:hover {
  filter: brightness(1.04);
}

.etna-stage__cta:active {
  transform: scale(0.985);
}

.etna-stage__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.etna-stage__option {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 14px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--etna-pick);
  box-shadow: var(--etna-pick-shadow);
  text-align: left;
  cursor: pointer;
  color: var(--etna-text);
  transition: background 200ms var(--ease-editorial), box-shadow 200ms var(--ease-editorial),
    transform 200ms var(--ease-editorial);
}

.etna-stage__option:hover {
  background: var(--etna-pick-hover);
  box-shadow: var(--etna-pick-shadow-on);
}

.etna-stage__option:active {
  transform: scale(0.995);
}

.etna-stage__optionlabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etna-muted);
}

.etna-stage__optionvalue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--etna-text);
}

.etna-stage__swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.22);
}

.etna-stage__chevron {
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.5;
}

.etna-stage__chevron::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.etna-stage__option:hover .etna-stage__chevron {
  opacity: 1;
}

.etna-stage__cta:focus-visible,
.etna-stage__option:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .etna-stage__panel {
    max-width: none;
    margin-top: clamp(16px, 2vw, 28px);
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
  }

  .etna-stage__cta {
    flex: none;
    width: auto;
    min-width: 240px;
    padding: 0 32px;
  }

  .etna-stage__options {
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .etna-stage__option {
    grid-template-columns: 1fr 14px;
    grid-template-areas:
      "label chevron"
      "value value";
    align-content: center;
    gap: 4px 8px;
    min-height: 64px;
  }

  .etna-stage__optionlabel { grid-area: label; }
  .etna-stage__optionvalue { grid-area: value; }
  .etna-stage__chevron { grid-area: chevron; }
}

.etna-stage__inner--focus {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: var(--etna-bg);
  padding-top: env(safe-area-inset-top);
  animation: etna-focus-in 300ms var(--ease-editorial) both;
}

@keyframes etna-focus-in {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

.etna-stage__inner--focus .etna-stage__frame {
  flex: 1 1 58%;
  height: auto;
  min-height: 0;
  pointer-events: auto;
}

.etna-stage__inner--focus .etna-stage__panel,
.etna-stage__inner--focus .etna-exploded,
.etna-stage__inner--focus .etna-stage__hint {
  display: none;
}

.etna-stage__close {
  position: absolute;
  top: clamp(10px, 2vw, 18px);
  left: var(--gutter);
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--etna-scrim);
  backdrop-filter: blur(10px);
  color: var(--etna-text);
  font-size: 15px;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
}

.etna-stage__inner--focus .etna-stage__close {
  display: grid;
}

.etna-stage__config {
  flex: 0 1 42%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  display: none;
  flex-direction: column;
  background: var(--etna-bg);
}

.etna-stage__inner--focus .etna-stage__config {
  display: flex;
}

.etna-stage__configbody {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.etna-stage__configfoot {
  flex: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}

.etna-stage__done {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.etna-stage__close:focus-visible,
.etna-stage__done:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .etna-stage__inner--focus {
    flex-direction: row;
  }

  .etna-stage__inner--focus .etna-stage__frame {
    flex: 1 1 68%;
  }

  .etna-stage__config {
    flex: 0 0 clamp(380px, 32%, 520px);
    border-top: 0;
    border-left: 1px solid var(--etna-hairline);
  }
}

.etna-stage__configbody .etna-explore {
  position: static;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: auto;
  padding: clamp(18px, 4vw, 32px) var(--gutter) clamp(24px, 5vw, 40px);
  gap: 20px;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
}

.etna-stage__configbody .etna-explore__panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
}

.etna-stage__configbody [data-etna-track] {
  min-width: 0;
  max-width: 100%;
}

.etna-stage__configbody .etna-explore__hint,
.etna-stage__configbody .etna-explore__eyebrow {
  display: none;
}

.etna-stage__configbody .etna-explore__tabs {
  width: 100%;
  gap: 0;
}

.etna-stage__configbody .etna-explore__tab {
  min-height: 68px;
  padding: 12px 8px;
  border-radius: 4px;
}

.etna-stage__configbody .etna-explore__tab-label {
  font-size: 12px;
}

.etna-stage__configbody .etna-explore__tab-value {
  font-size: 13px;
}

.etna-stage__configbody .etna-explore__track {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.etna-stage__configbody .etna-explore__colors {
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  max-width: none;
  overflow: visible;
  padding: 0;
}

.etna-stage__configbody .etna-explore__group {
  display: block;
}

.etna-stage__configbody .etna-explore__group-label {
  text-align: left;
  margin-bottom: 10px;
  font-size: 10px;
}

.etna-stage__configbody .etna-explore__track--swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: visible;
  padding: 0;
  max-width: none;
}

.etna-stage__configbody .etna-swatch-dot {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.etna-stage__configbody .etna-explore__name {
  font-size: 16px;
  width: 100%;
  max-width: 100%;
}

.etna-stage__configbody .etna-explore__gifts {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  margin: 0;
}

.etna-stage__configbody .etna-explore__gift-badge {
  max-width: 100%;
}

.etna-stage__configbody .etna-explore__gift-name {
  overflow-wrap: anywhere;
}

/* --- functionGrid.css --- */
.etna-fn__wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.etna-fn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

@media (min-width: 560px) {
  .etna-fn {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.etna-fn__tile {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--etna-pick);
  box-shadow: var(--etna-pick-shadow);
  color: var(--etna-pick-ink);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background 180ms var(--ease-editorial), box-shadow 180ms var(--ease-editorial),
    transform 180ms var(--ease-editorial);
}

.etna-fn__tile:hover {
  background: var(--etna-pick-hover);
  box-shadow: var(--etna-pick-shadow-on);
}

.etna-fn__tile:active {
  transform: scale(0.995);
}

.etna-fn__tile--on {
  background: var(--etna-pick-on);
  box-shadow: var(--etna-pick-shadow-on), inset 0 0 0 1px var(--etna-pick-edge-on);
  transform: translateY(-1px);
}

.etna-fn__tile--on .etna-fn__name {
  font-weight: 700;
}

.etna-fn__tile--shown:not(.etna-fn__tile--on) {
  background: var(--etna-pick-hover);
  box-shadow: var(--etna-pick-shadow), inset 0 0 0 1px var(--etna-pick-edge);
}

.etna-fn__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--etna-text);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 170ms var(--ease-editorial), transform 170ms var(--ease-editorial);
}

.etna-fn__tile--on .etna-fn__check {
  opacity: 1;
  transform: scale(1);
}

.etna-fn__tile--on .etna-fn__check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--etna-bg);
  border-bottom: 2px solid var(--etna-bg);
  transform: rotate(45deg);
}

.etna-fn__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background: var(--etna-plate);
}

.etna-fn__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.etna-fn__glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: rgba(23, 24, 26, 0.1);
}

.etna-fn__foot {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 10px 11px;
  text-align: left;
}

.etna-fn__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  hyphens: auto;
  overflow-wrap: break-word;
}

.etna-fn__note {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etna-muted);
  min-height: 1.2em;
}

.etna-fn__note--on {
  color: var(--etna-text);
  font-weight: 600;
}

.etna-fn__tile:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .etna-fn {
    gap: 10px;
  }

  .etna-fn__name {
    font-size: 13.5px;
  }
}

@media (max-width: 899px) {
  .etna-stage__frame .etna-experience__canvas {
    inset: 0;
    height: auto;
  }
}

#etna-experience .etna-embed-theme {
  display: none;
}

/* --- experience.css --- */
/* ---------------------------------------------------------------------------
   Dark immersive stage.
   The canvas is transparent and full-bleed; this gradient is the studio ground.
   It exists only to separate the object from the field — not as decoration.
   --------------------------------------------------------------------------- */
.etna-experience {
  position: relative;
  background: var(--etna-bg);
}

.etna-experience__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--etna-stage);
  touch-action: pan-y;
}

/* Local contrast fields. They live on the STAGE, above the canvas and below
   the overlay typography, so they read as atmosphere in the composition
   rather than as panels behind the text. Transparent in dark mode. */
.etna-experience__stage::before,
.etna-experience__stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(38%, 460px);
  z-index: 2;
  pointer-events: none;
}

.etna-experience__stage::before {
  left: 0;
  background: var(--etna-field-left);
}

.etna-experience__stage::after {
  right: 0;
  background: var(--etna-field-right);
}

@media (max-width: 899px) {
  /* Narrow screens: the copy is bottom-anchored and the nav is hidden, so a
     side field would just darken a third of the phone for nothing. */
  .etna-experience__stage::before,
  .etna-experience__stage::after {
    width: 26%;
    opacity: 0.6;
  }
}

/* Exploded intro only. The side fields exist to protect the LIGHT station nav
   and story copy — and during the intro both are hidden, so the only overlay
   type is the exploded diagram, which follows the theme instead. Leaving the
   fields on would darken exactly the margins those labels are set in and make
   dark type unreadable there; fading them out lets the light stage actually be
   light. Restored the moment the story takes over. */
.etna-experience__stage--diagram::before,
.etna-experience__stage--diagram::after {
  opacity: 0;
}

.etna-experience__stage::before,
.etna-experience__stage::after {
  transition: opacity 320ms var(--ease-editorial);
}


.etna-experience__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#etna-experience .etna-experience__canvas canvas {
  max-width: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.etna-experience__canvas > canvas,
.etna-experience__canvas > *:not(.etna-experience__orbit-zone) {
  width: 100%;
  height: 100%;
}

.etna-experience__orbit-zone {
  position: absolute;
  inset: 10% 22% 16% 22%;
  z-index: 4;
  width: auto;
  height: auto;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.etna-experience__orbit-zone[hidden] {
  display: none !important;
}
.etna-experience__orbit-zone:active {
  cursor: grabbing;
}
@media (max-width: 899px) {
  .etna-experience__orbit-zone {
    inset: 18% 16% 26% 16%;
  }
}

/* Scroll drivers: invisible, one viewport per story beat.
   Pulled up by one stage height so the first step begins exactly where the
   sticky stage pins — otherwise the top of the section maps to no beat at all.
   They must not intercept pointer events, or explore-mode dragging would never
   reach the canvas underneath. */
.etna-experience__steps {
  margin-top: -100svh;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* One per beat. Heights come from getRegionVh — the prelude keeps a generous
   region because it scrubs an animation, the story regions are just over half
   a screen each so a wheel gesture makes visible progress. */
.etna-experience__region {
  width: 100%;
  height: 58svh;
}
.etna-experience__region[data-station="assembly"] {
  height: 52svh;
}
.etna-experience__region[data-station="explore"],
.etna-experience__region[data-explore] {
  height: 100svh;
}
@media (max-width: 899px) {
  .etna-experience__region {
    height: 72svh;
  }
  .etna-experience__region[data-station="assembly"] {
    height: 62svh;
  }
  .etna-experience__region[data-station="explore"],
  .etna-experience__region[data-explore] {
    height: 100svh;
  }
}

.etna-viewer-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.etna-viewer-fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(16px, 5%, 64px);
}

/* ---------------------------------------------------------------------------
   Story copy — floats over the canvas rather than taking a column from it.
   Every keyframe's caption is mounted at once, stacked in the same spot; scroll
   drives each one's opacity directly (see Etna3DExperience), so the crossfade
   is exactly as smooth and exactly as scroll-coupled as the camera itself — a
   CSS transition here would just add lag on top of already-smooth values.
   --------------------------------------------------------------------------- */
.etna-story-copy-stack {
  position: absolute;
  inset: 0;
  /* Above the stage contrast fields (z-index 2), which exist to sit BEHIND
     this type. */
  z-index: 3;
  pointer-events: none;
  transition: opacity 500ms var(--ease-editorial);
}

.etna-story-copy-stack--hidden {
  opacity: 0;
}

.etna-story-copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(28px, 7vh, 72px);
  max-width: 26ch;
  color: var(--etna-on-stage);
  /* Secondary safeguard only — the stage field does the work. */
  text-shadow: 0 0 14px var(--etna-halo), 0 0 4px var(--etna-halo);
  /* Eases off as the next station approaches, then the keyed enter animation
     brings the new copy up. One paragraph is ever readable at a time — the
     alternative, crossfading two headlines through each other over hundreds of
     pixels, was tried in principle and rejected: at the halfway point both sit
     at the same weight in the same place and neither is legible. Fading the
     outgoing copy gives the same "scroll is doing something" signal without
     that cost. Bottoms out at 0.6, never at 0, so the beat never reads as
     empty. */
  opacity: calc(1 - 0.4 * var(--etna-station-progress, 0));
}

.etna-story-copy__index {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--nivo-yellow);
  margin-bottom: 12px;
}

.etna-story-copy__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.etna-story-copy__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--etna-on-stage-muted);
}

@media (min-width: 900px) {
  /* Desktop: copy sits in the right margin so the ETNA keeps the centre and
     the majority of the frame. */
  .etna-story-copy {
    left: auto;
    right: var(--gutter);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: min(26vw, 340px);
    max-width: none;
  }
}

@media (max-width: 899px) {
  /* The sticky stage fills the viewport so there is no dead band under it, but
     the CANVAS only takes the top ~68svh. The colour strip then sits directly
     beneath the product instead of floating in empty space, and the sticky
     purchase bar keeps the bottom to itself. */
  .etna-experience__canvas {
    inset: 0 0 auto 0;
    height: 68svh;
  }

  .etna-explore {
    bottom: auto;
    max-height: none;
    height: auto;
    overflow: visible;
    padding-bottom: 8px;
  }

  /* Caption column under the product: title, subtitle, then the pager.
     The stage stays sticky and 100svh so the scroll regions do not jump. */
  .etna-story-copy-stack {
    top: calc(68svh + 10px);
    right: var(--gutter);
    bottom: auto;
    left: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .etna-story-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    text-align: center;
    max-width: 34ch;
  }

  .etna-story-steps {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 14px;
  }
}

/* Stations are discrete, so a caption fades IN once on change rather than
   tracking a per-pixel opacity curve. Keyed remount drives it.
   `both` is deliberately gone: the animation must release opacity when it
   finishes, or its final keyframe would pin the element at 1 and override the
   scroll-linked fade above for the rest of the station. */
.etna-story-copy--enter {
  animation: etna-caption-in 420ms var(--ease-editorial);
}

@keyframes etna-caption-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-story-copy--enter {
    animation: none;
    opacity: 1;
  }

  .etna-story-copy {
    opacity: 1;
  }
}

/* Quiet, never an error banner — Plan B should read as finished, not broken. */
.etna-experience__fallback-note {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 4;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--etna-faint);
  text-align: center;
}

@media (min-width: 900px) {
  /* Station nav owns the left gutter, so story copy keeps the right side. */
  .etna-story-copy {
    right: var(--gutter);
  }
}

/* ---------------------------------------------------------------------------
   ASZTALKA function switch.

   A product FUNCTION, not a purchase choice, so it is deliberately not styled
   like the configurator's three categories and does not sit with them. Quiet
   enough to live over the product all the way through the story, explicit
   enough to read as a switch rather than a label — the same restraint the
   station nav uses.
   --------------------------------------------------------------------------- */
.etna-tabletop-toggle {
  position: absolute;
  right: var(--gutter);
  top: clamp(84px, 12vh, 132px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--etna-ring);
  border-radius: 999px;
  background: var(--etna-tint);
  color: var(--etna-on-stage-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: color 260ms var(--ease-editorial), border-color 260ms var(--ease-editorial);
}

.etna-tabletop-toggle:hover {
  color: var(--etna-on-stage);
  border-color: var(--etna-line-strong);
}

.etna-tabletop-toggle__track {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: var(--etna-ring);
  flex: 0 0 auto;
  transition: background 260ms var(--ease-editorial);
}

.etna-tabletop-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--etna-on-stage-muted);
  transition: transform 260ms var(--ease-editorial), background 260ms var(--ease-editorial);
}

.etna-tabletop-toggle--on {
  color: var(--etna-on-stage);
  border-color: var(--nivo-yellow);
}

.etna-tabletop-toggle--on .etna-tabletop-toggle__track {
  background: var(--nivo-yellow);
}

.etna-tabletop-toggle--on .etna-tabletop-toggle__knob {
  transform: translateX(12px);
  background: var(--nivo-yellow-ink);
}

.etna-tabletop-toggle:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

@media (max-width: 899px) {
  /* Above the copy block, which starts at 68svh. */
  .etna-tabletop-toggle {
    top: auto;
    bottom: calc(32svh + 8px);
    right: 12px;
    padding: 6px 10px 6px 7px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-tabletop-toggle,
  .etna-tabletop-toggle__track,
  .etna-tabletop-toggle__knob {
    transition: none;
  }
}

/* --- stationNav.css --- */
.etna-stations {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  text-shadow: 0 0 14px var(--etna-halo), 0 0 4px var(--etna-halo);
  transition: opacity 500ms var(--ease-editorial);
  --u: var(--etna-story-u, 0);
}

.etna-stations--hidden {
  opacity: 0;
  pointer-events: none;
}

.etna-stations__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.etna-stations__step {
  position: relative;
  --fill: clamp(0, calc(var(--u) - var(--i)), 1);
  --reached: clamp(0, calc(var(--u) - var(--i) + 1), 1);
}

.etna-stations__segment {
  display: block;
  margin-left: 3px;
  width: 1px;
  height: 22px;
  background: var(--etna-on-stage-faint);
  opacity: 0.4;
  position: relative;
}

.etna-stations__segment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nivo-yellow);
  transform-origin: top center;
  transform: scaleY(var(--fill));
}

.etna-stations__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--etna-on-stage-faint);
  cursor: pointer;
  text-align: left;
  transition: color 300ms var(--ease-editorial);
}

.etna-stations__item:hover {
  color: var(--etna-on-stage-muted);
}

.etna-stations__marker {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--etna-on-stage-faint);
  background: linear-gradient(var(--nivo-yellow), var(--nivo-yellow)) no-repeat;
  background-size: 100% calc(var(--reached) * 100%);
  background-position: bottom;
}

.etna-stations__index {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.etna-stations__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.etna-stations__item--active {
  color: var(--etna-on-stage);
  transition: none;
}

.etna-stations__item--active .etna-stations__index {
  color: var(--nivo-yellow);
}

.etna-stations__item--active .etna-stations__marker {
  border-color: var(--nivo-yellow);
}

.etna-stations__item:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .etna-stations,
  .etna-stations__item {
    transition: none;
  }
}

/* --- exploreControls.css --- */
.etna-explore {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 4vh, 46px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-editorial), transform 700ms var(--ease-editorial);
}

.etna-explore--visible {
  opacity: 1;
  transform: translateY(0);
}
.etna-explore--visible > * {
  pointer-events: auto;
}

.etna-explore__hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--etna-faint);
  transition: opacity 500ms var(--ease-editorial);
}

.etna-explore__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

/* Very quiet context line. Deliberately smaller and dimmer than the tab
   labels — it introduces the control, it is not part of it. */
.etna-explore__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--etna-faint);
}

/* --- The three-way configurator control ---------------------------------
   Still typography and a rule, not tab chrome: no filled pills, no borders
   around each item, nothing that reads as ecommerce. What was added is what
   makes it legible AS a control in one second:

     • a shared baseline rule under all three, so they read as one segmented
       row rather than three independent headings;
     • a CURRENT VALUE under each label, which is the real tell — a word that
       changes when you touch it cannot be mistaken for a section title, and
       it keeps the two closed tracks reporting their state;
     • the NÍVÓ yellow marker on the active segment only, sitting on that
       shared rule.

   The inactive items stay muted but are deliberately NOT faint: they were
   previously at --etna-faint, which is the same value the page uses for
   disabled and decorative text. */
.etna-explore__tabs {
  position: relative;
  display: flex;
  gap: 0;
  /* The shared rule the active marker rides on. */
  border-bottom: 1px solid var(--etna-ring);
}

.etna-explore__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* Generous, even hit area — the whole segment is the target, not the text.
     Comfortably past 44px tall on every breakpoint. */
  padding: 7px 18px 9px;
  min-width: 92px;
  background: none;
  border: 0;
  color: var(--etna-soft);
  cursor: pointer;
  transition: color 260ms var(--ease-editorial), background 260ms var(--ease-editorial);
}

.etna-explore__tab-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The current value. Smaller and quieter than the category on purpose — it is
   feedback, not a second heading. */
.etna-explore__tab-value {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--etna-dim);
  white-space: nowrap;
  transition: color 260ms var(--ease-editorial);
}

/* The marker. Sits ON the shared rule, so the row stays one object. */
.etna-explore__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--nivo-yellow);
  transform: scaleX(0);
  transition: transform 300ms var(--ease-editorial);
}

/* Desktop affordance: the label brightens and the marker grows to a hint of
   itself, so the segment answers the pointer before it is clicked. */
@media (hover: hover) {
  .etna-explore__tab:hover {
    color: var(--etna-text-strong);
    background: var(--etna-tint);
  }

  .etna-explore__tab:hover .etna-explore__tab-value {
    color: var(--etna-strong);
  }

  .etna-explore__tab:not(.etna-explore__tab--active):hover::after {
    background: var(--etna-line-strong);
    transform: scaleX(0.4);
  }
}

.etna-explore__tab--active {
  color: var(--etna-text-strong);
  background: var(--etna-tint);
}

.etna-explore__tab--active .etna-explore__tab-value {
  color: var(--nivo-yellow);
}

.etna-explore__tab--active::after {
  transform: scaleX(1);
}

.etna-explore__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: min(92vw, 660px);
  /* Mobile: a single horizontally scrollable strip rather than a wrapped grid. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 6px;
}

.etna-explore__track--swatches {
  gap: 2px;
  /* Deliberately NOT a round number of swatches: the next one stays clipped
     at the right edge so the rail reads as continuing. */
  max-width: min(86vw, 620px);
  scroll-padding-right: 24px;
}

.etna-explore__track::-webkit-scrollbar {
  display: none;
}

/* Refined chip — used for both size and accessories. */
.etna-explore__pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid var(--etna-ring);
  background: rgba(13, 14, 13, 0.55);
  color: var(--etna-strong);
  cursor: pointer;
  transition: border-color 260ms var(--ease-editorial), color 260ms var(--ease-editorial),
    background 260ms var(--ease-editorial);
}

.etna-explore__pill:hover {
  border-color: var(--etna-line-strong);
  color: var(--etna-text-strong);
}

.etna-explore__pill--selected {
  border-color: var(--nivo-yellow);
  color: var(--etna-text-strong);
  background: rgba(255, 176, 11, 0.14);
}

.etna-explore__pill-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.etna-explore__pill-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--etna-dim);
  white-space: nowrap;
}

.etna-explore__pill:focus-visible,
.etna-explore__tab:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

/* 44x44 hit area, small visible dot. */
.etna-swatch-dot {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.etna-swatch-dot__fill {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--etna-ring);
  transition: transform 300ms var(--ease-editorial), box-shadow 300ms var(--ease-editorial);
}

.etna-swatch-dot:hover .etna-swatch-dot__fill {
  transform: scale(1.12);
}

.etna-swatch-dot--selected {
  box-shadow: inset 0 0 0 2px var(--etna-text-strong);
}

.etna-swatch-dot--selected .etna-swatch-dot__fill {
  transform: scale(1.2);
  box-shadow:
    inset 0 0 0 1px var(--etna-ring-strong),
    0 2px 8px rgba(0, 0, 0, 0.28);
}

.etna-swatch-dot:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: -6px;
}

.etna-explore__name {
  margin: 20px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etna-strong);
}

.etna-explore__name > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.etna-explore__ral {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--etna-dim);
}

@media (max-width: 899px) {
  .etna-explore {
    gap: 8px;
  }

  /* Three segments have to share a phone's width without the type shrinking
     to the point of being unreadable, so the row becomes an equal three-way
     split of the available width and the padding gives way instead of the
     font size. The category stays at 10px and the value at 9px — both still
     comfortably legible — and each segment keeps a full-height tap target. */
  .etna-explore__tabs {
    width: min(100vw - 24px, 420px);
  }

  .etna-explore__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px 9px;
  }

  .etna-explore__tab-label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .etna-explore__tab-value {
    font-size: 9px;
    letter-spacing: 0.02em;
    /* Last resort only: the values are already chosen to fit (the colour tab
       falls back to its RAL code on narrow screens), so this should never
       actually engage. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .etna-explore__eyebrow {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .etna-explore__name {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* --- Accessory track ----------------------------------------------------
   Two affordances per row, deliberately different in shape as well as in
   colour: the wide button is "look at this", the trailing chip is "buy this".
   A single border colour cannot carry both meanings at once. */
.etna-explore__accessories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  /* Same bound as the other tracks. Without it the row lays out at its
     natural width and simply overflows the panel on both sides, which put
     the first accessory permanently off-screen on a phone once the pills
     gained thumbnails. */
  max-width: min(92vw, 660px);
  margin: 0 auto;
}

.etna-explore__bare {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px dashed var(--etna-ring);
  background: transparent;
  color: var(--etna-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
}

.etna-explore__bare:hover {
  color: var(--etna-text-strong);
  border-color: var(--etna-line-strong);
}

.etna-explore__bare--active {
  border-style: solid;
  border-color: var(--etna-line-strong);
  color: var(--etna-text-strong);
}

.etna-explore__acc {
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid var(--etna-ring);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-editorial), background var(--dur-fast) var(--ease-editorial);
}

/* PREVIEWED — "this is what you are looking at". A filled ground, not a
   coloured border, so it cannot be confused with the selection chip. */
.etna-explore__acc--previewed {
  background: var(--etna-tint);
  border-color: var(--etna-line-strong);
}

.etna-explore__acc-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 8px 14px 9px;
  background: transparent;
  border: 0;
  color: var(--etna-strong);
  cursor: pointer;
  text-align: left;
}

.etna-explore__acc-main:disabled {
  cursor: default;
  color: var(--etna-faint);
}

.etna-explore__acc-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.etna-explore__acc-state {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etna-faint);
}

.etna-explore__acc--previewed .etna-explore__acc-name,
.etna-explore__acc--previewed .etna-explore__acc-state {
  color: var(--etna-text-strong);
}

/* SELECTED — "this is in your configuration". NÍVÓ yellow, and only ever on
   this chip. */
.etna-explore__acc-pick {
  width: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--etna-ring);
  background: transparent;
  color: var(--etna-soft);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial);
}

.etna-explore__acc-pick:hover {
  color: var(--etna-text-strong);
  background: var(--etna-tint);
}

.etna-explore__acc--selected .etna-explore__acc-pick {
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  border-left-color: var(--nivo-yellow);
}

.etna-explore__acc-main:focus-visible,
.etna-explore__acc-pick:focus-visible,
.etna-explore__bare:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: -2px;
}

@media (max-width: 899px) {
  .etna-explore__accessories {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .etna-explore__accessories::-webkit-scrollbar {
    display: none;
  }

  .etna-explore__acc,
  .etna-explore__bare {
    flex: 0 0 auto;
  }
}

/* Passive accessory thumbnail inside the selector button. Spans both text
   rows so the pill stays one compact unit. */
.etna-explore__acc-thumb {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
  background: var(--etna-tint);
}

.etna-explore__acc-name,
.etna-explore__acc-state {
  display: block;
}

/* --- Colour rail affordance ---------------------------------------------
   Native scrolling, kept. The signal that more colours exist is a mask fade
   of the swatches themselves (correct on the 3D stage in either theme) plus
   a yellow chevron sitting on the overflowing edge. */
.etna-explore__rail {
  position: relative;
  min-width: 0;
}

.etna-explore__rail .etna-explore__track {
  --fade-left: transparent;
  --fade-right: transparent;
  -webkit-mask-image: linear-gradient(
    to right,
    var(--fade-left) 0,
    #000 36px,
    #000 calc(100% - 36px),
    var(--fade-right) 100%
  );
  mask-image: linear-gradient(
    to right,
    var(--fade-left) 0,
    #000 36px,
    #000 calc(100% - 36px),
    var(--fade-right) 100%
  );
}

.etna-explore__rail--more-left .etna-explore__track {
  --fade-left: rgba(0, 0, 0, 0);
}

.etna-explore__rail--more-right .etna-explore__track {
  --fade-right: rgba(0, 0, 0, 0);
}

.etna-explore__rail:not(.etna-explore__rail--more-left) .etna-explore__track {
  --fade-left: #000;
}

.etna-explore__rail:not(.etna-explore__rail--more-right) .etna-explore__track {
  --fade-right: #000;
}

.etna-explore__rail-more[hidden] {
  display: none;
}

.etna-explore__rail-more {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.etna-explore__rail-more--left {
  left: 2px;
}

.etna-explore__rail-more--right {
  right: 2px;
}

.etna-explore__rail-more-icon {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.etna-explore__rail-more--right .etna-explore__rail-more-icon {
  margin-left: -2px;
  transform: rotate(-45deg);
}

.etna-explore__rail-more--left .etna-explore__rail-more-icon {
  margin-right: -2px;
  transform: rotate(135deg);
}

.etna-explore__rail-more:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

@keyframes etna-rail-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(3px); }
}

.etna-explore__rail--more-right .etna-explore__rail-more--right {
  animation: etna-rail-nudge 1.6s var(--ease-editorial) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .etna-explore__rail--more-right .etna-explore__rail-more--right {
    animation: none;
  }
}

.etna-explore__swipe {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--etna-faint);
}

.etna-explore__swipe-hint {
  color: var(--etna-dim);
}

/* Desktop shows the whole rail, so the hint would be noise. */
@media (min-width: 900px) {
  .etna-explore__swipe-hint {
    display: none;
  }
}

/* --- Non-previewable accessory (grill-lap) ------------------------------
   A different KIND of card, not a disabled one. It carries no thumbnail and
   no preview affordance because there is no model — but it is a real product
   at a real price, so it must not read as unavailable. Same height, same
   chip, same selected treatment; only the preview half is absent. */
.etna-explore__acc-main--static {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 1px;
  padding: 6px 12px 7px;
  color: var(--etna-strong);
  text-align: left;
}

.etna-explore__acc-main--static .etna-explore__acc-name,
.etna-explore__acc-main--static .etna-explore__acc-state {
  grid-column: 1;
}

/* Dashed leading edge — the same visual language "Etna alap" already uses for
   "nothing is shown on the ETNA", which is exactly what this card means. */
.etna-explore__acc--flat {
  border-style: dashed;
}

.etna-explore__acc--flat.etna-explore__acc--selected {
  border-style: solid;
}

/* --- explodedLabels.css --- */
/* The overlay is the CANVAS's box, not the stage's. Label positions are
   normalized device coordinates scaled by this element's size, so it has to be
   exactly the surface the camera renders into or every anchor lands off its
   part — see the note in EtnaExplodedLabels.reposition. On desktop the two
   boxes coincide; the mobile rule below is where it matters. */
.etna-exploded {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 320ms var(--ease-editorial);
}

/* A ZERO-SIZE node parked exactly on the part, positioned by transform written
   from JS — so moving a label never triggers layout, only compositing. The
   visible row hangs off it, which is what lets the dot stay on the anchor no
   matter how long the label text is. */
.etna-exploded__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
  visibility: hidden;
}
.etna-exploded__item.is-placed {
  visibility: visible;
}

.etna-exploded__row {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* Type reads outward, away from the object, on whichever side the label was
   assigned. Both pull up by half their height so the dot sits on the anchor. */
.etna-exploded__row--right {
  left: 0;
  transform: translateY(-50%);
}

.etna-exploded__row--left {
  right: 0;
  flex-direction: row-reverse;
  transform: translateY(-50%);
}

.etna-exploded__row--left .etna-exploded__text {
  align-items: flex-end;
}

/* Precise terminator ON the component. Neutral, not a debug marker. */
.etna-exploded__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--etna-diagram-dot);
  flex: 0 0 auto;
}

/* Leader line runs from the component out to the text column — thin, neutral.
   Architectural drawing, not UI. Its length is written per label from JS (see
   EtnaExplodedLabels) so every label lands in the same margin column, however
   far its part has travelled. */
.etna-exploded__rule {
  display: block;
  width: var(--etna-rule, 40px);
  height: 1px;
  background: var(--etna-diagram-line);
  flex: 0 0 auto;
}

.etna-exploded__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Local contrast protection.
   The labels are set in the margins, but at full explode the side panels fly
   out THROUGH those margins — and the panels are near-black in both themes, so
   a theme-coloured label crossing one would otherwise be dark-on-dark in light
   mode. This is a tight one-pixel contour plus a soft falloff, i.e. an
   outlined glyph: it costs nothing, it disappears completely against the plain
   stage, and it never draws a pill, chip or card behind the type. */
.etna-exploded__label,
.etna-exploded__note {
  text-shadow:
    0 1px 0 var(--etna-diagram-halo),
    0 -1px 0 var(--etna-diagram-halo),
    1px 0 0 var(--etna-diagram-halo),
    -1px 0 0 var(--etna-diagram-halo),
    1px 1px 0 var(--etna-diagram-halo),
    -1px 1px 0 var(--etna-diagram-halo),
    1px -1px 0 var(--etna-diagram-halo),
    -1px -1px 0 var(--etna-diagram-halo),
    0 2px 0 var(--etna-diagram-halo),
    0 -2px 0 var(--etna-diagram-halo),
    2px 0 0 var(--etna-diagram-halo),
    -2px 0 0 var(--etna-diagram-halo),
    0 0 6px var(--etna-diagram-halo);
}

.etna-exploded__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--etna-diagram-text);
}

/* Surface-treatment information, not a component: shares the anchor, quieter
   voice, and deliberately no leader line of its own. */
.etna-exploded__note {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etna-diagram-note);
}

@media (max-width: 899px) {
  /* Mirrors .etna-experience__canvas exactly. The canvas takes only the top of
     the sticky stage on a phone, so the label layer must take the same box. */
  .etna-exploded {
    inset: 0 0 auto 0;
    height: 68svh;
  }

  .etna-exploded__label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .etna-exploded__note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-exploded {
    transition: none;
  }
}

/* --- film.css --- */
.etna-film {
  position: relative;
  background: var(--etna-bg);
  padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--etna-hairline);
}

.etna-film__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 400px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.etna-film__text {
  max-width: 34ch;
}

.etna-film__line {
  margin: 10px 0 0;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--etna-text);
}

.etna-film__note {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--etna-muted);
}

.etna-film__frame {
  position: relative;
  width: 100%;
  padding: clamp(8px, 1vw, 14px);
  border-radius: 4px;
  background: var(--etna-film-frame);
}

.etna-film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: transparent;
}

.etna-film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
}

.etna-film__play-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nivo-yellow);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease;
  position: relative;
}

.etna-film__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--nivo-yellow-ink);
}

.etna-film__play:hover .etna-film__play-icon,
.etna-film__play:focus-visible .etna-film__play-icon {
  transform: scale(1.06);
}

.etna-film__play:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  .etna-film__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    justify-items: center;
    text-align: center;
  }

  .etna-film__text {
    max-width: 40ch;
  }

  .etna-film__frame {
    width: min(100%, 400px);
  }

  .etna-film__play-icon {
    width: 48px;
    height: 48px;
  }
}

/* --- uses.css --- */
.etna-uses {
  background: var(--etna-bg);
  padding: clamp(64px, 10vw, 110px) 0;
}

.etna-uses__intro {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 560px;
}

.etna-uses__title {
  margin: 16px 0 12px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--etna-text);
}

.etna-uses__lead {
  margin: 0;
  font-size: 17px;
  color: var(--etna-muted);
}

.etna-uses__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--etna-radius);
  background: var(--etna-panel);
}

.etna-uses__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-editorial);
}

.etna-uses__tile:hover img {
  transform: scale(1.02);
}

.etna-uses__tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* On the photo, over a dark scrim — stays light in both themes. */
  color: var(--etna-on-photo);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 55%);
}

.etna-uses__name {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
}

.etna-uses__body {
  font-size: 13px;
  color: var(--etna-on-photo-soft);
}

/* Desktop bento — an architectural composition, not equal cards:
   TŰZRAKÓ tall/large on the left, GRILL wide top-right, TÁRCSA + BOGRÁCS as
   two medium squares beneath it, ASZTAL a two-row-tall strip along the bottom. */
@media (min-width: 900px) {
  .etna-uses__bento {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: clamp(220px, 24vw, 340px) clamp(160px, 17vw, 220px) clamp(160px, 17vw, 220px) clamp(160px, 17vw, 220px);
    gap: 10px;
    padding: 0 var(--gutter);
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .etna-uses__tile--tuzrako {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .etna-uses__tile--grill {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .etna-uses__tile--tarcsa {
    grid-column: 2;
    grid-row: 2;
  }

  .etna-uses__tile--bogracs {
    grid-column: 3;
    grid-row: 2;
  }

  .etna-uses__tile--asztal {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
  }

  .etna-uses__tile--asztal img {
    object-position: center 62%;
  }
}

/* Mobile — native horizontal swipe, never a compressed vertical stack. Next
   slide stays partially visible so the swipe affordance is obvious. */
@media (max-width: 899px) {
  .etna-uses__bento {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }

  .etna-uses__bento::-webkit-scrollbar {
    display: none;
  }

  .etna-uses__tile {
    flex: 0 0 auto;
    width: clamp(260px, 82vw, 380px);
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }
}

/* --- moments.css --- */
.etna-moments {
  background: var(--etna-bg);
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 104px);
}

.etna-moments__intro {
  max-width: 640px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.etna-moments__title {
  margin: 16px 0 0;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.18;
  font-weight: 600;
  color: var(--etna-text);
}

/* --- The wall ------------------------------------------------------------
   Four vertical worlds across the full viewport width. Photography carries
   the section; the type sits directly on it. */
.etna-moments__wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  background: var(--etna-bg);
}

.etna-moments__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Only the flex basis animates on hover, so the browser stays on a single
     cheap layout property per panel. */
  transition: flex-grow 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.etna-moments__panel figure {
  position: relative;
  margin: 0;
  height: clamp(520px, 82vh, 900px);
  overflow: hidden;
  background: var(--etna-panel);
  outline: none;
}

.etna-moments__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 520ms ease;
  filter: brightness(0.82) saturate(0.96);
}

/* Legibility floor for the overlay type — a gradient, never a filled box. */
.etna-moments__panel figure::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(9, 10, 8, 0.86));
  pointer-events: none;
}

.etna-moments__panel figcaption {
  position: absolute;
  left: clamp(20px, 1.8vw, 34px);
  right: clamp(20px, 1.8vw, 34px);
  bottom: clamp(24px, 2.6vw, 44px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* On the photo, over the gradient below — light in both themes. */
  color: var(--etna-on-photo);
}

.etna-moments__index {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--etna-on-photo-muted);
}

.etna-moments__headline {
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.22;
  font-weight: 600;
  text-wrap: balance;
}

/* The one extra line: hidden until the panel is hovered or focused. */
.etna-moments__detail {
  font-size: 14px;
  line-height: 1.45;
  color: var(--etna-on-photo-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (min-width: 900px) {
  .etna-moments__panel:hover,
  .etna-moments__panel:focus-within {
    flex-grow: 1.5;
  }

  .etna-moments__panel:hover img,
  .etna-moments__panel:focus-within img {
    transform: scale(1.015);
    filter: brightness(0.95) saturate(1);
  }

  .etna-moments__panel:hover .etna-moments__detail,
  .etna-moments__panel:focus-within .etna-moments__detail {
    opacity: 1;
    transform: none;
  }

  .etna-moments__panel:focus-within figure {
    box-shadow: inset 0 0 0 2px var(--etna-on-photo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-moments__panel,
  .etna-moments__panel img,
  .etna-moments__detail {
    transition: none;
  }
}

/* --- Mobile: native horizontal swipe, next slide peeking ---------------- */
@media (max-width: 899px) {
  .etna-moments__wall {
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gutter);
  }

  .etna-moments__wall::-webkit-scrollbar {
    display: none;
  }

  .etna-moments__panel {
    flex: 0 0 auto;
    width: 84vw;
    max-width: 420px;
    scroll-snap-align: start;
    transition: none;
  }

  .etna-moments__panel figure {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* No hover on touch — the supporting line simply reads as part of the
     slide. */
  .etna-moments__detail {
    opacity: 1;
    transform: none;
  }
}

/* --- modeSwitcher.css --- */
.etna-mode-switcher {
  background: var(--etna-bg-soft);
  padding: clamp(64px, 10vw, 110px) 0;
}

.etna-mode-switcher__title {
  margin: 16px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  color: var(--etna-text);
}

.etna-mode-switcher__stage {
  margin-top: clamp(28px, 4.5vw, 48px);
  padding: 0 var(--gutter);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.etna-mode-switcher__visual {
  position: relative;
  border-radius: var(--etna-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--etna-panel);
}

.etna-mode-switcher__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-med) var(--ease-editorial);
}

.etna-mode-switcher__caption {
  position: absolute;
  left: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  margin: 0;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  /* On the photograph, behind a dark pill — light in both themes. */
  color: var(--etna-on-photo);
  background: rgba(13, 14, 13, 0.6);
  border-radius: 999px;
}

/* Underline nav, integrated into the ETNA visual system — not pill UI. */
.etna-mode-switcher__tabs {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 24px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--etna-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.etna-mode-switcher__tabs::-webkit-scrollbar {
  display: none;
}

.etna-mode-switcher__tab {
  flex: 0 0 auto;
  position: relative;
  padding: 12px 2px 14px;
  background: transparent;
  border: none;
  color: var(--etna-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-editorial);
}

.etna-mode-switcher__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--nivo-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-editorial);
}

.etna-mode-switcher__tab:hover {
  color: var(--etna-text);
}

.etna-mode-switcher__tab--active {
  color: var(--etna-text);
}

.etna-mode-switcher__tab--active::after {
  transform: scaleX(1);
}

.etna-gallery__wall {
  list-style: none;
  margin: clamp(28px, 4.5vw, 48px) 0 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--etna-bg);
}

.etna-gallery__wall::-webkit-scrollbar {
  display: none;
}

.etna-gallery__panel {
  flex: 0 0 auto;
  width: min(72vw, 560px);
  min-width: 0;
  scroll-snap-align: start;
}

.etna-gallery__panel figure {
  position: relative;
  margin: 0;
  height: clamp(360px, 52vh, 560px);
  overflow: hidden;
  background: var(--etna-panel);
}

.etna-gallery__panel--vertical figure {
  height: clamp(440px, 68vh, 720px);
}

.etna-gallery__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88) saturate(0.96);
}

.etna-gallery__panel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 8, 0.62));
  color: var(--etna-on-photo);
}

.etna-gallery__title {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.etna-gallery__note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--etna-on-photo-muted);
}

@media (max-width: 899px) {
  .etna-gallery__panel {
    width: 84vw;
    max-width: 420px;
  }

  .etna-gallery__panel figure,
  .etna-gallery__panel--vertical figure {
    height: 64vh;
  }
}

/* --- Mobile station stepper --------------------------------------------- */
.etna-story-steps {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--etna-ring);
  background: var(--etna-halo);
  backdrop-filter: blur(6px);
}

.etna-story-steps[hidden] {
  display: none;
}

.etna-story-steps__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--etna-on-stage);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.etna-story-steps__btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.etna-story-steps__btn:not(:disabled):active {
  background: var(--etna-tint);
}

.etna-story-steps__count {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--etna-on-stage-faint);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .etna-story-steps {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-story-steps {
    backdrop-filter: none;
  }
}

/* --- accessories.css --- */
.etna-accessories {
  background: var(--etna-bg-soft);
  padding: clamp(64px, 10vw, 120px) 0;
}

.etna-accessories__head {
  display: grid;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.etna-accessories__title {
  margin: 16px 0 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--etna-text);
}

.etna-accessories__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--etna-muted);
  max-width: 46ch;
}

.etna-accessories__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--etna-border);
}

.etna-accessories__row {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  padding: clamp(16px, 2vw, 22px) clamp(12px, 2.8vw, 28px);
  border: 0;
  border-bottom: 1px solid var(--etna-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 260ms var(--ease-editorial);
}

.etna-accessories__row:hover {
  background: var(--etna-tint);
}

.etna-accessories__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--etna-faint);
}

.etna-accessories__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.etna-accessories__name {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--etna-text);
}

.etna-accessories__dim {
  font-size: 12px;
  color: var(--etna-muted);
}

.etna-accessories__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--etna-text);
  white-space: nowrap;
}

.etna-accessories__state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etna-faint);
  white-space: nowrap;
  transition: color 260ms var(--ease-editorial);
}

.etna-accessories__row:hover .etna-accessories__state {
  color: var(--etna-text);
}

.etna-accessories__row--selected .etna-accessories__state {
  color: var(--nivo-yellow);
}

.etna-accessories__row--selected .etna-accessories__index {
  color: var(--nivo-yellow);
}

.etna-accessories__all {
  margin-top: clamp(28px, 4vw, 44px);
  margin-left: clamp(12px, 2.8vw, 28px);
  margin-right: clamp(12px, 2.8vw, 28px);
  padding: 0 0 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--etna-border);
  color: var(--etna-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 260ms var(--ease-editorial);
}

.etna-accessories__all:hover {
  border-color: var(--nivo-yellow);
}

@media (min-width: 900px) {
  .etna-accessories__head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

@media (max-width: 599px) {
  /* Price and state stack under the name so nothing truncates on a phone. */
  .etna-accessories__row {
    grid-template-columns: auto auto 1fr;
    row-gap: 8px;
  }
  .etna-accessories__price {
    grid-column: 3;
    justify-self: start;
  }
  .etna-accessories__state {
    grid-column: 3;
    justify-self: start;
  }
}

/* Passive 3D product visual inside each accessory row. Sized in the row, not
   by the preview component, so a row without a GLB collapses cleanly. */
.etna-accessories__thumb {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--etna-bg);
  align-self: center;
  flex-shrink: 0;
}

.etna-accessories__preview {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* --- accessoryPreview.css --- */
/* Passive product visual — never an interactive surface. */
.etna-accessory-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--etna-bg-soft);
  /* The canvas must not swallow clicks meant for the selector button that
     wraps it, and must not become a focus stop. */
  pointer-events: none;
  user-select: none;
}

.etna-accessory-preview canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  touch-action: auto;
}

.etna-accessory-preview--thumbnail {
  aspect-ratio: 1 / 1;
}

.etna-accessory-preview--detail {
  aspect-ratio: 4 / 3;
}

/* --- specs.css --- */
.etna-specs {
  background: var(--etna-bg);
  color: var(--etna-text);
  padding: clamp(64px, 9vw, 110px) 0;
}

.etna-specs__head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.etna-specs__title {
  margin: 16px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--etna-text);
}

.etna-specs__figure {
  margin: 0 auto clamp(36px, 5vw, 64px);
}

.etna-specs__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--etna-panel);
}

.etna-specs__figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--etna-muted);
}

.etna-specs__groups {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
}

.etna-specs__group-heading {
  margin: 0;
}

.etna-specs__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--etna-border);
  color: var(--etna-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.etna-specs__chevron {
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 300ms var(--ease-editorial);
  opacity: 0.6;
}

.etna-specs__group--open .etna-specs__chevron {
  transform: rotate(-135deg);
}

.etna-specs__list {
  margin: 0;
}

.etna-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--etna-border);
  font-size: 14px;
}

.etna-specs__row dt {
  color: var(--etna-muted);
  font-weight: 500;
}

.etna-specs__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--etna-text);
}

@media (min-width: 900px) {
  /* Desktop: a scannable two-column table. Nothing is hidden, so the
     accordion toggle degrades into a plain section label. */
  .etna-specs__groups {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .etna-specs__toggle {
    cursor: default;
    pointer-events: none;
  }

  .etna-specs__chevron {
    display: none;
  }

  .etna-specs__list {
    display: block;
  }
}

@media (max-width: 899px) {
  /* Mobile: real accordion. */
  .etna-specs__list {
    display: none;
  }

  .etna-specs__group--open .etna-specs__list {
    display: block;
  }
}

/* --- purchase.css --- */
.etna-purchase {
  background: var(--etna-bg-soft);
  color: var(--etna-text);
  padding: clamp(64px, 10vh, 120px) 0;
}

.etna-purchase__heading {
  margin: 16px 0 clamp(32px, 5vw, 56px);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--etna-text);
}

.etna-purchase__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

/* Attention cue set when the floating CTA hands over — says "confirm this",
   never "you did something wrong". Fades on its own. */
.etna-purchase__field--confirm {
  animation: etna-confirm 2.6s var(--ease-editorial);
}

@keyframes etna-confirm {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 176, 11, 0);
  }
  12%,
  62% {
    box-shadow: -14px 0 0 0 var(--nivo-yellow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etna-purchase__field--confirm {
    animation: none;
    box-shadow: -14px 0 0 0 var(--nivo-yellow);
  }
}

.etna-purchase__field-value {
  float: right;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--etna-text);
}


.etna-purchase__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  margin: 10px 0 32px;
  color: var(--etna-text);
}

.etna-purchase__field {
  margin-bottom: 28px;
}

.etna-purchase__field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--etna-muted);
  margin-bottom: 10px;
}

.etna-accessory-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etna-accessory {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--etna-border);
  font-size: 14px;
  cursor: pointer;
  color: var(--etna-text);
}

.etna-accessory input {
  accent-color: var(--nivo-yellow);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.etna-accessory__name {
  flex: 1;
}

.etna-accessory__price {
  color: var(--etna-muted);
  white-space: nowrap;
}

.etna-purchase__price-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 0;
  border-top: 1px solid var(--etna-border);
  margin-bottom: 24px;
}

.etna-purchase__price {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--etna-text);
}

.etna-purchase__price-net {
  display: block;
  font-size: 13px;
  color: var(--etna-muted);
  margin-top: 2px;
}

.etna-purchase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.etna-purchase__cta {
  flex: 1;
  min-width: 200px;
}

.etna-purchase__disclaimer {
  font-size: 12px;
  color: var(--etna-muted);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 900px) {
  .etna-purchase__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.etna-purchase__head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* Summary panel — the calm decision surface. */
.etna-summary {
  background: var(--etna-panel);
  border: 1px solid var(--etna-border);
  border-radius: var(--etna-radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
}

.etna-summary__eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--etna-muted);
}

.etna-summary__rows,
.etna-summary__totals {
  margin: 0;
}

.etna-summary__totals {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--etna-border);
}

.etna-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 9px 0;
  font-size: 14px;
}

.etna-summary__row dt {
  color: var(--etna-muted);
  flex: 0 0 auto;
}

.etna-summary__row dd {
  margin: 0;
  text-align: right;
  color: var(--etna-text);
  font-weight: 500;
}

.etna-summary__row--total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--etna-border);
}

.etna-summary__row--total dt {
  color: var(--etna-text);
  font-weight: 600;
}

.etna-summary__row--total dd {
  font-size: 22px;
  font-weight: 700;
}

.etna-summary__muted {
  color: var(--etna-muted);
  font-weight: 400;
}

.etna-summary__net {
  margin: 2px 0 20px;
  text-align: right;
  font-size: 12px;
  color: var(--etna-muted);
}

.etna-summary__note {
  margin: 8px 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--etna-muted);
}

.etna-summary__cta {
  width: 100%;
}

/* .btn.` prefix on purpose: plain `.etna-summary__secondary` ties with
   `.btn-outline` on specificity and lost the cascade. */
.btn.etna-summary__secondary {
  width: 100%;
  margin-top: 10px;
  /* .btn-outline is authored for the hero, where it sits on a photograph and
     must be white. Inside the themed page it has to follow the theme, or it
     disappears on the light ground. */
  color: var(--etna-text);
  border-color: var(--etna-line-strong);
}

.btn.etna-summary__secondary:hover {
  color: var(--etna-text-strong);
  border-color: var(--etna-text-strong);
  background: var(--etna-tint);
}

.etna-summary__disclaimer {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--etna-faint);
}

@media (min-width: 900px) {
  .etna-purchase__grid {
    grid-template-columns: 1fr 380px;
    gap: clamp(32px, 4vw, 64px);
  }

  /* Keeps the running total beside the choices being made. */
  .etna-summary {
    position: sticky;
    top: 32px;
  }
}

.etna-summary__accessories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.etna-summary__accessories li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.etna-summary__accessory-price {
  font-size: 12px;
  color: var(--etna-muted);
  white-space: nowrap;
}

.etna-summary__cat {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--etna-ring);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--etna-muted);
  vertical-align: 1px;
  white-space: nowrap;
}

.etna-summary__cat--premium {
  border-color: color-mix(in srgb, var(--nivo-yellow) 55%, transparent);
  color: var(--nivo-yellow);
}

#etna-experience[data-theme="light"] .etna-summary__cat--premium {
  color: #8a5a00;
  border-color: color-mix(in srgb, var(--nivo-yellow) 75%, transparent);
}

.etna-summary__delta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--etna-muted);
  white-space: nowrap;
}

.etna-gift-plate {
  margin: 16px 0 4px;
  padding: 14px 16px 15px;
  border-radius: var(--etna-radius);
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
}

.etna-gift-plate__eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nivo-yellow-ink) 72%, transparent);
}

.etna-gift-plate__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.etna-gift-plate__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.etna-gift-plate__btn {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.etna-gift-plate__btn:hover .etna-gift-plate__name,
.etna-gift-plate__btn:focus-visible .etna-gift-plate__name {
  text-decoration: underline;
}

.etna-gift-plate__btn:focus-visible {
  outline: 2px solid var(--nivo-yellow-ink);
  outline-offset: 3px;
}

.etna-gift-plate__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.etna-gift-plate__note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
  color: color-mix(in srgb, var(--nivo-yellow-ink) 68%, transparent);
}

/* --- selectors.css --- */
.etna-size-selector {
  display: flex;
  gap: 10px;
}

.etna-size-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--etna-border);
  text-decoration: none;
  color: var(--etna-text);
  transition: border-color var(--dur-fast) var(--ease-editorial), background var(--dur-fast) var(--ease-editorial);
}

.etna-size-option:hover {
  border-color: var(--etna-line-strong);
}

.etna-size-option--active {
  border-color: var(--nivo-yellow);
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
}

.etna-size-option__label {
  font-weight: 600;
  font-size: 14px;
}

.etna-size-option__dims {
  font-size: 11px;
  opacity: 0.7;
}

.etna-color-selector__current {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--etna-text);
}

.etna-color-selector__ral {
  font-size: 12px;
  font-weight: 400;
  color: var(--etna-muted);
}

.etna-color-selector__group {
  margin-top: 14px;
}

.etna-color-selector__group:first-of-type {
  margin-top: 0;
}

.etna-color-selector__group-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etna-muted);
}

.etna-color-selector__group--premium .etna-color-selector__group-label {
  color: var(--nivo-yellow);
}

#etna-experience[data-theme="light"] .etna-color-selector__group--premium .etna-color-selector__group-label {
  color: #8a5a00;
}

.etna-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.etna-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--etna-ring);
  transition: transform var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
}

.etna-swatch:hover {
  transform: scale(1.08);
}

.etna-swatch--active {
  border-color: var(--etna-bg-soft);
  box-shadow: inset 0 0 0 1px var(--etna-ring), 0 0 0 3px var(--etna-bg-soft), 0 0 0 4px var(--nivo-yellow);
}

/* --- floatingCta.css --- */
.etna-cta {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px 14px 12px;
  border-radius: 14px;
  /* Was blur(16px) over a continuously-rendering canvas — real cost while
     visible (measured ~10% of frame time). An opaque background reads the
     same and is compositor-cheap. */
  background: var(--etna-scrim);
  border: 1px solid var(--etna-hairline);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 500ms var(--ease-editorial), transform 500ms var(--ease-editorial);
}

.etna-cta--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.etna-cta__info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.etna-cta__thumb {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.etna-cta__thumb[hidden] {
  display: none;
}

.etna-cta__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.etna-cta__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.etna-cta__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--etna-text-strong);
}

.etna-cta__color {
  font-size: 11px;
  color: var(--etna-dim);
}

.etna-cta__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--etna-text-strong);
  margin-top: 2px;
}

.etna-cta__button {
  padding: 12px 22px;
  font-size: 13px;
}

@media (max-width: 899px) {
  /* Thumb-friendly bottom bar, clear of the colour strip and safe areas. */
  .etna-cta {
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 12px 16px 12px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 14px;
    transform: translateY(100%);
  }

  .etna-cta--visible {
    transform: translateY(0);
  }

  .etna-cta__info {
    flex: 1;
    min-width: 0;
  }

  .etna-cta__thumb {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .etna-cta__meta {
    flex: 1;
    min-width: 0;
  }

  .etna-cta__button {
    flex: 0 0 auto;
    padding: 14px 22px;
  }
}

/* --- lifestyle.css --- */
.etna-lifestyle {
  background: var(--etna-bg);
  color: var(--etna-text);
  padding: clamp(64px, 10vh, 110px) 0 0;
  border-top: 1px solid var(--etna-hairline);
}

.etna-lifestyle__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 16px 0 48px;
  color: var(--etna-text);
}

.etna-lifestyle__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 899px) {
  .etna-lifestyle__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gutter) 4px;
  }

  .etna-lifestyle__grid::-webkit-scrollbar {
    display: none;
  }

  .etna-lifestyle__item {
    flex: 0 0 auto;
    width: 84vw;
    max-width: 420px;
    scroll-snap-align: start;
  }
}

.etna-lifestyle__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  color: var(--etna-on-photo);
  display: block;
}

.etna-lifestyle__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-editorial), filter var(--dur-slow) var(--ease-editorial);
  filter: brightness(0.72);
}

.etna-lifestyle__item:hover img {
  transform: scale(1.04);
  filter: brightness(0.85);
}

.etna-lifestyle__label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--etna-on-photo);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* --- summaryPreview.css --- */
/* Locked product visual at the top of the summary card. Never interactive.
   Height is a fixed plate — flex siblings in .etna-summary must not crush it. */
.etna-summary-preview {
  position: relative;
  width: 100%;
  flex: 0 0 220px;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: white;
}

.etna-summary-preview canvas,
.etna-summary-preview__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.etna-summary-preview__image {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 900px) {
  .etna-summary-preview {
    flex-basis: 248px;
    height: 248px;
    min-height: 248px;
    max-height: 248px;
  }
}

@media (max-width: 899px) {
  .etna-summary-preview {
    flex-basis: 200px;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
  }
  .etna-accessories__thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
  }
  .etna-accessories__preview {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }
}


body.etna-xl-page #etna-experience {
  width: 100%;
}
body.etna-xl-page .etna-cta {
  z-index: 1015;
}
body.etna-xl-page .nivo-mobile-sticky-bar {
  display: none !important;
}
@media (max-width: 767.98px) {
  body.etna-xl-page .etna-cta {
    bottom: env(safe-area-inset-bottom, 0px);
    transition: opacity 500ms var(--ease-editorial), transform 500ms var(--ease-editorial), bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.etna-exploded--static {
  pointer-events: none;
}

#etna-experience .etna-uses__intro, #etna-experience .etna-moments__intro, #etna-experience .etna-accessories__head {
  padding-bottom: 20px;
}

/* --- Explore colour groups + gifts -------------------------------------- */
.etna-explore__colors {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(92vw, 700px);
}

.etna-explore__group {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 8px;
}

.etna-explore__group-label {
  margin: 0;
  text-align: right;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--etna-faint);
}

.etna-explore__group--premium .etna-explore__group-label {
  color: var(--nivo-yellow);
}

.etna-explore__group .etna-explore__rail {
  min-width: 0;
}

.etna-explore__group .etna-explore__track--swatches {
  max-width: none;
  padding: 0 2px;
}

.etna-explore__gift {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--nivo-yellow) 60%, transparent);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nivo-yellow);
  white-space: nowrap;
}

.etna-explore__acc-state--gift {
  color: var(--nivo-yellow);
  font-weight: 700;
}

.etna-explore__gifts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px auto 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
}

.etna-explore__gifts[hidden] {
  display: none !important;
}

.etna-explore__gift-badge {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: fit-content;
  max-width: 100%;
}

.etna-explore__gifts-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nivo-yellow-ink) 70%, transparent);
  flex: 0 0 auto;
}

.etna-explore__gift-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  min-width: 0;
}

.etna-explore__gift-badge:focus-visible {
  outline: 2px solid var(--nivo-yellow-ink);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  .etna-explore__colors {
    gap: 8px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    padding: 0 12px 4px;
  }

  .etna-explore__group {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .etna-explore__group-label {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }

  .etna-explore__colors .etna-swatch-dot {
    width: 34px;
    height: 34px;
  }

  .etna-explore__colors .etna-swatch-dot__fill {
    width: 21px;
    height: 21px;
  }

  .etna-explore__group .etna-explore__rail {
    width: 100%;
    max-width: 100%;
  }

  .etna-explore__group .etna-explore__track--swatches {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* --- YouTube facade ----------------------------------------------------- */
.etna-video {
  position: relative;
  aspect-ratio: var(--etna-video-ratio, 16 / 9);
  background: #0d0d0d;
  overflow: hidden;
}

.etna-video__frame,
.etna-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.etna-video__frame {
  max-width: none;
}

.etna-video__play {
  padding: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.etna-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-editorial);
}

.etna-video__play:hover .etna-video__poster {
  transform: scale(1.02);
}

.etna-video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: var(--nivo-yellow);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32);
  transition: transform 200ms var(--ease-editorial);
}

.etna-video__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--nivo-yellow-ink);
}

.etna-video__play:hover .etna-video__icon,
.etna-video__play:focus-visible .etna-video__icon {
  transform: scale(1.07);
}

.etna-video__play:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: -4px;
}

@media (max-width: 899px) {
  .etna-video__icon {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
  }
}

/* --- Accessory bento ---------------------------------------------------- */
.etna-bento {
  position: relative;
  background: var(--etna-bg);
  padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
}

.etna-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

.etna-bento__cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--etna-panel);
}

.etna-bento__cell--type {
  grid-column: span 4;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 56px) clamp(24px, 3vw, 56px) clamp(20px, 3vw, 56px) var(--gutter);
}

.etna-bento__title {
  margin: 10px 0 0;
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--etna-text);
}

.etna-bento__lead {
  margin: 16px 0 0;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--etna-muted);
}

.etna-bento__cell--film {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
}

.etna-bento__cell--film.etna-video,
.etna-bento__film {
  aspect-ratio: 16 / 9;
  flex: 1 1 auto;
  min-height: 0;
}

.etna-bento__filmcap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 28px);
  background: #0d0d0d;
  text-align: left;
  flex: 0 0 auto;
}

.etna-bento__filmtitle {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.etna-bento__filmnote {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.etna-bento__cell--object {
  grid-column: span 3;
  min-height: clamp(340px, 46vh, 540px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(120% 86% at 50% 32%, rgba(255, 255, 255, 0.085), transparent 64%),
    #141414;
  --etna-cell-ink: #f4f2ee;
  --etna-cell-muted: rgba(244, 242, 238, 0.62);
}

.etna-bento__cell--object .etna-bento__name {
  color: var(--etna-cell-ink);
}

.etna-bento__cell--object .etna-bento__idea,
.etna-bento__cell--object .etna-bento__watch,
.etna-bento__cell--object .etna-bento__add,
.etna-bento__cell--object .etna-bento__dim {
  color: var(--etna-cell-muted);
}

.etna-bento__cell--object .etna-bento__price {
  color: var(--etna-cell-ink);
}

.etna-bento__cell--object .etna-bento__watch:hover,
.etna-bento__cell--object .etna-bento__add:hover {
  color: var(--etna-cell-ink);
  border-bottom-color: rgba(244, 242, 238, 0.34);
}

.etna-bento__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: clamp(14px, 2vw, 30px) clamp(14px, 2vw, 30px) 34%;
}

.etna-bento__dim {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding-bottom: 22%;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--etna-muted);
  font-variant-numeric: tabular-nums;
}

.etna-bento__watch {
  position: absolute;
  top: clamp(14px, 1.6vw, 22px);
  left: clamp(14px, 1.6vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--etna-cell-muted, var(--etna-muted));
  transition: color 200ms var(--ease-editorial);
}

.etna-bento__watch:hover {
  color: var(--etna-cell-ink, var(--etna-text));
}

.etna-bento__watchdot {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nivo-yellow);
  transition: transform 160ms ease;
}

.etna-bento__watchdot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent var(--nivo-yellow-ink);
}

.etna-bento__watch:hover .etna-bento__watchdot,
.etna-bento__watch:focus-visible .etna-bento__watchdot {
  transform: scale(1.08);
}

.etna-bento__watch:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

.etna-bento__inner {
  position: absolute;
  inset: 0;
}

.etna-bento__media {
  position: absolute;
  inset: 0;
}

.etna-bento__meta {
  position: relative;
  padding: clamp(14px, 1.6vw, 24px);
  z-index: 1;
}

.etna-bento__name {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--etna-text);
}

.etna-bento__idea {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--etna-muted);
}

.etna-bento__gift {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nivo-yellow);
}

.etna-bento__buy {
  margin: 14px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.etna-bento__price {
  font-weight: 600;
  color: var(--etna-text);
  font-variant-numeric: tabular-nums;
}

.etna-bento__add {
  border: 0;
  background: none;
  padding: 0 0 2px;
  cursor: pointer;
  color: var(--etna-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-editorial), border-color 180ms var(--ease-editorial);
}

.etna-bento__add:hover {
  color: var(--etna-text);
  border-bottom-color: var(--etna-hairline);
}

.etna-bento__add--on {
  color: var(--nivo-yellow);
  border-bottom-color: var(--nivo-yellow);
}

.etna-bento__add:focus-visible,
.etna-bento__all:focus-visible,
.etna-bento__watch:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 3px;
}

/* Object cells stay a dark plate in both themes. These rules sit after the
   generic type colors so light-mode --etna-text / --etna-muted cannot wash
   the captions into the charcoal ground. */
.etna-bento__cell--object .etna-bento__name,
.etna-bento__cell--object .etna-bento__price {
  color: #f4f2ee;
}

.etna-bento__cell--object .etna-bento__idea,
.etna-bento__cell--object .etna-bento__watch,
.etna-bento__cell--object .etna-bento__add,
.etna-bento__cell--object .etna-bento__dim {
  color: rgba(244, 242, 238, 0.62);
}

.etna-bento__cell--object .etna-bento__watch:hover,
.etna-bento__cell--object .etna-bento__add:hover {
  color: #f4f2ee;
  border-bottom-color: rgba(244, 242, 238, 0.34);
}

.etna-bento__cell--object .etna-bento__add--on {
  color: var(--nivo-yellow);
  border-bottom-color: var(--nivo-yellow);
}

/* Light theme: the object row becomes a warm studio plate. Shop photos are
   light cutouts — a charcoal cell on the cream page reads as leftover dark
   mode, and the captions fight the theme tokens. Film stays dark. */
#etna-experience[data-theme="light"] .etna-bento__cell--object {
  background:
    radial-gradient(120% 86% at 50% 32%, rgba(255, 255, 255, 0.72), transparent 64%),
    #efece5;
  --etna-cell-ink: #17181a;
  --etna-cell-muted: rgba(23, 24, 26, 0.62);
}

#etna-experience[data-theme="light"] .etna-bento__cell--object .etna-bento__name,
#etna-experience[data-theme="light"] .etna-bento__cell--object .etna-bento__price {
  color: #17181a;
}

#etna-experience[data-theme="light"] .etna-bento__cell--object .etna-bento__idea,
#etna-experience[data-theme="light"] .etna-bento__cell--object .etna-bento__dim,
#etna-experience[data-theme="light"] .etna-bento__cell--object button.etna-bento__watch,
#etna-experience[data-theme="light"] .etna-bento__cell--object button.etna-bento__add {
  color: rgba(23, 24, 26, 0.62);
  background: transparent;
}

#etna-experience[data-theme="light"] .etna-bento__cell--object button.etna-bento__watch:hover,
#etna-experience[data-theme="light"] .etna-bento__cell--object button.etna-bento__add:hover {
  color: #17181a;
  border-bottom-color: rgba(23, 24, 26, 0.28);
}

#etna-experience[data-theme="light"] .etna-bento__cell--object button.etna-bento__add--on {
  color: var(--nivo-yellow);
  border-bottom-color: var(--nivo-yellow);
}

.etna-bento__still--poster {
  object-fit: cover;
  padding: 0 0 34%;
}

.etna-bento__cell--grilllap {
  grid-column: span 3;
}

.etna-bento__cell--life {
  grid-column: span 7;
  margin: 0;
  min-height: clamp(320px, 42vh, 500px);
}

.etna-bento__cell--life img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.etna-bento__after {
  margin-top: 26px;
  display: flex;
  justify-content: flex-end;
}

.etna-bento__all {
  border: 0;
  background: none;
  color: var(--etna-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid var(--nivo-yellow);
  padding-bottom: 3px;
}

@media (max-width: 1023px) and (min-width: 900px) {
  .etna-bento__cell--type {
    grid-column: span 12;
    padding: 0 var(--gutter) 20px;
  }
  .etna-bento__cell--film {
    grid-column: span 12;
  }
  .etna-bento__cell--object,
  .etna-bento__cell--grilllap {
    grid-column: span 6;
  }
  .etna-bento__cell--life {
    grid-column: span 12;
  }
}

@media (max-width: 899px) {
  .etna-bento__grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gutter);
  }

  .etna-bento__grid::-webkit-scrollbar {
    display: none;
  }

  .etna-bento__cell {
    flex: 0 0 85vw;
    scroll-snap-align: start;
    min-height: 64vh;
  }

  .etna-bento__cell--type {
    flex-basis: 78vw;
    min-height: 0;
    padding: 16px 20px 16px 20px;
    justify-content: flex-end;
  }

  .etna-bento__cell--film {
    min-height: 0;
  }

  .etna-bento__cell--life {
    min-height: 64vh;
  }

  .etna-bento__still {
    padding-bottom: 38%;
  }

  .etna-bento__after {
    margin-top: 20px;
    justify-content: flex-start;
  }
}

/* --- Owner stories ------------------------------------------------------ */
.etna-stories {
  background: var(--etna-bg);
  padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--etna-hairline);
}

.etna-stories__title {
  margin: 8px 0 clamp(32px, 4vw, 56px);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--etna-text);
  max-width: 20ch;
}

.etna-stories__lead {
  margin: 0 0 clamp(32px, 5vw, 64px);
  max-width: 46ch;
}

.etna-stories__lead blockquote {
  margin: 0;
}

.etna-stories__lead blockquote p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--etna-text);
}

.etna-stories__lead figcaption,
.etna-stories__by {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--etna-muted);
}

.etna-stories__rest {
  list-style: none;
  margin: 0 0 clamp(32px, 5vw, 64px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}

.etna-stories__rest blockquote {
  margin: 0;
}

.etna-stories__rest blockquote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--etna-text);
}

.etna-stories__films {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 var(--gutter);
}

.etna-stories__film {
  background: #0d0d0d;
}

.etna-stories__film--lead {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.etna-stories__others {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.etna-stories__cap {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.etna-stories__captitle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.etna-stories__film--lead .etna-stories__captitle {
  font-size: clamp(20px, 2vw, 28px);
}

.etna-stories__capnote {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 899px) {
  .etna-stories__rest,
  .etna-stories__others {
    grid-template-columns: minmax(0, 1fr);
  }

  .etna-stories__films {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .etna-stories__films::-webkit-scrollbar {
    display: none;
  }

  .etna-stories__film,
  .etna-stories__film--lead {
    flex: 0 0 auto;
    width: 84vw;
    max-width: 420px;
    grid-column: auto;
  }
}

/* --- Support ------------------------------------------------------------ */
.etna-support {
  background: var(--etna-bg);
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--etna-hairline);
}

.etna-support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.etna-support__note {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--etna-muted);
}

.etna-support__video {
  background: #0d0d0d;
}

.etna-support__title {
  margin: 8px 0 clamp(28px, 4vw, 48px);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--etna-text);
}

.etna-support__list {
  margin: 0;
}

.etna-support__row {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding: 18px 0;
  border-top: 1px solid var(--etna-hairline);
}

.etna-support__row dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--etna-text);
}

.etna-support__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--etna-muted);
}

.etna-support__link {
  display: inline-block;
  margin-left: 10px;
  color: var(--etna-text);
  border-bottom: 1px solid var(--nivo-yellow);
  text-decoration: none;
}

@media (max-width: 899px) {
  .etna-support__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .etna-support__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

body.etna-gift-modal-open {
  overflow: hidden;
}

.etna-gift-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.etna-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.etna-video-lightbox[hidden] {
  display: none;
}

.etna-video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.92);
}

.etna-video-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  background: #000;
}

.etna-video-lightbox__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.etna-video-lightbox__close:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

.etna-video-lightbox__frame,
.etna-video-lightbox__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.etna-video-lightbox-open {
  overflow: hidden;
}

.etna-gift-modal[hidden] {
  display: none;
}

.etna-gift-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
}

.etna-gift-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 12px;
  background: var(--etna-panel);
  color: var(--etna-text);
  border: 1px solid var(--etna-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.etna-gift-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--etna-bg) 80%, transparent);
  color: var(--etna-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.etna-gift-modal__close:focus-visible {
  outline: 2px solid var(--nivo-yellow);
  outline-offset: 2px;
}

.etna-gift-modal__gallery {
  position: relative;
  background: white;
}

.etna-gift-modal__gallery[hidden] {
  display: none;
}

.etna-gift-modal__image {
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  margin: 0 auto;
}

.etna-gift-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.etna-gift-modal__arrow[hidden] {
  display: none;
}

.etna-gift-modal__arrow--prev {
  left: 10px;
}

.etna-gift-modal__arrow--next {
  right: 10px;
}

.etna-gift-modal__body {
  padding: 22px 24px 24px;
}

.etna-gift-modal__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--nivo-yellow);
  color: var(--nivo-yellow-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.etna-gift-modal__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.etna-gift-modal__meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--etna-muted);
}

.etna-gift-modal__price {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.etna-gift-modal__net {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--etna-muted);
}

#etna-experience .btn.etna-gift-modal__link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--etna-text);
  border-color: var(--etna-line-strong);
}

#etna-experience .btn.etna-gift-modal__link:hover {
  color: var(--etna-text-strong);
  border-color: var(--etna-text-strong);
  background: var(--etna-tint);
}