/* LUMA storefront — typography, spacing and control geometry are taken from
 * measurements of the Apple China storefront, not from impressions.
 *
 * Measured on 2026-09-21 (see .runtime/design-tokens/: apple-tokens.json and apple-tokens-2.json):
 *   global nav 44px · local nav 52px (sticky) · content container 980px
 *   body 17px / lh 25px · ink #1d1d1f · muted #6e6e73 · blue #0071e3 · fill #f5f5f7
 *   display 56px/600/normal/60px · tile 40px/600/normal/44px
 *   tile subhead 28px/400/+0.196px/35px · section head 48px/600/normal/52px
 *   primary button 44px tall, padding 11px 21px, 17px, radius 980px
 *   large CTA 54px tall, padding 14px 22px
 *   local-nav button 36px tall, padding 7px 15px, 17px
 *
 * Apple never applies negative tracking to its Chinese display type: measured
 * values are `normal` or slightly positive (+0.128px, +0.196px).
 */

/* The CJK web font is declared in fonts.css, which is injected only for locales
 * that need it. See i18n.js — loading it on an English page wasted 17MB. */

:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --hairline: #e8e8ed;
  --fill: #f5f5f7;
  --fill-2: #fbfbfd;
  --link: #0066cc;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --latin: "SF Pro SC", "SF Pro Text", "SF Pro Display", "Segoe UI", Helvetica, Arial;
  --cjk: "Noto Sans SC Local", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  --sans: var(--latin), var(--cjk), sans-serif;
  --track-display: normal;
  --track-cjk-sub: 0.196px;
  --container: 980px;
  /* Inset shared by a product row's heading and its cards. */
  --rail-gutter: 40px;
  --radius-pill: 980px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3, h4, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.content-width { width: calc(100% - 40px); max-width: var(--container); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.filter-note { text-align: center; font-size: 12px; line-height: 18px; color: var(--muted); padding: 26px 20px 0; }

/* ------------------------------------------------------------ legal pages */

.legal-page { padding: 64px 0 96px; }
.legal-title { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: var(--track-display); }
.legal-intro { font-size: 21px; line-height: 29px; color: var(--muted); margin-top: 16px; max-width: 46em; }
.legal-updated { font-size: 12px; line-height: 18px; color: var(--muted); margin-top: 14px; }
.legal-section { margin-top: 44px; max-width: 46em; }
.legal-section h2 { font-size: 24px; line-height: 30px; font-weight: 600; }
.legal-section p { font-size: 17px; line-height: 26px; color: var(--ink); margin-top: 12px; }
.legal-closing { font-size: 17px; line-height: 26px; color: var(--muted); margin-top: 44px; max-width: 46em; }
.legal-contact { margin-top: 12px; font-size: 17px; }
/* Operator details at the foot of a policy: a definition list reads better than
 * a sentence for a block of address, phone and hours. */
.legal-operator { margin-top: 44px; max-width: 46em; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-operator h2 { font-size: 20px; line-height: 26px; font-weight: 600; }
.legal-operator dl { margin-top: 16px; }
.legal-operator dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding-block: 7px; }
.legal-operator dt { font-size: 14px; line-height: 22px; color: var(--muted); }
.legal-operator dd { font-size: 15px; line-height: 22px; color: var(--ink); }

.legal-links {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.legal-links a { font-size: 14px; line-height: 20px; color: var(--blue); }
.legal-links a:hover { text-decoration: underline; }

@media (max-width: 734px) {
  .legal-page { padding: 36px 0 64px; }
  .legal-title { font-size: 32px; line-height: 37px; }
  .legal-intro { font-size: 17px; line-height: 25px; }
  .legal-section { margin-top: 32px; }
  .legal-section h2 { font-size: 20px; line-height: 25px; }
  .legal-section p, .legal-closing { font-size: 16px; line-height: 25px; }
  .legal-operator dl > div { grid-template-columns: 1fr; gap: 2px; padding-block: 9px; }
  .legal-operator dt { font-size: 12px; }
  .legal-links { gap: 8px 18px; margin-top: 32px; }
}

/* ---------------------------------------------------------------- chrome */
.global-nav { height: 44px; background: rgba(245, 245, 247, 0.8); backdrop-filter: saturate(180%) blur(20px); }
.global-inner { max-width: var(--container); height: 100%; margin-inline: auto; padding-inline: 20px; display: flex; align-items: center; gap: 28px; font-size: 12px; line-height: 16px; }
.global-brand { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.global-links { display: flex; align-items: center; gap: 24px; color: rgba(0, 0, 0, 0.8); }
.global-links a { padding-block: 14px; }
.global-links a:hover, .global-links a[aria-current] { color: var(--blue); }
.global-tail { margin-left: auto; display: inline-flex; align-items: center; gap: 18px; }
.list-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(0, 0, 0, 0.8); }
.list-link:hover { color: var(--blue); }
.list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.lang-option {
  font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  color: rgba(0, 0, 0, 0.56); cursor: pointer; white-space: nowrap;
}
.lang-option:hover { color: var(--ink); }
.lang-option.is-active { color: var(--blue); border-color: currentColor; }

/* local nav: measured 52px, sticky, translucent */
.product-nav {
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 253, 0.9);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: saturate(180%) blur(20px);
}
.product-inner { max-width: var(--container); height: 100%; margin-inline: auto; padding-inline: 20px; display: flex; align-items: center; gap: 28px; }
.product-title { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: var(--track-display); white-space: nowrap; }
.product-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, 0.8); }
.product-links a { padding-block: 18px; }
.product-links a:hover { color: var(--blue); }

/* Shown in the global bar on wide screens only; the mobile block below moves it
   into the second row, where there is room to scroll it. */
.product-categories { display: none; }

/* buttons: geometry from the measured storefront */
.pill-button {
  flex-shrink: 0;
  display: inline-block;
  font-size: 17px;
  line-height: 22px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: #fff;
}
.pill-button:hover { background: var(--blue-hover); }
.button {
  display: inline-block;
  font-size: 17px;
  line-height: 22px;
  padding: 11px 21px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: #fff;
}
.button:hover { background: var(--blue-hover); }
/* The outlined variant draws its edge with an inset shadow rather than a real
 * border. A 1px border would make it 2px taller than the filled button, and the
 * flex row would stretch the filled one to match. */
.button-secondary {
  display: inline-block;
  font-size: 17px;
  line-height: 22px;
  padding: 11px 21px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue);
  background: transparent;
}
.button-secondary:hover { background: rgba(0, 113, 227, 0.06); }
.button-large { font-size: 17px; line-height: 26px; padding: 14px 22px; }

/* ------------------------------------------------------------ hero / tiles */
.hero-tile { background: var(--fill); text-align: center; padding: 76px 20px 0; }
.hero-tile .eyebrow { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: var(--track-display); }
.hero-tile h1 { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: var(--track-display); margin-top: 6px; }
.hero-tile .subhead { font-size: 28px; line-height: 35px; font-weight: 400; letter-spacing: var(--track-cjk-sub); margin-top: 8px; }
.hero-ctas { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; }
.hero-tile .fixture-note { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 18px; padding-bottom: 40px; }

/* horizontally paged rails, measured from the Apple Store rows: 400x500 cards
 * with an 18px radius on a dark surface, scroll-snap, and 45px round arrows that
 * stay invisible until the row is hovered or focused. */
/* Every row uses one gutter, which is also what the headings above them use.
 * The reference storefront keeps its rails wide with a modest inset, rather than
 * centring them in a narrow column that leaves a large empty margin. */
.rail-section { padding-block: 4px 10px; }
.rail-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 44px var(--rail-gutter) 20px;
}
.rail-head h2 { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: var(--track-display); }
.rail-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.rail-head .text-link { margin-left: auto; }
.rail { position: relative; }
.rail-track {
  display: flex; gap: 20px; padding-block: 0 6px;
  padding-inline: var(--rail-gutter);
  /* Snap aligns to the scrollport, which by default ignores padding, so the
     inset has to be repeated here or the first card snaps flush to the edge. */
  scroll-padding-inline: var(--rail-gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 18px; }
.rail-card {
  flex: 0 0 400px; scroll-snap-align: start;
  display: flex; flex-direction: column; height: 500px;
  border-radius: 18px; overflow: hidden;
  background: var(--ink); color: #f5f5f7;
}
.rail-card-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; min-height: 0; }
.rail-card-media { flex: 0 0 262px; background: #000; }
.rail-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-card-body { flex: 1 1 auto; padding: 22px 26px 0; display: flex; flex-direction: column; min-height: 0; }
.rail-card-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; color: #6cb2f7; }
.rail-card-title { font-size: 24px; line-height: 29px; font-weight: 600; margin-top: 4px; }
.rail-card-sub {
  font-size: 14px; line-height: 20px; color: rgba(245, 245, 247, 0.68); margin-top: 8px;
  /* The card has a fixed height, so the copy is clamped rather than allowed to
     push the actions out of the card. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-card-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 26px 24px; }
.rail-card-more, .rail-card-add {
  font-size: 13px; line-height: 1; padding: 10px 16px;
  border-radius: var(--radius-pill); border: 0; cursor: pointer; white-space: nowrap;
}
.rail-card-more { background: var(--blue); color: #fff; display: inline-block; }
.rail-card-more:hover { background: var(--blue-hover); }
.rail-card-add { background: transparent; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.55); }
.rail-card-add:hover { background: rgba(245, 245, 247, 0.14); }
.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 45px; height: 45px; border-radius: 56px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(210, 210, 215, 0.64); color: rgba(0, 0, 0, 0.8);
  cursor: pointer; opacity: 0; transition: opacity 0.2s ease; z-index: 3;
  backdrop-filter: blur(8px);
}
.rail:hover .rail-arrow, .rail:focus-within .rail-arrow { opacity: 1; }
.rail-arrow:hover { background: rgba(210, 210, 215, 0.92); }
.rail-arrow[hidden] { display: none; }
.rail-arrow-prev { left: 24px; }
.rail-arrow-next { right: 24px; }

/* Compact cards for a whole category. */
.card-section { padding-block: 8px 76px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; padding-top: 34px; }
.card-media { border-radius: 18px; overflow: hidden; background: var(--fill); aspect-ratio: 2 / 1; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-name { font-size: 21px; line-height: 25px; font-weight: 600; margin-top: 14px; }
.card-sub { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 4px; }

/* category sections on the home page */
.group-bar { display: flex; align-items: baseline; gap: 16px; padding: 46px 0 22px; }
.group-bar h2 { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: var(--track-display); }
.group-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.text-link { margin-left: auto; font-size: 17px; line-height: 25px; color: var(--link); white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.tile-section { padding-top: 8px; margin-bottom: 12px; }

/* category landing head */
.group-head { text-align: center; padding: 72px 20px 8px; }
.group-head h1 { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: var(--track-display); margin-top: 6px; }
.group-count { font-size: 17px; line-height: 25px; color: var(--muted); margin-top: 14px; }

.buy-lead { font-size: 17px; line-height: 25px; color: var(--muted); max-width: 560px; }
.buy-note { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 16px; max-width: 520px; }
.totals-note { font-size: 14px; line-height: 20px; color: var(--muted); max-width: 460px; }

/* --------------------------------------------------------- product detail */
.identification { text-align: center; padding: 64px 20px 0; }
.identification h1 { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: var(--track-display); margin-top: 6px; }
.identification .eyebrow { font-size: 21px; line-height: 25px; font-weight: 600; }
.identification .subhead { font-size: 28px; line-height: 35px; font-weight: 400; letter-spacing: var(--track-cjk-sub); margin-top: 8px; }
.device-figure { margin-top: 34px; }
.device-stage { display: flex; align-items: center; justify-content: center; }
.device-stage img { height: 430px; width: auto; max-width: 100%; }
.buy { padding-block: 48px 8px; }
.buy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; border-top: 1px solid var(--line); padding-top: 30px; }
.buy-price { font-size: 28px; line-height: 35px; font-weight: 600; letter-spacing: var(--track-display); }
.buy-desc { font-size: 17px; line-height: 25px; color: var(--muted); margin-top: 10px; max-width: 520px; }
.buy-actions { display: flex; flex-direction: column; gap: 12px; }
.option-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-option { padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 20px; text-align: left; }
.pill-option:hover { border-color: #b9b9bf; }
.pill-option.is-selected { border-color: var(--blue); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.buy-status { font-size: 13px; line-height: 18px; color: #1d7d3f; min-height: 20px; }
.fixture-note { font-size: 12px; line-height: 16px; color: var(--muted); }

/* section head: measured 48px/600/normal/52px */
.section { padding-block: 40px 80px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.section-head h2, .specs h2 { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: var(--track-display); }
.section-note { font-size: 14px; line-height: 20px; color: var(--muted); }
.empty { padding: 40px 0; color: var(--muted); }

/* specs */
.specs { padding-block: 14px 0; }
.specs > .content-width > h2 { padding-block: 60px 28px; border-bottom: 1px solid var(--line); }
.spec-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 40px; padding-block: 34px; border-bottom: 1px solid var(--line); align-items: start; }
.spec-label h3 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: var(--track-display); }
.spec-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 20px; padding-block: 11px; }
.spec-list > div + div { border-top: 1px solid var(--hairline); }
.spec-list dt { color: var(--muted); }
.spec-list dd { font-size: 17px; line-height: 25px; }
.group-content p { color: #424245; line-height: 25px; max-width: 620px; }

/* bag */
.bag-list { padding-top: 8px; }
.bag-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 22px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--hairline); }
.bag-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; background: var(--fill); }
.bag-name { font-size: 17px; line-height: 25px; font-weight: 600; }
.bag-name:hover { color: var(--blue); }
.bag-variant { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 3px; }
.link-button { font-size: 14px; line-height: 20px; color: var(--blue); margin-top: 8px; padding: 0; }
.link-button:hover { text-decoration: underline; }
.bag-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; }
.bag-qty button { width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; }
.bag-qty button:hover { background: var(--fill); }
.bag-qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.bag-price { font-size: 17px; line-height: 25px; min-width: 110px; text-align: right; }
.checkout-bar { background: var(--fill); padding-block: 36px; }
.checkout-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.totals { min-width: 300px; }
.totals-row { display: flex; justify-content: space-between; gap: 40px; font-size: 15px; line-height: 22px; color: var(--muted); padding-block: 4px; }
.totals-total { font-size: 21px; line-height: 28px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }

/* checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-top: 34px; align-items: start; }
.checkout-form fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.checkout-form legend { font-size: 21px; line-height: 25px; font-weight: 600; margin-bottom: 12px; }
.checkout-form label { display: block; font-size: 13px; line-height: 18px; color: var(--muted); margin-bottom: 14px; }
.checkout-form input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.checkout-form input:focus { border-color: var(--blue); }
.form-status { font-size: 13px; line-height: 20px; min-height: 20px; margin-bottom: 10px; }
.form-status.is-error { color: #c0392b; }
.order-summary { background: var(--fill); border-radius: 18px; padding: 24px; }
.order-summary h3 { font-size: 17px; line-height: 25px; font-weight: 600; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 18px; font-size: 14px; line-height: 20px; color: var(--muted); padding-block: 6px; }

/* footer */
/* account: card geometry measured from Apple's own account page
 * (475x326 card, 19px radius, 40px padding, 48px/600 heading) */
.auth-main { min-height: 56vh; }
.auth-wrap { display: flex; flex-direction: column; align-items: center; padding: 64px 20px 88px; }
.auth-card {
  width: 100%; max-width: 475px; background: #fff;
  border: 1px solid var(--hairline); border-radius: 19px; padding: 40px;
}
.auth-title { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: var(--track-display); }
.auth-sub { font-size: 17px; line-height: 25px; color: var(--muted); margin-top: 10px; }
.auth-field { display: block; margin-top: 18px; }
.auth-field > span { display: block; font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 6px; }
.auth-field input {
  display: block; width: 100%; padding: 12px 14px;
  font-size: 17px; line-height: 22px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.auth-field input:focus { border-color: var(--blue); outline: none; }
.auth-submit { width: 100%; margin-top: 26px; }
.auth-submit[disabled] { opacity: 0.5; }
.auth-switch {
  display: block; width: 100%; margin-top: 18px; padding: 0;
  font-size: 14px; line-height: 20px; color: var(--blue);
  background: none; border: 0; cursor: pointer; text-align: center;
}
.auth-switch:hover { text-decoration: underline; }
.auth-notice { margin-top: 16px; font-size: 14px; line-height: 20px; }
.auth-notice.is-error { color: #c0392b; }
.auth-privacy { max-width: 475px; margin-top: 18px; font-size: 12px; line-height: 18px; color: var(--muted); }
.auth-facts { margin-top: 24px; border-top: 1px solid var(--line); }
.auth-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.auth-facts dt { color: var(--muted); }
.auth-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* admin: model list beside the editor */
.admin-wrap { padding: 48px 0 88px; }
.admin-head h1 { font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: var(--track-display); }
.admin-sub { font-size: 17px; line-height: 25px; color: var(--muted); margin-top: 10px; }
.admin-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; margin-top: 34px; align-items: start; }
.admin-list { border: 1px solid var(--hairline); border-radius: 19px; padding: 18px; }
.admin-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.admin-list-head h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.admin-items { max-height: 620px; overflow-y: auto; padding-top: 8px; }
.admin-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: transparent; border: 0; cursor: pointer; }
.admin-item:hover { background: var(--fill); }
.admin-item.is-active { background: var(--fill); box-shadow: inset 0 0 0 1px var(--blue); }
.admin-item-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.admin-item-group { font-size: 12px; line-height: 16px; color: var(--muted); }
.admin-editor { border: 1px solid var(--hairline); border-radius: 19px; padding: 28px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-form select, .admin-form textarea {
  display: block; width: 100%; padding: 12px 14px; font-size: 15px; line-height: 20px;
  color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font-family: inherit;
}
.admin-form select:focus, .admin-form textarea:focus { border-color: var(--blue); outline: none; }
.admin-form textarea { resize: vertical; }
.admin-image { display: flex; align-items: flex-end; gap: 16px; }
.admin-thumb { width: 128px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hairline); flex: 0 0 auto; }
.admin-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.admin-hint { font-size: 12px; line-height: 18px; color: var(--muted); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* admin: overview stats, account table, enquiry log */
.admin-overview, .admin-users, .admin-inquiries { margin-top: 26px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.admin-stat { background: var(--fill); border-radius: 14px; padding: 16px 18px; }
.admin-stat-value { display: block; font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-stat-label { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
.admin-search {
  width: 220px; padding: 8px 12px; font-size: 14px; line-height: 20px;
  border: 1px solid var(--line); border-radius: 980px; background: #fff; font-family: inherit;
}
.admin-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.admin-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted); padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.admin-table input, .admin-table select {
  width: 100%; padding: 8px 10px; font-size: 14px; line-height: 18px; font-family: inherit;
  color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.admin-cell-muted { font-size: 13px; color: var(--muted); white-space: nowrap; }
.admin-cell-actions { display: flex; gap: 12px; white-space: nowrap; }
.admin-cell-actions .link-button:disabled { color: var(--muted); cursor: not-allowed; }
.admin-self { font-size: 11px; color: var(--blue); }
.admin-online { color: #1d7d3f; }
.admin-locale-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 980px; padding: 2px 7px;
}
.admin-inquiry-list { margin-top: 14px; }
.admin-inquiry { border-top: 1px solid var(--hairline); padding-block: 14px; }
.admin-inquiry-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-inquiry-head strong { font-size: 15px; }
.admin-inquiry-head .link-button { margin-left: auto; }
.admin-inquiry-contact { font-size: 13px; line-height: 19px; color: var(--muted); margin-top: 6px; }
.admin-inquiry-models { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.admin-inquiry-models li { font-size: 13px; line-height: 19px; }
.admin-tabs { display: flex; gap: 6px; margin-top: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.admin-tab {
  font-size: 15px; line-height: 20px; padding: 10px 16px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue); }

/* editable page content */
.admin-content-form, .admin-media { margin-top: 26px; }
.admin-panel { border: 1px solid var(--hairline); border-radius: 19px; padding: 26px; margin-bottom: 18px; }
.admin-panel h2 { font-size: 21px; line-height: 25px; font-weight: 600; }
.admin-fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.admin-fieldset legend { font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 6px; }
.admin-locales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-locale > span { display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.admin-locale input, .admin-locale textarea, .admin-row input, .admin-link-row input, .admin-column-head input {
  display: block; width: 100%; padding: 10px 12px; font-size: 14px; line-height: 20px;
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #fff; font-family: inherit;
}
.admin-locale textarea { resize: vertical; }
.admin-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; }
.admin-repeater { margin-top: 14px; }
.admin-row { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.admin-column { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }
.admin-column-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-links { margin-top: 10px; }
.admin-link-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.6fr; gap: 10px; margin-bottom: 8px; }

/* media field and library */
.admin-media-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 18px; }
.admin-media-chip { grid-column: 1 / -1; font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.admin-media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.admin-media-card { margin: 0; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--fill); }
.admin-media-card img, .admin-media-card video { display: block; width: 100%; height: 120px; object-fit: cover; background: #000; }
.admin-media-card figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 10px; color: var(--muted); }
.admin-media-card code { font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 10px 10px; }

/* hero with an uploaded image or video behind the copy */
.hero-tile-media { position: relative; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-tile-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
}
.hero-tile-media .hero-copy { position: relative; z-index: 2; }
.hero-tile-media .eyebrow, .hero-tile-media h1,
.hero-tile-media .subhead, .hero-tile-media .fixture-note { color: #f5f5f7; }
.hero-tile-media .button-secondary { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.8); }

/* age gate: full-screen cover mirroring the brand's own gate — dark scrim,
 * centred warning, and two buttons where declining is outlined and accepting is
 * the only filled one. */
body.age-gate-open { overflow: hidden; }
.age-gate {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto; text-align: center;
  /* The brand's own gate sits over dark product photography, so 0.9 is enough
   * there. This storefront is a light page, where the same value still lets the
   * content compete, so it is darker and slightly blurred. */
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(3px);
  color: #f5f5f7;
}
.age-gate-panel { max-width: 620px; }
.age-gate-brand {
  font-size: 28px; line-height: 34px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.age-gate-warning {
  margin-top: 22px; font-size: 20px; line-height: 26px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.age-gate-question { margin-top: 10px; font-size: 22px; line-height: 28px; font-weight: 500; }
.age-gate-nicotine { margin-top: 16px; font-size: 16px; line-height: 24px; color: rgba(245, 245, 247, 0.9); }
.age-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.age-gate-decline, .age-gate-accept {
  min-width: 168px; padding: 14px 30px;
  font-size: 16px; line-height: 20px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
}
.age-gate-decline { color: #f5f5f7; background: transparent; border-color: rgba(245, 245, 247, 0.85); }
.age-gate-decline:hover { background: rgba(245, 245, 247, 0.14); }
.age-gate-accept { color: #fff; background: #e60012; border-color: #e60012; }
.age-gate-accept:hover { background: #c8000f; border-color: #c8000f; }
.age-gate-legal { margin-top: 28px; font-size: 13px; line-height: 20px; color: rgba(245, 245, 247, 0.62); }
.age-gate-denied .age-gate-legal { font-size: 15px; line-height: 23px; color: rgba(245, 245, 247, 0.85); }

/* footer: link directory, social row, legal line */
.site-footer { background: var(--fill); margin-top: 48px; font-size: 12px; line-height: 18px; color: rgba(0, 0, 0, 0.56); }
/* Columns flow to fit the container rather than a fixed count, so adding a
 * column in the admin does not push the last one out of the row. */
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; padding-block: 44px 30px; }
.footer-col h3 { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink); }
.footer-col ul { margin-top: 12px; }
.footer-col li + li { margin-top: 9px; }
.footer-col a { color: rgba(0, 0, 0, 0.56); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
/* Social marks are sized to read at a glance rather than as fine print. Each
 * link is a 46px disc with a faint tint so it is visibly interactive, and the
 * hover inverts to ink. The gap stays small because the discs themselves carry
 * the separation. */
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 18px; border-top: 1px solid var(--line); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: rgba(0, 0, 0, 0.72); background: rgba(0, 0, 0, 0.05);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.footer-social a:hover { color: #fff; background: var(--ink); }
.footer-social .social-mark { width: 30px; height: 30px; }
/* An uploaded mark is a raster image, so it is contained rather than stretched. */
img.social-mark { object-fit: contain; }
.footer-legal { display: flex; justify-content: space-between; gap: 24px; padding-block: 18px 30px; border-top: 1px solid var(--line); }
.footer-legal p { max-width: 640px; }

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buy-grid, .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .spec-group { grid-template-columns: 190px minmax(0, 1fr); gap: 0 28px; }
  .section-head h2, .specs h2 { font-size: 40px; line-height: 44px; }
}

/* Touch targets.
 *
 * Any control a finger has to hit gets a 44px minimum, on every touch-capable
 * width — a tablet's viewport is wider than the phone breakpoint, so keying this
 * off the phone breakpoint alone left iPad-width controls undersized. Desktop
 * keeps its tighter metrics because a mouse is precise. */
@media (max-width: 900px) {
  .global-brand,
  .list-link,
  .lang-option,
  .rail-head .text-link,
  .pill-button,
  .auth-switch,
  .rail-card-more,
  .rail-card-add {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .global-brand { padding-inline: 2px; }
  .lang-switch { gap: 0; }
  .lang-option { padding-inline: 10px; }
  .auth-switch { justify-content: center; }
}

@media (max-width: 734px) {
  :root { --rail-gutter: 20px; }
  .content-width { width: calc(100% - 32px); }
  .global-nav { height: 48px; }
  .global-inner { padding-inline: 16px; gap: 12px; }
  /* Category names are longer in some locales than the narrow bar can hold. Only
     the middle section scrolls: the brand stays put and the language switcher,
     account and enquiry links stay reachable without scrolling, because those
     are the controls a visitor actually needs. */
  .global-inner { flex-wrap: nowrap; }
  .global-brand, .global-tail { flex: 0 0 auto; }
  /* Measured at 390px: the brand plus the language switcher, account link and
     enquiry link leave under 30px for the categories, which rendered as one
     clipped word. The strip now lives in the second row, so the copy in the
     global bar is hidden rather than squeezed. */
  .global-links { display: none; }
  .product-categories {
    display: flex; align-items: center; gap: 16px;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    white-space: nowrap; font-size: 13px; line-height: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
  .product-categories::-webkit-scrollbar { display: none; }
  .product-categories a { padding-block: 16px; }
  .product-categories a:hover, .product-categories a[aria-current] { color: var(--blue); }
  /* The home page's title is the same words as the first category, so it yields
     its width to the strip. */
  body[data-page="home"] .product-title { display: none; }
  /* Its two section links would overlap the strip: the brand already returns to
     the full list and the enquiry link already sits in the global bar. */
  body[data-page="home"] .product-links { display: none; }
  /* 390px cannot hold the brand, five category names, three language buttons and
     the account link. Showing only the active language and cycling on tap frees
     the space the categories need — and the categories were being squeezed to
     nothing before this. */
  .lang-option:not(.is-active) { display: none; }
  .lang-option { font-size: 11px; padding-inline: 10px; }
  .lang-option.is-active::after { content: "⌄"; margin-left: 5px; font-size: 9px; opacity: 0.7; }
  .lang-switch { gap: 0; }
  /* On touch screens every control needs a finger-sized target. The brand,
     account link and language buttons had no padding, so their hit area was
     only as tall as their text (16-23px); stretching them to the bar height
     gives a comfortable 44px without changing how the bar looks. */
  .global-brand,
  .list-link,
  .lang-option {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .global-brand { padding-inline: 2px; }
  .lang-switch { gap: 0; }
  .lang-option { padding-inline: 10px; }
  .global-links { gap: 14px; }
  .product-nav { height: 48px; }
  .product-inner { padding-inline: 16px; gap: 14px; }
  .product-title { font-size: 18px; line-height: 22px; }
  .product-links { gap: 14px; }
  .product-links a { padding-block: 16px; }
  .pill-button { font-size: 14px; line-height: 18px; padding: 6px 12px; }
  .hero-tile { padding: 48px 16px 0; }
  .hero-tile h1 { font-size: 40px; line-height: 44px; }
  .hero-tile .subhead { font-size: 21px; line-height: 25px; }
  .hero-tile .eyebrow { font-size: 19px; line-height: 23px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .rail-head { flex-wrap: wrap; gap: 8px; padding: 32px var(--rail-gutter) 16px; }
  .rail-head h2 { font-size: 28px; line-height: 32px; }
  .rail-head .text-link { margin-left: 0; font-size: 15px; width: 100%; }
  .rail-track { padding-inline: var(--rail-gutter); scroll-padding-inline: var(--rail-gutter); gap: 14px; }
  .rail-card { flex: 0 0 78vw; height: 430px; }
  .rail-card-media { flex-basis: 208px; }
  .rail-card-body { padding: 18px 20px 0; }
  .rail-card-title { font-size: 20px; line-height: 25px; }
  .rail-card-actions { padding: 0 20px 20px; }
  /* A swipe is the natural gesture on touch, so the arrows stay out of the way. */
  .rail-arrow { display: none; }
  .group-bar { flex-wrap: wrap; gap: 10px; padding: 32px 0 18px; }
  .group-bar h2 { font-size: 28px; line-height: 32px; }
  .group-bar .text-link { margin-left: 0; font-size: 15px; width: 100%; }
  .group-head { padding: 46px 16px 6px; }
  .group-head h1 { font-size: 40px; line-height: 44px; }
  .identification { padding: 44px 16px 0; }
  .identification h1 { font-size: 40px; line-height: 44px; }
  .identification .subhead { font-size: 21px; line-height: 25px; }
  .device-stage img { height: 320px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .section { padding-block: 30px 56px; }
  .section-head h2, .specs h2 { font-size: 32px; line-height: 36px; }
  .spec-group { grid-template-columns: minmax(0, 1fr); gap: 14px 0; padding-block: 24px; }
  .spec-label h3 { font-size: 19px; line-height: 25px; }
  .spec-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
  .spec-list dt, .spec-list dd { font-size: 15px; line-height: 22px; }
  .bag-row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
  .bag-thumb { width: 72px; height: 72px; }
  .bag-qty, .bag-price { grid-column: 2; }
  .bag-price { text-align: left; min-width: 0; margin-top: 8px; }
  .checkout-inner { display: block; }
  .totals { min-width: 0; margin-bottom: 20px; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; padding-block: 32px 22px; }
  .auth-wrap { padding: 40px 16px 56px; }
  .auth-card { padding: 26px; }
  .auth-title { font-size: 32px; line-height: 36px; }
  .admin-wrap { padding: 32px 0 56px; }
  .admin-head h1 { font-size: 32px; line-height: 36px; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-grid, .admin-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .admin-locales, .admin-column-head { grid-template-columns: minmax(0, 1fr); }
  .admin-row, .admin-link-row, .admin-media-field { grid-template-columns: minmax(0, 1fr); }
  .admin-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-thumb { width: 96px; height: 48px; }
  .footer-legal { display: block; }
  .footer-legal p + p { margin-top: 8px; }
}

@media (max-width: 380px) {
  .global-links { gap: 11px; }
  .product-links a:first-child { display: none; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-tile h1 { font-size: 34px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }