/* shop.managero.co.uk
   Layout modelled on a minimalist merch store: dark fixed side panel, large light grotesk,
   small spaced mono labels, edge-to-edge product grid. Accent is managero green. */

@font-face { font-family: 'Inter'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/assets/fonts/inter-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
/* MNGR (quoted printed design text only, P139-#84) is always set in Helvetica Bold. Helvetica is licensed, so the shop ships TeX Gyre Heros Bold
   (GUST Font License, Helvetica Bold metrics), subset to the four letters M, N, G, R (1.4 KB). */
@font-face { font-family: 'MNGR Heros'; font-weight: 700; font-style: normal; font-display: block;
  src: url('/assets/fonts/texgyreheros-bold-mark.woff2') format('woff2'); unicode-range: U+47, U+4D-4E, U+52; }
@font-face { font-family: 'Plex Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }

:root {
  --bg: #161616;
  --panel: #141414;
  --tile: #1d1d1d;
  --ink: #cdcdcd;
  --dim: #7d7d7d;
  --rule: #3a3a3a;
  --accent: #71b869;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --panel-w: 33vw;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono, .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 9; background: var(--accent); color: #111; padding: 6px 10px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ---------- side panel ---------- */
.panel {
  background: var(--panel); padding: 20px 20px 24px; position: relative; overflow: hidden;
}
.panel-top { display: flex; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; width: 30px; height: 30px; }
.logo svg { width: 100%; height: 100%; }
.box {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 10px;
  border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.box:hover { background: var(--ink); color: var(--panel); }
.crumb { display: inline-block; margin: 36px 0 18px; }
.crumb:hover { color: var(--accent); }
.bignav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bignav a { font-size: 30px; line-height: 1.15; font-weight: 300; }
.bignav a[aria-current="true"], .bignav a:hover { color: var(--accent); }
.console {
  display: none; position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 0 12px 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.45; color: #e6e6e6; white-space: pre;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  pointer-events: none;
}
.lc { text-transform: none; letter-spacing: .04em; }
.mngr { font-family: 'MNGR Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal;
  letter-spacing: .02em; text-transform: none; }

/* terminal: shop.js wraps every character in <span class="ch"> and reveals them in order. Hidden characters
   take no space (display, not visibility), so the log grows like a real terminal: the console is pinned to
   the bottom of the panel, each new line appears at the bottom and pushes the earlier ones up into the fade.
   The console is absolutely positioned, so its growth never moves anything else on the page. */
.js .console { visibility: hidden; }
.js .console.ready { visibility: visible; }
.console .con-in { display: block; }
.console .con-opt { display: none; }   /* conditional boot lines: shop.js keeps or removes them */
.console .ch { display: none; }
.console .ch.on, .console.done .ch { display: inline; }
.console .cur {
  display: inline-block; width: .62em; height: 1.15em; margin-right: -.62em; vertical-align: -.22em;
  background: var(--accent); animation: cur-blink 1.06s steps(1, end) infinite;
}
@keyframes cur-blink { 50% { opacity: 0; } }

/* ---------- home ---------- */
.hero { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #2a2a2a; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-title {
  position: absolute; left: 7%; bottom: 7%; margin: 0; color: #e9e9e9; font-weight: 400;
  font-size: clamp(48px, 13vw, 120px); line-height: .92; letter-spacing: -.02em; text-shadow: 0 1px 30px rgba(0,0,0,.25);
}
.hero-season {
  position: absolute; left: 3%; bottom: 8%; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 14px; letter-spacing: .3em; color: #e9e9e9;
}
.hero-shop { position: absolute; right: 5%; bottom: 5%; font-size: 15px; color: #f0f0f0; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.card { position: relative; display: block; background: var(--tile); aspect-ratio: 3 / 4; overflow: hidden; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover img { transform: scale(1.025); }
.card .meta { position: absolute; left: 10px; top: 10px; right: 10px; color: #ececec; }
.card .more-link { position: absolute; left: 10px; bottom: 10px; color: #ececec; }
.card:hover .more-link { color: var(--accent); }
.card[hidden] { display: none; }
.card .meta, .card .more-link { text-shadow: 0 0 8px rgba(0,0,0,.35); }

.info { padding: 40px 20px; border-top: 1px solid var(--rule); display: grid; gap: 28px; }
.info h2 { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.info p { margin: 0; max-width: 36em; font-size: 15px; }

/* ---------- product ---------- */
.pname { margin: 0; font-weight: 300; font-size: 34px; line-height: 1.08; text-transform: uppercase; letter-spacing: .005em; }
.pcode { margin: 14px 0 0; color: var(--dim); }
.specs { list-style: none; margin: 26px 0 0; padding: 0; }
.specs-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.more-btn { padding: 8px 14px; border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--ink); color: var(--panel); }
.more { margin-top: 26px; }
.more h2 { margin: 26px 0 12px; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.more ul { list-style: none; margin: 0; padding: 0; }
.more li::before { content: '+ '; }
.more p { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; max-width: 34em; }
.unit-toggle { display: inline-flex; border: 1px solid var(--ink); }
.unit-toggle button { padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.unit-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.fit-head { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 12px; }
.fit-head h2 { margin: 0; }
.fit-sizes { display: flex; justify-content: space-between; margin: 0 0 8px; }
.fit-sizes button { padding: 6px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.fit-sizes button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; color: #fff; }
.fit-drawing { width: 100%; max-width: 360px; color: var(--ink); }
.fit-drawing text { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; fill: currentColor; }
.fit-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.fit-table th, .fit-table td { text-align: left; padding: 6px 4px; border-bottom: 1px dashed var(--rule); font-weight: 400; }

.stage { display: grid; }
.p-hero { position: relative; background: #8d8d8d; aspect-ratio: 3 / 4; overflow: hidden; }
.p-hero img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); }
.thumbs button { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #2a2a2a; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.thumbs button:hover img, .thumbs button[aria-current="true"] img { opacity: 1; }
.thumbs button[aria-current="true"]::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--accent); }
.buy-area { padding: 18px 16px 28px; }
.sizes { display: flex; justify-content: center; gap: 4px; padding: 14px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.sizes button { min-width: 52px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.sizes button[aria-checked="true"] { background: var(--ink); color: var(--panel); }
.sizes button:hover { color: var(--accent); }
.sizes button[aria-checked="true"]:hover { color: var(--panel); }
.buy {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 28px; height: 60px;
  border: 1px solid var(--ink); font-family: var(--mono); font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
}
a.buy:hover { background: var(--accent); border-color: var(--accent); color: #111; }
.buy[aria-disabled="true"], .buy:disabled { cursor: not-allowed; color: var(--dim); border-color: var(--rule); }
.buy-note { margin: 14px 0 0; color: var(--dim); text-align: center; }

/* ---------- footer ---------- */
.foot { padding: 28px 20px 36px; border-top: 1px solid var(--rule); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a:hover { color: var(--accent); }
.foot .company { margin: 18px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: var(--dim); max-width: 60em; }
.disclaimer { margin: 22px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--dim); max-width: 60em; }

/* ---------- header cart ---------- */
.top-right { display: flex; gap: 8px; align-items: center; }
.cart-btn { gap: 8px; }
.cart-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--accent); color: #111; font-size: 10px; letter-spacing: 0; }
.cart-btn:hover .cart-n { background: var(--panel); color: var(--accent); }
/* phones and tablets: the top row becomes a fixed header so the cart is always one tap away */
@media (max-width: 1099px) {
  .panel { padding-top: 78px; }
  .panel-top { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: 62px; padding: 0 16px;
    background: rgba(20, 20, 20, .96); border-bottom: 1px solid var(--rule); }
  .crumb { margin-top: 8px; }
  html { scroll-padding-top: 70px; }
}
@media (max-width: 360px) { .ext { display: none; } }
.nw { white-space: nowrap; }

/* ---------- cart drawer ---------- */
html.drawer-open { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s ease; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--panel);
  border-left: 1px solid var(--rule); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.drawer-head h2 { margin: 0; font-weight: 400; }
.drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.cart-view { display: flex; flex-direction: column; flex: 1; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px; border-bottom: 1px dashed var(--rule); }
.line-img { display: block; background: var(--tile); aspect-ratio: 3 / 4; overflow: hidden; }
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-name { font-size: 17px; line-height: 1.15; text-transform: uppercase; }
.line-name:hover { color: var(--accent); }
.line-meta { margin: 6px 0 12px; color: var(--dim); }
.line-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); }
.qty button { width: 36px; height: 34px; font-family: var(--mono); font-size: 15px; }
.qty button:hover { color: var(--accent); }
.qty button:disabled { color: var(--rule); cursor: not-allowed; }
.qty-n { min-width: 28px; text-align: center; font-family: var(--mono); font-size: 13px; }
.line-remove { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.line-remove:hover { color: var(--accent); }
.line-total { margin: 0; white-space: nowrap; }
.cart-foot { margin-top: auto; padding: 18px 16px 24px; border-top: 1px solid var(--rule); }
.subtotal { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.subtotal-n { font-size: 28px; font-weight: 300; }
.cart-note { margin: 8px 0 0; color: var(--dim); }
.cart-cta { margin-top: 18px; }
.cart-msg { margin: 10px 0 0; color: var(--accent); min-height: 1em; }
.cart-msg:empty { display: none; }
.cart-page-link { display: inline-block; margin-top: 14px; color: var(--dim); }
.cart-page-link:hover { color: var(--accent); }
.cart-empty { padding: 24px 16px 0; margin: 0; color: var(--dim); }
.cart-view > .cart-cta { margin: 18px 16px 0; width: auto; }

/* cart page */
.cart-main { min-height: 60vh; border-top: 1px solid var(--rule); }
.cart-page .pname { margin-top: 0; }
.cart-mount { max-width: 760px; }
@media (min-width: 700px) {
  .cart-page .line { grid-template-columns: 110px 1fr auto; padding: 22px 28px; gap: 22px; }
  .cart-page .cart-foot { padding: 24px 28px 32px; border-top: 0; }
  .cart-page .cart-empty { padding: 32px 28px 0; }
  .cart-page .cart-view > .cart-cta { margin: 18px 28px 0; max-width: 360px; }
}

/* ---------- wider screens ---------- */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card .meta { left: 18px; top: 16px; } .card .more-link { left: 18px; bottom: 16px; }
  .info { grid-template-columns: repeat(3, 1fr); padding: 48px 28px; }
  .hero { aspect-ratio: 16 / 10; }
  .stage { grid-template-columns: 1fr 1fr; }
  .p-hero { grid-row: span 2; }
  .thumbs { grid-template-columns: 1fr 1fr; align-self: start; }
}
@media (min-width: 1100px) {
  .panel {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--panel-w); padding: 32px 33px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .console { display: flex; flex-direction: column; justify-content: flex-end; height: 42vh; }
  .crumb { margin: 72px 0 26px; }
  .bignav { flex-direction: column; gap: 0; }
  .bignav a { font-size: clamp(40px, 3.8vw, 56px); line-height: 1.12; }
  .page { margin-left: var(--panel-w); }
  .pname { font-size: clamp(38px, 3.4vw, 50px); margin-top: 0; }
  .panel-scroll { overflow-y: auto; flex: 1; padding-right: 6px; position: relative; z-index: 1; scrollbar-width: thin; }
  .panel-scroll .specs-block { margin-top: auto; }
  .product .panel-scroll { display: flex; flex-direction: column; }
  .product .specs-block { margin-top: auto; padding-top: 40px; background: linear-gradient(to bottom, transparent, var(--panel) 30px); }
  /* product pages: the console sits in the panel flow between the title block and the specs. Its height is its
     flex share of the free space (basis 0, never its content), so typing never moves anything; it shrinks to
     nothing when More opens. */
  .product .console { position: relative; height: auto; flex: 1 1 0; min-height: 0; overflow: hidden; margin-top: 20px; }
  .stage { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .p-hero { aspect-ratio: auto; height: 100vh; position: sticky; top: 0; }
  .side { display: flex; flex-direction: column; }
  .buy-area { margin-top: auto; padding: 24px 16px 32px; }
  .hero { aspect-ratio: auto; height: 100vh; }
  .foot { padding: 32px 28px 40px; }
  .cart-main { border-top: 0; padding-top: 72px; min-height: 100vh; }
  .cart-page .console { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .card img { transition: none; } .console .cur { animation: none; } }

/* ---------- DROP 01 banner (Toby, 18 Oct 2026): one thin, plain line. No countdown, no flashing. ---------- */
.drop-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 9px 20px;
  background: #0f0f0f; border-bottom: 1px solid var(--rule); color: var(--ink);
}
.drop-bar .drop-name { color: #f0f0f0; }
.drop-bar .drop-give { color: var(--accent); margin-left: auto; }
.drop-bar .drop-upd { color: var(--dim); text-transform: none; letter-spacing: .04em; }
.drop-bar .drop-upd:empty { display: none; }
.drop-bar[data-state="closed"] .drop-close { color: #f0f0f0; }
.drop-bar[data-state="closed"] .drop-give { display: none; }   /* the closed line already says what was raised */
@media (max-width: 699px) {
  .drop-bar { gap: 2px 14px; padding: 8px 16px; font-size: 10px; }
  .drop-bar .drop-give { margin-left: 0; flex-basis: 100%; }
}

/* colourways of one design: links to the sibling products */
.colours { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; color: var(--dim); }
.colours span { margin-right: 4px; }
.colours a { border: 1px solid var(--rule); padding: 4px 9px; color: var(--ink); }
.colours a[aria-current="true"] { border-color: var(--ink); color: #f0f0f0; }
.colours a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- FAQ and About (P139-#82): mono section labels, questions in the light grotesk, answers in body text ---------- */
.faq-index { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 22px; color: var(--dim); }
.faq-index a:hover { color: var(--accent); }
.faq { border-top: 1px solid var(--rule); }
.faq-sec { padding: 34px 20px 38px; border-top: 1px solid var(--rule); }
.faq-sec:first-child { border-top: 0; }
.faq-h { margin: 0 0 18px; font-weight: 400; color: var(--dim); }
.faq-body { max-width: 44em; }
.faq-about-p { margin: 0 0 16px; font-size: 19px; line-height: 1.45; color: #e6e6e6; max-width: 34em; }
.faq-about-p:first-child { font-size: 26px; line-height: 1.2; color: #f0f0f0; }
.faq-about-p:last-child { margin-bottom: 0; color: var(--accent); }
.faq-item { padding: 18px 0; border-top: 1px dashed var(--rule); }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-q { margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 300; color: #f0f0f0; }
.faq-a p { margin: 0; max-width: 36em; font-size: 15px; }
.faq-a p + p { margin-top: 8px; }
.faq a[href^="mailto:"], .faq-a a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.faq-a a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.faq-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--dim); }
.more-faq { margin: 10px 0 0; }
.more-faq a { color: var(--dim); }
.more-faq a:hover { color: var(--accent); }
.info .more-faq { margin-top: 12px; font-size: 11px; }
.more .more-faq { margin-top: 10px; font-size: 11px; }
/* ---------- legal pages and /thanks (P139-#89): the FAQ layout, body text in plain paragraphs and lists ---------- */
.legal-body p { margin: 0 0 12px; max-width: 38em; font-size: 15px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body .legal-h3 { margin: 22px 0 8px; font-size: 19px; line-height: 1.25; font-weight: 300; color: #f0f0f0; }
.legal-body .legal-h3:first-child { margin-top: 0; }
.legal-ul { margin: 0 0 12px; padding-left: 1.2em; max-width: 38em; font-size: 15px; }
.legal-ul li + li { margin-top: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.legal a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.model-form { margin: 14px 0 0; padding: 16px 18px; border: 1px dashed var(--rule); max-width: 38em; }
.model-form p { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .02em; }
.legal-others { margin-top: 12px; }
.legal-others a[aria-current="page"] { color: var(--accent); }
.thanks a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.thanks strong { font-weight: 400; color: var(--accent); }
@media (min-width: 700px) {
  .faq-sec { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0 28px; padding: 44px 28px 48px; }
  .faq-h { margin: 6px 0 0; }
}
@media (min-width: 1100px) {
  .faq { border-top: 0; padding-top: 24px; }
  .faq-about-p:first-child { font-size: clamp(28px, 2.4vw, 36px); }
}

/* ---------- page fade between shop pages (P139-#84, Toby 18 Oct 2026 12:03: "the fade in and out thing that palantir
   does"). Modelled on store.palantir.com as observed (139 assets/merch/previews/fade-and-naming/palantir-observation.md):
   the content fades out over 0.2 s on an internal link click, then the next page's content fades in over 0.5 s after a
   0.15 s pause; a 2 px bar grows along the top while it leaves; the dark panel and its terminal do not fade or move.
   Leave: shop.js adds html.is-leaving on an internal link click and navigates 220 ms later (never for external,
          new-tab, download or same-page hash links, nor form submits, nor under reduced motion).
   Enter: browsers with cross-document View Transitions run it below (also on back and forward); the others get
          html.shop-enter from the inline script in <head> (set only when the previous page faded out).
   Only opacity and transform change, so nothing shifts. Under prefers-reduced-motion none of it applies. */
@view-transition { navigation: auto; }
.panel { view-transition-name: shop-panel; }
.panel-top { view-transition-name: shop-top; }     /* the phones' fixed header row, which lives inside the panel */
::view-transition-group(shop-panel), ::view-transition-group(shop-top),
::view-transition-new(shop-panel), ::view-transition-new(shop-top) { animation: none; }
::view-transition-old(shop-panel), ::view-transition-old(shop-top) { display: none; }   /* swaps in place, no fade */
::view-transition-old(root) { animation: shop-out 200ms cubic-bezier(.25, .46, .45, .94) both; }
::view-transition-new(root) { animation: shop-in 500ms cubic-bezier(.215, .61, .355, 1) 150ms both; }
@keyframes shop-out { to { opacity: 0; } }
@keyframes shop-in { from { opacity: 0; } }

html.is-leaving .page, html.is-leaving .drawer { opacity: 0; transition: opacity 200ms cubic-bezier(.25, .46, .45, .94); }
html.shop-enter .page { animation: shop-in 500ms cubic-bezier(.215, .61, .355, 1) 150ms backwards; }
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
html.is-leaving body::after { opacity: 1; animation: shop-bar-out 300ms cubic-bezier(.165, .84, .44, 1) both; }
html.shop-arrive body::after { animation: shop-bar-in 450ms ease-out both; }
@keyframes shop-bar-out { from { transform: scaleX(0); } to { transform: scaleX(.7); } }
@keyframes shop-bar-in { 0% { transform: scaleX(.7); opacity: 1; } 33% { transform: scaleX(1); opacity: 1; }
  45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.is-leaving .page, html.is-leaving .drawer { opacity: 1; transition: none; }
  html.shop-enter .page { animation: none; }
  html.is-leaving body::after, html.shop-arrive body::after { animation: none; opacity: 0; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}