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

/*
 * DOORFRAME: children's clothes sized by height, out of a crayon box. The home
 * page opens on a pastel wall with a doorframe drawn to scale; its left casing
 * is a growth chart with one crayon per size, 90 coral up to 140 lilac. The same
 * colours mark sizes everywhere (the round size links, the 建議買 badge, the
 * dots before the answer lines, the shop's size note), keyed on data-size.
 * Everything is round: pill links and buttons, 24px cards on pastel blue or
 * yellow, circle photos, wavy section edges, navy outlines like a drawing.
 * Quicksand (SIL OFL 1.1, notice in media-fonts.json) sets the wordmark,
 * heights, sizes and prices; Chinese headings are heavy, in a rounded face
 * where the system has one (Yuanti TC), else the system's own sans-serif.
 */
@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/quicksand-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #1b2f55;
  --muted: #4c5a73;
  --soft: #e3f2fd;
  --line: #d3e3f1;
  --accent: #1b2f55;
  --accent-ink: #ffffff;
  --highlight: #ffc83d;
  --focus: #1b2f55;
  --dark: #1b2f55;
  --dark-ink: #f5f8fc;
  --dark-muted: #c3d0e2;
  /* One crayon per size, low to high like the bands of a growth chart. Navy
     text reads at 4.5:1 or more on each. */
  --c90: #ff7a59;
  --c100: #ff9b3d;
  --c110: #ffc83d;
  --c120: #4cb860;
  --c130: #5bb8f0;
  --c140: #a99cf5;
  /* Pastels: the wall, the bands and the product cards. */
  --wall: #cde9fb;
  --powder: #e1f1fe;
  --butter: #fff0c2;
  --mint: #dff4e2;
  --peach: #ffe3d8;
  --room: #fff3cf;
  --grass-ink: #17692f;
  --pencil: #3a4152;
  --display: 'Quicksand', 'Arial Rounded MT Bold', sans-serif;
  /* Quicksand for Latin and numerals (so digits stay Latin), then a rounded
     Chinese face where the system has one, then the shared stack. */
  --heading:
    'Quicksand', 'Yuanti TC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  /* Quicksand numerals inside Chinese sentences; the rest from the shared stack. */
  --numeric: 'Quicksand', var(--body);
  --radius: 16px;
  --radius-large: 24px;
  --button-radius: 999px;
  --input-radius: 16px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --photo-radius: 16px;
  --card-radius: 24px;
  --card-padding: 10px 10px 20px;
  --card-background: var(--powder);
  --grid-gap: 28px 20px;
  --grid-gap-phone: 14px 12px;
  --price-weight: 700;
  --section-space: clamp(56px, 8vw, 96px);
  /* A wave, filled below its line; tiled along the top edge of a band. */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8C15 1 45 1 60 8s45 7 60 0v8H0z'/%3E%3C/svg%3E");
  --wave-height: 16px;
  --wave-length: 120px;
}
[data-size='90'] {
  --size: var(--c90);
}
[data-size='100'] {
  --size: var(--c100);
}
[data-size='110'] {
  --size: var(--c110);
}
[data-size='120'] {
  --size: var(--c120);
}
[data-size='130'] {
  --size: var(--c130);
}
[data-size='140'] {
  --size: var(--c140);
}
h1,
h2 {
  font-weight: 800;
}
h3 {
  font-weight: 700;
}

/* Header: a sunflower strip, the wordmark, and chunky pill links. */
.announcement {
  background: var(--highlight);
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}
.header {
  padding-block: 14px;
}
.wordmark > svg {
  color: var(--ink);
}
.df-tick-now {
  stroke: var(--c110);
}
.df-tick-next {
  stroke: var(--c120);
}
.wordmark-name b {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
}
.navigation {
  gap: 10px;
}
.navigation a {
  padding: 7px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--powder);
  font-weight: 700;
  transition: border-color 0.15s;
}
.navigation a:nth-child(2) {
  background: var(--butter);
}
.navigation a:nth-child(3) {
  background: var(--mint);
}
.navigation a:nth-child(4) {
  background: var(--peach);
}
.navigation a:hover,
.navigation a[aria-current='page'] {
  border-color: var(--ink);
}
.menu {
  border: 2px solid var(--ink);
  font-weight: 700;
}
.header-tools svg {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bag-count {
  background: var(--c90);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
}

/* Buttons: sunflower pills with a drawn navy edge. */
.button {
  min-height: 52px;
  padding: 10px 30px;
  border: 2.5px solid var(--ink);
  background: var(--highlight);
  color: var(--ink);
  font-weight: 800;
}
.button:hover:not(:disabled),
.button.outline:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.button.outline {
  background: var(--paper);
  color: var(--ink);
}
.text-link {
  border-bottom-width: 2px;
  font-weight: 700;
}
.button + .text-link {
  margin-left: 16px;
}

/* Wavy edges: a band's top edge is a wave in its own colour, laid over the
   band before it. */
.df-wavy {
  position: relative;
  background: var(--band, var(--paper));
}
.df-wavy::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--wave-height);
  background: var(--band, var(--paper));
  -webkit-mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
  mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
  pointer-events: none;
}
.df-wrap {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.df-head {
  max-width: 40em;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.df-head h2 {
  margin-bottom: 8px;
  font-size: clamp(28px, 3.4vw, 40px);
}
.df-head p {
  margin: 0;
  color: var(--muted);
  text-wrap: balance;
}
.df-more {
  margin: clamp(28px, 4vw, 44px) 0 0;
  text-align: center;
}
/* A size as a crayon circle: in the rule under the headline and the shop's note. */
.df-dot {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--size);
  font: 700 22px/1 var(--display);
}

/* 量門框: the first screen is a pastel wall with a doorframe drawn on it, a
   photo pinned to its corner, and the height form beside it. */
.df-hero {
  --muted: var(--ink);
  background: var(--wall);
}
/* The drawing stands on the hero's lower edge: the wave of the next band cuts
   its casings off like a floor, so only the copy keeps a bottom padding. */
.df-hero-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(24px, 3.2vw, 40px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 460px);
  justify-content: center;
  align-items: end;
  gap: 0 clamp(28px, 5vw, 72px);
}
.df-hero-copy {
  align-self: center;
  padding-bottom: clamp(44px, 5vw, 64px);
}
.df-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(50px, 6.2vw, 80px);
  line-height: 1.08;
}
/* Break only between the phrases. */
.df-hero h1 span,
.df-knees h2 span {
  display: inline-block;
}
.df-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.5;
}
.df-rule .df-dot {
  width: 58px;
  font-size: 20px;
}
.df-rule b {
  font-family: var(--numeric);
}
.df-story {
  max-width: 34em;
  margin: 0 0 22px;
  font-family: var(--numeric);
}
.df-measure {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
}
.df-measure > label {
  font-size: 18px;
  font-weight: 800;
}
.df-measure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.df-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.df-field input {
  width: 3.3em;
  min-height: 0;
  padding: 2px 10px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--butter);
  font: 700 clamp(44px, 4.4vw, 58px) / 1.15 var(--display);
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.df-field input::-webkit-inner-spin-button,
.df-field input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.df-buy {
  flex: none;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 96px;
  aspect-ratio: 1;
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--size);
  line-height: 1.1;
  font-weight: 700;
}
.df-buy small {
  font-size: 12px;
}
.df-buy span {
  font-size: 14px;
}
.df-buy b {
  margin-right: 1px;
  font: 700 30px/1 var(--display);
}
.df-answer {
  display: grid;
  gap: 4px;
  margin: 0;
  font: 700 clamp(16px, 1.5vw, 18px) / 1.55 var(--numeric);
}
/* Each line opens with its size's crayon: solid fits today, dashed comes next. */
.df-answer span {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.df-answer [data-size]::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--size);
  transform: translateY(2px);
}
.df-answer .next::before {
  border-style: dashed;
}
.df-answer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}
.df-answer-links > span {
  margin-right: 2px;
}
.df-answer-links b {
  font-family: var(--numeric);
}
.df-answer-links a {
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--powder);
  font-size: 15px;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.df-answer-links a:hover {
  background: var(--ink);
  color: var(--paper);
}
.df-how {
  margin: 0;
  font-size: 14px;
}
.df-how a {
  margin-left: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* The drawing, and the photo pinned to its top corner. The photo's lower edge
   stays above the highest mark the drawing shows (data-max). */
.df-hero-art {
  position: relative;
  padding-top: 24%;
}
.df-photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 46%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ink);
  background: var(--paper);
}
.df-frame {
  display: block;
  width: 100%;
  height: auto;
}
.df-frame text {
  font: 700 16px var(--numeric);
  fill: var(--ink);
}
.df-room {
  fill: var(--room);
}
.df-wood {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.df-band rect {
  fill: var(--size);
}
.df-band circle {
  fill: var(--size);
  stroke: var(--ink);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s;
}
.df-band text {
  text-anchor: middle;
}
.df-band.now circle {
  transform: scale(1.32);
  stroke-width: 3.5;
}
.df-band.next circle {
  stroke-dasharray: 6 4;
}
.df-pencil path {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.df-frame .df-pencil text {
  font: 700 13px var(--body);
}
.df-today path,
.df-until path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}
.df-today path {
  stroke-width: 4;
}
.df-until path {
  stroke-width: 3;
  stroke-dasharray: 1 7;
}
.df-today rect {
  fill: var(--ink);
}
.df-frame .df-today text {
  fill: var(--paper);
}
.df-until rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}
.df-frame :is(.df-today, .df-until) text {
  font-size: 14px;
  text-anchor: middle;
}
/* A new height slides the marks to it (home.js); reduced motion makes it a jump. */
.df-today,
.df-until {
  transition: transform 0.25s ease-out;
}

/* Shop by height: the sizes as crayon circles, growing with the number. */
.df-heights .df-wrap {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: 0;
}
.df-height-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 24px clamp(14px, 2.8vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.df-height-list a {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.df-height-list b {
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--d, 96px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--size);
  font: 700 calc(var(--d, 96px) * 0.3) / 1 var(--display);
  transition: transform 0.2s;
}
.df-height-list small {
  margin-top: 2px;
  font: 700 14px/1.2 var(--body);
}
.df-height-list a > span {
  font: 700 15px var(--numeric);
  color: var(--muted);
}
.df-height-list a:hover b {
  transform: translateY(-6px) rotate(-6deg);
}
/* Keyboard focus rings the circle itself. */
.df-height-list a:focus-visible {
  outline: none;
}
.df-height-list a:focus-visible b {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.df-height-list li:nth-child(1) {
  --d: 84px;
}
.df-height-list li:nth-child(2) {
  --d: 94px;
}
.df-height-list li:nth-child(3) {
  --d: 104px;
}
.df-height-list li:nth-child(4) {
  --d: 114px;
}
.df-height-list li:nth-child(5) {
  --d: 124px;
}
.df-height-list li:nth-child(6) {
  --d: 134px;
}

/* Product cards: pastel tiles, blue or yellow by category, with the garment
   lying on the same colour; pill badges with a drawn edge. */
.product-card {
  transition: transform 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);
}
.product-card:is([data-category='tops'], [data-category='sleep']) {
  --card-background: var(--butter);
}
.product-card > :not(.product-photo) {
  padding-inline: 8px;
}
.product-card :is(h2, h3) {
  font-size: 17px;
  font-weight: 800;
}
.product-card:hover :is(h2, h3) {
  text-decoration: none;
}
.product-en {
  font-weight: 700;
}
.product-meta {
  margin: 4px 0 10px;
}
.product-card .product-price {
  font-size: 19px;
}
.product-badge {
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.product-photo img {
  transition: transform 0.4s;
}

/* Not a small adult's clothes: four crayon blocks, each led by its number. */
.df-made .df-wrap {
  padding-top: 0;
}
.df-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.df-facts li {
  padding: 22px 24px 26px;
  border-radius: 28px;
  background: var(--c130);
}
.df-facts li:nth-child(2) {
  background: var(--c110);
}
.df-facts li:nth-child(3) {
  background: var(--c120);
}
.df-facts li:nth-child(4) {
  background: var(--c90);
}
.df-fact-number {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
}
.df-fact-number b {
  margin-right: 6px;
  font: 700 clamp(58px, 6vw, 78px) / 1 var(--display);
}
.df-facts h3 {
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 800;
}
.df-facts li > p:last-child {
  margin: 0;
  font-size: 15px;
}

/* Knees: the close-up on a yellow band, with how much the hem lets down. */
.df-knees {
  --band: var(--butter);
}
.df-knees-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}
.df-knees-photo {
  position: relative;
  margin: 0;
}
.df-knees-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 32px;
}
.df-sticker {
  position: absolute;
  right: -10px;
  bottom: -24px;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 128px;
  aspect-ratio: 1;
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--c90);
  font-weight: 700;
  line-height: 1.15;
  transform: rotate(-8deg);
}
.df-sticker b {
  font: 700 50px/1 var(--display);
}
.df-sticker small {
  font-size: 13px;
}
.df-knees h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.4vw, 40px);
}
.df-knees-copy p {
  max-width: 30em;
}
.df-knees-copy .df-aside {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 15px;
}

/* Notes for parents, and the journal pages. */
.df-notes {
  --band: var(--paper);
}
.journal-card img {
  border-radius: 24px;
}
.journal-card .kicker,
.body-copy > .kicker {
  width: fit-content;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.journal-card:nth-child(3n + 2) .kicker {
  background: var(--powder);
}
.journal-card:nth-child(3n) .kicker {
  background: var(--mint);
}

/* Footer: navy, with a wavy top. */
footer {
  position: relative;
  margin-top: 24px;
}
footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 18px;
  background: var(--dark);
  -webkit-mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
  mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
}
.footer-inner {
  padding-top: 52px;
}

/* Shared pages: the title on a pastel band that ends in a wave. */
.page-hero {
  --band: var(--powder);
  position: relative;
  max-width: none;
  margin: 0 0 24px;
  padding: clamp(36px, 6vw, 64px)
    max(var(--gutter), calc((100% - var(--width)) / 2)) clamp(30px, 4vw, 48px);
  background: var(--band);
  text-align: center;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--band);
  -webkit-mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
  mask: var(--wave) 0 0 / var(--wave-length) 100% repeat-x;
  transform: scaleY(-1);
}
.page-hero h1 {
  margin-inline: auto;
  font-size: clamp(30px, 4vw, 46px);
}
.page-hero p {
  margin-inline: auto;
  color: var(--ink);
}
.page-hero:has(+ .body-copy) {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 720px) / 2));
}
body[data-page='about'] .page-hero {
  --band: var(--butter);
}
body[data-page='journal'] .page-hero {
  --band: var(--mint);
}
.page-hero .free-shipping {
  color: var(--grass-ink);
  font-weight: 700;
}
/* The shop note for a size picked on the home page (home.js): one outlined
   pill with the size's crayon circle. */
.page-hero .df-picked {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 6px 22px 6px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.df-picked .df-dot {
  width: 46px;
  font-size: 15px;
  border-width: 2.5px;
}
.df-picked a {
  flex: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shop */
main:has(.shop-toolbar) {
  --columns: 3;
}
.shop-toolbar {
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav a {
  padding: 6px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
}
.filter-nav a:hover {
  border-color: var(--ink);
  background: var(--powder);
}
.filter-nav a[aria-current='page'] {
  border-color: var(--ink);
  background: var(--highlight);
  color: var(--ink);
}
.search input {
  padding-left: 18px;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: 999px 0 0 999px;
}
.search button {
  padding-inline: 20px;
  border: 2px solid var(--ink);
  border-radius: 0 999px 999px 0;
  font-weight: 700;
}

/* Product page */
.product-detail .product-photo {
  border-radius: 32px;
  background: var(--powder);
}
.product-info .product-en {
  font-weight: 700;
}
.product-info .product-price {
  font-size: 30px;
}
#add-product :is(select, input) {
  border: 2px solid var(--ink);
}
.product-guide .text-link {
  display: inline-block;
  padding: 7px 18px;
  border: 2px dashed var(--ink);
  border-radius: 999px;
  background: var(--butter);
}
.product-guide .text-link:hover {
  border-style: solid;
  color: var(--ink);
}
.product-details {
  padding: 4px 22px;
  border: 0;
  border-radius: 24px;
  background: var(--soft);
}
.product-details > div {
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 30%, transparent);
}
.product-details > div:last-child {
  border-bottom: 0;
}

/* Cart */
.cart-line img,
.cart-photo {
  border-radius: 16px;
}
.summary {
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: var(--butter);
}
#notice {
  border-radius: 999px;
}

/* About, contact and terms */
body[data-page='about'] .body-copy > img,
body[data-page='about'] .body-copy > .lx-picture > img {
  width: min(80%, 400px);
  aspect-ratio: 1;
  margin: 12px auto 40px;
  object-fit: cover;
  border: 8px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ink);
}
/* Articles open on their photo at one shape, whatever its slot's size. */
body[data-page='journal'] .body-copy > img,
body[data-page='journal'] .body-copy > .lx-picture > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
}
.values-grid > div {
  padding: 22px 22px 24px;
  border-radius: 24px;
  background: var(--powder);
}
.values-grid > div:nth-child(2) {
  background: var(--butter);
}
.values-grid > div:nth-child(3) {
  background: var(--mint);
}
.values-grid h3 {
  font-weight: 800;
}
.faq {
  display: grid;
  gap: 10px;
  border-top: 0;
}
.faq details {
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 22px;
}
.faq details[open] {
  background: var(--soft);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--highlight);
  color: var(--ink);
  font: 700 20px/1 var(--display);
}
.faq details[open] summary::after {
  content: '−';
}
.steps li {
  grid-template-columns: 58px minmax(0, 1fr);
}
.steps li::before {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--c110);
  color: var(--ink);
  font: 700 19px/1 var(--display);
}
.steps li:nth-child(2)::before {
  background: var(--c120);
}
.steps li:nth-child(3)::before {
  background: var(--c130);
}
.steps li:nth-child(4)::before {
  background: var(--c90);
}

@media (max-width: 960px) {
  .df-hero-inner,
  .df-knees-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .df-hero-art {
    justify-self: center;
    width: min(100%, 460px);
  }
  .df-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* All six sizes stay on one row, a little smaller. */
  .df-height-list {
    gap: 20px 12px;
  }
  .df-height-list li:nth-child(1) {
    --d: 72px;
  }
  .df-height-list li:nth-child(2) {
    --d: 80px;
  }
  .df-height-list li:nth-child(3) {
    --d: 88px;
  }
  .df-height-list li:nth-child(4) {
    --d: 96px;
  }
  .df-height-list li:nth-child(5) {
    --d: 104px;
  }
  .df-height-list li:nth-child(6) {
    --d: 112px;
  }
}
/* Too narrow for one row: two rows of three, still growing from 90 to 140. */
@media (max-width: 700px) {
  .df-height-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 22px 8px;
  }
  .df-height-list li:nth-child(1) {
    --d: 70px;
  }
  .df-height-list li:nth-child(2) {
    --d: 78px;
  }
  .df-height-list li:nth-child(3) {
    --d: 86px;
  }
  .df-height-list li:nth-child(4) {
    --d: 94px;
  }
  .df-height-list li:nth-child(5) {
    --d: 102px;
  }
  .df-height-list li:nth-child(6) {
    --d: 110px;
  }
}
/* Three notes on a tablet: three narrow cards rather than two and one. */
@media (min-width: 761px) and (max-width: 960px) {
  .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 18px;
  }
}
@media (max-width: 900px) {
  .navigation {
    gap: 8px;
    padding: 12px 0 4px;
    border-top: 0;
  }
  .navigation a {
    padding: 10px 18px;
  }
}
/* On phones the home page's notes are a list: a round-cornered thumbnail beside
   each title; the footer keeps its two link lists side by side. */
@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  .df-notes .journal-grid {
    gap: 18px;
  }
  .df-notes .journal-card {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
  }
  .df-notes .journal-card img {
    grid-row: span 3;
    margin: 0;
    aspect-ratio: 1;
    border-radius: 20px;
  }
  .df-notes .journal-card h3 {
    font-size: 17px;
  }
}
@media (max-width: 560px) {
  :root {
    --wave-height: 12px;
    --wave-length: 84px;
  }
  .df-rule {
    gap: 12px;
    font-size: 17px;
  }
  .df-rule .df-dot {
    width: 54px;
    font-size: 19px;
  }
  .df-measure {
    padding: 18px;
    border-radius: 24px;
  }
  .df-measure-row {
    gap: 10px;
  }
  .df-field input {
    width: 2.9em;
  }
  .df-buy {
    width: 84px;
  }
  .df-buy b {
    font-size: 26px;
  }
  .df-answer {
    font-size: 16px;
  }
  .df-height-list a > span {
    font-size: 13px;
  }
  .page-hero .df-picked {
    gap: 10px;
    padding-right: 16px;
    border-radius: 30px;
    font-size: 15px;
  }
  .product-badge {
    padding: 2px 9px;
    font-size: 12px;
  }
  /* Specs stack on phones: the label over its value, both full width. */
  .product-details {
    padding-inline: 18px;
  }
  .product-details > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .df-facts {
    gap: 12px;
  }
  .df-facts li {
    padding: 18px 16px 20px;
    border-radius: 24px;
  }
  .df-fact-number {
    font-size: 18px;
  }
  .df-facts h3 {
    font-size: 16px;
  }
  .df-facts li > p:last-child {
    font-size: 14px;
  }
  .df-sticker {
    right: -6px;
    width: 104px;
  }
  .df-sticker b {
    font-size: 40px;
  }
  .df-knees-photo img {
    border-radius: 24px;
  }
  /* Room in the size menu for 110 號（105–114 公分）. */
  #add-product {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
}
@media (max-width: 420px) {
  .wordmark-name b {
    font-size: 20px;
  }
}