/*
  The shop's stylesheet. Deliberately one file, hand-written, no framework: the
  whole thing is smaller than a framework's reset alone, and on a site whose
  visitors are often on a phone in a storage yard with two bars of signal, that
  is worth more than any convenience it costs to write.

  It is never merged with the back office stylesheet. They look nothing alike,
  they change for different reasons, and a shopper should never download the
  admin styles.
*/

:root {
  --ink: #10202f;
  --ink-soft: #4a5b6c;
  --line: #dde4ea;
  --line-soft: #eef2f5;
  --paper: #ffffff;
  --paper-tint: #f6f8fa;
  --navy: #0b1623;
  --accent: #d2652a;          /* vinyl orange, used sparingly */
  --accent-dark: #a94d1c;
  --link: #14567d;
  --good: #1c6b45;
  --bad: #9d2b2b;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 47, .06), 0 8px 24px rgba(16, 32, 47, .06);
  --measure: 68ch;

  /* Two texture tiles, laid over flat panels wherever one would otherwise sit
     there perfectly smooth. A large area of clean CSS gradient is the single
     clearest tell that a page was assembled rather than designed, and both of
     these cost one small cached request between them.

     Written unstamped on purpose. `asset()` cannot reach inside a stylesheet,
     and neither file will ever change: the grain is noise and the mat is a
     grid. If either one ever does change, rename it rather than editing it. */
  --grain: url("/static/art/grain.svg");
  --mat: url("/static/art/cutting-mat.svg");
  --noshot: url("/static/art/noshot.svg");
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: 1.35rem; }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem); }
.band { padding-block: 2.5rem; }
.rule { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); }
.dot { color: var(--line); margin: 0 .4em; }

.sr, .trap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .75rem 1rem;
}
.skip:focus { left: 0; }

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

.btn {
  display: inline-block; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
  padding: .6rem 1.1rem; cursor: pointer; font-size: 1rem; line-height: 1.4;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-big { padding: .85rem 1.5rem; font-size: 1.05rem; }
.btn-quiet, .btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover, .btn-ghost:hover { background: var(--paper-tint); color: var(--ink); border-color: var(--ink-soft); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* --- top of the page --------------------------------------------------- */

.strip {
  background: var(--navy); color: #f4f7fa; text-align: center;
  padding: .55rem 1rem; font-size: .9rem;
}

.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
.masthead-in {
  display: grid; gap: 1rem 1.5rem; align-items: center; padding: 1rem 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.brandmark { text-decoration: none; color: var(--ink); display: block; }
.brandmark-name { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.brandmark-line { display: block; font-size: .78rem; color: var(--ink-soft); }

.hunt { position: relative; display: flex; }
.hunt input {
  flex: 1; min-width: 0; padding: .65rem .9rem; font-size: 1rem;
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--paper-tint);
}
.hunt input:focus { outline: 2px solid var(--link); outline-offset: -2px; background: #fff; }
.hunt button {
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  padding: 0 1.2rem; font-weight: 600; cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; }
.suggest-list {
  list-style: none; margin: .25rem 0 0; padding: .25rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.suggest-list a { display: block; padding: .45rem .6rem; text-decoration: none; color: var(--ink); border-radius: 6px; }
.suggest-list a:hover { background: var(--paper-tint); }

.quick { display: flex; gap: 1.1rem; font-size: .95rem; }
.quick a { color: var(--ink); text-decoration: none; font-weight: 600; }
.quick a:hover { color: var(--accent-dark); }

.shelf { background: var(--paper-tint); border-top: 1px solid var(--line); }
.shelf-in { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.shelf-item { position: relative; }
.shelf-item > a {
  display: block; padding: .7rem 0; font-size: .92rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.shelf-item > a:hover { color: var(--accent-dark); }
.shelf-drop {
  display: none; position: absolute; top: 100%; left: -.75rem; z-index: 30;
  min-width: 230px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem;
}
/* Hover to open, and focus-within so it also opens from the keyboard. */
.shelf-item:hover .shelf-drop, .shelf-item:focus-within .shelf-drop { display: block; }
.shelf-drop a { display: block; padding: .4rem .6rem; color: var(--ink); text-decoration: none; border-radius: 6px; font-size: .92rem; }
.shelf-drop a:hover { background: var(--paper-tint); }
.shelf-more { font-weight: 600; color: var(--link) !important; }

.note { border-radius: var(--radius); padding: .7rem 1rem; margin: 1rem 0; font-size: .95rem; }
.note-ok { background: #e8f4ee; color: var(--good); border: 1px solid #bfe0cf; }
.note-err { background: #fbeceb; color: var(--bad); border: 1px solid #f0cbc8; }

.crumbs { padding: .9rem 0; font-size: .85rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dark); text-decoration: underline; }
.crumb-sep { margin: 0 .45rem; color: var(--line); }

/* --- front page -------------------------------------------------------- */

/* The hero is three stacked layers, in this order top to bottom:
   grain, a left-to-right scrim, then the picture. The template supplies the
   picture through --hero-shot so a photograph dropped in through the settings
   screen slots into the same stack with no CSS change.

   The scrim is what makes the headline legible over anything. It has to stay
   dark at the left whatever the picture is — a hero that reads beautifully
   over the artwork and illegibly over the owner's own photograph is worse
   than no photograph at all. */
.hero {
  position: relative;
  color: #fff;
  background:
    var(--grain) repeat 0 0 / 220px,
    linear-gradient(96deg,
      rgba(9, 19, 31, .93) 0%,
      rgba(9, 19, 31, .80) 32%,
      rgba(9, 19, 31, .42) 62%,
      rgba(9, 19, 31, .18) 100%),
    var(--hero-shot, none) center 62% / cover no-repeat,
    var(--navy);
  background-blend-mode: overlay, normal, normal, normal;
  border-bottom: 3px solid var(--accent);
}
.hero-in { padding: clamp(3.5rem, 9vw, 7rem) 0; max-width: 46rem; position: relative; }
.hero h1 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.4rem);
  text-shadow: 0 1px 24px rgba(6, 14, 24, .5);
}
.hero p { font-size: 1.15rem; color: #e2e9f0; max-width: 34rem; text-shadow: 0 1px 14px rgba(6, 14, 24, .55); }
.hero-do { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* A hairline of the cut-vinyl orange under the hero, echoed as a thin ribbon
   across the top of the pledges. It is the only place the two bands touch, and
   without it the hero looks pasted on rather than part of the page. */
.pledges {
  background: var(--mat) repeat 0 0 / 120px, var(--paper-tint);
  background-blend-mode: multiply, normal;
  border-bottom: 1px solid var(--line);
}
.pledges-in {
  display: grid; gap: 1.5rem 2rem; padding: 2.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pledge { display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem .9rem; align-items: start; }
.pledge svg { grid-row: span 2; width: 2.25rem; height: 2.25rem; color: var(--accent); }
.pledges h2 { font-size: 1rem; margin-bottom: .25rem; align-self: center; }
.pledges p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.band-head h2 { margin: 0; }
.band-more { font-weight: 600; font-size: .92rem; text-decoration: none; }

.words { max-width: var(--measure); }
.words p { color: var(--ink-soft); }

/* --- illustrated category tiles ---------------------------------------- */

/* Used on the front page and on /types. Four drawings cover every category —
   `art_for()` picks one from the category's own words — so a catalogue that
   grows a new kind of part still gets a picture rather than a blank box.
   They share a viewBox and a palette, which is why a row of them reads as one
   set instead of as stock clip art gathered from four places. */
.kinds { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kind {
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.kind:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.kind-art { display: block; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--paper-tint); }
.kind-say { padding: .85rem 1rem 1rem; }
.kind-name { font-weight: 700; display: block; }
.kind-count { font-size: .82rem; color: var(--ink-soft); }
.kind:hover .kind-name { color: var(--accent-dark); }

/* --- page headers ------------------------------------------------------- */

/* Every page that is not the front page or a product gets one of these, so a
   content page opens with something other than a headline against white. */
.pagehead {
  background: var(--mat) repeat 0 0 / 120px, var(--paper-tint);
  background-blend-mode: multiply, normal;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, transparent 22%);
}
.pagehead h1 { margin-bottom: .35rem; }
.pagehead .lede { margin-bottom: 0; }

/* --- product grid ------------------------------------------------------ */

.grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: .75rem; display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); border-color: #c9d4dd; }
.card-link { text-decoration: none; color: inherit; }
.card-shot { position: relative; aspect-ratio: 1; background: var(--paper-tint); border-radius: 6px; overflow: hidden; }
.card-shot img { width: 100%; height: 100%; object-fit: contain; }
/* The drawing carries the words "Photograph to follow" itself, so the text in
   the markup is there for a screen reader and for the case where the SVG fails
   to load — hence `text-indent`, not `display: none`, which would take it from
   the accessibility tree as well. `contain` rather than `cover`: the outline
   must not be cropped into an unreadable shape by a tall card. */
.card-noshot {
  height: 100%;
  background: var(--noshot) center / contain no-repeat, var(--paper-tint);
  text-indent: -9999px; overflow: hidden;
}
.card-title {
  font-size: .95rem; font-weight: 600; margin: .7rem 0 .35rem; line-height: 1.35;
  /* Two lines, then an ellipsis: eBay titles are keyword-stuffed and a card
     that grows to five lines wrecks the row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { font-size: .8rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.card-meta a { color: var(--ink-soft); text-decoration: none; }
.card-meta a:hover { text-decoration: underline; }
.card-price { margin: auto 0 0; font-size: 1.05rem; }
.card-price s { color: var(--ink-soft); font-size: .85rem; margin-left: .4rem; font-weight: 400; }

.flag {
  position: absolute; top: .5rem; left: .5rem; border-radius: 999px;
  padding: .2rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.flag-offer { background: var(--accent); color: #fff; }
.flag-gone { background: var(--navy); color: #fff; left: auto; right: .5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .9rem; text-decoration: none; color: var(--ink);
  background: #fff; font-size: .92rem;
}
.chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.chip-sm { font-size: .8rem; padding: .25rem .7rem; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tiles a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  text-decoration: none; color: var(--ink); background: #fff;
}
.tiles a:hover { border-color: var(--accent); }
.tile-name { font-weight: 600; }
.tile-count { font-size: .8rem; color: var(--ink-soft); }

.shelves { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shelf-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
/* The illustration sits flush to the three edges it touches; the padding lives
   on the children instead, or the drawing would float in a white margin. */
.shelf-card > :not(.shelf-art) { padding-inline: 1.25rem; }
.shelf-card > :last-child { padding-bottom: 1.1rem; }
.shelf-art {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--paper-tint); border-bottom: 1px solid var(--line);
}
.shelf-card h2 { font-size: 1.1rem; padding-top: 1.1rem; }
.shelf-card h2 a { text-decoration: none; color: var(--ink); }
.shelf-card p { color: var(--ink-soft); font-size: .92rem; }
.shelf-card ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.shelf-card li { padding: .2rem 0; }

/* --- listing ----------------------------------------------------------- */

.listing { padding-block: 1rem 3rem; }
.listing-head { max-width: var(--measure); margin-bottom: 1.75rem; }
.listing-body { display: grid; gap: 2rem; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }

.sift { position: sticky; top: 1rem; }
.sift form { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: #fff; }
.sift fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.sift legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: .5rem; }
.sift-pair { display: flex; gap: .5rem; }
.sift-pair input { width: 100%; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
.tick { display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
.sift-clear { display: inline-block; margin-left: .75rem; font-size: .88rem; }
.sift-nav { margin-top: 1.75rem; }
.sift-nav h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.sift-nav a { display: block; padding: .3rem 0; font-size: .93rem; text-decoration: none; color: var(--ink); }
.sift-nav a:hover { color: var(--accent-dark); }
.sift-more { font-weight: 600; color: var(--link) !important; }

.results-head {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.tally { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.sorter select { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .95rem; }
.widened { background: #fdf6ec; border: 1px solid #f0dcc2; border-radius: var(--radius); padding: .7rem 1rem; font-size: .93rem; }

/* An empty state is the largest expanse of nothing on the site, and the site
   will be showing one until the first eBay pull lands — so it gets the mat and
   a border rather than being left as bare white. */
.empty {
  text-align: center; padding: 3rem 1.5rem; max-width: 46rem; margin-inline: auto;
  background: var(--mat) repeat 0 0 / 120px, var(--paper-tint);
  background-blend-mode: multiply, normal;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.empty p { color: var(--ink-soft); }
.empty-do { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.pager a, .pager-here, .pager-gap {
  min-width: 2.4rem; text-align: center; padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink);
}
.pager a:hover { border-color: var(--accent); color: var(--accent-dark); }
.pager-here { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.pager-gap { border: 0; }
.pager-step { font-weight: 600; }

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

.product { padding-block: 1rem 3rem; }
.product-main { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }

.shot-big { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-tint); aspect-ratio: 1; overflow: hidden; }
.shot-big img { width: 100%; height: 100%; object-fit: contain; }
.shot-strip { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.shot-strip img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.shot-strip a:hover img { border-color: var(--accent); }

.buy h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.buy-filed { font-size: .9rem; color: var(--ink-soft); margin-top: -.25rem; }
.buy-price { font-size: 2rem; font-weight: 800; margin: 1rem 0 .25rem; }
.buy-price s { font-size: 1.1rem; font-weight: 400; color: var(--ink-soft); margin-left: .5rem; }
.buy-price .flag { position: static; margin-left: .5rem; vertical-align: middle; }
.buy-post { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.25rem; }
.buy-stock { font-weight: 700; margin: 0 0 1rem; }
.buy-stock.in { color: var(--good); }
.buy-stock.out { color: var(--bad); }
.buy-do { display: flex; flex-wrap: wrap; gap: .75rem; }
.buy-note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; max-width: 34rem; }
.buy-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.sku { font-variant-numeric: tabular-nums; }

.product-text { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; margin-top: 3rem; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.75rem; font-size: 1.15rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
/* eBay descriptions arrive full of layout tables. Keep them inside the column. */
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: .92rem; }
.prose td, .prose th { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; }

.spec { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; background: var(--paper-tint); }
.spec h2 { font-size: 1rem; }
.spec dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.spec dt { color: var(--ink-soft); }
.spec dd { margin: 0; font-weight: 600; }
.spec-help { font-size: .85rem; color: var(--ink-soft); margin: 0; }

/* --- forms and content pages ------------------------------------------- */

.form { display: grid; gap: .35rem; max-width: 34rem; margin-top: 1.5rem; }
.form label { font-weight: 600; font-size: .92rem; margin-top: .75rem; }
.form input, .form textarea {
  font: inherit; padding: .6rem .75rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.form button { margin-top: 1.25rem; justify-self: start; }
.form-note { font-size: .85rem; color: var(--ink-soft); }
.field-err { color: var(--bad); font-size: .85rem; margin: .1rem 0 0; }
.opt { font-weight: 400; color: var(--ink-soft); }

.code { font-size: 3rem; font-weight: 800; color: var(--line); margin: 0; line-height: 1; }

/* --- basket, checkout, order -------------------------------------------- */

/* The basket link in the masthead. It carries a count when there is something
   in it, and nothing at all when there is not: an empty "0" beside every page
   of a shop reads as a nag. */
.quick-basket.has-items { color: var(--accent-dark); }
.pip {
  display: inline-block; min-width: 1.35em; padding: 0 .35em;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .78rem; line-height: 1.45; text-align: center;
  font-variant-numeric: tabular-nums;
}

.basket-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.basket-table th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); font-weight: 700;
  border-bottom: 2px solid var(--line); padding: 0 .6rem .5rem 0;
}
.basket-table td { border-bottom: 1px solid var(--line-soft); padding: .9rem .6rem .9rem 0; vertical-align: top; }
.basket-table th:last-child, .basket-table td:last-child { padding-right: 0; text-align: right; }
/* Money and quantities right-aligned so the column reads as a column. */
.basket-table td:nth-child(2), .basket-table td:nth-child(4) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.basket-table th:nth-child(2), .basket-table th:nth-child(4) { text-align: right; }

.basket-item { display: flex; gap: .85rem; align-items: flex-start; }
.basket-item img { border-radius: 6px; border: 1px solid var(--line); background: var(--paper-tint); object-fit: cover; flex: none; }
.basket-item a { font-weight: 600; text-decoration: none; }
.basket-item a:hover { text-decoration: underline; }
.basket-item .sku { display: block; font-size: .82rem; color: var(--ink-soft); }
.basket-short { display: block; font-size: .82rem; color: var(--bad); margin-top: .2rem; }

.qty {
  font: inherit; width: 4.5rem; padding: .4rem .5rem; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.qty:focus { outline: 2px solid var(--link); outline-offset: -2px; }

/* A button that has to sit in a table cell and read as a link. Kept a button
   because it submits a form, and a link that posts is a lie to a screen reader. */
.link-btn {
  border: 0; background: none; padding: 0; font: inherit; font-size: .88rem;
  color: var(--link); text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--bad); }

.basket-foot { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; }
.basket-nudge {
  background: var(--paper-tint); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: .7rem 1rem; font-size: .92rem; margin: 1rem 0 0;
}
.basket-post { font-size: .88rem; color: var(--ink-soft); }

/* Choosing the service. The whole row is the label, so the target is the row
   and not a 13px circle — this is the one control on the shop that a person
   uses with one thumb while holding a caravan door open. */
.postage-pick { margin: 1.5rem 0 0; }
.postage-pick fieldset { border: 0; margin: 0; padding: 0; }
.postage-pick legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.pick {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .7rem;
  align-items: baseline; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .9rem; margin-bottom: .5rem; background: var(--paper);
}
.pick:hover { border-color: var(--link); }
.pick:has(input:checked) { border-color: var(--link); background: var(--paper-tint); }
.pick input { margin: 0; }
.pick-name { font-weight: 700; }
.pick-cost { font-weight: 700; font-variant-numeric: tabular-nums; }
.pick-when { grid-column: 2 / -1; font-size: .88rem; color: var(--ink-soft); }
.pick-why { grid-column: 2 / -1; font-size: .85rem; color: var(--bad); }
/* Shown, not hidden: a service that quietly disappears looks like a decision
   somebody made rather than a gap in the postage table. */
.pick-off { cursor: not-allowed; opacity: .6; }
.pick-off:hover { border-color: var(--line); }
.pick-weight { font-size: .85rem; color: var(--ink-soft); margin: .6rem 0 0; }
.tiny { font-size: .78rem; color: var(--ink-soft); font-weight: 400; }

.totals {
  display: grid; grid-template-columns: auto auto; gap: .35rem 1.5rem;
  margin: 0; margin-left: auto; min-width: 15rem; font-size: .95rem;
}
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand { font-size: 1.15rem; font-weight: 800; color: var(--ink); padding-top: .35rem; border-top: 1px solid var(--line); }

.checkout-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; margin-top: 1.5rem; }
.checkout-form { max-width: 34rem; }
.checkout-form h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.field { display: grid; gap: .3rem; margin: 0 0 1.1rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field textarea {
  font: inherit; padding: .6rem .75rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.field.bad input, .field.bad textarea { border-color: var(--bad); background: #fdf7f7; }
.field .hint { font-size: .82rem; color: var(--ink-soft); }
.field .err { font-size: .85rem; color: var(--bad); font-weight: 600; }

.checkout-summary {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; background: var(--paper-tint); position: sticky; top: 1.5rem;
}
.checkout-summary h2 { font-size: 1rem; margin-bottom: .75rem; }
.checkout-summary .totals { min-width: 0; margin-left: 0; }
.summary-lines { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.summary-lines li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.summary-lines .n { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.summary-lines a { text-decoration: none; }
.summary-lines a:hover { text-decoration: underline; }
.summary-lines .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout-small { font-size: .82rem; color: var(--ink-soft); max-width: 34rem; }

.order-ref { font-size: .92rem; color: var(--ink-soft); }
.order-ref strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink); }
.order-page h2 { font-size: 1.05rem; margin-top: 2rem; }
.order-address { line-height: 1.7; }
.order-note, .order-shopnote {
  border-left: 3px solid var(--line); padding-left: 1rem;
  color: var(--ink-soft); max-width: var(--measure);
}

/* --- foot -------------------------------------------------------------- */

/* Grain over the footer for the same reason it is over the hero: this is the
   second-largest flat block of one colour on the page, and a perfectly smooth
   navy slab is exactly what makes a layout look generated rather than made. */
.foot {
  background: var(--grain) repeat 0 0 / 220px, var(--navy);
  background-blend-mode: overlay, normal;
  color: #c9d5e0; margin-top: 3rem; padding-top: 2.5rem;
  border-top: 3px solid var(--accent);
}
.foot-in { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 2rem; }
.foot h2 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.foot p { font-size: .9rem; }
.foot-col a { display: block; color: #c9d5e0; text-decoration: none; padding: .2rem 0; font-size: .92rem; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-contact a { display: inline; color: #fff; }
.foot-end { border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0; }
.foot-end p { margin: 0; font-size: .82rem; color: #8fa2b4; }

/* --- news ---------------------------------------------------------------
   Deliberately plain. A news page competes with the catalogue for attention
   and should lose: it is here to be read and to be indexed, not to sell from.
   One column at a readable measure, the same rule between items that the
   content pages use. */

.news-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.news-item { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.news-item:first-child { border-top: 0; padding-top: 0; }
.news-item h2 { font-size: 1.2rem; margin: 0 0 .35rem; }
.news-item h2 a { color: var(--ink); text-decoration: none; }
.news-item h2 a:hover { color: var(--accent-dark); text-decoration: underline; }
.news-item p { color: var(--ink-soft); margin: 0; max-width: var(--measure); }
.news-when { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: .35rem; }

.article-head { margin-bottom: 1.5rem; }
.article-head h1 { margin-bottom: .35rem; }
.article-figure { margin: 0 0 1.75rem; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.article-more { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; }
.article-more h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* --- narrower screens --------------------------------------------------- */

@media (max-width: 900px) {
  .masthead-in { grid-template-columns: 1fr auto; }
  .hunt { grid-column: 1 / -1; order: 3; }
  .listing-body { grid-template-columns: 1fr; }
  /* The sidebar goes under the results on a phone: on a small screen the
     first thing wanted is the products, not the filters. */
  .sift { position: static; order: 2; }
  .results { order: 1; }
  .product-main, .product-text { grid-template-columns: 1fr; gap: 1.75rem; }
  .checkout-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* The summary goes above the form on a narrow screen: it is what somebody
     wants to check before they start typing an address. */
  .checkout-summary { position: static; order: -1; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  /* The other quick links are all in the footer, but the basket is not
     something to make anybody scroll for. */
  .quick a:not(.quick-basket) { display: none; }
  .basket-item img { display: none; }
  .basket-table { font-size: .9rem; }
  .basket-table td, .basket-table th { padding-right: .4rem; }
  .basket-foot { flex-direction: column; }
  .totals { margin-left: 0; width: 100%; }
  .qty { width: 3.6rem; }
  .shelf-in { flex-wrap: nowrap; overflow-x: auto; gap: 1rem; }
  .shelf-drop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  /* The order page is the nearest thing to a receipt anybody gets, so it has
     to print as one: no navigation, no buttons, and the totals intact. */
  .masthead, .shelf, .foot, .sift, .pager, .strip, .skip { display: none; }
  .empty-do, .link-btn, .basket-foot button { display: none; }
}