/* Picasso Intelligence — CubeMars storefront.
   Two densities on purpose: the home page breathes (one idea per screen, no
   borders, colour only where it means something), while the collection and
   compare pages stay dense, because that is where people read numbers. */

:root {
  --ink:        #1d1d1f;
  --ink-2:      #424245;
  --ink-3:      #6e6e73;
  --ink-4:      #86868b;
  --bg:         #ffffff;
  --bg-2:       #f5f5f7;   /* alternating band + product plates */
  --bg-3:       #fafafa;
  --ink-dark:   #000000;   /* the one dark band */
  --line:       #d2d2d7;
  --line-soft:  #e8e8ed;
  --accent:     #0071e3;
  --accent-ink: #0066cc;
  --warn:       #b25000;
  --radius:     18px;
  --radius-sm:  12px;
  --pill:       980px;
  --wrap:       980px;
  --wrap-wide:  1240px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 24px; letter-spacing: -0.01em; }
h4 { font-size: 17px; letter-spacing: normal; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.center { text-align: center; }

/* ---------- layout ---------- */

.wrap { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

.section { padding: 72px 0; }
/* The hero already sits on the tinted band, so the section under it needs only
   enough room to breathe — a full 72px just pushes the catalogue off screen. */
.hero + .section { padding-top: 26px; }
.hero + .section .section-head { margin-bottom: 20px; }
.section.alt { background: var(--bg-2); }
.section.tight { padding: 64px 0; }

/* Find by spec: the filter block runs ~230px tall, so a 64px gap here pushed a
   one-row result below the fold — you filtered, saw the count, and saw nothing. */
[data-page="select"] .section.tight { padding: 8px 0 56px; }
.section.dark { background: var(--ink-dark); color: #f5f5f7; }
.section.dark h2 { color: #f5f5f7; }
.section.dark p { color: #a1a1a6; }

.section-head { margin-bottom: 28px; }
.section-head h2 { margin-bottom: 10px; }
.section-head h2:only-child { margin-bottom: 0; }
.section-head p { font-size: 21px; color: var(--ink-3); max-width: 640px; margin: 0; }
.section-head > a {
  display: inline-block; margin-top: 16px; font-size: 17px;
}
.section-head > a::after { content: " \203A"; }

.eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-3); margin-bottom: 10px;
}
.lede { font-size: 21px; line-height: 1.38; color: var(--ink-3); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; border: 0; cursor: pointer; font: inherit;
  font-size: 17px; padding: 11px 22px; border-radius: var(--pill);
  background: var(--bg-2); color: var(--ink); text-decoration: none;
}
.btn:hover { background: #ebebef; text-decoration: none; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #0077ed; }
.btn-ghost { background: transparent; color: var(--accent); padding: 11px 0; }
.btn-ghost:hover { background: transparent; text-decoration: underline; }
.btn-ghost::after { content: " \203A"; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { font-size: 14px; padding: 7px 16px; }
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent);
}

/* ---------- announcement + header ---------- */

.announce {
  background: var(--bg-2); color: var(--ink-3);
  font-size: 12px; text-align: center; padding: 10px 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.announce span { opacity: .4; margin: 0 10px; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.header-bar {
  max-width: var(--wrap-wide); margin: 0 auto; padding: 0 22px;
  height: 62px; display: flex; align-items: center; gap: 26px;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* The logo is one lockup — mark and wordmark together — so it is a single
   image rather than an icon plus text. flex:none and max-width:none keep the
   header's flex row from squashing it out of proportion on narrow screens. */
.brand-logo { display: block; height: 34px; width: auto; max-width: none; flex: none; }
.site-footer .brand-logo { height: 30px; }

.nav { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex: 1; }
.nav > li { position: relative; }
/* One weight and size across the whole top row — the three entry points are
   peers, so none of them should look subordinate. */
.nav-link {
  display: block; padding: 8px 11px; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-radius: 8px; white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; }
/* Mark the current section with a rule, not a lighter weight — changing the
   weight made one item in the row look different from its peers. */
.nav-link[aria-current] { box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.nav-tool:hover { color: var(--accent); }
.chev { width: 9px; height: 9px; margin-left: 5px; opacity: .5; }

.submenu {
  position: absolute; left: 0; top: 100%; min-width: 264px;
  background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
  list-style: none; margin: 0; padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav > li:hover .submenu, .nav > li:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--ink); font-size: 14px; text-decoration: none;
}
.submenu a:hover { background: var(--bg-2); text-decoration: none; }
.sub-note { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }

.header-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--ink-2); position: relative;
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 4px;
}
.burger { display: none; }

.header-search { display: none; padding: 12px 22px 16px; border-top: 1px solid var(--line-soft); }
.header-search.open { display: block; }
.header-search form { max-width: var(--wrap); margin: 0 auto; }

/* ---------- drawer ---------- */

/* The whole drawer is hidden until wireHeader() puts .open on #drawer — style
   the container, not the scrim, or the panel sits on the page permanently. */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.drawer-panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(84vw, 340px);
  background: #fff; padding: 20px 22px; overflow-y: auto;
}
.drawer-panel .close { position: absolute; top: 12px; right: 12px; }
.drawer-group {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); margin: 26px 0 8px;
}
.drawer-panel a {
  display: block; padding: 9px 0; color: var(--ink); font-size: 17px; text-decoration: none;
}
.drawer-panel a.sub { padding-left: 12px; font-size: 15px; color: var(--ink-2); }

/* ---------- hero ---------- */

/* Text left, product plate right — the arrangement from the earlier design,
   kept because it reads faster than a centred stack on a wide screen. */
.hero { background: var(--bg-2); }
.hero-grid {
  max-width: var(--wrap-wide); margin: 0 auto; padding: 40px 22px 28px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 14px; }
.hero-art {
  background: #fff; border-radius: 28px; padding: 30px; margin: 0;
  display: grid; place-items: center;
}
/* The art is the tallest thing in the hero, so it decides how far down the
   first section starts. Cap it rather than letting the SVG set the height. */
.hero-art svg { max-height: 280px; width: auto; }
.hero-art img { max-height: 280px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  max-width: var(--wrap-wide); margin: 0 auto; padding: 0 22px;
  text-align: center;
}
.trust-row > div { font-size: 17px; color: var(--ink-2); }
.trust-row svg { width: 26px; height: 26px; display: block; margin: 0 auto 12px; color: var(--ink); }
.trust-row b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.trust-row .flag { font-size: 24px; display: block; margin-bottom: 10px; line-height: 1; }

/* ---------- the applications axis ----------
   Stacked under the series grid, not beside it. Picture-led and borderless so
   the two axes read as two different questions, not one list shown twice. */

.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.app-card {
  display: block; padding: 24px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; transition: border-color .15s;
}
.app-card:hover { border-color: var(--line); text-decoration: none; }
.app-card:hover h4 { color: var(--accent); }
.app-card .thumb { height: 160px; margin-bottom: 16px; }
.app-card h4 { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.app-card p { font-size: 14px; color: var(--ink-3); margin: 8px 0 0; }

/* ---------- category + product cards ---------- */

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* White, like the product photography itself — on a tinted card the photo's
   own white background shows as a pale rectangle sitting inside the card. */
.cat-card {
  display: block; padding: 22px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; transition: border-color .15s;
}
.cat-card:hover { border-color: var(--line); text-decoration: none; }
.cat-card .thumb { height: 150px; margin-bottom: 16px; }

/* Thumbnails have a fixed height. Photos are contained inside it; the fallback
   SVG needs !important because ART.render writes width/height inline, and an
   unconstrained SVG overflows and runs under the card text. */
.app-card .thumb, .cat-card .thumb, .compare-head .thumb {
  display: grid; place-items: center; overflow: hidden;
}
.app-card .thumb svg, .cat-card .thumb svg {
  height: 100% !important; width: auto !important; max-width: 100%;
}
/* Pixel heights, not percentages: inside a centred grid area a percentage
   height has nothing definite to resolve against, so the image kept its
   natural size and was cropped by the overflow rule instead of scaling. */
.cat-card .thumb img { width: 100%; height: 150px; object-fit: contain; display: block; }
.app-card .thumb img { width: 100%; height: 160px; object-fit: contain; display: block; }
.compare-head .thumb img { width: 100%; height: 96px; object-fit: contain; display: block; }
.cat-card h3 { font-size: 19px; margin-bottom: 6px; }
.cat-card p { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; }
.cat-card .more { font-size: 14px; color: var(--accent); }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card { position: relative; display: flex; flex-direction: column; }
.card-media {
  position: relative; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; display: grid; place-items: center;
  transition: border-color .15s;
}
.card:hover .card-media { border-color: var(--line); }
.card-media svg { max-height: 240px; }
.card-media img { width: 100%; height: 240px; object-fit: contain; display: block; }
/* Availability moves right so the flag can take the corner Pendulum uses. */
.badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .9); color: var(--ink-2);
}
.badge-us {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-2); text-align: center;
}
.badge-us .flag-svg { display: block; width: 42px; height: auto; margin: 0 auto 3px; }
.badge-us span { display: block; }

/* The browse tiles are short, so the badge lies on one line there instead of
   stacking flag over text. */
.badge-us.compact {
  display: flex; align-items: center; gap: 6px; text-align: left;
  font-size: 9.5px; letter-spacing: .02em;
}
.badge-us.compact .flag-svg { width: 22px; margin: 0; }
.cat-card, .app-card { position: relative; }
.badge.quote { background: #fff4e5; color: var(--warn); }
.card-series {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 5px;
}
.card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent); text-decoration: none; }

/* the four numbers people actually choose on */
.card-specs { margin-bottom: 10px; }
.card-torque {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.card-torque span { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.card-dims {
  font-size: 13px; color: var(--ink-3); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.card-price { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.card-price.is-quote { color: var(--ink-3); font-weight: 400; }
.card .buy { margin-top: auto; }

.compare-check {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--ink-3); cursor: pointer; margin-top: 8px;
}
.compare-check input { accent-color: var(--accent); }

/* ---------- rails ---------- */

.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-btn {
  position: absolute; top: 38%; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; z-index: 3;
  display: grid; place-items: center;
}
.rail-btn.prev { left: -14px; }
.rail-btn.next { right: -14px; }

/* ---------- page head ---------- */

.page-head { padding: 56px 0 30px; }
.page-head h1 { font-size: 44px; margin-bottom: 12px; }
.page-head p { font-size: 19px; color: var(--ink-3); max-width: 680px; margin: 0; }

/* Catalogue pages: the head and the filters are navigation, not content, so
   they are kept short enough that the first row of products is on screen. */
.page-head.compact { padding: 18px 0 10px; }
.page-head.compact h1 { font-size: 30px; margin-bottom: 6px; }
.page-head.compact p { font-size: 15px; max-width: 74ch; }
.page-head.compact .crumbs { margin-bottom: 8px; }

.crumbs { font-size: 13px; color: var(--ink-4); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---------- collection filters ---------- */

.collection-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.collection-bar .range { color: var(--ink-4); }
.collection-bar .range::before { content: "· "; }
.filters { border-top: 1px solid var(--line-soft); padding: 4px 0; }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
.filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); width: 92px; flex: none;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Divides the coarse ranges from the exact diameters in the same chip row. */
.chip-sep { width: 1px; align-self: stretch; min-height: 22px; margin: 0 5px; background: var(--line); }
.chip {
  font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: var(--pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer;
}
.chip:hover { border-color: var(--ink-4); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.count { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.collection-bar select, .filter-row select { margin-left: auto; }
/* The sort control is chrome, not a form field — keep it the height of a chip. */
.collection-bar select.field { font-size: 13px; padding: 5px 10px; }

/* Joint selector: chips are anchors here, so they need the link reset that the
   button version gets for free. aria-current marks the active joint. */
.joint-scale {
  font-size: 13px; color: var(--ink-4); max-width: 74ch;
  margin-top: 8px; padding-left: 11px; border-left: 2px solid var(--line);
}
.joint-scale[hidden] { display: none; }
.joint-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 12px; }
.joint-nav .chip { text-decoration: none; display: inline-block; line-height: 1.45; }
.joint-nav .chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.joint-group {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); margin-left: 12px; padding-right: 2px;
}
.joint-group:first-of-type { margin-left: 8px; }

.grid-section { padding: 6px 0 80px; }
.od-group { margin: 26px 0 14px; display: flex; align-items: center; gap: 14px; }
.od-group:first-child { margin-top: 6px; }
.od-group::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.od-group b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.od-group span { font-size: 13px; color: var(--ink-4); }

.compare-bar {
  /* Fixed to the viewport, not the document: as a sticky child of a wrap that
     holds nothing else it had no room to slide and never floated. Your eyes are
     in the table, so the bar has to follow the screen, not the page bottom. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 14px max(22px, calc((100vw - var(--wrap-wide)) / 2 + 22px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
}
/* An author `display` beats the UA rule for [hidden], so the bar stayed on
   screen reading "0 selected" even after paintCompareBar hid it. */
.compare-bar[hidden] { display: none; }
.compare-bar .count { flex: 1; }

/* ---------- product page ---------- */

.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; padding: 20px 0 90px; }
.pdp-media { background: #fff; border: 1px solid var(--line-soft); border-radius: 28px; padding: 40px; position: relative; }
.pdp-media .badge-us { top: 24px; left: 26px; font-size: 11px; }
.pdp-media .badge-us .flag { font-size: 24px; }
.pdp-main { display: grid; place-items: center; min-height: 320px; }
.pdp-main img { max-width: 100%; max-height: 420px; object-fit: contain; display: block; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 18px; justify-content: center; }
.pdp-thumbs button {
  width: 58px; height: 58px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #fff; cursor: pointer; padding: 6px; display: grid; place-items: center;
  overflow: hidden;
}
.pdp-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.pdp h1 { font-size: 40px; margin-bottom: 8px; }
.pdp-brand { margin-bottom: 12px; }
.pdp-brand span {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4);
}
.price { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 6px; }
.price.is-quote { font-size: 22px; color: var(--ink-3); font-weight: 400; }
.stock { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.stock i { width: 7px; height: 7px; border-radius: 50%; background: #30a14e; display: block; }
.stock.quote { color: var(--warn); }
.stock.quote i { background: var(--warn); }

/* the four selection parameters, Apple's big-number treatment */
.spec-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden;
  margin: 26px 0;
}
.spec-tile { background: #fff; padding: 18px 14px; text-align: center; }
.spec-tile b {
  display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.spec-tile b em { font-style: normal; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.spec-tile span { display: block; font-size: 12px; color: var(--ink-4); margin-top: 5px; }

.buy { display: flex; gap: 12px; align-items: center; margin: 22px 0 14px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); }
.qty button {
  width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  font-size: 17px; color: var(--ink-2); border-radius: var(--pill);
}
.qty button:hover { background: var(--bg-2); }
.qty input {
  width: 46px; border: 0; text-align: center; font: inherit; font-size: 15px;
  -moz-appearance: textfield; background: none;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

details.spec-all { border-top: 1px solid var(--line-soft); margin-top: 30px; }
details.spec-all > summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-size: 17px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
}
details.spec-all > summary::-webkit-details-marker { display: none; }
details.spec-all > summary::after { content: "\203A"; transform: rotate(90deg); color: var(--ink-4); }
details.spec-all[open] > summary::after { transform: rotate(-90deg); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 22px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table th { font-weight: 400; color: var(--ink-3); width: 52%; }
.spec-table td { font-variant-numeric: tabular-nums; }
.spec-list { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; color: var(--ink-2); }
.spec-list li { padding: 4px 0; }
.spec-pending { margin: 0; font-size: 13px; color: var(--ink-4); }

.notice {
  background: var(--bg-2); border-radius: var(--radius-sm); padding: 16px 18px;
  font-size: 14px; color: var(--ink-2); margin: 18px 0;
}
.note { font-size: 13px; color: var(--ink-3); }

/* ---------- find by spec ---------- */

.finder-table { border-collapse: collapse; font-size: 14px; width: 100%; }
.finder-table th, .finder-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  text-align: left; white-space: nowrap;
}
.finder-table thead th {
  /* Sticky is resolved against .compare-scroll (it has overflow:auto), not the
     page, so a 62px offset slid the header down onto the first data row and
     painted it white. Any single-result filter then looked empty. */
  position: sticky; top: 0; background: #fff; z-index: 2;
  border-bottom: 1px solid var(--line); padding: 0;
}
.finder-table thead th button {
  width: 100%; text-align: inherit; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  background: none; border: 0; padding: 14px; cursor: pointer; white-space: nowrap;
}
.finder-table thead th button:hover { color: var(--ink); }
.finder-table thead th button[aria-pressed="true"] { color: var(--ink); }
.finder-table td.num, .finder-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.finder-table th.num button { text-align: right; }
.finder-table tbody tr:hover { background: var(--bg-3); }
.finder-table input[type="checkbox"] { accent-color: var(--accent); }

/* ---------- compare ---------- */

.compare-scroll { overflow-x: auto; }
.compare-table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.compare-table th, .compare-table td {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); text-align: left;
  vertical-align: top; white-space: nowrap;
}
.compare-table thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
.compare-table tbody th { font-weight: 400; color: var(--ink-3); white-space: normal; }
.compare-table td { font-variant-numeric: tabular-nums; }
.compare-table tr.differs td { background: #fffbf2; }
.compare-head { text-align: center; }
.compare-head .thumb { width: 96px; margin: 0 auto 10px; }
.compare-head b { display: block; font-size: 15px; }
.compare-head span { font-size: 13px; color: var(--ink-3); }

/* ---------- cart / checkout / summary ---------- */

.cart-layout { display: grid; grid-template-columns: 1fr 350px; gap: 50px; padding: 10px 0 90px; }
.line-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line-soft);
}
.li-media {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 7px; display: grid; place-items: center; overflow: hidden;
}
.li-media img { max-width: 100%; max-height: 66px; object-fit: contain; }
.li-title { font-size: 16px; font-weight: 500; }
.li-title a { color: var(--ink); }
.li-meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.li-right { display: grid; gap: 8px; justify-items: end; }
.li-price { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

.summary {
  background: var(--bg-2); border-radius: var(--radius); padding: 24px;
  position: sticky; top: 76px; align-self: start;
}
.summary h3 { font-size: 19px; margin-bottom: 16px; }
.summary .row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 7px 0; color: var(--ink-2);
}
.summary .row.total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px;
  font-size: 19px; font-weight: 600; color: var(--ink);
}
.summary .btn { margin-top: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.lbl { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.field {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  color: var(--ink);
}
.field:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.15); }
select.field { appearance: none; background-image: none; }

.pay-options { display: grid; gap: 10px; }
.pay-option {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--bg-2); cursor: pointer;
}
.pay-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.pay-body { flex: 1; }
.pay-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pay-eyebrow { font-size: 12px; color: var(--ink-4); }
.pay-blurb { display: block; font-size: 14px; margin-top: 3px; }
.pay-detail { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; }

/* order summary document */
.summary-doc {
  max-width: 780px; margin: 0 auto; padding: 40px 0 90px;
}
.summary-doc .doc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.summary-doc .doc-title { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.summary-doc .doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 26px 0; }
.summary-doc .doc-parties h4 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.summary-doc .doc-parties p { font-size: 15px; line-height: 1.5; margin: 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th {
  text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.doc-table td { padding: 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-table tr.total td { font-size: 19px; font-weight: 600; border-bottom: 0; padding-top: 18px; }
.doc-actions { display: flex; gap: 14px; margin-top: 34px; }

/* ---------- faq / prose / misc ---------- */

.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0; font-size: 19px; font-weight: 500;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--ink-4); }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 22px; color: var(--ink-3); font-size: 17px; max-width: 720px; }

.pitch { max-width: 640px; }
.pitch h2 { margin-bottom: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.stat { background: #fff; border-radius: var(--radius); padding: 26px 22px; }
.stat b {
  display: block; font-size: 40px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 14px; color: var(--ink-3); }

.empty-state { text-align: center; padding: 90px 20px; }
.empty-state h2 { margin-bottom: 12px; }
.empty-state p { color: var(--ink-3); margin-bottom: 22px; }

.prose { padding: 10px 0 90px; font-size: 17px; color: var(--ink-2); }
.prose h2 { font-size: 26px; margin: 40px 0 12px; color: var(--ink); }
.prose li { margin-bottom: 8px; }
.updated { font-size: 14px; color: var(--ink-4); }

/* Created once and reused, so it must start hidden — toast() adds .show. */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90;
  transform: translateX(-50%) translateY(12px);
  background: rgba(29, 29, 31, .92); color: #fff; padding: 12px 20px;
  border-radius: var(--pill); font-size: 15px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast a { color: #6cb6ff; margin-left: 8px; }

/* ---------- footer ---------- */

.site-footer { background: var(--bg-2); padding: 56px 0 30px; font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 40px; }
.footer-about p { color: var(--ink-3); margin: 14px 0 0; max-width: 280px; }
.site-footer h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--ink); }
.news p { color: var(--ink-3); margin-bottom: 12px; }
.news form { display: flex; gap: 8px; }
.news .field { padding: 9px 12px; font-size: 14px; }
.footer-legal {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ink-4);
}
.footer-legal nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .cat-grid, .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .nav { display: none; }
  .burger { display: grid; }
  .section { padding: 68px 0; }
  .app-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 56px 22px 64px; }
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .cart-layout { grid-template-columns: 1fr; gap: 30px; }
  .summary { position: static; }
  .stat-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  .page-head h1 { font-size: 30px; }
  .cat-grid, .product-grid, .form-grid, .footer-grid,
  .app-grid, .summary-doc .doc-parties { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr; gap: 34px; }
  .spec-tiles { grid-template-columns: 1fr 1fr; }
  .rail-btn { display: none; }
  .line-item { grid-template-columns: 66px 1fr; }
  .line-item .li-right { grid-column: 1 / -1; justify-items: start; }
  .filter-label { width: 100%; }
  .footer-legal nav { margin-left: 0; }
}

/* ---------- print: the order summary is the only thing worth printing ---- */

@media print {
  .site-header, .site-footer, .announce, .rail-btn, .drawer-scrim,
  .doc-actions, .compare-bar, .toast, [data-send-status] { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .summary-doc { max-width: none; padding: 0; }
  .doc-table th, .doc-table td { border-color: #999; }
  a { color: #000; text-decoration: none; }
}