/* Golflist.
   Light, soft, and built around the product photography rather than around chrome. Manrope
   throughout, which is rounder and friendlier than a grotesque and reads well at every age.
   Corners are generous, borders are quiet, and the only strong colour is a single fairway
   green used for the buy action and nothing else. */

:root {
  --paper: #f7f8f6;
  --card: #ffffff;
  --ink: #14180f;
  --ink-2: #5c6357;
  --ink-3: #929a8d;
  --line: #e8eae5;
  --line-2: #d7dad2;
  --green: #157347;
  --green-2: #0f5a37;
  --green-soft: #e9f4ee;
  --red: #b5312a;
  --red-soft: #fdeeed;
  --r: 16px;
  --r-s: 10px;
  --shadow: 0 1px 2px rgba(20,24,15,.04), 0 6px 20px rgba(20,24,15,.05);
  --shadow-2: 0 2px 6px rgba(20,24,15,.06), 0 16px 40px rgba(20,24,15,.09);
  --wrap: 1240px;
}

* { box-sizing: border-box; }
/* .card and .panel set their own display, which beats the browser's [hidden] rule. Without this
   the filters mark cards hidden and they carry on showing. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.03em; font-weight: 800; }
h1 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.12; }
h2 { font-size: clamp(19px, 2vw, 24px); line-height: 1.2; }
h3 { font-size: 16px; font-weight: 700; }

.label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- masthead ---------- */
header.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar { display: flex; align-items: center; gap: 24px; height: 78px; }
.brand { flex: 0 0 auto; display: block; }
.brand img { height: 42px; width: auto; display: block; }

/* min-width: 0 or the flex item refuses to shrink below its content, the header grows wider
   than the phone and the whole page scrolls sideways. overflow-x here does nothing without it. */
nav.main { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
nav.main a:hover { background: var(--paper); color: var(--ink); }
nav.main a[aria-current] { background: var(--green-soft); color: var(--green); }

/* The header only carries a trigger. Search itself is a panel over the page: at 8k products the
   list needs room, and a 330px dropdown made every result an abbreviation of itself. */
.searchtrigger {
  margin-left: auto; flex: 0 1 300px; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 10px 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink-3); font: inherit; font-size: 15px; cursor: pointer;
  text-align: left; transition: border-color .12s, box-shadow .12s, background .12s;
}
.searchtrigger:hover { background: #fff; border-color: var(--ink-3); color: var(--ink-2); }
.searchtrigger:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.searchtrigger svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.searchtrigger span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchtrigger kbd {
  flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px;
}

.searchwrap {
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center;
  padding: 10vh 20px 20px; background: rgba(18, 24, 20, 0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadein .14s ease-out;
}
.searchpanel {
  width: 100%; max-width: 680px; align-self: flex-start; background: #fff;
  border-radius: 20px; box-shadow: 0 30px 80px rgba(12, 20, 14, 0.35); overflow: hidden;
  display: flex; flex-direction: column; max-height: 76vh;
  animation: panelin .16s cubic-bezier(.2, .7, .3, 1);
}
@keyframes fadein { from { opacity: 0; } }
@keyframes panelin { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .searchwrap, .searchpanel { animation: none; } }

.searchfield { display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.searchfield svg { width: 22px; height: 22px; fill: var(--ink-3); flex: 0 0 auto; }
.searchfield input {
  flex: 1 1 auto; height: 68px; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 21px; font-weight: 600; letter-spacing: -0.01em;
}
.searchfield input:focus { outline: none; }
.searchfield input::placeholder { color: var(--ink-3); font-weight: 500; }
.searchfield input::-webkit-search-cancel-button { display: none; }
.searchfield .esc {
  flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 4px 9px; cursor: pointer;
}
.searchfield .esc:hover { color: var(--ink); }

#results { overflow-y: auto; padding: 8px; display: none; }
#results.on { display: block; }
#results a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; }
#results a:hover, #results a:focus-visible { background: var(--paper); outline: none; }
#results img { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
#results .rn { font-size: 15px; font-weight: 700; line-height: 1.25; }
#results .rm { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
#results .rp { margin-left: auto; flex: 0 0 auto; font-size: 15px; font-weight: 700; }
#results .none { padding: 26px 16px; color: var(--ink-3); font-size: 15px; text-align: center; }
.searchwrap.hasresults .searchhint { display: none; }
#results a.hot { background: var(--green-soft); }
#results .allres {
  display: block; text-align: center; margin-top: 4px; padding: 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--green); background: var(--paper);
}
#results .allres:hover { background: var(--green-soft); }
.sagain {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; background: var(--card);
}
.sagain:hover { border-color: var(--green); color: var(--green); }
.searchhint { padding: 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.searchhint b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 860px) {
  .topbar { gap: 12px; height: 64px; }
  .brand img { height: 30px; }
  nav.main { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  nav.main a { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 640px) {
  .searchwrap { padding: 0; }
  .searchpanel { max-width: none; max-height: 100%; height: 100%; border-radius: 0; }
  .searchtrigger { flex: 0 0 46px; padding: 0; justify-content: center; }
  .searchtrigger span, .searchtrigger kbd { display: none; }
}

/* ---------- home hero ---------- */
/* A band, not a poster: the job is to say what the site is and get you into the search box, so it
   is type and one control. The product grid below is what people actually came for. */
.hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 52px 0 42px; }
.herogrid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 34px 56px; align-items: center; }
.herotext { min-width: 0; }
@media (max-width: 940px) { .herogrid { grid-template-columns: minmax(0, 1fr); } .compare { display: none; } }
.hero h1 {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.032em;
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.hero .lede { margin: 14px 0 0; max-width: 56ch; font-size: 17px; color: var(--ink-2); }

.herosearch {
  margin: 26px 0 0; display: flex; align-items: center; gap: 13px; width: 100%; max-width: 460px;
  height: 58px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink-3); font: inherit; font-size: 17px; font-weight: 500;
  cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s, color .12s;
}
.herosearch:hover { border-color: var(--green); color: var(--ink-2); box-shadow: 0 0 0 4px var(--green-soft); }
.herosearch svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--paper);
}
.chips a:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }



/* One real comparison, built from the widest price gap in the data. It is the whole argument for
   the site, so it is shown rather than described. */
.compare { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--paper); }
.clabel { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.chead { display: flex; gap: 14px; align-items: center; margin: 12px 0 14px; }
.chead img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto;
             background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.chead b { display: block; font-size: 14.5px; line-height: 1.3; }
.chead span { font-size: 12px; color: var(--ink-3); }
.clist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.clist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.clist li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clist em {
  flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.clist .pbest { background: var(--green-soft); color: var(--green); }
.clist .pover { background: var(--red-soft); color: var(--red); }
.clist li b { font-variant-numeric: tabular-nums; color: var(--ink); }
.clist li.best { color: var(--green); }
.clist li.best b { color: var(--green); }
.cfoot { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }

.gaps { display: grid; gap: 8px; }
.gaps a {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 16px;
}
.gaps a:hover { border-color: var(--green); }
.gaps img { width: 46px; height: 46px; object-fit: contain; }
.gname { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grange { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gdiff { font-size: 14.5px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
@media (max-width: 620px) { .gaps a { grid-template-columns: 46px minmax(0, 1fr) auto; } .grange { display: none; } }


/* Retailer marks, from Logo.dev. Some come through as a coloured square and some as a wordmark,
   so they are kept small and never given a background of their own. */
.slogo { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; flex: 0 0 auto; }
.clist .slogo { width: 18px; height: 18px; }
.oname { display: flex; align-items: center; gap: 11px; min-width: 0; }
.oname .slogo { width: 26px; height: 26px; }

.soon {
  display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: 999px;
  background: var(--green-soft); color: var(--green); font-size: 12.5px; font-weight: 700;
}
.attribution { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.attribution a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.attribution a:hover { color: var(--ink-2); }


/* The closing explainer. Four short columns beat three long paragraphs: people read the heading
   that answers the question they actually have. */
.explain { border-top: 1px solid var(--line); }
.ecols { display: grid; gap: 26px 44px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ecols h3 { margin: 0 0 8px; font-size: 15px; }
.ecols p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); max-width: 46ch; }


.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 32px 0 4px; }
.pager a, .pager b {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
}
.pager a:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.pager b { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .pgap { color: var(--ink-3); padding: 0 2px; }
.pager .pprev { margin-right: 6px; }
.pager .pnext { margin-left: 6px; }


.hist {
  margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-s); font-size: 13.5px;
  background: var(--green-soft); color: var(--green-2); font-weight: 600;
}
.faq { border-top: 1px solid var(--line); }
.faq .qa { padding: 16px 0; border-bottom: 1px solid var(--line); max-width: 74ch; }
.faq .qa:last-child { border-bottom: 0; }
.faq h3 { margin: 0 0 6px; font-size: 15.5px; }
.faq p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }


/* The contact form is the Squarespace page drop-list.com uses, framed at a height that crops
   its own header and footer away. */
.embed {
  position: relative; height: 560px; overflow: hidden; margin: 22px 0 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.embed iframe { position: absolute; top: -12px; left: 0; width: 100%; height: 1120px; border: 0; }
.fine { font-size: 13px; color: var(--ink-3); }
.fine a { color: var(--green); font-weight: 600; }

/* ---------- page titles ---------- */
.ptitle { padding: 32px 0 2px; }
.ptitle .label { margin-bottom: 9px; }
.ptitle p { color: var(--ink-2); max-width: 64ch; margin: 11px 0 0; font-size: 16.5px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 7px; margin: 28px 0 0; flex-wrap: wrap; }
.shead + .tabs { margin-top: -2px; margin-bottom: 20px; }
.tabs button {
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
  padding: 9px 17px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink-2); transition: all .14s;
}
.tabs button:hover { border-color: var(--ink-3); color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.panel[hidden] { display: none; }
.panel { padding-top: 24px; }

/* ---------- product grid ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--line-2); }
.shot { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 18px; background: #fff; }
.shot img { max-height: 100%; width: auto; object-fit: contain; }
.cbody { padding: 2px 15px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cbrand { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.cname { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cprice { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 9px; }
.cprice b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.cprice s { color: var(--ink-3); font-size: 13px; }
.cshops { font-size: 12.5px; color: var(--ink-3); }

.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.tag.off { background: var(--red-soft); color: var(--red); }
.tag.used { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); }
.tag.new { background: var(--green-soft); color: var(--green); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- category index ---------- */
/* 210 rather than 184: at six columns the tiles were too narrow for "Rangefinders & GPS"
   next to a photo and a count, so mid-size screens now get five. */
.index { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.index a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-s); transition: all .14s;
}
.index a:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.index img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
/* min-width: 0, or a one-word label like "Rangefinders" refuses to shrink and pushes the
   count out through the right edge of the tile. */
.index b { font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 0; line-height: 1.2; overflow-wrap: break-word; }
.index span { font-size: 12.5px; color: var(--ink-3); flex: 0 0 auto; margin-left: auto; }
.index a:hover span { color: var(--green); }

/* ---------- sections ---------- */
section { padding: 40px 0; }
/* .wrap sets padding: 0 22px and it is a class, so on a <section class="wrap"> it was beating the
   rule above and flattening the vertical rhythm to nothing. */
section.wrap { padding-top: 46px; padding-bottom: 46px; }
section.wrap + section.wrap { padding-top: 0; }
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shead a { font-size: 14px; font-weight: 700; color: var(--green); }

/* ---------- product page ---------- */
.pwrap { display: grid; gap: 46px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 28px 0 8px; }
@media (max-width: 880px) { .pwrap { grid-template-columns: 1fr; gap: 28px; } }
.pshot { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 40px; display: grid; place-items: center; }
.pshot img { max-height: 440px; width: auto; }
.plead { color: var(--ink-2); margin: 14px 0 0; }

.pbuy { margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.pbuy .head { display: flex; align-items: center; gap: 13px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pbuy .head .hp { margin-left: auto; padding-right: 112px; }
.offer { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.offer:last-child { border-bottom: 0; }
.offer .pos { width: 18px; font-weight: 800; font-size: 14px; color: var(--ink-3); }
.offer.best .pos { color: var(--green); }
.offer .oshop { font-weight: 700; font-size: 15px; }
.offer .onote { font-size: 12.5px; color: var(--ink-3); }
/* What this shop calls it, when that is not what the page calls it. */
.offer .otitle { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.offer .oprice { margin-left: auto; text-align: right; }
.offer .oprice b { font-size: 18px; font-weight: 800; display: block; letter-spacing: -0.02em; }
.offer .go { background: var(--green); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 17px; border-radius: 999px; white-space: nowrap; transition: background .14s; }
.offer .go:hover { background: var(--green-2); }
.offer.best { background: var(--green-soft); }

.specs { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 14.5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.specs caption { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.specs th, .specs td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { color: var(--ink-3); font-weight: 600; width: 42%; }

.prose { color: var(--ink-2); max-width: 68ch; }
.prose p { margin: 0 0 15px; }
.prose h2 { color: var(--ink); margin: 26px 0 11px; }

.crumbs { font-size: 13px; color: var(--ink-3); padding: 16px 0 0; }
.crumbs a:hover { color: var(--green); }
.crumbs span { padding: 0 7px; color: var(--line-2); }

/* ---------- filter bar ---------- */
.bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 24px; }
/* The native select put its chevron hard against the pill's edge, so the arrow is drawn here
   instead, with room around it. */
.bar select {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 38px 9px 16px;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c6357' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px 8px;
}
.bar select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.count { font-size: 13.5px; color: var(--ink-3); margin-left: auto; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--card); margin-top: 48px; padding: 36px 0 52px; color: var(--ink-3); font-size: 13.5px; }
footer .cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
footer b { color: var(--ink); display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
footer a { display: block; padding: 3px 0; }
footer a:hover { color: var(--green); }
.fend { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.fmark { height: 22px; width: auto; opacity: .55; margin-bottom: 14px; }
.disclosure { margin: 0; max-width: 84ch; line-height: 1.65; }
/* Links inside the disclosure are part of the sentence, so they cannot be the block links the
   footer columns use. */
.disclosure a { display: inline; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.fcopy { margin: 14px 0 0; font-size: 12.5px; }
.fcopy a { display: inline; padding: 0; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  /* One row on a phone: wordmark, the nav scrolling under the thumb, and the search circle.
     The old rule wrapped the search box onto a line of its own and left the header half empty. */
  .topbar { height: 60px; gap: 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
  .index { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .index a { padding: 9px 12px; gap: 8px; }
  .index img { width: 36px; height: 36px; }
  .index b { font-size: 14px; }

  /* A phone screen is not a desktop with less width: the same page has to lose a third of its
     height or the first product is three swipes away. */
  .hero { padding: 26px 0 24px; }
  .hero .lede { font-size: 15.5px; margin-top: 10px; }
  .herosearch { height: 50px; font-size: 16px; margin-top: 18px; }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 14px -18px 0; padding: 0 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips a { white-space: nowrap; }

  /* The tab row scrolls rather than wrapping: "Used" alone on a second line looked like a mistake. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -18px 16px; padding: 0 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; }
  /* Four pills of different widths wrapped 1 / 2 / 1 down the page. A fixed two-up grid reads as
     a control panel instead of an accident. */
  .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 18px; }
  .bar select { width: 100%; padding: 10px 36px 10px 14px; background-position: right 13px center; }
  .count { grid-column: 1 / -1; margin-left: 0; }

  .shot { padding: 12px; }
  .cprice { padding-top: 6px; }

  section.wrap { padding-top: 30px; padding-bottom: 30px; }
  .shead { margin-bottom: 14px; }
  .ecols { gap: 20px 30px; }
  footer { margin-top: 30px; padding: 28px 0 40px; }
  .fend { margin-top: 22px; padding-top: 18px; }
}