/* Hallmark · macrostructure: Catalogue · tone: technical · anchor hue: brand red
 * custom · Sora + Manrope · N11 click-only categories, 3 columns, no scrim · Ft1 mast-headed
 * audience: individual + corporate · use: browse, compare, request quote
 * motion: press feedback only · pre-emit critique: P5 H4 E4 S5 R5 V4
 */
@import url("../tokens.c932b98dd836.css");

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

@font-face {
  font-family: 'Sora';
  src: url("../fonts/sora-latin.b3e01db3c527.woff2") format('woff2');
  font-style: normal;
  font-weight: 100 800;
  font-display: swap
}

* {
  box-sizing: border-box
}

html {
  overflow-x: clip;
  scroll-padding-top: 1rem
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  display: block
}

svg {
  flex-shrink: 0
}

a {
  color: inherit;
  text-underline-offset: 4px
}

button,
input,
select,
textarea {
  font: inherit
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: var(--color-transparent)
}

button,
summary {
  cursor: pointer
}

button {
  color: inherit
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  min-width: 0;
  font-weight: 700;
  letter-spacing: -.025em
}

h1 {
  font-size: var(--text-display)
}

h2 {
  font-size: var(--text-md)
}

h3 {
  font-size: var(--text-base)
}

p {
  max-width: 65ch
}

ul {
  padding-inline-start: 1.25rem
}

fieldset {
  min-width: 0
}

small {
  font-size: var(--text-sm)
}

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

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

.container {
  width: calc(100% - 2rem);
  max-width: var(--page-max);
  margin-inline: auto
}

.main-content {
  padding-block: var(--space-xl) var(--space-3xl);
  min-height: 55svh
}

.main-content:focus {
  outline: none
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-md);
  transform: translateY(-200%);
  z-index: var(--z-modal);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-sm)
}

.skip-link:focus {
  transform: none
}

.muted,
.fine-print,
.sku {
  color: var(--color-muted)
}

.fine-print,
.sku {
  font-size: var(--text-sm)
}

.sku {
  overflow-wrap: anywhere
}

.fine-print {
  line-height: 1.65
}

.context-line {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .07em;
  margin-block-end: var(--space-sm)
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none
}

.text-link:hover {
  text-decoration: underline
}

.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md)
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out)
}

.button-dark {
  background: var(--color-ink);
  border-color: var(--color-ink)
}

.button-outline {
  background: var(--color-transparent);
  color: var(--color-ink);
  border-color: var(--color-input-rule)
}

.button-small {
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm)
}

.button-wide {
  width: 100%;
  margin-block-start: var(--space-md)
}

.button:active:not(:disabled) {
  transform: translateY(1px)
}

button:disabled,
.button[aria-disabled='true'],
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .55;
  cursor: not-allowed
}

.button[aria-busy='true'] {
  cursor: progress
}

.button[aria-busy='true']::after {
  content: '…'
}

.text-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: var(--color-transparent);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 4px
}

.site-header {
  position: relative;
  z-index: var(--z-dropdown);
  background: var(--color-header);
  color: var(--color-accent-ink)
}

.header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-sm) var(--space-md)
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 154px;
  max-width: 100%;
  min-height: 44px
}

.brand img {
  width: 100%;
  height: auto
}

.search {
  display: flex;
  grid-column: 1/-1;
  grid-row: 2;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: clip;
  color: var(--color-ink)
}

.search input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: var(--color-transparent);
  border: 0;
  border-radius: 0;
  padding: var(--space-sm) var(--space-md)
}

.search button {
  display: grid;
  place-items: center;
  min-width: 50px;
  min-height: 48px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 0
}

.search input:focus-visible {
  outline-offset: -4px
}

.search button:focus-visible {
  outline-offset: -5px
}

.header-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: var(--space-xs)
}

.header-action {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  min-width: 44px;
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700
}

.header-action>span:not(.cart-count) {
  display: none
}

.cart-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--color-header-raised);
  font-variant-numeric: tabular-nums
}

.nav-shell {
  border-top: 1px solid var(--color-header-rule);
  background: var(--color-header-raised)
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  flex-wrap: wrap
}

.main-nav>a,
.main-nav summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap
}

.main-nav>a:nth-of-type(2) {
  display: none
}

.main-nav>a:nth-of-type(3) {
  margin-inline-start: auto
}

.main-nav summary {
  list-style: none
}

.main-nav summary::-webkit-details-marker {
  display: none
}

.main-nav .staff-link {
  margin-inline-start: auto
}

.category-menu[open] summary {
  color: var(--color-focus-dark)
}

.mega-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: 65svh;
  overflow-y: auto
}

.mega-heading {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md)
}

.mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs)
}

.mega-grid a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-height: 64px
}

.mega-grid a strong {
  line-height: 1.4
}

.mega-grid a span {
  color: var(--color-muted);
  font-size: var(--text-sm)
}

.mega-note {
  padding-block-start: var(--space-md);
  margin-block-start: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm)
}

.site-header :focus-visible {
  outline-color: var(--color-focus-dark)
}

.site-header .mega-panel :focus-visible,
.site-header .search input:focus-visible {
  outline-color: var(--color-focus)
}

.catalog-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-block: var(--space-md) var(--space-xl)
}

.catalog-intro p:not(.context-line) {
  color: var(--color-muted);
  margin-block-start: var(--space-sm)
}

.catalog-intro .context-line {
  color: var(--color-muted)
}

.section {
  margin-block-start: var(--space-2xl)
}

.section-head,
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-lg)
}

.section-head p,
.page-heading p {
  margin-block-start: var(--space-xs)
}

.section-title {
  margin-block-end: var(--space-lg)
}

.discovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: clip
}

.discovery-copy {
  padding: var(--space-lg);
  order: 2
}

.discovery h2 {
  max-width: 32ch;
  font-size: var(--text-lg)
}

.discovery .context-line {
  color: var(--color-muted)
}

.discovery-image {
  display: grid;
  place-items: center;
  background: var(--color-surface);
  padding: var(--space-lg);
  min-height: 240px
}

.discovery-image img {
  width: 100%;
  height: 240px;
  object-fit: contain
}

.feature-specs {
  display: grid;
  gap: var(--space-xs);
  margin-block: var(--space-lg)
}

.feature-specs>div {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-sm)
}

.feature-specs dt {
  min-width: 80px;
  color: var(--color-muted)
}

.feature-specs dd {
  overflow-wrap: anywhere
}

.feature-price {
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.feature-price small {
  font-weight: 400;
  color: var(--color-muted)
}

.category-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: 1px solid var(--color-rule);
  gap: 0 var(--space-lg)
}

.category-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  min-width: 0
}

.category-tile strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.4;
  overflow-wrap: anywhere
}

.category-tile>span {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: var(--text-sm)
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md)
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: clip
}

.product-image {
  display: grid;
  place-items: center;
  aspect-ratio: 5/4;
  padding: var(--space-lg);
  text-decoration: none
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 240px
}

.image-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5
}

.product-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-paper-2)
}

.product-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-block-end: var(--space-xs)
}

.product-meta span:last-child {
  text-align: end
}

.product-card h3 {
  font-family: var(--font-body);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 700
}

.product-card h3 a {
  text-decoration: none;
  display: inline-block;
  min-height: 48px
}

.product-card .sku {
  margin-block-start: var(--space-xs);
  overflow-wrap: anywhere
}

.product-buy {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xs);
  padding-block-start: var(--space-lg);
  margin-block-start: auto
}

.product-buy small {
  display: block;
  color: var(--color-muted);
  margin-block-start: var(--space-2xs)
}

.price {
  font-size: var(--text-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.35
}

.price-pending {
  font-size: var(--text-base);
  color: var(--color-muted)
}

.product-card .price {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  white-space: nowrap
}

.empty-state {
  padding: var(--space-xl);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-md)
}

.empty-state p {
  color: var(--color-muted)
}

.catalog-empty {
  padding: var(--space-xl)
}

.catalog-empty h3 {
  font-size: var(--text-lg)
}

.catalog-empty p {
  margin-block: var(--space-sm) var(--space-lg)
}

.empty-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  flex-shrink: 0
}

.contact-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-block: 1px solid var(--color-rule);
  margin-block-start: var(--space-2xl)
}

.contact-band p {
  margin-block-start: var(--space-xs);
  color: var(--color-muted)
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-block-end: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted)
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none
}

.breadcrumb-category {
  max-width: 100%;
  overflow: clip;
  text-overflow: ellipsis
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg)
}

.catalog-filters {
  min-width: 0
}

.filter-disclosure {
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface)
}

.filter-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-weight: 800;
  list-style: none
}

.filter-form {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-md)
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0
}

.field label,
legend {
  font-weight: 700;
  font-size: var(--text-sm)
}

input:not([type=checkbox]):not([type=hidden]),
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--color-input-rule);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-sm);
  line-height: 1.5
}

input:not([type=checkbox]):not([type=hidden]),
select {
  height: 48px
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted);
  opacity: 1
}

.search input:not([type=checkbox]) {
  border: 0;
  padding-inline: var(--space-md)
}

select {
  padding-inline-end: var(--space-xl)
}

textarea {
  min-height: 128px;
  resize: vertical
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
  flex-shrink: 0
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-size: var(--text-sm)
}

.price-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  border: 0;
  padding: 0;
  margin: 0
}

.price-range legend {
  margin-block-end: var(--space-xs)
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-block-start: var(--space-xl)
}

.pagination>span {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm)
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl)
}

.product-gallery {
  min-width: 0
}

.product-main-image {
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  aspect-ratio: 6/5
}

.product-main-image img {
  width: 100%;
  height: 100%;
  max-height: 540px;
  object-fit: contain
}

.image-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm)
}

.thumbnail {
  width: 76px;
  height: 68px;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.thumbnail[aria-current=true] {
  border-color: var(--color-accent)
}

.product-information h1 {
  font-size: clamp(1.5625rem, 2.2vw, 1.953125rem)
}

.product-information>.sku {
  margin-block-start: var(--space-sm)
}

.detail-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  margin-block-start: var(--space-md);
  border-top: 1px solid var(--color-rule)
}

.detail-price>strong {
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.3
}

.detail-price>span {
  font-size: var(--text-sm);
  color: var(--color-muted)
}

.stock-status {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-block-end: var(--space-lg)
}

.in-stock {
  color: var(--color-success)
}

.add-form {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
  margin-block-end: var(--space-md)
}

.add-form .field {
  max-width: 88px
}

.add-form .button {
  flex: 1
}

.spec-list {
  margin-block: var(--space-lg);
  display: grid;
  gap: 0
}

.spec-list>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm)
}

.spec-list dt {
  color: var(--color-muted)
}

.spec-list dd {
  overflow-wrap: anywhere
}

.plain-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 75ch;
  color: var(--color-muted);
  margin-block-start: var(--space-md)
}

.product-description {
  padding-block-start: var(--space-xl);
  border-top: 1px solid var(--color-rule)
}

.checkout-layout,
.account-layout,
.dashboard-layout,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start
}

.cart-list {
  border-top: 1px solid var(--color-rule)
}

.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule)
}

.cart-item-image {
  background: var(--color-surface);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  height: 76px;
  padding: var(--space-xs)
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.cart-item h2 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  line-height: 1.5;
  letter-spacing: 0
}

.cart-item h2 a {
  text-decoration: none
}

.cart-item .sku {
  margin-block: var(--space-xs)
}

.cart-item-info>.muted {
  font-size: var(--text-sm)
}

.cart-item-end {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  flex-wrap: wrap
}

.quantity-form {
  display: flex;
  gap: var(--space-xs);
  align-items: center
}

.quantity-form input {
  max-width: 68px;
  height: 44px !important;
  min-height: 44px !important;
  padding: var(--space-xs) !important
}

.order-summary,
.form-panel,
.detail-panel {
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0
}

.order-summary h2,
.form-panel h2,
.detail-panel h2 {
  margin-block-end: var(--space-md)
}

.form-panel>.fine-print {
  margin-block-end: var(--space-lg)
}

.summary-lines {
  display: grid;
  gap: var(--space-md);
  margin-block: var(--space-lg)
}

.summary-lines>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  font-size: var(--text-sm)
}

.summary-lines dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-variant-numeric: tabular-nums
}

.summary-total>strong {
  font-size: var(--text-md)
}

.summary-total small {
  display: block;
  color: var(--color-muted)
}

.stack-form {
  display: grid;
  gap: var(--space-lg)
}

.stack-form>.button {
  justify-self: start
}

.stack-form>.button-wide {
  justify-self: stretch;
  margin: 0
}

.field-help {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
  min-height: 1.5em
}

.field-help ul {
  padding-inline-start: var(--space-md);
  margin-block: 0
}

.field-error input,
.field-error select,
.field-error textarea,
[aria-invalid=true] {
  border-color: var(--color-error) !important
}

.error-text,
.required-mark {
  color: var(--color-error)
}

.required-mark {
  font-size: var(--text-sm);
  font-weight: 400
}

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

.field-checkbox input {
  margin-block-start: 4px
}

.field-checkbox .field-help {
  grid-column: 2
}

.field-checkbox label {
  min-height: 44px
}

.notice {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-input-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  margin-block-end: var(--space-lg);
  font-size: var(--text-sm)
}

.notice.error {
  border-color: var(--color-error);
  background: var(--color-accent-soft);
  color: var(--color-error)
}

.notice.success,
.success-state {
  border-color: var(--color-success);
  background: var(--color-success-soft)
}

.notice ul {
  margin-block: var(--space-xs) 0
}

.notice ul.errorlist {
  list-style: none;
  padding: 0;
  margin: 0
}

.notice p+p {
  margin-block-start: var(--space-xs)
}

.messages {
  margin-block-end: var(--space-lg)
}

.quote-lines {
  border-top: 1px solid var(--color-rule)
}

.quote-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule)
}

.quote-line>div {
  min-width: 0
}

.quote-line h3 {
  font-family: var(--font-body);
  line-height: 1.5;
  letter-spacing: 0
}

.quote-line>strong {
  white-space: nowrap;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums
}

.quote-line .muted {
  font-size: var(--text-sm);
  margin-block-start: var(--space-xs)
}

.status-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap
}

.account-nav,
.admin-links {
  display: grid;
  gap: var(--space-xs)
}

.account-nav>a,
.admin-links>a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-sm);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  border-bottom: 1px solid var(--color-rule)
}

.account-nav .is-current {
  background: var(--color-paper-2)
}

.account-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none
}

.account-quote>div {
  display: grid;
  gap: var(--space-2xs)
}

.account-quote>div span {
  color: var(--color-muted);
  font-size: var(--text-sm)
}

.account-quote>strong {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm)
}

.account-quotes {
  border-top: 1px solid var(--color-rule)
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-lg);
  margin-block-end: var(--space-xl);
  border-block: 1px solid var(--color-rule)
}

.dashboard-stats dt {
  font-size: var(--text-sm);
  color: var(--color-muted)
}

.dashboard-stats dd {
  font-size: var(--text-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.admin-links {
  margin-block-start: var(--space-lg)
}

.sync-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm)
}

.empty-inline {
  padding-block: var(--space-lg);
  color: var(--color-muted)
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg)
}

.auth-context h1 {
  max-width: 18ch
}

.auth-context>p:not(.context-line) {
  color: var(--color-muted);
  margin-block: var(--space-md)
}

.auth-foot {
  padding-block-start: var(--space-lg);
  margin-block-start: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm)
}

.auth-foot a {
  font-weight: 700
}

.help-disclosure {
  margin-block-start: var(--space-xs)
}

.help-disclosure summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px
}

.help-disclosure p {
  color: var(--color-muted);
  padding-block: var(--space-xs)
}

.password-panel {
  max-width: 600px;
  margin-inline: auto
}

.password-panel h1 {
  font-size: var(--text-xl)
}

.password-panel>.muted {
  margin-block: var(--space-md) var(--space-lg)
}

.error-page {
  margin-block: var(--space-lg);
  max-width: 850px;
  min-height: 300px;
  justify-content: center
}

.error-page h1 {
  max-width: 20ch
}

.contact-details>p {
  margin-block-start: var(--space-md);
  color: var(--color-muted)
}

.contact-list {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl)
}

.contact-list dt {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-block-end: var(--space-xs)
}

.contact-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  overflow-wrap: anywhere
}

.contact-list address {
  font-style: normal;
  line-height: 1.8
}

.detail-panel>p {
  color: var(--color-muted);
  margin-block: var(--space-md)
}

.prose {
  max-width: 760px
}

.prose .lead {
  font-size: var(--text-md);
  margin-block-end: var(--space-xl)
}

.prose h2 {
  margin-block: var(--space-xl) var(--space-sm)
}

.prose p:not(.lead) {
  color: var(--color-muted)
}

.prose .action-row {
  margin-block-start: var(--space-xl)
}

.site-footer {
  background: var(--color-header);
  color: var(--color-accent-ink);
  padding-block: var(--space-xl) var(--space-lg)
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg)
}

.footer-top .brand {
  width: 150px
}

.footer-top p {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-header-muted)
}

.footer-top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  align-content: center
}

.footer-top nav a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--text-sm)
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--text-sm)
}

.footer-contact>span {
  color: var(--color-header-muted);
  padding-block-start: var(--space-xs)
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-header-rule);
  padding-block-start: var(--space-lg);
  margin-block-start: var(--space-lg);
  color: var(--color-header-muted);
  font-size: var(--text-sm)
}

.site-footer :focus-visible {
  outline-color: var(--color-focus-dark)
}

@media(hover:hover) {
  .button:hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover)
  }

  .button-dark:hover:not(:disabled) {
    background: var(--color-header-raised);
    border-color: var(--color-header-raised)
  }

  .button-outline:hover:not(:disabled) {
    background: var(--color-paper-2);
    border-color: var(--color-ink)
  }

  .header-action:hover,
  .main-nav>a:hover,
  .site-footer a:hover {
    color: var(--color-header-muted)
  }

  .mega-grid a:hover,
  .account-nav>a:hover,
  .admin-links>a:hover {
    background: var(--color-paper-2)
  }

  .product-card h3 a:hover,
  .cart-item h2 a:hover,
  .category-tile:hover strong,
  .account-quote:hover strong {
    color: var(--color-accent)
  }

  input:not([type=hidden]):not(:disabled):hover,
  textarea:hover,
  select:hover {
    background: var(--color-paper-2)
  }
}

@media(min-width:40rem) {
  .container {
    width: calc(100% - 3rem)
  }

  .header-main {
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: var(--space-lg)
  }

  .brand {
    width: 176px
  }

  .search {
    grid-column: auto;
    grid-row: auto
  }

  .header-actions {
    grid-column: auto;
    grid-row: auto;
    gap: var(--space-md)
  }

  .main-nav {
    gap: var(--space-xl)
  }

  .main-nav>a:nth-of-type(2) {
    display: flex
  }

  .mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .catalog-empty {
    flex-direction: row;
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-2xl)
  }

  .catalog-empty .empty-mark {
    flex-shrink: 0
  }

  .discovery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }

  .discovery-copy {
    order: 0;
    padding: var(--space-xl)
  }

  .discovery-image img {
    height: 300px
  }

  .discovery-image {
    min-height: 340px
  }

  .footer-top {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr)
  }

  .footer-contact {
    grid-column: 2
  }

  .footer-top nav {
    align-content: start;
    padding-block-start: var(--space-sm)
  }

  .dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .account-quote {
    grid-template-columns: minmax(0, 1fr) auto auto auto
  }

  .quote-line>strong {
    font-size: var(--text-base)
  }

  .cart-item {
    grid-template-columns: 100px minmax(0, 1fr) auto
  }

  .cart-item-end {
    grid-column: auto;
    display: grid;
    justify-items: end
  }

  .cart-item-image {
    height: 100px
  }

  .account-layout {
    grid-template-columns: 200px minmax(0, 1fr)
  }

  .auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-xl);
    padding-block: var(--space-xl)
  }

  .auth-context {
    padding-block-start: var(--space-xl)
  }

  .form-panel,
  .detail-panel,
  .order-summary {
    padding: var(--space-xl)
  }
}

@media(min-width:60rem) {
  .container {
    width: calc(100% - 4rem)
  }

  .main-content {
    padding-block-start: var(--space-xl)
  }

  .header-main {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: var(--space-xl)
  }

  .header-action>span:not(.cart-count) {
    display: inline
  }

  .header-actions {
    gap: var(--space-lg)
  }

  .header-main .brand {
    width: 180px
  }

  .mega-panel {
    padding: var(--space-xl)
  }

  .mega-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .catalog-intro {
    padding-block: var(--space-lg) var(--space-xl)
  }

  .discovery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr)
  }

  .discovery-copy {
    padding: var(--space-xl) var(--space-2xl)
  }

  .discovery-image img {
    height: 320px
  }

  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .catalog-layout {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-lg)
  }

  .catalog-results .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .catalog-filters {
    position: sticky;
    top: var(--space-md)
  }

  .product-detail {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-2xl)
  }

  .product-information {
    padding-block: var(--space-md)
  }

  .checkout-layout,
  .dashboard-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: var(--space-xl)
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-2xl)
  }

  .footer-top {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl)
  }

  .footer-contact {
    grid-column: auto;
    padding-block-start: var(--space-sm)
  }

  .auth-layout {
    max-width: 1050px;
    margin-inline: auto;
    gap: var(--space-3xl);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr)
  }

  .auth-panel {
    padding: var(--space-xl)
  }

  .catalog-empty {
    min-height: 280px
  }

  .account-layout {
    gap: var(--space-2xl)
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }

  .button:active:not(:disabled) {
    transform: none
  }
}

@media print {

  .site-header,
  .site-footer,
  .account-nav,
  .button,
  .text-button,
  .add-form {
    display: none
  }

  .main-content {
    padding: 0
  }

  .container {
    width: 100%
  }

  .checkout-layout {
    display: block
  }

  .order-summary,
  .detail-panel {
    break-inside: avoid
  }

  body {
    background: var(--color-surface);
    font-size: 12pt
  }
}