/* ============================================================
   Woodcraft Electric Guitars — demo redesign
   Design notes:
   - Ground is near-black because 35 of 44 catalogue photographs
     are shot on pure black. Tiles carry a per-product "plate"
     colour sampled from the image corners, so every instrument
     sits on its own matched ground and reads as one system.
   - Section labels use a fret-inlay device (position dots on a
     fretwire rule) rather than a caps kicker.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ground: #08080a;
  --ground-2: #0e0e11;
  --surface: #141418;
  --surface-2: #1b1b20;
  --line: #26262d;
  --line-soft: #1c1c22;

  --ink: #efe9dc;
  --ink-2: #b3ada2;
  --ink-3: #7d786f;

  --butter: #f2d479; /* from the Woodcraft headstock decal */
  --butter-dim: #c9ae5d;
  --tobacco: #c0803a;
  --rust: #a4462c;

  --f-display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-text: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 4vw, 64px);
  --maxw: 1400px;
  --r: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--butter);
  color: #000;
}

/* ---------- browser surfaces ----------
   The parts of the page nobody draws still carry the design: the page
   scrollbar, the text caret, and the numerals in prices and counts. Left on
   browser defaults they read as assembled rather than built. */
html {
  scrollbar-color: var(--line) var(--ground);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ground);
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
  border: 2px solid var(--ground);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--butter-dim);
}
input,
textarea,
select {
  caret-color: var(--butter);
}

/* Prices, counts, measurements and the fret numbers line up as columns of
   figures; running text and display copy wrap without orphans. */
.mono,
.card__price,
.drawer__price,
.line__price,
.count,
.fret__no,
.hero__meta b,
.scale__n,
.upcoming__tag i,
.fitment span,
.ord__terms dd {
  font-variant-numeric: tabular-nums;
}
h1, h2, h3,
.h-xl, .h-lg, .h-md, .h-sm,
.upcoming__tag b,
.line__name,
.card__name {
  text-wrap: balance;
}
p,
.lede,
.hero__sub,
.quote p,
.line__pitch,
.scale__note {
  text-wrap: pretty;
}

/* Pressed feedback, so a click feels like a click. */
.btn:active,
.chip:active,
.card:active,
.fitment:active,
.line__more:active,
.upcoming__arrow:active {
  transform: translateY(1px);
}
.btn--fill:active {
  filter: brightness(0.94);
}

/* Skip link for keyboard users: invisible until it takes focus. */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--butter);
  color: #000;
  font-family: var(--f-mono);
  font-size: 0.897rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--r);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- type ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}
.h-xl {
  font-size: clamp(3.4rem, 11vw, 9.5rem);
}
.h-lg {
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
}
.h-md {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
}
.h-sm {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: 0.01em;
}

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.34rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
}
.dim {
  color: var(--ink);
}
.dimmer {
  color: var(--ink);
}
.mono {
  font-family: var(--f-mono);
  font-size: 0.897rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
em {
  font-style: italic;
  color: var(--butter-dim);
}

/* ---------- fret-inlay section label (the ownable device) ---------- */
.fret {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(24px, 4vw, 46px);
}
.fret__dots {
  display: flex;
  gap: 5px;
  flex: none;
}
.fret__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--butter);
  opacity: 0.85;
  display: block;
}
.fret__dots i:nth-child(2) {
  opacity: 0.45;
}
.fret__dots i:nth-child(3) {
  opacity: 0.22;
}
.fret__name {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  flex: none;
  padding-top: 2px;
}
.fret__wire {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line) 60%, transparent 100%);
  position: relative;
}
.fret__wire::after {
  content: "";
  position: absolute;
  right: auto;
  left: 0;
  top: -1px;
  width: 34%;
  height: 3px;
  background: linear-gradient(90deg, rgba(242, 212, 121, 0.55), transparent);
}
.fret__no {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  flex: none;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s;
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 104px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.brand img {
  height: 69px;
  width: auto;
  /* The logo file is tightly cropped on a black box a shade darker than the
     page, so its edges showed and the W looked cut off. Lighten drops the
     black box into the page and leaves only the yellow script. */
  mix-blend-mode: lighten;
}
.brand__loc {
  font-family: var(--f-mono);
  font-size: 0.77rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  border-left: 1px solid var(--line);
  padding-left: 13px;
  line-height: 1.35;
}
@media (max-width: 1220px) {
  .brand__loc {
    display: none;
  }
}
@media (max-width: 520px) {
  .hdr__in {
    height: 86px;
  }
  .brand img {
    height: 53px;
  }
}

.nav {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: center;
}
.nav a {
  font-family: var(--f-mono);
  font-size: 0.954rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--butter);
  transition: right 0.32s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  right: 0;
}
@media (max-width: 1140px) {
  .nav {
    display: none;
  }
}

.hdr__cta {
  font-family: var(--f-mono);
  font-size: 0.897rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: var(--r);
  color: var(--ink);
  transition: 0.25s var(--ease);
  flex: none;
}
.hdr__cta:hover {
  background: var(--butter);
  border-color: var(--butter);
  color: #000;
}
@media (max-width: 520px) {
  .hdr__cta {
    display: none;
  }
}

.burger {
  display: none;
  flex: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  width: 40px;
  height: 36px;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: var(--ink);
  transition: 0.3s var(--ease);
}
.burger span:nth-child(1) {
  top: 12px;
}
.burger span:nth-child(2) {
  bottom: 12px;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  top: 17px;
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  bottom: 17.5px;
  transform: rotate(-45deg);
}
@media (max-width: 1140px) {
  .burger {
    display: block;
  }
}

.mnav {
  display: none;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ground-2);
}
.mnav.open {
  display: block;
}
.mnav a {
  display: block;
  padding: 15px var(--gut);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 1.058rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.mnav a:last-child {
  border-bottom: 0;
}

/* ---------- editable upcoming-image carousel ---------- */
.upcoming {
  padding-top: clamp(26px, 4vw, 52px);
  padding-bottom: clamp(26px, 4vw, 52px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.upcoming__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.upcoming__note {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 1.05rem;
}
.upcoming__controls {
  display: flex;
  gap: 8px;
}
.upcoming__arrow {
  width: 42px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.upcoming__arrow:hover {
  border-color: var(--butter);
  color: var(--butter);
}
.upcoming__track {
  padding-top: 8px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
/* ---------- embedded video ----------
   Landscape frame. A YouTube Short is 9:16, and the player letterboxes it
   inside the 16:9 frame itself; a portrait frame in a split column was too
   tall and too narrow to read. */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--r);
  overflow: hidden;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Vertical video (a YouTube Short) on a landscape stage. The Short keeps its
   9:16 proportion; the stage is filled edge to edge with a blurred photo
   instead of black bars. Phones drop the stage and show the Short alone. */
.video--stage { background: var(--surface) var(--stage) center / cover no-repeat; }
.video--stage::before { content: ""; position: absolute; inset: -24px; background: inherit; filter: blur(24px) brightness(0.42); }
.video__short { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; height: 100%; background: #000; }
.video__short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
  .video--stage { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; background: #000; }
  .video--stage::before { display: none; }
}


/* 60 / 40 split for a video beside copy. */
.split--video {
  grid-template-columns: 3fr 2fr;
  align-items: start;
}

/* ---------- featured tiles ----------
   The hang tag. Every shop ties a yellow tag to the headstock of the
   instrument it wants you to notice; that is what marks these as featured
   rather than a smaller copy of the catalogue grid below. One angled cut on
   the band, the name in the display face, the price in mono. */
.upcoming__slide {
  position: relative;
  display: block;
  flex: 0 0 min(72vw, 340px);
  aspect-ratio: 4/5;
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  outline-offset: 3px;
}
.upcoming__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hover and zoom. The photo pushes in slowly, the tag lifts and brightens, and
   the tile gains a butter edge — a clear "this is live" response without
   moving the instrument out of frame. Pointer devices only; touch gets the
   plain tile. Keyboard focus gets the same treatment. */
.upcoming__slide {
  cursor: pointer;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.upcoming__slide img {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s var(--ease);
  transform-origin: 50% 45%;
}
.upcoming__tag {
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .upcoming__slide:hover {
    outline: 2px solid var(--butter);
    outline-offset: -2px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    transform: translateY(-4px);
  }
  .upcoming__slide:hover img {
    transform: scale(1.1);
    filter: brightness(1.06) saturate(1.06);
  }
  .upcoming__slide:hover .upcoming__tag {
    transform: translateY(-6px);
    background-color: #f8df8f;
  }
}
.upcoming__slide:focus-visible img { transform: scale(1.1); }
.upcoming__slide:focus-visible .upcoming__tag { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .upcoming__slide, .upcoming__slide:hover { transform: none; }
  .upcoming__slide:hover img, .upcoming__slide:focus-visible img { transform: none; }
}

.upcoming__tag {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 30%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px 14px;
  padding: 24px 18px 16px 34px;
  background: var(--butter);
  color: #0c0b08;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.upcoming__tag b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-height: 2.8em;
  overflow: hidden;
}
.upcoming__tag i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 1.092rem;
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 2px;
}
.upcoming__tag small {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 0.805rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
/* Nothing to say but "featured": the word itself becomes the tag, set big in
   the display face so the band has the same weight as one carrying a name. */
.upcoming__tag--bare {
  left: 44%;
  padding: 18px 18px 14px 34px;
  grid-template-columns: 1fr;
}
.upcoming__tag--bare small {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 1;
}
a.upcoming__slide:focus-visible {
  outline: 2px solid var(--butter);
}

/* ---------- thumb rest fitments ---------- */
.fitments {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.fitment {
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ground);
  color: inherit;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.fitment:hover,
.fitment:focus-visible {
  background: var(--surface);
  outline: none;
}
.fitment b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fitment span {
  font-family: var(--f-mono);
  font-size: 0.943rem;
  color: var(--ink);
}
.fitment .fitment__go {
  color: var(--butter);
  font-family: var(--f-mono);
  font-size: 0.943rem;
}
.thumbs__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
}
@media (max-width: 520px) {
  .upcoming__head {
    align-items: start;
  }
  .upcoming__slide {
    flex-basis: 68vw;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.828rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.28s var(--ease);
}
.btn:hover {
  border-color: var(--ink-2);
  background: rgba(255, 255, 255, 0.04);
}
.btn--fill {
  background: var(--butter);
  border-color: var(--butter);
  color: #0a0a0a;
  font-weight: 500;
}
.btn--fill:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
}
.btn__arw {
  transition: transform 0.28s var(--ease);
}
.btn:hover .btn__arw {
  transform: translateX(4px);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(40px, 7vw, 90px) var(--gut) clamp(50px, 7vw, 100px);
}
.hero__copy {
  position: relative;
  z-index: 2;
}
.hero__title {
  font-size: clamp(2.6rem, 7.3vw, 6.6rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
}
.hero__title .l {
  display: block;
  white-space: nowrap;
}
.hero__title .thin {
  -webkit-text-stroke: 1.3px var(--butter);
  color: transparent;
  font-weight: 500;
}
.hero__sub {
  margin: clamp(20px, 3vw, 32px) 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 44ch;
}
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.5vw, 40px);
}
.hero__meta {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4.5vw, 54px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.hero__meta div {
  min-width: 86px;
}
.hero__meta b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--butter);
  white-space: nowrap;
}
.hero__meta b i {
  font-style: normal;
  font-size: 0.5em;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.hero__meta span {
  font-family: var(--f-mono);
  font-size: 0.828rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-top: 7px;
}

.hero__shot {
  position: relative;
}
.hero__shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  max-height: 78vh;
  object-fit: contain;
  margin-inline: auto;
}
.hero__glow {
  position: absolute;
  inset: -14% -8%;
  background: radial-gradient(50% 46% at 50% 46%, rgba(242, 212, 121, 0.16), transparent 72%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
}
.hero__cap {
  position: absolute;
  left: 0;
  bottom: -10px;
  font-family: var(--f-mono);
  font-size: 0.851rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: clamp(28px, 6vw, 50px);
  }
  .hero__shot {
    order: -1;
    max-width: 440px;
    margin-inline: auto;
  }
  .hero__cap {
    position: static;
    display: block;
    margin-top: 10px;
    text-align: center;
  }
}

/* ---------- generic section ---------- */
.sec {
  padding-block: clamp(56px, 9vw, 132px);
}
.sec--tight {
  padding-block: clamp(40px, 6vw, 84px);
}
.sec--tight + [data-catalogue],
.sec--tight + .wrap {
  padding-top: 0;
}
.sec--line {
  border-top: 1px solid var(--line-soft);
}

/* ---------- product grid ---------- */
.grid {
  display: grid;
  gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
/* two-up on phones — 31 instruments is a lot to scroll one at a time */
@media (max-width: 620px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .card__body {
    padding: 11px 11px 13px;
    gap: 6px;
  }
  .card__name {
    font-size: 1.081rem;
  }
  .card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .card__spec {
    text-align: left;
  }
  .pill {
    font-size: 0.575rem;
    padding: 4px 7px;
    top: 8px;
    left: 8px;
  }
  .pill--stock,
  .pill--out {
    right: 8px;
    left: auto;
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.card:hover {
  border-color: #3a3a44;
  transform: translateY(-3px);
}
.card:focus-visible {
  outline: 2px solid var(--butter);
  outline-offset: 2px;
}
.card__shot {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--plate, #000);
  display: grid;
  place-items: center;
}
/* The catalogue photography is shot on pure black, so charcoal and
   satin-black finishes disappear into the ground. A soft halo behind
   the instrument lifts them without breaking the seamless edge. */
.card__shot[data-k="dark"],
.drawer__shot[data-k="dark"] {
  background: radial-gradient(56% 56% at 50% 46%, #1e1e26 0%, #0d0d11 52%, #000 82%);
}
.card__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.55s var(--ease);
}
.card:hover .card__shot img {
  transform: scale(1.045);
}
.card__body {
  padding: 16px 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  border-top: 1px solid var(--line-soft);
}
.card__fam {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--butter-dim);
}
.card__name {
  font-family: var(--f-display);
  font-size: 1.13rem;
  font-weight: 600;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.card__foot {
  margin-top: auto;
  padding-top: 11px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
}
.card__price {
  font-family: var(--f-mono);
  font-size: 0.977rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.card__price.ask {
  color: var(--ink);
  font-size: 0.782rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card__spec {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.pill {
  position: absolute;
  top: 11px;
  left: 11px;
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
.pill--stock {
  background: rgba(242, 212, 121, 0.92);
  color: #0a0a0a;
  border-color: transparent;
  left: auto;
  right: 11px;
}
.pill--out {
  background: rgba(8, 8, 10, 0.86);
  color: var(--ink);
  left: auto;
  right: 11px;
}

/* ---------- filter bar ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  padding: 16px 0 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.fgroup {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.fgroup > span {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 3px;
}
.chip {
  font-family: var(--f-mono);
  font-size: 0.736rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.2s var(--ease);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}
.chip[aria-pressed="true"] {
  background: var(--butter);
  border-color: var(--butter);
  color: #0a0a0a;
}
.fsearch {
  margin-left: auto;
  position: relative;
}
.fsearch input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px 9px 36px;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.805rem;
  letter-spacing: 0.06em;
  width: min(240px, 46vw);
  outline: none;
  transition: 0.25s;
}
.fsearch input:focus {
  border-color: var(--butter-dim);
  background: var(--surface-2);
}
.fsearch input::placeholder {
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.713rem;
}
.fsearch svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 1.6;
}
@media (max-width: 700px) {
  .fsearch {
    margin-left: 0;
    width: 100%;
  }
  .fsearch input {
    width: 100%;
  }
}

.count {
  font-family: var(--f-mono);
  font-size: 0.713rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.empty {
  padding: 70px 0;
  text-align: center;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.862rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.split--flip .split__media {
  order: 2;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--flip .split__media {
    order: 0;
  }
}
.split__media img {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
}

.speclist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.speclist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.092rem;
  color: var(--ink);
  align-items: baseline;
}
.speclist b {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--butter-dim);
  font-weight: 400;
  white-space: nowrap;
  padding-top: 3px;
}

/* ---------- stat band ---------- */
.band {
  border-block: 1px solid var(--line-soft);
  background: var(--ground-2);
}
.band__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  max-width: var(--maxw);
  margin-inline: auto;
}
.band__c {
  background: var(--ground-2);
  padding: clamp(24px, 4vw, 44px) clamp(16px, 2.5vw, 30px);
}
.band__c b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
}
.band__c span {
  display: block;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .band__in {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- quotes ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.quote {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink);
}
.quote p::before {
  content: "“";
  color: var(--butter);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.12em;
  margin-right: 1px;
}
.quote footer {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
}

/* ---------- drawer (quick view) ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease);
  z-index: 90;
}
.scrim.on {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100vw);
  z-index: 100;
  background: var(--ground-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.on {
  transform: none;
}
.drawer__x {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(14, 14, 17, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__x button {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  transition: 0.2s;
}
.drawer__x button:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}
.drawer__shot {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--plate, #000);
  overflow: hidden;
}
.drawer__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.drawer__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drawer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 10, 0.68);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.drawer__nav:hover {
  background: rgba(8, 8, 10, 0.9);
  border-color: var(--butter);
}
.drawer__nav--prev { left: 14px; }
.drawer__nav--next { right: 14px; }
.drawer__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 7px;
}
.drawer__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.drawer__dots span:hover {
  background: rgba(255, 255, 255, 0.55);
}
.drawer__dots span.is-on {
  background: var(--butter);
  border-color: var(--butter);
  transform: scale(1.2);
}
.drawer__body {
  padding: clamp(22px, 4vw, 34px);
}
.drawer__price {
  font-family: var(--f-mono);
  font-size: 1.45rem;
  color: var(--butter);
  margin: 14px 0 0;
}
.drawer__price small {
  font-size: 0.69rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-top: 6px;
}
.drawer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 0;
}
.tag {
  font-family: var(--f-mono);
  font-size: 0.655rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
}
.drawer__specs {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.drawer__specs li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.069rem;
  line-height: 1.5;
  color: var(--ink);
}
.drawer__acts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
.drawer__acts .btn {
  justify-content: center;
}

/* ---------- forms ---------- */
.form {
  display: grid;
  gap: 16px;
}
.field {
  display: grid;
  gap: 7px;
}
.field label {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1rem;
  outline: none;
  transition: 0.22s;
  width: 100%;
}
.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.55;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--butter-dim);
  background: var(--surface-2);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 14px) 21px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .row2 {
    grid-template-columns: 1fr;
  }
}
.formnote {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1.8;
  text-transform: uppercase;
}
.ok {
  border: 1px solid var(--butter-dim);
  background: rgba(242, 212, 121, 0.07);
  border-radius: var(--r);
  padding: 18px 20px;
  color: var(--butter);
  font-family: var(--f-mono);
  font-size: 0.805rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: uppercase;
}

/* ---------- footer ---------- */
.ftr {
  border-top: 1px solid var(--line-soft);
  background: var(--ground-2);
  padding: clamp(44px, 6vw, 76px) 0 30px;
  margin-top: clamp(50px, 7vw, 100px);
}
.ftr__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 50px);
  padding-bottom: clamp(30px, 4vw, 50px);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 860px) {
  .ftr__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .ftr__top {
    grid-template-columns: 1fr;
  }
}
.ftr h4 {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 15px;
}
.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.ftr a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.092rem;
  transition: color 0.2s;
}
.ftr a:hover {
  color: var(--butter);
}
.ftr__brand img {
  height: 68px;
  margin-bottom: 18px;
  mix-blend-mode: lighten;
}
.ftr__brand p {
  margin: 0;
  color: var(--ink);
  font-size: 1.058rem;
  line-height: 1.6;
  max-width: 34ch;
}
.ftr__bot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Model lines — added Sep 2026. The six bass families from
   Gary's spec sheet, replacing the flat scrape of 31 listings.
   ============================================================ */
.lines {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

.line {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.line:hover {
  border-color: #3a3a44;
  transform: translateY(-3px);
}
/* Square, like .card__shot. The model-line photography is full-length —
   headstock to strap button — so a 4:3 landscape box shrank the instrument
   to a sliver. A 1:1 box gives a tall photo room to be read. */
.line__shot {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--plate, #000);
  display: grid;
  place-items: center;
}
.line__shot[data-k="dark"] {
  background: radial-gradient(56% 56% at 50% 46%, #1e1e26 0%, #0d0d11 52%, #000 82%);
}
/* Absolutely positioned, not a centred grid item. As a grid item the
   percentage height resolved against an auto-sized row, so the image kept
   its natural ratio, object-fit never engaged and overflow:hidden cut the
   body off the bottom of every portrait photograph. inset:0 gives the
   percentage a definite box to resolve against. */
.line__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.55s var(--ease);
}
.line:hover .line__shot img {
  transform: scale(1.04);
}

/* no photograph yet — say so rather than showing a blank tile */
.line__nophoto {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  background: repeating-linear-gradient(45deg, #131317, #131317 10px, #17171c 10px, #17171c 20px);
}
.line__nophoto b {
  font-family: var(--f-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.line__nophoto span {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 22ch;
  line-height: 1.7;
}

.line__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  border-top: 1px solid var(--line-soft);
}
.line__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.line__name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.line__price {
  font-family: var(--f-mono);
  font-size: 0.897rem;
  color: var(--butter);
  white-space: nowrap;
}
.line__price.tbc {
  color: var(--ink);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.line__pitch {
  font-size: 1.138rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.line__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.line__strip span {
  font-family: var(--f-mono);
  font-size: 0.655rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 9px;
}
.line__foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.line__new {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--butter);
  border: 1px solid var(--butter-dim);
  padding: 4px 9px;
  border-radius: 100px;
}
.line__more {
  background: var(--butter);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  padding: 10px 18px;
  font-family: var(--f-mono);
  font-size: 0.828rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.line__more:hover {
  background: #fff;
  transform: translateX(2px);
}
.line__more:focus-visible {
  outline: 2px solid var(--butter);
  outline-offset: 3px;
}

/* the scale-length explainer */
.scales {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.scale {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  padding: 15px clamp(16px, 2.5vw, 26px);
  border-bottom: 1px solid var(--line-soft);
}
.scale:last-child {
  border-bottom: 0;
}
.scale.is-house {
  background: rgba(242, 212, 121, 0.05);
}
.scale__n {
  font-family: var(--f-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--butter);
  line-height: 1;
  letter-spacing: -0.01em;
}
.scale.is-house .scale__n {
  color: var(--butter);
}
.scale__name {
  font-family: var(--f-mono);
  font-size: 0.759rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.scale__note {
  font-size: 1.069rem;
  color: var(--ink);
  line-height: 1.5;
  grid-column: 2;
}
.scale__bar {
  width: clamp(60px, 14vw, 180px);
  height: 3px;
  background: var(--line);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.scale__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--butter);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .scale {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 13px 14px;
  }
  .scale__bar {
    display: none;
  }
  .scale__note {
    grid-column: 1/-1;
    font-size: 1.012rem;
  }
}

/* unconfirmed band */
.unconf {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: clamp(18px, 3vw, 30px);
  background: rgba(164, 70, 44, 0.04);
}
.unconf__head {
  font-family: var(--f-mono);
  font-size: 0.713rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 6px;
}
.retailnote,
.backorder {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
}
.backorder {
  color: var(--ink);
}
.maillink {
  color: var(--butter);
  font-family: var(--f-mono);
  font-size: 0.92rem;
  display: inline-block;
  padding: 6px 0;
}
@media (max-width: 620px) {
  .retailnote,
  .backorder {
    font-size: 0.805rem;
  }
  .maillink {
    font-size: 1.012rem;
    padding: 10px 0;
  }
}

/* ============================================================
   Cart + checkout — added Sep 2026.
   ============================================================ */
.cartbtn {
  position: relative;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 38px;
  padding: 0 14px;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.782rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  transition: 0.25s var(--ease);
}
.cartbtn:hover {
  border-color: var(--butter);
  color: var(--butter);
}
.cartbtn__n {
  min-width: 18px;
  height: 18px;
  border-radius: 100px;
  background: var(--butter);
  color: #0a0a0a;
  font-size: 0.713rem;
  display: grid;
  place-items: center;
  padding: 0 5px;
  font-weight: 600;
}

/* aside.cart only: WooCommerce also uses the class "cart" on the add-to-cart
   form and the cart-page table, and an unscoped .cart pushed both off-screen. */
aside.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  z-index: 100;
  background: var(--ground-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
aside.cart.on {
  transform: none;
}
.cart__top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(14, 14, 17, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.cart__top button {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  transition: 0.2s;
}
.cart__top button:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}
.cart__body {
  padding: 20px 18px 28px;
}
.cart__empty {
  color: var(--ink);
  margin: 0 0 18px;
}

.cart__lines,
.co__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart__line,
.co__line {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.cart__thumb {
  position: relative;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: var(--plate, #000);
  display: grid;
  place-items: center;
}
.cart__thumb[data-k="dark"] {
  background: radial-gradient(60% 60% at 50% 46%, #1e1e26, #000);
}
.cart__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart__thumb--none {
  background: repeating-linear-gradient(45deg, #131317, #131317 6px, #17171c 6px, #17171c 12px);
}
.cart__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
}
.cart__note {
  margin: 5px 0 0;
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1.7;
}
.cart__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.cart__qty button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: 0.2s;
}
.cart__qty button:hover {
  border-color: var(--ink-2);
  color: var(--ink);
}
.cart__qty > span {
  font-family: var(--f-mono);
  font-size: 0.828rem;
  min-width: 14px;
  text-align: center;
}
.cart__one {
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.cart__rm {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s;
}
.cart__rm:hover {
  color: var(--rust);
}
.cart__price {
  font-family: var(--f-mono);
  font-size: 0.943rem;
  white-space: nowrap;
}

.cart__sum {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 16px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.cart__sum dt {
  font-family: var(--f-mono);
  font-size: 0.724rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.cart__sum dt small {
  display: block;
  font-size: 0.9em;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-transform: none;
  margin-top: 3px;
}
.cart__sum dd {
  margin: 0;
  text-align: right;
  font-family: var(--f-mono);
  font-size: 0.92rem;
}
.cart__sum dd small {
  display: block;
  font-size: 0.68em;
  color: var(--ink);
  margin-top: 3px;
}
.cart__sum .is-total {
  font-size: 1.092rem;
  color: var(--butter);
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.cart__go {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}
.cart__fine {
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.9;
  text-align: center;
}

/* checkout page */
.co {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .co {
    grid-template-columns: 1fr;
  }
}
.co__panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
  padding: clamp(20px, 3vw, 30px);
}
.co__note {
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1.9;
}
.co__note--warn {
  color: var(--butter-dim);
}
.co__pay {
  margin-top: 22px;
}
.co__paywait {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.713rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
}
.co__demo {
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 0.644rem;
  letter-spacing: 0.09em;
  color: var(--ink);
  line-height: 1.9;
}
.co__done {
  max-width: 640px;
}

/* the demo PayPal button — deliberately PayPal-shaped so the flow reads true,
   but it is ours and it takes no money */
.ppbtn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 100px;
  background: #ffc439;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    filter 0.2s,
    opacity 0.2s;
}
.ppbtn:hover {
  filter: brightness(1.06);
}
.ppbtn:disabled {
  opacity: 0.75;
  cursor: default;
}
.ppbtn__pp {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 700;
  color: #003087;
  letter-spacing: -0.01em;
}
.ppbtn__pp i:last-child {
  color: #009cde;
  font-style: italic;
}

/* credibility strip + the owner-review placeholder */
.cred {
  display: grid;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.cred__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cred__item b {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--butter);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  min-width: 132px;
}
.cred__item span {
  font-size: 1.069rem;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 520px) {
  .cred__item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .cred__item b {
    min-width: 0;
  }
}

.fb {
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-soft);
}
.fb__head {
  font-family: var(--f-mono);
  font-size: 0.713rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--butter-dim);
  margin: 0 0 12px;
}

/* the standout owner quote — the one that sells the whole range */
.pull {
  margin: 0;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
  border-left: 3px solid var(--butter);
  background: rgba(242, 212, 121, 0.05);
  border-radius: 0 var(--r) var(--r) 0;
}
.pull p {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.pull p::before {
  content: "\201C";
  color: var(--butter);
  margin-right: 0.06em;
}
.pull p::after {
  content: "\201D";
  color: var(--butter);
}

.quote__head {
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--butter-dim);
  margin: 0 0 2px;
  line-height: 1.12;
}

/* ============================================================
   Checkout + cart type scale — everything here is 20% up on the
   site default. Scoped so the contact form and the rest of the
   site keep their original sizing.
   ============================================================ */
[data-checkout] .field label,
.cart .field label {
  font-size: 0.828rem;
}
[data-checkout] .field input,
[data-checkout] .field select,
[data-checkout] .field textarea {
  font-size: 1.2rem;
}

[data-checkout] .cart__name,
.cart .cart__name {
  font-size: 1.22rem;
}
[data-checkout] .cart__note,
.cart .cart__note {
  font-size: 0.805rem;
}
[data-checkout] .cart__price,
.cart .cart__price {
  font-size: 1.127rem;
}
[data-checkout] .cart__one,
.cart .cart__one,
[data-checkout] .cart__rm,
.cart .cart__rm {
  font-size: 0.759rem;
}
.cart .cart__qty > span {
  font-size: 0.989rem;
}
.cart .cart__fine {
  font-size: 0.759rem;
}
.cart .cart__empty {
  font-size: 1.2rem;
}

[data-checkout] .cart__sum dt,
.cart .cart__sum dt {
  font-size: 0.874rem;
}
[data-checkout] .cart__sum dd,
.cart .cart__sum dd {
  font-size: 1.104rem;
}
[data-checkout] .cart__sum .is-total,
.cart .cart__sum .is-total {
  font-size: 1.14rem;
}

[data-checkout] .co__note {
  font-size: 0.805rem;
}
[data-checkout] .co__demo {
  font-size: 0.77rem;
}
[data-checkout] .co__paywait {
  font-size: 0.851rem;
}
.cart .cart__top .mono {
  font-size: 0.943rem;
}

/* ============================================================
   Mobile pass — Sep 2026.
   Two problems the audit turned up on a 375px screen: micro-type
   bottoming out around 8.8px, and tap targets as short as 15px.
   The mono labels are part of the look, so the floor here is
   ~10.5px rather than a blanket size-up.
   ============================================================ */
@media (max-width: 620px) {
  /* --- readable floor for the mono micro-type --- */
  .pill {
    font-size: 0.736rem;
    padding: 5px 9px;
  }
  .line__new {
    font-size: 0.736rem;
    padding: 5px 10px;
  }
  .card__fam {
    font-size: 0.759rem;
  }
  .card__spec {
    font-size: 0.782rem;
  }
  .card__price.ask {
    font-size: 0.851rem;
  }
  .line__price.tbc {
    font-size: 0.782rem;
  }
  .line__strip span {
    font-size: 0.747rem;
    padding: 5px 10px;
  }
  .cartbtn__n {
    font-size: 0.805rem;
    min-width: 20px;
    height: 20px;
  }
  .fret__name,
  .fret__no {
    font-size: 0.874rem;
  }
  .cred__item span {
    font-size: 1rem;
  }
  .co__demo,
  .co__note {
    font-size: 0.862rem;
  }
  .cart__fine {
    font-size: 0.805rem;
  }
  /* these two are sentences, not labels — they were the worst offenders */
  .band__c span {
    font-size: 0.874rem;
    line-height: 1.65;
  }
  .hero__meta span {
    font-size: 0.782rem;
  }
  .ftr__bot {
    font-size: 0.759rem;
    line-height: 1.9;
  }
  .line__nophoto span {
    font-size: 0.759rem;
  }
  .count,
  .fb__head {
    font-size: 0.805rem;
  }
  .dimmer {
    font-size: 0.805rem;
  }
  /* the contact form is not inside [data-checkout], so it needs its own bump */
  .field label {
    font-size: 0.828rem;
  }
  .formnote {
    font-size: 0.805rem;
    line-height: 1.9;
  }
  /* bare text links in the contact side panel were 17px tall */
  aside ul a,
  .co__note a {
    display: inline-block;
    padding: 9px 0;
  }

  /* --- tap targets. 15px links and 16px buttons are not usable --- */
  .line__more {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 0.874rem;
  }
  .ftr a {
    display: inline-block;
    padding: 9px 0;
    font-size: 1.02rem;
  }
  .ftr ul {
    gap: 2px;
  }
  .burger {
    width: 44px;
    height: 42px;
  }
  .burger span {
    left: 13px;
    right: 13px;
  }
  .burger[aria-expanded="true"] span:nth-child(1) {
    top: 20px;
  }
  .burger[aria-expanded="true"] span:nth-child(2) {
    bottom: 20.5px;
  }
  .cartbtn {
    height: 42px;
    padding: 0 15px;
    font-size: 0.851rem;
  }
  .chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    font-size: 0.828rem;
    padding: 0 16px;
  }
  .fgroup > span {
    font-size: 0.736rem;
  }
  .cart__qty button {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
  .cart__rm {
    padding: 9px 0;
    font-size: 0.759rem;
  }
  .cart__top button {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  .mnav a {
    padding: 17px var(--gut);
  }
  .fsearch input {
    padding: 12px 16px 12px 38px;
    font-size: 0.897rem;
  }

  /* --- a little more room where things were tight --- */
  .cart__body {
    padding: 20px 16px 30px;
  }
  .cart__line,
  .co__line {
    grid-template-columns: 56px 1fr auto;
    gap: 11px;
  }
  .cart__thumb {
    width: 56px;
  }
  .co__panel {
    padding: 20px 16px;
  }
}

/* iOS zooms the page when a focused input is under 16px. Keep every
   field at or above it. */
@media (max-width: 900px) {
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  [data-checkout] .field input,
  [data-checkout] .field select,
  [data-checkout] .field textarea {
    font-size: 17px;
  }
}

/* ============================================================ commission form
   Its own page, not the cart. An in-stock instrument is a checkout; a custom
   build is a conversation that ends in a deposit invoice. */
.ord {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
.ord__panel {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 20px;
}

/* the four steps, so nobody thinks this is a checkout */
.ord__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin: 0 0 clamp(30px, 4vw, 48px);
}
.ord__step {
  background: var(--surface);
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ord__step b {
  font-family: var(--f-mono);
  font-size: 0.713rem;
  letter-spacing: 0.14em;
  color: var(--butter);
}
.ord__step span {
  font-size: 0.989rem;
  line-height: 1.45;
  color: var(--ink);
}

.ord__hint {
  font-family: var(--f-mono);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink);
  margin: 2px 0 0;
}
.ord__opts {
  display: grid;
  gap: 8px;
}
.ord__opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 11px 13px;
  transition: border-color 0.2s var(--ease);
}
.ord__opt:hover {
  border-color: #33333d;
}
.ord__opt input {
  margin: 1px 0 0;
  accent-color: var(--butter);
  width: 15px;
  height: 15px;
  flex: none;
}
/* .ord__opt is itself a <label> inside a .field, so it inherits the uppercase
   mono treatment meant for field captions. These are sentences, not captions. */
.ord__opt,
.ord__opt span {
  font-family: var(--f-text);
  font-size: 1.012rem;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* honeypot: off-screen rather than display:none, which some bots skip */
.ord__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ord__sumhd {
  font-family: var(--f-mono);
  font-size: 0.667rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.ord__empty {
  font-size: 1.012rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.ord__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 0 0 4px;
  font-size: 1.012rem;
}
.ord__spec dt {
  color: var(--ink);
}
.ord__spec dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
}
.ord__sumopts {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.ord__sumopts b {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.ord__sumopts span {
  display: block;
  font-size: 0.943rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 4px;
}
.ord__from {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 1.058rem;
  color: var(--ink);
}
.ord__from b {
  font-family: var(--f-mono);
  color: var(--butter);
  font-size: 1.05rem;
}
.ord__from small {
  display: block;
  margin-top: 5px;
  font-size: 0.862rem;
  line-height: 1.5;
  color: var(--ink);
}

.ord__terms {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
.ord__terms dt {
  color: var(--ink);
}
.ord__terms dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
}
.ord__fine {
  font-size: 0.874rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 14px 0 0;
}
.ord__demo {
  font-family: var(--f-mono);
  font-size: 0.747rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--butter-dim);
  background: rgba(242, 212, 121, 0.07);
  border: 1px solid rgba(242, 212, 121, 0.2);
  border-radius: 3px;
  padding: 11px 13px;
}
.ord__err {
  font-size: 0.989rem;
  color: #e07a5f;
  margin: 0;
  background: rgba(224, 122, 95, 0.09);
  border: 1px solid rgba(224, 122, 95, 0.25);
  border-radius: 3px;
  padding: 11px 13px;
}
.ord__done {
  padding: clamp(30px, 6vw, 64px) 0;
}

@media (max-width: 900px) {
  .ord {
    grid-template-columns: 1fr;
  }
  .ord__panel {
    position: static;
    order: -1;
  }
  .ord__steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .ord__steps {
    grid-template-columns: 1fr;
  }
  .ord__spec dd,
  .ord__terms dd {
    text-align: left;
  }
  /* hold the site-wide 10.2px mobile floor: the hint carries real content
     (price, body wood, pickups) and must stay readable. */
  .ord__step b {
    font-size: 0.782rem;
  }
  .ord__hint {
    font-size: 0.759rem;
    letter-spacing: 0.03em;
  }
  .ord__sumhd {
    font-size: 0.759rem;
  }
  .ord__sumopts b {
    font-size: 0.736rem;
  }
  .ord__demo {
    font-size: 0.805rem;
  }
  .ord__fine {
    font-size: 0.92rem;
  }
}

/* ------------------------------------------------ product with no photograph
   Real, confirmed stock that simply has not been shot yet. Same hatch the
   TeleVerse model line uses, so "not photographed" reads the same everywhere
   rather than looking like a broken image. */
.card__shot--none,
.drawer__shot--none {
  background: repeating-linear-gradient(45deg, #131317, #131317 10px, #17171c 10px, #17171c 20px);
}
.nophoto {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 22px;
  width: 100%;
  height: 100%;
  align-content: center;
}
.nophoto b {
  font-family: var(--f-display);
  font-size: 1.02rem;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.15;
  max-width: 16ch;
}
.nophoto span {
  font-family: var(--f-mono);
  font-size: 0.632rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 620px) {
  /* hold the site-wide 10.2px mobile type floor */
  .nophoto span {
    font-size: 0.759rem;
  }
  .nophoto b {
    font-size: 1.092rem;
  }
  .ftr h4 {
    font-size: 0.759rem;
  }
}

/* ---------- header fit after the 15% text increase ----------
   The larger nav, CTA and cart labels outgrew the header row: 1449px of
   content in a 1400px box, and off the screen entirely between 1140 and
   1440px. The location line goes first, then the nav gap tightens. */
@media (max-width: 1520px) {
  .brand__loc { display: none; }
}
@media (max-width: 1320px) {
  .nav { gap: 16px; }
  .nav a { letter-spacing: 0.05em; }
  .hdr__cta { padding-inline: 12px; letter-spacing: 0.05em; }
}

/* ---------- scale chart interaction ----------
   The chart compares lengths, so the motion is about the bars. They draw in
   once, shortest first, when the chart scrolls into view. Hovering or
   focusing a row isolates it: the rest dim, its number steps forward and its
   bar thickens and redraws. */
.scale {
  position: relative;
  cursor: default;
  outline: none;
  transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.scale__n {
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s var(--ease);
}
.scale__name {
  transition: color 0.3s var(--ease), letter-spacing 0.4s var(--ease);
}
.scale__bar {
  transition: height 0.3s var(--ease), background-color 0.3s var(--ease);
}
.scale__bar i {
  transform-origin: left center;
  transition: box-shadow 0.3s var(--ease);
}

/* draw in on arrival, staggered shortest to longest */
.scales.rv .scale__bar i { transform: scaleX(0); }
.scales.rv.in .scale__bar i {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s var(--ease);
}
.scales.rv.in .scale:nth-child(1) .scale__bar i { transition-delay: 0.15s; }
.scales.rv.in .scale:nth-child(2) .scale__bar i { transition-delay: 0.27s; }
.scales.rv.in .scale:nth-child(3) .scale__bar i { transition-delay: 0.39s; }
.scales.rv.in .scale:nth-child(4) .scale__bar i { transition-delay: 0.51s; }
.scales.rv.in .scale:nth-child(5) .scale__bar i { transition-delay: 0.63s; }

/* isolate one row */
.scales:hover .scale:not(:hover),
.scales:focus-within .scale:not(:focus-within) {
  opacity: 0.42;
}
.scale:hover,
.scale:focus-visible {
  background-color: rgba(242, 212, 121, 0.08);
}
.scale:focus-visible {
  box-shadow: inset 0 0 0 1px var(--butter);
}
.scale:hover .scale__n,
.scale:focus-visible .scale__n {
  transform: translateX(6px) scale(1.14);
}
.scale:hover .scale__name,
.scale:focus-visible .scale__name {
  color: var(--butter);
  letter-spacing: 0.2em;
}
.scale:hover .scale__bar,
.scale:focus-visible .scale__bar {
  height: 6px;
}
.scale:hover .scale__bar i,
.scale:focus-visible .scale__bar i {
  animation: scale-redraw 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(242, 212, 121, 0.55);
}
@keyframes scale-redraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .scales.rv .scale__bar i { transform: none; }
  .scale:hover .scale__n, .scale:focus-visible .scale__n { transform: none; }
  .scale:hover .scale__bar i, .scale:focus-visible .scale__bar i { animation: none; }
}

/* A cut-out photo composited on the page's own ground colour: no frame, so
   the instrument sits on the page rather than in a box. */
.split__media--bleed img {
  border: 0;
  border-radius: 0;
  height: auto;
  aspect-ratio: 10 / 7;
  /* the neck is cut in the source photo; fade that edge into the page so it
     dissolves rather than stopping on a hard line */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%);
  mask-image: linear-gradient(to top, transparent 0%, #000 30%);
}

/* ---------- featured product overlay ----------
   A featured product carries the same details as its catalogue card, laid
   over the photo: series and stock across the top, name, spec and price at
   the bottom on a gradient so they read on any photo. The yellow hang tag
   stays in the corner. Shipped photos with no product keep just the tag. */
.upcoming__slide--product {
  padding: 0;
  border: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.upcoming__top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
}
.upcoming__top .pill {
  position: static;
}
.upcoming__slide--product::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.95) 0%, rgba(6, 6, 8, 0.75) 45%, rgba(6, 6, 8, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.upcoming__info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 64px;
  display: grid;
  gap: 6px;
  z-index: 2;
}
.upcoming__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.upcoming__spec {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.upcoming__price {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  color: var(--butter);
  font-variant-numeric: tabular-nums;
}
.upcoming__slide--product .upcoming__tag {
  z-index: 2;
}
.upcoming__slide--product:hover .upcoming__info {
  transform: translateY(-4px);
}
.upcoming__info {
  transition: transform 0.35s var(--ease);
}

/* ======================================================================
   Motion pass: every page animates the same way
   ====================================================================== */

/* Photos enter with a slow settle rather than a slide. */
.rv--media {
  transform: scale(1.03);
  clip-path: inset(6% 0 0 0);
  transition:
    opacity 0.9s var(--ease),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv--media.in {
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Split photos: a slow push-in on hover. */
.split__media {
  overflow: hidden;
  border-radius: var(--r);
}
.split__media img {
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .split__media:hover img {
    transform: scale(1.04);
    filter: brightness(1.05);
  }
}

/* Spec rows, the feature band and credentials respond to the pointer. */
.speclist li,
.cred__item {
  transition: background-color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.speclist li:hover,
.cred__item:hover {
  background-color: rgba(242, 212, 121, 0.05);
  padding-left: 10px;
}
.speclist li b,
.cred__item b {
  transition: color 0.3s var(--ease);
}
.speclist li:hover b,
.cred__item:hover b {
  color: var(--butter);
}
.band__c {
  transition: transform 0.35s var(--ease);
}
.band__c:hover {
  transform: translateY(-3px);
}
.band__c b {
  transition: color 0.3s var(--ease);
}
.band__c:hover b {
  color: var(--butter);
}

/* Form fields: focus is a visible, animated state. */
.field input,
.field select,
.field textarea {
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--butter);
  box-shadow: 0 0 0 3px rgba(242, 212, 121, 0.14);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv--media { transform: none; clip-path: none; }
  .split__media:hover img, .band__c:hover { transform: none; }
  .speclist li:hover, .cred__item:hover { padding-left: 0; }
}

/* ======================================================================
   WooCommerce pages in the theme's own language
   (product, related products, shop, cart, checkout)
   ====================================================================== */

.woocommerce-breadcrumb {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 26px;
}
.woocommerce-breadcrumb a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.woocommerce-breadcrumb a:hover { color: var(--butter); }

/* Every WooCommerce button becomes a theme button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover {
  border-color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  background: var(--butter);
  border-color: var(--butter);
  color: #0c0b08;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
  background: #f8df8f;
  border-color: #f8df8f;
  color: #0c0b08;
}
.woocommerce a.button.loading { opacity: 0.6; }

/* Prices: butter mono, never WooCommerce's olive. */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce .woocommerce-Price-amount {
  font-family: var(--f-mono);
  color: var(--butter);
  font-variant-numeric: tabular-nums;
}
.woocommerce .price del,
.woocommerce .price del .amount { color: var(--ink); opacity: 1; }
.woocommerce .price ins { text-decoration: none; }
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 3px;
  background: var(--butter);
  color: #0c0b08;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- single product ---------- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  position: relative;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
}
.woocommerce-product-gallery {
  position: relative;
  background: #000;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 8px;
  margin: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  opacity: 0.55;
  border-radius: 2px;
  transition: opacity 0.25s var(--ease);
  cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  background: rgba(8, 8, 10, 0.7);
  border: 1px solid var(--line);
}
.woocommerce div.product .product_title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 18px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.6rem;
  margin: 0 0 22px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
  margin-bottom: 26px;
}
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 26px;
  padding: 22px 0;
  border-block: 1px solid var(--line-soft);
}
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { display: none; }
.woocommerce .quantity .qty {
  width: 72px;
  min-height: 46px;
  padding: 0 8px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 46px;
  font-size: 0.9rem;
}
.woocommerce div.product .stock {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.woocommerce div.product .stock.out-of-stock { color: var(--ink); }
.product_meta {
  display: grid;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.product_meta a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.product_meta a:hover { color: var(--butter); }

/* tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: clamp(30px, 5vw, 60px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
  overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 16px 18px 14px;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: none; /* WooCommerce's own stylesheet fills the active tab white otherwise */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--butter);
  background: rgba(242, 212, 121, 0.12);
  border-bottom-color: var(--butter);
}
.woocommerce div.product .woocommerce-Tabs-panel {
  max-width: 72ch;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.65;
  animation: wc-panel-in 0.45s var(--ease);
}
@keyframes wc-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.woocommerce div.product .woocommerce-Tabs-panel h2 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.woocommerce div.product .woocommerce-Tabs-panel h3 {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 26px 0 10px;
}
.woocommerce div.product .woocommerce-Tabs-panel ul { padding-left: 1.1em; }
.woocommerce div.product .woocommerce-Tabs-panel li { margin-bottom: 6px; }
.woocommerce table.shop_attributes {
  border: 0;
  border-top: 1px solid var(--line-soft);
  width: 100%;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none !important;
  font-style: normal;
}
.woocommerce table.shop_attributes th {
  width: 160px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}

/* ---------- product grids: related, upsells, shop ---------- */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce-products-header__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-transform: uppercase;
  color: var(--ink);
  margin: clamp(40px, 6vw, 72px) 0 22px;
}
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  }
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 16px;
  background: #000;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 16px;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s var(--ease);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--butter); }
.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 16px;
  margin: auto 0 14px;
  font-size: 1rem;
}
.woocommerce ul.products li.product .button {
  margin: 0 16px;
  align-self: flex-start;
  padding: 11px 16px;
  font-size: 0.76rem;
}
.woocommerce ul.products li.product .added_to_cart {
  margin: 8px 16px 0;
  padding: 0;
  border: 0;
  font-size: 0.74rem;
  color: var(--butter);
}
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce .woocommerce-result-count {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 18px;
}
.woocommerce .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  font: inherit;
  font-size: 1rem;
  min-height: 46px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--butter);
  box-shadow: 0 0 0 3px rgba(242, 212, 121, 0.14);
  outline: none;
}
.woocommerce form .form-row label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.woocommerce .select2-container .select2-selection--single {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 46px;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 44px; }
.select2-dropdown { background: var(--surface); border-color: var(--line); color: var(--ink); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--f-mono);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--butter); color: #0c0b08; border-color: var(--butter); }

/* ---------- cart + checkout ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  color: var(--ink);
}
.woocommerce table.shop_table th {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-color: var(--line-soft);
}
.woocommerce table.shop_table td {
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
}
.woocommerce table.shop_table td.product-name a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  transition: color 0.2s var(--ease);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--butter); }
.woocommerce table.cart img { width: 72px; border-radius: 3px; background: #000; }
.woocommerce a.remove {
  color: var(--ink) !important;
  border: 1px solid var(--line);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.woocommerce a.remove:hover { background: var(--rust) !important; color: var(--ink) !important; border-color: var(--rust); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3,
#order_review_heading {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.woocommerce-checkout #payment {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--surface-2);
  color: var(--ink);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface-2); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--line-soft); }
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-top-color: var(--butter);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r);
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--butter); }