/* Pink Sunday — "the garden first". The film fills the screen; the interface is small type and a
   few dots that follow the stage's zoom (--z: 0 gallery, 1 slideshow). No card sits on the garden. */
:root {
  --z: 0;
  --shirt-bottom: 60vh;
  --arch-x: 50vw;
  --phrase-top: 110px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ribbon: 0px; /* the blue ribbon's height on phones */
  --bottom: calc(var(--safe-bottom) + var(--ribbon));
  --sky: #3d8fe6;
  --ink: #2f1823;
  --ink-soft: #6d4d59;
  --paper: #fffaf5;
  --pink: #fb7db4;
  --pink-deep: #c2185b;
  --white: #fff;
  --shadow-text: 0 1px 2px rgb(20 16 10 / .38), 0 0 14px rgb(20 16 10 / .22);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --display: "Helvetica Neue", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  color-scheme: light;
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  background: #3d8fe6;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; overscroll-behavior: none; color: var(--white); background: #3d8fe6; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* Small type over the film. */
.label, .phrase, .caption, .dock, .trial-note, .hint, .langs button, .inspect-hint {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-shadow: var(--shadow-text);
}

/* ——— Garden ——— */
.garden { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #3d8fe6; }
.garden picture, .garden-still, .garden-film { position: absolute; inset: 0; width: 100%; height: 100%; }
.garden-still, .garden-film { object-fit: cover; object-position: 50% 50%; }
.garden-film { opacity: 0; transition: opacity .6s ease; }
.garden.has-film .garden-film { opacity: 1; }
.garden-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(18 34 70 / .2), rgb(18 34 70 / 0) 16%), linear-gradient(0deg, rgb(24 34 10 / .42), rgb(24 34 10 / 0) 30%); }
html.is-inspecting .garden-still, html.is-inspecting .garden-film { filter: blur(14px) brightness(.88); transition: filter .4s ease; }

/* ——— Visibility by view, driven by the same zoom as the garments ——— */
.overview-only { opacity: clamp(0, calc(1 - var(--z) * 2.2), 1); transition: visibility 0s 0s; }
.focus-only { opacity: clamp(0, calc((var(--z) - .45) * 2.2), 1); transition: visibility 0s 0s; }
html.is-focus .overview-only, html:not(.is-focus) .focus-only { visibility: hidden; transition: visibility 0s .32s; }
html.is-inspecting .top .tools, html.is-inspecting .phrase, html.is-inspecting .caption, html.is-inspecting .faces, html.is-inspecting .dock,
html.is-inspecting .trial-note, html.is-inspecting .hint, html.is-inspecting .buy { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* ——— Top ——— */
.top { position: fixed; inset: 0 0 auto; z-index: 10; height: calc(var(--safe-top) + 70px); pointer-events: none;
  background: #fff; box-shadow: 0 1px 0 rgb(87 36 58 / .08); }
.top > * { pointer-events: auto; }
.logo { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; will-change: transform; border-radius: 8px; filter: drop-shadow(0 2px 10px rgb(255 255 255 / .35)); }
.top .logo { filter: none; }
.logo img { width: 100%; height: auto; }
.phrase { position: fixed; left: 50%; top: var(--phrase-top); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 32px); text-align: center; font-size: 10.5px; letter-spacing: .22em;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; pointer-events: none; }
/* Arrival: the hero — the logo in the middle of the sky and the brand phrase under it, once; at the
   first gesture (or after a few seconds) the logo glides to its corner and the phrase fades. */
html.is-arrival .phrase { opacity: 1; visibility: visible; transition: opacity .9s ease .55s, visibility 0s; }
/* On the arrival's warm light: the brand's deep pink, no white halo. */
.phrase { color: #c2185b; text-shadow: none; font-weight: 700; }
.tools { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(var(--safe-top) + 8px); display: flex; align-items: center; gap: 2px; }
.tool { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--white); filter: drop-shadow(0 1px 3px rgb(20 16 10 / .4)); }
.tool:hover { background: rgb(255 255 255 / .14); }
.langs { display: flex; }
.langs button { min-width: 34px; height: 42px; font-size: 11px; letter-spacing: .12em; opacity: .62; }
.langs button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.view-icon { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; align-items: center; }
.view-icon i { display: block; width: 4px; height: 10px; border-radius: 1px; background: currentColor; }
.view-toggle[data-view="slideshow"] .view-icon i { height: 6px; }
.view-toggle[data-view="gallery"] .view-icon { grid-template-columns: 4px 8px 4px; }
.view-toggle[data-view="gallery"] .view-icon i:nth-child(2) { height: 13px; width: 8px; }
.view-toggle[data-view="gallery"] .view-icon i:not(:nth-child(2)) { opacity: .55; }
.pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
#pause-toggle[aria-pressed="true"] .pause-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.bag-icon { width: 16px; height: 15px; border: 1.6px solid currentColor; border-radius: 2px 2px 5px 5px; margin-top: 4px; position: relative; }
.bag-icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: -6px; height: 7px; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.bag-count { position: absolute; right: 2px; top: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: var(--pink); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0; text-shadow: none; }
.bag-count:empty, .bag-count:is([data-count="0"]) { display: none; }

/* ——— WebGL composition: garden and garments drawn together; the DOM keeps hit areas and focus ——— */
.scene { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
/* Arrival with WebGL: the page opens in the same warm light as the scene's first frame, so the lens
   opens with no flash; then the interface comes in, once the garden and the T-shirt are there. */
html.has-renderer .garden { background: #ffedf0; }
html.has-renderer .garden picture { opacity: 0; }
@keyframes ui-in { from { opacity: 0; } }
html.has-renderer .top .tools { animation: ui-in 1s ease 2.5s both; }
html.has-renderer .ribbon { animation: ui-in 1s ease 2.9s both; }
html.has-renderer .hint { animation: ui-in .8s ease 3.6s both; }
html.has-renderer .shirt-face, html.has-renderer .shirt-ground { visibility: hidden; }
html.has-renderer .shirt-float { filter: none; }
/* Film sources: decoded by the page, drawn by WebGL (kept rendered, behind the canvas, for mobile browsers). */
.film-sources { position: fixed; left: 0; top: 0; z-index: 0; width: 96px; height: 96px; overflow: hidden; opacity: .01; pointer-events: none; }
.film-sources video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ——— Stage: one aligned row ——— */
.stage { position: fixed; inset: 0; z-index: 2; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.shirt { position: absolute; left: 0; top: 0; width: var(--base-w); height: var(--base-h); transform-origin: 50% 50%; will-change: transform; }
.shirt-hit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 28px; }
.shirt-hit { cursor: grab; }
.stage.is-dragging, .stage.is-dragging .shirt-hit { cursor: grabbing; }
.shirt-hit:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.shirt-zoom, .shirt-turn, .shirt-float { position: absolute; inset: 0; display: block; }
.shirt-zoom { transform-origin: 50% 50%; }
/* One shadow for the pair of faces, so turning over never shows a second shadow appearing and leaving. */
.shirt-float { transition: scale .45s var(--ease); filter: drop-shadow(0 18px 20px rgb(44 32 12 / .3)); }
.shirt-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.shirt-face.is-back, .is-front .shirt-face.is-front { z-index: 2; opacity: 1; transition: opacity .34s ease; }
.shirt-face.is-front, .is-front .shirt-face.is-back { z-index: 1; opacity: 0; transition: opacity 0s .34s; }
.shirt-ground { position: absolute; left: 26%; right: 26%; bottom: -3%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgb(30 26 10 / .32), rgb(30 26 10 / 0)); }
.shirt-missing { position: absolute; inset: 30% 10%; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-shadow: var(--shadow-text); border: 1.5px dashed rgb(255 255 255 / .7); border-radius: 22px; }
@media (hover: hover) and (pointer: fine) { html:not(.is-focus) .shirt-hit:hover .shirt-float { scale: 1.035; } }
.stage.is-inspecting { cursor: grab; }


/* ——— Under the centred piece ——— */
.caption { position: fixed; z-index: 5; left: var(--arch-x); top: calc(var(--shirt-bottom) + 16px); transform: translateX(-50%); margin: 0; display: flex; gap: 10px; align-items: baseline; pointer-events: none; white-space: nowrap; }
.caption span:first-child { opacity: .75; font-weight: 500; }
/* Front/back and the magnifier live in the order panel; a tap on the T-shirt flips it too. */
.faces { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html:not(.is-focus) .faces .loupe { display: none; }
/* Front/back: an iPhone switch between its two labels, in a light glass pill. The knob jumps; the
   garment turns. Shown in both views, under the piece in front. */
.turn-switch { display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px; border-radius: 999px;
  background: rgb(250 250 252 / .32); -webkit-backdrop-filter: blur(24px) saturate(1.2) brightness(1.1); backdrop-filter: blur(24px) saturate(1.2) brightness(1.1);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .6), inset 0 0 0 .5px rgb(255 255 255 / .3), 0 6px 18px rgb(40 26 10 / .1); user-select: none; -webkit-user-select: none; }
.faces .turn-switch .turn-side { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: 999px;
  font-family: var(--system); font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-transform: none; text-shadow: none; color: rgb(29 29 31 / .5); transition: color .2s ease; }
.faces .turn-switch .turn-side[aria-pressed="true"] { color: #1d1d1f; }
.turn-toggle { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: rgb(120 120 128 / .32); transition: background .25s ease; }
.turn-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16), 0 3px 1px rgb(0 0 0 / .1); transition: transform .3s cubic-bezier(.3, 1.35, .45, 1); }
.turn-switch.is-front .turn-toggle { background: var(--brand); }
.turn-switch.is-front .turn-knob { transform: translateX(18px); }
.turn-switch.is-pressed .turn-knob { width: 28px; }
.turn-switch.is-front.is-pressed .turn-knob { transform: translateX(14px); }
.turn-toggle:focus-visible, .turn-side:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; }
.turn-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round; }
.turn-icon circle { fill: currentColor; stroke: none; }
.loupe { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(250 250 252 / .3); -webkit-backdrop-filter: blur(24px) saturate(1.2) brightness(1.1); backdrop-filter: blur(24px) saturate(1.2) brightness(1.1);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .6), inset 0 0 0 .5px rgb(255 255 255 / .3), 0 6px 18px rgb(40 26 10 / .1); }
.loupe span { width: 13px; height: 13px; border: 1.6px solid #1d1d1f; border-radius: 50%; position: relative; opacity: .78; }
.loupe span::after { content: ""; position: absolute; width: 6px; height: 1.6px; background: #1d1d1f; right: -6px; bottom: -3px; transform: rotate(45deg); }

/* ——— Bottom ——— */
.dock { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 0 max(18px, env(safe-area-inset-right)) calc(var(--bottom) + 14px) max(18px, env(safe-area-inset-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock-id { margin: 0; display: grid; gap: 4px; justify-self: start; }
.dock-id span { font-size: 10px; opacity: .78; letter-spacing: .2em; }
.dock-id strong { font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 17px; letter-spacing: .04em; line-height: 1; }
.dock-colours { display: grid; justify-items: center; gap: 4px; }
.dots { display: flex; gap: 4px; }
.dot { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.dot::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgb(40 24 30 / .2), 0 1px 6px rgb(20 16 10 / .35); }
.dot[aria-pressed="true"]::before { box-shadow: 0 0 0 2px rgb(255 255 255 / .95), 0 0 0 3px rgb(40 24 30 / .25), 0 1px 6px rgb(20 16 10 / .35); }
.colour-name { font-size: 10px; letter-spacing: .2em; }
.dock-buy { justify-self: end; }
.buy-open { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 16px; border-radius: 999px; background: var(--pink-deep); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: none; text-shadow: none; box-shadow: 0 6px 18px rgb(120 10 50 / .3); }
.buy-open [data-buy-label] { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; opacity: .85; }
.chevron { width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg) translate(1px, 1px); }
.trial-note { position: fixed; z-index: 6; left: 50%; bottom: calc(var(--bottom) + 82px); transform: translateX(-50%); margin: 0; font-size: 10px; letter-spacing: .14em; opacity: .9; white-space: nowrap; }
.hint { position: fixed; z-index: 6; left: 50%; bottom: calc(var(--bottom) + 104px); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 32px); text-align: center; font-size: 10px; letter-spacing: .16em; line-height: 1.6; opacity: .92; transition: opacity .6s ease, visibility 0s; pointer-events: none; }
html.hint-seen .hint { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .phrase { font-size: 11px; }
}

/* Close view: only the garment, a way out and a short hint. */
.inspect-close { position: fixed; z-index: 12; right: max(14px, env(safe-area-inset-right)); top: calc(var(--safe-top) + 10px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .7); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .8), 0 4px 14px rgb(0 0 0 / .12); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.inspect-close span { width: 16px; height: 16px; position: relative; }
.inspect-close span::before, .inspect-close span::after { content: ""; position: absolute; left: 7px; top: -1px; width: 2px; height: 18px; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.inspect-close span::after { transform: rotate(-45deg); }
.inspect-hint { position: fixed; z-index: 12; left: 50%; bottom: calc(var(--bottom) + 22px); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 32px); text-align: center; font-size: 10px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; pointer-events: none; }
html.is-inspecting .inspect-close, html.is-inspecting .inspect-hint { opacity: 1; visibility: visible; transition: opacity .3s ease .1s, visibility 0s; }

/* ——— Sheets opened on demand: details, bag, checkout ——— */
.sheet { width: min(460px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 26px; background: #fbfbfd; color: var(--ink); box-shadow: 0 30px 90px rgb(30 16 24 / .32); overflow: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: rgb(20 16 24 / .3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet[open] { animation: sheet-in .34s var(--ease) both; }
.sheet-body { position: relative; padding: 26px 22px 24px; display: grid; gap: 14px; font-size: 14px; }
.sheet .kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--label-2); }
.sheet h2 { margin: 0; padding-right: 44px; font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 28px; line-height: .95; text-transform: uppercase; }
.sheet h3 { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--label-2); }
.sheet .note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--label-2); }
.close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgb(118 118 128 / .14); }
.close::before, .close::after { content: ""; position: absolute; left: 15px; top: 9px; width: 2px; height: 14px; border-radius: 1px; background: var(--label-2); transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }
.visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visual { margin: 0; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #cfe5fb, #fff1c4); display: grid; gap: 8px; }
.visual img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgb(44 32 12 / .2)); }
.visual figcaption { display: grid; gap: 2px; font-size: 12px; line-height: 1.35; color: var(--label-2); }
.visual figcaption strong { color: var(--label); font-size: 13px; }
.facts { margin: 0; display: grid; gap: 6px; }
.facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid rgb(0 0 0 / .08); font-size: 13px; }
.facts dt { color: var(--label-2); font-weight: 600; }
.facts dd { margin: 0; }
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.offers li { display: grid; grid-template-columns: 4.6em auto 1fr; gap: 10px; align-items: baseline; font-size: 13px; }
.offers li span { font-weight: 700; letter-spacing: .06em; }
.offers li em { justify-self: end; font-style: normal; font-size: 12px; color: var(--brand); }
.care summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 13px; }
.care p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--label-2); }
.link { justify-self: start; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--brand); }
/* Bag: one row per piece, thumbnail of the garment as the film shows it. */
.pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pieces .empty { padding: 14px 0; color: var(--label-2); line-height: 1.5; }
.piece { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: rgb(118 118 128 / .08); }
.piece img { width: 56px; height: 56px; object-fit: contain; }
.piece-text { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--label-2); }
.piece-text strong { font-family: var(--display); font-stretch: condensed; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--label); }
.piece select { height: 34px; padding: 0 6px; border-radius: 9px; border: 0; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .06); font: 600 14px var(--system); color: var(--label); }
.piece-remove { min-height: 34px; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--brand); }
.summary { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid rgb(0 0 0 / .08); }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.parts li, .total, .saving { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.total { font-size: 17px; font-weight: 700; padding-top: 4px; }
.saving { color: var(--brand); font-weight: 600; }
.promo { display: grid; gap: 6px; }
.promo-field { display: flex; gap: 8px; }
.promo-field input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 0; background: rgb(118 118 128 / .12); font: 16px var(--system); letter-spacing: .08em; text-transform: uppercase; }
.promo-field button { height: 42px; padding: 0 14px; border-radius: 12px; background: rgb(118 118 128 / .14); font-weight: 600; font-size: 14px; }
.message { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--brand); }
.message:empty { display: none; }
.actions { display: grid; gap: 8px; }

.reference { width: min(640px, calc(100vw - 24px)); }
.reference-image { width: 100%; height: auto; max-height: 62svh; object-fit: contain; border-radius: 14px; background: #f1f1f1; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--bottom) + 72px); margin: 0; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; border-radius: 14px;
  background: rgb(28 28 30 / .84); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); color: #fff;
  font-family: var(--system); font-size: 14px; font-weight: 500; letter-spacing: -.01em; transform: translate(-50%, 10px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ease); white-space: nowrap; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.toast:not(.has-action) { padding-right: 16px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.has-action.is-visible { pointer-events: auto; }
.toast-action { height: 30px; padding: 0 12px; border-radius: 9px; background: rgb(255 255 255 / .16); color: #fff; font-weight: 600; }
.startup-error { position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 14px; border-radius: 16px; background: var(--paper); color: var(--ink); }
.dev-panel { position: fixed; z-index: 90; left: 8px; top: 64px; max-width: min(340px, calc(100vw - 16px)); max-height: 50vh; overflow: auto; padding: 8px; border-radius: 10px; background: rgb(18 14 22 / .82); color: #e9ffe9; font: 10.5px/1.35 ui-monospace, Menlo, monospace; text-shadow: none; letter-spacing: 0; text-transform: none; }
.dev-panel pre { margin: 0 0 6px; white-space: pre-wrap; }
.dev-panel button { padding: 4px 8px; border-radius: 6px; background: #fff; color: #222; }

@media (max-aspect-ratio: 1/1) {
  .phrase { font-size: 9.5px; letter-spacing: .2em; line-height: 1.6; width: auto; max-width: 300px; white-space: normal; }
}
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .sheet { width: 100%; max-width: 100%; max-height: 90svh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .sheet-body { padding-bottom: calc(var(--safe-bottom) + 22px); }
}
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  :root { --ribbon: 30px; }
  /* Phones: a light top bar (gestures replace the view switch; one button for the other language). */
  /* The gallery is about the pieces: colour choice lives in the close view. */
  html.is-sheet-open .hint { opacity: 0 !important; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
}
html.hint-faded .hint { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.tool.bag.is-bumped { animation: bag-bump .5s var(--ease); }
@keyframes bag-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-6deg); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }

/* ——— The blue ribbon at the very bottom (phones): the collection scrolls by with Joan's pictograms ——— */
/* The ribbon sits just above the phone's bottom safe area, which stays clear (the garden shows there). */
.ribbon { display: none; position: fixed; z-index: 7; left: 0; right: 0; bottom: var(--safe-bottom); height: var(--ribbon); padding-bottom: 0;
  overflow: hidden; background: var(--sky); color: var(--white); pointer-events: none; box-shadow: 0 -1px 0 rgb(255 255 255 / .22) inset, 0 -8px 22px rgb(20 50 110 / .18);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.ribbon-shift { height: var(--ribbon); transform: translate3d(var(--ribbon-shift, 0px), 0, 0); will-change: transform; }
.ribbon-track { display: flex; width: max-content; height: 100%; align-items: center; animation: ribbon-run var(--ribbon-duration, 40s) linear infinite; will-change: transform; }
.ribbon-item { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; white-space: nowrap;
  font-family: var(--display); font-stretch: condensed; font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.ribbon-item .soft { font-weight: 600; opacity: .82; letter-spacing: .16em; font-size: 11px; }
.ribbon-icon { width: auto; height: 17px; flex: none; filter: drop-shadow(0 1px 1px rgb(10 40 100 / .25)); transform-origin: 50% 55%; }
.ribbon-icon[data-icon="fleur"] { animation: ribbon-spin 9s linear infinite; }
.ribbon-icon[data-icon="etoile"] { animation: ribbon-twinkle 2.6s ease-in-out infinite; }
.ribbon-icon[data-icon="nuage"] { animation: ribbon-drift 3.4s ease-in-out infinite alternate; }
.ribbon-icon[data-icon="arrosoir"] { animation: ribbon-pour 3.2s ease-in-out infinite; transform-origin: 30% 70%; }
.ribbon-icon[data-icon="chaise"] { animation: ribbon-rock 2.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ribbon-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes ribbon-spin { to { transform: rotate(360deg); } }
@keyframes ribbon-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 45% { transform: scale(1.22) rotate(12deg); } 60% { transform: scale(.94) rotate(-4deg); } }
@keyframes ribbon-drift { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
@keyframes ribbon-pour { 0%, 55%, 100% { transform: rotate(0deg); } 70%, 85% { transform: rotate(-16deg); } }
@keyframes ribbon-rock { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
html.is-paused .ribbon-track, html.is-paused .ribbon-icon { animation-play-state: paused; }
html.is-inspecting .ribbon { opacity: 0; transition: opacity .25s ease; }
@media (max-width: 899px), (max-aspect-ratio: 1/1) { .ribbon { display: block; } }
@media (max-width: 380px) {
  .tool { width: 38px; }
  .langs button { min-width: 30px; }
  .dot { width: 32px; height: 32px; }
  .buy-open { padding: 0 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .garden-film { display: none; }
}

/* ——— Interface: light glass in the iPhone idiom, quiet over the garden; one family of controls ——— */
:root { --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --label: #1d1d1f; --label-2: #6e6e73; --brand: #d6336c; }
.caption, .dock { display: none !important; }
.tools { top: calc(var(--safe-top) + 10px); right: max(12px, env(safe-area-inset-right)); gap: 8px; }
.langs { gap: 8px; }
.langs button[aria-pressed="true"] { display: none; }
.tool, .langs button { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--label); opacity: 1; text-decoration: none; text-shadow: none; filter: none;
  background: rgb(255 255 255 / .46); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .75), 0 0 0 .5px rgb(0 0 0 / .05), 0 4px 14px rgb(20 40 90 / .12); transition: transform .15s var(--ease); }
.tool:hover { background: rgb(255 255 255 / .6); }
.tool:active, .langs button:active { transform: scale(.92); }
.langs button { font-family: var(--system); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.view-icon { gap: 2px; grid-template-columns: repeat(3, 3px); }
.view-icon i { width: 3px; height: 9px; }
.view-toggle[data-view="gallery"] .view-icon { grid-template-columns: 3px 7px 3px; }
.view-toggle[data-view="gallery"] .view-icon i:nth-child(2) { width: 7px; height: 11px; }
.pause-icon { width: 9px; height: 11px; border-left-width: 2.5px; border-right-width: 2.5px; }
.bag-icon { width: 14px; height: 13px; border-width: 1.5px; margin-top: 3px; }
.bag-icon::before { border-width: 1.5px; left: 2.5px; right: 2.5px; top: -5.5px; height: 6px; }
.bag-count { right: -3px; top: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--brand); color: #fff; font-family: var(--system); font-size: 10px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9); }
.tool.lang-toggle { width: auto; min-width: 0; display: inline-flex; gap: 0; padding: 0 11px; border-radius: 18px; font-family: var(--system); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.lang-toggle span { opacity: .36; transition: opacity .2s ease; }
.lang-toggle span + span { margin-left: 6px; padding-left: 6px; border-left: 1px solid rgb(29 29 31 / .2); }
.lang-toggle[data-current="fr"] [lang="fr"], .lang-toggle[data-current="en"] [lang="en"] { opacity: 1; }
.sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .speaker { fill: currentColor; stroke: none; }
.sound-toggle[aria-pressed="false"] .waves, .sound-toggle[aria-pressed="true"] .mute { display: none; }

/* ——— The bar at the bottom, in clear glass: the colour swatches (the colour controls everything) and
   "Acheter", which opens the panel above it. With WebGL the scene itself draws the glass under it
   (refraction, light on the rims); without, a frosted fallback. ——— */
.dock-bar { position: fixed; z-index: 9; left: 50%; bottom: calc(var(--bottom) + 14px); display: flex; transform: translateX(-50%); touch-action: none;
  animation: pill-in .9s var(--ease) 3.1s both; transition: opacity .3s ease; }
/* The colours, just under the T-shirt: three swatches, quiet, in a faint glass capsule. */
/* Fixed under the place of the piece in front (not the moving piece): constant while the row turns. */
.colour-pick { position: fixed; z-index: 8; left: 50%; top: calc(var(--shirt-bottom) + 12px); transform: translateX(-50%); transition: opacity .3s ease; }
html.has-renderer .colour-pick { animation: ui-in .9s ease 3s both; }
.colour-pick .swatches { padding: 2px 4px; border-radius: 999px; background: rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .7), 0 0 0 .5px rgb(0 0 0 / .04), 0 4px 14px rgb(30 20 10 / .12); }
html.is-inspecting .colour-pick { opacity: 0 !important; pointer-events: none; }
@keyframes pill-in { from { opacity: 0; translate: 0 22px; } }

html.is-inspecting .dock-bar { opacity: 0 !important; pointer-events: none; }
.swatches { display: flex; align-items: center; padding: 0 1px 0 3px; }
.swatch { width: 34px; height: 38px; display: grid; place-items: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.swatch::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2), inset 0 1.5px 2px rgb(255 255 255 / .55), 0 1px 3px rgb(0 0 0 / .16);
  transition: transform .32s cubic-bezier(.3, 1.4, .45, 1), box-shadow .25s var(--ease); }
.swatch[aria-checked="true"]::before { transform: scale(.8); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2), inset 0 1.5px 2px rgb(255 255 255 / .55), 0 0 0 3px #fff, 0 0 0 4px rgb(29 29 31 / .28), 0 2px 8px rgb(0 0 0 / .18); }
.swatch:active::before { transform: scale(.7); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .swatch:hover::before { transform: translateY(-3px) scale(1.12); }
  .swatch[aria-checked="true"]:hover::before { transform: translateY(-2px) scale(.88); }
  .pill:hover { transform: translateY(-2px); }
  .pill:active { transform: translateY(0) scale(.96); }
}
.swatch:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* The colour's name, for a moment, just above the bar. */
.swatch-name { position: absolute; left: 50%; top: calc(100% + 8px); margin: 0; padding: 5px 11px; border-radius: 999px; pointer-events: none;
  background: rgb(28 28 30 / .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font: 600 10.5px var(--system); letter-spacing: .08em; white-space: nowrap;
  transform: translate(-50%, 5px); opacity: 0; transition: opacity .3s ease, transform .45s var(--ease); }
.swatch-name.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* The action stays legible over the garden without competing with the garment. */
.pill { display: inline-flex; align-items: center; gap: 9px; height: 48px; max-width: 200px; padding: 0 24px 0 19px; border: 1px solid rgb(255 255 255 / .84); border-radius: 999px; overflow: hidden;
  color: #3b202b; font-family: var(--system); letter-spacing: 0; text-transform: none; text-shadow: none; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: #fffaf9; box-shadow: 0 8px 24px rgb(30 20 20 / .18);
  transition: max-width .45s var(--ease), padding .45s var(--ease), opacity .25s ease, transform .2s var(--ease), background .2s ease; }
.pill:hover { background: #fff1f5; }
.pill:active { transform: scale(.96); }
.pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pill-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.pill-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pill-label { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html.is-card-open .pill { max-width: 0; padding: 0; opacity: 0; pointer-events: none; }

/* The game lives in the white brand header, with a continuous ticker and its own clear action. */
.game { position: absolute; z-index: 1; top: calc(var(--safe-top) + 10px); left: 145px; right: 180px;
  display: flex; align-items: center; gap: 14px; min-width: 0; height: 48px; font-family: var(--system); transition: opacity .3s ease; }
html.has-renderer .game { animation: ui-in 1s ease 3.8s both; }
.game-ticker { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #65263e;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.game-ticker-track, .game-ticker-group { display: flex; align-items: center; width: max-content; }
.game-ticker-track { animation: game-ticker-scroll 32s linear infinite; }
.game-ticker-group { flex: none; min-width: 100vw; justify-content: space-around; }
.game-ticker-item { display: inline-flex; align-items: center; flex: none; gap: 12px; padding-right: 44px;
  white-space: nowrap; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.game-ticker-item img { width: 18px; height: 18px; flex: none; }
.game-ticker-static { display: none; }
.game-play { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 8px; min-height: 42px; padding: 0 18px;
  border-radius: 999px; background: #b52e61; color: #fff; text-decoration: none; text-shadow: none;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; transition: background .2s ease, transform .2s ease; }
.game-play svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.game-play:hover { background: #92254e; }
.game-play:active { transform: scale(.97); }
.game-play:focus-visible { outline: 2px solid #842348; outline-offset: 3px; }
@keyframes game-ticker-scroll { to { transform: translateX(-50%); } }
html.is-card-open .game, html.is-inspecting .game { opacity: 0 !important; pointer-events: none; }
html.is-card-open .top .logo, html.is-card-open .phrase { visibility: hidden !important; }
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .top { height: calc(var(--safe-top) + 106px); }
  .game { top: calc(var(--safe-top) + 56px); left: 16px; right: 16px; height: 44px; gap: 10px; }
  .game-ticker-item { font-size: 14px; padding-right: 32px; }
  .game-play { min-height: 44px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-ticker { -webkit-mask-image: none; mask-image: none; }
  .game-ticker-track { display: none; }
  .game-ticker-static { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }
}

/* Product page: one packshot, the essential choices, then the remaining designs. */
.buy { position: fixed; z-index: 20; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  color: #20201f; background: #fff; font-family: var(--system); opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
html.is-card-open .buy { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, visibility 0s; }
.buy-toolbar { position: sticky; z-index: 12; top: 0; display: flex; align-items: center; justify-content: space-between;
  min-height: 70px; padding: max(12px, env(safe-area-inset-top)) max(22px, calc((100% - 1296px) / 2));
  background: rgb(255 255 255 / .97); border-bottom: 1px solid #f0eeed; }
.buy-brand { color: #c84972; font-size: 13px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.buy-brand span { color: #9b9996; font-size: 10px; letter-spacing: .08em; font-weight: 600; }
.buy-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.buy-bag, .buy-close { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 0 15px; border: 1px solid #dfddda; border-radius: 999px; background: transparent;
  color: #222; font: 600 12.5px var(--system); letter-spacing: 0; box-shadow: none; }
.buy-bag { background: #222; color: #fff; border-color: #222; }
.buy-bag-count { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 50%; background: #fff; color: #222; font-size: 10px; }
.buy-close:hover { background: #fff; }
.buy :focus-visible { outline: 2px solid #b7426c; outline-offset: 3px; }
.buy-main { width: min(100% - 48px, 1200px); margin: 38px auto 0; display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); gap: clamp(36px, 6vw, 92px); align-items: start; }
.buy-media { height: auto; min-width: 0; background: #fff; }
.buy-progress, .buy-grabber, .buy-photo-note { display: none; }
.buy-slides { display: block; overflow: hidden; height: auto; }
.buy-slide { margin: 0; position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.buy-slide img, .buy-slide.is-flat img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0; }
.buy-sheet { position: sticky; top: 100px; max-height: none; overflow: visible; padding: 18px 0 0; background: none;
  border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.is-card-open .buy-sheet { animation: none; }
.buy-info { display: grid; gap: 20px; max-width: 450px; }
.buy-head { display: block; cursor: default; touch-action: auto; }
.buy-head-text { display: grid; gap: 6px; }
.buy-index { margin: 0 0 10px; color: #8c8884; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.buy-name { margin: 0; color: #20201f; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.055em; font-weight: 650; }
.buy-design { margin: 0; color: #77726e; font-size: 15px; }
.buy-colour-line { display: none; }
.buy-price { margin: 18px 0 0; color: #20201f; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.buy-more { display: block; opacity: 1; }
.buy-more-inner { display: grid; gap: 14px; overflow: visible; padding: 3px 0; }
.buy .faces { justify-content: flex-start; margin-bottom: 8px; }
.buy .turn-switch { display: inline-flex; align-items: center; gap: 2px; height: auto; padding: 3px; background: #f1efed; box-shadow: none; backdrop-filter: none; }
.buy .turn-toggle, .buy .turn-icon, .buy .loupe { display: none; }
.buy .faces .turn-switch .turn-side { order: 0; display: inline-flex; justify-content: center; min-width: 86px; height: 40px; padding: 0 15px; border-radius: 999px;
  color: #77726e; font-size: 13px; font-weight: 600; }
.buy .faces .turn-switch .turn-side[aria-pressed="true"] { color: #20201f; background: #fff; box-shadow: 0 1px 5px rgb(40 30 35 / .1); }
.buy-label { margin: 8px 0 -8px; display: flex; gap: 8px; color: #77726e; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.buy-colour { color: #20201f; }
.buy .sheet-dots { display: flex; gap: 8px; margin: 0 0 5px -4px; }
.design-editor { min-width: 0; margin: 5px 0 2px; }
.design-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.design-editor-heading h3 { margin: 0; color: #77726e; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.design-editor-heading span { color: #a29398; font-size: 11px; font-variant-numeric: tabular-nums; }
.design-options { position: relative; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 7px;
  scrollbar-width: thin; scrollbar-color: #e5c5d0 transparent; scroll-snap-type: x proximity; }
.design-option { flex: 0 0 min(58%, 194px); min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 11px 13px; border: 1px solid #ede6e8; border-radius: 12px; background: #fff; text-align: left; scroll-snap-align: start;
  color: #272025; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.design-option:hover { border-color: #dcaabb; }
.design-option[aria-checked="true"] { border-color: #d8688f; background: #fff8fa; box-shadow: 0 0 0 1px #d8688f; }
.design-option-number { color: #bb8e9c; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.design-option-text { max-width: 100%; font-size: 12px; line-height: 1.18; font-weight: 800; letter-spacing: -.025em; }
.design-hint { margin: 5px 0 0; color: #a29498; font-size: 11px; line-height: 1.3; }
.buy .sizes { display: flex; gap: 8px; padding: 0; background: none; }
.buy .size { width: 48px; height: 44px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d6d3d0; font-size: 12px; font-weight: 650; }
.buy .size:hover { box-shadow: inset 0 0 0 1px #555; }
.buy .size[aria-pressed="true"] { color: #fff; background: #20201f; box-shadow: none; }
.buy .add { width: 100%; min-height: 52px; justify-content: center; border-radius: 999px; background: #292426; box-shadow: none; font-size: 14px; }
.buy .add:hover { background: #444; }
.buy .add [data-add-price] { display: none; }
.buy-game-link { display: none; }
.buy-material, .buy-lookbook, .buy-practical { width: min(100% - 48px, 1200px); margin-inline: auto; }
.buy-material { margin-top: 80px; padding-top: 25px; border-top: 1px solid #eae7e6; }
.buy-material h3, .buy-lookbook-title { margin: 0; color: #20201f; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.buy-material dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 22px 0 0; }
.buy-material dl div { display: grid; gap: 7px; }
.buy-material dt { font-size: 13px; font-weight: 650; }
.buy-material dd { margin: 0; color: #77726e; font-size: 13px; line-height: 1.55; }
.buy-lookbook { padding: 80px 0 0; }
.buy-collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 23px; border-bottom: 1px solid #dedbd7; }
.buy-eyebrow { margin: 0 0 12px; color: #b05e77; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.buy-collection-heading h3 { margin: 0; color: #20201f; font-size: clamp(25px, 3vw, 36px); font-weight: 650; letter-spacing: -.05em; line-height: 1.08; }
.buy-collection-heading > p { max-width: 260px; margin: 0; color: #77726e; font-size: 13px; line-height: 1.5; }
.lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 34px 15px; padding-top: 24px; }
.look { min-width: 0; color: #20201f; }
.look-link { display: block; color: inherit; text-decoration: none; }
.look-link:hover .look-image img { opacity: .88; }
.look-image { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: #fff; }
.look-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.look-body { padding: 0; }
.look-info { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.look-name { display: block; min-width: 0; margin: 8px 0 0; color: #20201f; font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.look-price { grid-column: 1; margin: 0; color: #77726e; font-size: 12px; }
.look-open { transition: opacity .2s ease; }
.look-open:hover { opacity: .88; }
.look-note { margin: 8px 0 0; color: #877b77; font-size: 10px; line-height: 1.35; }
.look-options { display: grid; gap: 9px; padding: 16px 0 2px; }
.look-label { margin: 3px 0 0; color: #77726e; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.look-label strong { color: #222; }
.look-colours, .look-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.look-colour { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 50%; }
.look-colour::before { content: ""; width: 21px; height: 21px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.look-colour[aria-pressed="true"] { border-color: #333; }
.lookbook .look-colours { gap: 0; margin: 1px 0 0 -7px; }
.lookbook .look-colour { width: 44px; height: 44px; position: relative; border: 0; }
.lookbook .look-colour::before { width: 18px; height: 18px; }
.lookbook .look-colour[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 3px #fff, 0 0 0 4px #9a8f92; }
.lookbook .look-colour:disabled { opacity: .3; cursor: not-allowed; }
.look-size { min-width: 40px; min-height: 40px; padding: 0 9px; border: 1px solid #d6d3d0; border-radius: 999px; background: #fff; color: #222; font-size: 12px; font-weight: 650; }
.look-size[aria-pressed="true"] { border-color: #222; color: #fff; background: #222; }
.look-add { width: 100%; min-height: 44px; margin-top: 4px; border-radius: 999px; color: #fff; background: #292426; font-size: 12px; font-weight: 700; }
.look-add:hover { background: #444; }
.look-error { margin: 0; color: #b42953; font-size: 12px; }
.look-error:empty { display: none; }
.look-empty { grid-column: 1 / -1; color: #77726e; font-size: 14px; }
.quick-shop { width: min(100% - 32px, 460px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px;
  border: 0; border-radius: 18px; color: #20201f; background: #fff; box-shadow: 0 20px 70px rgb(0 0 0 / .2); }
.quick-shop::backdrop { background: rgb(26 22 23 / .48); }
.quick-shop-header { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.quick-shop-image { width: 84px; aspect-ratio: 4 / 5; background: #fff; }
.quick-shop-image img { width: 100%; height: 100%; object-fit: contain; }
.quick-shop-heading { min-width: 0; }
.quick-shop-kicker { margin: 0 0 5px; color: #77726e; font-size: 11px; }
.quick-shop-title { margin: 0; color: #20201f; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.quick-shop-price { margin: 7px 0 0; font-size: 13px; font-weight: 650; }
.quick-shop-close { align-self: start; min-height: 44px; padding: 0 10px; color: #555; font-size: 12px; font-weight: 650; }
.quick-shop-note { margin: 13px 0 0; color: #877b77; font-size: 11px; }
.quick-shop .look-options { gap: 12px; padding-top: 23px; }
.quick-shop .look-colours { gap: 9px; }
.quick-shop .look-colour { width: 44px; height: 44px; }
.quick-shop .look-colour::before { width: 27px; height: 27px; }
.quick-shop .look-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick-shop .look-size { min-height: 46px; }
.quick-shop .look-add { min-height: 52px; font-size: 14px; }
.buy-practical { margin-top: 95px; margin-bottom: 80px; padding-top: 20px; border-top: 1px solid #dedbd7; }
.buy-practical summary { cursor: pointer; font-size: 14px; font-weight: 650; }
.buy-extra { display: block; opacity: 1; }
.buy-extra-inner { display: block; overflow: visible; }
.buy-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0; margin: 0; }
.buy-facts li { display: grid; align-content: start; gap: 6px; font-size: 12px; line-height: 1.45; color: #77726e; }
.buy-facts strong { color: #20201f; font-size: 12px; }
.buy-offers, .buy-note { display: none; }
html.is-card-open :is(.dock-bar, .colour-pick, .ribbon, .hint, .trial-note), html.is-card-open .tools > :not(#selection-open) { opacity: 0 !important; pointer-events: none; }
html.is-card-open .toast { bottom: auto; top: calc(var(--safe-top) + 78px); }
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .buy-toolbar { min-height: 60px; padding: max(9px, env(safe-area-inset-top)) 16px; }
  .buy-brand span { display: none; }
  .buy-bag, .buy-close { min-height: 44px; padding-inline: 12px; }
  .buy-main { width: min(100% - 32px, 620px); margin-top: 18px; display: grid;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "controls" "action" "game"; gap: 15px; }
  .buy-media { grid-area: media; position: sticky; z-index: 3; top: 60px; width: 100%; height: min(38svh, 320px); }
  .design-option { flex-basis: min(60%, 190px); min-height: 90px; }
  .buy-slides { height: 100%; }
  .buy-slide { height: 100%; aspect-ratio: auto; }
  .buy-sheet, .buy-info { display: contents; }
  .buy-head { grid-area: heading; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
  .buy-index { margin-bottom: 4px; }
  .buy-name { font-size: 25px; }
  .buy-price { margin: 0; font-size: 15px; }
  .buy-more { grid-area: controls; }
  .buy .add { grid-area: action; }
  .buy-game-link { grid-area: game; display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: -5px; padding: 0 16px;
    border: 1px solid #f1d4df; border-radius: 999px; background: #fff5f8; color: #9d3159; text-decoration: none; font-size: 13px; font-weight: 700; }
  .buy-game-link img { width: 22px; height: 22px; object-fit: contain; }
  .buy-game-arrow { margin-left: auto; font-size: 18px; font-weight: 400; }
  .buy .size { min-height: 44px; }
  .buy .dot { min-width: 44px; min-height: 44px; }
  .buy-material, .buy-lookbook, .buy-practical { width: min(100% - 32px, 620px); }
  .buy-material { margin-top: 48px; padding-top: 23px; }
  .buy-material dl { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
  .buy-lookbook { padding-top: 58px; }
  .buy-collection-heading { display: block; padding-bottom: 20px; }
  .buy-collection-heading > p { margin-top: 10px; }
  .lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px 12px; padding-top: 18px; }
  .look-name { font-size: 13px; }
  .buy-practical { margin-top: 70px; margin-bottom: calc(48px + var(--safe-bottom)); }
  .buy-facts { grid-template-columns: repeat(2, 1fr); }
  .quick-shop { width: 100%; max-width: 620px; max-height: min(88dvh, 700px); margin: auto auto 0;
    padding: 22px 20px calc(20px + var(--safe-bottom)); border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .buy { transition: none; } }
.sheet-dots { display: flex; gap: 0; margin-left: -6px; }
.dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.dot::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .16); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.dot[aria-pressed="true"]::before { transform: scale(.86); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .16), 0 0 0 2.5px #fff, 0 0 0 4px rgb(29 29 31 / .5); }
/* Sizes: a segmented control, like the front/back switch. */
.sizes { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 2px; border-radius: 10px; background: rgb(118 118 128 / .14); }
.size { height: 30px; border: 0; border-radius: 8px; color: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0; text-shadow: none; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.size:hover { background: rgb(255 255 255 / .5); }
.size[aria-pressed="true"] { background: #fff; color: var(--label); box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 .5px 1px rgb(0 0 0 / .1); }
.sizes.needs-size { animation: needs-size .45s var(--ease); box-shadow: 0 0 0 1.5px var(--brand); }
@keyframes needs-size { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.size-message { margin: -4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.size-message:empty { display: none; }
/* The main action: an iOS filled button in the brand pink (also in the bag and at checkout). */
.add { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-radius: 14px; background: var(--brand); color: #fff;
  font-family: var(--system); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none; box-shadow: 0 4px 14px rgb(214 51 108 / .28); transition: transform .15s var(--ease), background .2s ease; }
.add:hover { background: #c22a60; }
.add:active { transform: scale(.98); }
.add [data-add-price] { font-weight: 500; opacity: .92; font-variant-numeric: tabular-nums; }
.sheet .add { justify-content: center; width: 100%; }
.buy-links { margin: -2px 0 -4px; display: flex; justify-content: center; gap: 18px; }
.buy-links button { min-height: 28px; font-family: var(--system); font-size: 13px; font-weight: 500; color: var(--label-2); text-decoration: none; letter-spacing: 0; text-transform: none; text-shadow: none; }
.buy-links #reference-open { display: none; }
@keyframes card-open { from { opacity: 0; transform: translateY(6px); } }
/* The hint: just above the pill in the gallery; right under the piece up close. */
.hint { bottom: calc(var(--bottom) + 74px); }
html.is-focus .hint { top: calc(var(--shirt-bottom) + 62px); bottom: auto; }
html.is-browsing .hint { opacity: 0 !important; }
@media (max-height: 760px) and (max-aspect-ratio: 1/1) { .buy-links { display: none; } }
.fly-to-bag { position: fixed; z-index: 70; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 14px rgb(40 26 10 / .25)); transform-origin: 50% 50%; will-change: transform; }

/* Checkout: steps, fields and payment choices in the same idiom. */
.sheet { font-family: var(--system); }
.steps { display: flex; gap: 6px; margin: 0 44px -4px 0; padding: 0; list-style: none; font-size: 12px; font-weight: 600; color: var(--label-2); }
.steps li { flex: 1; padding-top: 8px; border-top: 3px solid rgb(118 118 128 / .2); }
.steps li.is-current { color: var(--label); border-color: var(--brand); }
.steps li.is-done { border-color: rgb(214 51 108 / .45); }
.checkout-form { display: grid; gap: 14px; min-width: 0; }
.checkout-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.checkout-promotion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0; margin-bottom: 5px; padding: 16px; border: 1px solid #f1d5df; border-radius: 15px; background: #fff7fa; }
.checkout-promo-total { margin: 0 0 2px; color: #292426; font-size: 14px; font-weight: 700; }
.checkout-promo-note, .checkout-promo-status { margin: 0; color: #6f4050; font-size: 12px; line-height: 1.45; }
.checkout-promo-status:empty { display: none; }
.checkout-promo-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.checkout-promo-row input { flex: 1 1 0; width: 0; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #ddc8cf; border-radius: 10px; background: #fff; color: #292426; font: 16px var(--system); }
.checkout-promo-check { min-height: 46px; padding: 0 14px; border-radius: 10px; background: #292426; color: #fff; font-size: 12px; font-weight: 700; }
.checkout-promo-check:disabled { opacity: .55; }
.checkout-game-link { color: #9d3159; font-size: 12px; font-weight: 650; line-height: 1.45; text-underline-offset: 3px; }
.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--label-2); }
.field-hint { font-size: 12px; color: var(--label-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 0; background: rgb(118 118 128 / .12); color: var(--label); font: 16px var(--system); }
.field textarea { resize: vertical; }
.field [aria-invalid="true"], .field .phone:has([aria-invalid="true"]) { box-shadow: 0 0 0 1.5px var(--brand); }
.phone { display: flex; align-items: center; border-radius: 12px; background: rgb(118 118 128 / .12); }
.phone .prefix { padding: 0 4px 0 12px; font-weight: 600; color: var(--label-2); }
.phone input { background: none; }
.pay-options { display: grid; gap: 8px; }
.pay-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-radius: 14px; background: rgb(118 118 128 / .1); font-weight: 600; cursor: pointer; }
.pay-text { display: grid; gap: 1px; }
.pay-detail { font-size: 12.5px; font-weight: 500; color: var(--label-2); font-variant-numeric: tabular-nums; }
.pay-option:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pay-option input { position: absolute; opacity: 0; }
.pay-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .15); }
.pay-option:has(input:checked) { background: #fff; box-shadow: 0 0 0 2px var(--brand), 0 4px 14px rgb(0 0 0 / .08); }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--label); outline-offset: 2px; }
.order-summary .parts li { font-size: 14px; }
.order-summary .total { padding-top: 8px; border-top: 1px solid rgb(0 0 0 / .08); }
.review { margin: 0; display: grid; gap: 10px; }
.review div { display: grid; gap: 2px; }
.review dt { font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.review dd { margin: 0; white-space: pre-line; font-size: 14px; }
.checkout-actions { display: flex; gap: 10px; align-items: center; }
.checkout-back { min-height: 46px; padding: 0 16px; border-radius: 14px; background: rgb(118 118 128 / .12); font-weight: 600; }
.checkout-back[hidden] + .add { flex: 1; }
.checkout-actions .add { flex: 1; }
.done-mark { margin: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 28px; font-weight: 700; animation: done-in .5s var(--ease) both; }
@keyframes done-in { from { transform: scale(.4); opacity: 0; } }

/* Last step: what to send and where, each with a copy button, then the steps in the order they happen. */
.pay-card { display: grid; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .08), 0 8px 22px rgb(30 16 24 / .06); overflow: hidden; animation: card-open .4s var(--ease) both; }
.pay-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 11px 16px; }
.pay-row + .pay-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: rgb(60 60 67 / .2); }
.pay-row-text { display: grid; gap: 1px; min-width: 0; }
.pay-row-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.pay-row.is-number .pay-row-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
.pay-row-value { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-row.is-amount .pay-row-value { font-size: 25px; letter-spacing: -.02em; }
.copy { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 15px; background: rgb(118 118 128 / .12); color: var(--label); font: 600 13px var(--system); letter-spacing: -.01em; transition: background .2s ease, color .2s ease, transform .15s var(--ease); }
.copy svg { width: 14px; height: 14px; }
.copy:active { transform: scale(.95); }
.copy.is-copied { background: rgb(52 199 89 / .16); color: #1d7a3b; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 10px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.how li::before { content: counter(how); width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center; background: rgb(214 51 108 / .12); color: var(--brand); font-size: 12.5px; font-weight: 700; }
.how li.is-done { color: var(--label-2); }
.how li.is-done::before { content: "✓"; background: var(--brand); color: #fff; animation: done-in .4s var(--ease) both; }
.sheet a.add { text-decoration: none; }
.send svg { width: 20px; height: 20px; margin-left: -2px; }

/* Fairy dust around the bag when a piece arrives. */
/* Dust catching the light around the bag: tiny, soft, quiet. */
.fairy { position: fixed; z-index: 71; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
  background: rgb(255 250 236); box-shadow: 0 0 6px 1px rgb(255 236 200 / .55); }

/* No cast shadow in the fallback either: the garments float in the arches. */
.shirt-ground { display: none; }
.shirt-float { filter: none; }

/* ——— Intro (2 November 2026): the garden film alone, then PINK SUNDAY comes over it and settles in its
   sky, the brand phrase and the way in. The film's place matches intro.js (filmLayout): a phone is
   covered; a wider screen shows it at full height and a little more (×1.18, cropped mostly below),
   centred, and the canvas draws the garden going on beside it, out of focus. ——— */
.intro { position: fixed; inset: 0; z-index: 90; overflow: hidden; container-type: size; background: #3f8ee8; color: #fff;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  --film-h: max(100cqh, 100cqw * 16 / 9); --film-top: calc((100cqh - var(--film-h)) / 2); --film-w: calc(var(--film-h) * 9 / 16);
  --logo-w: min(76cqw, var(--film-w) * .86, 540px); --logo-y: calc(var(--film-top) + var(--film-h) * .25); }
@media (min-aspect-ratio: 117 / 200) { .intro { --film-h: min(100cqh * 1.18, 100cqw * 16 / 9); --film-top: calc((100cqh - var(--film-h)) * .35); } }
html.no-intro .intro { display: none; }
/* Wide screens, until the canvas draws (and without WebGL): the film's first frame, blurred, beside it. */
@media (min-aspect-ratio: 117 / 200) {
  .intro::before { content: ""; position: absolute; inset: -90px; background: url(/assets/intro/intro-premiere.webp) center / cover no-repeat; filter: blur(48px) saturate(.9) brightness(1.05); }
  .intro-film { -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
/* Once the canvas has faded in over it, and during the way in, it is hidden (a paint change only). */
.intro.has-gl::before { visibility: hidden; transition: visibility 0s .9s; }
.intro.is-leaving::before { visibility: hidden; transition: none; }
.intro-film { position: absolute; left: 50%; top: var(--film-top); width: var(--film-w); height: var(--film-h); translate: -50% 0; object-fit: cover; pointer-events: none; }
.intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.intro.is-wide.has-gl .intro-gl { opacity: 1; }
/* The logo: it comes from the flowers, big and out of focus as if right at the lens, and settles sharp in the sky. */
.intro-logo { position: absolute; left: 50%; top: var(--logo-y); width: var(--logo-w); margin: 0; translate: -50% -50%; opacity: 0; pointer-events: none; will-change: transform, filter, opacity; }
.intro-logo img { width: 100%; height: auto; }
.intro.is-playing .intro-logo { animation: intro-logo 2s cubic-bezier(.16, 1, .3, 1) 1.3s both; }
@keyframes intro-logo { 0% { opacity: 0; transform: translateY(15cqh) scale(1.9); filter: blur(22px); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }
/* Once settled, light runs once across the letters. */
.intro-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background: linear-gradient(104deg, transparent 0 36%, rgb(255 255 255 / .8) 50%, transparent 64% 100%) -150% 0 / 46% 100% no-repeat;
  -webkit-mask: url(/assets/brand/pink-sunday-trim.webp) center / 100% 100% no-repeat; mask: url(/assets/brand/pink-sunday-trim.webp) center / 100% 100% no-repeat; }
.intro.is-playing .intro-logo::after { animation: intro-shine 1.15s cubic-bezier(.45, 0, .25, 1) 3.05s both; }
@keyframes intro-shine { from { background-position: -150% 0; } to { background-position: 250% 0; } }
.intro .phrase { position: absolute; top: calc(var(--logo-y) + var(--logo-w) * .244 + 18px); color: #fff; font-weight: 600; text-shadow: 0 1px 12px rgb(16 50 120 / .38);
  visibility: visible; opacity: 0; transition: none; }
.intro.is-playing .phrase { animation: intro-phrase 1.3s ease 2.55s both; }
@keyframes intro-phrase { from { opacity: 0; letter-spacing: .55em; } to { opacity: 1; letter-spacing: .22em; } }
/* The way in: the brand pink, in the thumb's reach like "Acheter" after it. Hidden (not clickable) until it rises. */
.intro-enter { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 40px); translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px 0 28px;
  border-radius: 999px; white-space: nowrap; font: 600 16px/1 var(--system); letter-spacing: -.01em; color: #fff; background: var(--brand);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 12px 30px rgb(214 51 108 / .38), 0 2px 6px rgb(120 20 60 / .22);
  opacity: 0; visibility: hidden; transition: scale .2s var(--ease), background .2s ease; }
.intro-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s var(--ease); }
.intro-enter:hover { background: #c22a60; }
.intro-enter:hover svg { translate: 3px 0; }
.intro-enter:active { scale: .96; }
.intro-enter:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.intro.is-playing .intro-enter { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) 3.15s both; }
@keyframes intro-rise { from { opacity: 0; visibility: hidden; transform: translateY(20px); } to { opacity: 1; visibility: visible; transform: none; } }
/* Leaving: the phrase and the button go first; the letters take over on the canvas, which opens onto the site. */
.intro.is-entering .phrase, .intro.is-entering .intro-enter { animation: intro-out .3s ease both !important; pointer-events: none; }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.intro.is-leaving { background: transparent; pointer-events: none; }
.intro.is-leaving .intro-gl { opacity: 1; transition: none; }
.intro.is-leaving .intro-logo, .intro.is-leaving .intro-film { visibility: hidden; }
/* Without WebGL (or with reduced motion): the logo lifts away and the intro fades over the opening garden. */
.intro.is-fading { opacity: 0; transition: opacity .9s ease .1s; }
.intro.is-fading .intro-film, .intro.is-fading .intro-logo { visibility: visible; }
.intro.is-fading .intro-logo { animation: intro-lift .9s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes intro-lift { from { opacity: 1; } to { opacity: 0; transform: scale(1.35); filter: blur(10px); } }
/* Reduced motion: the site's global rule stops every animation, so the intro is simply there (the film's
   first frame, the logo, the phrase, the button) and the way in is an instant switch. */
@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro .phrase, .intro-enter { opacity: 1; visibility: visible; }
  .intro.is-entering .phrase, .intro.is-entering .intro-enter { opacity: 0; visibility: hidden; }
  .intro-logo::after { display: none; }
}
/* While the intro is on screen the site waits underneath, its interface hidden; it comes in once the
   garden opens behind the letters, a little sooner than after the plain arrival. */
html.is-intro .top, html.is-intro .colour-pick, html.is-intro .dock-bar, html.is-intro .ribbon, html.is-intro .game,
html.is-intro .hint, html.is-intro .caption, html.is-intro .trial-note { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
html.from-intro .top .logo { animation: ui-in .9s ease .1s both; }
html.has-renderer.from-intro .top .tools { animation-delay: .45s; }
html.has-renderer.from-intro .ribbon { animation-delay: .7s; }
html.has-renderer.from-intro .colour-pick { animation-delay: .75s; }
html.from-intro .dock-bar { animation-delay: .85s; }
html.has-renderer.from-intro .hint { animation-delay: 1.5s; }
html.has-renderer.from-intro .game { animation-delay: 1.7s; }

/* Loading only: delayed to avoid a flash on a warm visit, no blocking overlay or minimum delay. */
.loading-status { position: fixed; z-index: 110; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); translate: -50% 0; max-width: calc(100vw - 32px); width: max-content; padding: 9px 15px; border-radius: 18px; background: #fffaf5; color: #6d4d59; font: 500 11px/1.4 var(--font); text-align: center; pointer-events: none; box-shadow: 0 2px 12px #2f182314; overflow: hidden; }
.loading-track { position: absolute; inset: 0 auto auto 0; height: 2px; width: 45%; background: #c2185b; animation: loading-travel 1.5s ease-in-out infinite; transform-origin: left; }
@keyframes loading-travel { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
#startup-retry { padding: 6px 12px; border-radius: 12px; background: #c2185b; color: #fff; margin-inline-start: 6px; }
@media (prefers-reduced-motion: reduce) { .loading-track { animation: none; width: 100%; opacity: .5; } }