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

/*
 * COURTESY 禮數: a formal corporate gift house, set like a printed gift
 * catalogue. Everything is centred and symmetrical: the wordmark stacked over
 * a row of spaced links with gold bars between them, a deep red band with a
 * gold inset frame (the colour of the ribbon, the frame of the card), the gift
 * box as a framed plate on it, and the quotation, the page's one bold moment,
 * as a cream sheet with a double gold rule that sits on the band's foot.
 * Products are framed catalogue cards, prices are a table, steps carry Chinese
 * numerals between hairlines. Corners are square, buttons are filled red with
 * spaced characters, nothing has a shadow. Cormorant Garamond (SIL OFL 1.1,
 * notice in media-fonts.json) sets the wordmark, every amount and date and the
 * English lines under the titles; Chinese stays in the visitor's sans-serif,
 * spaced and medium.
 */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #2a1f20;
  --muted: #6b5d5c;
  --soft: #f7f0e3;
  --line: #e6dccc;
  --accent: #8c1a22;
  --accent-ink: #fffaf1;
  --highlight: #ecd7a4;
  --focus: #8c1a22;
  --dark: #5c1018;
  --dark-ink: #fbf3e6;
  --dark-muted: #e3cbb9;
  /* The ribbon's red, the foil's gold and the card's cream. */
  --red: #8c1a22;
  --cream: #f7f0e3;
  --gold: #c3a368;
  --gold-on-red: #dcc08a;
  --gold-ink: #7d5f2a;
  --display:
    'Cormorant Garamond', Garamond, 'Times New Roman', 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', 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: 12px 12px 24px;
  --card-background: var(--paper);
  --card-border: 1px solid var(--gold);
  --card-shadow: none;
  --columns: 4;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 24px;
  --grid-gap-phone: 12px 10px;
  --price-color: var(--accent);
  --price-weight: 600;
  --section-space: clamp(56px, 8vw, 104px);
}
body {
  font-variant-numeric: lining-nums;
}
/* Cormorant's figures are old-style by default; every amount stands upright. */
.product-price,
.cart-price p,
.totals dd,
.order-list .amount,
.order-id {
  font-variant-numeric: lining-nums tabular-nums;
}
h1,
h2 {
  font-weight: 500;
}
::selection {
  background: var(--highlight);
}
/* Light type on the red is drawn without the subpixel weight it gains on macOS. */
.announcement,
.cty-band,
.cty-choices label:has(:checked),
.page-hero,
.button,
.product-badge,
footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header: a dark red line of terms, the wordmark stacked in the middle, the
   links spaced with gold bars between them, one gold rule edge to edge. */
.announcement {
  padding: 9px var(--gutter);
  letter-spacing: 0.12em;
}
.header {
  border-bottom: 1px solid var(--gold);
  /* The rule runs past the page width to both edges of the window. */
  border-image: linear-gradient(var(--gold), var(--gold)) 0 0 1 0 / 0 0 1px 0 /
    0 100vmax;
}
.wordmark-name b {
  font-weight: 600;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}
.wordmark-name small {
  letter-spacing: 0.6em;
  margin-right: -0.6em;
}
.header .wordmark-name {
  justify-items: center;
}
.header .wordmark-name b {
  color: var(--accent);
  font-size: 26px;
}
.header .wordmark-name small {
  margin-top: 5px;
  color: var(--ink);
}
.menu {
  border-color: var(--gold);
}
#bag-count {
  border-radius: 0;
}
@media (min-width: 901px) {
  .header--center {
    padding-top: 22px;
    padding-bottom: 0;
    row-gap: 14px;
  }
  .header--center .wordmark {
    flex-direction: column;
    gap: 8px;
  }
  .header--center .wordmark > svg {
    width: 34px;
    height: 34px;
  }
  .header--center .wordmark-name b {
    font-size: 30px;
    letter-spacing: 0.34em;
    margin-right: -0.34em;
  }
  .header--center .navigation {
    justify-self: stretch;
    justify-content: center;
    gap: 0;
    padding: 4px 0 14px;
  }
  .header--center .navigation a {
    position: relative;
    padding: 4px 26px 4px calc(26px + 0.2em);
    border: 0;
    font-size: 15px;
    letter-spacing: 0.2em;
  }
  .header--center .navigation a + a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 13px;
    margin-top: -6px;
    border-left: 1px solid var(--gold);
  }
  .header--center .navigation a:hover {
    color: var(--accent);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 9px;
  }
}

/* Buttons: filled red rectangles, the characters spaced like a printed label. */
.button {
  padding-inline: calc(28px + 0.2em) 28px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.button.outline {
  border-color: var(--gold);
}
.button.outline:hover:not(:disabled) {
  border-color: var(--accent);
}
.text-link {
  border-bottom-color: var(--gold);
}
.text-link:hover {
  border-bottom-color: var(--accent);
}

/* Section titles: the Chinese spaced between two gold rules, a line of
   English under it, as on a printed catalogue's contents page. */
.cty-title {
  margin: 0 auto 28px;
  text-align: center;
}
.cty-title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  font-size: clamp(22px, 2.3vw, 28px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  line-height: 1.4;
}
.cty-title h2::before,
.cty-title h2::after {
  content: '';
  flex: 0 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--gold);
}
.cty-en {
  margin: 4px 0 0;
  color: var(--gold-ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.cty-intro {
  max-width: 36em;
  margin: -12px auto 32px;
  color: var(--muted);
  text-align: center;
}
/* Centred lines break at punctuation and spaces rather than inside a word;
   anything longer than the line still wraps. */
.cty-intro,
.cty-lead,
.cty-status,
.cty-field small,
.cty-plan-end p,
.cty-card-figure figcaption,
.page-hero p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.cty-more {
  margin: 36px 0 0;
  text-align: center;
}

/* The band: the ribbon's red edge to edge, a gold frame set inside it, the
   title spaced in the middle and the gift box as a framed plate. */
.cty-band {
  position: relative;
  padding: clamp(44px, 6vw, 72px) var(--gutter) clamp(150px, 15vw, 192px);
  background: var(--red);
  color: var(--accent-ink);
  text-align: center;
}
.cty-band::before {
  content: '';
  position: absolute;
  inset: clamp(10px, 1.4vw, 16px);
  border: 1px solid color-mix(in srgb, var(--gold-on-red) 65%, transparent);
  pointer-events: none;
}
.cty-band h1 {
  margin: 0 auto;
  font-weight: 400;
  font-size: clamp(27px, 3.8vw, 46px);
  line-height: 1.45;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  overflow-wrap: normal;
}
.cty-band h1 span {
  display: inline-block;
}
.cty-band .cty-en {
  margin-top: 8px;
  color: var(--gold-on-red);
  font-size: clamp(18px, 1.8vw, 22px);
}
.cty-lead {
  max-width: 32em;
  margin: 18px auto 0;
  color: #f3e2d3;
  font-size: 16px;
}
.cty-plate {
  width: min(100%, 620px);
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--gold-on-red);
}
.cty-plate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold-on-red) 55%, transparent);
}

/* The quotation: a cream sheet with a double gold rule on the band's foot.
   What you choose sits above; the two answers face each other below. */
.cty-plan {
  position: relative;
  width: min(100% - 2 * var(--gutter), 1040px);
  margin: calc(-1 * clamp(104px, 11vw, 136px)) auto 0;
  padding: clamp(32px, 4.4vw, 56px) clamp(20px, 4.4vw, 60px)
    clamp(28px, 4vw, 48px);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -9px;
  background: var(--cream);
}
.cty-plan .cty-title {
  margin-bottom: 30px;
}
.cty-plan fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.cty-plan legend,
.cty-field {
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.cty-choices legend {
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}
.cty-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cty-choices label {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  margin-left: -1px;
  padding: 14px 12px 16px;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.cty-choices label:first-of-type {
  margin-left: 0;
}
.cty-choices label:hover {
  background: #fdf8ef;
}
/* The radio stays in the form for the keyboard; the whole cell shows the choice. */
.cty-choices input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.cty-choices label:has(:focus-visible) {
  z-index: 1;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.cty-choices b {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}
.cty-choice-price {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
}
.cty-choice-what {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.cty-choices label:has(:checked) {
  z-index: 1;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.cty-choices label:has(:checked) :is(.cty-choice-price, .cty-choice-what) {
  color: var(--accent-ink);
}
.cty-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px clamp(16px, 2.6vw, 32px);
  margin-top: 26px;
}
.cty-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.cty-field small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.cty-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
}
.cty-count input {
  width: 6.2em;
  text-align: center;
}
.cty-plan input[type='number'],
.cty-plan input[type='date'] {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.cty-plan input[type='date'] {
  min-width: 0;
  max-width: 13em;
}
.cty-extras legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}
.cty-extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.cty-extras label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
}
.cty-plan input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.cty-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 30px;
  border-block: 1px solid var(--gold);
}
.cty-answer {
  min-width: 0;
  padding: 24px 16px 22px;
  text-align: center;
}
.cty-answer + .cty-answer {
  border-left: 1px solid var(--gold);
}
.cty-answer-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}
.cty-big {
  display: block;
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(46px, 5.4vw, 70px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* NT$ and the date's 月, 日 and weekday sit small beside the numerals. */
.cty-big small {
  margin: 0 0.12em;
  font-family: var(--body);
  font-size: 0.3em;
  font-weight: 500;
}
.cty-big small:first-child {
  margin-left: 0;
}
.cty-status {
  max-width: 26em;
  margin: 14px auto 0;
  font-size: 15px;
  font-weight: 500;
}
.cty-lines {
  max-width: 640px;
  margin: 22px auto 0;
}
.cty-lines div {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 5px 0;
}
/* A dotted leader runs from each line to its amount, as on a printed quote. */
.cty-lines dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  min-width: 0;
  color: var(--muted);
  font-size: 15px;
}
.cty-lines dt::after {
  content: '';
  flex: 1;
  min-width: 16px;
  margin: 0 10px;
  border-bottom: 1px dotted var(--gold);
}
.cty-lines dd {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.cty-notes-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cty-notes-pair p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.cty-plan-end {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 26px;
  text-align: center;
}
.cty-plan-end .button {
  min-width: 220px;
}
.cty-plan-end p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Catalogue cards: a gold frame, the box inside it, the name spaced, the
   price under a short rule, and who it is for on a red band across the photo. */
.cty-catalogue {
  padding-top: clamp(64px, 9vw, 112px);
}
/* Company orders read like the order form bound into a catalogue: on cream. */
.cty-company {
  /* One image painted past both edges of the window, so the band's edges
     render the same inside and outside the page width. */
  border-image: linear-gradient(var(--cream), var(--cream)) fill 0 / 0 / 0
    100vmax;
  clip-path: inset(0 -100vmax);
}
.product-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: border-color 0.15s;
}
.product-card .product-price {
  margin-top: auto;
}
.product-card:hover {
  border-color: var(--accent);
}
.product-photo {
  margin-bottom: 16px;
}
.product-badge {
  top: auto;
  bottom: 0;
  left: 50%;
  max-width: calc(100% - 24px);
  overflow: hidden;
  padding: 2px 12px 2px calc(12px + 0.14em);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}
.product-card h2,
.product-card h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
.product-en {
  color: var(--gold-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.product-meta {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.product-card .product-price {
  font-size: 25px;
  line-height: 1.1;
}
.product-card .product-price::before {
  content: '';
  display: block;
  width: 28px;
  margin: 14px auto 12px;
  border-top: 1px solid var(--gold);
}

/* Company orders: the price list by quantity, then the four terms in one frame. */
.cty-table {
  max-width: 880px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
.cty-prices {
  width: 100%;
  border-collapse: collapse;
  border-block: 1px solid var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.cty-prices caption {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.12em;
}
.cty-prices th,
.cty-prices td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.cty-prices tr:last-child > * {
  border-bottom: 0;
}
.cty-prices thead th {
  border-bottom-color: var(--gold);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  vertical-align: bottom;
}
.cty-prices thead small {
  display: block;
  color: var(--accent);
  font-size: 13px;
}
.cty-prices thead th:nth-child(2) small {
  color: var(--muted);
}
.cty-prices tbody th {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.cty-prices tbody th a:hover {
  color: var(--accent);
  text-decoration: underline 1px var(--gold);
  text-underline-offset: 6px;
}
.cty-prices td {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}
.cty-company .cty-intro {
  margin: 18px auto 40px;
  font-size: 15px;
}
.cty-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--gold);
  background: var(--paper);
}
.cty-terms > div {
  padding: 26px clamp(14px, 1.8vw, 24px) 24px;
  text-align: center;
}
.cty-terms > div + div {
  border-left: 1px solid var(--gold);
}
.cty-terms dt {
  color: var(--accent);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.cty-terms dd {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
}

/* After the order: the packing table, then four steps between hairlines. */

.cty-frame {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--gold);
}
.cty-frame img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--soft);
}
.cty-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 0;
  list-style: none;
}
.cty-steps li {
  min-width: 0;
  padding: 4px clamp(14px, 2vw, 28px);
  text-align: center;
}
.cty-steps li + li {
  border-left: 1px solid var(--gold);
}
.cty-step-no {
  display: block;
  color: var(--accent);
  font-size: 44px;
  font-weight: 300;
  line-height: 1.25;
}
.cty-steps h3 {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.cty-step-day {
  margin: 0 0 10px;
  color: var(--gold-ink);
  font-size: 14px;
}
.cty-step-day b {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}
.cty-steps p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
}

/* The card, centred on cream: what will be printed, with its foil frame. */
.cty-card-section {
  padding: var(--section-space) var(--gutter);
  background: var(--cream);
  text-align: center;
}
.cty-card-figure {
  container-type: inline-size;
  width: min(100%, 480px);
  margin: 0 auto;
}
.cty-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  aspect-ratio: 148 / 100;
  padding: 7cqi 10cqi;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--accent);
  transition: opacity 0.2s;
}
.cty-card::before {
  content: '';
  position: absolute;
  inset: 5.2% 3.5%;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.cty-card-figure[data-off] .cty-card {
  opacity: 0.45;
}
.cty-card-message {
  margin: 0;
  font-size: max(13px, 4.5cqi);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.cty-card-sign {
  margin: 1.2em 0 0;
  font-size: max(12px, 3.5cqi);
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}
.cty-card [data-empty] {
  color: var(--muted);
}
.cty-card-figure figcaption {
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 14px;
}
.cty-card-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px 24px;
  max-width: 760px;
  margin: 32px auto 0;
  text-align: left;
}
.cty-card-fields label {
  align-content: start;
  letter-spacing: 0.12em;
}
.cty-card-fields textarea {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  resize: vertical;
}
.cty-card-fields input {
  letter-spacing: 0;
}
.cty-card-fields textarea:hover {
  border-color: var(--muted);
}
.cty-card-section .cty-more {
  margin-top: 24px;
}

/* Notes listed like a notice board: 【subject】 title, one line of what it says. */
.cty-note-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold);
}
.cty-note-list li {
  border-bottom: 1px solid var(--line);
}
.cty-note-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  padding: 18px 8px 18px 0;
}
.cty-note-tag {
  grid-row: span 2;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.cty-note-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.cty-note-text {
  color: var(--muted);
  font-size: 15px;
}
.cty-note-list a:hover .cty-note-title {
  color: var(--accent);
  text-decoration: underline 1px var(--gold);
  text-underline-offset: 6px;
}

/* Footer: the band's red again, everything centred under a gold rule. */
footer {
  border-top: 1px solid var(--gold);
}
.footer-inner {
  max-width: calc(720px + 2 * var(--gutter));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: 36px 24px;
  padding-top: 56px;
  text-align: center;
}
.footer-brand {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
}
footer .wordmark {
  flex-direction: column;
  gap: 8px;
}
footer .wordmark > svg {
  color: var(--gold-on-red);
}
footer .wordmark-name {
  justify-items: center;
}
footer .wordmark-name b {
  font-size: 24px;
}
footer .wordmark-name small {
  margin-top: 5px;
}
.footer-brand p {
  margin: 14px 0 0;
  letter-spacing: 0.16em;
}
footer nav {
  justify-items: center;
}
footer nav h2 {
  color: var(--gold-on-red);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
footer nav a {
  justify-self: center;
  letter-spacing: 0.08em;
}
.footer-bottom {
  justify-content: center;
  border-top-color: color-mix(in srgb, var(--gold-on-red) 45%, transparent);
  text-align: center;
}

/* Shared pages in the same language: titles on the red band, framed photos,
   centred filters with gold bars. */
.page-hero {
  padding: clamp(36px, 5vw, 56px) var(--gutter) clamp(38px, 5vw, 58px);
  border-image: linear-gradient(var(--red), var(--red)) fill 0 / 0 / 0 100vmax;
  color: var(--accent-ink);
  text-align: center;
  clip-path: inset(0 -100vmax);
}
.page-hero h1 {
  margin: 0 auto 10px;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.page-hero p {
  max-width: 38em;
  margin: 0 auto;
  color: #f3e2d3;
  font-size: 15px;
  text-wrap: balance;
}
.page-hero .free-shipping {
  color: var(--gold-on-red);
  font-size: 16px;
  letter-spacing: 0.06em;
}
.page-hero:has(+ .body-copy) h1 {
  font-size: clamp(22px, 2.4vw, 30px);
}
/* Article titles are sentences: spaced less, broken at their punctuation. */
body[data-page='journal'] .page-hero:has(+ .body-copy) h1 {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.page-hero h1,
.body-copy h2,
.journal-card h2,
.journal-card h3,
.cty-note-title {
  word-break: keep-all;
}
.page-hero + .section {
  padding-top: clamp(32px, 4vw, 48px);
}
.shop-toolbar {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav {
  justify-content: center;
  gap: 0;
}
.filter-nav a {
  position: relative;
  padding: 6px 20px 6px calc(20px + 0.16em);
  border: 0;
  letter-spacing: 0.16em;
}
.filter-nav a + a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 13px;
  margin-top: -6px;
  border-left: 1px solid var(--gold);
}
.filter-nav a:hover {
  color: var(--accent);
}
.filter-nav a[aria-current='page'] {
  background: none;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline 1px var(--gold);
  text-underline-offset: 9px;
}
.search {
  width: min(100%, 420px);
}
.search button {
  letter-spacing: 0.16em;
}
main:has(.shop-toolbar) {
  --columns: 3;
}
.breadcrumb ol {
  font-size: 13px;
  letter-spacing: 0.06em;
}
/* A product page starts close under the header's rule. */
main > .shop-section:first-child {
  padding-top: clamp(24px, 3.4vw, 40px);
}
.product-detail > .product-photo {
  padding: 12px;
  border: 1px solid var(--gold);
  background: var(--paper);
}
.product-detail > .product-photo img {
  background: var(--soft);
}
.product-info h1 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: 0.2em;
}
.product-info .product-en {
  color: var(--gold-ink);
  font-size: 19px;
}
.product-info .product-price {
  margin: 18px 0;
  padding: 12px 0 10px;
  border-block: 1px solid var(--gold);
  font-size: 38px;
  line-height: 1.1;
}
#add-product .button {
  min-height: 54px;
  letter-spacing: 0.32em;
}
.product-details {
  border-top-color: var(--gold);
}
.product-details dt {
  font-weight: 500;
  letter-spacing: 0.12em;
}
.cart-line:first-child {
  border-top-color: var(--gold);
}
.cart-line img,
.cart-photo {
  border: 1px solid var(--line);
}
.cart-price p {
  font-size: 20px;
  font-weight: 600;
}
.summary {
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -8px;
  background: var(--cream);
}
.summary h2 {
  letter-spacing: 0.2em;
}
.totals dd {
  font-size: 19px;
  font-weight: 600;
}
.totals .total {
  border-top-color: var(--gold);
}
.totals .total dd {
  color: var(--accent);
  font-size: 26px;
}
.demo-result {
  border: 1px solid var(--line);
}
.journal-card img {
  padding: 8px;
  border: 1px solid var(--gold);
  background: var(--paper);
}
.journal-card h2,
.journal-card h3 {
  font-weight: 500;
  letter-spacing: 0.06em;
}
.journal-card .kicker,
.body-copy .kicker {
  color: var(--accent);
  letter-spacing: 0.1em;
}
.body-copy > img,
.body-copy > .lx-picture > img {
  padding: 10px;
  border: 1px solid var(--gold);
}
.body-copy .button + .text-link {
  margin-left: 20px;
}
.body-copy h2 {
  font-size: clamp(20px, 2.1vw, 25px);
  letter-spacing: 0.06em;
}
.values-grid {
  gap: 0;
  border: 1px solid var(--gold);
}
.values-grid > div {
  padding: 24px 20px;
}
.values-grid > div + div {
  border-left: 1px solid var(--gold);
}
.values-grid h3 {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
}
.faq {
  border-top-color: var(--gold);
}
.steps li::before {
  font-weight: 600;
}
.empty {
  border-color: var(--gold);
}

@media (min-width: 961px) {
  .product-detail > .product-photo {
    position: sticky;
    top: 24px;
  }
}
@media (max-width: 960px) {
  .cty-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cty-terms > div:nth-child(3) {
    border-left: 0;
  }
  .cty-terms > div:nth-child(n + 3) {
    border-top: 1px solid var(--gold);
  }
  .cty-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .cty-steps li:nth-child(3) {
    border-left: 0;
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .header .wordmark > svg {
    display: none;
  }
  .header .wordmark-name b {
    font-size: 22px;
  }
  .header .wordmark-name small {
    margin-top: 3px;
    font-size: 11px;
  }
  .navigation a {
    letter-spacing: 0.16em;
  }
}
@media (max-width: 760px) {
  .cty-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cty-extras {
    grid-column: 1 / -1;
  }
  .cty-answers {
    grid-template-columns: minmax(0, 1fr);
  }
  .cty-answer + .cty-answer {
    border-top: 1px solid var(--gold);
    border-left: 0;
  }
  .cty-notes-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .cty-card-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .values-grid > div + div {
    border-top: 1px solid var(--gold);
    border-left: 0;
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cty-band h1 {
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }
  .cty-lead {
    font-size: 15px;
  }
  .cty-plan {
    width: calc(100% - 2 * 12px);
    padding-inline: 18px;
  }
  .cty-choices label {
    padding: 12px 4px 13px;
  }
  .cty-choices b {
    font-size: 16px;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
  .cty-choice-price {
    font-size: 19px;
  }
  .cty-choice-what {
    display: none;
  }
  .cty-fields {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 12px;
  }
  .cty-plan input[type='date'] {
    padding-inline: 8px;
    font-size: 17px;
  }
  .cty-count {
    gap: 8px;
  }
  .cty-count input {
    width: 4em;
  }
  .cty-terms {
    grid-template-columns: minmax(0, 1fr);
  }
  .cty-terms > div {
    padding: 20px 16px;
  }
  .cty-terms > div + div {
    border-top: 1px solid var(--gold);
    border-left: 0;
  }
  /* Phones: each step a line of the list, its numeral in the margin. */
  .cty-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-top: 28px;
    border-top: 1px solid var(--gold);
  }
  .cty-steps li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    padding: 18px 4px 18px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .cty-steps li + li {
    border-left: 0;
  }
  .cty-step-no {
    grid-row: span 3;
    font-size: 34px;
    line-height: 1;
    text-align: center;
  }
  .cty-steps h3 {
    margin: 0;
    text-indent: 0;
  }
  .cty-step-day {
    margin-bottom: 4px;
  }
  .cty-prices th,
  .cty-prices td {
    padding: 12px 4px;
  }
  .cty-prices td {
    font-size: 18px;
  }
  .cty-prices tbody th {
    letter-spacing: 0.08em;
  }
  .cty-note-list a {
    grid-template-columns: minmax(0, 1fr);
  }
  .cty-note-tag {
    grid-row: auto;
  }
  .filter-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border: 1px solid var(--gold);
  }
  .filter-nav a {
    padding: 10px 6px;
    text-align: center;
  }
  .filter-nav a + a::before {
    display: none;
  }
  .filter-nav a:nth-child(even) {
    border-left: 1px solid var(--gold);
  }
  .filter-nav a:nth-child(n + 3) {
    border-top: 1px solid var(--gold);
  }
  .filter-nav a[aria-current='page'] {
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
  }
  .product-card .product-price {
    font-size: 22px;
  }
  .product-card h2,
  .product-card h3 {
    font-size: 15px;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }
  .product-info .product-price {
    font-size: 32px;
  }
}