/*
 * 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;
}

/*
 * NIGHT DROP: streetwear sold in drops of 200 pieces a style, laid out like a
 * drop site. Black chrome; a full-bleed campaign photo with a giant countdown
 * to Friday 21:00; a crawl of the sizes left; square tiles that butt together
 * on 1px lines over tile grey; a stark size table. Nothing is rounded. The
 * only colour is signal orange, and it means one thing: five or fewer left in
 * a size (or a drop that is live). Sofia Sans Extra Condensed Black (SIL OFL
 * 1.1, notice in media-fonts.json) sets the wordmark, the countdown, drop
 * numbers, sizes, counts, prices and English names; Chinese stays in the
 * visitor's own sans-serif.
 */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  src: url('/fonts/sofia-sans-extra-condensed-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #0b0b0b;
  --muted: #565656;
  --soft: #ececec;
  --line: #d2d2d2;
  --accent: #0b0b0b;
  --accent-ink: #ffffff;
  --highlight: #ff6a13;
  --focus: #0b0b0b;
  --dark: #0b0b0b;
  --dark-ink: #f4f4f4;
  --dark-muted: #a9a9a9;
  --dark-line: #2f2f2f;
  --signal: #ff6a13;
  /* The 1px lines tiles butt against. */
  --rule: #0b0b0b;
  /* Sofia, then the shared order: the system's Latin face, then its Chinese. */
  --display:
    'Sofia Sans Extra Condensed', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
    sans-serif;
  --radius: 0;
  --radius-large: 0;
  --button-radius: 0;
  --input-radius: 0;
  --chip-radius: 0;
  --badge-radius: 0;
  --photo-radius: 0;
  --photo-ratio: 1;
  --card-radius: 0;
  --card-padding: 0;
  --card-background: var(--soft);
  --card-border: none;
  --card-shadow: none;
  --columns: 4;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 0;
  --grid-gap-phone: 0;
  --price-color: var(--ink);
  --price-weight: 900;
  --section-space: clamp(56px, 8vw, 104px);
}
h1,
h2 {
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* Chinese headings break at punctuation and spaces, not inside a word. */
h1,
h2,
h3 {
  word-break: keep-all;
}
h3 {
  font-weight: 700;
}

/* Black chrome: the announcement and the header run edge to edge. */
.announcement {
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.header {
  --focus: var(--dark-ink);
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--width)) / 2));
  background: var(--dark);
  color: var(--dark-ink);
}
.wordmark > svg {
  width: 32px;
  height: 32px;
  color: inherit;
}
.wordmark-name b {
  font-weight: 900;
  font-size: 30px;
  line-height: 0.92;
  letter-spacing: 0.015em;
}
.wordmark-name small {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.32em;
}
.header .wordmark-name small {
  color: var(--dark-muted);
}
.navigation a {
  border-bottom-width: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.header .header-tools a:hover {
  color: inherit;
  opacity: 0.75;
}
.header .menu {
  border-color: currentColor;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.header .navigation {
  border-top-color: var(--dark-line);
}
#bag-count {
  border-radius: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 900;
}
.header #bag-count {
  background: var(--dark-ink);
  color: var(--ink);
}

/* Buttons: square, black, tracked; Latin in capitals. */
.button {
  min-height: 50px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.text-link {
  border-bottom-width: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.text-link:hover {
  color: var(--muted);
}

/* A drop number or English word set big above a Chinese heading. */
.nd-no {
  display: block;
  margin-bottom: 0.18em;
  font-family: var(--display);
  font-size: clamp(56px, 7.6vw, 108px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* The cover: the campaign photo, the drop on sale at the top, the countdown
   to the next one along the bottom. */
.nd-cover {
  --focus: var(--dark-ink);
  /* The first screen holds the header, the cover and the crawl under it. */
  --cover-height: clamp(540px, calc(100svh - 148px), 860px);
  --cover-align: stretch;
  --cover-focus: 50% 42%;
  /* Dark wherever there are words, at the top and along the bottom, so they
     read on any photo; the garments show in the band between. */
  --cover-scrim:
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.92),
      rgb(0 0 0 / 0.82) 34%,
      rgb(0 0 0 / 0) 62%
    ),
    linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.82),
      rgb(0 0 0 / 0.66) 30%,
      rgb(0 0 0 / 0) 52%
    );
  padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(26px, 3.4vw, 44px);
  background: var(--dark);
}
.nd-cover .cover-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.nd-cover h1 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
}
.nd-cover-no {
  margin-right: 0.08em;
  font-family: var(--display);
  font-size: 1.45em;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.nd-cover-lede {
  max-width: 30em;
  margin: 14px 0 0;
  color: #dadada;
  font-size: 17px;
  line-height: 1.6;
}
.nd-cover-lede b {
  color: #fff;
  font-family: var(--display);
  font-size: 1.3em;
  font-weight: 900;
}
.nd-cover-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 28px 40px;
}
.nd-clock-label {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.nd-clock-label time {
  font-family: var(--display);
  font-size: 1.3em;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.nd-clock {
  flex: 1 1 560px;
  min-width: 0;
  container-type: inline-size;
}
/* As big as the clock's width allows: each two-digit group is about 0.86em
   wide with 0.16em between, and home.js sets --units to the number of groups
   (days to seconds is four), so the longest count still holds one line. */
.nd-clock-count {
  --units: 2;
  display: flex;
  gap: 0.16em;
  margin: 0;
  font-family: var(--display);
  font-size: min(calc(100cqi / (1.06 * var(--units) - 0.12)), 240px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.76;
  white-space: nowrap;
}
.nd-unit {
  display: grid;
  justify-items: start;
}
.nd-unit small {
  margin-top: 12px;
  color: #cfcfcf;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3em;
}
/* Release night: the count gives way to 發售中 in the signal colour. */
.nd-clock.is-open .nd-clock-count {
  color: var(--signal);
  font-family: var(--heading);
  font-size: min(30cqi, 168px);
  font-weight: 800;
  line-height: 1;
}
.nd-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.nd-cover .button {
  border-color: var(--dark-ink);
  background: var(--dark-ink);
  color: var(--ink);
}
.nd-cover .button:hover:not(:disabled) {
  background: transparent;
  color: var(--dark-ink);
}
.nd-cover .button.outline {
  background: transparent;
  color: var(--dark-ink);
}
.nd-cover .button.outline:hover:not(:disabled) {
  background: var(--dark-ink);
  color: var(--ink);
}

/* The crawl of sizes left, edge to edge under the cover. */
.nd-ticker {
  --focus: var(--dark-ink);
  display: flex;
  border-top: 1px solid var(--dark-line);
  background: var(--dark);
  color: var(--dark-ink);
  overflow: hidden;
}
.nd-ticker-body {
  display: flex;
  flex: 1;
  min-width: 0;
}
.nd-ticker-title {
  flex: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 16px;
  background: var(--dark-ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.nd-ticker-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.nd-ticker-track {
  display: flex;
  width: max-content;
}
.nd-ticker.is-running .nd-ticker-track {
  animation: nd-crawl var(--ticker-time, 40s) linear infinite;
}
.nd-ticker.is-paused .nd-ticker-track,
.nd-ticker-window:hover .nd-ticker-track {
  animation-play-state: paused;
}
@keyframes nd-crawl {
  to {
    transform: translateX(-50%);
  }
}
.nd-ticker-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nd-ticker-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0 10px 24px;
  white-space: nowrap;
}
/* A square between products. */
.nd-ticker-list li::after {
  content: '';
  align-self: center;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  background: var(--dark-muted);
}
.nd-ticker-list b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.nd-ticker-list span {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
}
.nd-ticker-list em {
  margin-left: 2px;
  font-style: normal;
}
.nd-ticker-list small {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.nd-ticker-list .is-low em {
  color: var(--signal);
}
.nd-ticker-list .is-out {
  color: var(--dark-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.nd-ticker-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--dark-line);
  background: var(--dark);
  color: var(--dark-ink);
}
.nd-ticker-pause svg {
  width: 16px;
  height: 16px;
}
.nd-ticker-pause:hover {
  background: #222;
}
.nd-ticker-pause:focus-visible {
  outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .nd-ticker .nd-ticker-track {
    animation: none;
  }
}

/* Product tiles: square, on tile grey, butting together on 1px lines. */
.product-grid {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.product-card {
  position: relative;
  padding-bottom: 20px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.product-card:focus-visible,
.journal-card:focus-visible,
.nd-drops a:focus-visible {
  z-index: 2;
  outline-width: 3px;
  outline-offset: 0;
}
.product-card > :not(.product-photo) {
  margin-inline: 16px;
}
.product-photo {
  margin-bottom: 16px;
}
.product-badge {
  top: 0;
  left: 0;
  z-index: 1;
  padding: 4px 10px 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* The English name leads, in capitals; the Chinese name follows. */
.product-card .product-en {
  order: 1;
  color: var(--ink);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.product-card h2,
.product-card h3 {
  order: 2;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.product-card .product-meta {
  order: 3;
  margin-top: 2px;
  margin-bottom: 12px;
  font-size: 13px;
}
.product-card .product-price {
  order: 4;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
}
/* Past drops, said plainly: the photo greys out under the 已售完 label. */
.product-card[data-category='archive'] .product-photo img {
  filter: grayscale(1);
  opacity: 0.5;
}
.product-card[data-category='archive'] :is(.product-en, .product-price) {
  color: var(--muted);
}

/* Section headings on the home page. */
.nd-drop .section-heading,
.nd-stock .section-heading {
  margin-bottom: 28px;
}
.nd-drop .section-heading h2 {
  font-size: clamp(22px, 2.4vw, 30px);
}

/* The size table: products down, sizes across, one cell per size. */
.nd-stock {
  padding-top: 0;
}
.nd-stock-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}
.nd-stock-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.nd-stock-total b {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 104px);
  font-weight: 900;
  line-height: 0.8;
}
.nd-stock-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.nd-stock-table thead td {
  width: 24%;
}
.nd-stock-table thead th {
  padding: 12px 16px 10px;
  border-left: 1px solid var(--ink);
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1;
  text-align: left;
}
.nd-stock-table tbody :is(th, td) {
  border-top: 1px solid var(--ink);
}
.nd-stock-table tbody th {
  padding: 14px 12px 14px 0;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nd-stock-table tbody th a {
  display: block;
  font-size: 17px;
}
.nd-stock-table tbody th a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nd-stock-price {
  display: block;
  color: var(--muted);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.nd-stock-table tbody td {
  padding: 0;
  border-left: 1px solid var(--ink);
  vertical-align: top;
}
.nd-stock-table td > a,
.nd-cell {
  display: block;
  padding: 14px 16px 16px;
}
.nd-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
}
.nd-left small {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
}
.nd-left b {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: 900;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.nd-made {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
/* The share of the size still unsold, drawn by home.js. */
.nd-bar {
  display: block;
  height: 5px;
  margin-top: 10px;
  background: var(--soft);
}
.nd-bar::before {
  content: '';
  display: block;
  width: calc(var(--left, 0) * 100%);
  height: 100%;
  background: var(--ink);
}
.nd-stock-table td.is-low,
.nd-key-low::before {
  background: var(--signal);
}
.nd-stock-table td.is-low .nd-made {
  color: var(--ink);
}
.nd-stock-table td.is-low .nd-bar {
  background: color-mix(in srgb, var(--ink) 20%, var(--signal));
}
/* Sold out: crossed out, corner to corner. */
.nd-stock-table td.is-out,
.nd-key-out::before {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.75px),
    var(--ink) calc(50% - 0.75px) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
}
.nd-stock-table td.is-out :is(.nd-left b, .nd-made) {
  width: fit-content;
  padding-right: 4px;
  background: var(--paper);
}
.nd-stock-table td.is-out b {
  color: var(--muted);
  font-family: var(--body);
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}
.nd-stock-table td > a:hover {
  background: var(--ink);
  color: var(--paper);
}
.nd-stock-table td > a:hover .nd-made {
  color: var(--dark-muted);
}
.nd-stock-table td > a:hover .nd-bar {
  background: #3a3a3a;
}
.nd-stock-table td > a:hover .nd-bar::before {
  background: var(--paper);
}
.nd-stock-table td > a:focus-visible {
  outline-width: 3px;
  outline-offset: -3px;
}
.nd-stock-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.nd-stock-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nd-stock-key span::before {
  content: '';
  width: 16px;
  height: 16px;
}
.nd-key-out::before {
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Past drops: the empty rail edge to edge, then one tile per drop. */
.nd-rail {
  --focus: var(--dark-ink);
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 44vw, 600px);
  padding: var(--section-space) max(var(--gutter), calc((100% - var(--width)) / 2))
    clamp(32px, 4vw, 56px);
  overflow: hidden;
  background: var(--dark);
  color: var(--dark-ink);
}
.nd-rail > img,
.nd-rail > .lx-picture > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.nd-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.9),
    rgb(0 0 0 / 0.55) 45%,
    rgb(0 0 0 / 0.1) 80%
  );
}
.nd-rail-copy {
  max-width: 34em;
}
.nd-rail h2 {
  margin-bottom: 14px;
  color: #fff;
}
.nd-rail p {
  margin-bottom: 24px;
  color: #d4d4d4;
}
.nd-rail .button.outline {
  border-color: var(--dark-ink);
  color: var(--dark-ink);
}
.nd-rail .button.outline:hover:not(:disabled) {
  background: var(--dark-ink);
  color: var(--ink);
}
.nd-drops-section {
  padding-top: 0;
}
.nd-drops {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
  list-style: none;
}
.nd-drops > li {
  display: grid;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nd-drops > li > a {
  position: relative;
}
.nd-drops > li > a,
.nd-drops > li:not(:has(a)) {
  display: grid;
  align-content: start;
  padding: 18px 16px 20px;
}
.nd-drops-no {
  display: grid;
  margin-bottom: 14px;
  color: transparent;
  font-family: var(--display);
  font-size: clamp(72px, 8.6vw, 124px);
  font-weight: 900;
  line-height: 0.78;
  -webkit-text-stroke: 1.5px var(--ink);
}
.nd-drops b {
  font-size: 15px;
  line-height: 1.4;
}
.nd-drops b + span {
  color: var(--muted);
  font-size: 13px;
}
/* The two with a product page left: filled numbers, and they invert on hover. */
.nd-drops a .nd-drops-no {
  color: var(--ink);
  -webkit-text-stroke: 0;
}
.nd-drops a b + span {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nd-drops a:hover {
  background: var(--ink);
  color: var(--paper);
}
.nd-drops a:hover :is(.nd-drops-no, b + span) {
  color: var(--paper);
}

/* Release night: three times in the order they happen, on black. */
.nd-night {
  --focus: var(--dark-ink);
  background: var(--dark);
  color: var(--dark-ink);
}
.nd-night-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.nd-night h2 {
  margin-bottom: 36px;
}
.nd-night-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dark-ink);
  list-style: none;
}
.nd-night-steps li {
  padding: 22px 28px 0 0;
}
.nd-night-steps li + li {
  padding-left: 28px;
  border-left: 1px solid var(--dark-line);
}
.nd-night-time {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(64px, 8.4vw, 124px);
  font-weight: 900;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
}
.nd-night-time small {
  display: block;
  margin-bottom: 8px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
.nd-night-steps h3 {
  margin-bottom: 6px;
}
.nd-night-steps p:last-child {
  margin: 0;
  color: var(--dark-muted);
}

/* Journal cards: tiles on lines, like the products. */
.journal-grid {
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.journal-card {
  position: relative;
  padding-bottom: 22px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.journal-card > :not(img) {
  padding-inline: 18px;
}
.journal-card img {
  background: var(--soft);
}
.journal-card .kicker {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.journal-card:hover {
  background: var(--soft);
}

/* Shared pages: the title on a black band under the header. */
.page-hero {
  --focus: var(--dark-ink);
  max-width: none;
  padding: clamp(36px, 6vw, 72px)
    max(var(--gutter), calc((100% - var(--width)) / 2)) clamp(32px, 4.6vw, 56px);
  background: var(--dark);
  color: var(--dark-ink);
}
.page-hero:has(+ .body-copy) {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 720px) / 2));
}
.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.15;
}
.page-hero p {
  color: var(--dark-muted);
}
.page-hero .free-shipping {
  color: var(--dark-ink);
  font-weight: 700;
}
.page-hero + .section {
  padding-top: 32px;
}

/* Shop: square filters, black when chosen. */
.shop-toolbar {
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav {
  gap: 0;
}
.filter-nav a {
  margin: 0 -1px -1px 0;
  padding: 9px 18px;
  border-color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.filter-nav a:hover {
  border-color: var(--ink);
  background: var(--soft);
}
.search input {
  border-color: var(--ink);
}
.search button {
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Product page. */
main > .shop-section:first-child {
  padding-top: clamp(24px, 3.4vw, 44px);
}
.breadcrumb ol {
  font-size: 13px;
  letter-spacing: 0.06em;
}
.product-detail .product-photo {
  border: 1px solid var(--rule);
}
.product-info h1 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.3;
}
.product-info .product-en {
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.product-info .product-price {
  font-size: 36px;
  line-height: 1;
}
#add-product .button {
  min-height: 56px;
  font-size: 15px;
}
.product-details {
  border-top: 3px solid var(--ink);
}
.product-details > div {
  border-bottom-color: var(--line);
}

/* Cart. */
.cart-line:first-child {
  border-top: 3px solid var(--ink);
}
.cart-line img,
.cart-photo {
  border: 1px solid var(--rule);
}
.cart-price p {
  font-size: 20px;
  font-weight: 900;
}
.summary {
  border-top: 4px solid var(--ink);
}
.totals dd {
  font-size: 19px;
  font-weight: 900;
}
.totals .total {
  border-top-color: var(--ink);
  font-size: 24px;
}

/* Long-form pages and the about page. */
.body-copy > img,
.body-copy > .lx-picture > img {
  background: var(--soft);
}
.values-grid {
  gap: 0;
  border-top: 3px solid var(--ink);
}
.values-grid > div {
  padding: 18px 20px 0 0;
}
.empty {
  border: 1px solid var(--rule);
}
#notice {
  border-radius: 0;
}

/* Footer: black, the wordmark set large. */
footer {
  --focus: var(--dark-ink);
}
footer .wordmark > svg {
  width: 44px;
  height: 44px;
  color: inherit;
}
.footer-brand .wordmark-name b {
  font-size: 48px;
}
.footer-brand p {
  margin: 16px 0 0;
}
footer nav h2 {
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* Desktop: the header row is tighter than the shared default. */
@media (min-width: 901px) {
  .header {
    padding-block: 14px;
  }
}
@media (max-width: 960px) {
  .nd-drops {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .header .wordmark-name b {
    font-size: 26px;
  }
  .header .wordmark > svg {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 760px) {
  .nd-cover {
    --cover-focus: 50% 40%;
  }
  .nd-cover-lede {
    font-size: 15px;
  }
  .nd-cover-actions {
    width: 100%;
  }
  .nd-cover-actions .button {
    flex: 1;
    padding-inline: 12px;
  }
  .nd-unit small {
    margin-top: 8px;
    font-size: 11px;
  }
  .nd-night-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .nd-night-steps li,
  .nd-night-steps li + li {
    padding: 22px 0 24px;
    border-left: 0;
  }
  .nd-night-steps li + li {
    border-top: 1px solid var(--dark-line);
  }
}
@media (max-width: 560px) {
  .wordmark-name small {
    letter-spacing: 0.24em;
  }
  .nd-ticker-title {
    padding: 0 12px;
  }
  .product-card > :not(.product-photo) {
    margin-inline: 12px;
  }
  .product-card .product-meta {
    font-size: 12px;
  }
  .nd-stock-table thead td {
    width: 27%;
  }
  .nd-stock-table thead th {
    padding: 10px 8px 8px;
  }
  .nd-stock-table tbody th {
    padding-right: 6px;
  }
  .nd-stock-table tbody th a {
    font-size: 15px;
  }
  .nd-stock-price {
    font-size: 15px;
  }
  .nd-stock-table td > a,
  .nd-cell {
    padding: 9px 7px 10px;
  }
  .nd-left small {
    font-size: 11px;
  }
  .nd-made {
    font-size: 11px;
  }
  .nd-bar {
    height: 4px;
    margin-top: 7px;
  }
  .nd-drops > li > a,
  .nd-drops > li:not(:has(a)) {
    padding: 14px 10px 16px;
  }
  .nd-drops b {
    font-size: 14px;
  }
  .nd-drops b + span {
    font-size: 12px;
  }
  /* Phones: the notes become a list, a square photo beside the words. */
  .journal-card {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px;
  }
  .journal-card > :not(img) {
    padding-inline: 0;
  }
  .journal-card img {
    grid-row: 1 / span 3;
    aspect-ratio: 1;
    margin: 0;
  }
  .journal-card h2,
  .journal-card h3 {
    font-size: 16px;
  }
  .journal-card p:last-child {
    font-size: 13px;
  }
  .footer-brand .wordmark-name b {
    font-size: 40px;
  }
}