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

/*
 * INCI: five short formulas with every ingredient and its share laid open,
 * set out like a calm ingredient-led skincare house. The home page opens on
 * the serum's whole INCI list in large type, the bottle on a sage slab beside
 * it; every product stands on its own solid slab (sage, stone, clay, mist).
 * Square corners, thin outline buttons, hairline rules and no shadows; small
 * sans text and a lot of air. One deep sage-green marks the places a reader
 * measures: the 1% line and the amounts drawn in the routine. Instrument Sans
 * (SIL OFL 1.1, notice in media-fonts.json) sets INCI names, numbers and
 * prices in tabular figures; Chinese stays in the visitor's own sans-serif.
 */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #fbfbf9;
  --ink: #1f2925;
  --muted: #58625d;
  --soft: #eef0ec;
  --line: #dadfda;
  --accent: #1f2925;
  --accent-ink: #fbfbf9;
  --highlight: #c4cdbd;
  --focus: #1f2925;
  --dark: #1f2925;
  --dark-ink: #eef1ed;
  --dark-muted: #a7b2ab;
  /* The four slabs the bottles are shot on, and the measuring green. */
  --sage: #c4cdbd;
  --stone: #d9d4ca;
  --clay: #dcc5b3;
  --mist: #cbd6da;
  --rule: #4a6b5a;
  --display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius: 0;
  --radius-large: 0;
  --button-radius: 0;
  --input-radius: 0;
  --chip-radius: 0;
  --badge-radius: 0;
  --photo-radius: 0;
  --card-radius: 0;
  --photo-ratio: 4 / 5;
  --columns: 3;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 64px 24px;
  --grid-gap-phone: 40px 12px;
  --section-space: clamp(64px, 9vw, 120px);
  /* Where the page's text column starts on a section that runs edge to edge. */
  --edge: max(var(--gutter), calc((100% - var(--width)) / 2));
}
body {
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
h1,
h2 {
  font-weight: 500;
  letter-spacing: 0.06em;
}
h2 {
  font-size: clamp(21px, 2vw, 26px);
}
h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
/* Headings break between phrases, not inside 毫升 or a product name. */
h1,
h2,
h3,
h4 {
  word-break: keep-all;
}

/* Header: a thin ink bar, then the wordmark centred over one row of links. */
.announcement {
  padding: 7px var(--gutter);
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 12px;
  letter-spacing: 0.14em;
}
/* A hairline under the header, from edge to edge. */
main {
  border-top: 1px solid var(--line);
}
.wordmark {
  gap: 10px;
}
.wordmark > svg {
  width: 26px;
  height: 26px;
  color: var(--ink);
}
.wordmark-name b {
  margin-right: -0.3em;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.3em;
}
.wordmark-name small {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.46em;
}
.navigation {
  font-size: 13px;
  letter-spacing: 0.14em;
}
.header-tools svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.3;
}
#bag-count {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  color: inherit;
  font-family: var(--display);
  font-size: 13px;
}
.menu {
  gap: 8px;
  padding: 6px 0;
  border: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* Buttons are thin outlines that fill on hover; links are underlined words. */
.button {
  min-height: 46px;
  padding: 10px 30px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
/* Putting something in the bag is the one filled button. */
#add-product .button,
#demo-checkout,
.checkout-form .button,
.routine-buy .button {
  background: var(--ink);
  color: var(--paper);
}
#add-product .button:hover:not(:disabled),
#demo-checkout:hover:not(:disabled),
.checkout-form .button:hover:not(:disabled),
.routine-buy .button:hover {
  background: var(--paper);
  color: var(--ink);
}
.text-link {
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.text-link:hover {
  color: var(--ink);
}
.section-heading {
  margin-bottom: clamp(28px, 3.5vw, 44px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.section-heading h2 {
  font-size: clamp(19px, 1.8vw, 23px);
}

/*
 * The opening: the serum's whole ingredient list, the INCI names set large,
 * the Chinese name and job beside each, its share at the right edge; the
 * bottle stands on a sage slab that runs to the window's edge.
 */
.ix-hero {
  /* Both name columns share the width, so a long INCI name keeps its line. */
  --inci-cols: minmax(0, 1.2fr) minmax(0, 1fr) 4.4em;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 33vw, 560px);
  padding-left: var(--edge);
}
.ix-hero-copy {
  padding: clamp(28px, 2.8vw, 48px) clamp(32px, 5vw, 80px)
    clamp(36px, 3.4vw, 56px) 0;
}
.ix-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(21px, 2.1vw, 27px);
  letter-spacing: 0.08em;
}
.ix-hero-lede {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: var(--muted);
  font-size: 14px;
}
.ix-hero-lede .text-link {
  margin-left: 12px;
  padding-bottom: 1px;
  color: var(--ink);
  font-size: 13px;
}
.ix-inci-head,
.ix-inci li {
  display: grid;
  grid-template-columns: var(--inci-cols);
  column-gap: clamp(16px, 2.4vw, 32px);
}
.ix-inci-head {
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.ix-inci-head span:last-child,
.ix-inci li > span:last-child {
  text-align: right;
}
.ix-inci ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ix-inci li {
  align-items: baseline;
  padding: 4px 0 5px;
  border-bottom: 1px solid var(--line);
}
.ix-inci b {
  font-family: var(--display);
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.ix-inci li > span:first-of-type {
  font-size: 13px;
  line-height: 1.55;
  text-wrap: balance;
}
.ix-inci small {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
}
.ix-inci li > span:last-child {
  font-family: var(--display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* The only line drawn in colour: where the list drops under 1%. */
.ix-cut,
.sheet-threshold {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
  padding: 14px 0 6px;
  border-bottom: 1px dashed var(--rule);
  color: var(--rule);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ix-cut b,
.sheet-threshold b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
/* The bottle's slab works as its label: size, price and the way to it. */
.ix-hero-slab {
  position: relative;
  min-height: 100%;
  background: var(--sage);
}
.ix-hero-slab img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ix-hero-tag {
  position: absolute;
  left: clamp(20px, 2.4vw, 36px);
  right: clamp(20px, 2.4vw, 36px);
  bottom: clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 14px 20px;
}
.ix-hero-tag p {
  display: grid;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.ix-hero-tag span {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.ix-hero-tag .button {
  min-height: 42px;
  padding: 8px 22px;
  font-size: 13px;
}

/* Three facts to know before buying, on a pale band. */
.ix-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: var(--edge);
  background: var(--soft);
}
.ix-facts > div {
  display: grid;
  align-content: start;
  justify-items: start;
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 3.5vw, 48px);
  border-left: 1px solid var(--line);
}
.ix-facts > div:first-of-type {
  padding-left: 0;
  border-left: 0;
}
.ix-facts > div:last-of-type {
  padding-right: 0;
}
.ix-fact-no {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ix-fact-no small {
  margin-left: 6px;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.ix-facts h3 {
  margin: 0 0 6px;
}
.ix-facts div > p:not(.ix-fact-no) {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

/*
 * Products stand on solid slabs, named under them in small centred type.
 * A product's slab follows its category; each demo photo carries the slab it
 * was shot on (below), so a frame and its photo always meet in one colour.
 */
.product-card {
  justify-items: center;
  text-align: center;
}
.product-photo {
  width: 100%;
  margin-bottom: 18px;
  background: var(--slab, var(--stone));
}
.product-card[data-category='cleanse'] {
  --slab: var(--mist);
}
.product-card[data-category='hydrate'] {
  --slab: var(--stone);
}
.product-card[data-category='moisturise'] {
  --slab: var(--clay);
}
.product-card[data-category='sun'] {
  --slab: var(--sage);
}
img[src$='/images/cleanser.webp'],
img[src$='/images/set.webp'] {
  background-color: var(--mist);
}
img[src$='/images/toner.webp'],
img[src$='/images/texture-wide.webp'] {
  background-color: var(--stone);
}
img[src$='/images/serum.webp'],
img[src$='/images/sunscreen.webp'],
img[src$='/images/hero.webp'] {
  background-color: var(--sage);
}
img[src$='/images/cream.webp'] {
  background-color: var(--clay);
}
.product-photo img {
  transition: transform 0.6s;
}
.product-badge {
  top: 14px;
  left: 16px;
  padding: 0;
  background: none;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.product-card h2,
.product-card h3 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.product-en {
  margin-top: 1px;
  font-size: 12px;
  letter-spacing: 0.03em;
}
/* A card's short facts break between phrases, never inside 二氧化鈦 8%. */
.product-meta {
  margin: 8px 0 4px;
  font-size: 13px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.product-price {
  font-size: 14px;
  letter-spacing: 0.04em;
}
/* The home page row: the slabs lined up on an ink band, three in view,
   square arrows on its edges. */
.ix-line {
  --muted: var(--dark-muted);
  --focus: var(--dark-ink);
  max-width: none;
  padding-inline: var(--edge);
  background: var(--dark);
  color: var(--dark-ink);
}
.ix-line .section-heading {
  border-bottom-color: color-mix(in srgb, var(--dark-ink) 55%, transparent);
}
.ix-line .product-badge {
  color: var(--ink);
}
/* Room inside the scrolling row for a card's focus ring. */
.ix-line .carousel-track {
  margin: -6px;
  padding: 6px;
  scroll-padding-inline: 6px;
}
.ix-line .carousel--over :is(.carousel-prev, .carousel-next) {
  width: 42px;
  height: 42px;
  margin: 0 0 7em;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.ix-line .carousel--over :is(.carousel-prev, .carousel-next):disabled {
  opacity: 0;
}
.ix-line .carousel-prev {
  translate: -50% 0;
}
.ix-line .carousel-next {
  translate: 50% 0;
}

/*
 * The glossary: five tables, one per bottle, picked from a row of tabs. Each
 * row is one ingredient in order of concentration: its INCI and Chinese
 * name, its job, its share.
 */
.formula {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter) 0;
  scroll-margin-top: 8px;
}
.formula-heading {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: end;
  gap: 12px clamp(32px, 5vw, 72px);
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.formula-heading h2,
.routine-head h2 {
  margin: 0;
}
.formula-heading p {
  max-width: 40em;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.formula-pick {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0 0 clamp(28px, 4vw, 48px);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.formula-pick label {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 clamp(22px, 3.6vw, 52px) -1px 0;
  padding: 10px 0 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.formula-pick b {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.formula-pick input,
.routine-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.formula-pick label:hover {
  color: var(--ink);
}
.formula-pick label:has(:checked) {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.formula-pick label:has(:focus-visible),
.routine-choice label:has(:focus-visible) {
  z-index: 1;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 5vw, 72px);
}
.sheet + .sheet {
  margin-top: 56px;
}
/* Only the chosen bottle's table shows; a browser without :has() shows all five. */
@supports selector(:has(*)) {
  .sheet {
    display: none;
  }
  .formula:has([value='cleanser']:checked) [data-formula='cleanser'],
  .formula:has([value='toner']:checked) [data-formula='toner'],
  .formula:has([value='serum']:checked) [data-formula='serum'],
  .formula:has([value='cream']:checked) [data-formula='cream'],
  .formula:has([value='sunscreen']:checked) [data-formula='sunscreen'] {
    display: grid;
    margin-top: 0;
  }
}
.sheet-meta {
  position: sticky;
  top: 24px;
  align-self: start;
}
.sheet-meta h3 {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 22px);
  letter-spacing: 0.06em;
}
.sheet-en {
  margin: 2px 0 20px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 14px;
}
.sheet-facts {
  margin: 0 0 22px;
  border-top: 1px solid var(--ink);
}
.sheet-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.sheet-facts dt {
  color: var(--muted);
}
.sheet-facts dd {
  margin: 0;
  text-align: right;
}
/* The INCI names as the bottle prints them, before the table translates them. */
.sheet-print {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.sheet-print span:first-child {
  color: var(--ink);
  letter-spacing: 0.08em;
}
.sheet-print [lang='en'] {
  font-family: var(--display);
}
.sheet-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 0;
}
.sheet-buy > span {
  font-family: var(--display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.sheet-body {
  counter-reset: fx;
}
.sheet-head,
.sheet-list li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 5fr) minmax(0, 7fr) 4.2em;
  column-gap: clamp(12px, 2vw, 24px);
}
.sheet-head {
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.sheet-head::before {
  content: '';
}
.sheet-head span:last-child,
.fx-pct {
  text-align: right;
}
.sheet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sheet-list li {
  counter-increment: fx;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.sheet-list li::before {
  content: counter(fx);
  color: var(--muted);
  font-family: var(--display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* The INCI name on its own line; the Chinese name, and where else it appears, under it. */
.fx-name {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: baseline;
  column-gap: 10px;
  font-size: 14px;
}
.fx-name b {
  flex-basis: 100%;
  font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fx-also {
  color: var(--muted);
  font-size: 12px;
}
.fx-job {
  color: var(--muted);
  font-size: 14px;
  text-wrap: pretty;
}
.fx-job strong {
  margin-right: 8px;
  color: var(--ink);
  font-weight: 500;
}
.fx-pct {
  font-family: var(--display);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/*
 * The routine: one skin choice fills the morning and evening columns, each
 * step numbered with its amount drawn to scale (a NT$1 coin is 20 mm) and the
 * wait after it, the dashed line longer the longer the wait.
 */
.routine {
  margin-top: var(--section-space);
  background: var(--soft);
}
.routine-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.routine-head {
  grid-column: 1 / -1;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0 clamp(32px, 5vw, 72px);
  margin-bottom: clamp(16px, 2.5vw, 28px);
}
.routine-head h2 {
  grid-row: 1 / span 3;
}
.routine-head > :not(h2) {
  grid-column: 2;
}
.routine-head > p {
  max-width: 40em;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}
.routine-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.routine-choice legend {
  float: left;
  margin-right: 18px;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.routine-choice label {
  position: relative;
  display: block;
  min-width: 5.6em;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
}
.routine-choice label + label {
  margin-left: -1px;
}
.routine-choice label:has(:checked) {
  background: var(--ink);
  color: var(--paper);
}
.routine-skin p {
  display: none;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.routine-inner:has([value='dry']:checked) [data-skin='dry'],
.routine-inner:has([value='oily']:checked) [data-skin='oily'],
.routine-inner:has([value='combo']:checked) [data-skin='combo'] {
  display: block;
}
.routine-col {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px);
  background: var(--paper);
}
/* The closing note sits at the foot of both columns, whatever their length. */
.routine-col .routine-steps {
  margin-bottom: 18px;
}
.routine-col .routine-end {
  margin-top: auto;
}
.routine-col h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.12em;
}
.routine-col h3 span {
  font-family: var(--display);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.routine-total {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  font-size: 14px;
}
.routine-total b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
}
.routine-steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.routine-step {
  --no: 2.2em;
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--no) minmax(0, 1fr) 56px;
  column-gap: clamp(10px, 1.4vw, 18px);
}
.routine-step::before {
  content: counter(step, decimal-leading-zero);
  color: var(--muted);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
}
.routine-text h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.routine-text h4 a,
.routine-text h4 span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.routine-text h4 a {
  border-bottom: 1px solid var(--line);
}
.routine-text h4 a:hover {
  border-bottom-color: currentColor;
  color: var(--ink);
}
.routine-text p {
  margin: 0;
  font-size: 14px;
}
.routine-dose {
  width: 56px;
  height: 56px;
  fill: color-mix(in srgb, var(--rule) 16%, transparent);
  stroke: var(--rule);
  stroke-width: 1.3;
}
.routine-dose .wave {
  fill: none;
}
.routine-wait {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--no) minmax(0, 1fr);
  column-gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
}
.routine-wait::before {
  content: '';
  height: 16px;
  margin-left: 0.55em;
  border-left: 1px dashed var(--rule);
}
.routine-wait[data-wait='0.5']::before {
  height: 26px;
}
.routine-wait[data-wait='1']::before {
  height: 36px;
}
.routine-wait[data-wait='3']::before {
  height: 64px;
}
.routine-wait b {
  color: var(--ink);
  font-weight: 500;
}
.routine-end {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.routine-buy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 32px;
  padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 44px);
  background: var(--paper);
}
.routine-buy p {
  margin: 0;
}
.routine-buy .button {
  grid-row: 1 / span 2;
  grid-column: 2;
}
.routine-buy b,
.routine-sum {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.routine-try,
.routine-key {
  color: var(--muted);
  font-size: 13px;
}
.routine-buy .routine-key {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.routine-try a {
  margin-left: 10px;
  color: var(--ink);
  font-size: 13px;
}

/* Texture: the cream up close at the window's edge, how each of the five feels beside it. */
.ix-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-right: var(--edge);
}
.ix-split > img,
.ix-split > .lx-picture > img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.ix-split-copy {
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px)
    clamp(32px, 6vw, 96px);
}
.ix-split h2 {
  margin-bottom: 10px;
}
.ix-split-copy > p {
  max-width: 32em;
  color: var(--muted);
  font-size: 14px;
}
.texture-list {
  margin: 24px 0 32px;
  border-top: 1px solid var(--ink);
}
.texture-list div {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.texture-list dt {
  font-weight: 500;
}
.texture-list dd {
  margin: 0;
  color: var(--muted);
}

/* Notes, the journal and the story. Photos without a slab of their own wait on the pale one. */
:where(.journal-card img, .body-copy > img),
:where(.journal-card img, .body-copy > .lx-picture > img) {
  background-color: var(--soft);
}
.journal-card img {
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}
.journal-card .kicker {
  margin-bottom: 4px;
}
.journal-card :is(h2, h3) {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.journal-card p:last-child {
  font-size: 14px;
}

/* Shared pages: centred titles, tabs for categories, an underlined search. */
.page-hero {
  padding-top: clamp(40px, 6vw, 72px);
  text-align: center;
}
.page-hero h1,
.page-hero:has(+ .body-copy) h1 {
  max-width: none;
  margin-bottom: 10px;
  font-size: clamp(22px, 2.3vw, 28px);
  letter-spacing: 0.08em;
}
.page-hero p {
  max-width: 40em;
  margin-inline: auto;
  font-size: 14px;
}
.shop-toolbar {
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-bottom: 0;
}
.filter-nav {
  gap: 0 clamp(20px, 2.6vw, 34px);
}
.filter-nav a,
.filter-nav a:hover {
  margin-bottom: -1px;
  padding: 10px 0 12px;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.filter-nav a:hover {
  color: var(--ink);
}
.filter-nav a[aria-current='page'] {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.search {
  margin-bottom: 10px;
}
.search input {
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  background: transparent;
  font-size: 14px;
}
.search button,
.search button:hover {
  padding: 6px 0 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.pagination {
  font-size: 13px;
  letter-spacing: 0.06em;
}
.breadcrumb ol {
  font-size: 12px;
  letter-spacing: 0.06em;
}
.shop-section:has(> .breadcrumb) {
  padding-top: clamp(24px, 4vw, 44px);
}
.product-info h1 {
  margin-bottom: 4px;
  font-size: clamp(21px, 2.2vw, 27px);
  letter-spacing: 0.06em;
}
.product-info .product-en {
  font-size: 13px;
}
.product-info .product-price {
  margin: 18px 0;
  font-size: 20px;
}
.product-description {
  font-size: 14px;
}
.product-details {
  border-top: 1px solid var(--ink);
}
.product-details > div {
  grid-template-columns: 5.5em minmax(0, 1fr);
  padding: 11px 0;
  font-size: 14px;
}
.product-details dt,
summary {
  font-weight: 500;
}
/* Questions open with a plus, close with a minus. */
summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: '+';
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
details[open] > summary::after {
  content: '−';
}
.kicker {
  color: var(--rule);
  font-size: 12px;
  letter-spacing: 0.12em;
}
label {
  font-weight: 400;
  letter-spacing: 0.06em;
}
.product-guide .text-link,
.note {
  font-size: 13px;
}
.cart-line img,
.cart-photo {
  aspect-ratio: 4 / 5;
}
.cart-line h2 {
  font-size: 15px;
  font-weight: 500;
}
.summary {
  border: 1px solid var(--line);
  background: var(--paper);
}
.summary h2 {
  font-size: 17px;
}
.totals .total {
  border-top-color: var(--ink);
}
.page-hero .free-shipping {
  color: var(--rule);
}
/* Story and notes photos: the bottle or the swatch, cropped to the column. */
body:is([data-page='about'], [data-page='journal']) .body-copy > img,
body:is([data-page='about'], [data-page='journal']) .body-copy > .lx-picture > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.body-copy > h2 {
  font-size: clamp(19px, 1.8vw, 22px);
}
.body-copy > img + h2,
.body-copy > .lx-picture + h2 {
  font-size: clamp(22px, 2.4vw, 28px);
}
.values-grid > div {
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.values-grid h3 {
  font-size: 16px;
}
.steps li::before {
  color: var(--ink);
  font-size: 22px;
}
.article-products h2 {
  font-size: 18px;
}

/* Footer: the ink of the announcement, small type. */
footer {
  --focus: var(--dark-ink);
}
.footer-inner {
  padding-top: clamp(56px, 7vw, 88px);
}
footer .wordmark > svg {
  color: var(--dark-ink);
}
footer nav h2 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
}
footer nav a {
  font-size: 14px;
}

@media (min-width: 901px) {
  .header {
    padding-top: 22px;
    padding-bottom: 12px;
    row-gap: 14px;
  }
  .navigation {
    gap: 4px 40px;
  }
  .header-tools {
    gap: 20px;
  }
}
@media (min-width: 961px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* The photo stays in view while the ingredients scroll past it. */
  .product-detail > .product-photo {
    position: sticky;
    top: 24px;
  }
}
@media (max-width: 960px) {
  .ix-hero,
  .ix-split {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
  .ix-hero-copy {
    padding: clamp(28px, 6vw, 48px) var(--gutter) clamp(36px, 7vw, 56px);
  }
  .ix-hero-slab {
    aspect-ratio: 4 / 3;
  }
  .ix-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ix-facts > div,
  .ix-facts > div:first-of-type,
  .ix-facts > div:last-of-type {
    grid-template-columns: 6.6rem minmax(0, 1fr);
    column-gap: 16px;
    padding: 26px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .ix-facts > div:first-of-type {
    border-top: 0;
  }
  .ix-fact-no {
    grid-row: span 3;
    margin: 0;
    font-size: 36px;
  }
  .ix-fact-no small {
    margin-left: 4px;
    font-size: 13px;
  }
  .ix-facts div > p:not(.ix-fact-no) {
    margin-bottom: 12px;
  }
  .ix-line {
    --columns: 2.3;
  }
  .formula-heading,
  .sheet,
  .routine-inner,
  .routine-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .routine-head h2 {
    grid-row: auto;
    margin-bottom: 10px;
  }
  .routine-head > :not(h2) {
    grid-column: 1;
  }
  .sheet-meta {
    position: static;
  }
  .ix-split > img,
  .ix-split > .lx-picture > img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .ix-split-copy {
    padding: clamp(32px, 6vw, 56px) var(--gutter) 0;
  }
}
/* On a tablet the bottle's facts and its printed INCI line sit side by side above the table. */
@media (min-width: 561px) and (max-width: 960px) {
  .sheet-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .sheet-meta h3,
  .sheet-en {
    grid-column: 1 / -1;
  }
  .sheet-print {
    grid-column: 2;
    grid-row: 3 / span 2;
  }
}
@media (max-width: 760px) {
  .ix-line .carousel--over :is(.carousel-prev, .carousel-next) {
    display: none;
  }
  /* A short title and its link still share one line. */
  .section-heading {
    flex-direction: row;
    align-items: end;
  }
}
@media (max-width: 560px) {
  .ix-hero {
    --inci-cols: minmax(0, 1fr) auto;
  }
  .ix-inci-head span:nth-child(2) {
    display: none;
  }
  .ix-inci li {
    row-gap: 0;
    padding: 7px 0 8px;
  }
  .ix-inci li > span:first-of-type {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ix-hero-slab {
    aspect-ratio: 4 / 5;
  }
  .ix-line {
    --columns: 1.6;
  }
  /* Five tabs in one row: the bottle over its count. */
  .formula-pick {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .formula-pick label {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-right: 0;
    padding: 8px 0 10px;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
  .formula-pick b {
    font-size: 12px;
  }
  .sheet-head,
  .sheet-list li {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    column-gap: 10px;
  }
  .sheet-head span:nth-child(2) {
    display: none;
  }
  .fx-job {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 4px;
  }
  .routine-col {
    padding: 22px 16px;
  }
  .routine-step {
    --no: 1.8em;
    grid-template-columns: var(--no) minmax(0, 1fr) 44px;
  }
  .routine-dose {
    width: 44px;
    height: 44px;
  }
  .routine-choice legend {
    float: none;
    width: 100%;
    margin-bottom: 8px;
  }
  .routine-buy {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 16px;
  }
  .routine-buy .button {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin: 10px 0 6px;
  }
  .page-hero h1,
  .page-hero:has(+ .body-copy) h1 {
    font-size: 22px;
  }
}