/*
 * The shop.
 *
 * There is no build step in this project and no Tailwind at runtime, so every
 * rule a store page needs lives here. A utility class from another project
 * silently does nothing, which is why nothing on a store page uses one.
 *
 * Class names are prefixed s- so nothing here can collide with the brand
 * header, the shared site footer or the account pages, which carry their own
 * styles.
 *
 * Three rules this file is written to:
 *
 *  1. Nothing is smaller than 12px. A price, a GST note or a delivery promise
 *     a person cannot read on a 390px screen is the same as not printing it.
 *  2. Anything a finger presses is at least 44px tall. A quantity box that
 *     needs a fingernail is a quantity box that gets the wrong number.
 *  3. Every layout is fluid between 320px and 1440px. The shop is used on a
 *     phone at the window, an iPad on the bench and a desktop in the office.
 */

:root {
    --s-ink: #151412;
    --s-ink-2: #3b3833;
    --s-muted: #6b655c;
    --s-faint: #9a9184;
    --s-line: #e2ddd2;
    --s-line-soft: #efebe3;
    --s-paper: #faf8f4;
    --s-card: #ffffff;
    --s-shade: #f4f1ea;
    --s-accent: #0f766e;
    --s-accent-ink: #0b5a54;
    --s-accent-soft: #eef6f4;
    --s-good: #065f46;
    --s-good-bg: #ecfdf5;
    --s-warn: #92400e;
    --s-warn-bg: #fef3c7;
    --s-bad: #991b1b;
    --s-bad-bg: #fef2f2;
    --s-radius: 14px;
    --s-shadow: 0 1px 2px rgba(21, 20, 18, .04), 0 6px 18px rgba(21, 20, 18, .04);
}

* { box-sizing: border-box; margin: 0; }

body.s-body {
    font-family: var(--bx-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
    background: var(--s-paper);
    color: var(--s-ink);
    line-height: 1.55;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

/* ---- page frame ----------------------------------------------------- */

.s-wrap { max-width: 1220px; margin: 0 auto; padding: 0 18px 72px; }
.s-narrow { max-width: 640px; margin: 0 auto; }
.s-page { padding-top: 20px; }

/* ---- the chrome ------------------------------------------------------ */

/* The thin strip above the shop sign: the things a buyer needs once, not the
   things they need on every screen. It scrolls away; the shop sign does not. */
.s-strip { background: var(--s-ink); color: #ded9cf; font-size: 12.5px; }
.s-strip-in {
    max-width: 1220px; margin: 0 auto; padding: 0 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; min-height: 34px;
}
.s-strip a, .s-strip span { color: #ded9cf; text-decoration: none; }
.s-strip a { padding: 6px 0; }
.s-strip a:hover { color: #fff; text-decoration: underline; }
.s-strip .s-strip-fact { color: #a9a294; }
.s-strip .s-strip-end { margin-left: auto; display: flex; gap: 18px; align-items: center; }

.s-head {
    position: sticky; top: 0; z-index: 40;
    background: var(--s-card);
    border-bottom: 1px solid var(--s-line);
}
.s-head-in {
    max-width: 1220px; margin: 0 auto; padding: 10px 18px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 12px 18px;
}

.s-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--s-ink); line-height: 1.15; min-width: 0; }
.s-brand-name { font-family: var(--bx-serif, Georgia, serif); font-size: 21px; font-weight: 400; letter-spacing: -.01em; }
.s-brand-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--s-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The search box is the shop's front counter: on every page, always the same
   shape, never behind a button that needs JavaScript to open it. */
.s-search { display: flex; gap: 8px; min-width: 0; }
.s-search input[type=search] {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px;
    border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-shade);
    /* 16px, not 15: anything smaller and iOS zooms the whole page in the
       moment the buyer taps the search box. */
    font-size: 16px; font-family: inherit; color: var(--s-ink);
}
.s-search input[type=search]:focus { outline: 2px solid var(--s-accent); outline-offset: 1px; background: var(--s-card); }
.s-search button { flex: 0 0 auto; }

.s-basket {
    display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 14px;
    border: 1px solid var(--s-ink); border-radius: 999px; background: var(--s-ink); color: #fff;
    text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.s-basket:hover { background: var(--s-accent); border-color: var(--s-accent); }
.s-basket svg { flex: 0 0 auto; }
.s-basket-count {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: #fff; color: var(--s-ink); font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* The aisles. One row that scrolls sideways on a phone rather than four rows
   of chips that push the shelves off the screen. */
.s-nav { border-bottom: 1px solid var(--s-line); background: var(--s-card); }
.s-nav-in {
    max-width: 1220px; margin: 0 auto; padding: 0 18px;
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
}
.s-nav a {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
    color: var(--s-muted); text-decoration: none; font-size: 14px; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.s-nav a:hover { color: var(--s-ink); }
.s-nav a.on { color: var(--s-ink); font-weight: 600; border-bottom-color: var(--s-accent); }

/* ---- breadcrumbs ------------------------------------------------------ */

.s-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--s-muted); padding: 14px 0 2px; }
.s-crumbs a { color: var(--s-muted); text-decoration: none; }
.s-crumbs a:hover { color: var(--s-ink); text-decoration: underline; }
.s-crumbs .s-crumb-sep { color: var(--s-faint); }
.s-crumbs .s-crumb-here { color: var(--s-ink); font-weight: 600; }

/* ---- headings and text ------------------------------------------------ */

.s-h1 { font-family: var(--bx-serif, Georgia, serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18; letter-spacing: -.01em; }
.s-h2 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.s-h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.s-lede { color: var(--s-muted); font-size: 15px; max-width: 64ch; margin-top: 8px; }
.s-muted { color: var(--s-muted); font-size: 13.5px; }
.s-small { font-size: 12.5px; color: var(--s-muted); }
/* A line the shelf could not cover. Warm rather than red: it is news the
   buyer needs, not an error they have made. */
.s-short { color: var(--s-warn); font-weight: 600; }
.s-strong { font-weight: 700; }
.s-hidden-label { position: absolute; left: -9999px; }

/* ---- the shop window -------------------------------------------------- */

.s-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ee 100%);
    border: 1px solid var(--s-line); border-radius: var(--s-radius);
    padding: 26px 24px; margin: 20px 0 20px;
}
.s-hero .s-lede { font-size: 15.5px; }
.s-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.s-fact {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: 999px;
    padding: 8px 14px; font-size: 12.5px; color: var(--s-ink-2);
}
.s-fact b { font-weight: 700; }
.s-fact-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-accent); flex: 0 0 auto; }

.s-mtm {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--s-accent-soft); border: 1px solid #cfe4e0; border-radius: var(--s-radius);
    padding: 16px 20px; margin-bottom: 22px;
}
.s-mtm p { font-size: 14px; color: var(--s-ink-2); max-width: 62ch; }
.s-mtm .s-mtm-title { font-weight: 700; color: var(--s-ink); display: block; margin-bottom: 2px; font-size: 15px; }

.s-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; margin: 0 0 16px;
}
.s-count { font-size: 13.5px; color: var(--s-muted); }

/* ---- notes ------------------------------------------------------------ */

.s-note { border-radius: 10px; padding: 12px 15px; font-size: 13.5px; margin-bottom: 14px; }
.s-note-ok { background: var(--s-good-bg); border: 1px solid #a7f3d0; color: var(--s-good); }
.s-note-warn { background: var(--s-warn-bg); border: 1px solid #fde68a; color: var(--s-warn); }
.s-note-bad { background: var(--s-bad-bg); border: 1px solid #fecaca; color: var(--s-bad); }

/* ---- panels ----------------------------------------------------------- */

.s-panel {
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-radius);
    padding: 20px; margin-bottom: 16px;
}
.s-panel-quiet { background: var(--s-shade); border-color: var(--s-line-soft); }
.s-empty { text-align: center; padding: 40px 22px; }
.s-empty p { color: var(--s-muted); max-width: 52ch; margin: 0 auto 16px; }
.s-empty-mark {
    width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 14px;
    background-color: #e9f0ee; color: #2f5c56;
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 1px, rgba(255, 255, 255, 0) 1px 9px);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--bx-serif, Georgia, serif); font-size: 30px; letter-spacing: .06em;
}
.s-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.s-empty-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--s-line-soft); }

/* ---- the shelves ------------------------------------------------------ */

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }

.s-card {
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-radius);
    display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s ease;
}
.s-card:hover { box-shadow: var(--s-shadow); }
.s-card-body { padding: 13px 14px 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.s-card-buy { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.s-card .s-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.s-card .s-name a { color: var(--s-ink); text-decoration: none; }
.s-card .s-name a:hover { color: var(--s-accent); text-decoration: underline; }
.s-card .s-desc { font-size: 13px; color: var(--s-muted); }
.s-sku { font-size: 12px; font-weight: 600; letter-spacing: .09em; color: var(--s-muted); text-transform: uppercase; }

/* The picture, and the designed absence of one.
   Nothing in this catalogue has been photographed yet, so the plate below is
   what almost every card actually wears. See resources/views/public/store/
   plate.blade.php for why it is a typographic mark rather than a grey box. */
.s-shot { position: relative; aspect-ratio: 4 / 3; background: var(--s-shade); overflow: hidden; display: block; }
.s-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-shot-pad img { object-fit: contain; padding: 10px; }

.s-plate {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px;
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 1px, rgba(255, 255, 255, 0) 1px 9px);
}
.s-plate-mark {
    font-family: var(--bx-serif, Georgia, serif); font-weight: 400;
    font-size: clamp(28px, 5.5vw, 42px); line-height: 1; letter-spacing: .06em;
}
.s-plate-sku {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .72;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Six grounds, all muted and all in one family, so a full grid reads as one
   catalogue rather than a paint chart. */
.s-plate-0 { background-color: #e9f0ee; color: #2f5c56; }
.s-plate-1 { background-color: #f2eee5; color: #6a5e44; }
.s-plate-2 { background-color: #ebeff4; color: #3d5570; }
.s-plate-3 { background-color: #f2edef; color: #6b4956; }
.s-plate-4 { background-color: #ecf0ea; color: #486045; }
.s-plate-5 { background-color: #efedf3; color: #524669; }

/* ---- price and stock -------------------------------------------------- */

.s-price { font-weight: 700; font-size: 20px; line-height: 1.2; }
.s-price .s-price-inc { font-size: 11.5px; font-weight: 600; color: var(--s-muted); text-transform: uppercase; letter-spacing: .07em; margin-left: 6px; }
.s-price span.s-basis { display: block; font-weight: 400; font-size: 12.5px; color: var(--s-muted); margin-top: 2px; letter-spacing: 0; text-transform: none; }
.s-price-big { font-size: 30px; }

.s-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--s-shade); color: var(--s-ink-2); }
.s-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.s-badge-in { background: var(--s-good-bg); color: var(--s-good); }
.s-badge-low { background: var(--s-warn-bg); color: var(--s-warn); }
.s-badge-made { background: #eef2ff; color: #3730a3; }
.s-badge-out { background: #f3f4f6; color: #4b5563; }

/* A saving is good news, so it is said in the same green the shop uses for
   "in stock" rather than in the muted grey of a footnote. */
.s-save { color: var(--s-good); font-weight: 600; }
.s-tierhint {
    display: inline-block; font-size: 12px; font-weight: 600; color: var(--s-good);
    background: var(--s-good-bg); border-radius: 6px; padding: 3px 8px;
}

/* ---- forms ------------------------------------------------------------ */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {
    width: 100%; min-height: 44px; padding: 11px 12px;
    border: 1px solid var(--s-line); border-radius: 9px;
    font-size: 16px; font-family: inherit; background: var(--s-card); color: var(--s-ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--s-accent); outline-offset: 1px; }
textarea { min-height: 88px; }
.s-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s-fields .s-full { grid-column: 1 / -1; }
.s-field { margin-bottom: 14px; }
.s-tick {
    display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; font-weight: 400;
    color: var(--s-ink-2); margin: 0 0 10px; padding: 11px 12px;
    border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-card); cursor: pointer;
}
.s-tick:hover { border-color: #cfc7b7; }
.s-tick input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: var(--s-accent); }
.s-err { color: var(--s-bad); font-size: 12.5px; margin-top: 5px; }

.s-qty { display: inline-flex; align-items: center; border: 1px solid var(--s-line); border-radius: 999px; overflow: hidden; background: var(--s-card); }
.s-qty button {
    width: 44px; height: 44px; min-width: 44px; border: 0; background: var(--s-shade);
    font-size: 20px; line-height: 1; cursor: pointer; color: var(--s-ink); font-family: inherit;
}
.s-qty button:hover { background: #e9e4da; }
.s-qty input { width: 62px; min-width: 44px; height: 44px; min-height: 44px; border: 0; text-align: center; font-size: 15px; padding: 0; border-radius: 0; }
.s-qty-wide { display: flex; width: 100%; }
.s-qty-wide input { flex: 1 1 auto; width: auto; }

/* The buy block on a card: quantity on its own line, then a full-width add
   button. Two 44px rows read better in a 230px column than one squeezed one,
   and a thumb can hit either without aiming. */
.s-card-buy form { display: flex; flex-direction: column; gap: 8px; }
.s-card-buy .s-qty { display: flex; width: 100%; }
.s-card-buy .s-qty input { flex: 1 1 auto; width: auto; min-width: 0; }

.s-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; background: var(--s-ink); color: #fff; border: 1px solid var(--s-ink);
    border-radius: 999px; padding: 10px 22px; font-size: 14.5px; font-weight: 600;
    cursor: pointer; text-decoration: none; text-align: center; font-family: inherit; line-height: 1.2;
}
.s-btn:hover { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }
.s-btn-wide { display: flex; width: 100%; }
.s-btn-quiet { background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-line); }
.s-btn-quiet:hover { background: var(--s-shade); color: var(--s-ink); border-color: #cfc7b7; }
.s-btn-go { background: var(--s-accent); border-color: var(--s-accent); }
.s-btn-go:hover { background: var(--s-accent-ink); border-color: var(--s-accent-ink); }
.s-btn-small { min-height: 44px; padding: 8px 16px; font-size: 13.5px; }
.s-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-muted); font-size: 13.5px; text-decoration: none; }
.s-back:hover { color: var(--s-ink); text-decoration: underline; }

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

.s-product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 6px; }
.s-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 8px; }

/* A gallery that works with JavaScript switched off: the radio is the state,
   the label is the thumbnail, and the stage shows whichever one is checked. */
.s-gal { position: relative; }
.s-gal-pick { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.s-gal-stage {
    position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--s-line);
    border-radius: var(--s-radius); background: var(--s-card); overflow: hidden;
}
.s-gal-shot { position: absolute; inset: 0; display: none; }
.s-gal-shot img { width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; }
.s-gal-shot-0 { display: block; }
.s-gal-strip { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.s-gal-tab {
    width: 68px; height: 68px; border: 1px solid var(--s-line); border-radius: 10px;
    overflow: hidden; cursor: pointer; background: var(--s-card); padding: 4px; margin: 0;
}
.s-gal-tab img { width: 100%; height: 100%; object-fit: contain; display: block; }

.s-gal-pick:nth-of-type(1):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(1):checked ~ .s-gal-stage .s-gal-shot-0 { display: block; }
.s-gal-pick:nth-of-type(2):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(2):checked ~ .s-gal-stage .s-gal-shot-1 { display: block; }
.s-gal-pick:nth-of-type(3):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(3):checked ~ .s-gal-stage .s-gal-shot-2 { display: block; }
.s-gal-pick:nth-of-type(4):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(4):checked ~ .s-gal-stage .s-gal-shot-3 { display: block; }
.s-gal-pick:nth-of-type(5):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(5):checked ~ .s-gal-stage .s-gal-shot-4 { display: block; }
.s-gal-pick:nth-of-type(6):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(6):checked ~ .s-gal-stage .s-gal-shot-5 { display: block; }
.s-gal-pick:nth-of-type(7):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(7):checked ~ .s-gal-stage .s-gal-shot-6 { display: block; }
.s-gal-pick:nth-of-type(8):checked ~ .s-gal-stage .s-gal-shot { display: none; }
.s-gal-pick:nth-of-type(8):checked ~ .s-gal-stage .s-gal-shot-7 { display: block; }

.s-gal-pick:nth-of-type(1):checked ~ .s-gal-strip .s-gal-tab-0,
.s-gal-pick:nth-of-type(2):checked ~ .s-gal-strip .s-gal-tab-1,
.s-gal-pick:nth-of-type(3):checked ~ .s-gal-strip .s-gal-tab-2,
.s-gal-pick:nth-of-type(4):checked ~ .s-gal-strip .s-gal-tab-3,
.s-gal-pick:nth-of-type(5):checked ~ .s-gal-strip .s-gal-tab-4,
.s-gal-pick:nth-of-type(6):checked ~ .s-gal-strip .s-gal-tab-5,
.s-gal-pick:nth-of-type(7):checked ~ .s-gal-strip .s-gal-tab-6,
.s-gal-pick:nth-of-type(8):checked ~ .s-gal-strip .s-gal-tab-7 { border-color: var(--s-accent); box-shadow: 0 0 0 1px var(--s-accent); }

.s-gal-blank { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; }
.s-gal-blank .s-plate-mark { font-size: clamp(48px, 9vw, 84px); }
.s-gal-blank .s-plate-sku { font-size: 13px; }

.s-buy { background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 22px; }
.s-buy .s-h1 { font-size: clamp(23px, 2.6vw, 30px); }
.s-buyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.s-buyrow .s-btn { flex: 1 1 170px; }
.s-buyfacts { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--s-line-soft); }
.s-buyfacts li { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--s-line-soft); font-size: 13.5px; color: var(--s-ink-2); position: relative; }
.s-buyfacts li:last-child { border-bottom: 0; }
.s-buyfacts li::before { content: ''; position: absolute; left: 3px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent); }

/* ---- tables ------------------------------------------------------------ */

.s-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.s-lines th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--s-muted); padding: 7px 6px; border-bottom: 1px solid var(--s-line); }
.s-lines td { padding: 11px 6px; border-bottom: 1px solid var(--s-line-soft); vertical-align: top; }
.s-lines tr:last-child td { border-bottom: 0; }
.s-lines td.s-num, .s-lines th.s-num { text-align: right; white-space: nowrap; }

.s-totals { width: 100%; font-size: 14px; margin-top: 12px; border-collapse: collapse; }
.s-totals td { padding: 5px 0; }
.s-totals td:first-child { color: var(--s-muted); }
.s-totals td:last-child { text-align: right; font-weight: 600; }
.s-totals tr.s-grand td { font-weight: 700; font-size: 18px; border-top: 1px solid var(--s-line); padding-top: 10px; color: var(--s-ink); }
.s-totals tr.s-grand td:first-child { color: var(--s-ink); font-size: 15px; }

.s-breaks { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 0; }
.s-breaks th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--s-muted); padding: 7px 8px; border-bottom: 1px solid var(--s-line); background: var(--s-shade); }
.s-breaks td { padding: 9px 8px; border-bottom: 1px solid var(--s-line-soft); }
.s-breaks tr:last-child td { border-bottom: 0; }
.s-breaks td:last-child, .s-breaks th:last-child { text-align: right; white-space: nowrap; }
.s-breaks tr.s-earned td { background: var(--s-good-bg); color: var(--s-good); font-weight: 700; }

/* The spec sheet. Two columns on a desktop, stacked pairs on a phone - never
   a table that scrolls sideways off a 390px screen. */
.s-specs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.s-specs th { text-align: left; font-weight: 600; color: var(--s-muted); padding: 9px 10px 9px 0; border-bottom: 1px solid var(--s-line-soft); width: 42%; vertical-align: top; }
.s-specs td { padding: 9px 0; border-bottom: 1px solid var(--s-line-soft); color: var(--s-ink-2); }
.s-specs tr:last-child th, .s-specs tr:last-child td { border-bottom: 0; }

.s-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- the basket -------------------------------------------------------- */

.s-split { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 22px; align-items: start; }
.s-rail { position: sticky; top: 78px; }

.s-row {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--s-line-soft); align-items: start;
}
.s-row:first-child { padding-top: 0; }
.s-row:last-child { border-bottom: 0; padding-bottom: 0; }
.s-row-shot { width: 84px; height: 84px; border: 1px solid var(--s-line); border-radius: 10px; overflow: hidden; position: relative; background: var(--s-shade); }
.s-row-shot img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.s-row-shot .s-plate-mark { font-size: 21px; }
.s-row-shot .s-plate-sku { display: none; }
.s-row-name { font-weight: 600; font-size: 15px; }
.s-row-name a { color: var(--s-ink); text-decoration: none; }
.s-row-name a:hover { text-decoration: underline; }
.s-row-money { text-align: right; white-space: nowrap; font-weight: 700; font-size: 16px; }
.s-row-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.s-row-tools form { display: flex; gap: 8px; align-items: center; }
.s-linkbtn { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--s-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.s-linkbtn:hover { color: var(--s-bad); }
.s-nextbreak { margin-top: 8px; font-size: 13px; color: var(--s-good); font-weight: 600; }

.s-promo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.s-promo .s-field { margin-bottom: 10px; }
.s-promo input[type=text] { text-transform: uppercase; }

/* ---- where the buyer is up to ------------------------------------------ */

.s-progress { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 13px; }
.s-progress li { display: flex; align-items: center; gap: 8px; color: var(--s-faint); }
.s-progress li .s-progress-n {
    width: 24px; height: 24px; border-radius: 50%; background: var(--s-shade); color: var(--s-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.s-progress li.s-at { color: var(--s-ink); font-weight: 700; }
.s-progress li.s-at .s-progress-n { background: var(--s-ink); color: #fff; }
.s-progress li.s-was { color: var(--s-accent); }
.s-progress li.s-was .s-progress-n { background: var(--s-accent-soft); color: var(--s-accent); }
.s-progress li::after { content: ''; width: 20px; height: 1px; background: var(--s-line); margin-left: 4px; }
.s-progress li:last-child::after { display: none; }

.s-steps { list-style: none; padding: 0; margin: 10px 0 0; }
.s-steps li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid var(--s-line); font-size: 14px; color: var(--s-muted); }
.s-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.s-steps li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--s-line); }
.s-steps li.s-done { color: var(--s-ink-2); }
.s-steps li.s-done::before { background: var(--s-accent); }
.s-steps li.s-now { font-weight: 700; color: var(--s-ink); }
.s-steps li.s-now::before { background: var(--s-ink); box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); }
.s-steps .s-when { display: block; font-size: 12.5px; color: var(--s-muted); font-weight: 400; }

.s-links { list-style: none; padding: 0; margin: 0; }
.s-links li { border-bottom: 1px solid var(--s-line-soft); }
.s-links li:last-child { border-bottom: 0; }
.s-links a { display: flex; align-items: center; min-height: 44px; color: var(--s-accent); text-decoration: none; font-size: 14px; }
.s-links a:hover { text-decoration: underline; }

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

.s-foot { border-top: 1px solid var(--s-line); margin-top: 40px; padding-top: 26px; }
.s-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin-bottom: 26px; }
.s-foot h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--s-faint); margin-bottom: 8px; }
.s-foot ul { list-style: none; padding: 0; margin: 0; }
.s-foot li { font-size: 13.5px; color: var(--s-muted); padding: 3px 0; }
.s-foot a { color: var(--s-ink-2); text-decoration: none; }
.s-foot a:hover { color: var(--s-accent); text-decoration: underline; }

/* ---- the basket bar a thumb can reach ---------------------------------- */

/* On a phone the sticky header is too tall to carry a running total as well,
   so the total sits where a thumb already is. Hidden on anything wide enough
   to keep the summary panel on screen, and never shown on the basket or the
   checkout, where the same figures are already the point of the page. */
.s-thumbbar { display: none; }

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

@media (max-width: 1080px) {
    .s-split { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
    .s-split { grid-template-columns: 1fr; }
    .s-rail { position: static; }
    .s-product { grid-template-columns: 1fr; gap: 20px; }
    .s-detail { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .s-head-in { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
    .s-head-in .s-search { grid-column: 1 / -1; order: 3; }
    .s-head { position: static; }
    .s-fields { grid-template-columns: 1fr; }
    .s-hero { padding: 20px 18px; }
    .s-strip-in { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
    .s-strip .s-strip-end { margin-left: 0; }

    /* The thumb bar earns its place only where the header has stopped
       following the buyer down the page. */
    body.s-hasbar { padding-bottom: 76px; }
    .s-thumbbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        align-items: center; justify-content: space-between; gap: 12px;
        background: var(--s-card); border-top: 1px solid var(--s-line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(21, 20, 18, .06);
    }
    .s-thumbbar .s-thumbbar-fig { font-weight: 700; font-size: 16px; }
    .s-thumbbar .s-thumbbar-sub { display: block; font-size: 12px; font-weight: 400; color: var(--s-muted); }
}

@media (max-width: 560px) {
    .s-wrap { padding: 0 14px 72px; }

    /* A card that is 160px wide is a card nobody can read. Below this the
       shelf becomes a list: picture on the left, everything else beside it. */
    .s-grid { grid-template-columns: 1fr; gap: 12px; }
    .s-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto; }
    .s-card .s-shot { grid-row: 1 / 3; aspect-ratio: 1 / 1; height: 100%; border-right: 1px solid var(--s-line-soft); }
    .s-card-body { padding: 12px 13px 0; }
    .s-card-buy { padding: 10px 13px 13px; }
    .s-card-buy form { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .s-card-buy .s-qty { flex: 0 0 auto; width: auto; }
    .s-card-buy .s-qty input { width: 54px; flex: 0 0 auto; }
    .s-card-buy .s-btn { flex: 1 1 110px; }

    /* At this size the plate is 116px wide and the part number is printed
       right beside it in the card body. Two of them is one too many. */
    .s-card .s-plate-sku { display: none; }
    .s-card .s-plate-mark { font-size: 26px; }

    .s-row { grid-template-columns: 64px minmax(0, 1fr); }
    .s-row-shot { width: 64px; height: 64px; }
    .s-row-money { grid-column: 2; text-align: left; margin-top: 6px; }

    .s-facts { gap: 8px; }
    .s-fact { padding: 7px 12px; }
    .s-brand-name { font-size: 18px; }
}

@media (max-width: 380px) {
    .s-card { grid-template-columns: 96px minmax(0, 1fr); }
    .s-qty input { width: 52px; }
}

@media print {
    .s-strip, .s-head, .s-nav, .s-thumbbar, .s-card-buy { display: none; }
}