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

/*
 * FLOUR PAW: birthday cakes for pets, with the pet's name piped on top.
 * A party bakery: every page opens in a strawberry-milk box (the header and
 * the band under it) that ends in a scalloped edge, and the footer is its
 * lid. On the home page the cake sits in the middle of that box on a circle
 * ringed with piped beads, and the name typed under it is piped onto it.
 * Carob is the one dark colour, for every line of text and every button;
 * each category has its own pastel (cakes strawberry, cupcakes butter,
 * cookies mint, party things lilac), and the cards, filters and tags keep it.
 * Everything is round: pill buttons and chips, 28px cards, circles, beads.
 * Baloo 2 (SIL OFL 1.1, notice in media-fonts.json) sets the wordmark, the
 * piped name, sizes, days and prices, and the Latin and digits in headings;
 * Chinese stays in the visitor's own sans-serif.
 */
@font-face {
  font-family: 'Baloo 2';
  src: url('/fonts/baloo-2-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #fff9fa;
  --ink: #4a2a27;
  --muted: #6f4a44;
  --soft: #fde4ea;
  --line: #f1cfd7;
  --accent: #4a2a27;
  --accent-ink: #fff9fa;
  --highlight: #f8cad4;
  --focus: #4a2a27;
  --dark: #4a2a27;
  --dark-ink: #fff3f5;
  --dark-muted: #efd3d8;
  /* The box, and one pastel per category (cards a shade lighter). */
  --strawberry: #f8cad4;
  --butter: #fbe3a0;
  --mint: #c9e9d9;
  --lilac: #ddd5f6;
  --berry: #e88aa2;
  --cake-card: #fcd8e0;
  --cupcake-card: #fce9b6;
  --cookie-card: #d3eee1;
  --party-card: #e4def9;
  --display: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --heading:
    'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 14px;
  --radius-large: 28px;
  --button-radius: 999px;
  --input-radius: 999px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --photo-radius: 18px;
  --photo-ratio: 1;
  --card-radius: 28px;
  --card-padding: 10px 10px 20px;
  --card-background: var(--cake-card);
  --columns: 3;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 32px 24px;
  --grid-gap-phone: 14px 12px;
  --price-color: var(--ink);
  --price-weight: 700;
  --section-space: clamp(56px, 8vw, 104px);
  --header-background: var(--strawberry);
  /* The scalloped edge: half-circles of this radius. */
  --scallop: 14px;
}
h1,
h2 {
  font-weight: 800;
}
h3 {
  font-weight: 700;
}
::selection {
  background: var(--butter);
}

/* The header: the top of the box. Links turn into pills on hover and for the page you are on. */
.wordmark > svg {
  color: var(--ink);
}
.wordmark-name b {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.header-tools a:hover {
  color: var(--ink);
}
.header-tools a:hover svg {
  stroke-width: 2.2;
}
.menu {
  border: 2px solid var(--ink);
  font-weight: 700;
}
.navigation a {
  border-bottom: 0;
  border-radius: 999px;
  font-weight: 700;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.navigation a:hover {
  background: var(--paper);
}
.navigation a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}
@media (min-width: 901px) {
  .header--center {
    row-gap: 8px;
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .wordmark > svg {
    width: 40px;
    height: 40px;
  }
  .wordmark-name b {
    font-size: 28px;
  }
  .navigation {
    gap: 6px;
  }
  .navigation a {
    padding: 6px 18px;
  }
}

/* Buttons are carob pills; text links sit on a row of piped beads. */
.button {
  border-width: 2px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.text-link {
  padding: 2px 0 9px;
  border-bottom: 0;
  font-weight: 700;
  background: radial-gradient(
      circle,
      currentColor 1.6px,
      transparent 2.1px
    )
    0 100% / 8px 6px repeat-x;
}
.text-link:hover {
  color: var(--ink);
  background-size: 6px 6px;
}
input,
select {
  border-width: 2px;
}
select {
  padding-inline: 18px 14px;
}

/* The scalloped edges: under the home band and every page title, and the footer's lid. */
.fp-hero::after,
.page-hero::after,
footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--scallop);
  background: radial-gradient(
      circle at 50% 0,
      var(--strawberry) calc(var(--scallop) - 0.5px),
      transparent var(--scallop)
    )
    50% 0 / calc(2 * var(--scallop)) var(--scallop) repeat-x;
}
.fp-hero::after,
.page-hero::after {
  top: 100%;
}
footer::before {
  bottom: 100%;
  transform: scaleY(-1);
}
/* A product page has no title band, so the edge hangs from the header. */
body[data-page='products'] main::before {
  content: '';
  display: block;
  height: var(--scallop);
  background: radial-gradient(
      circle at 50% 0,
      var(--strawberry) calc(var(--scallop) - 0.5px),
      transparent var(--scallop)
    )
    50% 0 / calc(2 * var(--scallop)) var(--scallop) repeat-x;
}

/*
 * The party. The cake photo is cut to a circle and ringed with white beads
 * (zero-length dashes with round caps; pathLength sets how many); the name is
 * piped onto the photo's blank top. --name-y is the centre of that top in the
 * photo (of 1000) and --name-tilt how flat the camera sees it: change them
 * if the photo changes.
 */
.fp-hero {
  --name-y: 500px;
  --name-tilt: 0.82;
  position: relative;
  padding: clamp(4px, 1vw, 12px) var(--gutter) clamp(48px, 6vw, 76px);
  background: var(--strawberry);
  text-align: center;
}
.fp-hero h1 {
  margin: 0 auto 6px;
  font-size: clamp(31px, 4.6vw, 56px);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.fp-hero h1 span,
.fp-lead span {
  display: inline-block;
}
.fp-lead {
  max-width: 32em;
  margin: 0 auto;
  font-size: 17px;
}
#preview {
  scroll-margin-top: 16px;
}
.fp-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 900px);
  margin: clamp(22px, 2.4vw, 30px) auto 0;
}
/* Confetti: two loose handfuls of dots in the pastels, white and berry,
   either side of the cake (behind it on narrow screens). */
.fp-stage::before {
  content: '';
  position: absolute;
  inset: -2% 0 4%;
  z-index: -1;
  background:
    radial-gradient(circle, var(--mint) 11px, transparent 11.5px) 4% 18% /
      24px 24px no-repeat,
    radial-gradient(circle, var(--paper) 6px, transparent 6.5px) 12% 7% /
      14px 14px no-repeat,
    radial-gradient(circle, var(--berry) 8px, transparent 8.5px) 16% 33% /
      18px 18px no-repeat,
    radial-gradient(circle, var(--butter) 6px, transparent 6.5px) 6% 52% /
      14px 14px no-repeat,
    radial-gradient(circle, var(--lilac) 12px, transparent 12.5px) 19% 64% /
      26px 26px no-repeat,
    radial-gradient(circle, var(--paper) 7px, transparent 7.5px) 9% 83% /
      16px 16px no-repeat,
    radial-gradient(circle, var(--mint) 5.5px, transparent 6px) 22% 93% /
      13px 13px no-repeat,
    radial-gradient(circle, var(--butter) 8px, transparent 8.5px) 80% 5% /
      18px 18px no-repeat,
    radial-gradient(circle, var(--paper) 5px, transparent 5.5px) 93% 13% /
      12px 12px no-repeat,
    radial-gradient(circle, var(--lilac) 13px, transparent 13.5px) 87% 29% /
      28px 28px no-repeat,
    radial-gradient(circle, var(--mint) 7px, transparent 7.5px) 96% 46% /
      16px 16px no-repeat,
    radial-gradient(circle, var(--berry) 9px, transparent 9.5px) 97% 70% /
      20px 20px no-repeat,
    radial-gradient(circle, var(--butter) 6px, transparent 6.5px) 90% 90% /
      14px 14px no-repeat,
    radial-gradient(circle, var(--berry) 5px, transparent 5.5px) 34% 0% /
      12px 12px no-repeat,
    radial-gradient(circle, var(--mint) 6px, transparent 6.5px) 64% 1% /
      14px 14px no-repeat;
}
.fp-cake {
  --cake: min(420px, 74vw);
  position: relative;
  container-type: inline-size;
  width: var(--cake);
  margin: 0 auto;
}
.fp-cake img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--mint);
}
.fp-piping {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fp-beads,
.fp-beads-shade {
  fill: none;
  stroke-width: 34;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
}
.fp-beads {
  stroke: #fffdfb;
}
.fp-beads-shade {
  stroke: rgb(74 42 39 / 0.16);
}
.fp-name {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 6px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family:
    'Baloo 2', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  filter: url(#cake-piped);
  transform: translate(500px, var(--name-y)) scale(1, var(--name-tilt));
}
/* Two stickers on the cake: a scalloped seal with the promise, and a round
   tag that follows the size picked below. */
.fp-seal,
.fp-tag {
  position: absolute;
  z-index: 1;
  display: grid;
  place-content: center;
  margin: 0;
  aspect-ratio: 1;
  text-align: center;
  line-height: 1.2;
}
.fp-seal {
  top: 1%;
  left: -9%;
  width: 28%;
  background: var(--butter);
  font-size: clamp(13px, 4.1cqi, 18px);
  font-weight: 800;
  line-height: 1.25;
  rotate: -12deg;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='90.0' cy='50.0' r='8.2'/%3E%3Ccircle cx='88.0' cy='62.4' r='8.2'/%3E%3Ccircle cx='82.4' cy='73.5' r='8.2'/%3E%3Ccircle cx='73.5' cy='82.4' r='8.2'/%3E%3Ccircle cx='62.4' cy='88.0' r='8.2'/%3E%3Ccircle cx='50.0' cy='90.0' r='8.2'/%3E%3Ccircle cx='37.6' cy='88.0' r='8.2'/%3E%3Ccircle cx='26.5' cy='82.4' r='8.2'/%3E%3Ccircle cx='17.6' cy='73.5' r='8.2'/%3E%3Ccircle cx='12.0' cy='62.4' r='8.2'/%3E%3Ccircle cx='10.0' cy='50.0' r='8.2'/%3E%3Ccircle cx='12.0' cy='37.6' r='8.2'/%3E%3Ccircle cx='17.6' cy='26.5' r='8.2'/%3E%3Ccircle cx='26.5' cy='17.6' r='8.2'/%3E%3Ccircle cx='37.6' cy='12.0' r='8.2'/%3E%3Ccircle cx='50.0' cy='10.0' r='8.2'/%3E%3Ccircle cx='62.4' cy='12.0' r='8.2'/%3E%3Ccircle cx='73.5' cy='17.6' r='8.2'/%3E%3Ccircle cx='82.4' cy='26.5' r='8.2'/%3E%3Ccircle cx='88.0' cy='37.6' r='8.2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='90.0' cy='50.0' r='8.2'/%3E%3Ccircle cx='88.0' cy='62.4' r='8.2'/%3E%3Ccircle cx='82.4' cy='73.5' r='8.2'/%3E%3Ccircle cx='73.5' cy='82.4' r='8.2'/%3E%3Ccircle cx='62.4' cy='88.0' r='8.2'/%3E%3Ccircle cx='50.0' cy='90.0' r='8.2'/%3E%3Ccircle cx='37.6' cy='88.0' r='8.2'/%3E%3Ccircle cx='26.5' cy='82.4' r='8.2'/%3E%3Ccircle cx='17.6' cy='73.5' r='8.2'/%3E%3Ccircle cx='12.0' cy='62.4' r='8.2'/%3E%3Ccircle cx='10.0' cy='50.0' r='8.2'/%3E%3Ccircle cx='12.0' cy='37.6' r='8.2'/%3E%3Ccircle cx='17.6' cy='26.5' r='8.2'/%3E%3Ccircle cx='26.5' cy='17.6' r='8.2'/%3E%3Ccircle cx='37.6' cy='12.0' r='8.2'/%3E%3Ccircle cx='50.0' cy='10.0' r='8.2'/%3E%3Ccircle cx='62.4' cy='12.0' r='8.2'/%3E%3Ccircle cx='73.5' cy='17.6' r='8.2'/%3E%3Ccircle cx='82.4' cy='26.5' r='8.2'/%3E%3Ccircle cx='88.0' cy='37.6' r='8.2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.fp-tag {
  right: -10%;
  bottom: 11%;
  width: max(30%, 88px);
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--strawberry);
  rotate: 8deg;
  transition: background-color 0.3s;
}
/* The tag takes the colour of the frosting picked. */
.fp-hero:has([value='beef']:checked) .fp-tag {
  background: var(--butter);
}
.fp-hero:has([value='salmon']:checked) .fp-tag {
  background: var(--mint);
}
.fp-tag b {
  font-family: var(--display);
  font-size: clamp(22px, 9cqi, 40px);
  line-height: 1.05;
}
.fp-tag span {
  font-size: clamp(12px, 3.2cqi, 15px);
  font-weight: 700;
}

/* The name goes in a pill right under the cake, the rest on one slip. */
.fp-slip {
  max-width: 1060px;
  margin: 0 auto;
}
.fp-namebox {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 470px);
  margin: -30px auto 0;
  padding: 6px 8px 6px 24px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}
.fp-namebox:has(:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.fp-namebox label {
  display: block;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
}
.fp-namebox input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-family:
    'Baloo 2', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-size: 30px;
  font-weight: 700;
}
.fp-namebox input:focus-visible {
  outline: none;
}
/* The sample name: lighter than a typed one, still 4.5:1. */
.fp-namebox input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.fp-hint {
  margin: 10px auto 0;
  font-size: 15px;
}
.fp-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  margin-top: 22px;
  border-radius: 28px;
  background: var(--paper);
  text-align: left;
}
.fp-field {
  min-width: 0;
  margin: 0;
  padding: 22px 26px 24px;
  border: 0;
}
.fp-field + .fp-field {
  border-left: 2px dashed var(--line);
}
/* Floated, the legend sits inside the field's padding like a label. */
.fp-field legend {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
}
.fp-chips {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-chips--weight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fp-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.fp-chips input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.fp-chips label:hover {
  background: var(--soft);
}
.fp-chips label:has(:checked) {
  background: var(--ink);
  color: var(--paper);
}
.fp-chips label:has(:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.fp-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--strawberry);
  box-shadow: 0 0 0 2px var(--paper);
}
[value='beef'] + .fp-swatch {
  background: var(--butter);
}
[value='salmon'] + .fp-swatch {
  background: var(--mint);
}
.fp-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.fp-total {
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 22px 26px 24px;
  border-radius: 0 28px 28px 0;
  background: var(--butter);
}
.fp-total dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.fp-total dl div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}
.fp-total dt {
  font-size: 14px;
  font-weight: 700;
}
.fp-total dd {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.fp-total .button {
  width: 100%;
}

/* Section titles are centred, like the cake. */
.fp-head {
  max-width: 38em;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.fp-head h2 {
  margin-bottom: 10px;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.02em;
}
/* Long titles break between phrases, not inside them. */
.fp-head h2 span {
  display: inline-block;
}
.fp-head p {
  margin: 0;
  color: var(--muted);
}
.fp-more {
  margin: clamp(28px, 4vw, 40px) 0 0;
  text-align: center;
}

/* The shelf: the row of things for the day, each on its category's pastel. */
.fp-shelf {
  padding-top: calc(var(--section-space) + var(--scallop));
}
.fp-shelf .carousel-track {
  padding-top: 6px;
}
.carousel-controls button {
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.carousel--over :is(.carousel-prev, .carousel-next) {
  border-color: var(--ink);
  box-shadow: none;
}
.carousel--over :is(.carousel-prev, .carousel-next):disabled {
  visibility: hidden;
}
.carousel-controls button:hover:not(:disabled) {
  background: var(--butter);
}

/* Product cards: a pastel card per category, the photo on the same pastel, a sticker on it. */
.product-card[data-category='cupcakes'] {
  --card-background: var(--cupcake-card);
}
.product-card[data-category='cookies'] {
  --card-background: var(--cookie-card);
}
.product-card[data-category='party'] {
  --card-background: var(--party-card);
}
.product-card .product-photo {
  overflow: visible;
  margin-bottom: 16px;
  background: none;
}
.product-photo img {
  border-radius: inherit;
}
.product-card:hover .product-photo img {
  transform: none;
}
.product-card > :not(.product-photo) {
  padding-inline: 10px;
}
.product-card h2,
.product-card h3 {
  font-size: 18px;
  font-weight: 800;
}
.product-en {
  font-size: 14px;
  font-weight: 700;
}
.product-card .product-meta {
  margin: 4px 0 10px;
  color: var(--muted);
}
.product-card .product-price {
  font-size: 22px;
}
.product-badge {
  top: -6px;
  left: -4px;
  max-width: calc(100% - 8px);
  padding: 4px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  rotate: -6deg;
}
[data-category='cupcakes'] .product-badge {
  rotate: 5deg;
}
[data-category='cookies'] .product-badge {
  rotate: -3deg;
}
[data-category='party'] .product-badge {
  rotate: 6deg;
}

/* How long it takes: three round badges on a butter panel, joined by beads. */
.fp-days {
  padding: 0 var(--gutter);
}
.fp-days-panel {
  --badge: 156px;
  position: relative;
  max-width: var(--width);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border-radius: 40px;
  background: var(--butter);
}
/* The panel's own seal: how long a frozen cake keeps. */
.fp-days-panel .fp-seal {
  top: -26px;
  right: clamp(12px, 6vw, 72px);
  left: auto;
  width: 116px;
  background: var(--lilac);
  font-size: 16px;
  rotate: 10deg;
}
.fp-days-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.fp-days-list::before {
  content: '';
  position: absolute;
  top: calc(var(--badge) / 2 - 4px);
  left: 17%;
  right: 17%;
  height: 8px;
  background: radial-gradient(circle, var(--ink) 3px, transparent 3.5px) 0 50% /
    16px 8px repeat-x;
}
.fp-badge {
  position: relative;
  display: grid;
  place-content: center;
  width: var(--badge);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.fp-badge b {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.15;
}
.fp-days-list li:nth-child(2) .fp-badge {
  background: var(--strawberry);
}
.fp-days-list li:nth-child(3) .fp-badge {
  background: var(--mint);
}
.fp-days-list p {
  max-width: 17em;
  margin: 0 auto;
}

/* The piping: the photo on one half, the colours of the frosting on mint. */
.fp-making {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--section-space);
  background: var(--mint);
}
.fp-making img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}
.fp-making-copy {
  align-self: center;
  max-width: 600px;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
}
.fp-making-copy h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: 0.02em;
}
.fp-frostings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}
.fp-frostings li {
  display: grid;
  justify-items: center;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.fp-frostings b {
  font-size: 16px;
}
.fp-dot {
  width: 64px;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--strawberry);
  box-shadow: 0 0 0 5px var(--paper);
}
.fp-frostings li:nth-child(2) .fp-dot {
  background: var(--butter);
}
.fp-frostings li:nth-child(3) .fp-dot {
  background: #a8dbc2;
}

/* Notes: news cards with a pastel tag, here and on the journal pages. */
.journal-card img {
  border-radius: var(--radius-large);
}
.journal-card .kicker,
.body-copy > .kicker {
  justify-self: start;
  width: fit-content;
  margin-bottom: 10px;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--strawberry);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.journal-card:nth-child(3n + 2) .kicker {
  background: var(--lilac);
}
.journal-card:nth-child(3n) .kicker {
  background: var(--mint);
}
.journal-card h2,
.journal-card h3 {
  font-weight: 800;
}

/* Shared pages: titles sit in the box and end in the scalloped edge. */
.page-hero,
.page-hero:has(+ .body-copy) {
  position: relative;
  max-width: none;
  padding: clamp(20px, 3vw, 40px)
    max(var(--gutter), calc((100% - var(--width)) / 2))
    clamp(36px, 5vw, 56px);
  background: var(--strawberry);
  text-align: center;
}
.page-hero h1 {
  max-width: 20em;
  margin-inline: auto;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.02em;
}
.page-hero p {
  margin-inline: auto;
  color: var(--ink);
}
.page-hero + .section,
.page-hero + .body-copy {
  padding-top: calc(40px + var(--scallop));
}
.page-hero .free-shipping {
  display: block;
  width: fit-content;
  padding: 4px 18px;
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
}

/* Shop: filters as pills in their category's pastel. */
.shop-toolbar {
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav a {
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
}
.filter-nav a[href*='category=cakes'] {
  background: var(--cake-card);
}
.filter-nav a[href*='category=cupcakes'] {
  background: var(--cupcake-card);
}
.filter-nav a[href*='category=cookies'] {
  background: var(--cookie-card);
}
.filter-nav a[href*='category=party'] {
  background: var(--party-card);
}
.filter-nav a:hover {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.filter-nav a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}
.search input {
  border: 2px solid var(--ink);
  border-right: 0;
}
.search button {
  border-width: 2px;
  font-weight: 700;
}

/* Product page: the photo round-cornered, the facts on a pink card. */
body[data-page='products'] .shop-section {
  padding-top: clamp(28px, 4vw, 48px);
}
.product-detail .product-photo {
  border-radius: var(--radius-large);
}
.product-info h1 {
  letter-spacing: 0.02em;
}
.product-info .product-price {
  font-size: 34px;
}
.product-details {
  padding: 4px 24px;
  border: 0;
  border-radius: var(--radius-large);
  background: var(--soft);
}
.product-details > div {
  border-bottom: 2px dashed rgb(74 42 39 / 0.16);
}
.product-details > div:last-child {
  border-bottom: 0;
}
.product-guide .text-link {
  font-size: 15px;
}

/* Cart: dashed lines like an order slip, the summary on a pink card. */
.cart-line {
  border-bottom: 2px dashed var(--line);
}
.cart-line:first-child {
  border-top: 2px dashed var(--line);
}
.cart-line img,
.cart-photo {
  border-radius: 18px;
}
.cart-price p {
  font-weight: 700;
}
.summary {
  border-radius: var(--radius-large);
  background: var(--soft);
}
.totals dd {
  font-weight: 700;
}
.totals .total {
  border-top: 2px dashed rgb(74 42 39 / 0.2);
}

/* About and the long pages. */
body[data-page='about'] .body-copy > img,
body[data-page='about'] .body-copy > .lx-picture > img {
  width: min(100%, 440px);
  margin: 0 auto 40px;
  border-radius: 50%;
}
.body-copy > img,
.body-copy > .lx-picture > img {
  border-radius: var(--radius-large);
}
/* An article opens on its photo at 3:2; the subject sits in the middle. */
body[data-page='journal'] .body-copy > img,
body[data-page='journal'] .body-copy > .lx-picture > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.values-grid > div {
  padding: 22px 22px 24px;
  border-radius: var(--radius-large);
  background: var(--cake-card);
}
.values-grid > div:nth-child(2) {
  background: var(--cupcake-card);
}
.values-grid > div:nth-child(3) {
  background: var(--cookie-card);
}
.values-grid p {
  color: var(--ink);
}
.faq {
  display: grid;
  gap: 10px;
  border-top: 0;
}
.faq details {
  padding: 0 22px;
  border: 0;
  border-radius: 24px;
  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;
}
/* A round plus that turns into a minus when the answer is open. */
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink) 0 0) 50% 50% / 12px 2px no-repeat,
    linear-gradient(var(--ink) 0 0) 50% 50% / 2px 12px no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--ink) 0 0) 50% 50% / 12px 2px no-repeat;
}
.steps li {
  grid-template-columns: 56px minmax(0, 1fr);
  border-top: 2px dashed var(--line);
}
.steps li::before {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--strawberry);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.empty {
  border: 2px dashed var(--line);
  border-radius: var(--radius-large);
}

/* Footer: the lid of the box. */
footer {
  --focus: var(--ink);
  --dark-muted: var(--muted);
  position: relative;
  background: var(--strawberry);
  color: var(--ink);
}
footer .wordmark > svg {
  color: var(--ink);
}
footer nav h2 {
  font-weight: 700;
}
.footer-bottom {
  border-top: 2px dashed rgb(74 42 39 / 0.22);
}
#notice {
  border-radius: 24px;
}

@media (max-width: 960px) {
  .fp-order {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fp-total {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-radius: 0 0 28px 28px;
  }
  .fp-total .button {
    width: auto;
  }
  .fp-making {
    grid-template-columns: minmax(0, 1fr);
  }
  .fp-making img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .fp-making-copy {
    max-width: 720px;
  }
  .fp-shelf .carousel-track.product-grid {
    --slide-width: calc((100% - 24px) / 2.3);
  }
}
@media (min-width: 761px) {
  .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .navigation a {
    padding: 10px 18px;
  }
}
@media (max-width: 760px) {
  :root {
    --scallop: 10px;
    --card-padding: 8px 8px 16px;
  }
  .fp-hero h1 {
    margin-bottom: 8px;
  }
  .fp-lead {
    font-size: 16px;
  }
  .fp-cake {
    --cake: min(320px, 72vw);
  }
  .fp-namebox {
    margin-top: -22px;
    padding-left: 18px;
  }
  .fp-namebox input {
    min-height: 48px;
    font-size: 26px;
  }
  .fp-hint {
    font-size: 14px;
  }
  .fp-order {
    grid-template-columns: minmax(0, 1fr);
  }
  .fp-field {
    padding: 20px 18px 22px;
  }
  .fp-field + .fp-field {
    border-top: 2px dashed var(--line);
    border-left: 0;
  }
  .fp-total {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 22px;
  }
  .fp-total .button {
    width: 100%;
  }
  .fp-shelf .carousel-track.product-grid {
    --slide-width: 72%;
    column-gap: 14px;
  }
  .carousel-controls button {
    width: 44px;
    height: 44px;
  }
  .product-card > :not(.product-photo) {
    padding-inline: 6px;
  }
  .product-card h2,
  .product-card h3 {
    font-size: 16px;
  }
  .product-card .product-price {
    font-size: 19px;
  }
  .product-badge {
    padding: 3px 10px;
    font-size: 12px;
  }
  .fp-days-panel {
    --badge: 104px;
    padding-top: 60px;
    border-radius: 32px;
  }
  .fp-days-panel .fp-seal {
    top: -34px;
    right: 10px;
    width: 88px;
    font-size: 13px;
  }
  .fp-days-list {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .fp-days-list::before {
    top: 12px;
    bottom: 12px;
    left: calc(var(--badge) / 2 - 4px);
    right: auto;
    width: 8px;
    height: auto;
    background: radial-gradient(circle, var(--ink) 3px, transparent 3.5px) 50%
      0 / 8px 16px repeat-y;
  }
  .fp-days-list li {
    display: grid;
    grid-template-columns: var(--badge) minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
  }
  .fp-badge {
    margin: 0;
    font-size: 15px;
  }
  .fp-badge b {
    font-size: 21px;
  }
  .fp-days-list p {
    margin: 0;
  }
  .fp-frostings {
    gap: 14px 20px;
  }
  .fp-dot {
    width: 54px;
  }
  /* On phones the notes read as a news list: a small photo beside the words. */
  .journal-grid {
    gap: 0;
  }
  .journal-card {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
    border-top: 2px dashed var(--line);
  }
  .journal-card:last-child {
    border-bottom: 2px dashed var(--line);
  }
  .journal-card img {
    grid-row: span 3;
    width: 96px;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 20px;
  }
  .journal-card .kicker {
    margin-bottom: 6px;
  }
  .journal-card h2,
  .journal-card h3 {
    font-size: 17px;
  }
  /* The footer's two link lists side by side. */
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
}
@media (max-width: 420px) {
  .wordmark-name b {
    font-size: 21px;
  }
}
/* The narrowest phones: the bag and account need more room than the menu
   icon, so the sides take what they need and the wordmark slims down. */
@media (max-width: 360px) {
  .header--center {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  .wordmark {
    gap: 6px;
  }
  .wordmark > svg {
    width: 26px;
    height: 26px;
  }
  .wordmark-name b {
    font-size: 19px;
  }
  .header-tools {
    gap: 8px;
  }
}