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

/*
 * REFILL 補給站: a big Taiwanese pet e-shop for homes with many cats, priced per
 * pet per day. A yellow offer bar over a white header; an edge-to-edge banner of
 * flat cobalt and yellow panels, each one number set huge in Rubik beside a
 * boxed vertical label and the packshot on a round plate; two rows of round
 * shortcuts with a paw on each; a row of service promises; every section a
 * rounded panel under a cobalt arc ribbon. Colour is a price code: yellow
 * carries unit prices and the 多久補一次 panel, cobalt what to press and every
 * price, tomato only a saving, pale blue the panels and the backdrop every
 * packshot is shot on. 20px panels and cards, pill buttons and chips. Rubik 800
 * (SIL OFL 1.1, notice in media-fonts.json) sets the wordmark and the numerals;
 * Chinese stays in the visitor's own sans-serif, as heavy as it goes.
 */
@font-face {
  font-family: 'Rubik';
  src: url('/fonts/rubik-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #0f2a6e;
  --muted: #45528a;
  /* The pale blue every packshot is shot on; panels use the same family. */
  --soft: #e6edff;
  --tint: #edf2ff;
  --line: #d3dcf3;
  --accent: #1b46c2;
  --accent-deep: #11328f;
  --accent-ink: #ffffff;
  --highlight: #ffd21f;
  --highlight-deep: #f0b400;
  --cream: #fff4c4;
  --focus: #1b46c2;
  --dark: #0f2a6e;
  --dark-ink: #ffffff;
  --dark-muted: #c9d3f4;
  --save: #d2351e;
  --display:
    'Rubik', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  /* Headings take Rubik for numerals and Latin, then the shared system stack. */
  --heading:
    'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 12px;
  --radius-large: 20px;
  --button-radius: 999px;
  --input-radius: 12px;
  --chip-radius: 999px;
  --badge-radius: 999px;
  --photo-radius: 14px;
  --photo-ratio: 1;
  --card-radius: 20px;
  --card-padding: 10px;
  --card-background: #ffffff;
  --card-border: none;
  --card-shadow: 0 1px 2px rgb(15 42 110 / 0.06);
  --columns: 4;
  --columns-tablet: 4;
  --columns-phone: 2;
  --grid-gap: 16px;
  --grid-gap-phone: 10px;
  --price-color: var(--accent);
  --price-weight: 800;
  --section-space: clamp(36px, 5vw, 64px);
  /* Paws and arrows drawn once, used by pseudo-elements across every page. */
  --paw-cobalt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b46c2'%3E%3Cpath d='M12 12.4c-2.9 0-5.7 3.3-5.7 5.8 0 1.5 1.1 2.6 2.6 2.6 1.3 0 2-.7 3.1-.7s1.8.7 3.1.7c1.5 0 2.6-1.1 2.6-2.6 0-2.5-2.8-5.8-5.7-5.8Z'/%3E%3Cellipse cx='5.4' cy='10.8' rx='2.1' ry='2.6'/%3E%3Cellipse cx='9.3' cy='6.3' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.7' cy='6.3' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.6' cy='10.8' rx='2.1' ry='2.6'/%3E%3C/svg%3E");
  --paw-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd21f'%3E%3Cpath d='M12 12.4c-2.9 0-5.7 3.3-5.7 5.8 0 1.5 1.1 2.6 2.6 2.6 1.3 0 2-.7 3.1-.7s1.8.7 3.1.7c1.5 0 2.6-1.1 2.6-2.6 0-2.5-2.8-5.8-5.7-5.8Z'/%3E%3Cellipse cx='5.4' cy='10.8' rx='2.1' ry='2.6'/%3E%3Cellipse cx='9.3' cy='6.3' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.7' cy='6.3' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.6' cy='10.8' rx='2.1' ry='2.6'/%3E%3C/svg%3E");
  --chevron-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E");
}
h1,
h2,
h3 {
  font-weight: 900;
}
/* A title's top margin stays inside main, so a panel never butts the header. */
main {
  display: flow-root;
}
/* Rubik has one weight: it is never faux-bolded. */
.product-badge,
.product-price,
.rf-deal-figure,
.rf-sticker,
.rf-days b {
  font-synthesis: none;
}
/* Short promotional copy breaks at spaces and punctuation, so NT$990 and 29 天 stay whole. */
.rf-slide-line,
.rf-slide-tag,
.rf-promises,
.rf-panel-lead,
.rf-offer-body > p,
.rf-heading p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rf-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Header: the offer on yellow, then a white bar with the wordmark, the shelves and the bag. */
.announcement {
  padding-block: 8px;
  background: var(--highlight);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.header {
  padding-block: 14px;
  column-gap: 28px;
}
.wordmark > svg {
  width: 42px;
  height: 42px;
  color: var(--highlight);
}
.mark-line {
  stroke: var(--ink);
}
.mark-eye {
  fill: var(--ink);
}
.wordmark-name b {
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.wordmark-name small {
  margin-top: 2px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.2em;
}
.navigation {
  gap: 4px 24px;
}
@media (min-width: 901px) {
  .navigation {
    align-items: center;
  }
}
.navigation a {
  padding: 4px 0;
  border-bottom: 3px solid transparent;
  font-size: 16px;
  font-weight: 800;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.navigation a:hover {
  border-bottom-color: var(--highlight);
  color: var(--accent);
}
/* The subscription is the one shelf with a deal on it, so it wears the price colour. */
.navigation .rf-nav-deal {
  padding: 5px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
}
.navigation .rf-nav-deal:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
.menu {
  border: 2px solid var(--ink);
  font-weight: 800;
}
.header-tools {
  gap: 20px;
}
.header-tools svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}
#bag-count {
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
}

/* Buttons: chunky cobalt pills that sit on a darker edge. */
.button {
  min-height: 50px;
  padding: 10px 30px;
  border-width: 2px;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--accent-deep);
  transition:
    background-color 0.15s,
    color 0.15s,
    transform 0.1s,
    box-shadow 0.1s;
}
.button:hover:not(:disabled) {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--accent-ink);
}
.button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--accent-deep);
}
.button.outline {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 4px 0 var(--line);
}
.button.outline:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.text-link {
  border-bottom-width: 2px;
  color: var(--accent);
  font-weight: 800;
}
.text-link:hover {
  color: var(--accent-deep);
}

/* Section titles: a cobalt arc ribbon whose rolled ends tuck over a rounded panel. */
/* Panels are positioned without a stacking context of their own, so a ribbon's rolled ends can slip behind them. */
.rf-panel,
.rf-deals {
  position: relative;
  display: flow-root;
  width: min(var(--width), 100% - 2 * var(--gutter));
  margin: calc(var(--section-space) + 18px) auto 0;
  padding: 0 clamp(12px, 2.6vw, 36px) clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: var(--tint);
}
.rf-ribbon,
.page-hero h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: -18px auto 0;
  padding: 15px clamp(30px, 4vw, 56px) 26px;
  border-radius: 0 0 50% 50% / 0 0 46% 46%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: center;
}
.rf-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  word-break: keep-all;
}
.rf-ribbon::before,
.page-hero h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: -18px;
  right: -18px;
  height: 30px;
  border-radius: 16px 16px 0 0;
  background: var(--accent-deep);
}
.rf-paw {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  fill: var(--highlight);
}
.rf-panel-lead {
  max-width: 40em;
  margin: 18px auto 22px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.rf-more {
  margin: 28px 0 0;
  text-align: center;
}
.rf-heading {
  margin-bottom: 26px;
  text-align: center;
}
.rf-heading h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0;
  font-size: clamp(25px, 2.7vw, 32px);
  letter-spacing: 0.06em;
}
.rf-heading .rf-paw {
  fill: var(--accent);
}
.rf-heading p {
  max-width: 34em;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 15px;
}

/* Banners: edge to edge, one number per slide, the packshot on a round plate. */
.rf-slide {
  --panel: var(--accent);
  --panel-ink: #ffffff;
  --figure: var(--highlight);
  --lead-bg: #ffffff;
  --lead-ink: var(--accent);
  --tag-bg: var(--highlight);
  --tag-ink: var(--ink);
  --pill-bg: var(--highlight);
  --pill-ink: var(--ink);
  --pill-edge: #b88a00;
  --sticker-bg: var(--highlight);
  --sticker-ink: var(--ink);
  --dots: #3c66da;
  --halo: #2853cc;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas:
    '. art'
    'tag art'
    'deal art'
    'line art'
    'pill art'
    '. art';
  column-gap: clamp(24px, 5vw, 72px);
  min-height: clamp(380px, 34vw, 470px);
  padding: clamp(28px, 3vw, 40px) max(var(--gutter), (100% - var(--width)) / 2);
  background: var(--panel);
  color: var(--panel-ink);
}
.rf-slide--yellow {
  --panel: var(--highlight);
  --panel-ink: var(--ink);
  --figure: var(--accent);
  --lead-bg: var(--accent);
  --lead-ink: #ffffff;
  --tag-bg: var(--accent);
  --tag-ink: #ffffff;
  --pill-bg: var(--accent);
  --pill-ink: #ffffff;
  --pill-edge: var(--accent-deep);
  --sticker-bg: var(--accent);
  --sticker-ink: #ffffff;
  --dots: var(--highlight-deep);
  --halo: #ffe15e;
  --focus: var(--ink);
}
.rf-slide--cobalt {
  --focus: #ffffff;
}
/* Halftone dots fade in from two corners, the way printed promo banners do. */
.rf-slide::before,
.rf-slide::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 44%;
  height: 72%;
  background: radial-gradient(circle, var(--dots) 2.4px, transparent 3px) 0 0 /
    16px 16px;
}
.rf-slide::before {
  top: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(
    farthest-side at 100% 0,
    #000 20%,
    transparent
  );
  mask-image: radial-gradient(farthest-side at 100% 0, #000 20%, transparent);
}
.rf-slide::after {
  bottom: 0;
  left: 0;
  width: 30%;
  height: 50%;
  -webkit-mask-image: radial-gradient(
    farthest-side at 0 100%,
    #000 10%,
    transparent
  );
  mask-image: radial-gradient(farthest-side at 0 100%, #000 10%, transparent);
}
.rf-slide:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -10px;
}
.rf-slide-tag {
  grid-area: tag;
  justify-self: start;
  padding: 5px 16px 4px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 15px;
  font-weight: 800;
}
.rf-deal {
  grid-area: deal;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 14px 0 12px;
}
/* The label stands upright in a box beside the number, like a menu price card. */
.rf-deal-lead {
  writing-mode: vertical-rl;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--lead-bg);
  color: var(--lead-ink);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.14em;
}
.rf-deal-figure {
  display: flex;
  align-items: baseline;
  color: var(--figure);
  font-family: var(--display);
  font-size: clamp(84px, 11vw, 156px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rf-deal-figure small {
  font-size: 0.3em;
  letter-spacing: 0;
}
.rf-deal-figure small:first-child {
  align-self: flex-start;
  margin: 0.12em 0.06em 0 0;
}
.rf-deal-figure small:last-child:not(:first-child) {
  margin-left: 0.08em;
  font-size: 0.36em;
  font-weight: 900;
}
.rf-slide-line {
  grid-area: line;
  max-width: 28em;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.6;
}
.rf-pill {
  grid-area: pill;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  margin-top: 20px;
  padding: 9px 30px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--pill-edge);
  transition: transform 0.15s;
}
.rf-slide:hover .rf-pill {
  transform: translateY(-2px);
}
.rf-slide-art {
  grid-area: art;
  align-self: center;
  position: relative;
  width: clamp(240px, 28vw, 360px);
  aspect-ratio: 1;
}
/* A flat halo behind the plate, a shade off the panel. */
.rf-slide-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -7%;
  border-radius: 50%;
  background: var(--halo);
}
.rf-slide-art img,
.rf-offer-art img {
  width: 100%;
  height: 100%;
  border: 10px solid #ffffff;
  border-radius: 50%;
  object-fit: cover;
  background: var(--soft);
  box-shadow: 0 10px 0 rgb(15 42 110 / 0.16);
}
/* A starburst price sticker slapped on the plate: yellow a unit price, tomato a saving. */
.rf-sticker {
  position: absolute;
  top: -2%;
  left: -8%;
  display: grid;
  place-content: center;
  width: 36%;
  aspect-ratio: 1;
  background: var(--sticker-bg);
  color: var(--sticker-ink);
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 23px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  clip-path: polygon(
    50% 0%,
    57.6% 7.2%,
    67.1% 3%,
    71.8% 12.3%,
    82.1% 11.7%,
    83.3% 22%,
    93.3% 25%,
    90.9% 35.1%,
    99.2% 41.3%,
    93.5% 50%,
    99.2% 58.7%,
    90.9% 64.9%,
    93.3% 75%,
    83.3% 78%,
    82.1% 88.3%,
    71.8% 87.7%,
    67.1% 97%,
    57.6% 92.8%,
    50% 100%,
    42.4% 92.8%,
    32.9% 97%,
    28.2% 87.7%,
    17.9% 88.3%,
    16.7% 78%,
    6.7% 75%,
    9.1% 64.9%,
    0.8% 58.7%,
    6.5% 50%,
    0.8% 41.3%,
    9.1% 35.1%,
    6.7% 25%,
    16.7% 22%,
    17.9% 11.7%,
    28.3% 12.3%,
    32.9% 3%,
    42.4% 7.2%
  );
  rotate: -12deg;
}
.rf-sticker small {
  font-size: 0.66em;
  font-weight: 900;
}
.rf-sticker--save {
  --sticker-bg: var(--save);
  --sticker-ink: #ffffff;
}
/* Under the banner, one row: arrows either side of the dots, then the pause button.
   Nothing sits on the slide, so the copy keeps the page's left edge. */
.rf-banner .carousel-controls {
  margin-top: 12px;
  gap: 6px;
}
.rf-banner .carousel-controls > button {
  min-width: 38px;
  width: 38px;
  height: 38px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
}
.rf-banner .carousel-controls > button:hover {
  border-color: var(--accent);
}
.rf-banner .carousel-controls svg {
  width: 16px;
  height: 16px;
}
.rf-banner .carousel-pause {
  margin-left: 6px;
}
.rf-banner .carousel-pause svg {
  width: 13px;
  height: 13px;
}
.carousel-dots button::before {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.carousel-dots button[aria-current='true']::before {
  width: 26px;
  background: var(--accent);
}

/* Two rows of round shortcuts: a stitched ring, a pale disc, a paw that says “tap”. */
.rf-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 16px;
  width: min(940px, 100% - 2 * var(--gutter));
  margin: clamp(30px, 4vw, 48px) auto 0;
}
.rf-icons a {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.rf-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(68px, 10vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--soft);
  transition: background-color 0.15s;
}
.rf-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
}
.rf-icon::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -4%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--highlight) var(--paw-cobalt) center / 58% no-repeat;
  box-shadow: 0 0 0 3px var(--paper);
  transition: transform 0.2s;
}
.rf-icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-icons a:hover .rf-icon {
  background: color-mix(in srgb, var(--accent) 16%, var(--soft));
}
.rf-icons a:hover .rf-icon::after {
  transform: translate(3px, -4px) rotate(-14deg);
}
.rf-icons a:hover {
  color: var(--accent);
}
.rf-icon-deal .rf-icon {
  background: var(--accent);
}
.rf-icon-deal .rf-icon svg {
  stroke: var(--highlight);
}
.rf-icons .rf-icon-deal:hover .rf-icon {
  background: var(--accent-deep);
}
.rf-flag {
  position: absolute;
  top: -10%;
  left: -14%;
  padding: 2px 9px 1px;
  border-radius: 999px;
  background: var(--save);
  color: #ffffff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--paper);
  rotate: -10deg;
}

/* What every order gets, in one row split by yellow rules. */
.rf-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(var(--width), 100% - 2 * var(--gutter));
  margin: clamp(34px, 4.5vw, 52px) auto 0;
  padding: 0;
  list-style: none;
}
.rf-promises li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 14px;
}
.rf-promises li + li {
  border-left: 2px solid var(--highlight);
}
.rf-promises svg {
  flex: none;
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-promises b {
  display: block;
  font-family: var(--heading);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}
.rf-promises small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* A dotted line with a paw in the middle closes the shop's front. */
.rf-divider {
  position: relative;
  width: min(var(--width), 100% - 2 * var(--gutter));
  height: 30px;
  margin: clamp(26px, 3.5vw, 40px) auto 0;
  background: radial-gradient(
      circle,
      var(--highlight-deep) 1.9px,
      transparent 2.5px
    )
    center / 14px 14px repeat-x;
}
.rf-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 54px;
  height: 30px;
  background: var(--paper) var(--paw-cobalt) center / 24px no-repeat;
  translate: -50% 0;
}

/* Product cards: white, rounded, on the pale blue panel; the unit price on a yellow pill. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgb(15 42 110 / 0.14);
}
.product-card:hover h2,
.product-card:hover h3 {
  color: var(--accent);
  text-decoration: none;
}
.product-photo {
  margin-bottom: 12px;
}
.product-badge {
  top: 8px;
  left: 8px;
  padding: 3px 12px 2px;
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  box-shadow: 0 2px 0 rgb(15 42 110 / 0.2);
}
.product-card[href$='/monthly-set'] .product-badge {
  background: var(--save);
  color: #ffffff;
}
/* The English name stays on the product page; cards keep to what people compare. */
.product-card .product-en {
  display: none;
}
.product-card h2,
.product-card h3 {
  padding: 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}
/* Names break only at their spaces: 原味豆腐砂 / 7L × 6 包. */
.product-card h2,
.product-card h3 {
  word-break: keep-all;
}
/* tags[1]: how long a pack lasts, in a pale pill under the name. */
.product-card .product-meta {
  align-self: flex-start;
  margin: 7px 4px 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}
.product-card .product-price {
  margin-top: auto;
  padding: 12px 48px 4px 4px;
  font-size: 25px;
  line-height: 1.15;
}
/* The whole card is the link; the round arrow only shows that it goes somewhere. */
.product-card::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent) var(--chevron-white) center / 18px no-repeat;
  transition: background-color 0.15s;
}
.product-card:hover::after {
  background-color: var(--accent-deep);
}

/* 多久補一次: the yellow panel, chunky numerals in, a white answer card out. */
.rf-panel--yellow {
  --focus: var(--ink);
  background: var(--highlight);
}
.rf-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas:
    'lead lead'
    'inputs answer'
    'notes answer';
  grid-template-rows: auto auto 1fr;
  gap: 22px clamp(24px, 4.5vw, 64px);
  align-items: start;
}
.rf-calc-lead {
  grid-area: lead;
  margin-bottom: 4px;
  color: var(--ink);
}
.rf-calc-inputs {
  grid-area: inputs;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 24px 36px;
}
.rf-count {
  display: grid;
  align-content: start;
  gap: 10px;
}
.rf-count > label,
.rf-scoop legend {
  font-size: 17px;
  font-weight: 900;
}
.rf-hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.rf-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-stepper button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 var(--accent-deep);
  transition: background-color 0.15s;
}
.rf-stepper button:hover:not(:disabled, [aria-disabled='true']) {
  background: var(--accent-deep);
}
.rf-stepper button[aria-disabled='true'] {
  opacity: 0.35;
  cursor: not-allowed;
}
.rf-stepper svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.rf-stepper input {
  width: 92px;
  min-height: 72px;
  padding: 0 4px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  box-shadow: 0 4px 0 var(--ink);
}
.rf-stepper input:hover {
  border-color: var(--ink);
}
.rf-stepper input::-webkit-inner-spin-button,
.rf-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.rf-scoop {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rf-scoop legend {
  margin-bottom: 10px;
  padding: 0;
}
.rf-scoop-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf-scoop label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.rf-scoop input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.rf-scoop label:has(:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.rf-scoop label:has(:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.rf-answer {
  grid-area: answer;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 6px 0 rgb(15 42 110 / 0.18);
}
.rf-answer-days {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 900;
}
.rf-days {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-size: 32px;
}
.rf-days b {
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(108px, 12vw, 168px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rf-answer-list {
  margin: 0 0 22px;
  border-top: 3px solid var(--ink);
}
.rf-answer-list div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 13px 0;
  border-bottom: 2px dashed var(--line);
}
.rf-answer-list dt {
  font-weight: 800;
}
.rf-answer-list dd {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  text-align: right;
}
/* The same two tags as the products: yellow a unit price, tomato a saving. */
.unit,
.saving {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
}
.unit {
  background: var(--highlight);
  color: var(--ink);
}
.saving {
  background: var(--save);
  color: #ffffff;
}
.rf-answer .button {
  width: 100%;
}
.rf-calc-notes {
  grid-area: notes;
  font-size: 14px;
}
.rf-calc-notes p {
  margin: 0 0 4px;
  font-weight: 900;
}
.rf-calc-notes ul {
  margin: 0;
  padding-left: 1.1em;
}
.rf-calc-notes li + li {
  margin-top: 4px;
}

/* A month's worth, two ways: a framed promo with the set on the left, the 中途 quote on the right. */
.rf-deals {
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 8px 0 var(--accent);
}
.rf-deals-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.rf-offer {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
}
.rf-offer--set {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  background: var(--cream);
}
/* The quote card: the head count in a round badge beside who it is for, the ask below. */
.rf-offer--group {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'count who'
    'count title'
    'text text'
    'list list'
    'cta cta';
  column-gap: 20px;
  row-gap: 0;
  align-items: center;
  background: var(--tint);
}
.rf-offer--group .rf-offer-body {
  display: contents;
}
.rf-offer--group .rf-offer-who {
  grid-area: who;
  justify-self: start;
  align-self: end;
}
.rf-offer--group h3 {
  grid-area: title;
  align-self: start;
  margin: 4px 0 0;
}
.rf-offer--group .rf-offer-body > p:not(.rf-offer-who) {
  grid-area: text;
  margin-top: 18px;
}
.rf-offer--group .button {
  grid-area: cta;
  justify-self: start;
  margin-top: 22px;
}
/* What to tell us, in the order people work it out. */
.rf-ask {
  grid-area: list;
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
}
.rf-ask li {
  word-break: keep-all;
  overflow-wrap: anywhere;
  counter-increment: ask;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.rf-ask li::before {
  content: counter(ask);
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
}
.rf-offer-art {
  position: relative;
  align-self: center;
  aspect-ratio: 1;
}
.rf-offer-art .rf-sticker {
  top: -6%;
  left: -6%;
  width: 42%;
  font-size: clamp(14px, 1.4vw, 18px);
}
.rf-offer-who {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}
.rf-offer h3 {
  margin-bottom: 8px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35;
}
.rf-offer-body > p:not(.rf-offer-who) {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
}
.rf-receipt {
  margin: 16px 0 22px;
  padding: 4px 16px 6px;
  border-radius: 14px;
  background: var(--paper);
}
.rf-receipt table {
  width: 100%;
  border-collapse: collapse;
}
.rf-receipt th,
.rf-receipt td {
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.rf-receipt tr:first-child :is(th, td) {
  border-top: 0;
}
.rf-receipt th {
  font-weight: 600;
  text-align: left;
}
.rf-receipt td {
  padding-left: 12px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rf-receipt-sum th {
  color: var(--muted);
}
.rf-receipt-total :is(th, td) {
  border-top: 2px solid var(--ink);
}
.rf-receipt-total th {
  font-size: 16px;
  font-weight: 900;
}
.rf-receipt-total td {
  color: var(--accent);
  font-size: 24px;
}
.rf-offer-count {
  grid-area: count;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(112px, 11vw, 140px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 6px 0 rgb(15 42 110 / 0.14);
}
.rf-offer-count b {
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 92px);
  font-weight: 800;
  line-height: 0.9;
}
.rf-offer-count span {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

/* Notes: pale cards with a yellow tag (the journal page too). */
.rf-journal {
  padding-top: calc(var(--section-space) + 12px);
}
.journal-grid {
  gap: 18px;
}
.journal-card {
  padding: 12px 12px 20px;
  border-radius: 20px;
  background: var(--tint);
  transition: transform 0.15s;
}
.journal-card:hover {
  transform: translateY(-3px);
}
.journal-card img {
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--soft);
}
.journal-card .kicker,
.body-copy > .kicker {
  justify-self: start;
  width: fit-content;
  margin: 0 4px 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.body-copy > .kicker {
  margin: 0 0 12px;
}
.journal-card h2,
.journal-card h3,
.journal-card p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.journal-card h2,
.journal-card h3 {
  padding: 0 4px;
  font-size: 18px;
  line-height: 1.45;
}
.journal-card:hover h2,
.journal-card:hover h3 {
  color: var(--accent);
  text-decoration: none;
}
.journal-card p:last-child {
  padding: 0 4px;
}
/* An intro breaks at its punctuation, never inside a word. */
.page-hero p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Shared pages: the title is the same arc ribbon, on a pale panel that holds the intro. */
.page-hero,
.page-hero:has(+ .body-copy) {
  position: relative;
  display: flow-root;
  width: min(var(--width), 100% - 2 * var(--gutter));
  max-width: none;
  margin: calc(clamp(20px, 3vw, 32px) + 18px) auto 0;
  padding: 0 clamp(16px, 4vw, 48px) clamp(24px, 3vw, 34px);
  border-radius: 24px;
  background: var(--tint);
  text-align: center;
}
.page-hero:has(+ .body-copy) {
  width: min(816px, 100% - 2 * var(--gutter));
}
.page-hero h1,
.page-hero:has(+ .body-copy) h1 {
  max-width: 100%;
  margin-bottom: 0;
  padding-inline: clamp(52px, 5vw, 64px);
  background:
    var(--paw-yellow) left clamp(18px, 2vw, 24px) top
      calc(15px + 0.65em - 10px) / 20px no-repeat,
    var(--paw-yellow) right clamp(18px, 2vw, 24px) top
      calc(15px + 0.65em - 10px) / 20px no-repeat,
    var(--accent);
  font-size: clamp(21px, 2.4vw, 29px);
}
.page-hero h1 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.page-hero p {
  max-width: 36em;
  margin: 16px auto 0;
  color: var(--muted);
  font-weight: 600;
}
.page-hero .free-shipping {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
  font-weight: 800;
}
/* An article keeps its long title plain: a ribbon is for short shelf names. */
.page-hero:has(+ article.body-copy) {
  padding-top: clamp(24px, 3vw, 34px);
}
.page-hero:has(+ article.body-copy) h1 {
  width: auto;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: 0.02em;
}
.page-hero:has(+ article.body-copy) h1::before {
  content: none;
}
.page-hero + .section {
  padding-top: 32px;
}

/* Shop: the title panel runs on into the grid, so the cards sit on pale blue. */
main:has(.shop-toolbar) .page-hero {
  margin-bottom: 0;
  padding-bottom: 8px;
  border-radius: 24px 24px 0 0;
}
.shop-section:has(.shop-toolbar) {
  width: min(var(--width), 100% - 2 * var(--gutter));
  margin: 0 auto var(--section-space);
  padding: 22px clamp(12px, 2.6vw, 36px) clamp(26px, 3vw, 40px);
  border-radius: 0 0 24px 24px;
  background: var(--tint);
}
.shop-toolbar {
  margin-bottom: 22px;
  padding-bottom: 0;
  border-bottom: 0;
}
.filter-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 20px;
  border: 2px solid var(--paper);
  background: var(--paper);
  font-weight: 800;
}
.filter-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-nav a[aria-current='page'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.search input {
  min-height: 46px;
  padding: 8px 20px;
  border: 2px solid var(--accent);
  border-right: 0;
  border-radius: 999px 0 0 999px;
}
.search input:hover {
  border-color: var(--accent);
}
.search button {
  padding: 8px 22px 8px 18px;
  border-width: 2px;
  border-radius: 0 999px 999px 0;
  font-weight: 800;
}
.search button:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--accent-ink);
}
.pagination {
  margin-top: 32px;
  font-weight: 700;
}

/* Product page: the packshot on its pale plate, a loud cobalt price, the unit price boxed in yellow. */
.breadcrumb ol {
  margin-bottom: 22px;
}
.product-detail .product-photo {
  border-radius: 24px;
}
.product-info h1 {
  margin-bottom: 4px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.35;
}
.product-info .product-en {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
}
.product-info .product-price {
  margin: 16px 0 14px;
  font-size: clamp(36px, 4vw, 46px);
  line-height: 1;
}
.shop-section:has(.product-detail) {
  padding-top: 28px;
}
@media (min-width: 961px) {
  /* The packshot stays in view while the specs scroll past. */
  .product-detail > .product-photo {
    position: sticky;
    top: 24px;
  }
}
#add-product {
  gap: 14px;
  margin-top: 24px;
}
#add-product .button {
  min-height: 56px;
  font-size: 17px;
}
.product-guide .text-link::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -3px;
  background: var(--paw-cobalt) center / contain no-repeat;
}
.product-details {
  border-top: 0;
}
/* The first spec is the unit price: boxed in yellow, the way shops tag a deal. */
.product-details > div:first-child {
  margin-bottom: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--highlight);
}
.product-details > div:first-child :is(dt, dd) {
  color: var(--ink);
  font-weight: 800;
}

/* Cart, summary and long pages. */
.cart-line img,
.cart-photo {
  border-radius: 14px;
}
.cart-price p {
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}
.summary,
.empty {
  border: 0;
  border-radius: 24px;
  background: var(--tint);
}
.summary .button {
  width: 100%;
}
.totals dd {
  font-weight: 800;
}
.totals .total {
  border-top: 2px solid var(--ink);
}
.totals .total dd {
  color: var(--accent);
  font-size: 24px;
}
.demo-result {
  border-radius: 16px;
}
.body-copy > img,
.body-copy > .lx-picture > img {
  border-radius: 24px;
  background: var(--soft);
}
.body-copy > h2 {
  font-size: clamp(23px, 2.4vw, 28px);
}
/* A square packshot sits whole in a wider frame; its pale blue backdrop runs on into the frame. */
article.body-copy > img[width='560'],
article.body-copy > .lx-picture > img[width='560'],
.journal-card img[width='560'] {
  object-fit: contain;
  background: var(--soft);
}
article.body-copy > img[width='560'],
article.body-copy > .lx-picture > img[width='560'] {
  aspect-ratio: 4 / 3;
}
.body-copy .button + .text-link {
  margin-left: 18px;
}
.values-grid {
  gap: 14px;
}
.values-grid > div {
  position: relative;
  padding: 58px 18px 20px;
  border-radius: 20px;
  background: var(--tint);
}
.values-grid > div::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--highlight) var(--paw-cobalt) center / 18px no-repeat;
}
.values-grid p {
  color: var(--muted);
}
.faq {
  display: grid;
  gap: 10px;
  border-top: 0;
}
.faq details {
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--tint);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  font-weight: 800;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(#ffffff, #ffffff) center / 12px 2.5px no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 2.5px 12px no-repeat,
    var(--accent);
}
.faq details[open] summary::after {
  background:
    linear-gradient(#ffffff, #ffffff) center / 12px 2.5px no-repeat,
    var(--accent);
}
.steps li::before {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

/* Footer: deep cobalt under a yellow edge. */
footer {
  border-top: 8px solid var(--highlight);
}
footer .wordmark-name b {
  color: var(--dark-ink);
}
footer .wordmark-name small {
  color: var(--dark-muted);
}
footer nav h2 {
  color: var(--highlight);
  font-size: 15px;
  font-weight: 800;
}
footer nav a {
  font-weight: 600;
}
.footer-brand p {
  margin-top: 14px;
  font-weight: 700;
}
#notice {
  border-radius: 999px;
}

@media (max-width: 960px) and (min-width: 761px) {
  .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  /* Four cards a row on tablets, two on phones: the price gets the full width, the badge one line. */
  :root {
    --card-padding: 8px;
  }
  .product-card::after {
    display: none;
  }
  .product-card .product-price {
    padding-right: 4px;
    font-size: 21px;
  }
  .product-badge {
    top: 6px;
    left: 6px;
    padding: 2px 9px 1px;
    font-size: 13px;
    white-space: nowrap;
  }
  .product-card h2,
  .product-card h3 {
    font-size: 15px;
  }
  .product-card .product-meta {
    padding: 1px 8px;
    font-size: 12px;
  }
  .rf-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rf-promises li {
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--tint);
  }
  .rf-promises li + li {
    border-left: 0;
  }
  .rf-calc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: 'lead' 'inputs' 'answer' 'notes';
  }
  .rf-deals-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .navigation {
    align-items: stretch;
  }
  .navigation a {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
  }
  .navigation .rf-nav-deal {
    align-self: flex-start;
    margin-top: 10px;
    padding: 6px 18px;
  }
}
@media (max-width: 760px) {
  .rf-promises li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px 14px;
  }
  .rf-promises svg {
    width: 30px;
    height: 30px;
  }
  .rf-promises b {
    font-size: 15px;
  }
  .rf-promises small {
    font-size: 12px;
  }
  /* Notes become a list: a square thumbnail beside the title, the way news lists read on phones. */
  .journal-card {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    padding: 10px 14px 12px 10px;
  }
  .journal-card img {
    grid-row: 1 / span 3;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 12px;
  }
  .journal-card .kicker {
    margin: 2px 0 6px;
  }
  .journal-card h2,
  .journal-card h3 {
    margin-bottom: 4px;
    padding: 0;
    font-size: 16px;
  }
  .journal-card p:last-child {
    padding: 0;
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .rf-slide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      'tag tag'
      'deal deal'
      'line line'
      'pill art';
    column-gap: 12px;
    min-height: 0;
    padding: 22px var(--gutter) 24px;
  }
  .rf-slide-tag {
    font-size: 14px;
  }
  .rf-deal {
    margin: 12px 0 10px;
  }
  .rf-deal-lead {
    font-size: 17px;
  }
  .rf-deal-figure {
    font-size: clamp(70px, 22vw, 96px);
  }
  .rf-slide-line {
    font-size: 15px;
  }
  .rf-pill {
    align-self: end;
    min-height: 46px;
    margin: 0 0 6px;
    padding: 8px 20px;
    font-size: 15px;
  }
  .rf-slide-art {
    align-self: end;
    width: clamp(116px, 36vw, 150px);
    margin-top: 12px;
  }
  .rf-slide-art img {
    border-width: 6px;
    box-shadow: 0 6px 0 rgb(15 42 110 / 0.16);
  }
  .rf-sticker {
    top: -12%;
    left: -22%;
    width: 50%;
    font-size: 13px;
  }
  .shop-section:has(.shop-toolbar) {
    padding-inline: 10px;
  }
  .rf-ribbon::before,
  .page-hero h1::before {
    left: -13px;
    right: -13px;
  }
  .rf-icons {
    gap: 22px 4px;
  }
  .rf-icons a {
    gap: 10px;
    font-size: 14px;
  }
  .rf-icon::before {
    inset: -5px;
  }
  .rf-flag {
    font-size: 12px;
    padding: 1px 7px 0;
  }
  .rf-panel-lead {
    font-size: 14px;
  }
  .rf-calc-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }
  .rf-stepper {
    gap: 5px;
  }
  .rf-stepper button {
    width: 40px;
    height: 40px;
  }
  .rf-stepper svg {
    width: 18px;
    height: 18px;
  }
  .rf-stepper input {
    width: 66px;
    min-height: 60px;
    font-size: 34px;
  }
  .rf-scoop label {
    padding: 8px 16px;
    font-size: 15px;
  }
  .rf-answer-list dd {
    font-size: 18px;
  }
  .rf-offer--set {
    grid-template-columns: minmax(0, 1fr);
  }
  .rf-offer--group {
    column-gap: 14px;
  }
  .rf-offer-art {
    justify-self: center;
    width: min(220px, 70%);
  }
  .rf-offer-count {
    width: 100px;
  }
  .rf-offer-count b {
    font-size: 60px;
  }
  .rf-offer-count span {
    font-size: 15px;
  }
  .rf-receipt {
    padding-inline: 12px;
  }
  .rf-receipt th {
    font-size: 13px;
  }
  .page-hero h1,
  .page-hero:has(+ .body-copy) h1 {
    padding-inline: 46px;
    background-size: 17px, 17px, auto;
    background-position:
      left 16px top calc(15px + 0.65em - 8.5px),
      right 16px top calc(15px + 0.65em - 8.5px),
      0 0;
    font-size: 20px;
    letter-spacing: 0.04em;
  }
  .page-hero:has(+ article.body-copy) h1 {
    font-size: 24px;
  }
}
@media (max-width: 400px) {
  .rf-stepper input {
    width: 58px;
  }
}
@media (max-width: 420px) {
  .wordmark > svg {
    width: 34px;
    height: 34px;
  }
  .wordmark-name b {
    font-size: 23px;
  }
  .wordmark-name small {
    letter-spacing: 0.1em;
  }
  .header-tools {
    gap: 12px;
  }
  .rf-ribbon {
    padding-inline: 24px;
    font-size: 20px;
    letter-spacing: 0.04em;
  }
}