/* Eloura configurator UI (CONTRACT.md §7).
   Everything is scoped under #app with el- prefixed classes so the page can live inside the Shopify theme
   without leaking styles in either direction. */

#app {
  --el-oxblood: #3e0101;
  --el-night: #210303;
  --el-cream: #f7f4ed;
  --el-paper: #f2ebdc;
  --el-panel: #fbf8f2;
  --el-gold: #c9a66b;
  --el-gold-deep: #a07a3c;
  --el-gold-ink: #8a6630;
  --el-rose: #c9a2a0;
  --el-ink: #3e0101;
  --el-ink-2: rgb(62 1 1 / 0.68);
  --el-ink-3: rgb(62 1 1 / 0.6); /* 4.9:1 on the panel: the faintest text still reads in daylight */
  --el-line: rgb(62 1 1 / 0.1);
  --el-line-2: rgb(62 1 1 / 0.18);

  --el-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --el-serif: 'Cormorant Garamond', 'Cormorant', 'Hoefler Text', Georgia, serif;
  --el-sans: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  --el-panel-w: 420px;
  --el-gap: 20px;
  --el-stage-right: calc(var(--el-panel-w) + var(--el-gap) * 2);
  --el-ease: cubic-bezier(0.22, 0.72, 0.16, 1);
  --el-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Backdrop tones behind the panel; tuned to the stage sweep's edge so the canvas fades in seamlessly. */
  --el-bg-studio: radial-gradient(130% 100% at 32% 42%, #f1e9de 0%, #e9dfd2 55%, #e2d4c3 100%);
  --el-bg-candle: radial-gradient(120% 100% at 32% 55%, #3a0505 0%, #2a0303 50%, #170202 100%);

  /* Procedural noise (SVG feTurbulence → alpha), reused by paper, leather and glass. */
  --el-noise-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -0.62'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");
  --el-noise-pore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 -0.42'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E");
  --el-noise-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.75'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --el-noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.05 0 0 0 0 0.02 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--el-bg-studio);
  color: var(--el-ink);
  font-family: var(--el-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* Candlelight crossfade: gradients cannot transition, so a second layer fades over the first. */
#app::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--el-bg-candle);
  opacity: 0;
  transition: opacity 0.9s var(--el-ease-io);
}
#app[data-backdrop='candle']::before { opacity: 1; }

#app *, #app *::before, #app *::after { box-sizing: border-box; }

#stage {
  position: absolute;
  /* The canvas runs on under the floating panel's left edge, so whatever reaches the panel (the backdrop, or the
     journal when zoomed in) is simply covered by the opaque card, like a sheet of paper laid over a photo. The only
     fade is the strip hidden beneath the panel; it blends the backdrop into the column colour in the thin gaps above
     and below the card. Nothing visible is ever faded, so the product never ghosts. */
  --el-under: 32px;
  inset: 0 calc(var(--el-gap) + var(--el-panel-w) - var(--el-under)) 0 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--el-under)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--el-under)), transparent);
}
#stage > canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* :where keeps this at zero specificity so full-size layers like the HUD can stay click-through. */
:where(#ui) > * { pointer-events: auto; }
/* Before main.js mounts, paint the loader's colours so the first frame is already on-brand. */
#ui:empty { background: radial-gradient(80% 70% at 50% 45%, #4a0707, #2a0303 55%, #160101); pointer-events: auto; }
/* index.html ships the loader as static markup, before .el-ui exists; it must already block the page. */
#ui > .el-loader { pointer-events: auto; }

:where(.el-ui) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.el-ui) button:disabled { cursor: default; }
:where(.el-ui) :focus { outline: none; }
:where(.el-ui) :focus-visible { outline: 2px solid var(--el-gold); outline-offset: 3px; }
:where(.el-ui) :is(p, ul, h2, h3) { margin: 0; padding: 0; }
:where(.el-ui) ul { list-style: none; }
.el-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.el-ico { width: 20px; height: 20px; flex: none; display: block; }
.el-num { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }

/* ============================================================================================================
   HUD over the stage */
.el-hud {
  position: absolute;
  inset: 0 var(--el-stage-right) 0 0;
  pointer-events: none;
  --glass-bg: rgb(251 248 242 / 0.58);
  --glass-line: rgb(255 255 255 / 0.75);
  --glass-ink: var(--el-ink);
  --glass-ink-2: rgb(62 1 1 / 0.5);
  --glass-thumb: #fffdf8;
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 10px 30px -12px rgb(62 1 1 / 0.28), 0 2px 6px -2px rgb(62 1 1 / 0.1);
}
.el-hud { container: el-hud / inline-size; }
.el-hud > * { pointer-events: auto; position: absolute; }
/* The HUD compacts by its own width (not the viewport), since the panel takes a variable share of the screen. */
@container el-hud (max-width: 940px) {
  .el-pill { width: 44px; padding: 0; justify-content: center; }
  .el-pill span { display: none; }
}
@container el-hud (max-width: 1180px) {
  .el-seg--backdrop .el-seg__opt { width: 42px; padding: 0; }
  .el-seg--backdrop .el-seg__opt span { display: none; }
}
#app[data-backdrop='candle'] .el-hud {
  --glass-bg: rgb(40 5 5 / 0.46);
  --glass-line: rgb(201 166 107 / 0.22);
  --glass-ink: var(--el-cream);
  --glass-ink-2: rgb(247 244 237 / 0.55);
  --glass-thumb: rgb(201 166 107 / 0.2);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 14px 34px -12px rgb(0 0 0 / 0.6);
  --glass-halo: rgb(33 3 3 / 0.55);
}

.el-glass {
  background: var(--glass-bg);
  color: var(--glass-ink);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  transition: background-color 0.6s var(--el-ease-io), color 0.6s var(--el-ease-io), border-color 0.6s var(--el-ease-io), box-shadow 0.6s var(--el-ease-io);
}

.el-iconbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--glass-ink);
  transition: transform 0.25s var(--el-ease), background-color 0.25s, color 0.3s, opacity 0.3s;
}
.el-iconbtn:hover { background-color: rgb(62 1 1 / 0.06); }
#app[data-backdrop='candle'] .el-iconbtn:hover { background-color: rgb(247 244 237 / 0.08); }
.el-iconbtn:active { transform: scale(0.92); }
.el-iconbtn:disabled { opacity: 0.32; background: none; transform: none; }

.el-hud__close { top: 22px; left: 22px; }
.el-hud__close.el-iconbtn { border-radius: 50%; }

.el-brand {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--glass-ink);
  transition: color 0.6s var(--el-ease-io);
  pointer-events: none !important;
  user-select: none;
}
.el-brand__word { font-family: var(--el-script); font-size: 44px; line-height: 1.05; letter-spacing: 0.01em; text-shadow: 0 0 16px var(--glass-halo, rgb(251 248 242 / 0.55)), 0 0 3px var(--glass-halo, rgb(251 248 242 / 0.35)); transition: text-shadow 0.6s var(--el-ease-io); }
.el-brand__sub { font-family: var(--el-sans); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--glass-ink-2); margin-top: -2px; padding-left: 0.34em; text-shadow: 0 0 10px var(--glass-halo, rgb(251 248 242 / 0.8)); }

.el-hud__actions { top: 22px; right: 22px; display: flex; gap: 10px; }
.el-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  font-family: var(--el-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.25s var(--el-ease), background-color 0.3s, opacity 0.3s;
}
.el-pill .el-ico { width: 19px; height: 19px; }
.el-pill:hover { transform: translateY(-1px); }
.el-pill:active { transform: translateY(0) scale(0.97); }
.el-pill.is-busy, .el-iconbtn.is-busy { pointer-events: none; }
.el-pill.is-busy .el-ico { animation: el-pulse 1s var(--el-ease-io) infinite; }

.el-tools {
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
}
.el-tools .el-iconbtn { width: 40px; height: 40px; }
.el-tools .el-ico { width: 19px; height: 19px; }
.el-tools__sep { width: 16px; height: 1px; margin: 4px 0; background: var(--glass-ink); opacity: 0.14; }

/* Segmented toggles with a sliding thumb */
.el-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: 999px;
}
.el-seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n, 2));
  border-radius: 999px;
  background: var(--glass-thumb);
  box-shadow: 0 1px 2px rgb(62 1 1 / 0.12), 0 4px 12px -4px rgb(62 1 1 / 0.2);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 0.55s var(--el-ease), background-color 0.6s var(--el-ease-io);
}
#app[data-backdrop='candle'] .el-seg__thumb { box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.35), 0 6px 16px -6px rgb(0 0 0 / 0.6); }
.el-seg__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  font-family: var(--el-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glass-ink-2);
  transition: color 0.35s var(--el-ease-io);
}
.el-seg__opt[aria-checked='true'] { color: var(--glass-ink); }
.el-seg__opt:hover { color: var(--glass-ink); }
.el-seg--book { --n: 2; bottom: 26px; left: 50%; transform: translateX(-50%); }
.el-seg--book .el-ico--book { width: 24px; height: 24px; transition: transform 0.45s var(--el-ease); }
.el-seg--book .el-seg__opt[aria-checked='true'] .el-ico--book { transform: rotate(-4deg) scale(1.06); }
.el-seg--backdrop { bottom: 26px; left: 22px; }
.el-seg--backdrop .el-seg__opt { height: 40px; padding: 0 16px 0 13px; font-size: 10px; gap: 7px; }
.el-seg--backdrop .el-ico { width: 18px; height: 18px; }

/* Info popover */
.el-info {
  right: 84px;
  top: 50%;
  width: 312px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  transform: translate(8px, -50%);
  opacity: 0;
  z-index: 5;
  transition: opacity 0.26s var(--el-ease-io), transform 0.36s var(--el-ease), background-color 0.6s, color 0.6s;
  --glass-bg: rgb(251 248 242 / 0.94);
}
#app[data-backdrop='candle'] .el-info { --glass-bg: rgb(36 4 4 / 0.9); }
.el-info.is-in { opacity: 1; transform: translate(0, -50%); }
.el-info[hidden] { display: none; }
.el-info__close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; }
.el-info__close .el-ico { width: 16px; height: 16px; }
.el-info__title { font-family: var(--el-script); font-size: 34px; line-height: 1; margin-bottom: 12px; }
.el-info__facts li { font-size: 16px; line-height: 1.35; padding-left: 16px; position: relative; margin-bottom: 7px; }
.el-info__facts li::before { content: ''; position: absolute; left: 1px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--el-gold); }
.el-info__label { font-family: var(--el-sans); font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; margin: 16px 0 8px; }
.el-info__how li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; margin-bottom: 6px; }
.el-info__how .el-ico { width: 18px; height: 18px; color: var(--el-gold-deep); }
#app[data-backdrop='candle'] .el-info__how .el-ico { color: var(--el-gold); }

/* Toasts */
/* Desktop AR hand-off: a QR code of this exact design, under the View in AR pill */
.el-qr {
  top: 78px;
  right: 22px;
  width: 352px;
  display: grid;
  grid-template-columns: 124px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 20px 18px 18px;
  border-radius: 18px;
  z-index: 5;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.26s var(--el-ease-io), transform 0.36s var(--el-ease), background-color 0.6s, color 0.6s;
  --glass-bg: rgb(251 248 242 / 0.95);
}
#app[data-backdrop='candle'] .el-qr { --glass-bg: rgb(36 4 4 / 0.92); }
.el-qr.is-in { opacity: 1; transform: none; }
.el-qr[hidden] { display: none; }
.el-qr__close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; }
.el-qr__close .el-ico { width: 15px; height: 15px; }
.el-qr__code { width: 124px; height: 124px; border-radius: 10px; overflow: hidden; background: #fffdf8; box-shadow: 0 0 0 1px rgb(201 166 107 / 0.55), 0 8px 16px -10px rgb(33 3 3 / 0.5); }
.el-qr__code svg { display: block; width: 100%; height: 100%; }
.el-qr__title { font-family: var(--el-script); font-size: 31px; line-height: 1; margin: 2px 0 6px; }
.el-qr__copy { font-size: 15.5px; line-height: 1.3; }
.el-qr__copylink { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 0; font-family: var(--el-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-gold-ink); }
.el-qr__copylink .el-ico { width: 16px; height: 16px; }
.el-qr__copylink:hover { text-decoration: underline; text-underline-offset: 3px; }
#app[data-backdrop='candle'] .el-qr__copylink { color: var(--el-gold); }

/* Toasts rise from just above the Closed/Open control: the customer's eye is on the journal, so never cover it. */
.el-toasts {
  z-index: 6;
  bottom: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(520px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none !important;
}
.el-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 9px;
  border-radius: 999px;
  background: rgb(46 4 4 / 0.9);
  color: var(--el-cream);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.26), 0 16px 36px -14px rgb(33 3 3 / 0.7);
  font-size: 16.5px;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.38s var(--el-ease-io), transform 0.5s var(--el-ease);
  cursor: default;
}
.el-toast.is-in { opacity: 1; transform: none; }
.el-toast.is-out { opacity: 0; transform: translateY(6px) scale(0.98); }
.el-toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(145deg, #e6cc95, #b48a4a); color: #3a0606; }
.el-toast__icon .el-ico { width: 15px; height: 15px; stroke-width: 1.8; }
.el-toast--error .el-toast__icon { background: linear-gradient(145deg, #e9b1ab, #b4544b); color: #2a0303; }

/* ============================================================================================================
   Panel */
.el-panel {
  position: absolute;
  top: var(--el-gap);
  right: var(--el-gap);
  bottom: var(--el-gap);
  width: var(--el-panel-w);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 20% 0%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 60%),
    var(--el-noise-paper),
    var(--el-panel);
  box-shadow:
    0 0 0 1px rgb(62 1 1 / 0.05),
    0 40px 80px -30px rgb(33 3 3 / 0.35),
    0 12px 28px -12px rgb(33 3 3 / 0.18);
  color: var(--el-ink);
}

.el-sheet-bar, .el-tabs { display: none; }

.el-panel__head {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 24px 30px 26px;
  color: var(--el-cream);
  background:
    radial-gradient(90% 120% at 12% -10%, rgb(124 22 18 / 0.55), rgb(124 22 18 / 0) 60%),
    radial-gradient(60% 90% at 100% 0%, rgb(201 166 107 / 0.1), rgb(201 166 107 / 0) 70%),
    var(--el-noise-grain),
    linear-gradient(180deg, #430404 0%, #3a0101 70%, #360101 100%);
  background-size: auto, auto, 120px 120px, auto;
}
/* Scalloped lace edge with eyelet holes, the brand's signature trim. */
.el-panel__head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background:
    radial-gradient(circle at 7px 3px, var(--el-panel) 1.35px, rgb(0 0 0 / 0) 1.9px),
    radial-gradient(circle at 7px 0, #360101 6.6px, rgb(0 0 0 / 0) 7.2px);
  background-size: 14px 10px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 2px rgb(33 3 3 / 0.12));
}
.el-panel__kicker {
  font-family: var(--el-sans);
  font-size: 9.5px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--el-gold);
  margin-bottom: 2px;
}
.el-panel__word {
  font-family: var(--el-script);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  margin: 0 0 2px -2px;
  color: var(--el-cream);
  text-shadow: 0 1px 18px rgb(201 166 107 / 0.18);
}
.el-panel__tag { font-style: italic; font-size: 17.5px; line-height: 1.3; color: rgb(247 244 237 / 0.78); }

.el-panel__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgb(62 1 1 / 0.18) transparent;
  /* Bottom fade: --el-fade-a is where it starts, --el-fade-b where the content is fully gone (both from the
     bottom edge). While the "more below" pill shows, ui.js moves the fade up to the first hidden step's heading. */
  --el-fade-a: 18px;
  --el-fade-b: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - var(--el-fade-a)), transparent calc(100% - var(--el-fade-b)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - var(--el-fade-a)), transparent calc(100% - var(--el-fade-b)));
}
.el-panel__body.is-fade-anim { transition: --el-fade-a 0.4s var(--el-ease-io), --el-fade-b 0.4s var(--el-ease-io); }
@property --el-fade-a { syntax: '<length>'; inherits: false; initial-value: 18px; }
@property --el-fade-b { syntax: '<length>'; inherits: false; initial-value: 0px; }
.el-panel__body::-webkit-scrollbar { width: 8px; }
.el-panel__body::-webkit-scrollbar-thumb { background: rgb(62 1 1 / 0.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Accordion */
.el-sec { position: relative; }
.el-sec + .el-sec::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(62 1 1 / 0), var(--el-line) 12%, var(--el-line) 88%, rgb(62 1 1 / 0));
}
.el-sec__h { font: inherit; }
.el-sec__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto 18px;
  align-items: center;
  column-gap: 14px;
  padding: 17px 28px 17px 28px;
  text-align: left;
  transition: background-color 0.3s;
}
.el-sec__head:hover { background-color: rgb(62 1 1 / 0.022); }
.el-sec__head:focus-visible { outline-offset: -4px; border-radius: 12px; }
.el-sec__num { font-family: var(--el-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--el-gold-ink); padding-top: 2px; }
.el-sec__title { font-size: 22px; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2; display: inline-flex; align-items: baseline; gap: 9px; }
.el-sec__tag { font-family: var(--el-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--el-gold-ink); background: rgb(201 166 107 / 0.16); border-radius: 999px; padding: 3px 7px 2px; transform: translateY(-2px); }
.el-sec__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  font-size: 16.5px;
  color: var(--el-ink-2);
  white-space: nowrap;
  transition: opacity 0.3s;
}
.el-sec__icon { position: relative; width: 14px; height: 14px; }
.el-sec__icon i { position: absolute; left: 0; right: 0; top: 50%; height: 1.25px; margin-top: -0.6px; background: var(--el-ink); border-radius: 2px; transition: transform 0.45s var(--el-ease); }
.el-sec__icon i + i { transform: rotate(90deg); }
.el-sec.is-open .el-sec__icon i + i { transform: rotate(0deg); }
.el-sec.is-open .el-sec__icon i:first-child { transform: rotate(180deg); }

.el-sec__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--el-ease);
}
.el-sec.is-open .el-sec__body { grid-template-rows: 1fr; }
.el-sec__inner { min-height: 0; overflow: hidden; }
.el-sec__pad {
  padding: 2px 28px 26px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--el-ease-io), transform 0.45s var(--el-ease);
}
.el-sec.is-open .el-sec__pad { opacity: 1; transform: none; transition-delay: 0.08s; }

/* Small colour dots used in values, captions and chips */
.el-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c, #999);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), inset 0 1px 1px rgb(255 255 255 / 0.25);
  flex: none;
}
.el-dot--gold { background: conic-gradient(from 210deg, #efe2bd, #b39b68 25%, #5c4826 45%, #b39b68 65%, #efe2bd 80%, #b39b68); }
.el-dot--silver { background: conic-gradient(from 210deg, #f7f5f0, #d3cec5 25%, #6c6a66 45%, #d3cec5 65%, #f7f5f0 80%, #d3cec5); }

/* Option buttons and swatches */
.el-swatches { display: flex; flex-wrap: wrap; gap: 18px; padding: 8px 2px 4px; }
/* Five leathers always share one row (the 384 px panel of a small laptop included); the space between them flexes. */
.el-swatches--lg { justify-content: space-between; column-gap: 6px; flex-wrap: nowrap; }
.el-swatches--cord { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; row-gap: 18px; column-gap: 8px; }
.el-swatches--metal { gap: 26px; }
.el-swatches--lace { gap: 22px; }

.el-opt { position: relative; display: block; border-radius: 50%; }
.el-opt::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--el-gold);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.35s var(--el-ease-io), transform 0.5s var(--el-ease);
  pointer-events: none;
}
.el-opt.is-on::after { opacity: 1; transform: none; }
.el-opt:focus-visible { outline-offset: 7px; border-radius: 50%; }

.el-sw {
  display: block;
  position: relative;
  width: var(--s, 54px);
  height: var(--s, 54px);
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.35s var(--el-ease), box-shadow 0.35s var(--el-ease);
  box-shadow: 0 1px 2px rgb(33 3 3 / 0.2), 0 6px 14px -7px rgb(33 3 3 / 0.45);
}
.el-opt:hover .el-sw { transform: translateY(-2px); box-shadow: 0 2px 3px rgb(33 3 3 / 0.18), 0 12px 22px -10px rgb(33 3 3 / 0.5); }
.el-opt:active .el-sw { transform: translateY(0) scale(0.97); transition-duration: 0.12s; }

/* Leather: a waxy highlight, curvature shade, mottling and fine grain over the base colour, with the raw edge. */
.el-sw--leather, .el-sw--grommet, .el-sw--lace {
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0) 22%, rgb(255 250 240 / 0.13) 34%, rgb(255 255 255 / 0) 48%),
    linear-gradient(140deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 45%, rgb(0 0 0 / 0.18) 100%),
    var(--el-noise-mottle),
    var(--el-noise-pore),
    var(--c, var(--leather));
  background-size: auto, auto, 160px 160px, 40px 40px, auto;
}
.el-sw--leather::after, .el-sw--grommet::after, .el-sw--lace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--edge, var(--leather-edge)), inset 0 1.5px 1px rgb(255 255 255 / 0.12), inset 0 -2px 5px rgb(0 0 0 / 0.3);
  pointer-events: none;
}
/* A soft travelling glint on hover sells the oil finish. */
.el-sw--leather::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0) 65%);
  transform: translateX(-60%);
  transition: transform 0.9s var(--el-ease);
}
.el-opt:hover .el-sw--leather::before { transform: translateX(60%); }

.el-swatches--cord .el-sw { --s: 46px; }
.el-sw--cord svg { display: block; width: 100%; height: 100%; }
.el-sw--cord::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(80% 60% at 30% 22%, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 60%); box-shadow: inset 0 -3px 6px rgb(0 0 0 / 0.25); }

.el-swatches--metal .el-sw { --s: 62px; }
.el-sw--grommet i {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: conic-gradient(from 215deg, var(--hi), var(--mid) 14%, var(--lo) 30%, var(--mid) 46%, var(--hi) 58%, var(--mid) 70%, var(--lo) 86%, var(--hi));
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(0 0 0 / 0.35), inset 0 0 0 0.5px rgb(255 255 255 / 0.4);
  z-index: 1;
  transition: transform 0.6s var(--el-ease);
}
.el-sw--grommet i::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(60% 45% at 35% 25%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 60%);
  mix-blend-mode: screen;
}
.el-sw--grommet i::after {
  content: '';
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2a1210, #0b0404 75%);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.9), 0 0 0 1px var(--lo), 0 0 0 1.6px rgb(255 255 255 / 0.25);
}
.el-opt:hover .el-sw--grommet i { transform: rotate(40deg); }

.el-swatches--lace .el-sw { --s: 56px; }
.el-sw--lace svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.el-sw__paper { fill: #d6c7b2; }
.el-sw__edge { fill: var(--leather-edge); opacity: 0.9; }

/* Captions under swatch rows */
.el-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
  margin-top: 16px;
  min-height: 28px;
}
.el-caption__title { font-size: 21px; font-weight: 500; }
.el-caption__sub { display: inline-flex; flex-wrap: wrap; gap: 14px; font-family: var(--el-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--el-ink-2); }
.el-chip { display: inline-flex; align-items: center; gap: 6px; }
.el-chip .el-dot { width: 10px; height: 10px; }
.el-note { margin-top: 8px; font-style: italic; font-size: 15.5px; line-height: 1.38; color: var(--el-ink-2); }

/* Size cards */
.el-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 6px; }
.el-size {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  border-radius: 14px;
  padding: 16px 16px 15px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.35));
  box-shadow: inset 0 0 0 1px var(--el-line-2);
  transition: box-shadow 0.35s var(--el-ease-io), transform 0.35s var(--el-ease), background-color 0.35s;
}
.el-size:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--el-line-2), 0 12px 24px -16px rgb(62 1 1 / 0.45); }
.el-size.is-on { box-shadow: inset 0 0 0 1.5px var(--el-gold), 0 0 0 4px rgb(201 166 107 / 0.16), 0 14px 26px -18px rgb(62 1 1 / 0.5); background: linear-gradient(180deg, #fffdf8, #fbf5ea); }
.el-size:focus-visible { border-radius: 14px; outline-offset: 3px; }
.el-size__art { height: 64px; display: flex; align-items: flex-end; margin-bottom: 12px; }
.el-mini { display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgb(33 3 3 / 0.25)); }
.el-mini__cover { fill: var(--leather); transition: fill 0.45s; }
.el-mini__spine { fill: var(--leather-edge); transition: fill 0.45s; }
.el-mini__sheen { fill: #fff; opacity: 0.07; }
.el-mini__band { stroke: var(--cord); stroke-width: 1.2; fill: none; transition: stroke 0.45s; }
.el-mini__eyelet { fill: var(--el-gold); }
.el-size__text { display: flex; flex-direction: column; gap: 2px; }
.el-size__label { font-size: 28px; font-weight: 500; line-height: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.el-size__dim { font-family: var(--el-sans); font-size: 10.5px; letter-spacing: 0.08em; color: var(--el-ink-3); font-weight: 400; white-space: nowrap; }
.el-size__price { font-size: 17px; font-weight: 600; color: var(--el-ink); margin-top: 4px; }
.el-size__blurb { font-style: italic; font-size: 14.5px; line-height: 1.3; color: var(--el-ink-2); margin-top: 4px; }
.el-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e3c68c, #b08646);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.45s var(--el-ease);
}
.el-tick .el-ico { width: 13px; height: 13px; stroke-width: 2; }
.el-size.is-on .el-tick { opacity: 1; transform: none; }

/* Pendant slots */
.el-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 6px; }
.el-slots.is-nudge { animation: el-nudge 0.6s var(--el-ease); }
.el-slot { position: relative; }
.el-slot__btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 6px 10px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.35);
  box-shadow: inset 0 0 0 1px var(--el-line-2);
  transition: box-shadow 0.35s var(--el-ease-io), background-color 0.35s, transform 0.35s var(--el-ease);
}
.el-slot__btn:hover { background: rgb(255 255 255 / 0.7); }
.el-slot__btn:focus-visible { border-radius: 14px; }
.el-slot.is-filled .el-slot__btn { background: rgb(255 255 255 / 0.75); }
.el-slot.is-next .el-slot__btn { box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.9); background-image: linear-gradient(180deg, rgb(201 166 107 / 0.08), rgb(201 166 107 / 0)); }
.el-slot__btn.is-on { box-shadow: inset 0 0 0 1.5px var(--el-gold), 0 0 0 4px rgb(201 166 107 / 0.18); background: #fffcf5; }
.el-slot__label { font-family: var(--el-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-ink-2); white-space: nowrap; }
.el-slot.is-next .el-slot__label::after, .el-slot__btn.is-on .el-slot__label::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--el-gold); vertical-align: 1px; animation: el-breathe 1.8s var(--el-ease-io) infinite; }
/* Short spot names everywhere ("Elastic", "Spine 1"): the diagram and the full accessible name carry the rest. */
.el-slot__long { display: none; }
.el-slot__content { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 66px; justify-content: center; }
.el-slot__thumb, .el-slot__empty { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
.el-slot__thumb { background: radial-gradient(circle at 50% 35%, #fffdf8, #f1e7d6); box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.45); color: var(--el-gold-deep); overflow: hidden; }
.el-slot__thumb .el-pendant-art { width: 30px; height: 40px; }
.el-slot__thumb img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(62 1 1 / 0.18)); }
.el-slotdiag { width: 40px; height: 36px; }
.el-slotdiag__cover { fill: rgb(62 1 1 / 0.07); stroke: rgb(62 1 1 / 0.35); stroke-width: 0.9; }
.el-slotdiag__spine { fill: rgb(62 1 1 / 0.12); stroke: rgb(62 1 1 / 0.35); stroke-width: 0.9; }
.el-slotdiag__band { stroke: rgb(62 1 1 / 0.4); stroke-width: 1; fill: none; }
.el-slotdot { fill: rgb(62 1 1 / 0.16); }
.el-slotdot.is-hot { fill: var(--el-gold); stroke: #fff; stroke-width: 0.8; }
.el-slot__name { font-size: 14.5px; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.el-slot__name.is-empty { font-style: italic; color: var(--el-ink-3); }
.el-slot__clear {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--el-panel);
  color: var(--el-ink-2);
  box-shadow: 0 0 0 1px var(--el-line-2), 0 3px 8px -3px rgb(62 1 1 / 0.35);
  transition: transform 0.25s var(--el-ease), color 0.25s;
}
.el-slot__clear[hidden] { display: none; }
.el-slot__clear .el-ico { width: 12px; height: 12px; stroke-width: 1.8; }
.el-slot__clear:hover { color: var(--el-ink); transform: scale(1.08); }
.el-ptiles__bar { display: none; }
.el-slots__hint { margin: 12px 0 14px; font-style: italic; font-size: 15px; line-height: 1.35; color: var(--el-ink-2); min-height: 2.7em; }

/* Pendant tiles */
.el-ptiles { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 16px 10px; }
.el-ptile { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: center; border-radius: 12px; }
.el-ptile__media { position: relative; display: block; }
.el-ptile__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  color: var(--el-gold-deep);
  background:
    radial-gradient(circle at 50% 38%, #fffdf9 0%, #f6efe2 60%, #ede2cf 100%);
  box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.35), 0 1px 2px rgb(62 1 1 / 0.06);
  transition: transform 0.35s var(--el-ease), box-shadow 0.35s var(--el-ease);
}
/* A fine inner frame line, like a jeweller's card. */
.el-ptile__thumb::before { content: ''; position: absolute; inset: 4px; border-radius: 9px; box-shadow: inset 0 0 0 0.75px rgb(201 166 107 / 0.35); pointer-events: none; z-index: 1; }
.el-ptile__thumb .el-pendant-art { width: 54%; height: auto; margin-top: 16%; transition: transform 0.6s var(--el-ease); transform-origin: 50% 8%; }
.el-ptile:hover .el-ptile__thumb { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.55), 0 12px 20px -12px rgb(62 1 1 / 0.45); }
.el-ptile:hover .el-pendant-art { transform: rotate(-5deg); }
.el-ptile:active .el-ptile__thumb { transform: scale(0.97); transition-duration: 0.12s; }
/* 3D renders arrive as transparent squares cropped tight to the piece: inset them so the bail clears the frame and
   the catalogue number, and ground them with a soft shadow on the card. */
.el-ptile__thumb img {
  position: absolute;
  left: 14%;
  top: 19%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgb(62 1 1 / 0.16)) drop-shadow(0 8px 10px rgb(62 1 1 / 0.1));
  transform-origin: 50% 6%;
  transition: opacity 0.5s var(--el-ease-io), transform 0.6s var(--el-ease);
}
.el-ptile:hover .el-ptile__thumb img { transform: rotate(-4deg); }
.el-ptile__thumb img.is-loading, .el-slot__thumb img.is-loading { opacity: 0; transform: scale(1.04); }
.el-ptile__no { position: absolute; top: 6px; left: 8px; font-family: var(--el-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--el-gold-ink); z-index: 2; pointer-events: none; }
.el-ptile__badge {
  position: absolute;
  left: 50%;
  top: calc(100% - 8px);
  transform: translate(-50%, 0) scale(0.7);
  opacity: 0;
  z-index: 3;
  padding: 3px 8px 2px;
  border-radius: 999px;
  background: var(--el-oxblood);
  color: var(--el-cream);
  font-family: var(--el-sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(201 166 107 / 0.6), 0 4px 10px -4px rgb(62 1 1 / 0.6);
  transition: opacity 0.3s, transform 0.45s var(--el-ease);
  pointer-events: none;
}
.el-ptile.is-placed .el-ptile__badge { opacity: 1; transform: translate(-50%, 0); }
.el-ptile.is-placed .el-ptile__thumb { box-shadow: inset 0 0 0 1.5px var(--el-gold), 0 0 0 3px rgb(201 166 107 / 0.2), 0 10px 18px -12px rgb(62 1 1 / 0.45); background: radial-gradient(circle at 50% 38%, #fffaf0 0%, #f7ead0 70%, #efdcb8 100%); }
.el-ptile__name { font-size: 14px; line-height: 1.12; margin-top: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.el-ptile__price { font-family: var(--el-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--el-ink-2); margin-top: 3px; }
.el-ptile:focus-visible { outline: none; }
.el-ptile:focus-visible .el-ptile__thumb { outline: 2px solid var(--el-gold); outline-offset: 3px; }

/* Pendant art colours */
.el-pendant-art { display: block; }
.el-pendant-art .el-gem { fill: var(--gem, #9b0f1e); fill-opacity: 0.88; }
.el-pendant-art .el-cherry { fill: #a3141f; fill-opacity: 0.9; }
.el-pendant-art .el-enamel { fill: #a3121f; fill-opacity: 0.85; }

/* Footer: price and cart */
.el-panel__foot {
  flex: none;
  position: relative;
  z-index: 3;
  padding: 14px 28px 20px;
  background: linear-gradient(180deg, rgb(244 236 223 / 0.5), rgb(240 230 214 / 0.8));
  box-shadow: 0 -1px 0 var(--el-line), 0 -18px 24px -18px rgb(62 1 1 / 0.12);
}
/* Order summary: the build in words, then "Total · n items" (opens the itemised card) beside the amount. */
.el-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.el-price__recap {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--el-line-2);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--el-ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.el-price__toggle { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 34px; padding: 0 10px 0 0; border-radius: 8px; }
.el-price__toggle:hover .el-price__count { color: var(--el-ink); }
.el-price__toggle .el-ico { width: 15px; height: 15px; color: var(--el-ink-2); transform: rotate(180deg); transition: transform 0.4s var(--el-ease); }
.el-price.is-expanded .el-price__toggle .el-ico { transform: none; }
.el-price__count { font-family: var(--el-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--el-ink-2); transition: color 0.3s; }
.el-price__count::before { content: '·'; margin-right: 8px; }
.el-price__lines {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 10px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px 13px;
  border-radius: 14px;
  background: var(--el-noise-paper), var(--el-panel);
  box-shadow: 0 0 0 1px var(--el-line-2), 0 20px 40px -16px rgb(62 1 1 / 0.42), 0 4px 10px -4px rgb(62 1 1 / 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.3s var(--el-ease-io), transform 0.4s var(--el-ease), visibility 0s linear 0.3s;
}
.el-price.is-expanded .el-price__lines { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.el-price__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15.5px; line-height: 1.3; color: var(--el-ink-2); }
.el-price__lines li[data-key='journal'] { color: var(--el-ink); }
.el-price__item { display: flex; flex-direction: column; min-width: 0; }
.el-price__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-price__sub { font-style: italic; font-size: 14px; line-height: 1.25; color: var(--el-ink-2); margin-top: 1px; }
.el-price__lines li.is-new { animation: el-line-in 0.6s var(--el-ease) both; }
.el-price__row { display: flex; justify-content: flex-end; align-items: baseline; }
.el-price__label { font-family: var(--el-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--el-ink-2); }

/* "More below" cue: floats just above the footer while steps sit under the fold. */
.el-more {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 48px);
  height: 30px;
  padding: 0 11px 0 15px;
  border-radius: 999px;
  background: var(--el-panel);
  box-shadow: 0 0 0 1px var(--el-line-2), 0 10px 20px -10px rgb(62 1 1 / 0.4);
  font-family: var(--el-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--el-ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity 0.35s var(--el-ease-io), transform 0.45s var(--el-ease), color 0.3s;
}
.el-more__t { overflow: hidden; text-overflow: ellipsis; }
.el-more .el-ico { width: 15px; height: 15px; animation: el-bob 2.6s var(--el-ease-io) infinite; }
.el-more.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.el-more:hover { color: var(--el-ink); }
.el-panel__foot:has(.el-price.is-expanded) .el-more { opacity: 0; pointer-events: none; }
.el-price__total { font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: 0.005em; color: var(--el-ink); transition: color 0.4s; }
.el-price__total.is-up { color: #6a1a10; }
.el-price__total.is-down { color: #5b3a1a; }

.el-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 58px;
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  color: var(--el-cream);
  background: linear-gradient(180deg, #5a0c0b 0%, #430202 55%, #360101 100%);
  box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.12), 0 14px 28px -14px rgb(62 1 1 / 0.8), 0 2px 4px rgb(62 1 1 / 0.15);
  font-family: var(--el-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: transform 0.25s var(--el-ease), box-shadow 0.35s, filter 0.35s;
}
.el-cart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 30%, rgb(255 230 190 / 0.18) 48%, rgb(255 255 255 / 0) 66%);
  transform: translateX(-100%);
  transition: transform 1.1s var(--el-ease);
}
.el-cart:hover::before { transform: translateX(100%); }
.el-cart:hover { filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgb(201 166 107 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.14), 0 18px 32px -14px rgb(62 1 1 / 0.85), 0 2px 4px rgb(62 1 1 / 0.15); }
.el-cart:active { transform: translateY(1px) scale(0.992); }
.el-cart:focus-visible { outline-offset: 3px; border-radius: 14px; }
.el-cart > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 11px; transition: opacity 0.3s, transform 0.4s var(--el-ease); }
.el-cart .el-ico { width: 19px; height: 19px; color: var(--el-gold); }
.el-cart__busy, .el-cart__done { opacity: 0; transform: translateY(8px); }
.el-cart__busy i { width: 5px; height: 5px; border-radius: 50%; background: var(--el-gold); animation: el-dots 1s var(--el-ease-io) infinite; }
.el-cart__busy i:nth-child(2) { animation-delay: 0.15s; }
.el-cart__busy i:nth-child(3) { animation-delay: 0.3s; }
.el-cart.is-busy .el-cart__idle, .el-cart.is-done .el-cart__idle { opacity: 0; transform: translateY(-8px); }
.el-cart.is-busy .el-cart__busy { opacity: 1; transform: none; }
.el-cart.is-done:not(.is-busy) .el-cart__done { opacity: 1; transform: none; }
.el-cart.is-busy { pointer-events: none; }

/* ============================================================================================================
   Loader */
.el-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #ede2d0;
  background:
    var(--el-noise-grain),
    radial-gradient(80% 70% at 50% 45%, #4a0707 0%, #2a0303 55%, #160101 100%);
  background-size: 120px 120px, auto;
  transition: opacity 1s var(--el-ease-io), visibility 0s linear 1s;
}
.el-loader[hidden] { display: none; }
.el-loader.is-done { opacity: 0; visibility: hidden; }
.el-loader__frame { position: relative; width: min(500px, 92vw); aspect-ratio: 4 / 3; animation: el-rise 1.4s var(--el-ease) both; }
/* One continuous hand-off: the lace medallion swells outward and dissolves while the room opens from its centre
   like an iris, so the iris is already visible as the lace thins (no dark beat between them). Exit keyframes, not
   transitions: swapping `animation` and a property in one style change starts no transition in Chrome, which
   used to cut the lace out in a single frame. */
.el-loader.is-done > .el-loader__frame {
  animation: el-lace-swell 1.5s cubic-bezier(0.2, 0.6, 0.2, 1) both, el-lace-out 0.9s cubic-bezier(0.45, 0, 0.7, 1) both;
}
.el-loader.is-done > .el-loader__bar, .el-loader.is-done > .el-loader__note { animation: el-lace-out 0.35s var(--el-ease-io) both; }
.el-loader.has-iris {
  --el-iris: 0vmax;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent calc(var(--el-iris) - 34vmax), #000 var(--el-iris));
  mask-image: radial-gradient(circle at 50% 46%, transparent calc(var(--el-iris) - 34vmax), #000 var(--el-iris));
}
/* The iris opens almost at once (its soft centre clears ~0.3 s in, while the lace is still ~75% visible) and
   takes its time over the far edges. */
.el-loader.has-iris.is-done {
  --el-iris: 150vmax;
  transition: --el-iris 1.9s cubic-bezier(0.32, 0.06, 0.25, 1) 0.05s, opacity 0.45s var(--el-ease-io) 1.2s, visibility 0s linear 1.65s;
}
.el-lace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 22px rgb(0 0 0 / 0.4)); }
.el-lace__net { color: #ede2d0; opacity: 0.5; animation: el-breathe-net 3.6s var(--el-ease-io) infinite; }
.el-lace__edge { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; }
.el-lace__edge--in { stroke-width: 0.8; opacity: 0.8; }
.el-lace__eyelets { fill: none; stroke: currentColor; stroke-width: 1.1; }
.el-lace__picots, .el-lace__petal { fill: currentColor; }
.el-lace__hole { fill: #3a0505; stroke: currentColor; stroke-width: 0.6; }
.el-lace__scroll { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.el-lace__scroll circle { fill: currentColor; stroke: none; }
.el-lace__cord { fill: none; stroke: currentColor; stroke-width: 2.6; }
.el-lace__cord--thin { stroke-width: 0.9; opacity: 0.85; }
.el-lace__dots { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 0 6.2; animation: el-thread 7s linear infinite; opacity: 0.85; }
.el-loader__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--el-script);
  font-size: clamp(54px, 17vw, 92px);
  line-height: 1;
  color: var(--el-cream);
  padding-bottom: 4%;
  text-shadow: 0 0 30px rgb(201 166 107 / 0.25);
  animation: el-fade 1.6s var(--el-ease) 0.25s both;
}
html.el-fontwait .el-loader__word { animation-play-state: paused; }
.el-loader__bar { position: relative; width: 180px; height: 1px; background: rgb(201 166 107 / 0.22); overflow: hidden; border-radius: 1px; }
/* A slow glint runs along the line from the first paint, so the page reads as alive before any script has run. */
.el-loader__bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, rgb(230 201 142 / 0), rgb(240 220 170 / 0.75), rgb(230 201 142 / 0)); animation: el-glint 2.2s var(--el-ease-io) infinite; }
.el-loader__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(201 166 107 / 0.4), #e6c98e); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--el-ease); }
.el-loader__note { font-family: var(--el-sans); font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; color: rgb(201 162 160 / 0.85); padding-left: 0.38em; animation: el-fade 1.6s var(--el-ease) 0.5s both; }

/* ============================================================================================================
   Entrance once the scene is ready */
.el-ui:not(.is-ready) .el-panel { opacity: 0; transform: translateX(28px); }
.el-ui:not(.is-ready) .el-hud > :not(.el-toasts) { opacity: 0; }
.el-panel { transition: opacity 0.9s var(--el-ease-io) 0.25s, transform 1.1s var(--el-ease) 0.25s; }
/* Popovers keep their own open/close transitions, so they sit out the entrance animation. */
.el-ui.is-ready .el-hud > :not(.el-toasts, .el-info, .el-qr) { animation: el-fade 0.9s var(--el-ease-io) both; }
.el-ui.is-ready .el-hud > .el-brand { animation-delay: 0.15s; }
.el-ui.is-ready .el-hud > .el-hud__actions { animation-delay: 0.35s; }
.el-ui.is-ready .el-hud > .el-tools { animation-delay: 0.45s; }
.el-ui.is-ready .el-hud > .el-seg--book { animation-delay: 0.55s; }
.el-ui.is-ready .el-hud > .el-seg--backdrop { animation-delay: 0.6s; }
/* Elements that carry their own transform in the animation would fight it, so animate opacity only. */

@property --el-iris { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes el-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes el-lace-swell { from { transform: none; } to { transform: scale(1.22); } }
@keyframes el-lace-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes el-rise { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes el-thread { to { stroke-dashoffset: -64; } }
@keyframes el-breathe-net { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.62; } }
@keyframes el-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes el-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes el-dots { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes el-line-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes el-glint { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes el-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes el-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* ============================================================================================================
   Narrower desktops */
@media (max-width: 1180px) and (min-width: 900px) and (min-height: 501px) {
  #app { --el-panel-w: 384px; --el-gap: 16px; }
  .el-sec__head, .el-sec__pad { padding-left: 24px; padding-right: 24px; }
  .el-panel__foot { padding-left: 24px; padding-right: 24px; }
}
/* Shorter desktops: give the options more room by tightening the header and footer. */
@media (max-height: 880px) and (min-width: 900px) and (min-height: 501px) {
  .el-panel__head { padding-top: 16px; padding-bottom: 18px; }
  .el-panel__kicker { display: none; }
  .el-panel__word { font-size: 46px; }
  .el-panel__tag { font-size: 16px; }
  .el-sec__head { padding-top: 14px; padding-bottom: 14px; }
  .el-panel__foot { padding-top: 12px; padding-bottom: 16px; }
  .el-price__recap { font-size: 15px; margin-bottom: 6px; padding-bottom: 7px; }
  .el-price__total { font-size: 28px; }
  .el-cart { height: 52px; margin-top: 11px; }
}
@media (max-height: 700px) and (min-width: 900px) and (min-height: 501px) {
  .el-panel__tag { display: none; }
  .el-panel__word { font-size: 40px; }
  .el-sec__head { padding-top: 11px; padding-bottom: 11px; }
}

/* ============================================================================================================
   Phones: canvas on top, the panel becomes a draggable bottom sheet with a tab strip and horizontal scrollers.
   The HUD is pared back to what a thumb needs: close, AR, download on top; backdrop and Closed/Open just above
   the sheet (they ride along with it). Zoom is pinch, so no zoom buttons; undo, redo and info live in the
   sheet's top bar. ui.js drives --el-stage-h (resting height), --sheet-dy and --stage-k (live drag).
   A phone held sideways also takes this shell, then the landscape block below turns the sheet into a side panel
   (keep both queries in step with mqPhone / mqLand in ui.js). */
@media (max-width: 899px), (max-height: 500px) and (orientation: landscape) {
  #app { --el-stage-h: 56vh; --el-gap: 12px; }
  @supports (height: 1dvh) { #app { --el-stage-h: 56dvh; } }
  #stage {
    inset: 0 0 auto 0;
    height: var(--el-stage-h);
    -webkit-mask-image: none;
    mask-image: none;
    transform: scale(var(--stage-k, 1));
    transform-origin: 50% 0;
  }
  .el-hud { inset: 0 0 auto 0; height: calc(var(--el-stage-h) - 18px); }

  .el-hud__close { top: 12px; left: 12px; }
  .el-iconbtn { width: 40px; height: 40px; }
  .el-iconbtn .el-ico { width: 19px; height: 19px; }
  .el-brand { top: 8px; }
  .el-brand__word { font-size: 32px; }
  .el-brand__sub { font-size: 8px; letter-spacing: 0.3em; margin-top: -1px; }
  .el-hud__actions { top: 12px; right: 12px; gap: 8px; }
  .el-pill { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .el-pill span { display: none; }
  .el-pill .el-ico { width: 18px; height: 18px; }
  .el-tools { display: none; }

  /* Bottom row: rides on the sheet's top edge while it is dragged. */
  .el-seg--book, .el-seg--backdrop { bottom: 12px; padding: 3px; }
  .el-seg--book { left: auto; right: 12px; transform: translateY(var(--sheet-dy, 0px)); }
  .el-seg--book .el-seg__opt { padding: 0 12px; }
  .el-seg--book .el-ico--book { display: none; }
  .el-seg--backdrop { left: 12px; transform: translateY(var(--sheet-dy, 0px)); }
  .el-seg__thumb { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); }
  .el-seg__opt { height: 34px; padding: 0 13px 0 10px; font-size: 9px; gap: 6px; letter-spacing: 0.15em; }
  .el-seg--book .el-ico--book { width: 18px; height: 18px; }
  .el-seg--backdrop .el-seg__opt { width: 34px; padding: 0; }
  .el-seg--backdrop .el-seg__opt span { display: none; }
  .el-seg--backdrop .el-ico { width: 16px; height: 16px; }

  .el-toasts { bottom: 60px; max-width: calc(100% - 24px); transform: translate(-50%, var(--sheet-dy, 0px)); }
  .el-toast { font-size: 15px; }
  #app.is-sheet-drag .el-toasts { transition: none; }
  .el-more, .el-qr { display: none !important; }
  .el-info { left: 12px; right: 12px; top: 60px; width: auto; transform: translateY(-6px); max-height: calc(100% - 72px); overflow: auto; padding: 18px 18px 16px; }
  .el-info__facts li { font-size: 15px; }
  .el-info__title { font-size: 30px; }
  .el-info.is-in { transform: none; }

  .el-panel {
    container: el-panel / inline-size;
    /* The sheet's top edge moves (not the whole sheet), so the price and cart stay put at the bottom. */
    top: calc(var(--el-stage-h) - 18px + var(--sheet-dy, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -1px 0 rgb(255 255 255 / 0.6), 0 -16px 40px -18px rgb(33 3 3 / 0.4);
  }
  .el-ui:not(.is-ready) .el-panel { transform: translateY(40px); }
  /* Resting heights change in one frame; only the live drag and the settle animate (transforms only). */
  #app.is-sheet-drag :is(#stage, .el-panel, .el-seg--book, .el-seg--backdrop) { transition: none !important; }
  #app.is-sheet-anim :is(#stage, .el-panel, .el-seg--book, .el-seg--backdrop, .el-brand) { transition: transform 0.5s var(--el-ease), top 0.5s var(--el-ease), opacity 0.3s var(--el-ease-io), visibility 0s linear 0.3s !important; }
  /* With the sheet up, the small preview gets the whole strip above it: the wordmark and the bottom row step aside. */
  #app[data-sheet='full'] :is(.el-seg--book, .el-seg--backdrop, .el-brand) { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--el-ease-io), visibility 0s linear 0.3s; }
  #app.is-sheet-drag, #app.is-sheet-drag * { user-select: none; -webkit-user-select: none; }
  /* While the canvas is shrunk by a drag, feather its sides so no rectangle edge shows against the backdrop. */
  #app:is(.is-sheet-drag, .is-sheet-anim) #stage {
    --feather: max(0%, calc((1 - var(--stage-k, 1)) * 45%));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  }
  .el-panel__head { display: none; }

  /* Sheet top bar: undo/redo, the grab handle, info. The whole bar (and the tab strip) can be dragged. */
  .el-sheet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 38px;
    padding: 2px 8px 0;
    touch-action: none;
    cursor: grab;
  }
  .el-sheet-bar__group { display: flex; gap: 2px; }
  .el-sheet-bar .el-iconbtn { width: 36px; height: 36px; color: var(--el-ink-2); }
  .el-sheet-bar .el-iconbtn:hover { background-color: rgb(62 1 1 / 0.05); }
  .el-sheet-bar .el-iconbtn:disabled { opacity: 0.28; }
  .el-sheet-bar .el-ico { width: 18px; height: 18px; }
  .el-sheet-handle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 120px; height: 30px; display: grid; place-items: center; cursor: inherit; touch-action: none; }
  .el-sheet-handle i { width: 38px; height: 4px; border-radius: 4px; background: rgb(62 1 1 / 0.2); transition: background-color 0.3s, width 0.4s var(--el-ease); }
  .el-sheet-handle:hover i, #app.is-sheet-drag .el-sheet-handle i { background: rgb(62 1 1 / 0.36); width: 46px; }
  .el-sheet-handle:focus-visible { outline-offset: -6px; border-radius: 12px; }
  #app.is-sheet-drag .el-sheet-bar { cursor: grabbing; }

  /* Tab strip */
  /* All six steps share the width (the add-ons must never hide off-screen). Each tab is a label over the current
     choice; on narrow phones a colour step shows just its dot, and the full name sits in the step's caption. */
  .el-tabs {
    display: flex;
    flex: none;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 8px;
    touch-action: pan-x;
    box-shadow: inset 0 -1px 0 var(--el-line);
  }
  .el-tabs::-webkit-scrollbar { display: none; }
  .el-tab {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 5px 7px 10px;
    text-align: center;
    border-radius: 10px 10px 0 0;
  }
  .el-tab__t { font-family: var(--el-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--el-ink-2); white-space: nowrap; transition: color 0.3s; }
  .el-tab__v { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 19px; font-style: italic; font-size: 15px; line-height: 1.2; color: var(--el-ink-2); white-space: nowrap; transition: color 0.3s; }
  .el-tab__v .el-dot { width: 10px; height: 10px; }
  .el-tab::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: var(--el-gold); transform: scaleX(0); transition: transform 0.45s var(--el-ease); }
  .el-tab[aria-selected='true'] .el-tab__t { color: var(--el-ink); }
  .el-tab[aria-selected='true'] .el-tab__v { color: var(--el-ink); }
  .el-tab[aria-selected='true']::after { transform: none; }
  .el-tab:focus-visible { outline-offset: -3px; }

  /* Only the chosen step shows; the accordion heads are replaced by the tabs. */
  .el-panel__body { padding: 0; }
  .el-sec__h { display: none; }
  .el-sec + .el-sec::before { display: none; }
  .el-sec:not(.is-open) { display: none; }
  .el-sec__body, .el-sec.is-open .el-sec__body { grid-template-rows: 1fr; transition: none; }
  .el-sec.is-open .el-sec__pad { animation: el-tab-in 0.45s var(--el-ease) both; transition: none; }
  .el-sec__pad { padding: 4px 18px 16px; }
  #app[data-sheet='min'] .el-panel__body { visibility: hidden; }

  /* Horizontal option scrollers that bleed to the sheet edges */
  .el-swatches, .el-swatches--cord, .el-ptiles {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 18px;
    margin: 0 -18px;
    padding: 10px 18px 8px;
    gap: 16px;
    scrollbar-width: none;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 22px), transparent);
  }
  .el-swatches::-webkit-scrollbar, .el-ptiles::-webkit-scrollbar { display: none; }
  .el-opt, .el-ptile { flex: none; scroll-snap-align: start; }
  .el-swatches--lg .el-sw { --s: 52px; }
  .el-ptiles { gap: 10px; padding-top: 10px; }
  .el-ptile { width: 76px; }
  .el-ptile__name { font-size: 13.5px; margin-top: 9px; }
  .el-caption { margin-top: 6px; min-height: 0; }
  .el-caption__title { font-size: 19px; }
  .el-caption__sub { gap: 10px; font-size: 9.5px; }
  .el-note { font-size: 14.5px; margin-top: 4px; }
  .el-sizes { gap: 10px; }
  .el-size { padding: 12px 12px 11px; border-radius: 13px; }
  .el-size__art { height: 50px; margin-bottom: 6px; }
  .el-size__label { font-size: 24px; }
  .el-size__price { font-size: 16px; margin-top: 2px; }
  .el-size__blurb { font-size: 13.5px; }
  /* Three equal columns (minmax(0, 1fr): a long pendant name may never widen its card past the screen), the
     thumbnail over the name, so all three spots and their remove buttons are always in view. */
  .el-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 2px 0; }
  .el-slot__btn { padding: 7px 4px 8px; gap: 3px; }
  .el-slot__content { min-height: 0; gap: 3px; max-width: 100%; }
  .el-slot__thumb, .el-slot__empty { width: 34px; height: 34px; flex: none; border-radius: 9px; }
  .el-slot__thumb .el-pendant-art { width: 22px; height: 30px; }
  .el-slotdiag { width: 30px; height: 28px; }
  .el-slot__name { font-size: 14px; padding: 0 2px; }
  .el-slot__label { font-size: 9.5px; letter-spacing: 0.12em; }
  .el-slot__clear { width: 28px; height: 28px; top: -10px; right: -5px; }
  .el-slots__hint { min-height: 0; margin: 8px 0 0; font-size: 14px; }
  /* The resting sheet is short: the how-to line waits for the expanded sheet; the × on each spot covers removal. */
  #app:not([data-sheet='full']) .el-slots__hint { display: none; }

  /* Expanded sheet: the scrollers wrap into grids so every option is visible at once. */
  #app[data-sheet='full'] :is(.el-swatches, .el-ptiles) { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  #app[data-sheet='full'] .el-swatches--lg { justify-content: space-between; }
  #app[data-sheet='full'] .el-swatches--cord { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; row-gap: 16px; }
  #app[data-sheet='full'] .el-ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
  #app[data-sheet='full'] .el-ptile { width: auto; }

  .el-panel__foot {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: 16px;
    padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
  }
  .el-price { display: flex; flex-direction: column; min-width: 0; }
  .el-price__recap { display: none; }
  .el-price__toggle { gap: 6px; height: 24px; padding: 0; }
  .el-price__toggle .el-ico { width: 14px; height: 14px; }
  .el-price__count { font-size: 10px; letter-spacing: 0.1em; }
  .el-price__count::before { margin-right: 6px; }
  .el-price__label { font-size: 10px; letter-spacing: 0.2em; }
  .el-price__lines { left: 12px; right: 12px; bottom: calc(100% + 8px); }
  .el-price__row { justify-content: flex-start; }
  .el-price__total { font-size: 27px; }
  .el-cart { height: 50px; margin: 0; letter-spacing: 0.2em; }
}
/* Upright phones only (the bottom sheet; same test as hasSheet() in ui.js). */
@media (max-width: 899px) and (min-height: 501px), (max-width: 899px) and (orientation: portrait) {
  /* Pendants at the resting sheet: the spots become one-line chips (label beside the pendant), and a quiet line
     says how many pendants the strip holds, with "See all" to open the full grid. */
  #app:not([data-sheet='full']) .el-ptiles__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 -5px; }
  .el-ptiles__count { font-family: var(--el-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-ink-3); white-space: nowrap; }
  .el-ptiles__all { display: inline-flex; align-items: center; gap: 3px; height: 26px; margin-right: -6px; padding: 0 6px 0 8px; border-radius: 999px; font-family: var(--el-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-gold-ink); }
  .el-ptiles__all .el-ico { width: 14px; height: 14px; transform: rotate(180deg); }
  .el-ptiles__all:active { background: rgb(201 166 107 / 0.14); }
  #app:not([data-sheet='full']) .el-ptiles { padding-top: 7px; }
  #app:not([data-sheet='full']) .el-ptile__name { margin-top: 7px; }
  #app:not([data-sheet='full']) .el-ptile__thumb { aspect-ratio: 76 / 69; }
  #app:not([data-sheet='full']) .el-ptile__badge { top: calc(100% - 13px); }
  #app:not([data-sheet='full']) .el-slots { padding-top: 8px; }
  #app:not([data-sheet='full']) .el-slot__btn { flex-direction: row; justify-content: center; gap: 7px; padding: 7px 6px; min-height: 50px; }
  #app:not([data-sheet='full']) .el-slot__content { flex-direction: row; }
  #app:not([data-sheet='full']) .el-slot__name { display: none; }
  #app:not([data-sheet='full']) .el-slot__thumb, #app:not([data-sheet='full']) .el-slot__empty { width: 32px; height: 32px; }
  #app:not([data-sheet='full']) .el-slot__label { overflow: hidden; min-width: 0; }
  #app:not([data-sheet='full']) :is(.el-slot.is-next .el-slot__label, .el-slot__btn.is-on .el-slot__label)::after { position: absolute; top: 7px; left: 9px; margin: 0; }
}
/* Short phones (iPhone SE and landscape-ish heights): a slightly smaller stage keeps the options usable. */
@media (max-width: 899px) and (max-height: 700px) {
  #app { --el-stage-h: 53vh; }
  @supports (height: 1dvh) { #app { --el-stage-h: 53dvh; } }
  .el-brand__sub { display: none; }
  .el-price__total { font-size: 24px; }
  .el-cart { height: 46px; }
  .el-panel__foot { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .el-note { display: none; }
}
@keyframes el-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Narrow sheets: a colour step's tab shows its dot only (the name is in the step's caption below the tabs). */
@container el-panel (max-width: 559px) {
  .el-tab__v .el-dot + .el-tab__txt { display: none; }
}
/* Seven steps on a ~375 px phone: tighter tracking and padding so every tab fits without scrolling. */
@container el-panel (max-width: 430px) {
  .el-tabs { padding: 0 4px; }
  .el-tab { padding: 5px 3px 10px; }
  .el-tab__t { font-size: 9px; letter-spacing: 0.06em; }
  .el-tab__v { font-size: 13.5px; }
}

/* ============================================================================================================
   Phone held sideways (or any very short window): the stage on the left, the options in a side panel on the right
   with the tabs, the chosen step and the price stacked. ui.js switches the bottom-sheet logic off in this mode. */
@media (max-height: 500px) and (orientation: landscape) {
  #app { --el-land-w: clamp(320px, 45vw, 440px); --el-gap: 8px; }
  #stage {
    inset: 0 calc(var(--el-land-w) + 8px + env(safe-area-inset-right) - 24px) 0 0;
    height: auto;
    transform: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .el-hud { inset: 0 calc(var(--el-land-w) + 16px + env(safe-area-inset-right)) 0 0; height: auto; }
  .el-hud__close { top: 10px; left: calc(10px + env(safe-area-inset-left)); }
  .el-hud__actions { top: 10px; right: 10px; }
  .el-brand { top: 6px; }
  .el-brand__word { font-size: 27px; }
  .el-brand__sub { display: none; }
  .el-seg--book { bottom: 10px; transform: translateX(-50%); }
  .el-seg--backdrop { bottom: 10px; left: calc(10px + env(safe-area-inset-left)); transform: none; }
  .el-toasts { bottom: 56px; transform: translateX(-50%); }
  .el-info { top: 10px; left: 10px; right: 10px; max-height: calc(100% - 20px); }

  .el-panel {
    top: 8px;
    bottom: 8px;
    left: auto;
    right: calc(8px + env(safe-area-inset-right));
    width: var(--el-land-w);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgb(62 1 1 / 0.05), 0 24px 50px -24px rgb(33 3 3 / 0.4), 0 8px 20px -10px rgb(33 3 3 / 0.2);
  }
  .el-ui:not(.is-ready) .el-panel { transform: translateX(24px); }
  .el-sheet-bar { height: 32px; cursor: default; touch-action: auto; }
  .el-sheet-handle { display: none; }
  .el-sheet-bar .el-iconbtn { width: 32px; height: 32px; }

  /* The side panel scrolls vertically, so the option scrollers wrap into grids (as in the expanded sheet). */
  .el-panel__body { overflow-y: auto; }
  .el-sec__pad { padding: 2px 14px 12px; }
  :is(.el-swatches, .el-ptiles) { flex-wrap: wrap; overflow: visible; margin: 0; padding: 8px 0 4px; -webkit-mask-image: none; mask-image: none; }
  .el-swatches--lg { justify-content: space-between; }
  .el-swatches--lg .el-sw { --s: 46px; }
  .el-swatches--cord { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; row-gap: 12px; }
  .el-swatches--cord .el-sw { --s: 40px; }
  .el-ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
  .el-ptile { width: auto; }
  .el-ptile__name { font-size: 13px; margin-top: 8px; }
  .el-caption__title { font-size: 18px; }
  .el-note { display: none; }
  .el-size__art { height: 38px; margin-bottom: 4px; }
  .el-size__blurb { display: none; }

  .el-panel__foot { column-gap: 12px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  .el-price__total { font-size: 22px; }
  .el-cart { height: 44px; letter-spacing: 0.16em; font-size: 11px; }
  .el-cart > span { gap: 8px; }
}

@media (max-width: 360px) {
  .el-seg__opt { padding: 0 11px 0 9px; }
  .el-seg--book .el-seg__opt span { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Notebooks option: reuse the size cards with a line-art book in place of the scale drawing. */
.el-nb__art { display: grid; place-items: center; color: var(--el-ink-2); }
.el-nb__art .el-ico { width: 30px; height: 30px; }