@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-variable.woff2") format("woff2");
}

/* Fixed brand palette from DESIGN.md. Semantic aliases below remain the only
   values consumed by components. */
:root {
  color-scheme: light;
  --palette-base: #64384f;
  --palette-generated-surface-canvas: #f2efe9;
  --palette-generated-surface-elevated: #ffffff;
  --palette-generated-surface-muted: #e4ded5;
  --palette-generated-surface-accent: #eee7e9;
  --palette-generated-surface-feature: #242122;
  --palette-generated-text: #242122;
  --palette-generated-text-muted: #625b5d;
  --palette-generated-text-feature: #f8f5ef;
  --palette-generated-border: #d5cec4;
  --palette-generated-border-strong: #a69b90;
  --palette-generated-accent: var(--palette-base);
  --palette-generated-accent-hover: #4d293c;
  --palette-generated-accent-text: #ffffff;
  --palette-generated-detail: #8a624e;
  --palette-generated-focus: #7d4363;
  --palette-generated-danger: oklch(48% 0.17 27);
  --palette-generated-danger-surface: color-mix(in oklch, var(--palette-generated-danger) 9%, white);
  --palette-generated-success: oklch(43% 0.105 151);
  --palette-generated-success-surface: color-mix(in oklch, var(--palette-generated-success) 9%, white);
  --palette-generated-warning: oklch(49% 0.105 80);
  --palette-generated-warning-surface: color-mix(in oklch, var(--palette-generated-warning) 12%, white);
  --palette-generated-shadow: rgb(36 33 34 / 14%);
  --palette-generated-input-inset: rgb(0 0 0 / 8%);
  --palette-generated-decoration: color-mix(in oklch, var(--palette-base) 19%, transparent);
}

:root {
  --color-surface-canvas: var(--palette-override-color-surface-canvas, var(--palette-generated-surface-canvas));
  --color-surface-elevated: var(--palette-override-color-surface-elevated, var(--palette-generated-surface-elevated));
  --color-surface-muted: var(--palette-override-color-surface-muted, var(--palette-generated-surface-muted));
  --color-surface-accent: var(--palette-override-color-surface-accent, var(--palette-generated-surface-accent));
  --color-surface-feature: var(--palette-override-color-surface-feature, var(--palette-generated-surface-feature));
  --color-text: var(--palette-override-color-text, var(--palette-generated-text));
  --color-text-muted: var(--palette-override-color-text-muted, var(--palette-generated-text-muted));
  --color-text-feature: var(--palette-override-color-text-feature, var(--palette-generated-text-feature));
  --color-border: var(--palette-override-color-border, var(--palette-generated-border));
  --color-border-strong: var(--palette-override-color-border-strong, var(--palette-generated-border-strong));
  --color-accent: var(--palette-override-color-accent, var(--palette-generated-accent));
  --color-accent-hover: var(--palette-override-color-accent-hover, var(--palette-generated-accent-hover));
  --color-accent-text: var(--palette-override-color-accent-text, var(--palette-generated-accent-text));
  --color-detail: var(--palette-override-color-detail, var(--palette-generated-detail));
  --color-focus: var(--palette-override-color-focus, var(--palette-generated-focus));
  --color-danger: var(--palette-override-color-danger, var(--palette-generated-danger));
  --color-danger-surface: var(--palette-override-color-danger-surface, var(--palette-generated-danger-surface));
  --color-success: var(--palette-override-color-success, var(--palette-generated-success));
  --color-success-surface: var(--palette-override-color-success-surface, var(--palette-generated-success-surface));
  --color-warning: var(--palette-override-color-warning, var(--palette-generated-warning));
  --color-warning-surface: var(--palette-override-color-warning-surface, var(--palette-generated-warning-surface));
  --color-shadow: var(--palette-override-color-shadow, var(--palette-generated-shadow));
  --color-input-inset: var(--palette-override-color-input-inset, var(--palette-generated-input-inset));
  --color-decoration: var(--palette-override-color-decoration, var(--palette-generated-decoration));
  --color-media-control-surface: var(--palette-override-color-media-control-surface, color-mix(in oklch, var(--color-surface-elevated) 92%, transparent));
  --color-media-control-text: var(--palette-override-color-media-control-text, var(--color-text));
  --color-media-control-border: var(--palette-override-color-media-control-border, var(--color-border-strong));
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5.5rem;
  --radius-small: 0.75rem;
  --radius-medium: 1.25rem;
  --radius-large: 2rem;
  --radius-pill: 999px;
  --shadow-hairline: 0 1px 3px var(--color-shadow), 0 1px 2px -1px var(--color-shadow);
  --shadow-small: 0 0.15rem 0.5rem var(--color-shadow);
  --shadow-medium: 0 1rem 2.5rem var(--color-shadow);
  --shadow-large: 0 2rem 5rem var(--color-shadow);
  --motion-press-duration: 200ms;
  /* LAYOUT CONTRACT — a hard requirement; never deviate (DESIGN.md, "Layout
     contract (hard requirement)"; enforced by tests/browser/layout-contract.spec.js).
     - --page-gutter is the one horizontal page inset. Every storefront page's
       .page-shell, the footer content and the test banner text use it, so the
       content edges are identical on every page at any width. Nothing else
       defines a horizontal page inset, and the shell has no max-width.
     - The header bar is wider than the content, as on Allbirds: it sits
       --header-edge (Allbirds' 20 px) from the viewport, but always at least
       --header-outset-min outside the content edges, including on phones
       where the gutter is narrower. The one expression, which only
       .site-header uses (the outset is gutter − header inset), is
       --header-inset: min(var(--header-edge), max(0px, calc(var(--page-gutter) - var(--header-outset-min))));
     - Readable-width limits inside the shell are centred: --panel-width for
       account, login, checkout, order and error panels, --cart-width for the
       cart, and the product purchase column (at most 42rem) ends on the
       shell edge while the media column takes the rest. */
  --page-gutter: clamp(var(--space-3), 5vw, var(--space-7));
  --header-edge: 1.25rem;
  --header-outset-min: 0.25rem;
  --header-inset: min(var(--header-edge), max(0px, calc(var(--page-gutter) - var(--header-outset-min))));
  --header-top: clamp(var(--space-2), 1.2vw, var(--space-3));
  --panel-width: 58rem;
  --cart-width: 90rem;
  --text-width: 68ch;
  --font-display: "Fraunces", "Iowan Old Style", "Baskerville", serif;
  --font-body: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-body);
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 20rem;
  background-color: var(--color-surface-canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-surface-canvas);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  max-width: 22ch;
  margin-block: 0 0.55em;
  color: var(--color-text);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 1.02;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.75rem); }
h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p, dd, li { overflow-wrap: break-word; }

p {
  max-width: var(--text-width);
  margin-block: 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
}

[id] { scroll-margin-top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-text);
}

.eyebrow,
.product-card__category {
  margin: 0;
  color: var(--color-detail);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.test-mode-banner {
  padding: var(--space-2) var(--page-gutter);
  border-block-end: 2px solid var(--color-warning);
  background: var(--color-warning-surface);
  color: var(--color-text);
  text-align: center;
}

/* The header bar is wider than the content at every width (layout contract). */
.site-header {
  position: relative;
  z-index: 5;
  padding: var(--header-top) var(--header-inset) 0;
}

.site-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 3.5rem;
  padding: 0.25rem clamp(var(--space-2), 1.4vw, var(--space-4));
  border-radius: var(--radius-small);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-hairline);
}

/* Tablet centres the brand and desktop starts with it; account and cart stay
   together at the end. Phones split them around the centred brand below. */
.site-brand {
  grid-column: 2;
  grid-row: 1;
}

.site-nav__utilities {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* Align the icon glyph, not its larger touch target, with the bar padding. */
  margin-inline-end: calc((1.45rem - 2.75rem) / 2);
}

@media (min-width: 64rem) {
  .site-brand {
    grid-column: 1;
    justify-self: start;
  }
}

@media (width < 48rem) {
  .site-nav__utilities { display: contents; }

  .site-nav__utilities > :first-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-inline-start: calc((1.45rem - 2.75rem) / 2);
  }

  .site-nav__utilities > :last-child {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-inline-end: calc((1.45rem - 2.75rem) / 2);
  }
}

.site-brand {
  display: flex;
  align-items: center;
  scale: 1.1;
  transform-origin: center top;
}

.site-brand .link {
  min-height: 2.75rem;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
}

.site-brand__logo {
  display: block;
  width: clamp(8.5rem, 11vw, 9.5rem);
  height: auto;
}

.site-footer__nav,
.cart-line-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.site-nav__utilities > .link--secondary,
.site-footer .link--secondary {
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border-color: transparent;
  background: transparent;
  font-size: 0.83rem;
  font-weight: 700;
}

.site-nav__utilities > .link--secondary {
  position: relative;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  color: var(--color-text);
}

.site-nav .material-icon { width: 1.45rem; height: 1.45rem; }

.site-nav__count {
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-end: 0.05rem;
  display: grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.site-nav .link--primary { padding-inline: 1.25rem; }

.site-header .field {
  grid-template-columns: auto minmax(7.5rem, auto);
  align-items: center;
}

.site-header .field label {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-header select {
  min-height: 2.75rem;
  padding-block: 0.55rem;
  border-radius: var(--radius-pill);
}

/* One shell for every storefront page: only the page gutter insets it, so
   the content edges match on every page (layout contract). The footer
   content shares the same inset. */
.page-shell,
.site-footer__inner { margin-inline: var(--page-gutter); }

.page-shell {
  min-height: 58vh;
  padding-block: clamp(var(--space-4), 5vw, var(--space-7));
}

.page-shell:has(> .catalog-hero),
.page-shell:has(> .catalog-controls) { padding-block-start: var(--space-4); }

.breadcrumbs {
  margin-block-end: clamp(var(--space-4), 4vw, var(--space-6));
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.breadcrumbs:has(+ .catalog-hero) { margin-block-end: var(--space-3); }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li { white-space: nowrap; }

.breadcrumbs li + li::before {
  content: "✦";
  margin-inline-end: var(--space-2);
  color: var(--color-detail);
  font-size: 0.62rem;
}

.breadcrumbs .link {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.breadcrumbs [aria-current="page"] { color: var(--color-text-muted); }

.site-footer {
  background: var(--color-surface-feature);
  color: var(--color-text-feature);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: clamp(var(--space-5), 5vw, var(--space-7));
}

.site-footer__tagline {
  max-width: 31ch;
  margin: 0;
  color: var(--color-text-feature);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: 480;
  line-height: 1.15;
}

.site-footer__nav { justify-content: flex-end; }
.site-footer .link--secondary { color: var(--color-text-feature); }

.catalog-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(18rem, 28vw, 25rem);
  padding: clamp(var(--space-4), 5vw, var(--space-6));
  border-radius: var(--radius-medium);
  background: var(--color-surface-feature);
  color: var(--color-text-feature);
}

.catalog-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(20 18 19 / 88%) 0%, rgb(20 18 19 / 55%) 48%, rgb(20 18 19 / 12%) 100%);
  content: "";
  pointer-events: none;
}

.catalog-hero:not(.catalog-hero--with-media)::after { display: none; }

.catalog-hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-hero__content {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.catalog-hero .eyebrow { color: var(--color-detail); }

.catalog-hero h1 {
  max-width: 10ch;
  margin-block: var(--space-1) var(--space-2);
  color: var(--color-text-feature);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 520;
}

.catalog-hero__introduction {
  max-width: 43ch;
  margin: 0;
  color: color-mix(in oklch, var(--color-text-feature) 88%, var(--color-detail));
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.55;
}

.catalog-hero + .catalog-controls { margin-block-start: var(--space-4); }

/* The storefront's page title is a small, quiet label above the toolbar
   rather than a display heading: the collection controls and grid stay the
   first thing the eye lands on. Its inset lines it up with the filter icon
   and, from 64rem, the card text. */
.catalog-title {
  max-width: none;
  margin-block: 0 var(--space-2);
  padding-inline: var(--space-3);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.catalog-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-height: 4rem;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
}

.catalog-toolbar .disclosure__summary {
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-1) 0 0;
  border: 0;
  background: transparent;
}

.catalog-filters__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-text);
  border-radius: 50%;
}

.catalog-toolbar .disclosure__marker { margin-inline-start: 0; }

.catalog-filters__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-surface-elevated);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.catalog-toolbar__count,
.catalog-controls__facts { margin: 0; }

.catalog-toolbar__count {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.catalog-toolbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.catalog-toolbar__end > .link {
  padding-inline: var(--space-1);
  border-color: transparent;
  background: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.catalog-sort-form { display: none; }

.catalog-toolbar__sort { position: relative; }

.catalog-toolbar__sort label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.catalog-toolbar__sort select {
  min-height: 2.75rem;
  padding: 0.5rem 3rem 0.5rem 1.1rem;
  border-color: var(--color-text);
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.catalog-toolbar__sort-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  pointer-events: none;
  translate: 0 -50%;
}

.catalog-toolbar__sort-icon .material-icon { width: 1.1rem; height: 1.1rem; }

.catalog-controls__facts {
  color: var(--color-text-muted);
  font-size: 0.76rem;
}

/* Sorting sits first inside the filter panel. Once the submit-on-change
   script has marked the document, every panel control applies itself, so the
   panel's submit button is only for script-free browsers; desktop also moves
   sorting to the toolbar then, so the toolbar select is never shown without a
   way to apply it. */
.catalog-toolbar__sort,
.catalog-filters__label--filter,
.catalog-filters__reset { display: none; }

.catalog-filters__submit { display: contents; }
html[data-submit-on-change] .catalog-filters__submit { display: none; }

.catalog-filters__sort {
  max-width: 20rem;
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.catalog-filters__sort select {
  width: 100%;
  min-height: 2.75rem;
  padding-block: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
}

@media (width >= 64rem) {
  html[data-submit-on-change] .catalog-toolbar__sort { display: block; }
  html[data-submit-on-change] .catalog-filters__label--filter { display: inline; }

  html[data-submit-on-change] .catalog-filters__sort,
  html[data-submit-on-change] .catalog-filters__label--combined { display: none; }
}

/* Phones and tablets: one combined trigger with the result count; reset moves
   into the panel's action bar. The desktop toolbar starts at 64rem, as
   Allbirds' does at 1024px. */
@media (width < 64rem) {
  .catalog-controls .catalog-toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  }

  .catalog-title { padding-inline: var(--space-1); }
  .catalog-toolbar .disclosure { min-width: 0; }
  .catalog-toolbar__count { margin-inline-start: auto; }
  .catalog-toolbar__end { display: none; }
  .catalog-filters__reset { display: contents; }
  .catalog-filters__sort { max-width: none; }
  .catalog-toolbar .disclosure__panel { padding: var(--space-3) var(--space-3) 0; }
}

.catalog-controls > .field-error { margin-block: var(--space-2) 0; }

/* The open filter panel floats beneath the toolbar so the closed toolbar
   keeps its single-row composition; it scrolls when taller than the view. */
.catalog-toolbar .disclosure__panel {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline: 0;
  max-height: min(70vh, 40rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-medium);
}

.catalog-filters__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  align-items: start;
  gap: var(--space-4) var(--space-5);
}

.catalog-filters__fields .field { min-width: 0; }
.catalog-filters__fields input:not([type="checkbox"]) { width: 100%; }
.catalog-filters__fields select { width: 100%; }

.catalog-filters__fields .filter-group {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.catalog-filters__fields .filter-group legend {
  margin-block-end: var(--space-1);
  padding: 0;
}

/* Below the desktop toolbar the filter groups are collapsed sections so every
   group heading fits near the top of the panel. The summary names the group,
   so the group's own legend or label is only announced there. */
@media (width < 64rem) {
  .catalog-filters__fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .catalog-filters__fields > .collapsible:not(:last-child) { border-block-end: 1px solid var(--color-border); }

  .catalog-filters__fields > .collapsible > .collapsible__content { padding-block-end: var(--space-3); }

  .catalog-filters__fields > .collapsible .filter-group > legend,
  .catalog-filters__fields > .collapsible .field:has(> select) > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* With the desktop toolbar every group shows expanded, exactly as a plain list
   of fieldsets: the summary disappears, and the enhancement holds each group
   open. The group keeps the summary's label as its name. Without scripting,
   closed content still renders through ::details-content; browsers without it
   keep the working toggle instead. */
@supports selector(::details-content) {
  @media (width >= 64rem) {
    .catalog-filters__fields > .collapsible > .collapsible__summary { display: none; }
    .catalog-filters__fields > .collapsible::details-content { content-visibility: visible; }
  }
}

.catalog-filters__group-count {
  font-variant-numeric: tabular-nums;
}

.catalog-filters__actions {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.filter-group legend {
  padding-inline: var(--space-1);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.filter-group--range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.product-attributes {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-3);
}

.product-attributes > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--color-border);
}

.product-attributes dt { color: var(--color-text-muted); }
.product-attributes dd { margin: 0; font-weight: 650; }

.catalog-filters__fields select {
  min-height: 2.75rem;
  padding-block: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
}

.product-grid,
.cart-lines,
.variant-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.product-card { min-width: 0; }

/* The card is a white tile on the warm canvas: the elevated surface and a
   medium radius set it apart, with no border or shadow at rest or on hover. */
.product-card > .link {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-medium);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
  box-shadow: none;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  background: var(--color-surface-muted);
}

.product-card__badge {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-surface-elevated) 92%, transparent);
  color: var(--color-text);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__details {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.product-card__heading {
  display: grid;
  gap: var(--space-1);
}

.product-card h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.product-card p { margin: 0; }
.product-card__category { color: var(--color-accent); }

.product-card__price {
  color: var(--color-text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.product-card__availability {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-card__availability::before {
  display: inline-block;
  width: 0.42rem;
  aspect-ratio: 1;
  margin-inline-end: 0.42rem;
  border-radius: 50%;
  background: var(--color-detail);
  content: "";
  vertical-align: 0.05em;
}

.product-detail__header { margin-block-end: clamp(var(--space-4), 4vw, var(--space-6)); }

.product-detail__header h1 {
  max-width: 15ch;
  margin-block-start: var(--space-1);
}

.product-detail__layout {
  display: grid;
  gap: clamp(var(--space-4), 5vw, var(--space-7));
}

.product-detail__media { min-width: 0; }

.product-detail__purchase,
.content-panel,
.error-page {
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-small);
}

.product-detail__purchase,
.content-panel,
.error-page {
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border-radius: var(--radius-large);
}

.product-detail__purchase { align-self: start; }

/* The panel's padding alone spaces its first block, whichever it is (the
   description is optional). */
.product-detail__purchase > :first-child { margin-block-start: 0; }

.product-detail__purchase > .product-offer:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.product-detail__purchase > .variant-list:first-child { border-block-start: 0; }

.product-detail__description {
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
}

.variant-list {
  display: grid;
  gap: 0;
  margin-block: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.variant-list li {
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

/* Panels keep a readable width centred in the shell, and the breadcrumbs
   and heading above them line up with the panel (layout contract). */
.content-panel,
.error-page,
.page-shell:has(> .content-panel:not(.cart-panel), > .error-page) > .breadcrumbs {
  max-width: var(--panel-width);
  margin-inline: auto;
}

.cart-panel,
.page-shell:has(> .cart-panel) > .breadcrumbs {
  max-width: var(--cart-width);
  margin-inline: auto;
}

/* The cart's heading keeps the global 22ch measure, and its start edge stays
   on the centred cart panel's start edge rather than centring the narrower
   box (layout contract). */
.page-shell:has(> .cart-panel) > h1 {
  max-width: min(22ch, var(--cart-width));
  margin-inline: max(0px, calc((100% - var(--cart-width)) / 2)) auto;
}

/* An empty cart's notice, and the link to the products below it, sit
   centred in the centred cart panel. */
.cart-panel > .empty-state { margin-inline: auto; }

.cart-panel > .empty-state + .link {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

.empty-state {
  max-width: var(--text-width);
  margin-block: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.cart-lines {
  display: grid;
  gap: var(--space-3);
}

.cart-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
}

.cart-line h3 { margin-block-end: var(--space-1); }
.cart-line p { margin-block-end: var(--space-1); }
.cart-line-actions form { margin: 0; }

.cart-total {
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-variant-numeric: tabular-nums;
}

.checkout-page > p > strong,
.order-status p:last-of-type { font-variant-numeric: tabular-nums; }

.admin-page > h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.admin-page form {
  align-items: end;
  margin-block: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

code {
  padding: 0.12em 0.35em;
  border-radius: 0.35rem;
  background: var(--color-surface-muted);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.product-detail__media {
  display: grid;
  gap: clamp(var(--space-4), 3vw, var(--space-5));
}

/* Product photographs: stacked without JavaScript; product-gallery.js shows
   one large image and reveals the thumbnails that switch it. */
.product-gallery {
  display: grid;
  gap: var(--space-3);
}

.product-gallery__images,
.product-gallery__thumbnails {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-gallery__images {
  display: grid;
  gap: var(--space-3);
}

.product-gallery__image[hidden],
.product-gallery__thumbnails[hidden] { display: none; }

.product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface-muted);
}

.product-gallery__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-gallery__thumbnail {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  cursor: pointer;
}

.product-gallery__thumbnail[aria-current="true"] {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.product-gallery__thumbnail:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.product-gallery__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-offer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  margin-block: var(--space-4);
  padding-block: var(--space-3);
  border-block: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.product-offer__price {
  font-size: 1.35rem;
  font-weight: 600;
}

.product-offer__availability { color: var(--color-text-muted); }

.product-360 {
  --ci360-hotspot-brand-color: var(--color-accent);
  --ci360-focus-color: var(--color-focus);
  --ci360-fullscreen-bg: var(--color-surface-canvas);
  --ci360-button-bg: var(--color-media-control-surface);
  --ci360-button-bg-hover: var(--color-surface-elevated);
  --ci360-icon-color: var(--color-media-control-text);
  --ci360-icon-color-hover: var(--color-accent);
  margin: 0;
}

.product-360__stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--product-360-aspect, auto);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-medium);
  touch-action: pan-y;
}

.product-360__fallback img,
.product-360__mount {
  display: block;
  width: 100%;
  height: 100%;
}

.product-360__fallback {
  position: absolute;
  inset: 0;
  display: block;
}

.product-360__fallback img,
.product-360__mount canvas { border-radius: calc(var(--radius-large) - 1px); }

.product-360__fallback img { object-fit: contain; }
.product-360__fallback[hidden],
.product-360__controls[hidden] { display: none !important; }

.product-360__mount {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.product-360__controls {
  position: absolute;
  inset-inline-end: var(--space-2);
  inset-block-end: var(--space-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-360__controls .button {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-color: var(--color-media-control-border);
  border-radius: 50%;
  background: var(--color-media-control-surface);
  color: var(--color-media-control-text);
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}

.product-360__controls .button[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.material-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.material-icon[hidden] { display: none; }

.product-360[data-product-360-zoomed] .product-360__stage,
.product-360[data-product-360-zoomed] .product-360__mount { touch-action: none; }

.product-360__stage:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-canvas);
}

.product-360__stage:fullscreen .product-360__mount {
  height: 100%;
  aspect-ratio: auto !important;
}

.product-360__stage:fullscreen .cloudimage-360-inner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.product-360__stage:fullscreen canvas {
  width: auto !important;
  max-width: 100%;
  max-height: 100%;
}

form {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field label {
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.field--checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
}

.field--checkbox input {
  width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.field--checkbox label {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  text-transform: none;
}

.disclosure__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem 0.5rem 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.015em;
  line-height: 1.2;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary .material-icon { width: 1.2rem; height: 1.2rem; }

.disclosure__marker {
  display: inline-grid;
  place-items: center;
  margin-inline-start: var(--space-1);
}

.disclosure[open] > .disclosure__summary .disclosure__marker { rotate: 180deg; }

.collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-block: var(--space-1);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1.2;
  list-style: none;
  text-transform: uppercase;
}

.collapsible__summary::-webkit-details-marker { display: none; }
.collapsible__label { min-width: 0; }

.collapsible__marker {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.collapsible__marker .material-icon { width: 1.2rem; height: 1.2rem; }
.collapsible[open] > .collapsible__summary .collapsible__marker { rotate: 180deg; }

input, select, textarea, .button, .link {
  min-height: 2.75rem;
  font: inherit;
}

input, select, textarea {
  max-width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 var(--color-input-inset);
}

input[type="number"],
input[readonly],
.cart-line { font-variant-numeric: tabular-nums; }

textarea {
  width: min(100%, 42rem);
  min-height: 7rem;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--color-danger); }

.button,
.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button--primary,
.link--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-small);
}

.button--secondary,
.link--secondary {
  background: transparent;
  color: var(--color-text);
}

.button--destructive,
.link--destructive {
  border-color: var(--color-danger);
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

.button--destructive::before,
.link--destructive::before {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  aspect-ratio: 1;
  margin-inline-end: 0.45rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "!";
  font-size: 0.7rem;
  line-height: 1;
}

.link--skip-link {
  position: fixed;
  /* Leaves room above the 3px focus outline and its 3px offset, so the ring
     is not clipped at the top of the viewport. */
  inset-block-start: calc(var(--space-1) * 2);
  inset-inline: 0;
  z-index: 10;
  width: max-content;
  min-height: 0;
  margin-inline: auto;
  padding: 0.3rem 0.875rem;
  border-color: var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.link--skip-link:not(:focus-visible) {
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
}

/* Where the brand is centred, a pill floating at the top would cover the logo,
   so the focused storefront link takes its own row above the header instead;
   it is still centred and leaves room for its focus ring. */
@media (width < 64rem) {
  .link--skip-link:focus-visible:has(+ .site-header) {
    position: relative;
    inset: auto;
    display: flex;
    margin-block-start: calc(var(--space-1) * 2);
  }
}

/* main takes tabindex="-1" only so the skip link can move focus to it; it is
   not a user-operable control, so it shows no focus ring. */
main[tabindex="-1"]:focus { outline: none; }

.feedback {
  min-height: 1.5rem;
  max-width: var(--text-width);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-inline-start-width: 4px;
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.feedback p { margin: 0; }

.feedback:empty {
  min-height: 0;
  padding: 0;
  border: 0;
}

.feedback--success {
  border-color: var(--color-success);
  background: var(--color-success-surface);
  color: var(--color-text);
}

.feedback--error,
.field-error,
.cart-line-status { color: var(--color-danger); }

.feedback--error {
  border-color: var(--color-danger);
  background: var(--color-danger-surface);
}

.field-error {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
}

/* Required-field asterisks are an administration convention, shown by
   admin.css; storefront labels stay as they are. */
.field-required { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) {
  a:hover { text-decoration-thickness: 0.12em; }

  .button--primary:hover,
  .link--primary:hover {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
  }

  .button--secondary:hover,
  .link--secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .site-brand .link:hover,
  .site-nav__utilities > .link--secondary:hover,
  .site-footer .link--secondary:hover,
  .breadcrumbs .link:hover {
    border-color: transparent;
    background: transparent;
    color: var(--color-accent);
  }

  .site-footer .link--secondary:hover { color: var(--color-detail); }

  .disclosure__summary:hover { border-color: var(--color-text); }

  .product-card > .link:hover { color: var(--color-text); }

  @media (prefers-reduced-motion: no-preference) {
    .product-card > .link:hover .product-card__media img { scale: 1.03; }
  }

  .button--destructive:hover,
  .link--destructive:hover { background: color-mix(in oklch, var(--color-danger) 16%, var(--color-danger-surface)); }

  .product-360__controls .button:hover {
    border-color: var(--color-focus);
    color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .link { transition: scale var(--motion-press-duration) ease-out; }

  .disclosure__marker,
  .collapsible__marker { transition: rotate 200ms ease-out; }
  .product-card__media img { transition: scale 300ms ease-out; }

  .button:not(:disabled):active,
  .link:active { scale: 0.97; }

  .product-card > .link:active { scale: none; }
}

/* Tablets already show four columns, as Allbirds does; their cards are too
   narrow to set the price beside the name, so that waits for 90rem. */
@media (min-width: 48rem) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Name and price sit side by side only when four columns leave the name
   room for about two lines beside the price; measured with the showcase
   catalogue's longest names, 80rem still wrapped many to three or four. */
@media (min-width: 90rem) {
  .product-card__heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

@media (min-width: 64rem) {
  /* The media column absorbs wide screens; the purchase column keeps a
     readable width and ends on the shell edge. */
  .product-detail__layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, min(42rem, 36%));
    align-items: start;
  }

  .product-detail__media {
    position: sticky;
    inset-block-start: var(--space-4);
  }

  /* Gallery and 360° viewer together are taller than a screen; a sticky
     column would hide the viewer until the page ends. */
  .product-detail__media:has(.product-gallery):has(.product-360) { position: static; }

  /* Thumbnails run down the left of the large image, as a column. */
  .product-gallery--enhanced {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: start;
  }

  .product-gallery--enhanced .product-gallery__images { grid-column: 2; grid-row: 1; }

  .product-gallery--enhanced .product-gallery__thumbnails {
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
  }
}

/* The fluid shell keeps growing on very wide screens; a fifth column keeps
   cards near the size they have on an ordinary desktop. */
@media (min-width: 120rem) {
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 48rem) {
  .site-header .field { grid-template-columns: 1fr; }

  .site-header .field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__nav { justify-content: flex-start; }

  .catalog-hero {
    min-height: 22rem;
    padding: var(--space-5);
  }

  .catalog-hero::after {
    background: linear-gradient(0deg, rgb(20 18 19 / 88%) 0%, rgb(20 18 19 / 48%) 68%, rgb(20 18 19 / 12%) 100%);
  }

  .cart-line {
    align-items: stretch;
    flex-direction: column;
  }

  .cart-line-actions,
  .cart-line-actions form { align-items: stretch; }
}

@media (max-width: 32rem) {
  .site-brand__logo { width: 9rem; }
  .breadcrumbs { margin-block-end: var(--space-4); }

  .catalog-hero {
    min-height: 20rem;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-medium);
  }

  .catalog-hero h1 { font-size: clamp(2.6rem, 13vw, 3.35rem); }

  .catalog-toolbar .disclosure__summary { gap: var(--space-1); }
  .catalog-filters__actions .button { width: 100%; }
  .product-grid { gap: var(--space-2); }
  .product-card__details { padding: var(--space-2) var(--space-1) 0; }
  .product-card__category { font-size: 0.62rem; }
  .product-card__price { font-size: 0.82rem; }

  .content-panel,
  .error-page,
  .product-detail__purchase { border-radius: var(--radius-medium); }

  form:not(.cart-line-actions form) {
    align-items: stretch;
    flex-direction: column;
  }

  form:not(.cart-line-actions form) > .field,
  form:not(.cart-line-actions form) > .button,
  form:not(.cart-line-actions form) > .link,
  form:not(.cart-line-actions form) input:not([type="checkbox"], [type="radio"]),
  form:not(.cart-line-actions form) select,
  form:not(.cart-line-actions form) textarea { width: 100%; }
}

/* Pagination
   A generic ui.Pagination control (numbered pages between previous/next
   arrows, current page filled) and the catalog's wrapper beneath the grid.
   Kept as one trailing section so it owns its own media queries. */
.catalog-pagination {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}

.catalog-pagination__range {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__item { display: flex; }

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
}

.pagination__link:hover { background-color: var(--color-surface-muted); }

.pagination__link:focus-visible { outline-offset: 2px; }

.pagination__link--current,
.pagination__link--current:hover {
  background-color: var(--color-surface-feature);
  color: var(--color-text-feature);
}

.pagination__link--edge { padding-inline: 0; }

.pagination__link--disabled,
.pagination__link--disabled:hover {
  background-color: transparent;
  color: var(--color-border-strong);
}

.pagination__item--ellipsis {
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .pagination__link { transition: background-color 150ms ease-out, color 150ms ease-out; }
}

/* Phones fit six numbers, an ellipsis, and both arrows on one line by
   narrowing (not shortening) the targets; narrower screens wrap. */
@media (width < 48rem) {
  .catalog-pagination { margin-block-start: var(--space-5); }

  .pagination__list { gap: 0; }

  .pagination__link {
    min-width: 2.5rem;
    padding-inline: var(--space-1);
  }
}