/* Uyali Nudgeball product page.
   Layout: gallery and buy box side by side, then one dark statement band, then quiet white sections.
   Black and white for structure, one lime signal for price and live states (Uyali brand layer). */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* Uyali tokens */
  --ink: #0b0b0c;
  --paper: #ffffff;
  --ground: #f3f3f1;
  --fill: #f0f0ed;
  --line: #e4e4e0;
  --muted: #66666b;
  --text-2: #4a4a4f;
  --lime: #b5f23d;
  --lime-soft: #edfacd;
  --lime-text: #3c7300;
  --star: #f5a300;          /* review gold: star ratings only */
  --night: #0b0b0c;
  --night-2: #17171a;
  --night-line: #2a2a2e;
  --night-muted: #a9a9af;
  /* Sticker fills: backgrounds only, always with ink text */
  --st-zellige: #8fc1ff;
  --st-saffron: #ffc94a;
  --st-terracotta: #ff8a5c;
  --st-mint: #8de0b8;
  --st-rose: #ffb8d6;
  /* Type */
  --font: Geist, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Layout */
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 450 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }   /* each control shows its own pressed or chosen state */
a { color: inherit; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; }
h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.night :focus-visible, .close :focus-visible, .foot :focus-visible { outline-color: var(--paper); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.sprite { position: absolute; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgb(181 242 61 / .3); }
.launch-note { padding-top: 16px; }
.launch-note-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); font-size: 14px; }
.launch-note-in strong { display: block; color: var(--ink); font-weight: 750; }
.launch-note-in p { color: var(--text-2); }
.launch-note-in a { flex: none; font-weight: 650; text-underline-offset: 4px; }
.launch-note-in a .ico { width: 1em; height: 1em; vertical-align: -.15em; }
.buy-policy-links, .foot-policy-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.buy-policy-links { margin-top: 14px; color: var(--text-2); }
.foot-policy-links { padding-block: 6px 14px; }
.foot-policy-links a, .buy-policy-links a { text-underline-offset: 4px; }
.app-preview-link { margin-top: 22px; }
.cart-enquiry { margin-top: 12px; background: var(--paper); border: 1px solid var(--ink); text-decoration: none; }
@media (max-width: 600px) { .launch-note-in { align-items: flex-start; flex-direction: column; padding: 16px; } }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-s); background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }

/* ── Announcement ── */
/* ── Shops strip: the same on every page ── */
.shops { background: var(--night); color: var(--paper); font-size: 13px; font-weight: 600; padding-top: env(safe-area-inset-top, 0px); }
.shops-in { display: flex; align-items: center; gap: 2px; min-height: 44px; }
.shops a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--night-muted); white-space: nowrap; text-decoration: none; }
.shops a:first-child { margin-left: -10px; }
.shops a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
/* The shop you are in is underlined as well as coloured, so it does not rest on colour alone. */
.shops a[aria-current] { color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }
.shops :focus-visible { outline-color: var(--paper); }
.shops-note { display: none; margin-left: auto; font-weight: 550; }
.shops-note .dot { display: inline-block; margin-right: 10px; vertical-align: 1px; }
@media (min-width: 720px) { .shops-note { display: block; } }
/* "Sell on Uyali" sits at the right-hand end, on screens wide enough to hold it on the one line.
   On the Nudgeball page it follows the pre-order note. */
.shops a.shops-sell { display: none; margin-left: auto; margin-right: -10px; }
@media (min-width: 375px) { .shops a.shops-sell { display: inline-flex; } }
@media (min-width: 720px) { .shops-note + a.shops-sell { margin-left: 8px; } }
.announce { background: var(--night); color: var(--paper); font-size: 13px; font-weight: 550; padding-top: env(safe-area-inset-top, 0px); }
.announce-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding-block: 9px; text-align: center; }
.announce-main, .announce-cutoff { text-wrap: balance; }
.announce-main .dot { display: inline-block; margin-right: 10px; vertical-align: 1px; }
.announce-cutoff { color: var(--lime); }

/* ── Top bar ── */
.bar { position: sticky; top: 0; z-index: 30; background: var(--ground); transition: box-shadow .2s ease; }
.bar[data-scrolled] { box-shadow: 0 1px 0 var(--line); }
.bar-in { display: flex; align-items: center; gap: 16px; min-height: var(--bar-h); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo svg { height: 34px; width: auto; }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav a:hover { background: var(--fill); color: var(--ink); }
.nav-ar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: 4px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 650; }
.nav-ar:hover { opacity: .88; }
.nav-ar .ico { width: 18px; height: 18px; }
.ar-off { display: none; }
/* "See it in your room" on the main photo */
.gal-ar { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgb(11 11 12 / .18); }
.gal-ar:hover { opacity: .9; }
/* Phones: at the top of the photo, clear of the buy bar that sits at the bottom of the screen. */
@media (max-width: 899px) { .gal-ar { top: 12px; bottom: auto; } }
.gal-ar .ico { width: 20px; height: 20px; color: var(--lime); }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 650; }
.cart-btn:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.cart-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; text-decoration: none; transition: opacity .15s ease, transform .09s ease; }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { opacity: .88; }
.btn-secondary { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { opacity: .9; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.btn [data-add-total] { font-variant-numeric: tabular-nums; }
.btn-label { display: contents; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--fill); }

/* ── Stage ── */
.stage { display: grid; gap: 28px; padding-block: 12px 56px; }
.gallery { display: grid; gap: 12px; min-width: 0; }
.gallery-main { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--r-l); overflow: hidden; background: var(--fill); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main img[data-fit="contain"] { object-fit: contain; background: #faf0ec; }
.gal-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .92); }
.gal-prev { left: 12px; }
.gal-prev .ico { transform: rotate(180deg); }
.gal-next { right: 12px; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 5px; margin: -5px; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 72px; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: var(--fill); opacity: .72; transition: opacity .15s ease; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[data-fit="contain"] img { object-fit: contain; background: #faf0ec; }
.thumb:hover { opacity: 1; }
.thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }

.buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
.tag { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 650; }
.buy h1 { font-size: clamp(40px, 6.2vw, 64px); line-height: 1; letter-spacing: -0.04em; margin-top: -4px; }
.rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin-top: -8px; }
/* Stars: a pale row of five with an ink row on top, cut to the rating, so half stars show. */
.stars { position: relative; display: inline-block; flex: none; font-size: 16px; line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.stars-off { display: block; color: rgb(11 11 12 / .16); }
.stars-on { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; color: var(--star); }
.lead { max-width: 46ch; color: var(--text-2); font-size: 17px; }
.price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.price-now { padding: 4px 12px; border-radius: var(--r-s); background: var(--lime); color: var(--ink); font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-note { color: var(--muted); font-size: 14px; }

.opt { display: grid; gap: 10px; }
.opt legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.opt legend + * { clear: both; }
.opt-val { margin-left: 6px; color: var(--muted); font-weight: 500; }
.opt-colour { position: relative; }
.opt-tip { color: var(--muted); font-size: 13px; min-height: 20px; }
.opt-tip[data-out] { color: var(--ink); font-weight: 650; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch-face { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; transition: box-shadow .15s ease; }
.swatch-face img { width: 44px; height: 44px; object-fit: contain; }
.swatch input:checked + .swatch-face { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }
.swatch input:focus-visible + .swatch-face { outline: 2px solid var(--ink); outline-offset: 5px; }
/* Out of stock: greyed, with a line through it. It can still be looked at, not bought. */
.swatch[data-out] .swatch-face { position: relative; background: var(--fill); }
.swatch[data-out] .swatch-face img { opacity: .45; filter: grayscale(.35); }
.swatch[data-out] .swatch-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)); }
[data-sticker="red"] { background: var(--st-rose); }
[data-sticker="zellige"] { background: var(--st-zellige); }
[data-sticker="mint"] { background: var(--st-mint); }
[data-sticker="saffron"] { background: var(--st-saffron); }
[data-sticker="terracotta"] { background: var(--st-terracotta); }

.cards { display: grid; gap: 10px; }
.card { position: relative; display: block; cursor: pointer; }
.card-in { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s ease; }
.card:hover .card-in { box-shadow: inset 0 0 0 1px var(--muted); }
.card input:checked + .card-in { box-shadow: inset 0 0 0 2px var(--ink); }
.card input:focus-visible + .card-in { outline: 2px solid var(--ink); outline-offset: 3px; }
.card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.card-note { color: var(--muted); font-size: 14px; }
.card-price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.card-row .card-in { grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.card-row .card-title, .card-row .card-note { grid-column: 1; }
.card-row .card-price { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; margin-top: 0; }
.card-price small { color: var(--muted); font-size: 13px; font-weight: 500; }
.save { padding: 2px 8px; border-radius: 999px; background: var(--lime-soft); color: var(--lime-text); font-size: 12px; font-weight: 700; white-space: nowrap; }

.delivery { display: flex; align-items: flex-start; gap: 10px; margin-top: -8px; font-size: 14px; color: var(--text-2); }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px; border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 550; }
.trust li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.includes { margin-top: -8px; color: var(--muted); font-size: 14px; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 8px; font-weight: 650; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { transition: transform .2s ease; color: var(--muted); }
.acc details[open] summary .ico { transform: rotate(45deg); }
.acc details > p, .acc details > ul { padding: 0 0 16px; color: var(--text-2); max-width: 62ch; }
.acc details > ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }

/* ── Night band ── */
.night { position: relative; background: var(--night); color: var(--paper); overflow: hidden; }
.night-in { position: relative; display: grid; gap: 24px; padding-block: clamp(56px, 9vw, 112px); }
.night h2 { max-width: 12ch; font-size: clamp(42px, 8vw, 96px); line-height: .96; letter-spacing: -0.045em; }
.night-lead { max-width: 44ch; color: var(--night-muted); font-size: clamp(17px, 1.7vw, 20px); }
.lineup { margin-top: 16px; border-radius: var(--r-l); overflow: hidden; background: var(--night-2); }
.lineup img { width: 100%; }
.moves { display: grid; gap: 20px; margin-top: 16px; }
.moves li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; align-content: start; padding-top: 20px; border-top: 1px solid var(--night-line); }
.moves .ico { grid-row: span 2; width: 28px; height: 28px; color: var(--paper); }
.moves p { color: var(--night-muted); }

/* ── How it plays ── */
.play { display: grid; gap: 32px; padding-block: clamp(56px, 8vw, 104px); }
.play-head { display: grid; gap: 12px; }
.play-head p { max-width: 44ch; color: var(--text-2); font-size: 17px; }
.steps { display: grid; gap: 12px; counter-reset: none; }
.steps li { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; font-variant-numeric: tabular-nums; }
.steps p { color: var(--text-2); }
.demo { display: grid; gap: 12px; }
.demo-track { position: relative; height: 112px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.demo-ball { position: absolute; left: 12px; top: 12px; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: none; transition: left 2.6s cubic-bezier(.3, .1, .2, 1); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.demo-ball img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.75) brightness(.96); transition: filter .3s ease; pointer-events: none; -webkit-user-drag: none; }
.demo[data-state="playing"] .demo-ball img { filter: none; animation: spin 2.6s cubic-bezier(.3, .1, .2, 1); }
.demo[data-state="playing"][data-dir="back"] .demo-ball img { animation-name: spin-back; }
.demo[data-dir="out"] .demo-ball { left: calc(100% - 100px); }
@keyframes spin { to { transform: rotate(720deg); } }
@keyframes spin-back { from { transform: rotate(720deg); } to { transform: rotate(0deg); } }
.demo-status { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; font-weight: 550; }
.dot-idle { background: var(--muted); box-shadow: none; }
.demo[data-state="playing"] .dot-idle { background: var(--lime); box-shadow: 0 0 0 3px rgb(181 242 61 / .35); }

/* ── Feature rows ── */
.rows { display: grid; gap: clamp(40px, 6vw, 88px); padding-bottom: clamp(56px, 8vw, 104px); }
.row { display: grid; gap: 24px; align-items: center; }
.row-img { border-radius: var(--r-l); overflow: hidden; background: var(--fill); }
.row-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.row-copy { display: grid; gap: 16px; }
.row-copy p { max-width: 46ch; color: var(--text-2); font-size: 17px; }
.row-copy .aside { padding-left: 14px; border-left: 3px solid var(--ink); color: var(--ink); font-weight: 600; font-size: 16px; }

/* ── Numbers ── */
.numbers { background: var(--paper); border-block: 1px solid var(--line); }
.numbers dl { display: grid; grid-template-columns: 1fr 1fr; }
.numbers dl > div { display: grid; gap: 4px; min-width: 0; padding: 28px 0; }
.numbers dl > div:nth-child(odd) { padding-right: 16px; }
.numbers dl > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.numbers dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.numbers dd { font-size: clamp(36px, 6vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.numbers dd small { margin-left: 4px; font-size: .38em; font-weight: 700; letter-spacing: 0; color: var(--muted); }

/* ── Fit ── */
.fit { display: grid; gap: 28px; padding-block: clamp(56px, 8vw, 104px); }
.fit-grid { display: grid; gap: 12px; }
.fit-col { display: grid; gap: 16px; align-content: start; padding: 24px; border-radius: var(--r-l); }
.fit-yes { background: var(--lime-soft); }
.fit-no { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.fit-col ul { display: grid; gap: 12px; }
.fit-col li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 550; }
.fit-col .ico { margin-top: 2px; }
.fit-no .ico { color: var(--muted); }

/* ── Colours ── */
.colours { display: grid; gap: 28px; padding-bottom: clamp(56px, 8vw, 104px); }
.colours-head { display: grid; gap: 12px; }
.colours-head p { max-width: 44ch; color: var(--text-2); font-size: 17px; }
.colour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.colour-card { display: grid; gap: 2px; justify-items: start; align-content: start; padding: 16px; border: 0; border-radius: var(--r-l); overflow: hidden; color: var(--ink); text-align: left; transition: transform .15s ease; }
.colour-card:hover { transform: translateY(-3px); }
.colour-card img { width: 100%; max-width: 220px; justify-self: center; margin-bottom: 10px; filter: drop-shadow(0 14px 14px rgb(0 0 0 / .18)); }
.colour-name { font-weight: 750; letter-spacing: -0.01em; }
.colour-note { font-size: 13px; font-weight: 500; opacity: .78; }
.colour-card:last-child { grid-column: 1 / -1; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: center; }
.colour-card:last-child img { grid-row: 1 / span 2; margin-bottom: 0; }
.colour-card:last-child .colour-name { align-self: end; }
.colour-card:last-child .colour-note { align-self: start; }
.colour-card[data-out] { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.colour-card[data-out] img { opacity: .5; filter: grayscale(.35); }
.colour-card[data-out] .colour-note { margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; opacity: 1; white-space: nowrap; }

/* ── Gift ── */
.gift { display: grid; gap: 24px; align-items: center; padding-bottom: clamp(56px, 8vw, 104px); }
.gift-img { border-radius: var(--r-l); overflow: hidden; background: var(--fill); }
.gift-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gift-copy { display: grid; gap: 18px; justify-items: start; }
.gift-copy > p { max-width: 46ch; color: var(--text-2); font-size: 17px; }
.gift-list { display: grid; gap: 12px; }
.gift-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 550; }
.gift-list .ico { margin-top: 2px; }

/* ── Specs ── */
.specs { display: grid; gap: 24px; padding-bottom: clamp(56px, 8vw, 104px); }
.specs table { width: 100%; max-width: 820px; border-collapse: collapse; }
.specs th, .specs td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 1px solid var(--line); }
.specs th { width: 34%; padding-right: 16px; color: var(--muted); font-size: 14px; font-weight: 600; }
.specs td { font-weight: 550; }
.specs th, .specs td { overflow-wrap: anywhere; }

/* ── Reviews ── */
.reviews { display: grid; gap: 24px; padding-bottom: clamp(56px, 8vw, 104px); }
.reviews-head { display: grid; gap: 14px; justify-items: start; }
.reviews-head .tag { grid-area: auto; justify-self: start; align-self: auto; }   /* the buy box places its own tag differently on wide screens */
.reviews-layout { display: grid; gap: 16px; }
.reviews-sum { display: grid; gap: 10px; align-content: start; color: var(--text-2); font-size: 15px; font-weight: 550; }
.reviews:not([data-rated]) .reviews-count { color: var(--ink); font-size: 17px; font-weight: 700; }
.reviews-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.reviews-score:not(:has(> :not([hidden]))) { display: none; }
.reviews-score strong { color: var(--ink); font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.reviews-score .stars { font-size: 24px; }
.reviews-bars { display: grid; gap: 8px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.reviews-bars li { display: grid; grid-template-columns: 56px 1fr 20px; align-items: center; gap: 12px; }
.reviews-bars li > :last-child { text-align: right; color: var(--muted); }
.reviews-bar { display: block; height: 8px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.reviews-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--star); }
/* With star ratings the summary becomes a panel. */
.reviews[data-rated] .reviews-sum { padding: 24px; border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.review-grid { display: grid; gap: 12px; }
.review { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.review .stars { align-self: flex-start; font-size: 18px; }
.review-mark { height: 26px; color: var(--ink); font-size: 64px; line-height: 1; font-weight: 800; }
.review-title { font-size: 18px; line-height: 1.25; }
.review .review-title + blockquote { margin-top: -6px; }
.review blockquote { color: var(--text-2); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.review figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 550; }
.review figcaption strong { color: var(--ink); font-weight: 700; }

/* ── FAQ ── */
.faq { display: grid; gap: 24px; padding-bottom: clamp(56px, 8vw, 104px); }
.acc-wide { max-width: 820px; }
.acc-wide summary { min-height: 60px; font-size: 17px; }

/* ── Closing band ── */
.close { position: relative; display: grid; background: var(--night); color: var(--paper); overflow: hidden; }
.close-bg { order: 2; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 100% 60%; }
.close-in { position: relative; z-index: 1; display: grid; gap: 16px; align-content: center; justify-items: start; padding-block: 56px 8px; }
.close h2 { max-width: 11ch; font-size: clamp(38px, 6.4vw, 76px); line-height: .98; letter-spacing: -0.04em; }
.close p { color: #d9d9dd; font-size: 17px; }

/* ── Footer ── */
.foot { background: var(--night); color: var(--night-muted); border-top: 1px solid var(--night-line); font-size: 13px; }
.foot-in { display: grid; gap: 14px; padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--night-2); }
.foot-safety { max-width: 78ch; }
.foot-contact a { color: var(--paper); font-weight: 550; text-underline-offset: 3px; }
.foot-legal { color: var(--paper); font-weight: 550; }

/* ── Sticky buy bar ── */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sticky-in { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; max-width: var(--max); margin-inline: auto; }
.sticky img { width: 44px; height: 44px; object-fit: contain; }
.sticky p { display: grid; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.3; }
.sticky p strong { color: var(--ink); font-size: 15px; }
.sticky p strong, .sticky p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky .btn { min-height: 48px; padding: 0 18px; }
body[data-sticky-on] .foot-in { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* ── Cart ── */
.cart { width: min(440px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.cart[open] { display: grid; grid-template-rows: auto 1fr auto; }
.cart::backdrop { background: rgb(11 11 12 / .45); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 22px; }
.cart-body { overflow-y: auto; padding: 8px 20px; }
.cart-notice { margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--fill); font-size: 14px; font-weight: 550; }
.cart-empty { padding: 32px 0; color: var(--muted); }
.cart-lines { display: grid; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line-img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-m); }
.cart-line-img img { width: 50px; height: 50px; object-fit: contain; }
.cart-line h3 { font-size: 16px; }
.cart-line p { color: var(--muted); font-size: 14px; }
.cart-line-end { display: grid; justify-items: end; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-remove { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 550; text-decoration: underline; }
.cart-foot { display: grid; gap: 10px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.cart-saving { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.cart-total strong { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cart-note, .cart-msg { color: var(--muted); font-size: 13px; }

.cart-preorder { color: var(--ink); font-weight: 600; }
.delivery-pre { color: var(--ink); font-weight: 600; }

/* ── The Uyali app band ── */
.appband { padding-bottom: clamp(56px, 8vw, 104px); }
.appband-in { display: grid; gap: 28px; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.appband-head { display: grid; gap: 14px; justify-items: start; }
.appband-head .tag { grid-area: auto; justify-self: start; align-self: auto; }
.appband-head p:last-child { max-width: 52ch; color: var(--text-2); font-size: 17px; }
.appband-list { display: grid; gap: 12px; }
.appband-list li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r-m); background: var(--ground); }
.appband-list p { color: var(--text-2); font-size: 15px; }
@media (min-width: 640px) { .appband-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .appband-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
}

/* ── Ways to pay: the brands' own marks, all at one size with space between them.
      Brand rules: the artwork is never recoloured, cropped, stretched, rounded or given a shadow. ── */
.pay-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pay-list li { display: flex; align-items: center; justify-content: center; height: 28px; }
.pay-list img { display: block; width: auto; height: 100%; }
.pay-list .pay-googlepay img { height: 150%; margin-inline: -6px; }   /* Google's file carries its own clear space, so its canvas is larger */
.pay-buy { margin-top: -6px; }
.pay-cart .pay-list { justify-content: center; gap: 6px; }
.pay-cart .pay-list li { height: 24px; }   /* all nine on one line in the cart */
.pay-foot { display: grid; gap: 12px; padding-top: 4px; }
.pay-foot p { color: var(--paper); font-weight: 550; }
.pay-foot .pay-list li { height: 32px; }
.cart-delivery { display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-msg:empty { display: none; }

/* Payment return: the same Uyali type, wordmark and calm product-page surface. */
.payment-page { min-height: 100vh; display: flex; flex-direction: column; }
.payment-main { flex: 1; width: 100%; padding-block: clamp(36px, 8vw, 88px); }
.payment-card { max-width: 660px; margin-inline: auto; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); display: grid; gap: 24px; }
.payment-card h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.06; }
.payment-copy { color: var(--text-2); max-width: 48ch; }
.payment-details { display: grid; gap: 10px; padding-block: 20px; border-block: 1px solid var(--line); }
.payment-details > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.payment-details dt { color: var(--muted); }
.payment-details dd { font-weight: 650; overflow-wrap: anywhere; }
.payment-lines { display: grid; gap: 12px; }
.payment-lines li { display: grid; gap: 3px; }
.payment-lines span { color: var(--muted); font-size: 14px; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.payment-help { color: var(--muted); font-size: 14px; }
.payment-help a { text-underline-offset: 3px; }
@media (max-width: 480px) { .payment-actions .btn { width: 100%; } }
.cart-msg:empty { margin-top: -10px; }   /* stays in the page so screen readers hear updates */

/* ── Toast ── */
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; }

/* ── Narrow phones ── */
@media (max-width: 359px) {
  .swatches { gap: 6px; }
  .swatch-face { width: 52px; height: 52px; }
  .swatch-face img { width: 40px; height: 40px; }
  .night h2 { font-size: 39px; }
  .sticky img { display: none; }
  .sticky-in { grid-template-columns: 1fr auto; }
}

/* ── Wider screens ── */
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .moves { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .numbers dl { grid-template-columns: repeat(4, 1fr); }
  .numbers dl > div { padding: 40px 0; }
  .numbers dl > div:nth-child(n+3) { border-top: 0; }
  .numbers dl > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
  .colour-grid { grid-template-columns: repeat(5, 1fr); }
  .colour-card:last-child { grid-column: auto; grid-template-columns: none; }
  .colour-card:last-child img { grid-row: auto; margin-bottom: 10px; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .thumb { flex-basis: 84px; }
  .close-bg { aspect-ratio: 16 / 9; object-position: 84% 62%; }
}
/* Tablets: colour cards as a row of three and a centred row of two. */
@media (min-width: 640px) and (max-width: 899px) {
  .colour-grid { grid-template-columns: repeat(6, 1fr); }
  .colour-card, .colour-card:last-child { grid-column: span 2; }
  .colour-card:nth-child(4) { grid-column: 2 / span 2; }
}
/* From here the six thumbnails share the photo's width, so none is cut off. */
@media (min-width: 720px) {
  /* One tidy row however many photos there are: no orphans on a second line. */
  .thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; overflow: visible; }
}
/* Tablets: photo and buy box side by side. The photo is pinned only when the screen is tall enough to hold it. */
@media (min-width: 720px) and (max-width: 899px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .gallery { align-self: start; }
}
@media (min-width: 720px) and (max-width: 899px) and (min-height: 560px) {
  .gallery { position: sticky; top: calc(var(--bar-h) + 16px); }
}
@media (min-width: 900px) {
  .nav { display: flex; }
  .stage { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 4.5vw, 64px); padding-block: 12px 88px; }
  /* The gallery is never taller than the window: its width follows the window height, so the thumbnails stay on screen. */
  .gallery { position: sticky; top: calc(var(--bar-h) + 16px); align-self: start; justify-self: center; width: min(100%, max(340px, calc((100vh - var(--bar-h) - 64px) * .857))); }
  .buy { gap: 16px; }
  .buy h1 { font-size: 56px; }
  /* "How many?" as three cards in a row, with the saving as a badge on the card edge. */
  .cards-bundle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-bundle .card-in { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 12px 14px; }
  .cards-bundle .card-note { display: none; }
  .cards-bundle .card-price { grid-column: 1; grid-row: auto; justify-items: start; margin-top: 2px; }
  .cards-bundle .save { position: absolute; top: -10px; right: 10px; box-shadow: 0 0 0 2px var(--ground); }
  .play-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .row { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
  .row-flip .row-img { order: 2; }
  .gift { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
  .colours-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .review-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  /* Rated: the summary panel sits beside two columns of reviews and stays in view while they scroll. */
  .reviews[data-rated] .reviews-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .reviews[data-rated] .reviews-sum { position: sticky; top: calc(var(--bar-h) + 24px); }
  .reviews[data-rated] .review-grid { grid-template-columns: repeat(2, 1fr); }
  .toast { bottom: 32px; }
  body[data-sticky-on] .toast { bottom: 100px; }
  /* The buy bar also shows on wide screens: a little roomier there. */
  .sticky { padding-block: 12px; }
  .sticky .btn { min-width: 220px; }
  .close { min-height: max(460px, 30vw); }
  .close-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 80% 70%; }
  .close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 11 12 / .88) 0%, rgb(11 11 12 / .5) 45%, rgb(11 11 12 / 0) 72%); }
  .close-in { padding-block: 72px; }
  .specs, .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .specs h2, .faq h2 { position: sticky; top: calc(var(--bar-h) + 24px); }
}
/* Narrow desktop columns: slightly smaller bundle cards, so "Three balls" stays on one line. */
@media (min-width: 900px) and (max-width: 1099px) {
  .cards-bundle .card-in { padding-inline: 10px; }
  .cards-bundle .card-title { font-size: 15px; }
}
/* Swatch tooltip: only where a pointer can hover, and it names the colour it covers. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .swatch::after { content: attr(data-name) " · " attr(data-tip); content: attr(data-name) " · " attr(data-tip) / ""; position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); width: max-content; max-width: 260px; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 5; }
  .swatch:hover::after { opacity: 1; transform: translate(-50%, 0); }
  /* The last two open towards the left, so no tooltip reaches past the page edge. */
  .swatch:nth-child(n+4)::after { left: auto; right: 0; transform: translate(0, 4px); }
  .swatch:nth-child(n+4):hover::after { transform: translate(0, 0); }
  /* The chosen colour is already named beside "Colour", so its own label stays out of the way. */
  .swatch:has(input:checked)::after { display: none; }
}
/* Wide columns: the colour tip sits on the Colour line and the tag sits beside the name, which keeps the button higher. */
@media (min-width: 1200px) {
  .opt-tip { position: absolute; top: 0; right: 0; max-width: calc(100% - 176px); min-height: 0; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag { grid-area: 1 / 1; justify-self: end; align-self: center; }
  .buy h1 { grid-area: 1 / 1; }
}
/* Short laptop windows: a tighter buy box so Add to cart stays on the first screen. */
@media (min-width: 900px) and (max-height: 839px) {
  .stage { padding-top: 8px; }
  .buy { gap: 10px; }
  .buy h1 { font-size: 48px; }
  .opt legend { margin-bottom: 6px; }
  .card-row .card-in { padding-block: 10px; }
  .swatch-face { width: 48px; height: 48px; }
  .swatch-face img { width: 38px; height: 38px; }
}
@media (max-width: 899px) {
  /* Room for the fixed buy bar when the browser scrolls a focused control into view. */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cart { width: 100%; height: auto; max-height: 88%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .gal-nav { display: none; }
  .close-bg { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
}
/* Very short windows (heavy zoom): the buy bar would cover too much, and the cart scrolls as one sheet. */
@media (max-height: 420px) {
  .sticky { display: none; }
}
@media (max-height: 560px) {
  .cart { max-height: 100%; overflow-y: auto; }
  .cart[open] { display: block; }
  .cart-body { overflow: visible; }
  .cart-head { position: sticky; top: 0; z-index: 1; background: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Windows High Contrast: box-shadows are dropped, so edges and selected states use borders. */
@media (forced-colors: active) {
  .card-in, .btn, .cart-btn, .icon-btn { border: 1px solid ButtonText; }
  .card input:checked + .card-in, .swatch input:checked + .swatch-face, .thumb[aria-current="true"] { border: 3px solid Highlight; }
  .stars-off { color: GrayText; }
  .reviews-bar { border: 1px solid CanvasText; }
  .reviews-bar > span { background: CanvasText; forced-color-adjust: none; }
  .btn:disabled { opacity: 1; }   /* GrayText already marks it as off */
  .swatch[data-out] .swatch-face::after { background: linear-gradient(to top right, transparent calc(50% - 1px), CanvasText calc(50% - 1px), CanvasText calc(50% + 1px), transparent calc(50% + 1px)); forced-color-adjust: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   3D and AR demo: "See it in your room" (ar.js).
   Everything the demo needs is in this one block: the card in "How it plays" and the
   full-screen overlay it opens. Delete from here to "end of the 3D and AR demo" to remove it.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* The card on the page */
.ar-card { display: grid; gap: 16px; align-items: center; padding: 24px; border-radius: var(--r-l); background: var(--night); color: var(--paper); }
.ar-card :focus-visible { outline-color: var(--paper); }
.ar-card-copy { display: grid; gap: 6px; }
.ar-card p { max-width: 58ch; color: var(--night-muted); }
.ar-card .btn { justify-self: start; }

/* The overlay: the scene fills the screen, the title and the controls sit on top as flat cards */
.ar { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.ar::backdrop { background: var(--paper); }
.ar[data-mode="camera"] { background: var(--ink); }
.ar-stage, .ar-ui, .ar-touch, .ar-video, .ar-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-stage canvas { display: block; }
.ar-video { object-fit: cover; }
.ar-ui { touch-action: none; }   /* no scrolling or zooming of the page behind while a finger is on the demo */
.ar-touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ar-touch:focus { outline: none; }
.ar-touch:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 0; box-shadow: inset 0 0 0 2px var(--paper); }
.ar[data-mode="3d"] .ar-touch { cursor: grab; }
.ar[data-mode="3d"] .ar-touch:active { cursor: grabbing; }

.ar-top { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.ar-top > * { pointer-events: auto; }
.ar-head { display: grid; gap: 4px; min-width: 0; max-width: 420px; padding: 10px 14px 12px; border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ar-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ar-title h2 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.ar-mode { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 12px; font-weight: 650; white-space: nowrap; }
.ar-status { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 14px; font-weight: 550; line-height: 1.4; }
.ar-status .dot { margin-top: 6px; }
/* The hint under the status: one thing to try next. In 3D view and camera view its line is kept even while it is still empty, so the scene does not shift when the words arrive. */
.ar-hint { padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ar-hint:empty { display: none; }
.ar[data-mode="3d"] .ar-hint, .ar[data-mode="camera"] .ar-hint { display: block; min-height: 1.4em; }
.ar[data-state="awake"] .ar-status .dot { background: var(--lime); box-shadow: 0 0 0 3px rgb(181 242 61 / .35); }
.ar-close { flex: none; margin-left: auto; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ar-close:hover { box-shadow: inset 0 0 0 1px var(--muted); }

.ar-panel { --key: 50px; position: absolute; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; width: min(calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 420px); max-height: calc(100% - 24px); margin-inline: auto; padding: 14px; overflow-y: auto; border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ar-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* The pad and the speed, side by side */
.ar-drive { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
/* Direction pad: a round base with four keys and Bounce in the middle. Hold a key to move. */
.ar-pad { display: grid; grid-template: repeat(3, var(--key)) / repeat(3, var(--key)); gap: 3px; padding: 7px; border-radius: 50%; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.ar-key { display: grid; place-items: center; width: var(--key); height: var(--key); padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ar-key:active, .ar-key[data-on] { background: var(--ink); color: var(--paper); box-shadow: none; }
.ar-key-fwd { grid-area: 1 / 2; }
.ar-key-left { grid-area: 2 / 1; }
.ar-key-mid { grid-area: 2 / 2; border-radius: 50%; }
.ar-key-right { grid-area: 2 / 3; }
.ar-key-back { grid-area: 3 / 2; }
.ar-key-fwd .ico { transform: rotate(-90deg); }
.ar-key-left .ico { transform: rotate(180deg); }
.ar-key-back .ico { transform: rotate(90deg); }
.ar-speed { display: grid; gap: 6px; min-width: 0; }
.ar-speed-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 650; }
.ar-speed-val { color: var(--muted); font-weight: 550; }
/* Speed: three steps in one track, the chosen step in black */
.ar-seg { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
.ar-seg button { min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* The four buttons that are always in view: Come here, the "Play by itself" switch, Sleep or Wake, and Pad */
.ar-more { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.ar-come, .ar-auto, .ar-sleep, .ar-fold { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 650; white-space: nowrap; }
.ar-come:hover, .ar-auto:hover, .ar-sleep:hover, .ar-fold:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.ar-auto, .ar-fold { justify-content: space-between; }
/* The switch: a track with a knob that sits on the right, in lime, when it is on */
.ar-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--muted); transition: background .15s ease; }
.ar-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.ar-auto[aria-checked="true"] .ar-switch { background: var(--ink); box-shadow: none; }
.ar-auto[aria-checked="true"] .ar-switch::after { background: var(--lime); transform: translateX(16px); }
/* "Pad" is only for screens where the pad folds away (see below). Its arrow points up when the pad is open. */
.ar-fold { display: none; }
.ar-fold .ico { transform: rotate(90deg); transition: transform .15s ease; }
.ar-fold[aria-expanded="true"] .ico { transform: rotate(-90deg); }
.ar-note, .ar-keys { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ar-again { justify-self: start; min-height: 44px; margin-block: -6px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ar-keys { display: none; }

@media (min-width: 640px) {
  .ar-card { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 20px 24px; }
  .ar-top { top: max(16px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
  .ar-panel { bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding: 16px; }
}
/* Phones, upright or on their side: the pad and the speed stay folded away until "Pad" is pressed, so the
   floor and the ball stay in view. Tapping the floor, flicking the ball and "Come here" need no pad. */
@media (max-width: 719px), (max-height: 520px) {
  .ar-fold { display: inline-flex; }
  .ar:not([data-pad="open"]) .ar-drive { display: none; }
}
/* Bigger screens: the pad, the speed and the three buttons side by side, and no folding. The buttons are stacked
   in the order the Tab key visits them. */
@media (min-width: 720px) and (min-height: 521px) {
  .ar-panel { width: min(calc(100% - 32px), 680px); }
  .ar-controls { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: center; }
  .ar-more { grid-template-columns: minmax(0, 1fr); }
  .ar-come, .ar-sleep { justify-content: flex-start; }
}
/* The keyboard help is for screens with a keyboard beside them */
@media (hover: hover) and (pointer: fine) {
  .ar-keys { display: block; }
}
/* Narrow phones: smaller keys, still 44 px, and tighter buttons. */
@media (max-width: 389px) {
  .ar-panel { --key: 44px; padding: 12px; }
  .ar-drive { gap: 12px; }
  .ar-pad { padding: 6px; }
  .ar-come, .ar-auto, .ar-sleep, .ar-fold { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 349px) {
  .ar-head { padding: 8px 12px 10px; }
  .ar-title h2 { font-size: 15px; }
  .ar-status { font-size: 13px; }
  .ar-come .ico, .ar-sleep .ico { display: none; }
  .ar-come, .ar-auto, .ar-sleep, .ar-fold { padding: 0 10px; }
  /* Very narrow: the pad and the speed only just fit side by side, so their own edges are trimmed to make room. */
  .ar-panel { padding: 8px; }
  .ar-drive { gap: 4px; }
  .ar-pad { gap: 2px; padding: 0; border-radius: 30%; }
  .ar-seg { gap: 2px; padding: 2px; }
}
/* Narrower than 320 px (a folding phone's cover screen): the pad above, the speed below. */
@media (max-width: 319px) { .ar-drive { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ar-speed { width: 100%; } }
/* Short phones with the pad open: show less, so the floor stays big enough to see. It all returns when the pad is folded. */
@media (max-width: 719px) and (max-height: 640px) { .ar[data-pad="open"] .ar-come, .ar[data-pad="open"] .ar-auto { display: none; } }
/* A phone held sideways: the controls move to the right-hand side and the scene takes the rest. */
@media (max-height: 520px) and (min-width: 560px) {
  .ar-panel { --key: 44px; left: auto; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: 330px; margin: 0; padding: 12px; }
  .ar-controls, .ar-more { gap: 8px; }
  .ar-drive { gap: 12px; }
  .ar-pad { padding: 6px; }
  .ar-come, .ar-auto, .ar-sleep, .ar-fold { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .ar-top { right: calc(max(12px, env(safe-area-inset-right, 0px)) + 338px); }
}
/* Very short screens: with the pad open, the controls may need to scroll inside their card. A finger held on a
   pad key must still not scroll it. */
@media (max-height: 420px) {
  .ar-panel { touch-action: pan-y; overscroll-behavior: contain; }
  .ar-key { touch-action: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-switch, .ar-switch::after, .ar-fold .ico { transition: none; }
}
@media (forced-colors: active) {
  .ar-head, .ar-panel, .ar-key, .ar-seg, .ar-sleep, .ar-come, .ar-auto, .ar-fold, .ar-mode { border: 1px solid ButtonText; }
  .ar-key[data-on], .ar-seg button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .ar-switch { border: 1px solid ButtonText; }
  .ar-switch::after { background: ButtonText; }
  .ar-auto[aria-checked="true"] .ar-switch { background: Highlight; forced-color-adjust: none; }
  .ar-auto[aria-checked="true"] .ar-switch::after { background: HighlightText; }
}
/* ══ end of the 3D and AR demo ══ */

/* Destination-based delivery, before payment. */
.shipping-destination { margin: 18px 0; }
.shipping-destination label { display: block; font-weight: 650; margin-bottom: 8px; }
.shipping-destination select { display: block; width: 100%; max-width: 100%; padding: 12px; border: 1px solid #c9c9c9; border-radius: 8px; background: #fff; color: #0b0b0c; font: inherit; }
.shipping-destination p { font-size: 12px; line-height: 1.5; margin: 8px 0; }

/* ── Breadcrumb under the top bar: Uyali / shop / product. Used on every product page. ── */
.crumbs { color: var(--muted); font-size: 13px; font-weight: 600; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-inline: 8px; color: var(--muted); opacity: .6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-inline: -10px; padding-inline: 10px; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs + .launch-note { padding-top: 0; }