:root {
  color-scheme: light;
  --ink: #172628;
  --muted: #43565a;
  --paper: #f3f0e7;
  --white: #fffdf7;
  --teal: #0e5d58;
  --dark: #102f2e;
  --line: #c1cbc4;
  --sand: #fde3b3;
  font-family: "Avenir Next", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--teal); text-underline-offset: .2em; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a, button, input, select, summary { outline-offset: 3px; }
:focus-visible { outline: 3px solid #b56212; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .65rem; }
h1 { font-size: clamp(2.05rem, 5.2vw, 4rem); letter-spacing: -.05em; }
h2 { font-size: clamp(1.35rem, 2.8vw, 2.1rem); letter-spacing: -.03em; }
h3 { font-size: 1.03rem; }
p { margin: 0 0 .85rem; }
input, select { min-width: 0; width: 100%; padding: .58rem .65rem; border: 1px solid #798985; border-radius: .4rem; background: #fff; color: var(--ink); }
button, .buy-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .55rem .85rem; border: 1px solid transparent; border-radius: .4rem; background: var(--teal); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
button:hover, .buy-link:hover { background: #064744; text-decoration: underline; }
button:disabled { cursor: default; opacity: .7; }
.shell { width: min(1240px, calc(100% - 2.5rem)); margin-inline: auto; }
.sr-only, .skip:not(:focus) { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip { position: fixed; z-index: 2; top: .5rem; left: .5rem; background: white; padding: .6rem 1rem; }
.header { background: var(--white); border-top: 4px solid var(--teal); border-bottom: 1px solid var(--line); }
.mast { display: grid; grid-template-columns: max-content minmax(0,1fr) max-content; gap: clamp(.8rem,2vw,2rem); align-items: center; padding-block: .7rem; }
.wordmark { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.wordmark img { flex: none; }
.search { display: flex; gap: .35rem; min-width: 0; }
.utility, .nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; }
.utility a, .nav a { color: var(--ink); font-size: .88rem; padding: .45rem 0; text-decoration: none; font-weight: 650; }
.utility span { font: 650 .75rem ui-monospace, monospace; background: #e1ebe3; padding: .13rem .35rem; border-radius: .3rem; }
.nav { border-top: 1px solid var(--line); padding-block: .12rem; }
.nav a:hover, .utility a:hover { text-decoration: underline; }
main { min-height: 60vh; padding-block: 1.15rem 3rem; }
.bench { display: grid; grid-template-columns: minmax(0,2fr) minmax(225px,1fr); color: #fffdf7; background: var(--dark); border-radius: .8rem; overflow: hidden; }
.bench-copy { padding: clamp(1.15rem,3vw,2.5rem); }
.bench-copy p:not(.eyebrow) { max-width: 42rem; color: #dcebe4; }
.eyebrow, .spec-label { font: 700 .75rem/1.35 ui-monospace, monospace; letter-spacing: .055em; text-transform: uppercase; }
.eyebrow { color: var(--teal); }
.bench .eyebrow { color: var(--sand); }
.fit-finder { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; margin-top: 1.05rem; }
.fit-finder label, .filter-rail label { display: grid; gap: .2rem; font-size: .9rem; font-weight: 650; }
.fit-finder button { background: var(--sand); color: var(--ink); }
.fit-finder button:hover { background: #f9cd81; }
.bench-key { display: grid; align-content: center; background: #254543; padding: 1.05rem 1.4rem; border-left: 1px solid #688681; }
.bench-key svg { color: var(--sand); width: min(100%,220px); margin-inline: auto; }
.bench-key dl { display: grid; gap: .3rem; margin: .55rem 0 0; }
.bench-key dl div { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.bench-key dt { color: var(--sand); font-family: ui-monospace, monospace; }
.bench-key dd { margin: 0; }
.shelf, .editorial, .page-heading { margin-block: 1.35rem; }
.shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.shelf-heading h2 { margin: 0; }
.shelf-heading .eyebrow { margin-bottom: .25rem; }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .9rem; }
.product-card, .tile, .buy-panel, .filter-rail, .editorial, .cart-row, .compare-card { border: 1px solid var(--line); border-radius: .6rem; background: var(--white); min-width: 0; overflow-wrap: anywhere; }
.product-card { display: flex; flex-direction: column; overflow: hidden; }
.card-image { display: block; background: #fff; border-bottom: 1px solid #e1e7e0; }
.card-image img { width: 100%; height: auto; aspect-ratio: 1; }
.featured-grid .card-image img { height: clamp(160px,16vw,220px); object-fit: contain; }
.card-text { display: flex; flex-direction: column; padding: .75rem; flex: 1; }
.card-text .spec-label { align-self: start; border-radius: .22rem; padding: .22rem .38rem; background: #e4eee5; color: #173f3b; }
.card-text h3 { margin-top: .5rem; }
.card-text h3 a { color: var(--ink); text-decoration: none; }
.card-text h3 a:hover { text-decoration: underline; }
.opening { margin-bottom: .45rem; color: var(--muted); font: .8rem/1.35 ui-monospace, monospace; }
.product-price { margin: .35rem 0 .62rem; display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: .17rem; }
.price-amount { font-size: 1.28rem; line-height: 1.25; }
.price-observed { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.price-info { font-size: .78rem; color: #24443f; }
.price-info summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.price-info p { margin: .4rem 0 0; color: var(--ink); }
.card-text .buy-link { margin-top: auto; }
.choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem; margin-top: .55rem; }
.choices button, .quiet { background: #fff; color: var(--teal); border-color: #9caeaa; min-height: 40px; padding: .4rem; font-size: .84rem; }
.choices button:hover, .choices button[aria-pressed="true"], .quiet:hover { color: #143e39; background: #e3f0e9; }
.tile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.tile { display: grid; gap: .35rem; padding: .9rem; text-decoration: none; }
.tile span { color: var(--muted); font-size: .88rem; }
.tile:hover strong { text-decoration: underline; }
.page-heading h1 { max-width: 61rem; }
.page-heading p { max-width: 52rem; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .81rem; margin: 0 0 .8rem; overflow-wrap: anywhere; }
.shop { display: grid; grid-template-columns: minmax(180px,220px) minmax(0,1fr); gap: 1rem; align-items: start; }
.filter-rail { padding: .8rem; }
.filter-rail summary { color: var(--teal); font-weight: 700; cursor: pointer; }
.filter-rail form { display: grid; gap: .65rem; padding-top: .65rem; }
.shop-grid, .related-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.result-count { color: var(--muted); font: .85rem ui-monospace, monospace; margin: .1rem 0 .65rem; }
.editorial { padding: clamp(.9rem,2vw,1.5rem); }
.editorial p { max-width: 69rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: .75rem; }
.checks article { padding: .8rem; background: #eaf0e8; border: 1px solid #c5d0c6; border-radius: .35rem; }
.checks article p:last-child { margin: 0; }
.text-link { display: inline-block; margin-top: .45rem; font-weight: 700; }
.question { border-top: 1px solid var(--line); padding-block: .65rem; }
.question summary { color: var(--teal); font-weight: 650; cursor: pointer; }
.question p { margin: .45rem 0 0; }
.product-heading h1 { font-size: clamp(1.9rem,4.3vw,3.4rem); overflow-wrap: anywhere; }
.product-heading .eyebrow { margin-bottom: .25rem; }
.product-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: 1rem; align-items: start; }
figure { margin: 0; min-width: 0; }
figure img { width: 100%; height: auto; max-height: 540px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: .6rem; }
figcaption { font-size: .8rem; color: var(--muted); margin: .3rem 0 .75rem; }
.buy-panel { padding: clamp(.8rem,2.1vw,1.4rem); border-top: 4px solid var(--teal); }
.buy-panel > .buy-link { width: 100%; }
.merchant-note { color: var(--muted); font-size: .82rem; margin: .45rem 0 .6rem; }
.fact-list { margin: .7rem 0; font-size: .88rem; }
.fact-list div { display: grid; grid-template-columns: minmax(85px,.8fr) minmax(0,1.2fr); gap: .5rem; border-top: 1px solid var(--line); padding: .35rem 0; }
.fact-list dt { font-weight: 700; }
.fact-list dd { margin: 0; overflow-wrap: anywhere; }
.section-nav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .65rem .7rem; border-block: 1px solid var(--line); margin: 1.1rem 0; }
.section-nav a { font-weight: 650; padding-block: .15rem; }
.guide-steps { display: grid; gap: .75rem; padding-left: 1.3rem; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: .7rem; }
.compare-card, .cart-row { padding: .8rem; }
.compare-card img { width: 100%; height: auto; max-height: 200px; object-fit: contain; }
.compare-card h2, .cart-row h2 { font-size: 1.15rem; }
.cart-list { display: grid; gap: .7rem; }
.cart-row { display: grid; grid-template-columns: 90px minmax(0,1fr) auto; align-items: start; gap: .6rem; }
.cart-row img { width: 100%; height: auto; }
.cart-row input { width: 5.5rem; }
.footer { background: #173d39; color: #f8fcf8; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; }
.footer p { margin: .25rem 0; font-size: .85rem; }
.footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.footer a { color: #ffedcd; }
@media(max-width:950px) { .mast { grid-template-columns: 1fr 1fr; }.search { grid-row: 2; grid-column: 1/-1; }.utility { justify-content: end; }.product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.fit-finder { grid-template-columns: 1fr 1fr; }.fit-finder button { grid-column: 1/-1; }}
@media(max-width:720px) { .shell { width: calc(100% - 1.4rem); }.bench { grid-template-columns: 1fr; }.bench-key { display: none; }.shop { grid-template-columns: 1fr; }.product-hero { grid-template-columns: 1fr; }.product-hero figure img { max-height: 360px; }.tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }}
@media(max-width:590px) { .mast { gap: .35rem .65rem; grid-template-columns: 1fr; padding-block: .5rem; }.utility { justify-content: start; }.nav { gap: .1rem .55rem; }.nav a { font-size: .75rem; padding-block: .3rem; }.product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }.featured-grid .card-image img { height: 126px; }.card-text { padding: .6rem; }.cart-row { grid-template-columns: 65px minmax(0,1fr); }.cart-row > div:last-child { grid-column: 2; }.wordmark img { width: 30px;height:30px; }.shelf-heading { align-items: start; }.fit-finder { gap: .4rem; margin-top: .55rem; }.fit-finder label { min-width: 0; font-size: .8rem; }.fit-finder select { font-size: .78rem; }.tile-grid { gap: .5rem; }.tile { padding: .7rem; }}