/*
 * The layout every template shares. Each template's src/theme.css follows this
 * file in /site.css and sets the brand tokens below, its fonts and its home page.
 */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #222222;
  --muted: #5f5f5f;
  --soft: #f3f3f3;
  --line: #dddddd;
  --accent: #222222;
  --accent-ink: #ffffff;
  --highlight: #ffe58a;
  --focus: #222222;
  --dark: #222222;
  --dark-ink: #f5f5f5;
  --dark-muted: #c8c8c8;
  --display: Georgia, serif;
  /* The system's Latin face first, so digits, dashes and Latin read as Latin;
     Chinese falls through to the system's Chinese face. */
  --heading:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --body:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 4px;
  --radius-large: 8px;
  --gutter: clamp(16px, 5vw, 64px);
  --width: 1240px;
  /* Shape and density: each template's design language sets these. Sharp or
     round, bare photos or boxed cards, square or portrait product photos. */
  --button-radius: var(--radius);
  --input-radius: var(--radius);
  --chip-radius: 999px;
  --badge-radius: var(--radius);
  --photo-radius: var(--radius-large);
  --photo-ratio: 1;
  --card-radius: var(--radius-large);
  --card-padding: 0;
  --card-background: transparent;
  --card-border: none;
  --card-shadow: none;
  --columns: 4;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 40px 24px;
  --grid-gap-phone: 32px 16px;
  --price-color: inherit;
  --price-weight: 400;
  --section-space: clamp(48px, 8vw, 96px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 var(--body);
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
summary,
label {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  display: block;
}
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(30px, 4vw, 46px);
}
h2 {
  font-size: clamp(23px, 2.4vw, 30px);
}
h3 {
  font-size: 18px;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
::selection {
  background: var(--highlight);
  color: var(--ink);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip:focus-visible {
  transform: none;
}

/* Header */
.announcement {
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 13px;
  text-align: center;
}
.header {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  /* --header-background colours the header edge to edge (an outset border
     image paints past the sides without widening the page). */
  border-image: linear-gradient(var(--header-background, transparent) 0 0) fill
    0 / 0 / 0 100vmax;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.wordmark > svg {
  width: 36px;
  height: 36px;
  color: var(--accent);
}
.wordmark-name {
  display: grid;
  line-height: 1.1;
}
.wordmark-name b {
  font-family: var(--display);
  font-weight: inherit;
  font-size: 22px;
}
.wordmark-name small {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.menu {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: transparent;
}
.menu svg {
  width: 18px;
  height: 18px;
}
.navigation {
  display: flex;
  gap: 4px 28px;
  margin: 0 auto;
}
.navigation a,
.header-tools a {
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.navigation a:hover,
.navigation a[aria-current='page'] {
  border-bottom-color: currentColor;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-tools a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-tools a:hover {
  color: var(--accent);
}
.header-tools svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
#bag-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Header layouts. The markup stays the same (wordmark, menu button, navigation,
   tools); a class on .header picks how they sit:
   .header--center  wordmark centred, links in a row below (boutiques, restaurants)
   .header--split   links left, wordmark centred, tools right (fashion)
   .header--bar     wordmark, a search box and tools, then a category bar (big shops)
   .header--overlay on a home page that opens with a .cover photo, the header
                    sits on the photo in its light ink
   On tablets and phones all of them put the menu button left, the wordmark in
   the middle and the bag right; .header--phone-center does that alone. */
.header--center,
.header--split,
.header--bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
}
.header--center {
  grid-template-areas: '. mark tools' 'nav nav nav';
  row-gap: 12px;
  padding-bottom: 14px;
}
.header--split {
  grid-template-areas: 'nav mark tools';
}
.header--bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'mark search tools' 'nav nav nav';
  row-gap: 16px;
  padding-bottom: 0;
}
:is(.header--center, .header--split, .header--bar) .wordmark {
  grid-area: mark;
  justify-self: center;
}
.header--bar .wordmark {
  justify-self: start;
}
:is(.header--center, .header--split, .header--bar) .navigation {
  grid-area: nav;
  margin: 0;
}
.header--center .navigation {
  justify-self: center;
}
.header--split .navigation {
  justify-self: start;
}
:is(.header--center, .header--split, .header--bar) .header-tools {
  grid-area: tools;
  justify-self: end;
}
.header--bar .navigation {
  justify-content: center;
  padding: 12px 0;
  /* The category bar runs edge to edge. */
  border-image: linear-gradient(var(--bar, var(--soft)) 0 0) fill 0 / 0 / 0
    100vmax;
}
.header-search {
  grid-area: search;
  display: flex;
  justify-self: center;
  width: min(100%, 520px);
}
.header-search input {
  min-height: 42px;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  border-right: 0;
}
.header-search button {
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  background: var(--accent);
  color: var(--accent-ink);
  white-space: nowrap;
}
:root:has(.cover) .header--overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  color: var(--cover-ink, #fff);
}
:root:has(.cover) .header--overlay .wordmark > svg,
:root:has(.cover) .header--overlay .header-tools a:hover {
  color: inherit;
}
:root:has(.cover) .header--overlay .wordmark-name small {
  color: inherit;
  opacity: 0.85;
}
:root:has(.cover) .header--overlay .menu {
  border-color: currentColor;
}
/* An opened menu needs the page behind it to stay readable. */
:root:has(.cover) .header--overlay:has(.navigation.open) {
  background: var(--paper);
  color: var(--ink);
}

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--button-radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.button:hover:not(:disabled) {
  background: var(--paper);
  color: var(--accent);
}
.button.outline {
  background: transparent;
  color: var(--accent);
}
.button.outline:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}
.text-link {
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}
.text-link:hover {
  color: var(--accent);
  border-bottom-width: 2px;
}

/* Sections */
main {
  display: block;
  min-height: 50vh;
}
.page-loading {
  max-width: var(--width);
  margin: 0 auto;
  padding: 80px var(--gutter);
  color: var(--muted);
}
.section {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.section-heading h2 {
  margin: 0;
}
.page-hero {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) 0;
}
.page-hero h1 {
  max-width: 18em;
  margin-bottom: 12px;
}
.page-hero p {
  max-width: 34em;
  color: var(--muted);
  margin-bottom: 0;
}
.page-hero + .section {
  padding-top: 40px;
}
/* Long-form pages keep the title on the same column as the text, at a size that fits it. */
.page-hero:has(+ .body-copy) {
  max-width: calc(720px + 2 * var(--gutter));
}
.page-hero:has(+ .body-copy) h1 {
  font-size: clamp(28px, 3.2vw, 38px);
}
.empty {
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-large);
  text-align: center;
  color: var(--muted);
}
.empty p {
  margin-bottom: 16px;
}
.note {
  font-size: 14px;
  color: var(--muted);
}
.error,
.form-error {
  color: #a3261b;
  font-weight: 500;
}
.form-error:empty {
  display: none;
}
.kicker {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--muted);
}

/* A photo across the first screen with the headline on it. The page's first
   section; with .header--overlay the header sits on it. --cover-height,
   --cover-align (start, center, end), --cover-scrim and --cover-ink tune it. */
.cover {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: var(--cover-align, end);
  min-height: var(--cover-height, min(88svh, 820px));
  padding: clamp(96px, 14vw, 140px) var(--gutter) clamp(32px, 6vw, 72px);
  overflow: hidden;
  color: var(--cover-ink, #fff);
}
.cover > img,
.cover > picture img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cover-focus, center);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(
    --cover-scrim,
    linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 60%)
  );
}
.cover-content {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
}
/* Sections that run edge to edge drop the page width and gutters. */
.bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Swipeable rows. [data-carousel] on a box holding a .carousel-track: banners
   (one slide at a time, dots, optional data-interval in ms to advance on their
   own, paused by hover, focus or the pause button) or data-carousel="row" for
   a row of cards with arrows. site.js adds the controls. */
.carousel {
  position: relative;
  min-width: 0;
}
.carousel-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-track > * {
  flex: 0 0 var(--slide-width, 100%);
  min-width: 0;
  scroll-snap-align: start;
}
.carousel-track.product-grid {
  display: flex;
  --slide-width: calc((100% - (var(--columns) - 1) * 24px) / var(--columns));
  column-gap: 24px;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.carousel-controls button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--ink);
}
.carousel-controls button:hover:not(:disabled) {
  border-color: var(--ink);
}
.carousel-controls svg {
  width: 18px;
  height: 18px;
}
.carousel-dots {
  display: flex;
}
.carousel-controls .carousel-dots button {
  min-width: 26px;
  height: 26px;
  border: 0;
  background: none;
}
.carousel-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  transition: width 0.2s;
}
.carousel-dots button[aria-current='true']::before {
  width: 22px;
  background: var(--ink);
}
/* .carousel--over puts the arrows on the slides' edges, dots and pause below. */
.carousel--over {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.carousel--over .carousel-track {
  grid-area: 1 / 1 / 2 / 4;
}
.carousel--over .carousel-controls {
  display: contents;
}
.carousel--over :is(.carousel-prev, .carousel-next) {
  grid-row: 1;
  align-self: center;
  z-index: 1;
  margin: 0 12px;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}
.carousel--over .carousel-prev {
  grid-column: 1;
}
.carousel--over .carousel-next {
  grid-column: 3;
}
.carousel--over :is(.carousel-dots, .carousel-pause) {
  grid-row: 2;
  grid-column: 2;
  justify-self: center;
  margin-top: 12px;
}
.carousel--over .carousel-pause {
  justify-self: end;
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}
.product-card {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
}
.product-photo {
  position: relative;
  aspect-ratio: var(--photo-ratio);
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--soft);
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
/* In grids without gaps the focused card's ring stays above its neighbours. */
.product-card:focus-visible {
  position: relative;
  z-index: 1;
}
.product-card:hover .product-photo img {
  transform: scale(1.03);
}
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 10px;
  border-radius: var(--badge-radius);
  background: var(--paper);
  font-size: 13px;
}
.product-card h2,
.product-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.product-card:hover h2,
.product-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.product-en {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  color: var(--muted);
}
.product-meta {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--muted);
}
.product-price {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--price-weight);
  color: var(--price-color);
}

/* Shop */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-nav a {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--chip-radius);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.filter-nav a:hover {
  border-color: var(--ink);
}
.filter-nav a[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.search {
  display: flex;
  min-width: min(100%, 320px);
}
.search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  background: var(--paper);
}
.search button {
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.search button:hover {
  background: var(--paper);
  color: var(--accent);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Product page */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 4px;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.product-detail .product-photo {
  margin: 0;
}
.product-info h1 {
  margin-bottom: 2px;
}
.product-info .product-en {
  font-size: 15px;
}
.product-info .product-price {
  margin: 16px 0;
  font-size: 26px;
}
.product-description {
  color: var(--muted);
}
#add-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 16px;
  margin: 28px 0 12px;
}
#add-product .button {
  grid-column: 1 / -1;
}
label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
input,
select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  /* At least 3:1 against the page, so the field's edge can be seen. */
  border: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  border-radius: var(--input-radius);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
}
input:hover,
select:hover {
  border-color: var(--muted);
}
input[aria-invalid='true'],
input:user-invalid {
  border-color: #a3261b;
}
.product-details {
  margin: 28px 0 20px;
  border-top: 1px solid var(--line);
}
.product-details > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.product-details dt {
  font-weight: 600;
}
.product-details dd {
  margin: 0;
  text-wrap: pretty;
  color: var(--muted);
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 600;
}
summary:hover {
  color: var(--accent);
}
details p {
  margin-bottom: 16px;
  color: var(--muted);
}

/* Cart and checkout */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.cart-line {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child {
  border-top: 1px solid var(--line);
}
.cart-line img,
.cart-photo {
  width: 112px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--soft);
}
.cart-name {
  min-width: 0;
}
.cart-line h2 {
  margin-bottom: 2px;
  font-size: 17px;
}
.cart-line p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}
.cart-line label {
  max-width: 120px;
}
.cart-price {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 12px;
}
.cart-price p {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
}
.cart-price button,
.account-actions button,
.shipping-form button,
#notice button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
}
.cart-price button:hover,
.account-actions button:hover,
.shipping-form button:hover {
  color: var(--accent);
  border-bottom-width: 2px;
}
.summary {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-large);
  background: var(--soft);
}
.summary h2 {
  margin: 0;
  font-size: 20px;
}
.summary .note {
  margin: 0;
}
.totals {
  margin: 0;
  display: grid;
  gap: 8px;
}
.totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.totals dt {
  color: var(--muted);
}
.totals dd {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
}
.totals .total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}
.totals .total dt {
  color: var(--ink);
  font-weight: 600;
}
.checkout-form,
.shipping-form,
.account-form {
  display: grid;
  gap: 14px;
}
.checkout-form p {
  margin: 0;
}
.shipping-form #store-delivery,
.shipping-form #home-delivery {
  display: grid;
  gap: 14px;
}
[hidden] {
  display: none !important;
}
#confirm-shipping {
  justify-self: start;
}
#shipping-status {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.demo-result {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper);
}
.demo-result p {
  margin: 4px 0 8px;
  color: var(--muted);
}

/* Account, orders and long-form pages */
.body-copy {
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 40px var(--gutter) clamp(56px, 8vw, 96px);
}
.body-copy > img,
.body-copy > .lx-picture > img {
  width: 100%;
  margin-bottom: 32px;
  border-radius: var(--radius-large);
}
.body-copy h2 {
  margin: 40px 0 12px;
}
.body-copy > h2:first-child,
.body-copy > img + h2,
.body-copy > .lx-picture + h2 {
  margin-top: 0;
}
.body-copy p {
  color: var(--muted);
}
.body-copy .lead {
  color: var(--ink);
  font-size: 18px;
}
.body-copy .button {
  margin-top: 16px;
}
.order-id {
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
}
.order-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.order-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.order-list a:hover .order-id {
  text-decoration: underline;
}
.order-list .amount {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
}
.account-form {
  max-width: 420px;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0;
}
.values-grid h3 {
  margin-bottom: 6px;
}
.values-grid p {
  margin: 0;
  font-size: 15px;
}
.faq {
  border-top: 1px solid var(--line);
  margin-bottom: 40px;
}
.steps {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent);
}
.steps h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.steps p {
  margin: 0;
}

/* An article's "文中提到的東西". */
.article-products {
  margin: 48px 0 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.article-products .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 16px;
}
/* Cards inside an article keep their own colours, not the article's muted text. */
.article-products .product-price {
  color: var(--price-color);
}
.article-products .product-card h3 {
  color: var(--ink);
}

/* Journal */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
.journal-card {
  display: grid;
  align-content: start;
  min-width: 0;
}
.journal-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 16px;
  border-radius: var(--photo-radius);
}
.journal-card h2,
.journal-card h3 {
  margin-bottom: 6px;
  font-size: 19px;
}
.journal-card:hover h2,
.journal-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.journal-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* Footer */
footer {
  --focus: var(--highlight);
  background: var(--dark);
  color: var(--dark-ink);
}
.footer-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter) 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}
footer .wordmark > svg {
  color: var(--highlight);
}
footer .wordmark-name small,
footer p {
  color: var(--dark-muted);
}
footer nav {
  display: grid;
  align-content: start;
  gap: 8px;
}
footer nav h2 {
  margin: 0 0 6px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-muted);
}
footer nav a {
  justify-self: start;
}
footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--dark-ink) 22%, transparent);
  font-size: 13px;
  color: var(--dark-muted);
}

/* The status line for add-to-bag, removals and other short confirmations. */
#notice {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: var(--radius-large);
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 15px;
  transform: translateX(-50%);
  --focus: var(--highlight);
}
#notice:empty {
  display: none;
}
#notice button {
  color: var(--highlight);
}

@media (max-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(var(--columns-tablet), minmax(0, 1fr));
  }
  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cart-layout,
  .product-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
/* Tablets and phones fold the navigation into the menu button: Chinese link
   names are long, and kept whole they do not fit beside the wordmark. */
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
    gap: 12px 16px;
    position: relative;
  }
  .menu {
    display: inline-flex;
    order: 2;
    margin-left: 0;
    padding: 6px 10px;
  }
  .header-tools {
    order: 1;
    margin-left: auto;
    gap: 14px;
  }
  .navigation {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .navigation.open {
    display: flex;
  }
  .navigation a {
    padding: 10px 0;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: 'menu mark tools' 'nav nav nav';
    align-items: center;
    row-gap: 0;
    padding-bottom: 14px;
  }
  .header--bar {
    grid-template-areas: 'menu mark tools' 'search search search' 'nav nav nav';
    row-gap: 12px;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .menu {
    grid-area: menu;
    justify-self: start;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .wordmark {
    grid-area: mark;
    justify-self: center;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .header-tools {
    grid-area: tools;
    justify-self: end;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .navigation {
    grid-area: nav;
    justify-self: stretch;
    margin-top: 12px;
  }
  .header--bar .navigation {
    justify-content: start;
    border-image: none;
  }
}
@media (max-width: 760px) {
  .section-heading {
    flex-direction: column;
    align-items: start;
  }
  .journal-grid,
  .values-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-grid,
  .article-products .product-grid {
    grid-template-columns: repeat(var(--columns-phone), minmax(0, 1fr));
    gap: var(--grid-gap-phone);
  }
  .cart-line {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }
  .cart-line img,
  .cart-photo {
    width: 80px;
  }
  .cart-price {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-list a {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .order-list a > span:nth-child(2) {
    grid-row: 2;
    color: var(--muted);
  }
}
.purchase-steps,
.purchase-help,
.help-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.purchase-steps {
  max-width: var(--max, 1280px);
  margin: 0 auto;
  padding: 12px var(--gutter, 24px);
}
.purchase-steps a,
.purchase-help a,
.help-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 4px;
}
.purchase-steps [aria-current],
.help-topics [aria-current] {
  font-weight: 700;
}
.purchase-help {
  margin-block: 20px;
}
.checkout-details {
  min-width: 0;
}
.checkout-details > h2 {
  margin-bottom: 12px;
}
.checkout-form > h2 {
  margin-block: 32px 12px;
}
.checkout-final-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  font-size: 18px;
}
.checkout-items {
  list-style: none;
  padding: 0;
}
.checkout-items li {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.checkout-items li span {
  color: var(--muted);
  font-size: 14px;
}
.checkout-layout .summary {
  align-self: start;
}
.cart-name h2 a {
  color: inherit;
  text-decoration: none;
}
.cart-name h2 a:hover {
  text-decoration: underline;
}
.cart-image-link {
  display: block;
  align-self: start;
}
.help-topic {
  margin-top: 36px;
  scroll-margin-top: 24px;
}
.help-links {
  padding-left: 24px;
}
.help-links a {
  display: inline-block;
  padding-block: 10px;
}
.guide-preview:not(form) {
  display: block;
}
.guide-preview .button {
  margin-top: 16px;
}
.guide-preview-section {
  border-top: 1px solid var(--line);
}
.guide-preview-section .button {
  margin-top: 16px;
}
.guide-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.guide-content {
  min-width: 0;
}
.guide-return {
  padding: 20px var(--gutter, 24px);
  max-width: var(--max, 1280px);
  margin: auto;
}
.order-list time,
.order-list small,
.order-list .order-id {
  display: block;
}
.order-detail address {
  font-style: normal;
  overflow-wrap: anywhere;
}
.order-detail .order-id {
  overflow-wrap: anywhere;
}
.delivery-steps {
  padding-left: 1.25em;
  line-height: 1.9;
}
.delivery-steps time {
  color: var(--muted);
  font-size: 0.9em;
}
@media (max-width: 760px) {
  .checkout-layout .summary {
    order: -1;
  }
  .checkout-final-total {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html,
  .carousel-track {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 420px) {
  .header {
    column-gap: 12px;
  }
  .header-tools {
    gap: 10px;
  }
  .wordmark > svg {
    width: 30px;
    height: 30px;
  }
  .wordmark-name b {
    font-size: 19px;
  }
  .menu {
    font-size: 14px;
    padding: 6px 8px;
  }
}
/* The narrowest phones keep the menu icon (the button keeps its name for
   screen readers) and give the wordmark whatever the menu and bag leave. */
@media (max-width: 360px) {
  .menu {
    gap: 0;
    font-size: 0;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* Product-dependent slots stay hidden until real backend data has resolved. */
[data-lx-product]:empty {
  display: none;
}
[hidden] {
  display: none !important;
}
.custom-logo {
  max-width: 160px;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}
.wordmark:has(.custom-logo) > svg {
  display: none;
}

/* CMS wrappers preserve the template's layout without inline styles. */
.lx-preview-field,
.lx-picture {
  display: contents;
}
.lx-preview-field.lx-preview-focus {
  display: inline;
}
.restaurant-booking {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid currentColor;
  scroll-margin-top: 120px;
}
.restaurant-menu {
  display: grid;
  gap: 20px;
  margin: 24px 0;
}
.restaurant-menu-item {
  padding: 20px;
  border: 1px solid var(--line, #ddd);
}
.restaurant-menu-item h3 {
  margin: 0 0 8px;
}
.restaurant-menu-item p {
  font-size: 14px;
}
.restaurant-menu-item label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
}
.restaurant-menu-item input {
  width: 76px;
  min-height: 44px;
}
.restaurant-menu-item.is-sold-out {
  opacity: 0.6;
}
.restaurant-sold-out {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 700;
}
.restaurant-ordering form > label,
.restaurant-ordering form > div > label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.restaurant-ordering select,
.restaurant-ordering input {
  font: inherit;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--line, #aaa);
  background: var(--paper, #fff);
  color: inherit;
  border-radius: 0;
}
.restaurant-receipt-items {
  list-style: none;
  padding: 0;
}
.restaurant-receipt-items li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #ddd);
}
.restaurant-total {
  font-size: 20px;
  font-weight: 700;
}
.restaurant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.restaurant-receipt-items li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.restaurant-receipt-items small {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}
.restaurant-receipt-items li > span {
  white-space: nowrap;
}

/*
 * FITS 合用: chargers and cables for people with a phone and a laptop, shown
 * the way accessory brands show them. Every product photo stands on one light
 * grey (#f1f3f6), and every surface that holds a product is that grey, so a
 * photo and its panel read as one: the stage, the cards, the spec columns.
 * Electric blue says what fits and what to press (pills, chips, the device
 * checker, the bag); orange says money saved. Graphite carries the header, the
 * new-arrivals band and the footer; pale blue the category tiles and banners.
 * Lexend 700 (SIL OFL 1.1, notice in media-fonts.json) sets the wordmark,
 * watts, specs and prices; Chinese stays in the visitor's own sans, bold.
 */
@font-face {
  font-family: 'Lexend';
  src: url('/fonts/lexend-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #111827;
  --muted: #4b5565;
  /* The grey every product photo is shot on. */
  --soft: #f1f3f6;
  --line: #dde2ea;
  --accent: #0057ff;
  --accent-ink: #ffffff;
  --highlight: #a8c4ff;
  --focus: #0057ff;
  --dark: #151a22;
  --dark-ink: #ffffff;
  --dark-muted: #b4bdcb;
  /* Pale blue for tiles and banners; orange only for money saved. */
  --tint: #e6eefd;
  --save: #ff6b1a;
  --graphite-card: #232a36;
  /* Lexend for Latin and numerals, then the shared system stack for Chinese. */
  --display:
    'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --heading:
    'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 12px;
  --radius-large: 24px;
  /* Pills for everything you press or pick; rounded grey boxes for products. */
  --button-radius: 999px;
  --input-radius: 12px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --photo-radius: 10px;
  --photo-ratio: 1;
  --card-radius: 14px;
  --card-padding: 12px;
  --card-background: var(--soft);
  --columns: 4;
  --columns-tablet: 3;
  --columns-phone: 2;
  --grid-gap: 20px 16px;
  --grid-gap-phone: 12px 10px;
  --price-color: var(--ink);
  --price-weight: 700;
  --section-space: clamp(48px, 7vw, 88px);
}
/* The header stays on screen, so anchors land below it. */
html {
  scroll-padding-top: 80px;
}
h1,
h2,
h3 {
  font-weight: 700;
}
/* Headings and wide short lines break at spaces and punctuation, so 充電頭 and 編織線
   stay whole; text in narrow columns keeps normal Chinese line breaking. */
h1,
h2,
h3,
.announcement,
.stage-line,
.fits-head p,
.tile-spec,
.product-meta,
.deal-name,
.promise b,
.versus-table tbody th {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.text-link {
  color: var(--accent);
  font-weight: 700;
}
.button {
  font-weight: 700;
}
.button.outline {
  border-width: 2px;
}

/* Header: compact graphite, edge to edge, kept at the top while you scroll. */
.announcement {
  padding: 7px var(--gutter);
  background: #0b0e13;
  color: #c3cad6;
  text-wrap: balance;
}
.header {
  --focus: #8fb3ff;
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--dark);
  color: #ffffff;
  box-shadow: 0 0 0 100vmax var(--dark);
  clip-path: inset(0 -100vmax);
}
.wordmark > svg {
  width: 32px;
  height: 32px;
}
.header .wordmark > svg {
  color: #6f9dff;
}
.wordmark-name b {
  font-size: 23px;
  letter-spacing: 0.05em;
}
.header .wordmark-name small {
  color: var(--dark-muted);
}
.navigation {
  gap: 4px 26px;
}
.navigation a {
  color: #e4e9f0;
  font-size: 15px;
  font-weight: 600;
}
.navigation a:hover {
  color: #ffffff;
}
/* The device checker carries the wordmark's USB-C port, so it can be found from every page. */
.navigation a[href='/#fits']::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 9px;
  margin-right: 7px;
  border: 2px solid #6f9dff;
  border-radius: 5px;
  vertical-align: 1px;
}
.header-tools a:hover {
  color: #a8c4ff;
}
.menu {
  border-color: rgb(255 255 255 / 0.4);
  color: #ffffff;
}

/* The stage: the 65 W charger large on the shared grey, the checker beside it. */
.stage {
  --watts: clamp(64px, 8.4vw, 116px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: start;
  gap: 24px clamp(24px, 3vw, 40px);
  margin: 16px max(var(--gutter), calc((100% - var(--width)) / 2)) 0;
  padding: clamp(10px, 3vw, 36px);
  border-radius: var(--radius-large);
  background: var(--soft);
}
/* Beside the checker, the photo grows to the checker's height, so the two columns end together. */
.stage-product {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stage-photo {
  position: relative;
  order: -1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
/* At least square, so the charger is big; the photo leaves its lower-left corner plain for the numeral. */
.stage-photo img {
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
}
/* What it fits, in the same blue pill as every product photo's badge. */
.stage-fits {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
/* The copy rises so the big 65 W sits on the photo's plain lower-left corner. */
.stage-copy {
  position: relative;
  z-index: 1;
  padding: 0 clamp(14px, 1.8vw, 22px);
}
.stage-copy h1 {
  margin: calc(-1 * var(--watts) - 18px) 0 12px;
  font-size: inherit;
  line-height: 1.2;
}
.stage-watts {
  display: block;
  font-family: var(--display);
  font-size: var(--watts);
  line-height: 1;
  letter-spacing: -0.035em;
}
.stage-name {
  display: block;
  margin-top: 32px;
  font-size: clamp(24px, 2.5vw, 32px);
}
.stage-line {
  max-width: 30em;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 17px;
}
.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.spec-chips li {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.spec-chips b {
  font-family: var(--display);
}
.stage-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.stage-price {
  margin: 0 10px 0 0;
  font-family: var(--display);
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
}
/* When an order placed now ships: a lit dot while today's dispatch is still open. */
.stage-ship {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.stage-ship::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.stage-ship:is([data-phase='after'], [data-phase='dayoff'])::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--muted);
}

/* 選你的裝置: a white card on the grey stage; the answers are pill chips. */
.fits {
  min-width: 0;
}
.fits-card {
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 20px;
  background: var(--paper);
}
.fits-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.3;
}
.fits-head p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
}
.fits-ask {
  display: grid;
  gap: 14px;
}
/* The question sits to the left of its chips (the floated legend becomes a grid item). */
.fits-question {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  column-gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fits-question legend {
  float: left;
  grid-column: 1;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 44px;
}
.fits-options {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fits-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 13px;
  border: 1.5px solid #c3cbd7;
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.fits-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.fits-option:hover {
  border-color: var(--accent);
}
.fits-option:has(:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
.fits-option:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* The plug's end, as the hint describes it: USB-C an open oval, Lightning a flat solid tab. */
.fits-plug {
  flex: none;
  width: 24px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.fits-plug.solid {
  fill: currentColor;
  stroke: none;
}
.fits-hint {
  grid-column: 2;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.fits-answer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fits-for {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.fits-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 22px;
}
.fits-pick {
  display: grid;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.fits-pick b {
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(48px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* The charger's face drawn to its port count: a USB-C slot per port, a cable to each device. */
.fits-ports {
  --face: 54px;
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
}
.fits-ports::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--face);
  border: 3px solid var(--ink);
  border-radius: 14px;
}
.fits-ports li {
  display: grid;
  grid-template-columns: var(--face) 22px minmax(0, 1fr);
  align-items: center;
}
/* A USB-C port seen head on, as in the wordmark: the oval opening and its tongue. */
.fits-ports li::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  width: 26px;
  height: 9px;
  border-radius: 5px;
  background:
    linear-gradient(#ffffff, #ffffff) center / 12px 2px no-repeat,
    var(--ink);
}
/* The cable leaves the port's right end, through the face, to the device. */
.fits-ports li::after {
  content: '';
  grid-row: 1;
  grid-column: 1 / 3;
  margin-left: calc(var(--face) / 2 + 13px);
  height: 3px;
  background: var(--ink);
}
.fits-dest {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  padding-left: 10px;
  line-height: 1.35;
}
.fits-dest b {
  font-size: 16px;
}
.fits-w {
  color: var(--accent);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}
.fits-dest small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
}
.fits-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.fits-answer h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}
.fits-buy,
.fits-skip {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each thing to buy: its packshot, its name (the link), its price, and why. */
.fits-buy li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    'photo name price'
    'photo why why';
  align-items: start;
  gap: 2px 12px;
  padding: 2px 0 10px;
}
.fits-buy li + li {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fits-buy img {
  grid-area: photo;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--soft);
  object-fit: cover;
}
.fits-buy a {
  grid-area: name;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.fits-buy a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}
.fits-price {
  grid-area: price;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}
.fits-buy p {
  grid-area: why;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
/* The total and its savings on the left, the one button that buys it all on the right. */
.fits-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fits-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-weight: 700;
}
.fits-total b {
  font-family: var(--display);
  font-size: 26px;
}
.fits-tag,
.deal-save {
  padding: 0 9px;
  border-radius: 999px;
  background: var(--save);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
  white-space: nowrap;
}
/* Not to buy: struck off the list, the reason under it. */
.fits-skip li {
  position: relative;
  padding: 7px 0 7px 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.fits-skip li + li {
  border-top: 1px solid var(--line);
}
.fits-skip li::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 1px;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(
      45deg,
      transparent calc(50% - 1.1px),
      var(--muted) 0 calc(50% + 1.1px),
      transparent 0
    ),
    linear-gradient(
      -45deg,
      transparent calc(50% - 1.1px),
      var(--muted) 0 calc(50% + 1.1px),
      transparent 0
    );
}
.fits-skip b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  text-decoration: line-through;
  text-decoration-color: rgb(17 24 39 / 0.45);
}

/* Category tiles: pale blue, the product on a grey disc. */
.tiles-section {
  padding-bottom: 0;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 18px;
  border-radius: 20px;
  background: var(--tint);
  transition: background-color 0.15s;
}
.tile:hover {
  background: #d9e5fc;
}
.tile-name {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.tile:hover .tile-name {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.tile-spec {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.tile img {
  align-self: flex-end;
  width: 70%;
  aspect-ratio: 1;
  margin-top: auto;
  border-radius: 50%;
  background: var(--soft);
  object-fit: cover;
  transition: transform 0.3s;
}
.tile:hover img {
  transform: scale(1.04);
}

/* New arrivals: a graphite band, a row of dark cards with the product on grey. */
.arrivals {
  --focus: #8fb3ff;
  --card-background: var(--graphite-card);
  --price-color: #ffffff;
  margin-top: var(--section-space);
  background: var(--dark);
  color: #ffffff;
}
.arrivals-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 24px;
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--gutter);
}
.arrivals-head h2 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 36px);
}
.arrivals-head p {
  margin: 0;
  color: var(--dark-muted);
}
/* The row's arrows sit beside the heading; the cards run underneath. */
.arrivals .carousel {
  display: contents;
}
.arrivals .carousel-track {
  --slide-width: calc((100% - 3 * 16px) / 3.4);
  grid-column: 1 / -1;
  grid-row: 2;
  column-gap: 16px;
}
.arrivals .carousel-controls {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.arrivals .carousel-controls button {
  min-width: 44px;
  height: 44px;
  border-color: rgb(255 255 255 / 0.4);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
}
.arrivals .carousel-controls button:hover:not(:disabled) {
  border-color: #ffffff;
}
.arrivals .carousel-controls button:disabled {
  opacity: 0.35;
}
.arrivals .product-card {
  padding: 14px;
  transition: background-color 0.15s;
}
.arrivals .product-card:hover {
  background: #2c3443;
}
.arrivals .product-en,
.arrivals .product-meta {
  color: var(--dark-muted);
}
.arrivals .product-price {
  font-size: 21px;
}

/* 30 W or 65 W: two grey spec columns, the row names on the left. */
.versus-head {
  max-width: 40em;
  margin-bottom: 28px;
}
.versus-head h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.6vw, 32px);
}
.versus-head p {
  margin: 0;
  color: var(--muted);
}
.versus-frame {
  margin: 0 -12px;
}
.versus-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 12px 0;
}
.versus-table thead td:first-child {
  width: 20%;
}
.versus-table thead th {
  padding: 14px 20px 10px;
  border-radius: 20px 20px 0 0;
  background: var(--soft);
  text-align: left;
  vertical-align: bottom;
}
/* Each column's head: the packshot beside its name and price. */
.versus-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 16px;
}
.versus-item img {
  grid-row: 1 / -1;
  width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
}
.versus-name {
  grid-row: 2;
  font-size: 18px;
  line-height: 1.4;
}
.versus-price {
  grid-row: 3;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 24px;
}
.versus-table tbody th,
.versus-table tbody td {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.versus-table tbody th {
  padding-left: 0;
  font-weight: 700;
}
.versus-table tbody td {
  background: var(--soft);
}
.versus-table td b {
  font-family: var(--display);
  font-size: 18px;
  white-space: nowrap;
}
/* A blue tick for yes, a grey cross for no; the words say the same. */
.versus-table :is(.yes, .no)::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -4px;
  background: center / contain no-repeat;
}
.versus-table .yes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230057ff'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.versus-table .no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%236b7585' stroke-width='2'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%236b7585' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.versus-table .no {
  color: var(--muted);
}
.versus-table tfoot td {
  padding: 8px 20px 20px;
}
.versus-table tfoot td + td {
  border-radius: 0 0 20px 20px;
  background: var(--soft);
}
.versus-table tfoot .button {
  width: 100%;
}

/* Bundles as tickets: what it is for, the set, and the price apart and together. */
.deals {
  padding-top: 0;
}
.deals .section-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}
.deal-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: var(--tint);
  transition: background-color 0.15s;
}
.deal:hover {
  background: #d9e5fc;
}
.deal-for {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.deal-name {
  margin: 10px 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.deal:hover .deal-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The tear line, notched at both edges. */
.deal-price {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px dashed rgb(0 87 255 / 0.3);
}
.deal-price::before,
.deal-price::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
}
.deal-price::before {
  left: -30px;
}
.deal-price::after {
  right: -30px;
}
.deal-apart {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
}
.deal-price b {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.3;
}

/* 櫃台筆記: a blue band with the three notes rising out of it. */
.notes {
  padding-bottom: var(--section-space);
}
.notes-band {
  --focus: #ffffff;
  padding: clamp(44px, 6vw, 72px) var(--gutter) 150px;
  background: var(--accent);
  color: #ffffff;
  text-align: center;
}
.notes-band h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 36px);
}
.notes-band p {
  max-width: 32em;
  margin: 0 auto 22px;
  color: #eef3ff;
}
.notes-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 26px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  font-weight: 700;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.notes-all:hover {
  background: #ffffff;
  color: var(--accent);
}
.notes-grid {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: -110px auto 0;
  padding: 0 var(--gutter);
}

/* Journal cards here and on the journal page: white, outlined, photo on top. */
.journal-card {
  overflow: hidden;
  padding-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color 0.15s;
}
.journal-card:hover {
  border-color: var(--accent);
}
.journal-card img {
  margin-bottom: 16px;
  border-radius: 0;
  background: var(--soft);
}
.journal-card > :not(img) {
  padding-left: 20px;
  padding-right: 20px;
}
.journal-card .kicker,
.body-copy .kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.journal-card h2,
.journal-card h3 {
  font-size: 18px;
}

/* The service strip above the footer, on every page. */
.promise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  margin: 0;
  padding: 28px max(var(--gutter), calc((100% - var(--width)) / 2));
  list-style: none;
  background: var(--soft);
  color: var(--ink);
}
.promise li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
}
.promise svg {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--paper);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.promise b {
  align-self: end;
  font-size: 15px;
  line-height: 1.4;
}
.promise span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Product cards: grey boxes the photo melts into; the blue pill says what it fits. */
.product-photo {
  margin-bottom: 12px;
}
.product-badge {
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.product-card h2,
.product-card h3 {
  padding: 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.product-en {
  padding: 0 4px;
  font-family: var(--body);
  font-size: 12px;
}
.product-meta {
  margin: 4px 0 10px;
  padding: 0 4px;
}
.product-card .product-price {
  padding: 0 4px 4px;
  font-size: 19px;
}

/* Page titles: the shop opens on a pale blue banner, the journal on electric blue,
   the bag on a plain title; long-form pages keep the shared plain title. */
.page-hero h1 {
  font-weight: 700;
}
.page-hero:not(:has(+ .body-copy, + [id='cart-body'])) {
  max-width: none;
  margin: 16px max(var(--gutter), calc((100% - var(--width)) / 2)) 0;
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 4vw, 48px);
  border-radius: var(--radius-large);
  background: var(--tint);
}
.page-hero:not(:has(+ .body-copy, + [id='cart-body'])) h1 {
  font-size: clamp(26px, 3.2vw, 38px);
}
/* The journal opens on the same electric blue as the home page notes band. */
.page-hero:has(+ .section > .journal-grid) {
  --focus: #ffffff;
  background: var(--accent);
  color: #ffffff;
}
.page-hero:has(+ .section > .journal-grid) p {
  color: #eef3ff;
}
/* The bag: a plain title with the free-shipping line beside it. */
.page-hero:has(+ [id='cart-body']) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: clamp(28px, 4vw, 48px);
}
.page-hero:has(+ [id='cart-body']) h1 {
  margin: 0;
}
.page-hero .free-shipping {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--save);
  color: var(--ink);
  font-weight: 700;
}

/* Shop: pill chips for the categories, a pill search. */
.shop-toolbar {
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 6px 18px;
  border: 1.5px solid #c3cbd7;
  background: var(--paper);
  font-weight: 600;
  white-space: nowrap;
}
.filter-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-nav a[aria-current='page'] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
.search input {
  border-radius: 999px 0 0 999px;
  padding-left: 18px;
}
.search button {
  border-radius: 0 999px 999px 0;
  padding: 8px 20px;
  font-weight: 700;
}

/* Product page: the photo on its grey panel, the details as a spec table. */
main > .shop-section:first-child {
  padding-top: 28px;
}
.product-detail .product-photo {
  border-radius: var(--radius-large);
}
.product-info h1 {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.3;
}
.product-info .product-en {
  padding: 0;
  font-size: 14px;
}
.product-info .product-price {
  margin: 14px 0 12px;
  font-size: clamp(30px, 3vw, 38px);
}
#add-product .button {
  min-height: 52px;
  font-size: 17px;
}
.product-guide {
  margin: 0 0 12px;
}
.product-guide .text-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--tint);
  color: var(--ink);
}
/* The same USB-C end as the wordmark. */
.product-guide .text-link::before {
  content: '';
  flex: none;
  width: 26px;
  height: 12px;
  border: 2.5px solid var(--accent);
  border-radius: 6px;
}
.product-guide .text-link:hover {
  background: #d9e5fc;
  color: var(--accent);
}
.product-details {
  overflow: hidden;
  margin: 28px 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.product-details > div {
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.product-details > div:last-child {
  border-bottom: 0;
}
.product-details dt {
  padding: 12px 14px;
  background: var(--soft);
  font-size: 14px;
  font-weight: 700;
}
.product-details dd {
  padding: 12px 16px;
  color: var(--ink);
  font-size: 15px;
}

/* Cart: grey photos, a grey summary panel, totals in Lexend. */
.cart-line img,
.cart-photo {
  border-radius: 12px;
}
.cart-line h2 {
  font-weight: 700;
}
.cart-price p,
.totals dd,
.order-list .amount {
  font-weight: 700;
}
.cart-price p {
  font-size: 17px;
}
.summary,
.empty {
  border-radius: 20px;
}
.totals .total dd {
  font-size: 22px;
}

/* About: the desk photo rounded like the panels, the three promises as pale blue cards. */
.body-copy > img,
.body-copy > .lx-picture > img {
  border-radius: var(--radius-large);
  background: var(--soft);
}
.values-grid > div {
  padding: 20px;
  border-radius: 20px;
  background: var(--tint);
}
.values-grid h3 {
  font-size: 17px;
}
.steps li::before {
  font-weight: 700;
}

#notice {
  border-radius: 14px;
}
.body-copy .button + .text-link {
  margin-left: 18px;
}
footer .wordmark > svg {
  color: #6f9dff;
}

/* Beside a long spec table, the photo stays in view. */
@media (min-width: 961px) {
  .product-detail > .product-photo {
    position: sticky;
    top: 92px;
  }
}
@media (max-width: 1100px) {
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  }
  .stage-buy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stage-price {
    grid-column: 1 / -1;
    margin: 0 0 4px;
  }
  /* The narrower card keeps each answer row on one line. */
  .fits-question {
    grid-template-columns: 4.2em minmax(0, 1fr);
  }
  .fits-option {
    padding: 6px 11px;
  }
  .fits-plug {
    width: 20px;
    height: 10px;
  }
  .deal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One column: the photo goes wide again so it does not fill the whole screen. */
  .stage-photo img {
    aspect-ratio: 4 / 3;
  }
  .stage-buy {
    display: flex;
  }
  .stage-price {
    margin: 0 10px 0 0;
  }
  /* Three notes stay in a row while they fit. */
  .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
  }
  .tiles,
  .promise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .arrivals .carousel-track {
    --slide-width: calc((100% - 2 * 14px) / 2.4);
    column-gap: 14px;
  }
}
@media (max-width: 900px) {
  .navigation {
    border-top-color: rgb(255 255 255 / 0.16);
  }
  html {
    scroll-padding-top: 70px;
  }
}
@media (max-width: 760px) {
  /* The notes become a compact list, the photo on the left. */
  .notes-band {
    padding-bottom: 96px;
  }
  .notes-grid {
    gap: 12px;
    margin-top: -64px;
  }
  .notes-grid .journal-card {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    padding: 12px;
  }
  .notes-grid .journal-card img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 96px;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 10px;
  }
  .notes-grid .journal-card > :not(img) {
    grid-column: 2;
    padding: 0;
  }
  .notes-grid .journal-card h3 {
    margin-bottom: 4px;
    font-size: 16px;
  }
  .notes-grid .journal-card p:last-child {
    font-size: 13px;
  }
  .journal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
}
@media (max-width: 600px) {
  .stage-photo img {
    aspect-ratio: 1;
  }
  .stage-line {
    font-size: 16px;
  }
  /* The price on its own line, the two buttons side by side under it. */
  .stage-buy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stage-price {
    grid-column: 1 / -1;
    margin: 0 0 4px;
  }
  .stage-buy .button {
    padding-left: 12px;
    padding-right: 12px;
  }
  .fits-card {
    padding: 16px;
  }
  .fits-question {
    grid-template-columns: minmax(0, 1fr);
  }
  .fits-question legend {
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .fits-options,
  .fits-hint {
    grid-column: 1;
  }
  .fits-option {
    gap: 6px;
    padding: 6px 11px;
    font-size: 14px;
  }
  .fits-plug {
    width: 20px;
    height: 10px;
  }
  .fits-result {
    grid-template-columns: minmax(0, 1fr);
  }
  .fits-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
  }
  .fits-buy li {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      'photo name'
      'photo price'
      'why why';
  }
  .fits-buy img {
    width: 48px;
    height: 48px;
  }
  .fits-price {
    justify-self: start;
  }
  .fits-sum {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The categories as one row of chips you swipe, edge to edge. */
  .filter-nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .filter-nav::-webkit-scrollbar {
    display: none;
  }
  .search {
    flex: 1 1 100%;
  }
  .tiles-section .section-heading {
    flex-direction: row;
    align-items: end;
  }
  .tile {
    padding: 16px 16px 14px;
  }
  .tile-name {
    font-size: 18px;
  }
  .tile-spec {
    font-size: 13px;
  }
  .tile img {
    width: 76%;
  }
  .arrivals .carousel-track {
    --slide-width: calc((100% - 12px) / 1.45);
    column-gap: 12px;
  }
  .versus-frame {
    margin: 0 -5px;
  }
  .versus-table {
    border-spacing: 5px 0;
  }
  .versus-table thead td:first-child {
    width: 26%;
  }
  .versus-table thead th {
    padding: 12px 10px 8px;
    border-radius: 14px 14px 0 0;
  }
  .versus-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .versus-item img {
    grid-row: auto;
    width: min(100%, 96px);
    margin-bottom: 6px;
  }
  .versus-name,
  .versus-price {
    grid-row: auto;
  }
  .versus-name {
    font-size: 15px;
  }
  .versus-price {
    font-size: 19px;
  }
  .versus-table tbody th,
  .versus-table tbody td {
    padding: 10px;
    font-size: 13px;
  }
  .versus-table tbody th {
    padding-left: 0;
  }
  .versus-table td b {
    font-size: 15px;
  }
  .versus-table :is(.yes, .no)::before {
    display: block;
    margin: 0 0 4px;
  }
  .versus-table tfoot td {
    padding: 6px 8px 12px;
  }
  .versus-table tfoot td + td {
    border-radius: 0 0 14px 14px;
  }
  .versus-table tfoot .button {
    padding: 8px 10px;
    font-size: 14px;
  }
  .deal-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  /* Tickets turn sideways: the set on the left, the price stub on the right. */
  .deal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    padding: 14px 0 14px 16px;
  }
  .deal-for {
    grid-column: 1;
    justify-self: start;
  }
  .deal-name {
    grid-column: 1;
    margin: 8px 14px 0 0;
    font-size: 15px;
  }
  .deal-price {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    margin: -14px 0;
    padding: 14px 16px 14px 14px;
    border-top: 0;
    border-left: 2px dashed rgb(0 87 255 / 0.3);
  }
  .deal-price::before,
  .deal-price::after {
    left: -11px;
    right: auto;
  }
  .deal-price::before {
    top: -10px;
  }
  .deal-price::after {
    top: auto;
    bottom: -10px;
  }
  .deal-apart {
    flex-basis: auto;
  }
  .deal-price b {
    font-size: 22px;
  }
  .promise {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .product-details > div {
    grid-template-columns: 5.5em minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    scroll-behavior: auto;
  }
}