@layer reset, base, components, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; min-width: 320px; }
  img, svg { max-width: 100%; display: block; }
  a { color: inherit; }
  button, input, textarea { font: inherit; }
}

@layer base {
  :root {
    --ink: #171a1f;
    --graphite: #2b3038;
    --muted: #68707c;
    --line: #d8dde5;
    --line-strong: #aeb7c4;
    --paper: #ffffff;
    --panel: #f4f6f8;
    --panel-2: #e9edf2;
    --cobalt: #1358db;
    --cobalt-dark: #0c3f9f;
    --orange: #ff6b1a;
    --orange-soft: #fff1e8;
    --green: #137f4b;
    --danger: #b3261e;
    --danger-soft: #fff0ee;
    --shadow: 0 18px 50px rgba(23, 26, 31, .10);
    --shadow-hard: 8px 8px 0 rgba(19, 88, 219, .10);
    --max: 1180px;
    --gutter: clamp(18px, 4vw, 48px);
    --radius: 3px;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  body {
    font-family: var(--sans);
    color: var(--ink);
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--paper);
    background-size: 44px 44px;
    background-position: -1px -1px;
    line-height: 1.5;
  }

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

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

  .skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 100;
    transform: translateY(-160%);
    background: var(--ink);
    color: var(--paper);
    padding: 10px 14px;
    text-decoration: none;
    border-radius: var(--radius);
  }

  .skip-link:focus { transform: translateY(0); }

  .container {
    width: min(var(--max), calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
  }

  main { background: rgba(255,255,255,.82); }

  h1, h2, h3, p { margin-top: 0; }

  h1, h2, h3 {
    letter-spacing: -.035em;
    line-height: .98;
  }

  h1 {
    font-size: clamp(3rem, 10vw, 7.4rem);
    max-width: 10ch;
  }

  h2 { font-size: clamp(2rem, 5vw, 4.2rem); }
  h3 { font-size: clamp(1.2rem, 2.4vw, 1.75rem); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--graphite);
    border: 1px solid var(--line-strong);
    background: var(--paper);
    padding: 7px 10px;
  }

  .eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    background: var(--orange);
    box-shadow: 13px 0 0 var(--cobalt);
  }

  .lead {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--graphite);
    max-width: 64ch;
  }

  .mono { font-family: var(--mono); }
  .muted { color: var(--muted); }
}

@layer components {
  .preview-banner {
    background: repeating-linear-gradient(135deg, var(--ink) 0 12px, #252a32 12px 24px);
    color: var(--paper);
    font-family: var(--mono);
    font-size: .82rem;
    padding: 9px var(--gutter);
    text-align: center;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
  }

  .nav-shell {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border: 2px solid var(--ink);
    background:
      linear-gradient(90deg, transparent 48%, var(--ink) 48% 54%, transparent 54%),
      linear-gradient(transparent 48%, var(--ink) 48% 54%, transparent 54%),
      var(--paper);
    position: relative;
    box-shadow: 5px 5px 0 var(--orange);
  }

  .brand-mark::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 4px;
    width: 8px;
    height: 8px;
    background: var(--cobalt);
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: .82rem;
  }

  .site-nav a {
    text-decoration: none;
    padding: 10px 11px;
    border: 1px solid transparent;
    color: var(--graphite);
  }

  .site-nav a:hover,
  .site-nav a[data-auth-state='in'] {
    border-color: var(--line-strong);
    background: var(--panel);
    color: var(--ink);
  }

  .cart-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  [data-cart-count] {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    background: var(--orange);
    color: var(--ink);
    border: 1px solid var(--ink);
    font-weight: 700;
    font-size: .76rem;
  }

  .btn-primary,
  .btn-secondary,
  .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
  }

  .btn-primary {
    color: var(--paper);
    background: var(--cobalt);
    border: 1px solid var(--cobalt-dark);
    box-shadow: 5px 5px 0 rgba(19, 88, 219, .16);
  }

  .btn-primary:hover { background: var(--cobalt-dark); }

  .btn-secondary {
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink);
  }

  .btn-secondary:hover { background: var(--orange-soft); box-shadow: 4px 4px 0 var(--orange); }

  .auth-submit,
  .cart-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
  }

  .auth-submit.btn-primary,
  .cart-submit.btn-primary {
    color: var(--paper);
    background: var(--cobalt);
    border: 1px solid var(--cobalt-dark);
    box-shadow: 5px 5px 0 rgba(19, 88, 219, .16);
  }

  .auth-submit.btn-primary:hover,
  .cart-submit.btn-primary:hover { background: var(--cobalt-dark); }

  .text-link {
    min-height: auto;
    padding: 0 0 4px;
    border-bottom: 2px solid var(--orange);
    border-radius: 0;
    font-family: var(--mono);
    font-size: .85rem;
  }

  .section {
    padding: clamp(58px, 9vw, 116px) 0;
    border-top: 1px solid var(--line);
  }

  .section-head {
    display: grid;
    gap: 18px;
    margin-bottom: clamp(28px, 5vw, 54px);
  }

  .section-head.split {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
    align-items: end;
  }

  .spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .spec-cell {
    padding: 20px;
    border-right: 1px solid var(--line-strong);
    min-height: 126px;
  }

  .spec-cell:last-child { border-right: 0; }

  .spec-cell strong {
    display: block;
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }

  .spec-cell span {
    display: block;
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.04em;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .product-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--paper);
    border: 1px solid var(--ink);
    min-height: 100%;
    box-shadow: var(--shadow-hard);
  }

  .product-card::before {
    content: attr(data-category);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    padding: 5px 7px;
  }

  .product-media {
    min-height: 210px;
    border-bottom: 1px solid var(--ink);
    background: var(--panel);
    overflow: hidden;
  }

  .product-media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  .product-swatch {
    height: 240px;
    position: relative;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      linear-gradient(135deg, #f9fafb, #e7ebf1);
    background-size: 22px 22px, 22px 22px, 100% 100%;
  }

  .product-swatch::before,
  .product-swatch::after {
    content: '';
    position: absolute;
    border: 2px solid var(--ink);
    background: rgba(255,255,255,.76);
  }

  .product-swatch::before {
    width: 48%;
    height: 34%;
    left: 24%;
    top: 32%;
    box-shadow: 10px 10px 0 rgba(19, 88, 219, .18);
  }

  .product-swatch::after {
    width: 18%;
    height: 18%;
    right: 20%;
    bottom: 22%;
    background: var(--orange);
  }

  .swatch-routing::before { width: 64%; height: 18%; left: 18%; top: 46%; }
  .swatch-routing::after { width: 44%; height: 10%; right: 18%; bottom: 28%; background: var(--cobalt); }
  .swatch-mounting::before { width: 38%; height: 58%; left: 30%; top: 20%; }
  .swatch-mounting::after { width: 10%; height: 10%; right: 27%; bottom: 29%; box-shadow: -34px -38px 0 var(--orange), -2px -74px 0 var(--cobalt); }
  .swatch-surface::before { width: 70%; height: 42%; left: 15%; top: 32%; }
  .swatch-surface::after { width: 12%; height: 12%; right: 16%; bottom: 18%; }
  .swatch-storage::before { width: 52%; height: 48%; left: 24%; top: 26%; }
  .swatch-storage::after { width: 30%; height: 10%; right: 26%; bottom: 39%; background: var(--cobalt); }

  .product-body {
    padding: 20px;
    display: grid;
    gap: 16px;
  }

  .product-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
  }

  .product-title-row h3 { margin-bottom: 0; }

  .price {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--cobalt-dark);
    white-space: nowrap;
  }

  .product-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }

  .filter-button {
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--graphite);
    padding: 10px 13px;
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
  }

  .filter-button:hover,
  .filter-button:focus-visible { border-color: var(--ink); background: var(--orange-soft); }

  .comparison {
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .comparison-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr;
    border-bottom: 1px solid var(--line-strong);
  }

  .comparison-row:last-child { border-bottom: 0; }

  .comparison-row > * { padding: 18px; }

  .comparison-row strong {
    font-family: var(--mono);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .exploded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
  }

  .exploded-diagram {
    min-height: 420px;
    border: 1px solid var(--ink);
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--panel);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
  }

  .part {
    position: absolute;
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 7px 7px 0 rgba(23, 26, 31, .10);
  }

  .part-a { width: 52%; height: 18%; left: 24%; top: 18%; }
  .part-b { width: 34%; height: 42%; left: 33%; top: 39%; }
  .part-c { width: 18%; height: 18%; left: 12%; top: 51%; background: var(--orange); }
  .part-d { width: 16%; height: 16%; right: 14%; top: 54%; background: var(--cobalt); }

  .callout-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .callout-list li {
    border: 1px solid var(--line-strong);
    background: var(--paper);
    padding: 16px;
  }

  .callout-list strong {
    display: block;
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cobalt-dark);
    margin-bottom: 6px;
  }

  .site-footer {
    background: var(--ink);
    color: #eef2f7;
    border-top: 4px solid var(--orange);
  }

  .footer-shell {
    padding: 28px 0;
    display: grid;
    gap: 18px;
  }

  .footer-top,
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
  }

  .footer-brand { font-weight: 700; letter-spacing: -.02em; }
  .footer-note, .footer-contact, .footer-links { color: #c7ced8; font-size: .92rem; }

  .footer-contact,
  .footer-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .footer-links a { text-decoration: none; }
  .footer-links a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--orange); }

  .page-hero {
    padding: clamp(58px, 9vw, 104px) 0 clamp(34px, 6vw, 72px);
    border-bottom: 1px solid var(--line);
  }

  .narrow { max-width: 820px; }

  #webwiz-auth,
  #webwiz-cart-page {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-hard);
  }

  #webwiz-auth { padding: clamp(18px, 4vw, 34px); }

  .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--ink);
    margin-bottom: 20px;
  }

  .auth-tab {
    border: 0;
    background: var(--panel);
    color: var(--graphite);
    padding: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .auth-tab + .auth-tab { border-left: 1px solid var(--ink); }
  .auth-tab-active { background: var(--cobalt); color: var(--paper); }

  .auth-form,
  .cart-inquiry { display: grid; gap: 16px; }

  .auth-fields,
  .cart-fields { display: grid; gap: 12px; }

  .auth-input,
  .cart-input {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    padding: 13px 14px;
    border-radius: var(--radius);
  }

  .auth-input:focus,
  .cart-input:focus { border-color: var(--cobalt); outline: 3px solid rgba(19,88,219,.18); }

  .auth-error {
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid #f0aaa3;
    padding: 10px 12px;
    margin: 0;
    font-weight: 700;
  }

  .auth-note,
  .cart-disclaimer { color: var(--muted); font-size: .9rem; margin: 0; }

  .auth-account {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }

  .auth-welcome { margin: 0; color: var(--muted); font-family: var(--mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .07em; }
  .auth-email { margin: 0; font-size: 1.3rem; font-weight: 700; }

  #webwiz-cart-page { padding: clamp(16px, 4vw, 30px); }

  .cart-items { display: grid; gap: 10px; }

  .cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }

  .cart-item-info { display: grid; gap: 3px; }
  .cart-item-title { font-weight: 700; }
  .cart-item-unit { color: var(--muted); font-family: var(--mono); font-size: .82rem; }

  .cart-item-qty {
    display: inline-grid;
    grid-template-columns: 34px 38px 34px;
    align-items: center;
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  .cart-qty-btn,
  .cart-remove {
    border: 0;
    background: var(--paper);
    color: var(--ink);
    min-height: 34px;
    cursor: pointer;
    font-weight: 700;
  }

  .cart-qty-btn:hover,
  .cart-remove:hover { background: var(--orange-soft); }

  .cart-item-count { text-align: center; font-family: var(--mono); font-weight: 700; border-inline: 1px solid var(--line-strong); }
  .cart-item-price { font-family: var(--mono); font-weight: 700; white-space: nowrap; }

  .cart-remove {
    border: 1px solid var(--line-strong);
    width: 36px;
    font-size: 1.2rem;
  }

  .cart-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    border-top: 2px solid var(--ink);
    margin-top: 18px;
    padding-top: 18px;
    font-size: 1.2rem;
  }

  .cart-total strong { font-family: var(--mono); font-size: 1.6rem; color: var(--cobalt-dark); }
  .cart-inquiry { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
  .cart-confirm, .cart-empty { margin: 16px 0 0; padding: 14px; border: 1px solid var(--line-strong); background: var(--panel); }
  .cart-confirm { border-color: #9bd6b9; background: #eefaf4; color: var(--green); font-weight: 700; }

  .detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: clamp(24px, 5vw, 58px);
    align-items: start;
  }

  .detail-panel {
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: clamp(20px, 4vw, 36px);
    box-shadow: var(--shadow-hard);
  }

  .detail-panel h1 { font-size: clamp(2.4rem, 6vw, 5.2rem); max-width: 12ch; }

  .detail-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .detail-meta span {
    border: 1px solid var(--line-strong);
    padding: 7px 9px;
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
  }

  .detail-swatch { min-height: 520px; border: 1px solid var(--ink); }

  .account-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
    gap: 28px;
    align-items: start;
  }

  .perk-panel {
    border: 1px solid var(--ink);
    background: var(--panel);
    padding: 22px;
  }

  .perk-panel ul { margin: 0; padding-left: 20px; }
  .perk-panel li + li { margin-top: 10px; }
}

@layer pages {
  .hero {
    padding: clamp(56px, 10vw, 130px) 0 clamp(48px, 8vw, 92px);
    border-bottom: 1px solid var(--line);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
    gap: clamp(28px, 6vw, 76px);
    align-items: end;
  }

  .hero-copy { display: grid; gap: 22px; }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .hero-board {
    border: 1px solid var(--ink);
    background: var(--paper);
    min-height: 560px;
    position: relative;
    box-shadow: 12px 12px 0 rgba(255,107,26,.22);
    overflow: hidden;
  }

  .hero-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 30px 30px;
  }

  .module {
    position: absolute;
    border: 2px solid var(--ink);
    background: rgba(255,255,255,.92);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .module-1 { width: 66%; height: 17%; left: 17%; top: 17%; box-shadow: 8px 8px 0 rgba(19,88,219,.20); }
  .module-2 { width: 40%; height: 24%; left: 12%; top: 45%; }
  .module-3 { width: 29%; height: 36%; right: 12%; top: 39%; background: #eef3ff; }
  .module-4 { width: 52%; height: 9%; left: 24%; bottom: 11%; background: var(--orange); color: var(--ink); }

  .axis-label {
    position: absolute;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    padding: 5px 7px;
  }

  .axis-x { left: 16px; bottom: 16px; }
  .axis-y { right: 16px; top: 16px; }

  .feature-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--ink);
    background: var(--paper);
    margin-top: 24px;
  }

  .feature-strip div { padding: 18px; border-right: 1px solid var(--line-strong); }
  .feature-strip div:last-child { border-right: 0; }
  .feature-strip strong { display: block; font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cobalt-dark); }

  .system-band {
    background: var(--ink);
    color: var(--paper);
  }

  .system-band .section-head p { color: #c8d0da; }
  .system-band .comparison { color: var(--ink); }

  .empty-catalog {
    border: 1px dashed var(--line-strong);
    padding: 24px;
    background: var(--panel);
  }
}

@media (max-width: 920px) {
  .hero-grid,
  .exploded,
  .detail-shell,
  .account-layout,
  .section-head.split { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-cell:nth-child(2) { border-right: 0; }
  .spec-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
  .hero-board { min-height: 440px; }
}

@media (max-width: 680px) {
  .nav-shell { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .site-nav { justify-content: flex-start; }
  .site-nav a { padding: 8px 9px; }
  .product-grid,
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip div { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .feature-strip div:last-child { border-bottom: 0; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-cell { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .spec-cell:last-child { border-bottom: 0; }
  .comparison-row { grid-template-columns: 1fr; }
  .comparison-row > * + * { border-top: 1px solid var(--line); }
  .cart-item { grid-template-columns: 1fr; align-items: stretch; }
  .cart-item-qty { width: max-content; }
  h1 { font-size: clamp(2.7rem, 17vw, 4.4rem); }
}