/* Heaven Halo shop — shared by the homepage and the /de /es /fr /ja pages.
   Everything is scoped to the shop, its dialogs and its toast, and the shop
   carries its own light-theme tokens: it renders identically on the homepage
   (light only) and on the locale pages (which follow the OS dark theme), and
   the locale pages' bare element styles (h2, p, ul, a, table…) never leak in. */

.shop, .sizing-dialog, .halo-lightbox, .halo-toast {
  --gold:       #B68A2E;
  --gold-mid:   #E9C46A;
  --gold-light: #FFE8A8;
  --gold-deep:  #8C6A22;
  --ink:        #1F2A44;
  --ink-body:   #3D4A66;
  --ink-mute:   #5A6680;
  --ink-faint:  #5F6B85;   /* ≥ 4.5:1 on #FBFCFE (was #5F6B85, 4.1:1) */
  --border:       rgba(95,143,201,0.30);
  --border-soft:  rgba(168,201,238,0.40);
  --border-gold:  rgba(182,138,46,0.30);
  --danger:     #A3322A;
  color-scheme: light;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  text-align: left;
}
.shop *, .shop *::before, .shop *::after,
.sizing-dialog *, .sizing-dialog *::before, .sizing-dialog *::after,
.halo-lightbox *, .halo-lightbox *::before, .halo-lightbox *::after { box-sizing: border-box; }
.shop :where(h2, h3, p, ul, ol, li, figure, fieldset, legend, table, th, td, form, label),
.sizing-dialog :where(h3, p, ul, ol, li, table, th, td),
.halo-lightbox :where(figure, figcaption) { margin: 0; padding: 0; line-height: 1.5; }
.shop :where(p, ul, ol, li, h4), .sizing-dialog :where(p, ul, ol, li) { font-size: inherit; color: inherit; }
.shop :where(a), .sizing-dialog :where(a) { color: var(--gold-deep); }
.shop :where(strong, b), .sizing-dialog :where(strong, b) { color: var(--ink); }
.shop :where(em), .sizing-dialog :where(em) { color: inherit; }
.sizing-dialog :where(tr:hover td) { background: transparent; }
.shop .sr-only, .sizing-dialog .sr-only, .halo-lightbox .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* On a dark page (locale pages, dark OS theme) the shop is a light card, so it
   needs an opaque fill rather than frosted glass over the dark background. */
@media (prefers-color-scheme: dark) {
  .shop .shop-inner { background: #FBFCFE; }
}

/* Shared bits the shop borrows from the homepage, scoped so they look the same everywhere */
.shop .eyebrow { line-height: 1.5; }
.shop .trust {
  text-align: center;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 18px;
}
.shop .trust .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-mid); margin: 0 8px; vertical-align: middle; }
.shop .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.shop .card {
  padding: 22px 22px 24px; border-radius: 20px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 24px rgba(46,78,126,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.shop .card:hover { transform: translateY(-4px); border-color: var(--border-gold); }
.shop .card .ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFFFFF 0%, var(--gold-light) 100%); border: 1px solid var(--border-gold); margin-bottom: 14px; font-size: 20px; }
.shop .card h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.005em; }
.shop .card p  { font-size: 14px; color: var(--ink-body); line-height: 1.5; }
.shop p.lead { line-height: 1.6; }

/* ── Shop: Heaven Halo (AI smart ring) ───────────────── */
.shop {
  position: relative; z-index: 1;
  max-width: 1140px; margin: 20px auto 90px;
  padding: 0 clamp(20px, 5vw, 56px);
}
.shop-inner {
  padding: 52px clamp(22px, 4vw, 52px);
  border-radius: 36px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 24px 60px rgba(46,78,126,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}
.shop .eyebrow {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-deep);
  text-align: center; margin-bottom: 12px;
}
.shop h2 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  text-align: center; color: var(--ink);
  margin-bottom: 8px; letter-spacing: -0.01em;
}
.shop h2 em {
  font-style: italic;
  background: linear-gradient(180deg, #E9C46A 0%, #B68A2E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.shop p.lead {
  text-align: center; color: var(--ink-body);
  font-size: 17px; max-width: 640px; margin: 0 auto;
}

.product {
  display: grid; gap: clamp(24px, 4vw, 52px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  margin-top: 42px;
}
/* The spec list makes the right column tall; let the ring ride alongside it
   instead of stranding it in the middle of a column of white space. */
.halo-col {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 28px; align-self: start;
}

.in-box {
  padding: 20px 22px; border-radius: 20px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.in-box-title {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 12px;
}
.in-box ul { list-style: none; display: grid; gap: 8px; }
.in-box li {
  position: relative; padding-left: 20px;
  font-size: 14px; color: var(--ink-body); line-height: 1.45;
}
.in-box li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-mid));
  border: 1px solid var(--border-gold);
}

/* The ring itself — the real product render, in the finish the visitor picked.
   The stage keeps a fixed square, so swapping finishes or views never moves
   the page (no layout shift), whatever the render's own aspect ratio.
   touch-action: pan-y — a vertical swipe over the stage still scrolls the
   page on a phone; only horizontal drags reach the 360° viewer. */
.halo-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 28px; overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(ellipse 72% 60% at 50% 32%, rgba(168,201,238,0.42), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF3FA 60%, #DCE6F3 100%);
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 32px rgba(46,78,126,0.08);
}
/* soft light pooled behind the product */
.halo-stage::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: 18%; bottom: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 45%, transparent 72%);
  pointer-events: none;
}
/* the author display rules below would otherwise beat the UA's [hidden] */
.halo-stage [hidden] { display: none !important; }
.halo-photo, .halo-overlay {
  position: absolute; inset: 12% 7% 9%;
  display: block;
}
.halo-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: 50% 55%;
  transition: opacity .28s ease;
}
.halo-stage[data-view="hero"] .halo-photo img { animation: halo-float 7s ease-in-out infinite; }
.halo-photo img.swapping { opacity: 0; }
/* The unboxing shot is a full photograph, not a cut-out: let it fill the card. */
.halo-stage.is-photo .halo-photo { inset: 0; }
.halo-stage.is-photo .halo-photo img { object-fit: cover; object-position: 50% 50%; }
.halo-stage.is-photo::before { display: none; }
@keyframes halo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Whole-stage zoom button (every view except 360°, which is dragged instead) */
.halo-zoom {
  position: absolute; inset: 0; z-index: 1;
  border: 0; padding: 0; margin: 0; background: transparent;
  cursor: zoom-in; border-radius: inherit;
}
.halo-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; }
.halo-zoom .zoom-ic {
  position: absolute; right: 14px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.86); border: 1px solid var(--border-soft);
  color: var(--ink-mute);
}

/* "Optical sensors" callout on the inside view — real text, so it localises */
.halo-overlay { pointer-events: none; z-index: 2; }
.sensor-mark {
  position: absolute; transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(140,106,34,0.55), 0 2px 8px rgba(11,16,32,0.25);
}
.sensor-label {
  position: absolute; transform: translateX(-50%);
  font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-gold); border-radius: 999px;
  padding: 6px 11px;
  box-shadow: 0 4px 12px rgba(46,78,126,0.14);
}
.sensor-label::before {
  content: ''; position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: var(--stem, 18px);
  background: rgba(140,106,34,0.7);
}

/* 360° viewer */
.halo-spin {
  position: absolute; inset: 15% 9% 7%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: pan-y;
  border-radius: 20px;
  -webkit-user-select: none; user-select: none;
}
.halo-spin.dragging { cursor: grabbing; }
.halo-spin:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.halo-spin img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none;
}
.spin-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2;
  font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-mute); background: rgba(255,255,255,0.86);
  border: 1px solid var(--border-soft); border-radius: 999px; padding: 7px 12px;
  pointer-events: none; transition: opacity .3s ease;
}
.spin-hint.gone { opacity: 0; }
.spin-play {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); border: 1px solid var(--border-soft);
  color: var(--ink); font-size: 14px; cursor: pointer;
}
.spin-play:hover { border-color: var(--gold); }
.spin-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.halo-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--border-gold);
  pointer-events: none;
}

/* Views under the stage */
.halo-views {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.halo-view {
  position: relative;
  width: 60px; height: 60px; padding: 4px;
  border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FA 100%);
  border: 1px solid var(--border-soft);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.halo-view:hover { border-color: var(--gold); transform: translateY(-1px); }
.halo-view[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(233,196,106,0.45), 0 6px 14px rgba(182,138,46,0.18);
}
.halo-view picture, .halo-view img { display: block; width: 100%; height: 100%; }
.halo-view img { object-fit: contain; border-radius: 10px; }
.halo-view.photo img { object-fit: cover; }
.halo-view .v360 {
  position: absolute; inset: auto 3px 3px auto;
  font-family: 'Space Mono', monospace; font-size: 9.5px; font-weight: 700;
  color: var(--gold-deep); background: rgba(255,255,255,0.92);
  border-radius: 6px; padding: 1px 4px;
}
.halo-view:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* "Five finishes" banner — one quiet moment above the product */
.halo-five {
  position: relative; max-width: 660px; margin: 30px auto 0;
}
.halo-five-art { position: relative; }
.halo-five-art img { display: block; width: 100%; height: auto; }
.five-hit {
  position: absolute; top: 0; bottom: 0;
  border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer;
  border-radius: 18px;
}
.five-hit span {
  position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 100%);
  font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
  opacity: 0; transition: opacity .2s ease;
}
.five-hit:hover span, .five-hit:focus-visible span, .five-hit[aria-pressed="true"] span { opacity: 1; }
.five-hit[aria-pressed="true"] span { color: var(--gold-deep); }
.halo-five-art.unmeasured .five-hit span { display: none; }
.five-hit:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.halo-five figcaption {
  margin-top: 30px; text-align: center;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-mute);
}
.halo-five figcaption em { font-style: normal; color: var(--gold-deep); }

/* Finish picker — native radios (arrow keys for free), drawn as round swatches.
   The legend names the selected finish, so five fit one row even on a phone. */
.finish-picker { margin-bottom: 22px; border: 0; padding: 0; min-width: 0; }
.finish-picker legend {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px; padding: 0;
}
.finish-picker legend span { color: var(--ink); }
.finish-row { display: flex; flex-wrap: wrap; gap: 12px; }
.finish-opt { position: relative; width: 48px; height: 48px; }
.finish-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.finish-chip {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.finish-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sw);
  background-image: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16), 0 1px 3px rgba(46,78,126,0.25);
}
/* White on a white card: give it a real edge so it never disappears */
.finish-dot.is-white {
  background-image: linear-gradient(145deg, #FFFFFF 0%, rgba(255,255,255,0) 50%, rgba(46,78,126,0.16) 100%);
  box-shadow: inset 0 0 0 1px #AEB6C2, 0 1px 3px rgba(46,78,126,0.3);
}
.finish-opt:hover .finish-chip { border-color: var(--gold); }
.finish-opt input:checked + .finish-chip {
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(233,196,106,0.35), 0 6px 14px rgba(182,138,46,0.22);
}
.finish-opt input:focus-visible + .finish-chip { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

/* Share */
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; margin-top: 12px;
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--ink-body); cursor: pointer;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-soft); border-radius: 999px;
}
.share-btn:hover { border-color: var(--gold); }
.share-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.halo-toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: #1F2A44; color: #FFFFFF; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(11,16,32,0.3);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  overflow-wrap: anywhere;
}
.halo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Zoom lightbox — native modal <dialog>: Esc and the focus trap come from the platform */
.halo-lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  margin: 0; padding: 16px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.halo-lightbox:not([open]) { display: none; }
.halo-lightbox::backdrop { background: rgba(11,16,32,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.halo-lightbox figure {
  position: relative; margin: 0;
  width: min(92vw, 88vh, 900px); aspect-ratio: 1 / 1;
  background: #FFFFFF; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(11,16,32,0.4);
}
.halo-lightbox img { width: 100%; height: 100%; object-fit: contain; display: block; }
.halo-lightbox img.cover { object-fit: cover; }
.halo-lightbox figcaption {
  position: absolute; left: 16px; bottom: 14px; right: 70px;
  font-size: 13px; color: var(--ink-mute);
}
.halo-lightbox .lb-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); border: 1px solid var(--border-soft);
  color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.halo-lightbox .lb-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Product copy */
.product-info h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px;
}
.product-info .tagline {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 18px;
}
.product-info > p { font-size: 15px; color: var(--ink-body); margin-bottom: 22px; }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.price {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 40px;
  line-height: 1; color: var(--ink);
}
.price-note { font-size: 13px; color: var(--ink-mute); }

.halo-specs { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; }
.halo-specs li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: var(--ink-body); line-height: 1.5;
}
.halo-specs li .ic {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold-light) 100%);
  border: 1px solid var(--border-gold); font-size: 15px;
}
.halo-specs li strong { color: var(--ink); font-weight: 700; }

/* Ring size picker — a ring you can't size is a ring you can't sell */
.size-picker { margin-bottom: 26px; }
.size-label {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
.size-label span { color: var(--ink-faint); }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-row.alt { margin-top: 8px; }
.size-chip.wide { min-width: 0; padding: 10px 18px; font-weight: 700; }
.size-chip {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--ink-body);
  min-width: 46px; min-height: 44px; padding: 10px 14px;
  border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border-soft);
  transition: all .2s ease;
}
.size-chip:hover { border-color: var(--gold); background: #FFFDF6; transform: translateY(-1px); }
.size-chip[aria-checked="true"] {
  background: linear-gradient(180deg, #FFF6DC 0%, var(--gold-light) 100%);
  border-color: var(--gold); color: var(--gold-deep);
  box-shadow: 0 6px 16px rgba(182,138,46,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
}
.size-hint { font-size: 13px; color: var(--ink-mute); margin-top: 10px; max-width: 460px; }
.halo-trust { text-align: left; margin-top: 20px; }

/* ── Sizing-kit dialog ───────────────────────────────── */
/* Native <dialog>: Escape-to-close and the focus trap come from the
   platform, so there's no hand-rolled trap to get subtly wrong. */
/* The dialog fills the viewport and centres the card inside it, so a click
   landing anywhere outside the card resolves to the dialog itself — that is
   what makes click-to-dismiss reliable. */
.sizing-dialog {
  width: 100vw; max-width: 100vw;
  height: 100vh; height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  margin: 0; padding: 16px; border: none;
  background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* display:flex above would otherwise defeat the UA's display:none */
.sizing-dialog:not([open]) { display: none; }
.sizing-dialog::backdrop {
  background: rgba(11,16,32,0.52);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sizing-dialog .sd-inner {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px); overflow-y: auto;
  padding: 34px clamp(20px, 4vw, 38px) 30px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 100%);
  border: 1px solid var(--border-soft);
  box-shadow: 0 40px 90px rgba(11,16,32,0.34), inset 0 1px 0 rgba(255,255,255,0.9);
}
.sd-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-soft);
  color: var(--ink-mute); font-size: 20px; line-height: 1;
  cursor: pointer; transition: all .2s ease;
}
.sd-close:hover { color: var(--ink); border-color: var(--gold); background: #FFFDF6; }
.sd-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.sizing-dialog h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(24px, 4vw, 30px); letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 8px;
}
.sd-lead { font-size: 15px; color: var(--ink-body); margin-bottom: 22px; }

.sd-steps { list-style: none; display: grid; gap: 14px; margin-bottom: 24px; }
.sd-steps li { display: flex; gap: 13px; align-items: flex-start; }
.sd-steps .n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--gold-deep);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold-light) 100%);
  border: 1px solid var(--border-gold);
}
.sd-steps p { font-size: 14px; color: var(--ink-body); line-height: 1.5; }
.sd-steps strong { color: var(--ink); }

.sd-chart-title {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
.sd-chart-scroll { overflow-x: auto; margin-bottom: 8px; }
.sd-chart { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 13px; }
.sd-chart th, .sd-chart td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.sd-chart th {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.sd-chart td { color: var(--ink-body); }
.sd-chart td:first-child { font-weight: 700; color: var(--ink); }
.sd-note { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 24px; }

.sd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sd-actions .buy-btn { padding: 15px 26px; font-size: 15px; }
.sd-secondary {
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--gold-deep); background: none; border: none;
  padding: 15px 12px; cursor: pointer; border-radius: 999px;
}
.sd-secondary:hover { text-decoration: underline; }
.sd-close:focus-visible,
.sd-secondary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .sizing-dialog .sd-inner { padding: 30px 18px 24px; border-radius: 22px; }
  .sd-actions .buy-btn { width: 100%; }
  .sd-secondary { width: 100%; }
}

.buy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 36px; border-radius: 999px;
  background: linear-gradient(160deg, #FFE8A8 0%, #E9C46A 55%, #B68A2E 100%);
  border: 1px solid var(--gold);
  color: #2A1F06; text-decoration: none;
  font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 800;
  box-shadow: 0 16px 34px rgba(182,138,46,0.34), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.buy-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(182,138,46,0.42), inset 0 1px 0 rgba(255,255,255,0.7); }
.buy-note {
  margin-top: 14px; font-size: 13px; color: var(--ink-mute); max-width: 460px;
}

/* "Works with the app" strip */
.pairing { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border-soft); }
.pairing > h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  text-align: center; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em;
}
.pairing > h3 em {
  font-style: italic;
  background: linear-gradient(180deg, #E9C46A 0%, #B68A2E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pairing > p.lead { margin-bottom: 28px; font-size: 16px; }

/* Two columns only when there's genuinely room for both */
@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked: a pinned ring would have the copy below it scroll over the top. */
  .halo-col { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
  .halo-stage { max-width: 380px; width: 100%; margin: 0 auto; }
  .product-info { max-width: 640px; margin: 0 auto; }
}

/* ── Keyboard focus ─────────────────────────────────────── */
.buy-btn:focus-visible           { outline: 3px solid var(--gold-deep); outline-offset: 4px; }
.size-chip:focus-visible         { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── Reservation form ───────────────────────────────────── */
.reserve {
  margin-top: 4px; padding: 22px 22px 20px; border-radius: 22px;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 28px rgba(46,78,126,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
}
.reserve[hidden], .reserve-done[hidden], .mail-fallback[hidden] { display: none !important; }
.reserve-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--ink);
  margin-bottom: 4px !important;
}
.reserve-summary { font-size: 14px; color: var(--ink-body); margin-bottom: 16px !important; }
.reserve-summary strong { color: var(--ink); }
.reserve .field { margin-bottom: 14px; }
.reserve label.fl {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.reserve label.fl span { font-weight: 500; color: var(--ink-faint); }
.reserve input[type="email"], .reserve input[type="text"], .reserve select {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: 500 16px/1.3 'Nunito', system-ui, sans-serif; color: var(--ink);
  background: #FFFFFF; border: 1px solid rgba(95,143,201,0.55); border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.reserve select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6680' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.reserve input:focus-visible, .reserve select:focus-visible {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233,196,106,0.45);
}
.reserve [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.reserve .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-err { margin-top: 6px !important; font-size: 13px; font-weight: 700; color: var(--danger); }
.field-err[hidden] { display: none; }
.reserve .check {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px;
  font-size: 13.5px; color: var(--ink-body); line-height: 1.45; cursor: pointer;
}
.reserve .check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--gold-deep); cursor: pointer; }
.reserve .check input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* honeypot: off-screen, never focusable, never announced */
.reserve .hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.reserve .buy-btn { width: 100%; border: 1px solid var(--gold); cursor: pointer; }
.reserve .buy-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.reserve-calm {
  margin-top: 12px !important; font-size: 14px; font-weight: 700; color: var(--ink); text-align: center;
}
.reserve-steps { margin-top: 14px !important; padding: 14px 16px !important; border-radius: 14px; background: #F6F9FD; border: 1px solid var(--border-soft); }
.reserve-steps h4 { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; margin: 0 0 8px; }
.reserve-steps ol { margin: 0; padding-left: 20px !important; font-size: 13.5px; color: var(--ink-body); line-height: 1.5; }
.reserve-steps li { margin: 3px 0 !important; padding-left: 2px; }
.reserve-privacy { margin-top: 10px !important; font-size: 12.5px; color: var(--ink-mute); }
.form-err {
  margin: 0 0 14px !important; padding: 12px 14px; border-radius: 12px;
  background: #FFF4F2; border: 1px solid rgba(163,50,42,0.35); color: #7A231D; font-size: 14px; font-weight: 600;
}
.form-err[hidden] { display: none; }
.form-err a { color: #7A231D; font-weight: 800; }
.reserve-done {
  margin-top: 4px; padding: 26px 22px; border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF0 100%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 10px 28px rgba(182,138,46,0.12);
}
.reserve-done:focus { outline: none; }
.reserve-done:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.reserve-done .tick {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FFF6DC 0%, var(--gold-light) 100%); border: 1px solid var(--gold);
  color: var(--gold-deep); font-size: 20px; font-weight: 800;
}
.reserve-done h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.reserve-done p { font-size: 15px; color: var(--ink-body); margin-bottom: 8px !important; }
.reserve-done .reserve-steps h4 { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; margin: 0 0 8px; }
.mail-fallback { margin-top: 12px; }
.mail-fallback .buy-btn { width: auto; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .halo-photo img,
  .halo-stage[data-view="hero"] .halo-photo img { animation: none !important; transition: none !important; }
  .halo-view, .finish-chip, .five-hit span, .spin-hint, .halo-toast, .shop .card, .buy-btn, .reserve input, .reserve select { transition: none !important; }
  .halo-view:hover, .shop .card:hover, .buy-btn:hover { transform: none; }
}

/* ── Phones ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shop .grid { gap: 12px; }
  .shop .card { padding: 18px; }
  .shop .card h3 { font-size: 17px; }
  .shop .card p { font-size: 13px; }
  .shop { margin: 10px 14px 60px; padding: 0; }
  .shop-inner { padding: 34px 20px; border-radius: 24px; }
  .shop h2 { font-size: clamp(24px, 6vw, 32px); }
  .shop p.lead { font-size: 15px; }
  .product { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .halo-stage { max-width: 320px; margin: 0 auto; width: 100%; }
  .halo-views { gap: 6px; }
  .halo-view { width: 48px; height: 48px; border-radius: 12px; padding: 3px; }
  .finish-row { gap: 10px; }
  .halo-five { margin-top: 22px; }
  .halo-five figcaption { margin-top: 26px; font-size: 10px; letter-spacing: 0.2em; }
  .product-info h3 { font-size: clamp(24px, 6vw, 30px); }
  .price { font-size: 34px; }
  .buy-btn { width: 100%; padding: 16px 24px; min-height: 52px; }
  .buy-note { max-width: none; }
  .pairing { margin-top: 34px; padding-top: 28px; }
  .reserve { padding: 18px 16px; }
  .reserve .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* Reservation form vs. email link. html.js is set by a tiny <head> script (and
   removed again if /halo-shop.js never runs), so the right one is there from the
   first paint and nothing jumps. */
.reserve { display: none; }
html.js .reserve { display: block; }
html.js .mail-fallback { display: none; }
html.js .mail-fallback.show { display: block; }

/* ── Buy section: the ring card (founder's reference, 8 Nov 2026) ─────────
   The renders in /media/halo/buy/ are the current ring: HH etched on the band,
   sensor lights on. Colour names are finishes, never materials. */
.product { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); }
.buy-card {
  padding: 44px 22px 34px; border-radius: 30px; text-align: center;
  background: #FDFBF7 url('/media/halo/buy/halo-buy-card-bg.webp') center / cover no-repeat;
  border: 1px solid #E8CF9C;
  box-shadow: 0 22px 60px rgba(120,92,40,0.14), inset 0 1px 0 #fff;
}
.buy-lotus { display: block; width: 92px; height: auto; margin: 0 auto 10px; color: #A9781F; }
.buy-house {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(16px, 1.9vw, 24px);
  letter-spacing: 0.22em; text-transform: uppercase; color: #8C6A22;
}
.buy-name {
  font-family: 'Fraunces', serif; font-weight: 400; line-height: 1.12; letter-spacing: -0.01em;
  font-size: clamp(36px, 3.75vw, 56px); margin-top: 6px; white-space: nowrap;
  color: #A9781F;
  background: linear-gradient(100deg, #8C6A22 0%, #D3A23F 42%, #8C6A22 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.buy-kind {
  margin-top: 8px; font-family: 'Nunito', sans-serif; font-weight: 600;
  font-size: clamp(13px, 1.45vw, 18px); letter-spacing: 0.3em; color: var(--ink);
}
.buy-stage { margin: 22px auto 0; width: min(78%, 340px); aspect-ratio: 986 / 1190; }
.buy-stage .halo-photo { position: static; display: block; width: 100%; height: 100%; }
.buy-stage .halo-photo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .18s ease; }
.buy-finishes { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.buy-rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.buy-ring { position: relative; display: block; cursor: pointer; padding: 6px 1px 8px; border-radius: 14px; border: 1.5px solid transparent; transition: border-color .15s ease, background .15s ease; }
.buy-ring input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.buy-ring img { display: block; width: 100%; height: auto; pointer-events: none; }
.buy-ring span {
  display: block; margin-top: -2px; font-size: clamp(9px, 0.82vw, 11px); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6B4F14; line-height: 1.25;
}
.shop[lang="ja"] .buy-ring span { word-break: keep-all; letter-spacing: 0; }
.buy-ring:hover { background: rgba(255,250,235,0.7); }
.buy-ring:has(input:checked) { border-color: var(--gold); background: rgba(255,250,235,0.85); }
.buy-ring:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.buy-rule { height: 1px; margin: 20px 8% 18px; background: linear-gradient(90deg, transparent, #D9B46A, transparent); }
.buy-included { text-align: left; padding: 0 10px; }
.buy-included-title {
  display: inline-block; padding: 7px 18px; border-radius: 999px; border: 1px solid #D9B46A;
  background: rgba(255,255,255,0.75); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: #6B4F14;
}
.buy-included ul { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.buy-included li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink); line-height: 1.35; }
.buy-included li::before {
  content: ''; position: absolute; left: 4px; top: .36em; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE8A8, #D9A63B 60%, #A9781F);
}
.halo-specs li .ic {
  background: linear-gradient(160deg, #FFF3D4, #FBDD9C); border: 1px solid #F0D49A;
  box-shadow: 0 3px 8px rgba(182,138,46,0.22), inset 0 1px 0 #fff; border-radius: 11px;
}
.preorder-open { display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 4px;
  background: linear-gradient(180deg, #FFD65F 0%, #F4AE2C 100%); color: #2B1D05; }
.preorder-open img { width: 24px; height: auto; display: block; }
html.js .preorder-open:not([hidden]) { display: inline-flex; }
html.js .reserve.is-collapsed { display: none; }
.product-info > .buy-note { margin-top: 14px; }
.product-info > .halo-trust { text-align: left; }
.product-info > .halo-trust + .share-btn { margin-top: 14px; }
.buy-closing {
  margin: 16px 10px 0; text-align: center; font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.3; color: #8C5E12; text-wrap: balance;
}
@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; }
  .halo-col { position: static; }
  .buy-card { padding: 34px 14px 28px; border-radius: 26px; }
  .buy-house { font-size: 18px; }
  .buy-name { font-size: clamp(36px, 12vw, 56px); }
  .buy-kind { font-size: 14px; }
  .buy-ring span { font-size: 9.5px; letter-spacing: 0.04em; }
  .buy-included li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .buy-stage .halo-photo img, .buy-ring { transition: none !important; } }

/* ── Auto-adjust, smallest phone to large monitor ─────────────────────────
   The card sizes itself from its own width (cqw), so it holds together at any
   column size; browsers without container units keep the values above. */
.shop { max-width: clamp(1140px, 78vw, 1560px); }
.halo-col { container-type: inline-size; }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(20px, 3vw, 60px); }
  .halo-col { position: static; max-width: none; margin: 0; }
  .product-info { max-width: none; margin: 0; }
}
/* Riding alongside only works when the whole card fits on the screen. */
@media (min-width: 900px) and (min-height: 1120px) { .halo-col { position: sticky; top: 28px; } }
@media (max-width: 899px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .halo-col { position: static; max-width: 520px; margin: 0 auto; width: 100%; }
  .product-info { max-width: 600px; margin: 0 auto; width: 100%; }
}
.buy-card { padding: clamp(24px, 11cqw, 56px) clamp(8px, 5cqw, 30px) clamp(22px, 8cqw, 44px); border-radius: clamp(22px, 8cqw, 36px); }
.buy-lotus { width: clamp(62px, 25cqw, 132px); }
.buy-house { font-size: clamp(13px, 6.1cqw, 30px); letter-spacing: 0.2em; }
.buy-name { font-size: clamp(30px, 14cqw, 76px); }
.buy-kind { font-size: clamp(11px, 4.2cqw, 21px); letter-spacing: 0.24em; }
.buy-stage { width: min(72cqw, 520px); }
.buy-ring span { font-size: clamp(8px, 2.7cqw, 13px); letter-spacing: 0.02em; }
/* The narrowest screens: three rings over two, so names and taps keep their size. */
@container (max-width: 265px) {
  .buy-rings { display: flex; flex-wrap: wrap; justify-content: center; }
  .buy-ring { flex: 0 0 31%; }
  .buy-ring span { font-size: 10px; }
}
.buy-included { padding: 0 clamp(4px, 2.6cqw, 14px); }
.buy-included-title { font-size: clamp(10.5px, 3.4cqw, 16px); letter-spacing: 0.14em; }
.buy-included li { font-size: clamp(14px, 4.2cqw, 20px); padding-left: clamp(20px, 7cqw, 32px); }
.buy-closing { font-size: clamp(14.5px, 5.1cqw, 25px); margin-left: clamp(2px, 2.5cqw, 12px); margin-right: clamp(2px, 2.5cqw, 12px); }
.camera-size {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; max-width: 520px;
  border-radius: 14px; background: #FFFBF0; border: 1px solid #F0D49A;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-body);
}
.camera-size strong { color: var(--ink); }
.camera-size a { color: var(--gold-deep); font-weight: 700; text-decoration: underline; display: inline-block; padding: 2px 0; }
@media (max-width: 480px) {
  .shop { margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; }
  .shop-inner { padding-left: 10px; padding-right: 10px; border-radius: 24px; }
  .product-info { padding: 0 6px; }
}
/* Small phones: Menu stays (it holds Shop), the Shop link steps aside, Download tightens. */
@media (max-width: 400px) {
  .top-nav .top-shop { display: none; }
  .top-nav { gap: 2px; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 14px; padding-right: 14px; }
  .topbar .brand { font-size: 17px; gap: 8px; }
  .topbar .brand-mark { width: 24px; height: 24px; }
}
@media (max-width: 350px) {
  .top-nav .top-link { padding-left: 6px; padding-right: 6px; }
  .top-nav .top-cta { padding-left: 9px; padding-right: 9px; letter-spacing: 0.02em; }
  .size-row { gap: 6px; }
}
/* As on the English homepage: below 360px Download steps aside (the page's own Download section stays). */
@media (max-width: 359px) { .top-nav .top-cta { display: none; } }
@media (min-width: 1500px) {
  .product-info h3 { font-size: 46px; }
  .product-info p { font-size: 18px; }
  .halo-specs li { font-size: 17px; }
  .size-hint, .buy-note, .camera-size { font-size: 15px; max-width: 620px; }
}