/* fonts:v2.1 — Outfit (display/nav/buttons) + Work Sans (body) + JetBrains Mono (data only)
   Self-hosted fonts/shop/<family>/*-v2.1.woff2, OFL 1.1 (LICENSE-v2.1.txt beside each), latin subset,
   font-display:swap, local() first. Total: 86.3 KB (budget: <=120KB/page). */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;
  src:local("Outfit"),url("/sites/assets/fonts/shop/Outfit-400-v2.1.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;
  src:local("Outfit SemiBold"),url("/sites/assets/fonts/shop/Outfit-600-v2.1.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;
  src:local("Outfit Bold"),url("/sites/assets/fonts/shop/Outfit-700-v2.1.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;
  src:local("Work Sans"),url("/sites/assets/fonts/shop/WorkSans-400-v2.1.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;
  src:local("Work Sans Medium"),url("/sites/assets/fonts/shop/WorkSans-500-v2.1.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:local("JetBrains Mono"),url("/sites/assets/fonts/shop/JetBrainsMono-400-v2.1.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:local("JetBrains Mono Bold"),url("/sites/assets/fonts/shop/JetBrainsMono-700-v2.1.woff2") format("woff2")}


/* ============================= CHROME (header/nav/footer) =============================
   shop.css fork: header/nav/footer for usedcopierparts.com only. canonparts.com keeps
   parts.css byte-for-byte. Surface = --paper (card colour), NOT --charcoal-deep, so the
   mark flips with the theme (light header in day → black mark, dark in night → orange mark).
   ====================================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.parts-page{
  font:17px/1.55 var(--font-body);
  color:var(--ink);
  background:var(--off-white);
}
/* type v2.1: Outfit carries headings, nav and buttons; Work Sans the body; JetBrains Mono data only */
h1,h2,h3,legend,.btn,.btn-primary,.btn-ghost,button,nav.pd a,.pd-nav a{font-family:var(--font-display)}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}

a{color:var(--orange-text)}
a:hover{color:var(--orange-dim)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--charcoal-deep);
  padding:.6rem 1rem;font-weight:700;z-index:200;
}
.skip-link:focus{left:.5rem;top:.5rem}

/* ── header ── Surface = --paper (card), NOT --charcoal-deep, so it flips with the theme. */
header.pd{
  background:var(--paper);
  color:var(--ink);
  border-bottom:3px solid var(--orange);
  padding:0;
}
header.pd .wrap{
  max-width:1200px;margin:0 auto;padding:.9rem 1.25rem;
  display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:center;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.02em;font-size:1rem;
  color:var(--ink);text-decoration:none;
}
.brand-mark{
  width:9px;height:9px;background:var(--orange);flex:0 0 auto;
  clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%);
}
/* Shop mark: inline SVG, fill=currentColor so it reads the colour from .brand-logo's color */

/* tokens:begin */
:root{
  --charcoal:#2d2d2d;
  --charcoal-deep:#1a1a1a;
  --charcoal-mid:#3d3d3d;
  --charcoal-line:#454540;
  --orange:#ff6b35;
  --orange-dim:#e05a27;
  --orange-text:#b8461c; /* body-text-safe shade — orange-dim is ~3.7:1 on white, fails AA for normal text */
  --yellow:#f5c518;
  --off-white:#f4f2ee;
  --paper:#fffdfa;
  --grey-line:#e2ded6;
  --grey-light:#efece6;
  --grey-mid:#c8c4ba;
  --grey-dark:#6b6660;
  --ink:#1a1a1a;
  --white:#fff;
  --green:#1f7a35;
  --green-bg:#e3f3e6;
  --red-dim:#b23a24;
  /* V2.1 font tokens — Outfit (display), Work Sans (body), JetBrains Mono (data only) */
  --font-display:'Outfit',ui-sans-serif,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Work Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:3px;
  --shadow-card:0 1px 0 rgba(26,26,26,.04), 0 1px 3px rgba(26,26,26,.06);

  /* ── role-split tokens (added with the day/night skin) ───────────────────
     Several of the tokens above carry TWO jobs at once, and the two jobs move
     in opposite directions when the page goes dark. --white is both the text
     on the charcoal header AND the bed of every input; --charcoal-deep is both
     a panel surface AND the rule under an h2; --charcoal-mid is both secondary
     body text AND the chip behind a part number inside the hero. Flipping one
     value cannot serve both. So each conflicted job gets its own name here,
     with the SAME value it renders today — light mode is unchanged — and the
     dark block below moves only the job that should move.
     The one deliberate exception is --field-border: the old shared --grey-mid
     scored 1.74:1 against a white field, under the 3:1 WCAG 1.4.11 asks of a
     control boundary. It is darker here on purpose. */
  --chip-dark:#3d3d3d;      /* was --charcoal-mid: chip/button bed on a dark panel */
  --field-bg:#fff;          /* was --white: the bed of a text input */
  --field-border:#8f8a80;   /* was --grey-mid: 1.74:1 -> 3.43:1 on white */
  --row-hover:#fdece2;      /* was a literal */
  --rule:#1a1a1a;           /* was --charcoal-deep: hairline + ghost-button edge on a LIGHT bed */
  --focus-ring:#1a1a1a;     /* was --charcoal-deep: focus outline */
  --orange-on-dark:#ffb599; /* was a literal, in two places */
  --art-bed:#fff;           /* stays white in BOTH skins: catalogue line art is
                               black ink on nothing, so a dark bed erases it */
  --ok-border:#98c89d;
  --ok-text:#175226;
  --bad-bg:#f7dcd8;
  --bad-border:#d99c92;
  --bad-text:#7a2415;

  color-scheme:light;

  /* ═════════════════════════════════════════════════════════════════════════
     V2.1 GLASS LAYER — elegance pass: lighter tint/edge, softer radius, quieter shadows
     Same contract as tokens_v2.css; names frozen per traits.json checks
     ═════════════════════════════════════════════════════════════════════════ */
  --glass-blur:12px;
  --glass-sat:150%;
  --glass-tint:rgba(255,255,255,0.12);
  --glass-edge:rgba(255,255,255,0.55);
  --glass-radius:28px;
  --glass-shadow:0 18px 44px rgba(30,40,80,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
  --wall-veil:rgba(250,246,238,0.38);
  --hero-scrim:rgba(244,242,238,0.84);  /* patch 20/21/22: dedicated scrim for hero text legibility */
  --wallpaper-1920:url("/sites/assets/img/shop/wallpaper-hero-1920-v2.1.webp");
  --wallpaper-900:url("/sites/assets/img/shop/wallpaper-hero-900-v2.1.webp");
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* surfaces: the page comes DOWN to meet the chrome, which was already dark */
    --off-white:#121211;      /* page bed */
    --paper:#1c1c1a;          /* raised card */
    --grey-light:#24241f;     /* zebra row / quiet chip */
    --grey-line:#33322c;      /* hairline, and the ruled-paper lines on the bed */
    --grey-mid:#4a4842;
    --grey-dark:#a09a8f;      /* muted text        6.7:1 on the bed */
    --ink:#ece9e2;            /* body text        15.5:1 on the bed */
    --charcoal-mid:#b9b4a9;   /* secondary text    8.3:1 on a card */
    --field-bg:#24231e;
    --field-border:#787369;   /* 3.34:1 against the field it bounds */
    --row-hover:#2e2118;
    --rule:#d9d5cb;           /* 12.8:1 — the job that has to invert */
    --focus-ring:#ffd166;     /* 13.0:1 — a charcoal outline is invisible down here */

    /* the chrome stays dark, lifted just enough to read as a panel against the bed */
    --charcoal:#2a2924;
    --charcoal-deep:#201f1b;
    --charcoal-line:#46443c;
    --chip-dark:#34332c;

    /* accents: orange holds its hue, brightens to clear 4.5:1 as TEXT on the bed */
    --orange-dim:#ff8a5c;
    --orange-text:#ff8f61;    /* 7.6:1 on a card */
    --green:#5fd07f;
    --green-bg:#16301c;
    --red-dim:#ff7a5e;
    --ok-border:#2f6b3d;
    --ok-text:#9fe0b2;
    --bad-bg:#2e1a16;
    --bad-border:#7d3b30;
    --bad-text:#ffb0a0;

    /* a drop shadow does nothing on a dark bed — a hairline does the same job */
    --shadow-card:0 0 0 1px #2b2a25, 0 1px 3px rgba(0,0,0,.55);

    /* V2.1 glass — dark theme: lighter tint/edge, softer radius, quieter shadows */
    --glass-blur:12px;
    --glass-sat:160%;
    --glass-tint:rgba(255,255,255,0.07);
    --glass-edge:rgba(255,255,255,0.34);
    --glass-radius:28px;
    --glass-shadow:0 22px 56px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.24);
    --wall-veil:rgba(28,28,26,0.42);
    --hero-scrim:rgba(18,18,16,0.58);  /* patch 20/21/22 */

    color-scheme:dark;
  }
  /* the ghost button fills with its own edge colour, same gesture as in daylight */
  :root:not([data-theme="light"]) .btn-ghost:hover{background:var(--rule);color:var(--charcoal-deep)}
  /* pressed state of the day/night control, painted from the RESOLVED theme rather
     than from aria-pressed, so it is already correct at first paint — the deferred
     script that maintains aria-pressed has not run yet when this is painted. */
  :root:not([data-theme="light"]) .theme-toggle{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
  :root:not([data-theme="light"]) .theme-toggle .tt-dot{background:var(--charcoal-deep)}
  :root:not([data-theme="light"]) .theme-toggle .tt-label::before{content:"Night"}
:root:not([data-theme="light"]) .theme-toggle:hover{background:var(--yellow);border-color:var(--yellow)}
}

:root[data-theme="dark"]{
  /* surfaces: the page comes DOWN to meet the chrome, which was already dark */
  --off-white:#121211;      /* page bed */
  --paper:#1c1c1a;          /* raised card */
  --grey-light:#24241f;     /* zebra row / quiet chip */
  --grey-line:#33322c;      /* hairline, and the ruled-paper lines on the bed */
  --grey-mid:#4a4842;
  --grey-dark:#a09a8f;      /* muted text        6.7:1 on the bed */
  --ink:#ece9e2;            /* body text        15.5:1 on the bed */
  --charcoal-mid:#b9b4a9;   /* secondary text    8.3:1 on a card */
  --field-bg:#24231e;
  --field-border:#787369;   /* 3.34:1 against the field it bounds */
  --row-hover:#2e2118;
  --rule:#d9d5cb;           /* 12.8:1 — the job that has to invert */
  --focus-ring:#ffd166;     /* 13.0:1 — a charcoal outline is invisible down here */

  /* the chrome stays dark, lifted just enough to read as a panel against the bed */
  --charcoal:#2a2924;
  --charcoal-deep:#201f1b;
  --charcoal-line:#46443c;
  --chip-dark:#34332c;

  /* accents: orange holds its hue, brightens to clear 4.5:1 as TEXT on the bed */
  --orange-dim:#ff8a5c;
  --orange-text:#ff8f61;    /* 7.6:1 on a card */
  --green:#5fd07f;
  --green-bg:#16301c;
  --red-dim:#ff7a5e;
  --ok-border:#2f6b3d;
  --ok-text:#9fe0b2;
  --bad-bg:#2e1a16;
  --bad-border:#7d3b30;
  --bad-text:#ffb0a0;

  /* a drop shadow does nothing on a dark bed — a hairline does the same job */
  --shadow-card:0 0 0 1px #2b2a25, 0 1px 3px rgba(0,0,0,.55);

  /* V2.1 glass — dark theme: lighter tint/edge, softer radius, quieter shadows */
  --glass-blur:12px;
  --glass-sat:160%;
  --glass-tint:rgba(255,255,255,0.07);
  --glass-edge:rgba(255,255,255,0.34);
  --glass-radius:28px;
  --glass-shadow:0 22px 56px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.24);
  --wall-veil:rgba(28,28,26,0.42);
  --hero-scrim:rgba(18,18,16,0.58);  /* patch 20/21/22 */

  color-scheme:dark;
}
/* the ghost button fills with its own edge colour, same gesture as in daylight */
:root[data-theme="dark"] .btn-ghost:hover{background:var(--rule);color:var(--charcoal-deep)}
/* pressed state of the day/night control, painted from the RESOLVED theme rather
   than from aria-pressed, so it is already correct at first paint — the deferred
   script that maintains aria-pressed has not run yet when this is painted. */
:root[data-theme="dark"] .theme-toggle{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
:root[data-theme="dark"] .theme-toggle .tt-dot{background:var(--charcoal-deep)}
:root[data-theme="dark"] .theme-toggle .tt-label::before{content:"Night"}
:root[data-theme="dark"] .theme-toggle:hover{background:var(--yellow);border-color:var(--yellow)}
/* tokens:end */

.brand-logo{width:30px;height:30px;flex:0 0 auto;display:block;color:var(--charcoal-deep)}
.brand-logo svg{width:100%;height:100%;display:block}
/* Owner rule: orange on dark surfaces, black on light — header is card colour, so flips */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-logo{color:var(--orange)}}
:root[data-theme="dark"] .brand-logo{color:var(--orange)}

nav.pd{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-left:auto}
nav.pd a{
  color:var(--ink);text-decoration:none;font-size:.88rem;letter-spacing:.01em;opacity:.85;
}
nav.pd a:hover{opacity:1;text-decoration:underline}
nav.pd a.tel{
  font-family:var(--font-mono);font-weight:700;color:var(--orange-text);font-size:.92rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.pd a.tel{color:var(--orange)}}
:root[data-theme="dark"] nav.pd a.tel{color:var(--orange)}

/* Cart link with badge */
.cart-link{
  display:inline-flex;align-items:center;gap:.4rem;position:relative;
  min-height:44px;padding:.5rem .6rem;
}
.cart-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--charcoal-deep);
  font-family:var(--font-mono);font-weight:700;font-size:11px;line-height:1;
  padding:3px 6px;border-radius:999px;min-width:18px;
}

/* Day/Night toggle - painted word via CSS, pill button */
.theme-toggle{display:none}
.parts-js .theme-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--chip-dark);color:var(--ink);
  border:1.5px solid var(--field-border);border-radius:999px;
  padding:.4rem .8rem;cursor:pointer;line-height:1;
  min-height:32px;
}
.theme-toggle:hover{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
.theme-toggle:hover .tt-dot{background:var(--charcoal-deep)}
.theme-toggle .tt-label::before{content:"Day"}
.tt-dot{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--yellow);transition:background .12s;
}
@media (prefers-reduced-motion:reduce){.tt-dot{transition:none}}
/* Night state: painted from RESOLVED theme, so it's correct at first paint */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
  :root:not([data-theme="light"]) .theme-toggle .tt-dot{background:var(--charcoal-deep)}
  :root:not([data-theme="light"]) .theme-toggle .tt-label::before{content:"Night"}
  :root:not([data-theme="light"]) .theme-toggle:hover{background:var(--yellow);border-color:var(--yellow)}
}
:root[data-theme="dark"] .theme-toggle{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
:root[data-theme="dark"] .theme-toggle .tt-dot{background:var(--charcoal-deep)}
:root[data-theme="dark"] .theme-toggle .tt-label::before{content:"Night"}
:root[data-theme="dark"] .theme-toggle:hover{background:var(--yellow);border-color:var(--yellow)}

/* Part-number lookup widget in header */
.hdr-lookup{display:flex}
.hdr-lookup form{display:flex;gap:0;border:1.5px solid var(--field-border);border-radius:var(--radius);overflow:hidden;background:var(--field-bg)}
.hdr-lookup label{position:absolute;left:-9999px}
.hdr-lookup input{
  font:500 .84rem/1 var(--font-mono);letter-spacing:.02em;
  background:transparent;border:0;color:var(--ink);padding:.6rem .7rem;width:160px;
  min-height:44px;
}
.hdr-lookup input::placeholder{color:var(--grey-dark);font-family:var(--font-body);font-weight:400}
.hdr-lookup button{
  border:0;background:var(--orange);color:var(--charcoal-deep);font-weight:700;font-size:.82rem;
  padding:.6rem .8rem;cursor:pointer;min-height:44px;
}
.hdr-lookup button:hover{background:var(--yellow)}

main{max-width:1200px;margin:0 auto;padding:2rem 1.25rem 4rem}

/* ── footer ── */
footer.pd{
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--grey-line);
  padding:2rem 0;
  font-size:.9rem;
}
footer.pd .wrap{
  max-width:1200px;margin:0 auto;padding:0 1.25rem;
}
footer.pd p{margin:0 0 .7rem;max-width:72ch;line-height:1.6}
footer.pd a{color:var(--orange-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer.pd a{color:var(--orange)}}
:root[data-theme="dark"] footer.pd a{color:var(--orange)}
.foot-brand{font-weight:700}
.foot-links{font-size:.88rem;color:var(--grey-dark)}
.foot-links a{text-decoration:none;border-bottom:1px dotted var(--grey-mid)}
.foot-links a:hover{color:var(--orange-dim)}

@media print{
  header.pd nav.pd, .hdr-lookup, .theme-toggle{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 PAGE CANVAS — full-bleed wallpaper (dark), clean canvas (light)
   ═══════════════════════════════════════════════════════════════════════════ */
body.shop{
  background:var(--off-white);
  position:relative;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.shop{
    background:var(--charcoal-deep);
  }
  :root:not([data-theme="light"]) body.shop::before{
    background-image:var(--wallpaper-1920);
    background-size:cover;background-position:center;
    opacity:1;
  }
  :root:not([data-theme="light"]) body.shop::after{
    content:"";position:fixed;inset:0;z-index:-1;
    background:var(--wall-veil);
    pointer-events:none;
  }
}
@media (prefers-color-scheme:dark) and (max-width:900px){
  :root:not([data-theme="light"]) body.shop::before{
    background-image:var(--wallpaper-900);
  }
}
:root[data-theme="dark"] body.shop{
  background:var(--charcoal-deep);
}
:root[data-theme="dark"] body.shop::before{
  background-image:var(--wallpaper-1920);
  background-size:cover;background-position:center;
  opacity:1;
}
:root[data-theme="dark"] body.shop::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--wall-veil);
  pointer-events:none;
}
@media (max-width:900px){
  :root[data-theme="dark"] body.shop::before{
    background-image:var(--wallpaper-900);
  }
}

/* =========================================================================
   CATALOGUE — utility bar + data grid
   ========================================================================= */
.cat-head{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:1rem;
}
.cat-count{font-family:var(--font-mono);font-size:.82rem;color:var(--grey-dark)}
.cat-count strong{color:var(--ink);font-size:1rem}

.cat-search{
  background:var(--charcoal-deep);border-radius:var(--radius);padding:.9rem 1rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-start;margin:1rem 0 1.4rem;
}
.cat-search .lbl{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);flex:0 0 auto;align-self:center;
}
.cat-search form.pn-lookup{
  flex:1 1 320px;min-width:260px;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.cat-search form.pn-lookup label{position:absolute;left:-9999px}
.cat-search .clear{align-self:center}
.cat-search-row{display:flex;flex:1 1 260px;gap:.5rem;min-width:0}
.cat-search input[type=search]{
  flex:1 1 auto;min-width:0;font:600 .95rem/1 var(--font-mono);letter-spacing:.02em;
  background:var(--field-bg);border:0;border-radius:2px;padding:.65rem .8rem;color:var(--ink);
}
.cat-search button{
  flex:0 0 auto;border:0;background:var(--orange);color:var(--charcoal-deep);font-weight:700;
  padding:.65rem 1.1rem;border-radius:2px;cursor:pointer;font-size:.88rem;
}
.cat-search button:hover{background:var(--yellow)}
.cat-search .clear{color:rgba(255,255,255,.65);font-size:.82rem;text-decoration:none;flex:0 0 auto}
.cat-search .clear:hover{color:var(--white)}
.js-count{color:rgba(255,255,255,.55);font-size:.78rem;font-family:var(--font-mono);flex:0 0 auto}

/* ── part-number lookup result card (rich, JS-rendered) ── */
.pn-lookup-result{flex:1 1 100%}
.lk-card{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  background:var(--field-bg);border:1px solid var(--grey-line);border-left:4px solid var(--orange);
  border-radius:2px;padding:.6rem .8rem;font-size:.87rem;color:var(--ink);
}
.lk-loading{color:var(--grey-dark);font-style:italic}
.lk-chip{font-family:var(--font-mono);font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;padding:.2rem .5rem;border-radius:10px}
.lk-chip.lk-in{background:var(--green-bg);color:var(--green)}
.lk-chip.lk-out{background:var(--grey-light);color:var(--grey-dark)}
.lk-price{font-family:var(--font-mono);font-weight:700;color:var(--orange-text)}
.lk-delivery,.lk-ref{color:var(--charcoal-mid);font-size:.84rem}
.lk-more{margin-left:auto;font-weight:700;white-space:nowrap}

table.parts{width:100%;border-collapse:collapse;background:var(--paper);font-size:.91rem;
  box-shadow:var(--shadow-card);border-radius:var(--radius);overflow:hidden}
table.parts caption{display:block;width:100%;text-align:left;font-size:.78rem;color:var(--grey-dark);padding:.4rem 0}
table.parts thead th{
  position:sticky;top:0;z-index:2;
  background:var(--charcoal-deep);color:rgba(255,255,255,.85);
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  text-align:left;padding:.6rem .8rem;border-bottom:2px solid var(--orange);
}
table.parts thead th.num{text-align:right}
table.parts tbody tr{border-bottom:1px solid var(--grey-line)}
table.parts tbody tr:nth-child(even){background:var(--grey-light)}
table.parts tbody tr:hover{background:var(--row-hover)}
table.parts tbody tr[hidden]{display:none}
table.parts td{padding:.62rem .8rem;vertical-align:top}
table.parts td a{color:var(--ink);text-decoration:none}
table.parts td a:hover{color:var(--orange-text);text-decoration:underline}
table.parts thead th.shot-col{width:64px}
table.parts td.shot{width:64px;padding:.5rem .6rem}
table.parts td.shot a{display:block;line-height:0}
table.parts td.shot img{display:block;width:64px;height:48px;object-fit:cover;border-radius:2px;border:1px solid var(--grey-line)}
.shot-empty{display:block;width:64px;height:48px;border-radius:2px;background:var(--grey-light);border:1px dashed var(--grey-line)}
table.parts td.pn{white-space:nowrap}
table.parts td.pn a{font-family:var(--font-mono);font-weight:700;font-size:.87rem}
table.parts td.fits{color:var(--charcoal-mid);font-size:.86rem}
table.parts td.cond{font-size:.82rem;color:var(--charcoal-mid)}
table.parts td.cond .tag-shelf{color:var(--grey-dark)}
table.parts td.num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
table.parts td.qty .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:.4em}
/* A line we can source but do not hold. Amber, never green: the dot is the fastest signal
   in the row, and a green one beside "To order" would say the exact opposite of the truth. */
table.parts td.qty.to-order{font-size:.82rem;color:var(--orange-text)}
table.parts td.qty.to-order .dot{background:var(--orange)}
table.parts td.price{font-weight:700;color:var(--orange-text);font-size:.97rem}
.no-results{display:none;padding:2rem 1rem;text-align:center;color:var(--grey-dark);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.no-results.show{display:block}

/* mobile: table → stacked cards, no JS required */
@media (max-width:720px){
  table.parts thead{position:absolute;left:-9999px;top:-9999px}
  table.parts, table.parts tbody, table.parts tr, table.parts td{display:block;width:100%}
  table.parts{box-shadow:none;background:transparent}
  table.parts tbody tr{
    background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);
    box-shadow:var(--shadow-card);margin-bottom:.6rem;padding:.7rem .85rem;
  }
  table.parts tbody tr:nth-child(even){background:var(--paper)}
  table.parts td{padding:.18rem 0;border:0}
  /* No `order:` here. The rows are display:block, not flex, so order was a no-op — and the
     markup already prints the cells in exactly this sequence (pn, desc, fits, cond, qty,
     price). Removed 2026-09-25 (patch 7) rather than made live: live, it would have jumped
     the unnumbered photo and Add cells to the top of every stacked row. */
  table.parts td.pn a{font-size:1rem}
  table.parts td.desc{font-weight:600}
  table.parts td.fits::before{content:"Fits ";color:var(--grey-dark);font-size:.8rem}
  table.parts td.qty{text-align:left;display:flex;gap:.4em}
  table.parts td.qty::before{content:"On shelf: ";color:var(--grey-dark);font-family:var(--font-body);font-weight:400}
  table.parts td.price{text-align:left;font-size:1.15rem;margin-top:.15rem}
}

/* =========================================================================
   PART DETAIL — hero, facts, cross-refs, exploded view, quote form
   ========================================================================= */
.pd-hero{
  background:var(--charcoal-deep);color:var(--white);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;margin:.6rem 0 1.4rem;position:relative;overflow:hidden;
}
.pd-hero::after{
  content:"";position:absolute;top:0;right:0;width:64px;height:64px;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 10px,var(--charcoal-deep) 10px 20px);
  clip-path:polygon(100% 0,100% 100%,0 0);opacity:.9;
}
.pd-eyebrow{font-family:var(--font-display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem}
.pd-hero h1{color:var(--white);margin:0 0 .3rem;max-width:34ch}
.pd-pn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin-top:.5rem}
.pd-pn{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--white);
  background:var(--chip-dark);border:1px solid var(--charcoal-line);padding:.28rem .6rem;border-radius:2px}
.aka-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.aka-chip{
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--charcoal-deep);
  background:var(--yellow);padding:.18rem .5rem;border-radius:2px;
}
.aka-note{color:rgba(255,255,255,.6);font-size:.84rem;margin-top:.7rem;max-width:60ch}
.rebuild-note{background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);
  padding:.75rem 1rem;margin:1rem 0;font-size:.88rem;color:var(--charcoal-mid)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--grey-line);border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;margin:1.1rem 0}
.fact{background:var(--paper);padding:.8rem .95rem}
.fact dt{font-family:var(--font-display);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--grey-dark)}
.fact dd{font-size:1.02rem;font-weight:600;margin-top:.2rem;font-family:var(--font-body);line-height:1.3}
/* type v2.1: only the numbers wear the mono face — price and shelf count; prose facts read in Work Sans */
.fact dd.price,.fact dd.stock{font-family:var(--font-mono);font-size:1.2rem;font-weight:700}
.fact dd.price{color:var(--orange-text)}
.fact dd.ship{font-size:.92rem;line-height:1.35}
.fact dd.tax-note{font-size:.86rem;font-weight:400;line-height:1.35;color:var(--charcoal-mid)}
.fact dd.stock{display:flex;align-items:center;gap:.4em}
.fact dd.stock .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.fact dd.stock.to-order{color:var(--orange-text);font-size:1rem}
.fact dd.stock.to-order .dot{background:var(--orange)}
.fact dd.eta{font-size:.86rem;font-weight:400;font-family:var(--font-body);line-height:1.35;color:var(--charcoal-mid)}
.fact dd.terms{font-size:.86rem;font-weight:700;font-family:var(--font-body);line-height:1.35}
/* the terms sentence is prose, not a figure: give it two columns of the strip so it reads as a line, not a tower */
.fact:has(> dd.terms){grid-column:span 2}
.fact dd.cond{font-size:.92rem;font-family:var(--font-body);line-height:1.3}
.cond-pill{display:inline-block;font-size:.7rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;
  padding:.12rem .45rem;border-radius:10px;margin-top:.3rem}
.cond-pill.verified{background:var(--green-bg);color:var(--green)}
.cond-pill.shelf{background:var(--grey-light);color:var(--grey-dark)}

.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 .4rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  padding:.7rem 1.25rem;border-radius:var(--radius);text-decoration:none;border:2px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--orange);color:var(--charcoal-deep)}
.btn-primary:hover{background:var(--yellow);color:var(--charcoal-deep)}
.btn-ghost{background:transparent;border-color:var(--rule);color:var(--rule)}
.btn-ghost:hover{background:var(--charcoal-deep);color:var(--white)}

figure.shot{margin:1.1rem 0}
figure.shot img{max-width:100%;height:auto;border:1px solid var(--grey-line);border-radius:var(--radius);display:block}
figure.shot figcaption{font-size:.82rem;color:var(--grey-dark);margin-top:.35rem}
.shot-strip{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.6rem 0 1.1rem;padding:0}
.shot-strip li{margin:0}
.shot-strip a{display:block;line-height:0}
.shot-strip img{display:block;width:64px;height:48px;object-fit:cover;border-radius:2px;border:1px solid var(--grey-line)}
/* The catalogue drawing. Line art on white, so it needs a white bed rather than the paper
   tone, and its caption carries a second line saying plainly that it is not a photograph. */
figure.shot.diagram img{background:var(--art-bed);padding:.4rem}
figure.shot.diagram figcaption .muted{display:block;margin-top:.15rem;font-style:italic}

/* ── the key-number callout above a catalogue diagram ───────────────────────
   The picture is a scan of a manufacturer parts-catalogue sheet with dozens of
   numbered leader lines on it, one of which is the part being sold. The page
   knows that number; it does not know WHERE on the sheet the number is printed,
   so nothing here may draw a marker at a position - a ring placed on a guess
   walks a buyer confidently to the wrong part. What this does instead is put the
   number itself in front of the drawing at a size nobody scrolls past.

   The badge borrows the exact visual the exploded-view callout already uses on
   this site (.callout > a): a charcoal disc, an orange ring, the numeral in the
   mono face. Same object, same meaning, so a buyer who meets both learns one
   thing rather than two.

   It reads the same in both skins by construction. --art-bed is pinned white in
   daylight and in the dark (catalogue line art is black ink on nothing), and the
   badge is a fixed charcoal disc, so the number keeps its ~17:1 contrast either
   way. Only the panel around it follows the skin, through --grey-light /
   --grey-line / --ink, each of which already carries a dark value. */
.key-callout{
  display:flex;align-items:center;gap:.8rem;
  /* p{max-width:68ch} is a READING measure and this is not prose - it is the lid of the
     picture below it. Left capped it stopped 155px short of the drawing's right edge and
     read as a stray note rather than part of the figure. */
  max-width:none;
  margin:0;padding:.7rem .85rem;
  background:var(--grey-light);
  border:1px solid var(--grey-line);
  border-left:4px solid var(--orange);
  border-radius:var(--radius) var(--radius) 0 0;
}
.key-badge{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  min-width:2.9rem;height:2.9rem;padding:0 .55rem;
  border-radius:999px;                      /* a circle for 1-2 digits, a pill for 3 */
  background:var(--charcoal-deep);color:var(--white);
  border:3px solid var(--orange);
  font-family:var(--font-mono);font-weight:700;font-size:1.3rem;line-height:1;
}
.key-words{font-size:.94rem;color:var(--ink);line-height:1.35}
.key-words strong{color:var(--orange-text);font-weight:700}
.key-sub{display:block;margin-top:.12rem;font-size:.82rem;color:var(--grey-dark)}
/* the drawing sits directly under the callout, so they read as one object */
figure.shot.diagram.has-key img{margin-top:0;border-top:0;border-radius:0 0 var(--radius) var(--radius)}
/* The drawing is a full catalogue sheet and runs well over a screen tall, so by the time a
   buyer reaches the bottom of it the callout has scrolled away. The caption repeats the
   number in a small chip for exactly that moment. Same colours, a quarter the size - a
   reminder, not a second headline. */
.key-chip{
  display:inline-block;vertical-align:.05em;margin-right:.4rem;
  padding:.1rem .45rem;border-radius:999px;
  background:var(--charcoal-deep);color:var(--white);border:2px solid var(--orange);
  font-family:var(--font-mono);font-weight:700;font-size:.76rem;line-height:1.3;
}
.art-zoom{display:inline-block;margin-top:.3rem;font-size:.82rem;color:var(--orange-text)}
@media (max-width:480px){
  .key-callout{gap:.6rem;padding:.6rem .65rem}
  .key-badge{min-width:2.5rem;height:2.5rem;font-size:1.1rem}
  .key-words{font-size:.88rem}
}

/* ── the ring ON the drawing ───────────────────────────────────────
   Rendered only on the 148 part pages whose key number the OCR ensemble actually
   places (tools/build_markers.py holds the rule); the other 245 keyed lines keep the
   words-only callout above and nothing is drawn here at all.

   POSITION IS A PERCENTAGE, NEVER A PIXEL. The coordinate is a fraction of the page
   and the buyer reads this on a phone and pinches to zoom, so the marker has to scale
   with the drawing rather than sit at an offset that was true at one width. The offset
   layer is inset by exactly the image's own padding and border, because the fraction is
   of the ARTWORK and the <img> box is bigger than the artwork by .4rem of bed and a
   hairline on each side - at a 36px ring that is a fifth of a ring's drift, which is the
   difference between ringing the number and ringing the thing next to it.

   CONTRAST IS CARRIED BY THE OUTLINE, NOT BY THE ORANGE. Measured: --orange #ff6b35 on
   the art bed #fff is 2.84:1, which fails the 3:1 WCAG 1.4.11 asks of a graphic. So the
   orange ring is sandwiched between a charcoal hairline and a white one, and whichever
   of the two the artwork underneath happens to resemble, the other one is doing the
   work: charcoal-deep on the white bed is 17.40:1 in daylight and 16.49:1 in the dark,
   and white against the black ink of the line art is the same figures the other way up.
   --art-bed and --orange are pinned in BOTH skins and --charcoal-deep only moves from
   #1a1a1a to #201f1b, so the marker is legible day and night by construction rather
   than by a second block that can drift out of step with this one.

   The tag is the .key-chip visual at the same size, so a buyer who has already met the
   number in the callout above meets one object twice rather than two objects once. It
   hangs above the ring and flips at the edges of the sheet - decided in PHP from the
   coordinate, so it is already correct on a page that never runs any JavaScript. */
.art-stage{position:relative;display:block;width:fit-content;max-width:100%}
/* Inset by the image's own bed and hairline so 0% is the left edge of the ARTWORK.
   .has-key drops the top border, so the top inset drops with it. */
.art-layer{
  position:absolute;pointer-events:none;
  top:calc(.4rem + 1px);right:calc(.4rem + 1px);bottom:calc(.4rem + 1px);left:calc(.4rem + 1px);
}
figure.shot.diagram.has-key .art-layer{top:.4rem}
.art-marker{
  position:absolute;
  left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);
  transform:translate(-50%,-50%);
  /* clamped so it still reads at 360px and never swallows the assembly at 1400px */
  width:clamp(22px, 4.4%, 50px);aspect-ratio:1;
}
.art-ring{
  position:absolute;inset:0;border-radius:50%;
  border:.19rem solid var(--orange);
  box-shadow:
    inset 0 0 0 .09rem var(--art-bed),
    0 0 0 .09rem var(--charcoal-deep),
    0 0 0 .18rem var(--art-bed);
  /* a marker a printer drops is a marker that is not there on the sheet the tech carries */
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.art-tag{
  position:absolute;left:50%;bottom:calc(100% + .3rem);transform:translateX(-50%);
  padding:.1rem .4rem;border-radius:999px;
  background:var(--charcoal-deep);color:var(--white);border:2px solid var(--orange);
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;line-height:1.3;
  white-space:nowrap;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
/* at the edges of the sheet the tag would hang off the drawing, so it swaps side */
.art-marker.edge-top .art-tag{bottom:auto;top:calc(100% + .3rem)}
.art-marker.edge-right .art-tag{left:auto;right:calc(100% + .35rem);bottom:auto;top:50%;transform:translateY(-50%)}
.art-marker.edge-left .art-tag{left:calc(100% + .35rem);right:auto;bottom:auto;top:50%;transform:translateY(-50%)}
@media (max-width:480px){
  .art-marker{width:clamp(20px, 6%, 34px)}
  .art-tag{font-size:.66rem}
}

form.q{background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);padding:1.1rem;margin-top:1.3rem;
  box-shadow:var(--shadow-card)}
form.q h2{margin-top:0}
form.q label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--charcoal-mid);
  font-family:var(--font-mono);margin:.75rem 0 .25rem}
form.q input,form.q textarea{width:100%;padding:.6rem .65rem;border:1.5px solid var(--field-border);border-radius:2px;
  font:inherit;background:var(--field-bg);color:var(--ink)}
form.q input:focus,form.q textarea:focus{border-color:var(--rule)}
form.q button{margin-top:1rem;background:var(--orange);color:var(--charcoal-deep);border:0;border-radius:2px;
  padding:.75rem 1.3rem;font:inherit;font-weight:700;cursor:pointer;font-size:.96rem}
form.q button:hover{background:var(--yellow)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:.75rem 1rem;border-radius:var(--radius);margin:1rem 0;font-size:.93rem;border:1px solid transparent}
.alert.ok{background:var(--green-bg);border-color:var(--ok-border);color:var(--ok-text)}
.alert.bad{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}

/* ── exploded view (conditional; requires figure+callout data) ── */
.exploded{margin:1.4rem 0 2rem;background:var(--charcoal-deep);border-radius:var(--radius);padding:1.2rem 1.2rem 1.4rem;color:var(--white)}
.exploded-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.9rem}
.exploded-head h2{color:var(--white);border-color:var(--charcoal-mid);margin:0;flex:1 1 auto}
.explode-toggle{
  font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.03em;
  background:var(--chip-dark);color:var(--white);border:1px solid var(--charcoal-line);
  padding:.45rem .8rem;border-radius:2px;cursor:pointer;
}
.explode-toggle:hover{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
.explode-toggle[aria-pressed="true"]{background:var(--orange);color:var(--charcoal-deep);border-color:var(--orange)}
.figure-stage{
  position:relative;background:var(--art-bed);border-radius:2px;
  aspect-ratio:var(--fig-w,4) / var(--fig-h,3);max-width:640px;margin:0 auto;
  overflow:visible;
}
.figure-stage img,.figure-stage svg.assembly-art{width:100%;height:100%;display:block;object-fit:contain}
.leader-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.leader-lines line{stroke:var(--orange);stroke-width:1;stroke-dasharray:3 2;opacity:0;transition:opacity .3s}
.figure-stage[data-exploded="true"] .leader-lines line{opacity:.85}
.callout{
  position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  transition:left .55s cubic-bezier(.2,.7,.3,1), top .55s cubic-bezier(.2,.7,.3,1);
}
.callout > a{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--charcoal-deep);color:var(--white);border:2px solid var(--orange);
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;text-decoration:none;
  transition:background .15s;
}
.callout > a:hover,.callout > a:focus-visible{background:var(--orange);color:var(--charcoal-deep)}
.figure-stage[data-exploded="true"] .callout{
  left:calc(var(--ex) * 1%);top:calc(var(--ey) * 1%);
}
.callout-label{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.68rem;font-family:var(--font-mono);
  background:var(--charcoal-deep);color:var(--white);border:1px solid var(--charcoal-line);
  padding:.15rem .4rem;border-radius:2px;margin-top:.3rem;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.callout:hover .callout-label,.callout:focus-within .callout-label{opacity:1}
.exploded-legend{margin-top:1.1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem .9rem}
.exploded-legend a{
  display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);text-decoration:none;font-size:.85rem;
  padding:.25rem 0;
}
.exploded-legend a:hover{color:var(--orange)}
.exploded-legend .num{
  font-family:var(--font-mono);font-weight:700;font-size:.7rem;color:var(--charcoal-deep);
  background:var(--orange);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.exploded-note{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:1rem}
@media (prefers-reduced-motion:reduce){
  .callout{transition:none}
  .leader-lines line{transition:none}
}

footer.pd{background:var(--charcoal-deep);color:var(--grey-mid);font-size:.86rem;padding:1.6rem 1.25rem;margin-top:2.5rem;
  border-top:3px solid var(--orange)}
footer.pd .wrap{max-width:1200px;margin:0 auto}
footer.pd a{color:var(--orange-on-dark)}
footer.pd a:hover{color:var(--yellow)}
footer.pd .foot-brand{font-family:var(--font-display);font-weight:700;color:var(--white);letter-spacing:.02em}

@media (max-width:640px){
  header.pd .wrap{padding:.7rem 1rem}
  nav.pd{gap:.85rem}
  .hdr-lookup{order:5;width:100%}
  .hdr-lookup form{width:100%}
  .hdr-lookup input{width:0;flex:1 1 auto}
  main{padding:1.25rem 1rem 3rem}
  .pd-hero{padding:1.1rem 1rem 1.2rem}
  .cat-search{padding:.8rem}
}

/* =========================================================================
   BUY — card checkout form (priced, on-the-shelf parts only)
   ========================================================================= */
.pd-buy{
  background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);
  padding:1.2rem 1.3rem 1.4rem;margin:1.3rem 0;box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.pd-buy::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange)}
.pd-buy h2{margin-top:0}
.buy-lede{color:var(--charcoal-mid);font-size:.92rem;margin-bottom:1rem;max-width:60ch}

.buy-fallback-note{
  background:var(--bad-bg);border:1px solid var(--bad-border);border-radius:var(--radius);
  padding:.85rem 1rem;margin-bottom:1rem;font-size:.92rem;color:var(--bad-text);
}
.buy-fallback-note p{max-width:none;margin:0}
.buy-fallback-note a{color:var(--bad-text);font-weight:700}

/* Set by parts-buy.js the moment the application host looks unreachable. With no JS
   this attribute is never set and the form behaves exactly as the markup says: a plain
   POST that either lands on the checkout hand-off or, in the worst case with no script
   to catch it, the browser's own connection error — the one gap pure HTML cannot close. */
.buy-form[data-buy-unavailable] .buy-grid,
.buy-form[data-buy-unavailable] .buy-note{opacity:.45;pointer-events:none}

.buy-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.buy-field{display:flex;flex-direction:column;gap:.3rem}
.buy-field-wide{grid-column:1 / -1}
.buy-field-qty{max-width:160px}
.buy-fieldset{
  border:1px solid var(--grey-line);border-radius:var(--radius);padding:.9rem 1rem 1rem;
  display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  grid-column:1 / -1;
}
.buy-fieldset legend{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey-dark);padding:0 .3rem;
}
.buy-field label{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--charcoal-mid);
  font-family:var(--font-mono);
}
.buy-field label .opt{text-transform:none;letter-spacing:0;color:var(--grey-dark);font-family:var(--font-body)}
.buy-field input{
  padding:.6rem .65rem;border:1.5px solid var(--field-border);border-radius:2px;
  font:inherit;background:var(--field-bg);color:var(--ink);
}
.buy-field input:focus-visible{border-color:var(--rule)}

.buy-submit{margin-top:1.2rem;width:100%;justify-content:center;font-size:1rem}
.buy-submit:disabled{background:var(--grey-mid);color:var(--grey-dark);cursor:not-allowed}
.buy-note{margin-top:.7rem}

@media (max-width:640px){
  .pd-buy{padding:1rem .95rem 1.2rem}
  .buy-fieldset{grid-template-columns:1fr}
}

/* =========================================================================
   PAY INTERSTITIAL — served by voltops.net/store_checkout.php after a Buy
   form POST ("Order #ref — Pay now"). Not rendered by this box — it lives
   on the application host — but it shares this sheet and must read as the
   same shop, not a hand-off to somewhere else. Wrap that page's body in
   body.parts-page and use the classes below.
   ========================================================================= */
.pay-wrap{max-width:640px;margin:2.5rem auto;padding:0 1.25rem}
.pay-card{
  background:var(--charcoal-deep);color:var(--white);border-radius:var(--radius);
  padding:1.6rem 1.6rem 1.4rem;position:relative;overflow:hidden;
}
.pay-card::after{
  content:"";position:absolute;top:0;right:0;width:64px;height:64px;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 10px,var(--charcoal-deep) 10px 20px);
  clip-path:polygon(100% 0,100% 100%,0 0);opacity:.9;
}
.pay-eyebrow{font-family:var(--font-display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem}
.pay-ref{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--white);word-break:break-word}
.pay-status{display:inline-block;margin-top:.5rem;font-family:var(--font-display);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:10px}
.pay-status.pending{background:rgba(245,197,24,.18);color:var(--yellow)}
.pay-status.paid{background:var(--green-bg);color:var(--green)}
.pay-status.refused{background:rgba(178,58,36,.25);color:var(--orange-on-dark)}

.pay-summary{
  display:grid;gap:1px;background:var(--grey-line);border:1px solid var(--grey-line);
  border-radius:var(--radius);overflow:hidden;margin:1.3rem 0;
}
.pay-line{background:var(--paper);padding:.7rem .9rem;display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.pay-line dt{color:var(--charcoal-mid)}
.pay-line dd{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.pay-line.total dd{color:var(--orange-text);font-size:1.1rem}

.pay-cta{display:block;text-align:center;margin-top:1.1rem}
.pay-note{font-size:.84rem;color:var(--grey-dark);margin-top:1rem;max-width:none}

.pay-error{
  background:var(--bad-bg);border:1px solid var(--bad-border);border-radius:var(--radius);
  padding:.9rem 1rem;margin-top:1.2rem;color:var(--bad-text);font-size:.92rem;
}

@media (max-width:640px){
  .pay-wrap{margin:1.4rem auto}
  .pay-card{padding:1.2rem 1.1rem 1.1rem}
}

/* =========================================================================
   DAY / NIGHT SKIN
   =========================================================================
   Same token names as the daylight sheet above, different values — nothing
   below restyles a component, it only re-answers "what colour is --ink".

   Two blocks, and they must stay identical token for token:

     1. @media (prefers-color-scheme:dark) — the skin a visitor gets with
        JavaScript switched off entirely. This is the one that matters most;
        the control is the convenience, the media query is the feature.
     2. [data-theme="dark"] — a manual choice, set on <html> by the inline
        script in parts_chrome.php before first paint and remembered in
        localStorage.

   The media block excludes :root[data-theme="light"] so that a visitor whose
   OS is dark but who has asked this shop for daylight actually gets daylight.
   ========================================================================= */
/* =========================================================================
   CATALOGUE GRID — usedcopierparts.com /parts (Node 2 patch 7)
   Scoped under body.shop, which parts_head() prints on that one domain only,
   so canonparts.com (same templates, same sheet) cannot pick any of it up.
   Tokens only: the day/night skin reaches these rules through the same
   variables everything above uses, with no second dark block to drift.
   ========================================================================= */
.shop .cat-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem .8rem;
  background:var(--charcoal-deep);border-radius:var(--radius);padding:.9rem 1rem;margin:1rem 0 .8rem;color:var(--white)}
.shop .cat-toolbar label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.7)}
.shop .cat-toolbar .cat-q{flex:1 1 260px}
.shop .cat-toolbar input[type=search],.shop .cat-toolbar select{
  font:600 .92rem/1.2 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink);
  background:var(--field-bg);border:1.5px solid var(--field-border);border-radius:2px;padding:.55rem .6rem;min-width:0}
.shop .cat-toolbar input[type=search]{font-family:var(--font-mono)}
.shop .cat-toolbar .cat-check{flex-direction:row;align-items:center;gap:.4rem;font-size:.82rem;
  font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--white);padding-bottom:.55rem}
.shop .cat-toolbar .cat-check input{width:1.05rem;height:1.05rem;accent-color:var(--orange)}
.shop .cat-toolbar .cat-sel select{max-width:14rem}
.shop .cat-toolbar button{border:0;background:var(--orange);color:var(--charcoal-deep);font-weight:700;
  padding:.62rem 1.1rem;border-radius:2px;cursor:pointer;font-size:.88rem}
.shop .cat-toolbar button:hover{background:var(--yellow)}
.shop .cat-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem}
.shop .cat-view-link{font-size:.84rem}
.shop .cat-grid{list-style:none;margin:.6rem 0 1rem;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.shop .cat-card{animation:rise 480ms cubic-bezier(0.2,0,0,1) backwards}
.shop .cat-card:nth-child(1){animation-delay:0ms}
.shop .cat-card:nth-child(2){animation-delay:90ms}
.shop .cat-card:nth-child(3){animation-delay:180ms}
.shop .cat-card:nth-child(4){animation-delay:270ms}
@media (prefers-reduced-motion:reduce){
  .shop .cat-card{animation:none}
}
.shop .cat-card{
  display:flex;flex-direction:column;
  background:var(--glass-tint);
  border:1px solid var(--glass-edge);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform 200ms cubic-bezier(0.2,0,0,1), box-shadow 200ms cubic-bezier(0.2,0,0,1);
}
.shop .cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 32px 80px rgba(0,0,0,0.28), inset 0 1px 0 var(--glass-edge);
}
.shop .cat-thumb{display:block;aspect-ratio:3/2;background:transparent;line-height:0;overflow:hidden;position:relative}
.shop .cat-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 480ms cubic-bezier(0.2,0,0,1);
}
.shop .cat-card:hover .cat-thumb img{transform:scale(1.045)}
/* V2 designed empty state: icon + "Photo coming soon" + accent glow, not dashed grey box */
.shop .cat-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  width:100%;height:100%;
  background:radial-gradient(circle at center, rgba(255,107,53,0.12), transparent 60%);
  color:var(--grey-dark);font:600 .82rem/1.2 var(--font-body);letter-spacing:.01em;
  position:relative;
}
.shop .cat-tile::before{
  content:"";display:block;width:48px;height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09a8f' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.5;
}
.shop .cat-tile::after{content:"Photo coming soon"}
.shop .cat-body{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.1rem;flex:1 1 auto}
.shop .cat-name{color:var(--ink);font-weight:700;text-decoration:none;line-height:1.3}
.shop .cat-name:hover{color:var(--orange-text);text-decoration:underline}
.shop .cat-pn{font:700 .8rem/1.3 var(--font-mono);color:var(--charcoal-mid)}
.shop .cat-fits,.shop .cat-cond{font-size:.8rem;color:var(--grey-dark);line-height:1.3}
.shop .cat-stock{font:600 .78rem/1.3 var(--font-mono);color:var(--green)}
.shop .cat-stock.to-order{color:var(--orange-text)}
.shop .cat-price{
  font:700 1.12rem/1.2 var(--font-mono);color:var(--orange-text);margin-top:auto;padding-top:.35rem;
  text-shadow:0 0 12px rgba(255,107,53,0.35);
}
.shop .cat-add-btn{
  margin-top:.45rem;border:0;background:var(--orange);color:var(--charcoal-deep);font-weight:700;
  padding:.5rem .7rem;border-radius:18px;cursor:pointer;font-size:.86rem;
  box-shadow:0 0 16px rgba(255,107,53,0.4);
  transition:all 200ms cubic-bezier(0.2,0,0,1);
}
.shop .cat-add-btn:hover{
  background:var(--yellow);
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(255,107,53,0.5);
}
.shop .cat-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin:1rem 0}
.shop .cat-pager a,.shop .cat-pager span{min-width:2.3rem;text-align:center;padding:.45rem .6rem;border-radius:2px;
  font:600 .86rem/1 var(--font-mono);text-decoration:none;border:1px solid var(--grey-line);background:var(--paper)}
.shop .cat-pager .cur{background:var(--charcoal-deep);color:var(--white);border-color:var(--charcoal-deep)}
.shop .cat-pager .gap{border-color:transparent;background:transparent}
.shop .cat-more{display:block;margin:1rem auto;border:2px solid var(--rule);background:transparent;color:var(--rule);
  font-weight:700;padding:.6rem 1.4rem;border-radius:var(--radius);cursor:pointer}
.shop .cat-more[hidden],.shop .cat-pager[hidden]{display:none}
.shop .policy h2{margin-top:1.4rem}
.shop .policy p{margin:.5rem 0}
.shop .foot-links{margin-top:.5rem}
/* ═══════════════════════════════════════════════════════════════════════════
   PART PAGE V2 — photography-first hero with glass treatment
   ═══════════════════════════════════════════════════════════════════════════ */
.shop .pd-hero-v2{
  display:grid;gap:1.5rem;
  grid-template-columns:1fr;
  margin:1.2rem 0 1.6rem;
}
@media (min-width:1024px){
  .shop .pd-hero-v2{grid-template-columns:1.2fr 1fr}
}
.shop .pd-photo-glass{
  background:var(--glass-tint);
  border:1px solid var(--glass-edge);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow:hidden;
  aspect-ratio:4/3;
}
.shop .pd-photo-glass img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.shop .pd-spec-glass{
  background:var(--glass-tint);
  border:1px solid var(--glass-edge);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;gap:1rem;
}
.shop .pd-spec-price{
  font:700 clamp(1.8rem,4vw,2.4rem)/1.1 var(--font-mono);
  color:var(--orange-text);
  text-shadow:0 0 16px rgba(255,107,53,0.4);
}
.shop .pd-spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.95rem;padding:.5rem 0;border-top:1px solid var(--glass-edge);
}
.shop .pd-spec-label{color:var(--grey-dark);font-family:var(--font-display);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.shop .pd-spec-value{font-weight:700;font-family:var(--font-mono)}

@media (max-width:720px){
  .shop .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .shop .cat-toolbar .cat-sel{flex:1 1 40%}
  .shop .cat-toolbar .cat-sel select{max-width:none;width:100%}
}
@media print{
  .shop .cat-toolbar,.shop .cat-pager,.shop .cat-more{display:none}
}

/* =========================================================================
   BUY — card checkout form (priced, on-the-shelf parts only)
   ========================================================================= */
.pd-buy{
  background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);
  padding:1.2rem 1.3rem 1.4rem;margin:1.3rem 0;box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.pd-buy::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange)}
.pd-buy h2{margin-top:0}
.buy-lede{color:var(--charcoal-mid);font-size:.92rem;margin-bottom:1rem;max-width:60ch}

.buy-fallback-note{
  background:var(--bad-bg);border:1px solid var(--bad-border);border-radius:var(--radius);
  padding:.85rem 1rem;margin-bottom:1rem;font-size:.92rem;color:var(--bad-text);
}
.buy-fallback-note p{max-width:none;margin:0}
.buy-fallback-note a{color:var(--bad-text);font-weight:700}

/* Set by parts-buy.js the moment the application host looks unreachable. With no JS
   this attribute is never set and the form behaves exactly as the markup says: a plain
   POST that either lands on the checkout hand-off or, in the worst case with no script
   to catch it, the browser's own connection error — the one gap pure HTML cannot close. */
.buy-form[data-buy-unavailable] .buy-grid,
.buy-form[data-buy-unavailable] .buy-note{opacity:.45;pointer-events:none}

.buy-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.buy-field{display:flex;flex-direction:column;gap:.3rem}
.buy-field-wide{grid-column:1 / -1}
.buy-field-qty{max-width:160px}
.buy-fieldset{
  border:1px solid var(--grey-line);border-radius:var(--radius);padding:.9rem 1rem 1rem;
  display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  grid-column:1 / -1;
}
.buy-fieldset legend{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey-dark);padding:0 .3rem;
}
.buy-field label{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--charcoal-mid);
  font-family:var(--font-mono);
}
.buy-field label .opt{text-transform:none;letter-spacing:0;color:var(--grey-dark);font-family:var(--font-body)}
.buy-field input{
  padding:.6rem .65rem;border:1.5px solid var(--field-border);border-radius:2px;
  font:inherit;background:var(--field-bg);color:var(--ink);
}
.buy-field input:focus-visible{border-color:var(--rule)}

.buy-submit{margin-top:1.2rem;width:100%;justify-content:center;font-size:1rem}
.buy-submit:disabled{background:var(--grey-mid);color:var(--grey-dark);cursor:not-allowed}
.buy-note{margin-top:.7rem}

@media (max-width:640px){
  .pd-buy{padding:1rem .95rem 1.2rem}
  .buy-fieldset{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART PAGE + CART — usedcopierparts.com (Node 2 patches 8/9). Every rule is scoped
   to .shop and uses the skin tokens only, so both skins inherit it unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.shop .pd-trust{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:.2rem 0 1rem;padding:0;
  font-size:.84rem;color:var(--grey-dark)}
.shop .pd-trust li::before{content:"\2713\00a0";color:var(--green)}
.shop .fits-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1rem;padding:0}
.shop .fits-chip{display:inline-block;font:600 .8rem/1 var(--font-mono);padding:.4rem .6rem;border-radius:2px;
  border:1px solid var(--grey-line);background:var(--paper);color:var(--ink);text-decoration:none}
.shop .fits-chip:hover{border-color:var(--orange);color:var(--orange-text)}
.shop .pd-related{margin-top:1.6rem}
.shop .pd-notify{background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);padding:1rem 1.1rem;margin:1rem 0}
.shop .pd-notify h2{margin-top:0;font-size:1.05rem}
.shop .pd-notify label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--charcoal-mid);margin-top:.6rem}
.shop .pd-notify input[type=email],.shop .pd-notify input[type=number]{width:100%;max-width:22rem;padding:.55rem .6rem;
  border:1.5px solid var(--field-border);border-radius:2px;background:var(--field-bg);color:var(--ink)}
.shop .pd-notify button{margin-top:.8rem;background:var(--orange);color:var(--charcoal-deep);border:0;border-radius:2px;
  font-weight:700;padding:.6rem 1.2rem;cursor:pointer}
.shop .pd-sticky{display:none}
@media (max-width:720px){
  .shop .pd-sticky{display:flex;align-items:center;justify-content:space-between;gap:.8rem;position:fixed;left:0;right:0;bottom:0;
    z-index:20;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--charcoal-deep);color:var(--white)}
  .shop .pd-sticky-price{font:700 1.1rem/1 var(--font-mono)}
  .shop main:has(.pd-sticky){padding-bottom:4.5rem}
}
@media print{.shop .pd-sticky,.shop .pd-notify{display:none}}

   CART ADDITIONS — appended to parts.css
   ========================================================================= */

/* ── cart badge in header ── */
.cart-link{
  display:flex;align-items:center;gap:.35rem;
  color:rgba(255,255,255,.72);text-decoration:none;font-size:.86rem;letter-spacing:.01em;
}
.cart-link:hover{color:var(--white)}
.cart-icon{
  width:16px;height:16px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center/contain no-repeat;
}
.cart-badge{
  background:var(--orange);color:var(--white);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  padding:.15em .4em;border-radius:10px;min-width:1.4em;text-align:center;
}

/* ── add-to-cart row on part detail ── */
.add-to-cart-row{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-bottom:.75rem;
}
.add-to-cart-row .qty-label{
  font-size:.9rem;font-weight:700;margin:0;
}
.add-to-cart-row .qty-input{
  width:5rem;padding:.5rem .65rem;
  font-family:var(--font-mono);font-size:.95rem;
  border:1.5px solid var(--field-border);border-radius:var(--radius);
  background:var(--field-bg);color:var(--ink);
}

/* ── cart page ── */
.cart-table{
  width:100%;border-collapse:collapse;margin:1.5rem 0;
  background:var(--paper);
}
.cart-table caption{margin-bottom:.75rem;text-align:left}
.cart-table th{
  text-align:left;padding:.65rem .75rem;
  background:var(--charcoal-deep);color:var(--white);
  font-size:.85rem;font-weight:700;letter-spacing:.01em;
  border-bottom:2px solid var(--orange);
}
.cart-table th.num{text-align:right}
.cart-table th.shot-col{width:80px}
.cart-table td{
  padding:.85rem .75rem;border-bottom:1px solid var(--grey-line);
}
.cart-table td.num{text-align:right}
.cart-table td.shot{width:80px;padding:.5rem}
.cart-table .pn{
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;
}
.cart-table .desc{font-size:.9rem;color:var(--grey-dark)}
.cart-table .price{font-family:var(--font-mono);font-weight:500}

.cart-qty-input{
  width:4.5rem;padding:.4rem .5rem;
  font-family:var(--font-mono);font-size:.9rem;
  border:1.5px solid var(--field-border);border-radius:var(--radius);
  background:var(--field-bg);color:var(--ink);
}

.cart-remove-btn{
  background:none;border:1px solid var(--red-dim);color:var(--red-dim);
  padding:.35rem .65rem;border-radius:var(--radius);
  font-size:.8rem;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;
}
.cart-remove-btn:hover{background:var(--red-dim);color:var(--white)}

.cart-subtotal td{
  padding-top:1.2rem;border-bottom:none;
  font-size:1.05rem;
}
.cart-subtotal .tar{text-align:right}

.cart-notes{margin:1rem 0 2rem}
.cart-notes p{margin:.5rem 0;font-size:.9rem}

.cart-checkout-form{
  max-width:700px;margin:2rem 0;
  padding:1.75rem;background:var(--paper);border-radius:var(--radius);
}
.cart-checkout-btn{
  margin-top:1.5rem;width:100%;max-width:none;
}

.vh{
  position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;
}

/* Tokens only — no second dark block (patch 14, 2026-09-26). The earlier override painted
   .cart-table and .cart-checkout-form with --charcoal-mid at night, and the night skin
   redefines --charcoal-mid as a light TEXT colour (#b9b4a9): the cart row and the checkout
   panel came out pale grey with pale text on them. --paper and --grey-line already flip
   with the skin, so the cart reads like every other card on the page in both modes. */

.shop .cart-sums{margin:1rem 0;display:grid;gap:.3rem;max-width:26rem;margin-left:auto}
.shop .cart-sums div{display:flex;justify-content:space-between;gap:1rem}
.shop .cart-sums dt{color:var(--grey-dark)}
.shop .cart-sums dd{margin:0;font-family:var(--font-mono);font-weight:700}
.shop .cart-sums .cart-total-row{border-top:1px solid var(--grey-line);padding-top:.4rem}
.shop .cart-step{display:inline-flex;align-items:center;gap:.25rem}
.shop .cart-step button{min-width:2rem;min-height:2rem;border:1px solid var(--field-border);background:var(--field-bg);
  color:var(--ink);border-radius:2px;cursor:pointer;font-weight:700}
.shop .cart-step button:disabled{opacity:.4;cursor:default}
/* patch 10: keyboard focus that shows on EVERY ground (WCAG 2.4.7 / 1.4.11). The base rule's
   --focus-ring is charcoal in daylight, which is invisible on the charcoal header, footer and
   sticky bar - those grounds get the night skin's yellow ring instead. */
.shop a:focus-visible,.shop button:focus-visible,.shop select:focus-visible,.shop input:focus-visible,.shop .btn:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px}
.shop header.pd a:focus-visible,.shop header.pd button:focus-visible,.shop header.pd input:focus-visible,
.shop footer.pd a:focus-visible,.shop .pd-sticky button:focus-visible{outline-color:#ffd166}

/* patch 23 (2026-09-27): phone cart — the six-column table stacks into one card per line. Cell order
   from parts-cart.js: shot | part | unit price | qty | total | remove. No horizontal scroll at 390px. */
@media (max-width:640px){
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block}
  .cart-table thead{display:none}
  .cart-table caption{display:block;width:100%}
  .cart-table tr{display:grid;grid-template-columns:72px 1fr auto;grid-template-areas:"shot name name" "shot unit qty" "shot total rm";
    gap:.4rem .8rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .cart-table td{padding:0;border:0;width:auto}
  .cart-table td.num{text-align:left}
  .cart-table td.shot{grid-area:shot;width:72px;padding:0}
  .cart-table td:nth-child(2){grid-area:name}
  .cart-table td:nth-child(3){grid-area:unit}
  .cart-table td:nth-child(4){grid-area:qty;justify-self:end}
  .cart-table td:nth-child(5){grid-area:total;font-weight:700}
  .cart-table td:nth-child(6){grid-area:rm;justify-self:end}
  .cart-table td:nth-child(3)::before,.cart-table td:nth-child(5)::before{
    display:block;color:var(--grey-dark);font:600 .68rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.07em}
  .cart-table td:nth-child(3)::before{content:"Unit price"}
  .cart-table td:nth-child(5)::before{content:"Line total"}
}

/* Policy + contact page styles */

/* Contact form: select and textarea match input styling */
.buy-field select,
.buy-field textarea {
  padding:.6rem .65rem;
  border:1.5px solid var(--field-border);
  border-radius:2px;
  font:inherit;
  background:var(--field-bg);
  color:var(--ink);
  width:100%;
}

.buy-field select:focus-visible,
.buy-field textarea:focus-visible {
  border-color:var(--rule);
  outline:none;
}

.buy-field textarea {
  resize:vertical;
  min-height:8rem;
  font-family:var(--font-body);
}

/* Contact page specific: ensure form is full-width */
.contact-shop form {
  max-width:42rem;
}