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

/*
 * TRIO 三件組 reads like a Taiwanese basics retailer (lativ, NET, UNIQLO TW):
 * a centred wordmark over a category bar, a store-window banner that turns
 * every six seconds, a row of service promises, big two-up tiles with their
 * price in a circle, then a dense grid of packshots on studio grey. White
 * paper and near-black ink carry everything; one green is the price code: a
 * green circle or green figure is what a piece comes to when you buy more,
 * black is what you pay for one. Corners are square everywhere except the
 * circles (price stickers, colour swatches, the bag count). Archivo Black
 * (SIL OFL 1.1, notice in media-fonts.json) sets the wordmark and every
 * numeral; Chinese stays in the visitor's own sans-serif, bold.
 */
@font-face {
  font-family: 'Archivo Black';
  src: url('/fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #ffffff;
  --ink: #16171b;
  --muted: #575a61;
  --soft: #f0f1f3;
  --line: #dfe1e5;
  --accent: #16171b;
  --accent-ink: #ffffff;
  /* The price code: white on it and it on white both pass 4.5:1. */
  --green: #008556;
  --green-deep: #006a44;
  --highlight: #bfe5d1;
  --focus: #16171b;
  --dark: #16171b;
  --dark-ink: #ffffff;
  --dark-muted: #c3c6cc;
  --tee-white: #ffffff;
  --tee-black: #222327;
  --tee-grey: #a9adb4;
  --tee-navy: #273a5f;
  --display:
    'Archivo Black', 'Arial Black', 'PingFang TC', 'Noto Sans TC',
    'Microsoft JhengHei', sans-serif;
  /* Headings set their numerals and Latin in Archivo Black, the Chinese in the system sans. */
  --heading:
    'Archivo Black', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
    sans-serif;
  /* Latin and numerals from the system's own Latin face, so 150–160 keeps a short dash. */
  --body:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 0;
  --radius-large: 0;
  --button-radius: 0;
  --input-radius: 0;
  --chip-radius: 0;
  --badge-radius: 0;
  --photo-radius: 0;
  --photo-ratio: 1;
  --card-radius: 0;
  --columns: 4;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 36px 16px;
  --grid-gap-phone: 28px 10px;
  --price-color: var(--ink);
  --price-weight: 700;
  --section-space: clamp(48px, 7vw, 80px);
}
/* Archivo Black has one weight: it is never faux-bolded beside the bold Chinese. */
h1,
h2,
h3,
.product-badge,
.product-price,
.trio-badge,
.count-total,
.math-answer {
  font-synthesis: none;
}
h1,
h2 {
  font-weight: 800;
}
/* Short copy breaks at spaces and punctuation, so NT$990 and 3 件 stay whole. */
.trio-slide-line,
.trio-tile p,
.trio-tile h2,
.build-head p,
.nudge,
.build-note {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Header: the wordmark in the middle, search left, tools right, the category bar under them. */
.announcement {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wordmark > svg {
  color: var(--ink);
}
.wordmark-name b {
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.wordmark-name small {
  margin-top: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
}
.header-tools svg {
  stroke-width: 1.8;
}
#bag-count {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}
.trio-nav-deal {
  background: var(--green);
  color: #fff;
}
.header-search input {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 14px;
}
.header-search button {
  padding: 0 16px;
  border-color: var(--ink);
  background: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.header-search button:hover {
  border-color: var(--green);
  background: var(--green);
}
@media (min-width: 901px) {
  .header--center {
    padding-top: 22px;
    padding-bottom: 0;
    row-gap: 18px;
  }
  .header--center .wordmark > svg {
    width: 40px;
    height: 40px;
  }
  .header--center .wordmark-name b {
    font-size: 34px;
  }
  .header--center .header-search {
    grid-area: 1 / 1;
    justify-self: start;
    width: min(100%, 290px);
  }
  .header--center .navigation {
    justify-self: stretch;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .header--center .navigation a {
    position: relative;
    padding: 12px 24px;
    border: 0;
    font-size: 15px;
    font-weight: 700;
  }
  /* Thin rules between the categories, none beside the green block. */
  .header--center .navigation a + a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 14px;
    margin-top: -7px;
    border-left: 1px solid var(--line);
  }
  .header--center .trio-nav-deal::before,
  .header--center .trio-nav-deal + a::before {
    display: none;
  }
  .header--center .navigation a:hover,
  .header--center .navigation a[aria-current='page'] {
    box-shadow: inset 0 -3px var(--ink);
  }
  .header--center .navigation .trio-nav-deal:hover {
    background: var(--green-deep);
    box-shadow: none;
  }
}

/* Buttons are filled ink rectangles that turn green under the pointer. */
.button {
  border-width: 2px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.button:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.text-link {
  border-bottom-width: 2px;
  font-weight: 700;
}
.text-link:hover {
  color: var(--green);
}

/*
 * The price sticker: a circle with what you buy on top and the number under
 * it. Green for a price you get by buying more, ink for a single piece.
 * --size sets it; everything inside scales from it.
 */
.trio-badge {
  --size: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--size);
  height: var(--size);
  margin: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  line-height: 1;
  text-align: center;
}
.trio-badge > span {
  font-size: calc(var(--size) * 0.105);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.trio-badge b {
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--size) * 0.05);
  font: 400 calc(var(--size) * 0.3) / 1 var(--display);
  letter-spacing: -0.02em;
}
.trio-badge b small {
  margin: 0.2em 0.06em 0 0;
  font-size: 0.32em;
  letter-spacing: 0;
}
.trio-unit {
  align-self: flex-end;
  margin: 0 0 0.12em 0.08em;
  font-family: var(--body);
  font-size: 0.36em;
  font-weight: 800;
  letter-spacing: 0;
}
.trio-badge--single {
  background: var(--ink);
}

/* The banner: contained, square, one offer per slide, ink arrows on its edges, dots under. */
.trio-banner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
}
.trio-slide {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  aspect-ratio: 12 / 5;
  /* clip, not hidden: a box with an aspect ratio still grows when its copy needs more room. */
  overflow: clip;
  background: var(--soft);
  container-type: inline-size;
}
.trio-slide-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.trio-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A white wash on the copy's side keeps ink type readable whatever the photo does there. */
.trio-slide-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.78),
    rgb(255 255 255 / 0) 50%
  );
}
.trio-slide--end .trio-slide-media::after {
  background: linear-gradient(
    270deg,
    rgb(255 255 255 / 0.78),
    rgb(255 255 255 / 0) 50%
  );
}
/* The pack slide: the packshot square on the right, its left edge fading into the studio grey. */
.trio-slide--pack .trio-slide-media::after {
  display: none;
}
.trio-slide--pack .trio-slide-media img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}
.trio-slide-copy {
  display: grid;
  justify-items: start;
  gap: clamp(12px, 1.6cqi, 20px);
  /* As wide as its line, so a copy block on the right keeps to the photo's calm side. */
  max-width: min(46%, 500px);
  margin-left: clamp(28px, 7cqi, 96px);
}
.trio-slide--end .trio-slide-copy {
  justify-self: end;
  margin: 0 clamp(28px, 7cqi, 96px) 0 0;
}
.trio-slide .trio-badge {
  --size: clamp(104px, 15cqi, 184px);
}
.trio-slide-line {
  margin: 0;
  font-size: clamp(20px, 2.7cqi, 32px);
  font-weight: 800;
  line-height: 1.35;
}
.trio-banner .carousel--over :is(.carousel-prev, .carousel-next) {
  width: 44px;
  min-width: 44px;
  height: 64px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
.trio-banner
  .carousel--over
  :is(.carousel-prev, .carousel-next):hover:not(:disabled) {
  background: var(--green);
}
.trio-banner .carousel-dots button::before {
  width: 10px;
  height: 10px;
  background: var(--line);
}
.trio-banner .carousel-dots button[aria-current='true']::before {
  width: 10px;
  background: var(--ink);
}
.trio-banner .carousel--over .carousel-pause {
  grid-column: 3;
  justify-self: end;
  min-width: 32px;
  width: 32px;
  height: 32px;
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--muted);
}
.trio-banner .carousel--over .carousel-pause:hover {
  color: var(--ink);
}

/* Service promises in one row, lativ-style: icon, the promise, its condition. */
.trio-services {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}
.trio-services ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}
.trio-services li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 12px;
  background: var(--paper);
}
.trio-services svg {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trio-services p {
  display: grid;
  min-width: 0;
  margin: 0;
  line-height: 1.45;
}
.trio-services b {
  font-size: 15px;
  font-weight: 800;
}
.trio-services span {
  color: var(--muted);
  font-size: 13px;
}

/* Tiles, two to a row: the tee with its colours, the five-tee deal in solid green, the family pack across both. */
.trio-tiles {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) var(--gutter) var(--section-space);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.trio-tile {
  position: relative;
  isolation: isolate;
  min-width: 0;
  aspect-ratio: 1;
  overflow: clip;
  background: var(--soft);
  container-type: inline-size;
}
.trio-tile > img,
.trio-tile > .lx-picture > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.trio-tile:hover > img,
.trio-tile:hover > .lx-picture > img {
  transform: scale(1.03);
}
.trio-tile:focus-visible {
  outline-width: 3px;
}
.trio-tile h2,
.trio-tile p {
  margin: 0;
}
.trio-tile-copy {
  display: grid;
  justify-items: start;
}

/* The tee: its name and colours on the clear top of the packshot, the single price in an ink circle. */
.trio-tile--tee .trio-tile-copy {
  gap: 8px;
  max-width: 72%;
  padding: clamp(18px, 6cqi, 36px);
}
.trio-tile--tee h2 {
  font-size: clamp(22px, 5.4cqi, 32px);
  line-height: 1.25;
}
/* The name's link covers the tile; the swatches sit above it. */
.trio-tile--tee h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.trio-tile--tee h2 a:focus-visible {
  outline: none;
}
.trio-tile--tee:has(h2 a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.trio-tile--tee:hover h2 {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.trio-tile--tee .trio-tile-copy p {
  color: var(--muted);
  font-size: clamp(14px, 2.7cqi, 16px);
  font-weight: 600;
}
.trio-tile--tee .trio-badge {
  --size: clamp(96px, 21cqi, 128px);
  position: absolute;
  top: clamp(16px, 5cqi, 30px);
  right: clamp(16px, 5cqi, 30px);
}
.trio-swatches {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.trio-swatch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  font-size: 14px;
  font-weight: 700;
}
.trio-swatch::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px rgb(22 23 27 / 0.35);
}
.trio-swatch:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.trio-swatch.white,
.swatch.white {
  --chip: var(--tee-white);
}
.trio-swatch.grey,
.swatch.grey {
  --chip: var(--tee-grey);
}
.trio-swatch.black,
.swatch.black {
  --chip: var(--tee-black);
}
.trio-swatch.navy,
.swatch.navy {
  --chip: var(--tee-navy);
}

/* The five-tee deal, the page's one solid block of the price code. */
.trio-tile--deal {
  display: grid;
  align-content: center;
  justify-items: start;
  aspect-ratio: auto;
  /* Percentages of the tile's width (cqi inside it measure its content box); 6% lines up with the tee tile's copy. */
  padding: 7% 6%;
  background: var(--green);
  color: #fff;
}
.trio-deal-top {
  font-size: max(18px, 5.2cqi);
  font-weight: 800;
  line-height: 1.3;
}
.trio-tile--deal .trio-deal-count {
  display: flex;
  align-items: baseline;
  margin-left: -0.05em;
  font: 400 52cqi / 0.84 var(--display);
  letter-spacing: -0.04em;
}
.trio-deal-count .trio-unit {
  align-self: baseline;
  margin-left: 0.04em;
  font-size: 0.26em;
}
.trio-tile--deal .trio-deal-price {
  display: flex;
  align-items: flex-start;
  margin-top: 2cqi;
  font: 400 12.5cqi / 1 var(--display);
  letter-spacing: -0.01em;
}
.trio-deal-price small {
  margin: 0.16em 0.06em 0 0;
  font-size: 0.34em;
  letter-spacing: 0;
}
.trio-tile--deal .trio-deal-each {
  margin-top: 3cqi;
  font-size: max(15px, 3.6cqi);
  font-weight: 700;
  line-height: 1.5;
}
.trio-deal-go,
.trio-tile-go {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.trio-deal-go {
  margin-top: 5cqi;
  background: #fff;
  color: var(--ink);
}
.trio-tile--deal:hover .trio-deal-go {
  background: var(--ink);
  color: #fff;
}

/* The family pack across the row: the laundry on the bed, the per-piece price on its calm left. */
.trio-tile--family {
  grid-column: 1 / -1;
  display: grid;
  align-items: center;
  aspect-ratio: 12 / 5;
}
.trio-tile--family::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.8),
    rgb(255 255 255 / 0) 52%
  );
}
.trio-tile--family .trio-tile-copy {
  gap: 12px;
  width: min(46%, 480px);
  margin-left: clamp(28px, 7cqi, 96px);
}
.trio-tile--family .trio-badge {
  --size: clamp(96px, 12cqi, 150px);
}
.trio-tile--family h2 {
  font-size: clamp(22px, 2.8cqi, 32px);
  line-height: 1.3;
}
.trio-tile--family p {
  font-size: 16px;
  font-weight: 600;
}
.trio-tile-go {
  margin-top: 4px;
  background: var(--ink);
  color: #fff;
}
.trio-tile--family:hover .trio-tile-go {
  background: var(--green);
}

/* Product cards: bare packshots on studio grey, the name, the price in black, what one piece comes to in green. */
.product-photo {
  margin-bottom: 12px;
  background: var(--soft);
}
.product-badge {
  top: 0;
  left: 0;
  padding: 4px 10px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
.product-card h2,
.product-card h3 {
  order: 1;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.product-card .product-en {
  display: none;
}
.product-card .product-price {
  order: 2;
  margin-top: 2px;
  font-size: 24px;
  line-height: 1.25;
}
.product-card .product-meta {
  order: 3;
  margin: 2px 0 0;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}
.section-heading h2 {
  font-size: clamp(22px, 2.3vw, 28px);
}
/* The shop page shows three across on tablets; the home page's four stay two by two. */
main:has(.shop-toolbar) {
  --columns-tablet: 3;
}

/* 湊一組: the set builder on the studio grey, square boxes, the sums in the price code. */
.build {
  background: var(--soft);
}
.build-form {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 80px);
  display: grid;
  gap: 22px;
}
.build-head h2 {
  margin-bottom: 6px;
  font-size: clamp(26px, 3vw, 36px);
}
.build-head p {
  max-width: 36em;
  margin: 0;
  color: var(--muted);
}

/* How many: every count with its total, so the set price shows against singles. */
.count {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.count legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 800;
}
.count-option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 12px 16px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}
.count-option b {
  font-size: 16px;
  font-weight: 800;
}
.count-total {
  display: flex;
  align-items: flex-start;
  margin: 2px 0 6px;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  white-space: nowrap;
}
.count-total small,
.math-answer small {
  margin: 0.16em 0.08em 0 0;
  font-size: 0.42em;
}
/* From three tees the set price applies: what one tee comes to, in the price code. */
.set-price .count-each {
  justify-self: start;
  padding: 0 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
}
.count-option input,
.swatch input,
.sizes input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.count-option:hover {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.count-option:has(:checked) {
  background: var(--ink);
  color: #fff;
}
.count-option:has(:focus-visible),
.sizes label:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.build-hint {
  margin: 0;
  font-weight: 700;
}
.build-hint a {
  border-bottom: 2px solid currentColor;
}
.build-hint a:hover {
  color: var(--green);
}

/*
 * The line: five pegs, a tee on each one picked. A tee takes its colour and
 * size letter from its own radios; pegs past the chosen count hang empty.
 */
.hang {
  --tee-w: clamp(84px, 10vw, 132px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 36px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.hang-slot {
  --tee: var(--tee-white);
  --tee-ink: var(--ink);
  --letter: '';
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 0 8px;
  /* The rope runs through the pegs, 6/120 of a tee's width from its top. */
  background: linear-gradient(var(--ink), var(--ink)) 0
    calc(var(--tee-w) * 0.05 - 1px) / 100% 3px no-repeat;
}
.hang-slot:has([value='black']:checked) {
  --tee: var(--tee-black);
  --tee-ink: var(--paper);
}
.hang-slot:has([value='grey']:checked) {
  --tee: var(--tee-grey);
}
.hang-slot:has([value='navy']:checked) {
  --tee: var(--tee-navy);
  --tee-ink: var(--paper);
}
.hang-slot:has([value='S']:checked) {
  --letter: 'S';
}
.hang-slot:has([value='M']:checked) {
  --letter: 'M';
}
.hang-slot:has([value='L']:checked) {
  --letter: 'L';
}
.hang-slot:has([value='XL']:checked) {
  --letter: 'XL';
}
.build-form:has([name='count'][value='1']:checked) .hang-slot:nth-child(n + 2),
.build-form:has([name='count'][value='2']:checked) .hang-slot:nth-child(n + 3),
.build-form:has([name='count'][value='3']:checked) .hang-slot:nth-child(n + 4),
.build-form:has([name='count'][value='4']:checked) .hang-slot:nth-child(n + 5) {
  --tee: transparent;
  --letter: '';
  --dash: 5 6;
  --pick: none;
  --add: inline-flex;
}
.tee {
  position: relative;
  display: block;
  width: var(--tee-w);
}
.tee svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.tee path {
  fill: var(--tee);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: var(--dash, none);
  vector-effect: non-scaling-stroke;
  transition: fill 0.2s;
}
.tee rect {
  fill: var(--ink);
}
.tee::after {
  content: var(--letter);
  position: absolute;
  top: 58%;
  left: 50%;
  color: var(--tee-ink);
  font-family: var(--display);
  font-size: calc(var(--tee-w) * 0.22);
  line-height: 1;
  transform: translate(-50%, -50%);
}
.slot {
  display: var(--pick, grid);
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.slot > legend {
  margin: 0 auto 2px;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
}
.swatches,
.sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
  width: 100%;
  max-width: 184px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.swatch,
.sizes label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 2px;
  border: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
/* Colours are round chips in their own colour; sizes are square boxes. */
.swatch {
  border-radius: 999px;
  background: var(--chip);
}
.swatch.black,
.swatch.navy {
  color: var(--paper);
}
/* The picked colour keeps its own fill and gets a green ring, so it still reads as that colour. */
.swatch:has(:checked) {
  box-shadow:
    0 0 0 2px var(--soft),
    0 0 0 5px var(--green);
}
.swatch:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 7px;
}
.sizes label {
  background: var(--paper);
  font-family: var(--display);
  font-weight: 400;
}
.sizes label:hover {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.sizes label:has(:checked) {
  background: var(--ink);
  color: var(--paper);
}
.slot-add {
  display: var(--add, none);
  align-items: center;
  min-height: 40px;
  padding: 4px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 14px;
  font-weight: 800;
}
.slot-add:hover {
  background: var(--ink);
  color: var(--paper);
}

/* The sums and the size chart, in white boxes on the grey. */
.build-result {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: 16px;
  margin-top: 8px;
}
.tally,
.size-chart {
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 2px solid var(--ink);
  background: var(--paper);
}
.tally h3,
.size-chart h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
}
.math-row {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 0;
}
.math-row + .math-row {
  border-top: 1px solid var(--line);
}
.math-name {
  font-weight: 800;
}
/* The working sits against its answer, so each line reads as one sum. */
.math-sum {
  justify-self: end;
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  font-synthesis: none;
  white-space: nowrap;
}
.math-sum small {
  font-size: 0.64em;
}
.math-answer {
  display: flex;
  align-items: flex-start;
  justify-self: end;
  padding: 3px 12px 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  white-space: nowrap;
}
.math-answer.each {
  background: var(--green);
  color: #fff;
}
.math-answer.wear {
  background: var(--ink);
  color: #fff;
}
.math-answer.save {
  box-shadow: inset 0 0 0 3px var(--green);
  color: var(--green);
}
.math-note,
.build-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.nudge {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--soft);
  font-weight: 700;
}
.nudge .text-link {
  margin-left: 6px;
}
.picks {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.picks > p:first-child {
  margin: 0;
  font-weight: 800;
}
.picks .button {
  min-width: min(100%, 16em);
}
.size-chart {
  scroll-margin-top: 20px;
}
.size-chart table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.size-chart th,
.size-chart td {
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.size-chart thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: bottom;
}
.size-chart thead small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.size-chart tbody th {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  text-align: left;
}
.size-chart td {
  font-size: 15px;
}
.size-chart p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Shared pages in the same language: square tabs, bold titles, ink boxes. */
.page-hero {
  padding-top: clamp(28px, 4vw, 48px);
}
.page-hero h1 {
  font-size: clamp(28px, 3.2vw, 40px);
}
.section:has(> .breadcrumb) {
  padding-top: clamp(20px, 3vw, 32px);
}
.page-hero .free-shipping {
  display: inline-block;
  padding: 2px 12px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
}
.shop-toolbar {
  border-bottom: 2px solid var(--ink);
}
.filter-nav {
  gap: 0;
}
.filter-nav a {
  position: relative;
  margin: 0 -1px -1px 0;
  padding: 8px 18px;
  font-weight: 700;
}
.filter-nav a:hover,
.filter-nav a[aria-current='page'] {
  z-index: 1;
}
.search button {
  font-weight: 700;
}
.search button:hover {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.breadcrumb ol {
  font-size: 13px;
}
.product-info h1 {
  font-size: clamp(26px, 3vw, 34px);
}
.product-info .product-en {
  font-family: var(--body);
  font-size: 14px;
}
.product-info .product-price {
  font-size: clamp(38px, 4vw, 48px);
  line-height: 1;
}
.product-details {
  border-top: 2px solid var(--ink);
}
.product-details dt {
  font-weight: 800;
}
.product-guide {
  margin: 0 0 8px;
}
.cart-line img,
.cart-photo {
  background: var(--soft);
}
.cart-line h2 {
  font-weight: 800;
}
.cart-price p {
  font-size: 18px;
}
.summary {
  border: 2px solid var(--ink);
  background: var(--paper);
}
.totals .total {
  border-top: 2px solid var(--ink);
  font-size: 22px;
}
.body-copy h2 {
  font-weight: 800;
}
.values-grid > div {
  padding-top: 14px;
  border-top: 3px solid var(--ink);
}
.values-grid h3 {
  font-weight: 800;
}
.journal-card img {
  background: var(--soft);
}
.kicker {
  color: var(--green);
  font-weight: 800;
}
.steps li::before {
  color: var(--green);
}

/* The footer, light like a store's: grey, ink text, green under the pointer. */
footer {
  --focus: var(--ink);
  background: var(--soft);
  color: var(--ink);
}
footer .wordmark > svg {
  color: var(--ink);
}
footer .wordmark-name small,
footer p {
  color: var(--muted);
}
footer nav h2 {
  color: var(--ink);
  font-weight: 800;
}
footer nav a:hover {
  color: var(--green);
}
.footer-bottom {
  border-top-color: var(--line);
  color: var(--muted);
}

@media (max-width: 960px) {
  .build-result {
    grid-template-columns: minmax(0, 1fr);
  }
  .hang {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .header-search {
    display: none;
  }
  /* The tee's copy moves under its photo, the circle stays on it. */
  .trio-tile--tee {
    display: block;
    aspect-ratio: auto;
  }
  .trio-tile--tee > img,
  .trio-tile--tee > .lx-picture > img {
    position: static;
    aspect-ratio: 1;
    height: auto;
  }
  .trio-tile--tee .trio-tile-copy {
    max-width: none;
    padding: 16px 18px 20px;
  }
  .trio-tile--tee .trio-badge {
    --size: 96px;
    top: 14px;
    right: 14px;
  }
  .navigation a {
    font-weight: 700;
  }
  .navigation .trio-nav-deal {
    align-self: flex-start;
    margin: 4px 0;
    padding: 6px 12px;
  }
  .trio-services ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trio-services li {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .count {
    gap: 6px;
  }
  .count-option {
    justify-items: center;
    padding: 8px 2px 10px;
    text-align: center;
  }
  .count-option b {
    font-size: 14px;
  }
  .count-total {
    display: grid;
    justify-items: center;
    font-size: 17px;
  }
  .count-total small {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
  }
  .count-each {
    display: none;
  }
  /* Tiles go one to a row; photos keep their copy under them, the circle on the photo. */
  .trio-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .trio-tile--family {
    display: block;
    aspect-ratio: auto;
  }
  .trio-tile--family > img,
  .trio-tile--family > .lx-picture > img {
    position: static;
    aspect-ratio: 3 / 2;
    height: auto;
  }
  .trio-tile--family::before {
    display: none;
  }
  .trio-tile--family .trio-tile-copy {
    width: auto;
    margin: 0;
    padding: 16px 18px 20px;
  }
  .trio-tile--family .trio-badge {
    --size: 96px;
    position: absolute;
    top: 14px;
    left: 14px;
  }
}
/* Phones: the banner runs edge to edge; the offer sits under the photo, the circle on it. */
@media (max-width: 640px) {
  .trio-banner {
    padding: 0;
  }
  .trio-tiles {
    padding-inline: 0;
  }
  .trio-banner .carousel--over :is(.carousel-prev, .carousel-next) {
    display: none;
  }
  .trio-slide {
    display: block;
    aspect-ratio: auto;
    background: var(--paper);
  }
  .trio-slide-media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 3 / 2;
    background: var(--soft);
  }
  .trio-slide-media::after {
    display: none;
  }
  .trio-slide--stack .trio-slide-media img {
    object-position: 78% center;
  }
  .trio-slide--rail .trio-slide-media img {
    object-position: 22% center;
  }
  .trio-slide-copy {
    max-width: none;
    margin: 0;
    padding: 14px var(--gutter) 4px;
    gap: 10px;
  }
  .trio-slide--end .trio-slide-copy {
    margin: 0;
  }
  .trio-slide .trio-badge {
    --size: 104px;
    position: absolute;
    top: 14px;
    left: 14px;
  }
  .trio-slide--end .trio-badge {
    left: auto;
    right: 14px;
  }
  .trio-slide-line {
    font-size: 19px;
  }
  .trio-slide .button {
    min-height: 42px;
    padding: 6px 18px;
  }
  .trio-services {
    padding-top: 8px;
  }
  /* Two by two, the icon over its words, so each promise keeps to one line. */
  .trio-services li {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 8px;
    text-align: center;
  }
  .trio-services svg {
    width: 26px;
    height: 26px;
  }
  .trio-services b {
    font-size: 14px;
  }
  .trio-services span {
    font-size: 12px;
  }
  .trio-banner .carousel--over .carousel-pause {
    grid-column: 2;
    margin-right: 8px;
  }
}
@media (max-width: 560px) {
  .hang {
    row-gap: 28px;
  }
  .swatches,
  .sizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The sum reads left to right: the working on the left, the answer after it. */
  .math-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name name' 'sum answer';
    padding: 10px 0;
  }
  .math-name {
    grid-area: name;
    font-size: 14px;
  }
  .math-answer {
    grid-area: answer;
    font-size: 30px;
  }
  .math-sum {
    grid-area: sum;
    justify-self: start;
    font-size: 15px;
    white-space: normal;
  }
  .size-chart th,
  .size-chart td {
    padding-inline: 2px;
  }
  .size-chart td {
    font-size: 14px;
  }
}