/* Trident 321 Solutions. A parts distributor's storefront, laid out the way
   the big parts resellers lay theirs out (utility bar, search header,
   brand-color nav, category sidebar, list rows with part number, condition,
   shipping and warranty), in Trident's own blue from the logo. Buyers are
   IT and purchasing staff at other businesses: plain, dense, fast to scan.
   Motion is dose level 0 from the YSS playbook: hover and state changes only. */

@font-face { font-family: "Inter"; src: url("/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --soft: #f4f6f9;
  --soft-2: #eaeef4;
  --line: #dde3eb;
  --line-2: #c9d2de;
  --ink: #18202b;
  --ink-2: #4a5566;
  --muted: #6b7686;
  --navy: #10243f;
  --blue: #1a56c8;
  --blue-2: #1447a8;
  --blue-soft: #e8f0fc;
  --amber: #ffc21a;
  --amber-2: #f0b100;
  --orange: #d9480f;
  --green: #1b8a3c;
  --green-soft: #e7f5ec;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --w: 1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--font); font-feature-settings: "tnum" 1, "cv11" 1; overflow-x: clip; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 14px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 22px; font-weight: 700; }
.muted { color: var(--muted); }

/* ---------- utility bar ---------- */
.util { background: var(--navy); color: #c8d3e3; font-size: 13.5px; }
.util .wrap { display: flex; align-items: stretch; gap: 22px; min-height: 36px; }
.util span, .util a { display: inline-flex; align-items: center; gap: 7px; color: #c8d3e3; }
.util a:hover { color: #fff; text-decoration: none; }
.util .right { margin-left: auto; display: flex; align-items: stretch; gap: 22px; }
.util .quote { background: var(--orange); color: #fff; font-weight: 600; padding: 0 18px; }
.util .quote:hover { background: #c23f0c; }
@media (max-width: 820px) { .util .hide-sm { display: none; } .util .wrap { gap: 14px; } }

/* ---------- header ---------- */
.head { border-bottom: 1px solid var(--line); background: #fff; }
.head .wrap { display: flex; align-items: center; gap: 32px; min-height: 86px; }
.head .logo img { height: 58px; width: auto; display: block; }
.search { flex: 1; display: flex; max-width: 680px; border: 2px solid var(--blue); border-radius: 4px; position: relative; }
/* Item 19: no overflow hidden here, it clipped the suggestions panel to nothing; the corners come from the children. */
.search input { border-radius: 2px 0 0 2px; }
.search button { border-radius: 0 1px 1px 0; }
.search input { flex: 1; min-width: 0; border: 0; padding: 11px 14px; font-size: 15.5px; outline: none; }
.search button { border: 0; background: var(--blue); color: #fff; font-weight: 600; padding: 0 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.search button:hover { background: var(--blue-2); }
.headlinks { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.headlinks a { color: var(--ink); display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; }
.headlinks a small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; line-height: 1.2; }
.cartbtn { position: relative; }
.cartbtn b:empty, .cartbtn b[data-zero] { display: none; }
.cartbtn b { position: absolute; top: -6px; left: 16px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 11.5px; display: grid; place-items: center; padding: 0 5px; }
@media (max-width: 900px) { .head .wrap { flex-wrap: wrap; gap: 12px 18px; padding-top: 12px; padding-bottom: 12px; } .head .logo img { height: 46px; } .search { order: 3; flex-basis: 100%; max-width: none; } .headlinks .hide-sm { display: none; } }

.results { position: absolute; left: -2px; right: -2px; top: calc(100% + 2px); z-index: 40; background: #fff; border: 1px solid var(--line-2); border-top: 0; box-shadow: 0 16px 32px -12px rgba(16,36,63,.25); max-height: 70vh; overflow: auto; }
.results:empty { display: none; }
.hit { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--soft-2); color: var(--ink); }
.hit:hover, .hit:focus-visible { background: var(--blue-soft); text-decoration: none; }
.hit img { width: 48px; height: 48px; object-fit: contain; }
.hit b { font-weight: 700; }
.hit .t { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit .p { font-weight: 700; }
.results .none { padding: 14px; color: var(--ink-2); }

/* ---------- nav bar ---------- */
.navbar { background: var(--blue); }
.navbar .wrap { display: flex; gap: 2px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.navbar a { color: #fff; font-weight: 500; font-size: 14.5px; padding: 12px 14px; white-space: nowrap; }
.navbar a:hover, .navbar a[aria-current] { background: var(--blue-2); text-decoration: none; }
.navbar .end { margin-left: auto; }

/* ---------- layout with sidebar ---------- */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding-top: 24px; padding-bottom: 56px; }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); } .layout > aside { display: none; } }
aside .box { margin-bottom: 22px; }
aside h3 { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: none; padding-bottom: 10px; border-bottom: 2px solid var(--blue); margin-bottom: 4px; }
aside ul { list-style: none; }
aside li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--soft-2); color: var(--ink); font-size: 14.5px; }
aside li a span { color: var(--muted); font-size: 13px; }
aside li a:hover { color: var(--blue); text-decoration: none; }
aside li a[aria-current] { color: var(--blue); font-weight: 600; }
aside label { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 14.5px; cursor: pointer; }
aside label span { margin-left: auto; color: var(--muted); font-size: 13px; }
aside input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); }
.helpbox { border: 1px solid var(--line); background: var(--soft); padding: 16px; border-radius: 4px; font-size: 14px; }
.helpbox b { display: block; font-size: 15px; margin-bottom: 6px; }
.helpbox .phone { font-size: 19px; font-weight: 700; color: var(--navy); display: block; margin: 6px 0; }

/* ---------- home ---------- */
.banner { position: relative; border-radius: 4px; overflow: hidden; min-height: 330px; display: flex; align-items: center; background: var(--navy); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,36,63,.96) 0%, rgba(16,36,63,.82) 48%, rgba(16,36,63,.25) 100%); }
.banner .in { position: relative; z-index: 1; padding: 40px 44px 78px; max-width: 640px; color: #fff; }
.banner h1 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.banner p { color: #d4ddea; font-size: 16.5px; margin-bottom: 22px; }
.banner .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.banner .since { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; padding: 9px 44px; border-top: 1px solid rgba(255,255,255,.15); }

.trust { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 4px; margin: 18px 0 34px; }
.trust > div { display: flex; gap: 12px; align-items: center; padding: 16px 18px; }
.trust > div + div { border-left: 1px solid var(--line); }
.trust svg { flex: none; color: var(--blue); }
.trust b { display: block; font-size: 14.5px; }
.trust span { color: var(--muted); font-size: 13px; line-height: 1.35; display: block; }
@media (max-width: 1100px) { .trust { grid-template-columns: 1fr 1fr; } .trust > div:nth-child(3) { border-left: 0; } .trust > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } .trust > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.sect { margin-bottom: 38px; }
.sect > .title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.sect > .title h2 { border-left: 4px solid var(--blue); padding-left: 12px; }
.sect > .title a { font-size: 14px; font-weight: 600; }

/* product tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tile { position: relative; border: 1px solid var(--line); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--line-2); box-shadow: 0 6px 18px -10px rgba(16,36,63,.3); }
.tile .ph { position: relative; aspect-ratio: 4 / 3; margin-bottom: 4px; }
/* Item 19: the photo cannot grow its box, so every tile's title and price line up. */
.tile .ph img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.tile .ph.photo img { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 2px; }
.tile .mpn { font-weight: 700; font-size: 14px; color: var(--ink); }
.tile .mpn::after { content: ""; position: absolute; inset: 0; }
.tile .t { color: var(--ink-2); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .pr { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile .pr b { font-size: 18px; font-weight: 700; }
.tile .pr s { color: var(--muted); font-size: 12.5px; }
.off { display: inline-block; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 2px; }
.cond { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--soft); }
.cond.new { border-color: #b8dcc4; color: var(--green); background: var(--green-soft); }

/* category boxes */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.catbox { border: 1px solid var(--line); border-radius: 4px; padding: 14px 12px 12px; text-align: center; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.catbox:hover { border-color: var(--blue); text-decoration: none; box-shadow: 0 6px 18px -10px rgba(16,36,63,.3); }
.catbox .ph { height: 96px; display: grid; place-items: center; margin-bottom: 10px; }
.catbox .ph img { width: 100%; height: 96px; object-fit: contain; }
.catbox b { display: block; font-size: 14px; font-weight: 700; }
.catbox span { color: var(--muted); font-size: 12.5px; }

.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.brands a { border: 1px solid var(--line); border-radius: 4px; padding: 14px 8px; text-align: center; color: var(--navy); font-weight: 700; font-size: 15px; }
.brands a span { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.brands a:hover { border-color: var(--blue); text-decoration: none; }

.about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 28px; background: var(--soft); }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about h2 { margin-bottom: 10px; }
.about p { color: var(--ink-2); margin-bottom: 10px; }
.about ul { list-style: none; display: grid; gap: 10px; }
.about li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.about li svg { flex: none; color: var(--green); margin-top: 2px; }

/* ---------- category page ---------- */
.crumbs { font-size: 13.5px; color: var(--muted); padding: 14px 0 0; }
.crumbs a { color: var(--ink-2); }
.pagetitle { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.pagetitle h1 { font-size: 26px; font-weight: 800; }
.pagetitle p { color: var(--ink-2); flex-basis: 100%; font-size: 14.5px; }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bar input[type=search] { flex: 1 1 240px; border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 11px; }
.bar select { border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 10px; background: #fff; }
.bar .count { color: var(--muted); font-size: 14px; }
.bar .view { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.bar .view button { background: #fff; border: 0; padding: 7px 12px; cursor: pointer; font-size: 13.5px; }
.bar .view button[aria-pressed=true] { background: var(--navy); color: #fff; }

/* list rows, the parts reseller shape */
.rows .row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 250px; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.rows .row[hidden] { display: none; }
.row .ph { height: 140px; display: grid; place-items: center; }
.row .ph img { width: 100%; height: 140px; object-fit: contain; }
.row .ph.photo img { width: 100%; height: 140px; object-fit: cover; border-radius: 2px; }
.row h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.row h3 a { color: var(--ink); }
.row h3 a:hover { color: var(--blue); }
.row dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13.5px; }
.row dt { font-weight: 600; color: var(--ink); }
.row dd { color: var(--ink-2); }
.row .buy { display: grid; gap: 8px; }
.row .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.row .price b { font-size: 22px; font-weight: 700; color: var(--ink); }
.row .price s { color: var(--muted); font-size: 13.5px; }
.row .price.onquote { font-size: 17px; font-weight: 700; color: var(--navy); }
.prod .now.onquote { font-size: 24px; color: var(--navy); }
.tile .pr[data-quote] a { font-weight: 700; color: var(--navy); }
.row .ctl { display: flex; gap: 6px; }
.row .ctl input { width: 54px; border: 1px solid var(--line-2); border-radius: 4px; padding: 8px; text-align: center; }
.avail { color: var(--green); font-size: 13px; font-weight: 600; }
.avail::before { content: "\2022  "; }
.callmore { color: var(--muted); font-size: 12.5px; }
@media (max-width: 860px) {
  .rows .row { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .row .ph { height: 100px; } .row .ph img, .row .ph.photo img { max-height: 100px; height: auto; }
  .row .buy { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
}
.rows.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding-top: 16px; }
.rows.grid .row { grid-template-columns: 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 12px; }
.rows.grid .row dl { display: none; }
.rows.grid .row h3 { font-size: 14px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; padding: 9px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { text-decoration: none; }
.btn-cart { background: var(--amber); color: #1d1600; border-color: var(--amber-2); }
.btn-cart:hover { background: var(--amber-2); }
.btn-now { background: var(--navy); color: #fff; }
.btn-now:hover { background: #0a1830; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-2); }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-quote { background: #fff; color: var(--orange); border-color: var(--orange); font-size: 12.5px; padding: 4px 10px; }
.btn-quote:hover { background: #fff4ee; }
.btn.added { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- product page ---------- */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding: 18px 0 30px; }
@media (max-width: 900px) { .prod { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* Item 19: the photo is placed inside the box, so its 600x600 size can never stretch the box past its ratio. */
.prod .gal { position: relative; border: 1px solid var(--line); border-radius: 4px; aspect-ratio: 1; background: #fff; overflow: hidden; }
.prod .gal img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; }
.prod .gal.photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod h1 { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.prod .was { color: var(--muted); font-size: 15px; }
.prod .now { font-size: 32px; font-weight: 800; color: var(--orange); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; }
.prod .stock { color: var(--green); font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.prod .stock em { color: var(--orange); font-style: normal; margin-left: 10px; }
.prod .buyrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.prod .buyrow input { width: 64px; border: 1px solid var(--line-2); border-radius: 4px; text-align: center; font-size: 16px; }
.prod .buyrow .btn { padding: 11px 22px; font-size: 15.5px; }
.prod .msg { min-height: 1.5em; font-weight: 600; color: var(--green); margin: -8px 0 12px; }
.checks { list-style: none; display: grid; gap: 9px; margin-bottom: 18px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.checks li b { font-weight: 600; }
.checks svg { flex: none; color: #fff; background: var(--green); border-radius: 50%; padding: 3px; }
.twin { display: flex; gap: 12px; align-items: center; border: 1px dashed var(--line-2); border-radius: 4px; padding: 10px 12px; color: var(--ink); font-size: 14px; }
.twin img { width: 44px; height: 44px; object-fit: contain; }
.twin:hover { border-color: var(--blue); text-decoration: none; }
.tabs { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 30px; }
.tabs h2 { color: var(--blue); font-weight: 600; font-size: 20px; margin: 0 0 12px; }
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-bottom: 26px; }
.spec th, .spec td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 34%; background: var(--soft); font-weight: 600; }
.tabs p { color: var(--ink-2); margin-bottom: 10px; max-width: 80ch; }

/* ---------- cart ---------- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; padding: 10px 0 56px; align-items: start; }
@media (max-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr); } }
.cart table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cart th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); padding: 8px; }
.cart td { border-bottom: 1px solid var(--line); padding: 12px 8px; vertical-align: middle; }
.cart td img { width: 64px; height: 64px; object-fit: contain; }
.cart td input { width: 56px; border: 1px solid var(--line-2); border-radius: 4px; padding: 6px; text-align: center; }
.cart td .t { color: var(--ink-2); font-size: 13px; }
.cart .num { text-align: right; white-space: nowrap; font-weight: 600; }
.remove { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.summary { border: 1px solid var(--line); border-radius: 4px; padding: 18px; background: var(--soft); position: sticky; top: 16px; }
.summary h2 { font-size: 18px; margin-bottom: 10px; }
.summary .r { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px; }
.summary .g { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 10px; font-size: 19px; font-weight: 800; }
.summary .btn { width: 100%; margin-top: 12px; padding: 13px; font-size: 16px; }
.summary .note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.err { color: var(--orange); font-weight: 600; font-size: 14px; margin-top: 10px; }
.empty { border: 1px dashed var(--line-2); border-radius: 4px; padding: 40px; text-align: center; }

/* ---------- quote form ---------- */
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
@media (max-width: 860px) { .quote { grid-template-columns: minmax(0, 1fr); } }
.quote p { color: var(--ink-2); margin: 8px 0 14px; }
.quote .phone { font-size: 22px; font-weight: 800; color: var(--navy); }
form.req { display: grid; gap: 12px; }
form.req label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
form.req input, form.req textarea, form.req select { border: 1px solid var(--line-2); border-radius: 4px; padding: 9px 11px; font-size: 15px; }
form.req select { background: #fff; color: inherit; width: 100%; min-width: 0; }
form.req .shipaddr { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
form.req .shipeta { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
form.req .shipaddr legend { padding: 0; margin-bottom: 2px; font-size: 14.5px; font-weight: 700; }
form.req input:focus, form.req textarea:focus, form.req select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* Item 19: side padding stays .wrap's, so a phone keeps its gutter; text lines up with the header. */
.prose { padding-top: 10px; padding-bottom: 56px; }
.prose > * { max-width: 820px; }
.prose h2 { margin: 26px 0 8px; font-size: 19px; }
.prose p { color: var(--ink-2); }

/* ---------- footer ---------- */
.pay { border-top: 1px solid var(--line); padding: 16px 0; }
.pay .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.pay .cards { display: flex; gap: 8px; }
.pay .cards span { border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 8px; font-weight: 700; font-size: 12px; color: var(--navy); background: #fff; }
footer { background: var(--soft); border-top: 1px solid var(--line); padding: 36px 0 26px; font-size: 14px; }
footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer .cols { grid-template-columns: 1fr; } }
footer h4 { font-size: 15px; margin-bottom: 10px; }
footer ul { list-style: none; display: grid; gap: 6px; }
footer a { color: var(--ink-2); }
footer .phone { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
footer .legal { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 14px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) {
  .banner { flex-direction: column; align-items: stretch; min-height: 0; }
  .banner .in { padding: 26px 20px 18px; }
  .banner .since { position: relative; padding: 10px 20px; font-size: 13px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .catgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile .pr b { font-size: 16px; }
  .layout { padding-top: 14px; }
}
@media (max-width: 640px) { .prod .gal { aspect-ratio: 4 / 3; } }

/* order status */
.ostat { border: 1px solid var(--line); border-radius: 4px; padding: 20px; }
.ohead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ohead span { display: block; font-size: 13px; }
.ohead b { font-size: 17px; }
@media (max-width: 560px) { .ohead { grid-template-columns: 1fr; } }
.ostat .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 20px; }
.ostat .steps li { position: relative; padding-top: 30px; font-size: 14px; }
.ostat .steps li i { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; z-index: 1; }
.ostat .steps li::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 3px; background: var(--line); }
.ostat .steps li.done i { background: var(--green); border-color: var(--green); }
.ostat .steps li.done::before { background: var(--green); }
.ostat .steps li.now i { box-shadow: 0 0 0 4px var(--green-soft); }
.ostat .steps b { display: block; }
.ostat .steps span { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .ostat .steps { grid-template-columns: 1fr 1fr; row-gap: 16px; } }
.onote { background: var(--soft); border-left: 3px solid var(--blue); padding: 10px 12px; margin-bottom: 16px; }

/* One-page fine print */
.prose.fine p { font-size: 13.5px; line-height: 1.6; }
.prose.fine h2 { font-size: 16px; margin: 22px 0 6px; }

/* Account pages */
.acct { padding-bottom: 56px; }
.acct-card { max-width: 460px; margin: 10px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 26px 22px; }
.acct-card h1 { font-size: 24px; margin: 0 0 14px; }
.acct-card form label, .acct-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; }
.acct-card input, .acct-form input { height: 40px; border: 1px solid #b9c2cf; border-radius: 6px; padding: 0 11px; font: inherit; font-weight: 400; }
.acct-card input:focus, .acct-form input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.acct-card input.code { font-size: 22px; letter-spacing: 6px; text-align: center; }
.acct-card label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.acct-card label.check input { height: auto; }
.acct-card .two, .acct-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.acct-card button[type=submit] { width: 100%; padding: 11px; }
.acct-card .hint { font-size: 12.5px; color: var(--muted, #5b6574); margin: -6px 0 12px; }
.acct-card .alt { margin: 14px 0 0; font-size: 13.5px; }
.acct-new { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.acct-new h2 { font-size: 16px; margin: 0 0 4px; }
.acct-new p { font-size: 13.5px; margin: 0 0 10px; }
.acct-home { max-width: 900px; }
.acct-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.acct-head h1 { font-size: 26px; margin: 0; }
/* Item 29 round 2, break 6: a long email or company wraps inside the header
   and Sign out drops below it, instead of both running off a 375 px screen. */
.acct-hello { flex: 1 1 220px; min-width: 0; }
.acct-hello h1, .acct-hello p { overflow-wrap: anywhere; }
.acct-head > .btn { flex: none; }
.acct-home section { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.acct-home h2 { font-size: 17px; margin: 0 0 12px; }
.acct-form { max-width: 560px; }
.otable { width: 100%; border-collapse: collapse; font-size: 14px; }
.otable th { text-align: left; font-size: 12.5px; color: #5b6574; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.otable td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .acct-card .two, .acct-form .two { grid-template-columns: 1fr; } .acct-card { padding: 20px 16px; } .otable th:nth-child(2), .otable td:nth-child(2) { display: none; } }

@media (max-width: 760px) { .acctlink > span { display: none; } }

/* Ship-to ZIP in the cart */
/* Item 17: both columns may shrink, so the select's longest option cannot push it out of the summary; the labels undo "aside label", which centres them. */
.shipto { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; margin: 4px 0 12px; }
.shipto label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 0; font-size: 12.5px; font-weight: 600; text-align: left; cursor: auto; }
.shipto input, .shipto select { width: 100%; min-width: 0; box-sizing: border-box; height: 36px; border: 1px solid #b9c2cf; border-radius: 6px; padding: 0 9px; font: inherit; font-weight: 400; background: #fff; }

/* ---------- item 19 ---------- */
/* Short pages: the footer sits at the bottom of the screen. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* Phone: tap targets at least 40px, and the card chips never break a line. */
.pay .cards { flex-wrap: wrap; }
.pay .cards span { white-space: nowrap; }
@media (max-width: 640px) {
  .btn-quote { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .row .ctl input, .row .ctl .btn { min-height: 40px; }
  /* The menu scrolls sideways: a fade at the edge says so. */
  .navbar { position: relative; }
  .navbar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(to right, rgba(26,86,200,0), var(--blue)); pointer-events: none; }
  /* Cart: each line is a card, photo and name on top, price, quantity and total below. */
  .cart table, .cart tbody { display: block; }
  .cart thead { display: none; }
  .cart tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img price qty" "img total total"; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
  .cart td { border: 0; padding: 0; }
  .cart td:nth-child(1) { grid-area: img; align-self: start; }
  .cart td:nth-child(2) { grid-area: name; }
  .cart td:nth-child(3) { grid-area: price; color: var(--ink-2); }
  .cart td:nth-child(3)::after { content: " each"; }
  .cart td:nth-child(4) { grid-area: qty; }
  .cart td:nth-child(4) input { min-height: 40px; }
  .cart td:nth-child(5) { grid-area: total; text-align: right; }
  .cart td:nth-child(5)::before { content: "Line total "; font-weight: 400; color: var(--muted); }
  .cart .remove { min-height: 32px; }
}
/* Reset password and other account cards: space under the intro line. */
.acct-card > p { margin: 0 0 14px; }

/* ---------- item 24: Quote Now beside Buy Now ---------- */
.btn-qnow { background: #fff; color: var(--blue); border-color: var(--blue); flex-direction: column; gap: 1px; line-height: 1.15; }
.btn-qnow:hover { background: var(--blue-soft); }
.btn-qnow small { font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.prod .buyrow .btn-qnow { padding: 6px 18px; }
form.qnow { border: 1px solid var(--line-2); border-left: 4px solid var(--blue); border-radius: 4px; padding: 16px 18px; margin: 0 0 18px; background: #fff; scroll-margin-top: 16px; }
/* form.req sets display: grid, which would otherwise beat the hidden attribute. */
form.qnow[hidden] { display: none; }
form.qnow .qnow-promise { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); }
form.qnow .buyrow { margin-bottom: 0; }
@media (max-width: 640px) { .prod .buyrow .btn-qnow { min-height: 44px; } }

/* ---------- item 28: checkout on its own page ---------- */
/* Shopify's shape: a quiet header, a step bar, the form on the left and the
   order summary on a grey panel to the right. The form column is held under
   the width at which Stripe's embedded form adds its own summary column, so
   Stripe folds its summary into one line. Review 3: on the payment step ours
   then goes, so the buyer reads one summary (see below). */
.co-body { background: var(--bg); }
/* .btn and .co-wide set display, which beats the browser's own [hidden] rule: a hidden provider button stayed on screen. */
.co [hidden] { display: none !important; }
/* Review 2, break 2: width 100%, because body is a flex column and a flex item with auto margins shrinks to its content, which let the step bar set the page's width. */
.co-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.co-head { border-bottom: 1px solid var(--line); background: #fff; }
.co-head .co-wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.co-logo img { height: 44px; width: auto; }
.co-secure { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--ink); padding-left: 18px; border-left: 1px solid var(--line); }
.co-secure svg { color: var(--green); }
.co-phone { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.co { padding-top: 22px; padding-bottom: 48px; }
.co-steps { list-style: none; display: flex; flex-wrap: wrap; row-gap: 8px; margin: 0 0 24px; font-size: 13.5px; color: var(--muted); max-width: 100%; }
/* Review 2, breaks 2 and 4: every step is as wide as its own label and every connector the same length, so the gaps are even; the bar may wrap rather than push the page wider than a phone. */
.co-steps li { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.co-steps li + li::before { content: ""; flex: 0 0 40px; height: 1px; background: var(--line-2); margin: 0 12px; }
.co-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; background: #fff; }
.co-steps [data-state="now"] { color: var(--ink); font-weight: 600; }
.co-steps [data-state="now"] i { background: var(--navy); border-color: var(--navy); color: #fff; }
.co-steps [data-state="done"] i { background: var(--green); border-color: var(--green); color: #fff; }
.co-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 0 48px; align-items: start; }
.co-main { min-width: 0; }
.co-acct h1, .co-empty h1 { font-size: 22px; margin: 0 0 16px; letter-spacing: -.01em; }
.co-wide { display: flex; width: 100%; max-width: 420px; padding: 12px 16px; font-size: 15px; margin-bottom: 10px; }
.btn-prov { gap: 10px; }
.btn-prov svg { flex: none; }
.co-guest { background: #fff; color: var(--ink); border: 2px solid var(--navy); font-weight: 700; }
.co-guest:hover { background: var(--soft); }
.co-why { font-size: 13px; color: var(--muted); margin: -2px 0 14px; max-width: 420px; }
.co-closed { font-size: 13.5px; color: var(--ink-2); background: var(--soft); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; max-width: 420px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 6px 0 16px; max-width: 420px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.prov { display: grid; gap: 10px; margin-bottom: 4px; }
.prov .btn-prov { width: 100%; padding: 11px; }
.co-who { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.co-stop { border: 1px solid var(--line-2); border-left: 4px solid var(--orange); border-radius: 4px; padding: 14px 16px; margin: 0 0 16px; }
.co-empty { border: 1px dashed var(--line-2); border-radius: 6px; padding: 32px 24px; }
.co-stripe { min-height: 420px; }
.co-stripe:empty { min-height: 0; }
.co-sum { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; position: sticky; top: 16px; }
.co-sumbar { display: none; }
.co-sumbody { padding: 20px 22px; }
.co-sumbody h2 { font-size: 17px; margin: 0 0 14px; }
.co-lines { list-style: none; display: grid; gap: 14px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line-2); }
.co-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.co-thumb { position: relative; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.co-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.co-thumb b { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink-2); color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.co-name { line-height: 1.35; overflow-wrap: anywhere; }
.co-amt { font-weight: 600; white-space: nowrap; }
.co-totals .r { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.co-totals .r span:first-child { color: var(--ink-2); }
.co-totals .g { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 800; }
.co-totals .g span:first-child { color: var(--ink); }
.co-fine { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.co-fine.co-edit { margin-top: 8px; font-weight: 600; }
.co-load { font-size: 14px; color: var(--muted); padding: 18px 0; }
/* Review 3, breaks 3 and 4: on the payment step Stripe's form opens with its
   own folded summary (the line, the total, View details), so ours would say
   the same thing twice beside it. Ours shows on the account step and goes on
   the payment step, at every width. Stripe draws its card at most 412 px wide
   and centres it in a wider frame (measured live: a 600 px column put the card
   94 px in from our text), so the column is 412 px and centred: the card, the
   "Checking out as" line and the step bar share one centre line. */
.co[data-co-at="pay"] .co-sum { display: none; }
.co[data-co-at="pay"] .co-grid { grid-template-columns: minmax(0, 412px); justify-content: center; }
.co[data-co-at="pay"] .co-steps { justify-content: center; }
.co-payfine { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
/* Review 3, break 6: Create an account and Sign in from checkout stay inside the checkout shell. */
.co-acctnav { max-width: 460px; margin: 0 auto 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.co-acctnav .co-guest { padding: 8px 14px; }
.co-acctpage .acct-card { margin-top: 0; }
/* Review 2, break 3: the page Stripe returns a paid buyer to, inside the checkout shell. */
.co-done { max-width: 720px; padding-bottom: 8px; }
.co-done h1 { margin-top: 0 !important; }
.co-foot { border-top: 1px solid var(--line); padding: 18px 0 28px; font-size: 13px; }
.co-foot .co-wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.co-foot a { color: var(--muted); }
@media (max-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  /* The summary folds into a bar above the form. */
  .co-sum { order: -1; position: static; margin: 0 -16px 20px; border-radius: 0; border-left: 0; border-right: 0; }
  .co-sumbar { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 14px 16px; font: inherit; color: var(--blue); cursor: pointer; font-size: 14.5px; }
  .co-sumbar b { color: var(--ink); font-size: 16px; }
  .co-sumbody { padding: 0 16px 16px; }
  .co-sumbody[data-open="0"] { display: none; }
  .co-sumbody h2 { display: none; }
}
@media (max-width: 640px) {
  /* Review 3, break 2: sides only. The shorthand also zeroed .co's own top and bottom padding (main is co-wrap co), so the step bar touched the header. */
  .co-wrap { padding-left: 16px; padding-right: 16px; }
  .co-head .co-wrap { gap: 10px; min-height: 60px; }
  .co-logo img { height: 34px; }
  .co-secure { padding-left: 10px; font-size: 13.5px; }
  .co-phone span { display: none; }
  .co-phone { min-width: 40px; min-height: 40px; justify-content: center; }
  .co-steps { font-size: 12px; }
  .co-steps li + li::before { flex-basis: 28px; margin: 0 10px; }
  .co-wide { max-width: none; min-height: 46px; }
  .co-why, .or, .co-closed { max-width: none; }
}
/* Review 2, break 2: under 440 px only the current step keeps its label on screen; the others keep it for a screen reader. */
@media (max-width: 440px) {
  .co-steps li:not([data-state="now"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .co-steps li { gap: 6px; }
  .co-steps li + li::before { flex-basis: 20px; margin: 0 6px; }
}

/* ---------- item 29: account dashboard and business account setup ---------- */
/* A hidden part of a form stays hidden, whatever display its class gives it. */
.acct [hidden] { display: none !important; }
.acct-dash { max-width: 1080px; }
.acct-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.acct-nav { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.acct-nav a { padding: 11px 16px; color: var(--ink); font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--soft-2); }
.acct-nav a:last-child { border-bottom: 0; }
.acct-nav a:hover { background: var(--soft); text-decoration: none; }
.acct-nav a[aria-current] { background: var(--blue-soft); color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.acct-main { min-width: 0; }
.acct-sec, .setup { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.acct-sec h2, .setup h2 { font-size: 18px; margin: 0 0 8px; }
.acct-sec h3 { font-size: 15px; margin: 18px 0 6px; }
.setup h3 { font-size: 17px; margin: 0 0 4px; }
.acct-form h4 { font-size: 14px; margin: 6px 0 10px; }
.setup-gives { font-size: 13.5px; color: var(--ink-2); background: var(--green-soft); border-radius: 6px; padding: 7px 10px; margin: 0 0 14px; }
.setup-bar { height: 8px; border-radius: 4px; background: var(--soft-2); overflow: hidden; margin: 12px 0 4px; }
.setup-bar span { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .3s; }
.setup-count { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.setup-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.setup-steps li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.3; }
.setup-steps li a { color: var(--ink); font-weight: 600; }
.setup-steps li small { display: block; color: var(--muted); }
.setup-steps li[data-state="saved"] { border-color: var(--green); background: var(--green-soft); }
.setup-steps li[aria-current] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.setup-sec { border-top: 1px solid var(--line); padding-top: 16px; }
.setup-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.setup-next { margin: 4px 0 12px; }
.setup-name { margin: 0 0 12px; }
.acct-form { max-width: 640px; }
.acct-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; min-width: 0; }
.acct-form input, .acct-form select { height: 40px; border: 1px solid #b9c2cf; border-radius: 6px; padding: 0 11px; font: inherit; font-weight: 400; background: #fff; width: 100%; min-width: 0; }
.acct-form input[type=checkbox], .acct-form input[type=radio] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--blue); }
.acct-form input[type=file] { height: auto; padding: 8px; }
.acct-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 8px; }
.acct-form .three { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.acct-form fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.acct-form legend { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; padding: 0; }
.acct-form .cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.acct-form .hint { font-size: 12.5px; color: var(--muted); margin: -2px 0 12px; }
.acct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acct-tile { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 14px 16px; color: var(--ink); }
.acct-tile:hover { border-color: var(--blue); text-decoration: none; }
.acct-tile b { display: block; font-size: 19px; }
.acct-tile span { color: var(--muted); font-size: 13px; }
/* On a phone the nav is a row of tabs above the content, scrolling inside
   itself, so the page never scrolls sideways. */
@media (max-width: 760px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acct-nav { flex-direction: row; overflow-x: auto; border-radius: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .acct-nav a { flex: none; border-bottom: 0; border-right: 1px solid var(--soft-2); padding: 10px 14px; white-space: nowrap; font-size: 14px; }
  .acct-nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--blue); }
  .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-form .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-tiles { grid-template-columns: minmax(0, 1fr); }
  .acct-sec, .setup { padding: 16px 14px; }
}
@media (max-width: 600px) { .acct-form .three { grid-template-columns: minmax(0, 1fr); } .acct-form .cats { grid-template-columns: minmax(0, 1fr); } }

/* Item 30: the cookie banner, the settings panel and Recently viewed. The
   three buttons are one class with no modifier, the same size and weight,
   so Reject all is as easy to press as Accept all. While the banner is open
   the page gains bottom padding equal to its height (--ck-pad, set by
   consent.js), so it never sits on Proceed to checkout or the pay button. */
html.ck-open body { padding-bottom: var(--ck-pad, 0px); }
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line-2); box-shadow: 0 -10px 28px -16px rgba(16,36,63,.35); padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 12px 24px; flex-wrap: wrap; }
.ck[hidden], .ck-panel[hidden] { display: none; }
.ck-text { font-size: 14px; line-height: 1.45; color: var(--ink); max-width: 720px; flex: 1 1 320px; }
.ck-text a, .ck-sub a { text-decoration: underline; }
.ck-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 0 1 420px; min-width: 0; width: 100%; max-width: 420px; }
.ck-btn { display: block; width: 100%; min-height: 40px; padding: 9px 8px; border: 1px solid var(--blue); border-radius: 4px; background: var(--blue); color: #fff; font: 600 14px/1.2 var(--font); cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.ck-btn:hover { background: var(--blue-2); border-color: var(--blue-2); }
.ck-btn:focus-visible, .ck-sw:focus-visible, .ck-x:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ck-panel { position: fixed; inset: 0; z-index: 95; background: rgba(16,36,63,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ck-box { position: relative; background: #fff; border-radius: 6px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 20px 18px; box-shadow: 0 24px 60px -20px rgba(16,36,63,.5); }
.ck-box h2 { font-size: 20px; margin: 0 28px 6px 0; }
.ck-sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.ck-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.ck-row-t b { display: block; font-size: 14.5px; }
.ck-row-t span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.ck-sw { flex: none; appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--line-2); position: relative; cursor: pointer; margin-top: 2px; transition: background .15s; }
.ck-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ck-sw:checked { background: var(--green); }
.ck-sw:checked::after { transform: translateX(18px); }
.ck-sw:disabled { opacity: .55; cursor: not-allowed; }
.ck-gpc { font-size: 13px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin: 4px 0 8px; }
/* Item 31: the Global Privacy Control line also sits in the bar, under its
   text and above the buttons. The US bar's OK is a plain .ck-btn, the same
   size as Reject all and Customize in the same three equal columns. */
.ck > .ck-gpc { flex: 1 1 100%; max-width: 720px; margin: 0; font-size: 13px; }
.ck-box .ck-btns { max-width: none; margin-top: 12px; }
/* Item 30 fix, second run: a label that does not fit its column wraps
   rather than being cut ("Save choic" at 320 px, break 5); the grid row
   keeps the three buttons the same height. While the settings panel is
   open the page behind it does not scroll (break 6). */
html.ck-modal, html.ck-modal body { overflow: hidden; }
.olink { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; overflow-wrap: anywhere; }
.olink .btn { margin-left: 6px; padding: 4px 10px; font-size: 13px; }
.ck-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.recent[hidden] { display: none; }
@media (max-width: 600px) {
  .ck { padding: 10px 16px 12px; gap: 8px; }
  .ck-text { font-size: 13px; flex-basis: 100%; }
  .ck-btns { max-width: none; flex-basis: 100%; }
  .ck-btn { font-size: 13.5px; padding: 9px 4px; }
}
.ck-tablewrap { overflow-x: auto; margin: 10px 0 12px; }
.cookies { min-width: 640px; }
.cookies th, .cookies td { font-size: 13px; vertical-align: top; text-align: left; }
.cookies code { font-size: 12.5px; word-break: break-word; }
/* Item 37: the cart's place (a country, then a ZIP or a postal code and city) and its shipping options. */
.shipto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shipto label:first-child { grid-column: 1 / -1; }
.ship-options { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; min-width: 0; }
.ship-options legend { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; padding: 0; }
.ship-options label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; font-size: 13px; padding: 7px 9px; border: 1px solid #d6dbe3; border-radius: 6px; cursor: pointer; }
.ship-options label small { grid-column: 2 / 4; color: #5b6573; font-size: 12px; }
.ship-options input { margin: 0; }