/*
 * Storefront V2 — Industrial Emerald.
 *
 * Ported from the AI Studio prototype in update-template/. Hand-written rather
 * than Tailwind: public_html has a vite.config.js but no node_modules and no
 * asset build in the deploy path, so a compile step would mean every future
 * edit needs a build on a server that has never run one.
 *
 * Scoped under .v2 so it cannot reach the live theme.
 */

.v2 {
  --ink: #18181b;
  --ink-soft: #52525b;
  --ink-faint: #a1a1aa;
  --line: #e4e4e7;
  --line-soft: #f4f4f5;
  --paper: #faf9f6;
  --card: #ffffff;
  --brand: #059669;
  --brand-lit: #10b981;
  --brand-ink: #047857;
  --brand-wash: #ecfdf5;
  --night: #09090b;

  --radius: 14px;
  --radius-lg: 28px;
  --tap: 44px;

  background: var(--paper);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden; /* the prototype overflowed 204px at 375px; never again */
}

.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 img { max-width: 100%; }
.v2 h1, .v2 h2, .v2 h3 { margin: 0; letter-spacing: -0.025em; }
.v2 p { margin: 0; }

.v2-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

.v2-icon { width: 16px; height: 16px; flex: none; stroke-width: 2.2; }
.v2-icon-lg { width: 20px; height: 20px; flex: none; stroke-width: 2.2; }

/* ============ top bar ============ */

.v2-bar { background: var(--night); color: #d4d4d8; font-size: 12px; }
.v2-bar .v2-wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 22px; min-height: var(--tap);
}
.v2-bar a, .v2-bar .v2-bar-item {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--tap); color: inherit; text-decoration: none;
}
.v2-bar a:hover { color: var(--brand-lit); }
.v2-bar .v2-bar-end { margin-left: auto; }

/* ============ header ============ */

.v2-head { background: var(--card); border-bottom: 1px solid var(--line); }
.v2-head .v2-wrap {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 16px; flex-wrap: wrap;
}
.v2-brand {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap);
  text-decoration: none; color: inherit; min-width: 0;
}
.v2-brand img { height: 44px; width: auto; flex: none; }
.v2-brand-name { display: block; font-weight: 800; font-size: 20px; line-height: 1.15; }
.v2-brand-name em { font-style: normal; color: var(--brand); }
.v2-brand-sub { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }

.v2-search { flex: 1 1 300px; min-width: 0; position: relative; }
.v2-search input {
  width: 100%; min-height: var(--tap); padding: 0 14px 0 40px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--line-soft); font: inherit; font-size: 14px; color: var(--ink);
}
.v2-search input:focus {
  outline: none; background: var(--card);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash);
}
.v2-search .v2-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.v2-head-actions { display: flex; align-items: center; gap: 10px; }

/* The off-canvas menu chrome and the bottom tab bar exist only on mobile; they
   are hidden here and switched on in the <=1024px block below. The CTA is an
   <a> inside .v2-nav, so it needs the extra .v2-nav to beat `.v2-nav a`'s
   inline-flex - otherwise it leaks into the desktop nav bar. */
.v2-nav-head, .v2-nav-overlay, .v2-tabbar { display: none; }
.v2-nav .v2-nav-cta { display: none; }

/* ============ nav ============ */

.v2-nav { background: var(--ink); }
/* nowrap so the bar never breaks into a ragged second line on desktop; below
   1024px it becomes the drawer instead. */
.v2-nav .v2-wrap { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.v2-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  color: #d4d4d8; text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.v2-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.v2-nav a.is-on { color: var(--brand-lit); background: rgba(255, 255, 255, .06); }
.v2-nav .v2-nav-end {
  margin-left: auto; color: var(--ink-faint); font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px;
  min-height: var(--tap);
}

/* ---- Mobile nav drawer (<=900px) ------------------------------------------
   The horizontal nav wrapped into four lines on a phone. Here it collapses to
   zero height and the hamburger reveals it as a vertical drawer; the
   "All categories" mega-menu opens inline (accordion), not as a floating panel. */
/* The decorative "Narayanganj, Bangladesh" tag needs room the links need first;
   show it only on wide screens (it is also in the top bar and footer). */
@media (max-width: 1200px) { .v2-nav .v2-nav-end { display: none; } }

@media (max-width: 1024px) {
  /* The two header buttons move to the bottom bar (Basket) and the menu
     (Place custom order); the mobile header is just the brand + search. */
  .v2-head-actions { display: none; }

  /* ---- Off-canvas menu ---- */
  .v2-nav {
    position: fixed; top: 0; left: 0; z-index: 1200;
    width: 84%; max-width: 340px; height: 100vh; height: 100dvh;
    background: var(--ink);
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 8px 0 40px rgba(0, 0, 0, .4);
  }
  body.v2-nav-open { overflow: hidden; }
  body.v2-nav-open .v2-nav { transform: translateX(0); }
  body.v2-nav-open .v2-nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 1190;
    background: rgba(0, 0, 0, .5);
  }

  .v2-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .v2-nav-head-title { color: #fff; font-weight: 800; font-size: 15px; }
  .v2-nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  }
  .v2-nav-close svg { width: 20px; height: 20px; }

  .v2-nav .v2-nav-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 12px 14px 6px; min-height: 46px; padding: 0 16px;
    background: var(--brand); color: #fff; border-radius: 10px;
    font-weight: 700; font-size: 14px; text-decoration: none;
  }
  .v2-nav .v2-nav-cta:hover { background: var(--brand); color: #fff; }
  .v2-nav-cta svg { width: 18px; height: 18px; }

  .v2-nav .v2-wrap {
    flex-direction: column; align-items: stretch; gap: 0;
    flex-wrap: nowrap; padding: 4px 0 20px;
  }
  .v2-nav > .v2-wrap > a,
  .v2-nav .v2-drop-btn {
    width: 100%; justify-content: flex-start;
    min-height: 48px; padding: 0 18px; font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .v2-nav > .v2-wrap > a:first-child { border-top: 0; }

  .v2-nav .v2-drop { position: static; width: 100%; }
  .v2-nav .v2-drop-btn { background: transparent; color: #d4d4d8; border-radius: 0; }
  .v2-nav .v2-drop-btn .v2-caret { margin-left: auto; }

  /* "All categories" opens inline (accordion), not as a floating overlay. */
  .v2-nav .v2-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; max-width: none;
    border: 0; border-radius: 0; box-shadow: none;
    background: rgba(0, 0, 0, .22);
  }
  .v2-nav .v2-drop.is-open .v2-drop-menu { display: block; }
  .v2-nav .v2-drop-cols { columns: 1; padding: 6px 8px; max-height: none; overflow: visible; }
  .v2-nav .v2-drop-head { color: #f0f0f0; }
  .v2-nav .v2-drop-head-plain { color: #bdbdbd; }
  .v2-nav a.v2-drop-head:hover,
  .v2-nav .v2-drop-sub a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .v2-nav .v2-drop-sub a { color: #cfcfcf; }
  .v2-nav .v2-drop-name { color: inherit; }
  .v2-nav .v2-drop-all {
    background: rgba(255, 255, 255, .06); color: var(--brand-lit);
    border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0;
  }

  /* ---- Bottom tab bar (app-style, like the classic theme) ---- */
  .v2-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .v2-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 6px 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--ink-soft); text-decoration: none;
    font-size: 10px; font-weight: 600; letter-spacing: .02em;
  }
  .v2-tab svg { width: 22px; height: 22px; }
  .v2-tab:active { background: var(--line-soft); }
  .v2-tab.is-on { color: var(--brand-ink); }
  .v2-tab-ico { position: relative; display: inline-flex; }
  .v2-tab-badge {
    position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }

  /* Keep content and footer clear of the fixed bar. */
  body.v2 { padding-bottom: 60px; }
}

/* ============ buttons ============ */

.v2-btn {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
  background: var(--brand); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.v2-btn:hover { background: var(--brand-ink); color: #fff; }
.v2-btn-dark { background: var(--ink); }
.v2-btn-dark:hover { background: #000; }
.v2-btn-light { background: var(--card); color: var(--ink); border-color: var(--line); }
.v2-btn-light:hover { background: var(--line-soft); color: var(--ink); }
.v2-btn-ghost {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .18);
}
.v2-btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.v2-btn-sm { min-height: var(--tap); padding: 0 14px; font-size: 12px; border-radius: 9px; }

.v2-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(255, 255, 255, .22); border-radius: 999px;
  font-size: 11px; font-weight: 800;
}

/* ============ hero ============ */

.v2-hero {
  position: relative; margin: 28px 0 44px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--night); border: 1px solid #27272a;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
}
/* The slider lives in the same box the single image used to occupy, so the
   veil and the text column are unchanged. */
.v2-hero-slides { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; }
.v2-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Crop from the right. Several of these banners were drawn for the old
     theme's slider, which showed them whole, so they carry their own headline
     set on the left of the frame - centred cropping put that text directly
     behind ours. Favouring the right edge crops it out and frames the
     photographs on their subject rather than their empty side. */
  object-position: right center;
  /* Shown as taken. It used to sit at .55 over a black panel with a luminosity
     blend, so the right of the frame stayed grey and dim even where the veil
     had faded out completely - the veil was getting blamed for darkness it was
     not causing. The gradient beside it does the blending into the text column;
     the picture itself does not need dimming to make that work. */
  opacity: 0; transition: opacity 1.1s ease-in-out;
}
.v2-hero-img.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* No crossfade, and the script leaves the first slide up. */
  .v2-hero-img { transition: none; }
}
.v2-hero-veil {
  position: absolute; inset: 0;
  /* Solid black across the text column, then out entirely by just past the
     halfway mark - the right of the frame is left clear so the photograph
     reads as a photograph. It used to carry .25 black all the way to the far
     edge, which greyed the whole image without ever helping legibility.
     Opaque until 40% also hides the seam where the image starts at 38%. */
  background: linear-gradient(to right,
    var(--night) 0%,
    var(--night) 40%,
    rgba(9, 9, 11, 0) 58%);
}
.v2-hero-in { position: relative; padding: 52px 40px; max-width: 720px; }
.v2-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 20px;
  background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3);
  color: var(--brand-lit); border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.v2-hero h1 {
  font-size: 46px; font-weight: 800; line-height: 1.12;
  color: #fff; margin-bottom: 18px;
  /* The copy column runs past where the veil has faded out, so its last words
     sit over the picture. Invisible against the black on the left; the thing
     that keeps them readable when a slide happens to be bright there. */
  text-shadow: 0 1px 12px rgba(9, 9, 11, .55);
}
.v2-hero h1 em { font-style: normal; color: var(--brand-lit); }
.v2-hero-lead {
  text-shadow: 0 1px 10px rgba(9, 9, 11, .6);
  color: #d4d4d8; font-size: 14px; line-height: 1.65;
  max-width: 620px; margin-bottom: 28px;
}
.v2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 34px; padding-top: 28px; border-top: 1px solid #27272a;
}
.v2-stat-n { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.v2-stat-n.is-brand { color: var(--brand-lit); }
.v2-stat-l { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

/* ============ trust strip ============ */

.v2-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 44px;
}
.v2-trust-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.v2-trust-ico {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-wash); color: var(--brand); border-radius: 11px;
}
.v2-trust-t { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.v2-trust-s { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }

/* ============ section heads ============ */

.v2-sec { margin-bottom: 44px; }
.v2-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.v2-sec-head h2 { font-size: 26px; font-weight: 800; }
.v2-sec-head p { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.v2-link {
  color: var(--brand-ink); font-size: 12px; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 6px; min-height: var(--tap);
}
.v2-link:hover { color: var(--brand); }

/* ============ category tiles ============ */

.v2-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.v2-cat {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; text-decoration: none;
  color: inherit; min-height: 100px; transition: border-color .15s ease, transform .15s ease;
}
.v2-cat:hover { border-color: var(--brand); transform: translateY(-2px); color: inherit; }
.v2-cat.is-on { border-color: var(--brand); background: var(--brand-wash); }
.v2-cat-n {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-ink);
}
.v2-cat-t { display: block; font-size: 14px; font-weight: 700; margin-top: 20px; line-height: 1.25; }

/* ============ catalogue toolbar ============ */

.v2-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.v2-panel-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.v2-panel h2 { font-size: 22px; font-weight: 800; }
.v2-panel-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.v2-count {
  display: inline-block; margin-left: 10px; padding: 3px 10px;
  background: var(--brand-wash); color: var(--brand-ink);
  border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle;
}
.v2-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.v2-tools input, .v2-tools select {
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--ink);
}
.v2-tools input { flex: 1 1 190px; min-width: 0; }

.v2-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--line-soft); border-radius: 10px;
}
.v2-toggle a {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink-soft); text-decoration: none;
}
.v2-toggle a.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v2-chip-link {
  /* flex: none, or a wrapped row squeezes the short labels narrower than a
     thumb - "Vinyl" was coming out 29px wide. */
  display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.v2-chip-link:hover { border-color: var(--brand); color: var(--brand-ink); }
.v2-chip-link.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.v2-field-narrow { max-width: 190px; }

/* ---- checkout ----------------------------------------------------------- */
.v2-checkout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; margin-bottom: 40px; }
.v2-checkout-main { display: grid; gap: 20px; min-width: 0; }
.v2-checkout-side { display: grid; gap: 20px; position: sticky; top: 20px; }
@media (max-width: 900px) {
  .v2-checkout { grid-template-columns: 1fr; }
  .v2-checkout-side { position: static; }
}

.v2-panel-h {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
}

.v2-co-line {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.v2-co-line:last-child { border-bottom: 0; }
.v2-co-line img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: var(--line-soft); }
.v2-co-line-main { flex: 1 1 auto; min-width: 0; }
.v2-co-line-n { display: block; font-size: 13px; font-weight: 600; }
.v2-co-line-u { display: block; font-size: 11px; color: var(--ink-faint); }
.v2-co-line-q { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.v2-co-line-t { font-size: 13px; font-weight: 700; white-space: nowrap; }

.v2-choices { display: grid; gap: 8px; }
.v2-choice {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
  transition: border-color .15s ease, background .15s ease;
}
.v2-choice:hover { border-color: var(--ink-faint); }
.v2-choice input { grid-row: span 2; accent-color: var(--brand); width: 16px; height: 16px; }
.v2-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.v2-choice-t { font-size: 13px; font-weight: 700; }
.v2-choice-s { font-size: 11px; color: var(--ink-faint); }

.v2-tot-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.v2-tot-row span { color: var(--ink-soft); }
.v2-tot-grand {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px;
  font-size: 16px;
}
.v2-tot-grand span { color: var(--ink); font-weight: 700; }
.v2-tot-grand b { font-weight: 800; }
.v2-panel-total .v2-btn-buy { width: 100%; margin-top: 14px; }

/* ---- buy now ------------------------------------------------------------ */
.v2-buy-now { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.v2-btn-buy { width: 100%; justify-content: center; background: var(--ink); border-color: var(--ink); }
.v2-btn-buy:hover { background: #000; border-color: #000; }
.v2-buy-now-note { font-size: 11px; color: var(--ink-faint); }

/* ---- attachments -------------------------------------------------------- */
.v2-attach {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 18px; cursor: pointer; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--line-soft); transition: border-color .15s ease, background .15s ease;
}
.v2-attach:hover, .v2-attach.is-over { border-color: var(--brand); background: var(--brand-wash); }
.v2-attach input[type="file"] {
  /* Off-screen rather than display:none, so it stays focusable by keyboard and
     the label still reads as the control. */
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* .v2-field label span is the required-asterisk red, and these spans sit inside
   a label - so they inherit it and the whole picker came out red. Reasserted
   rather than restructured: the spans are what make the box a single click
   target. */
.v2-field .v2-attach .v2-attach-ico { color: var(--brand-ink); }
.v2-attach-ico svg { width: 22px; height: 22px; }
.v2-field .v2-attach .v2-attach-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.v2-field .v2-attach .v2-attach-s { font-size: 11px; color: var(--ink-faint); }

.v2-attach-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.v2-attach-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 12px;
}
.v2-attach-list .n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-attach-list .s { color: var(--ink-faint); white-space: nowrap; }
.v2-attach-list li.is-bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.v2-attach-list li.is-bad .s { color: #b91c1c; }
.v2-hint-bad { color: #b91c1c; font-weight: 600; }

/* ---- category rail ------------------------------------------------------- */
/* The blog index still uses a plain wrapping .v2-chips row; only the catalogue,
   with thirty-five categories, needs to scroll. Hence a modifier rather than a
   change to .v2-chips itself. */
.v2-chiprail { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.v2-chips-rail {
  flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
  margin-top: 0; flex: 1 1 auto;
  /* The arrows are the affordance; a scrollbar under the chips just adds noise.
     Swiping still works on touch, where there is no visible bar anyway. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.v2-chips-rail::-webkit-scrollbar { display: none; }

/* "All" sits outside the scrolling strip, ahead of the back arrow, so it is
   always reachable without a sticky overlay or a mask. */
.v2-chip-all { flex: 0 0 auto; }

.v2-chiprail-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.v2-chiprail-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.v2-chiprail-btn svg { width: 18px; height: 18px; }
.v2-chiprail-btn[data-chip-scroll="-1"] svg { transform: rotate(180deg); }
/* Disabled rather than removed: the row must not resize as you reach an end. */
.v2-chiprail-btn:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--ink-faint); }

/* ============ product grid ============ */

.v2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.v2-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v2-card:hover { border-color: var(--brand); box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .35); }
.v2-card-img {
  display: block; aspect-ratio: 1 / 1; background: var(--line-soft);
  padding: 14px; object-fit: contain; width: 100%;
}
.v2-card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.v2-card-cat {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brand-ink);
}
.v2-card-name {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 44px;
}
.v2-card-name:hover { color: var(--brand); }
.v2-card-price { font-size: 12px; color: var(--ink-soft); margin-top: auto; }
.v2-card-price b { font-size: 16px; color: var(--ink); font-weight: 800; }
.v2-card-foot { padding: 0 14px 14px; }
.v2-card-foot .v2-btn { width: 100%; }

/* ============ table ============ */

.v2-table-shell {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.v2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 980px; }
.v2-table thead th {
  background: var(--ink); color: #fff; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 13px 14px; white-space: nowrap;
}
.v2-table td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.v2-table tbody tr:hover { background: #fafafa; }

.v2-item { display: flex; align-items: center; gap: 12px; }
.v2-thumb {
  width: 44px; height: 44px; flex: none; object-fit: contain;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 2px;
}
.v2-item-name {
  font-weight: 700; color: var(--ink); text-decoration: none;
  display: block; line-height: 1.3;
  /* Padded to the 44px minimum. A dense table tempts you to make row links
     small; on a phone they are the only thing anyone taps. */
  padding: 8px 0 4px;
}
.v2-item-name:hover { color: var(--brand); }
.v2-sku { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-faint); }

.v2-chip {
  display: inline-block; padding: 3px 8px; background: var(--line-soft);
  border-radius: 6px; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap;
}
.v2-unit { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; }
.v2-price { font-weight: 700; white-space: nowrap; }
.v2-price-was {
  display: block; font-weight: 500; font-size: 11px;
  color: var(--ink-faint); text-decoration: line-through;
}

.v2-ladder { display: flex; flex-direction: column; gap: 2px; min-width: 152px; }
.v2-rung { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.v2-rung-qty { font-size: 11px; color: var(--ink-soft); }
.v2-rung-price { font-size: 12px; font-weight: 700; color: var(--brand-ink); }
.v2-none { font-size: 12px; color: var(--ink-faint); }
.v2-moq { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* ============ sourcing CTA ============ */

.v2-cta {
  background: var(--night); border: 1px solid #27272a;
  border-radius: var(--radius-lg); padding: 46px 40px; margin-bottom: 44px;
}
.v2-cta h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 14px; max-width: 720px; line-height: 1.2; }
.v2-cta p { color: #a1a1aa; font-size: 13px; line-height: 1.7; max-width: 660px; margin-bottom: 26px; }
.v2-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============ footer ============ */

.v2-foot { background: var(--night); color: #a1a1aa; margin-top: 60px; padding: 52px 0 0; }
.v2-foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 34px; }
.v2-foot h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.v2-foot h4 {
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 10px;
}
.v2-foot p { font-size: 13px; line-height: 1.75; }
.v2-foot ul { list-style: none; margin: 0; padding: 0; }
/* Column links only. Scoped to the lists, because making every footer link
   block-level also broke the inline legal row - the separators between them
   ended up on their own lines. */
.v2-foot ul a {
  color: #a1a1aa; text-decoration: none; font-size: 13px;
  display: flex; align-items: center; min-height: var(--tap);
}
.v2-foot a { color: #a1a1aa; text-decoration: none; }
.v2-foot a:hover { color: var(--brand-lit); }

.v2-foot-base {
  border-top: 1px solid #27272a; padding: 14px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 24px; flex-wrap: wrap; font-size: 12px;
}
.v2-foot-copy { flex: none; }
.v2-foot-note { flex: none; margin-left: auto; color: #71717a; }

/* Separators drawn in CSS, so they belong to the list rather than floating
   between two links as loose text. */
.v2-foot-legal {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.v2-foot-legal li { display: flex; align-items: center; }
.v2-foot-legal li + li::before {
  content: '·'; color: #52525b; padding: 0 2px;
}
.v2-foot-legal a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 10px; font-size: 12px;
}

/* ============ misc ============ */

.v2-empty { padding: 56px 16px; text-align: center; color: var(--ink-soft); }
.v2-pager { padding: 22px 0; }
.v2-pager .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.v2-pager .page-link {
  min-height: var(--tap); min-width: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px;
}
.v2-pager .active .page-link { background: var(--ink); color: #fff; border-color: var(--ink); }
.v2-pager .disabled .page-link { color: var(--ink-faint); }

.v2-flag { background: #422006; color: #fed7aa; font-size: 12px; text-align: center; padding: 9px 16px; }

/* ============ responsive ============ */

@media (max-width: 1100px) {
  .v2-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-hero h1 { font-size: 38px; }
}

@media (max-width: 860px) {
  .v2-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-foot-cols { grid-template-columns: 1fr 1fr; }
  .v2-hero-in { padding: 40px 26px; }
  .v2-hero h1 { font-size: 31px; }
  /* On a phone the image spans the whole banner at full strength - the copy
     sits on top of the slideshow. The side-gradient (built to blend into a
     left-hand text column that only exists on desktop) is replaced by a flat,
     light scrim just deep enough to keep white text readable over any slide. */
  .v2-hero-slides { width: 100%; }
  .v2-hero-img { width: 100%; opacity: 1; object-position: center; }
  .v2-hero-veil { background: rgba(9, 9, 11, .45); }
  .v2-hero h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
  .v2-hero-lead { color: #ececed; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
  .v2-cta { padding: 34px 26px; }
  .v2-cta h2 { font-size: 25px; }
}

@media (max-width: 560px) {
  /* Stack the footer bar. In a column flex container margin-left:auto still
     pushes the note to the right edge, which reads as misaligned once the row
     has become a stack. */
  .v2-foot-base { flex-direction: column; align-items: flex-start; gap: 4px; }
  .v2-foot-note { margin-left: 0; }
  /* Cancel the link padding so the legal row lines up with the copyright
     above it rather than sitting ten pixels proud of it. */
  .v2-foot-legal { margin-left: -10px; }

  /* The top bar stacked into four 44px rows - 176px of chrome before the hero.
     Keep the phone number and the sign-in link; the address and email are in
     the footer already.

     Sign-in must NOT be hidden here: it carries .v2-bar-end for its desktop
     alignment, and hiding that class wholesale took the only route into the
     account off every phone. */
  .v2-bar .v2-bar-item { display: none; }
  .v2-bar a[href^="mailto:"] { display: none; }
  /* Phone + Sign in only, on one line. "Request a sample" pushed the row past
     the width of the narrower phones and wrapped it to two; it is still in the
     hero and the Samples menu item. nowrap guards against any residual wrap. */
  .v2-bar .v2-bar-sample { display: none; }
  .v2-bar .v2-wrap { gap: 0 14px; flex-wrap: nowrap; }
  .v2-nav a { padding: 0 12px; font-size: 12px; }
  .v2-nav .v2-nav-end { display: none; }

  .v2-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-brand img { height: 36px; }
  .v2-brand-name { font-size: 17px; }
  .v2-brand-sub { display: none; }
  .v2-head .v2-wrap { gap: 12px; }
  .v2-search { flex: 1 1 100%; order: 3; }
  .v2-stats { gap: 14px; }
  .v2-stat-n { font-size: 20px; }
  .v2-hero { border-radius: 20px; margin: 18px 0 30px; }
  .v2-hero-in { padding: 30px 20px; }
  .v2-hero h1 { font-size: 26px; }
  .v2-cta { border-radius: 20px; }
  .v2-foot-cols { grid-template-columns: 1fr; gap: 26px; }
  .v2-sec-head h2, .v2-panel h2 { font-size: 20px; }
}

/* ============ breadcrumbs ============ */

.v2-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 18px 0 6px; font-size: 12px; color: var(--ink-faint);
}
.v2-crumbs a {
  color: var(--ink-soft); text-decoration: none;
  /* Full tap height even in a breadcrumb - it is a real navigation control on
     a phone, not decoration. Negative margin keeps the visual row compact. */
  display: inline-flex; align-items: center;
  min-height: var(--tap); min-width: var(--tap); justify-content: center;
  padding: 0 4px; margin: -6px -4px;
}
.v2-crumbs a:hover { color: var(--brand-ink); }
.v2-crumb-now { color: var(--ink); font-weight: 600; }

/* ============ product detail ============ */

.v2-detail {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 36px; margin: 8px 0 44px; align-items: start;
}
.v2-shot {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.v2-shot {
  position: relative; cursor: zoom-in; width: 100%;
  border: 1px solid var(--line); font: inherit; color: inherit;
}
.v2-shot img { max-height: 100%; object-fit: contain; }
/* Only a hint that the picture does something; the cursor carries most of it. */
.v2-shot-zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(9, 9, 11, .55); color: #fff;
  opacity: 0; transition: opacity .15s ease;
}
.v2-shot:hover .v2-shot-zoom, .v2-shot:focus-visible .v2-shot-zoom { opacity: 1; }
.v2-shot-zoom svg { width: 16px; height: 16px; }

/* ---- image viewer ------------------------------------------------------- */
.v2-lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 16px;
  background: rgba(9, 9, 11, .92);
}
.v2-lightbox[hidden] { display: none; }
.v2-lb-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
.v2-lb-stage img {
  max-width: 100%; max-height: calc(100vh - 130px);
  object-fit: contain; border-radius: 10px; background: #fff;
}
.v2-lb-count { color: #d4d4d8; font-size: 12px; letter-spacing: .04em; }

.v2-lb-close, .v2-lb-nav {
  position: absolute; z-index: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.v2-lb-close:hover, .v2-lb-nav:hover {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45);
}
.v2-lb-close { top: 14px; right: 16px; width: 42px; height: 42px; font-size: 26px; line-height: 1; }
.v2-lb-nav { top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); }
.v2-lb-nav svg { width: 20px; height: 20px; }
.v2-lb-prev { left: 16px; }
.v2-lb-prev svg { transform: rotate(180deg); }
.v2-lb-next { right: 16px; }

/* On a phone the arrows would sit over the picture, so they go under it. */
@media (max-width: 640px) {
  .v2-lightbox { padding: 56px 10px 76px; }
  .v2-lb-nav { top: auto; bottom: 14px; transform: none; }
  .v2-lb-prev { left: calc(50% - 52px); }
  .v2-lb-next { right: calc(50% - 52px); }

  /* Trust strip: one card per row. Two columns on a phone squeezed each card
     to ~180px and broke the headings across three or four lines. Full width
     lets the icon and text sit on one line and the cards line up evenly. */
  .v2-trust { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
  .v2-trust-card { padding: 16px 18px; align-items: center; }
  .v2-trust-ico { width: 44px; height: 44px; }
  .v2-trust-t { font-size: 14px; }
  .v2-trust-s { font-size: 12px; margin-top: 4px; }
}
.v2-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.v2-thumb-btn {
  width: 74px; height: 74px; padding: 6px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.v2-thumb-btn.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.v2-thumb-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }

.v2-detail-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.v2-detail-name { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.v2-detail-lead { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 22px; }

.v2-buy {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.v2-buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.v2-buy-price b { font-size: 30px; font-weight: 800; }
.v2-was { font-size: 15px; color: var(--ink-faint); text-decoration: line-through; }
.v2-per { font-size: 13px; color: var(--ink-soft); }
.v2-buy-note { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin-top: 12px; }

.v2-tiers {
  margin-top: 18px; padding: 14px 16px;
  background: var(--line-soft); border-radius: 11px;
}
.v2-tiers-head {
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.v2-tier {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.v2-tier:first-of-type { border-top: 0; }
.v2-tier-q { font-size: 13px; color: var(--ink-soft); }
.v2-tier-p { font-size: 14px; font-weight: 800; color: var(--brand-ink); }

.v2-buy-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.v2-buy-cta .v2-btn { flex: 1 1 200px; }
.v2-buy-meta {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft);
}
.v2-buy-meta span { display: flex; align-items: center; gap: 9px; min-height: var(--tap); }
.v2-buy-meta a { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; }

/* ============ prose ============ */

.v2-prose h2 { font-size: 19px; font-weight: 800; margin: 26px 0 10px; }
.v2-prose h2:first-child { margin-top: 0; }
.v2-prose p, .v2-prose li { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.v2-prose p { margin-bottom: 12px; }
.v2-prose ul, .v2-prose ol { margin: 0 0 14px; padding-left: 22px; }
.v2-prose strong { color: var(--ink); }
.v2-prose img { border-radius: 10px; }

/* ============ two-column + aside ============ */

.v2-two, .v2-form-wrap {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.v2-aside {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.v2-aside h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.v2-aside p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.v2-aside .v2-btn { width: 100%; margin-bottom: 8px; }

/* ============ forms ============ */

.v2-hero-short { margin-bottom: 26px; }
.v2-hero-short .v2-hero-in { padding: 40px; }
.v2-hero-short h1 { font-size: 36px; margin-bottom: 12px; }

.v2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.v2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v2-field-wide { grid-column: 1 / -1; }
.v2-field label { font-size: 12px; font-weight: 700; color: var(--ink); }
.v2-field label span { color: #dc2626; }
.v2-field input, .v2-field select, .v2-field textarea {
  min-height: var(--tap); padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--line-soft); font: inherit; font-size: 14px; color: var(--ink);
  width: 100%;
}
.v2-field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.v2-field input:focus, .v2-field select:focus, .v2-field textarea:focus {
  outline: none; background: var(--card);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash);
}
.v2-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.6; }
/* An inline link inside a hint inherits its 11px line-height and lands well
   under the tap minimum. Padding restores the target without opening a gap in
   the sentence. */
.v2-hint a {
  display: inline-block; padding: 15px 0; margin: -15px 0;
  color: var(--brand-ink); font-weight: 600;
}
.v2-hint a:hover { color: var(--brand); }

.v2-alert { border-radius: 11px; padding: 14px 16px; margin-bottom: 18px; font-size: 13px; }
.v2-alert ul { margin: 8px 0 0; padding-left: 20px; }
.v2-alert-bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.v2-form-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--line-soft); border-radius: 11px;
  padding: 12px 14px; margin-bottom: 18px;
}
.v2-form-item img {
  width: 52px; height: 52px; flex: none; object-fit: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 3px;
}
.v2-form-item-t {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.v2-form-item a { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.v2-form-item a:hover { color: var(--brand); }

/* ============ success ============ */

.v2-done {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 56px 32px;
  text-align: center; margin: 40px auto 60px; max-width: 640px;
}
.v2-done-mark {
  width: 62px; height: 62px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-wash); color: var(--brand); border-radius: 50%;
}
.v2-done h1 { font-size: 28px; font-weight: 800; margin-bottom: 14px; }
.v2-done-ref {
  display: inline-block; padding: 9px 18px; margin-bottom: 18px;
  background: var(--ink); color: #fff; border-radius: 9px;
  font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 700;
  letter-spacing: .04em;
}
.v2-done-lead { font-size: 14px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 26px; }
.v2-done-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 980px) {
  .v2-detail { grid-template-columns: 1fr; gap: 26px; }
  .v2-two, .v2-form-wrap { grid-template-columns: 1fr; }
  .v2-detail-name { font-size: 26px; }
  .v2-hero-short h1 { font-size: 28px; }
}

@media (max-width: 560px) {
  .v2-form { grid-template-columns: 1fr; }
  .v2-shot { padding: 16px; border-radius: 18px; }
  .v2-hero-short .v2-hero-in { padding: 28px 20px; }
  .v2-done { padding: 40px 20px; }
  .v2-buy-cta .v2-btn { flex: 1 1 100%; }
}

/* ============ product quantity ============ */

.v2-qty { margin-top: 18px; }
.v2-qty label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.v2-qty-box {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.v2-qty-box button {
  width: var(--tap); min-height: var(--tap);
  background: var(--line-soft); border: 0; cursor: pointer;
  font-size: 18px; color: var(--ink-soft); line-height: 1;
}
.v2-qty-box button:hover { background: var(--line); color: var(--ink); }
.v2-qty-box input {
  width: 96px; min-height: var(--tap); text-align: center;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--card);
}

/* ============ card footer with two actions ============ */

.v2-card-foot { display: flex; gap: 8px; }
.v2-card-foot .v2-btn { flex: 1 1 auto; }
.v2-card-foot .v2-btn-light { flex: 0 0 auto; }

/* ============ RFQ drawer ============ */

/* Above the mobile off-canvas (1200) and tab bar (1100): the RFQ is a modal and
   must cover them, or the tab bar clips its submit button on a phone. */
.v2-rfq { position: fixed; inset: 0; z-index: 1300; visibility: hidden; }
.v2-rfq.is-open { visibility: visible; }
.v2-rfq-veil {
  position: absolute; inset: 0; background: rgba(9, 9, 11, .5);
  opacity: 0; transition: opacity .2s ease;
}
.v2-rfq.is-open .v2-rfq-veil { opacity: 1; }

.v2-rfq-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%); background: var(--card);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
  box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .4);
}
.v2-rfq.is-open .v2-rfq-panel { transform: none; }

.v2-rfq-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.v2-rfq-eyebrow {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.v2-rfq-head h2 { font-size: 19px; font-weight: 800; margin-top: 3px; }
.v2-rfq-close {
  width: var(--tap); height: var(--tap); flex: none;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft);
}
.v2-rfq-close:hover { color: var(--ink); }

.v2-rfq-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.v2-rfq-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-soft);
}
.v2-rfq-clear {
  background: none; border: 0; cursor: pointer; padding: 0 4px;
  min-height: var(--tap); font: inherit; font-size: 12px; font-weight: 700; color: #dc2626;
}
.v2-rfq-empty { padding: 44px 20px; text-align: center; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.v2-rfq-line {
  display: flex; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.v2-rfq-line img {
  width: 54px; height: 54px; flex: none; object-fit: contain;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px;
}
.v2-rfq-line-main { flex: 1; min-width: 0; }
.v2-rfq-line-main a {
  display: block; font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--ink); text-decoration: none;
}
.v2-rfq-line-main a:hover { color: var(--brand); }
.v2-rfq-line-sub { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

.v2-rfq-qty {
  display: inline-flex; align-items: stretch; margin-top: 9px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.v2-rfq-qty button {
  /* Full tap size. The stepper is the control people actually use in here -
     it is where a merchandiser turns 1 into 500 - so it does not get to be
     the smallest thing on the screen. */
  width: var(--tap); min-height: var(--tap); background: var(--line-soft);
  border: 0; cursor: pointer; font-size: 15px; color: var(--ink-soft); line-height: 1;
}
.v2-rfq-qty button:hover { background: var(--line); color: var(--ink); }
.v2-rfq-qty input {
  width: 66px; min-height: var(--tap); text-align: center; border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font: inherit; font-size: 13px; font-weight: 700; background: var(--card); color: var(--ink);
}

.v2-rfq-line-end {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; flex: none;
}
.v2-rfq-x {
  width: var(--tap); height: var(--tap); margin: -6px -10px -6px 0; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-faint);
}
.v2-rfq-x:hover { color: #dc2626; }
.v2-rfq-line-sum { font-size: 14px; font-weight: 800; white-space: nowrap; }
.v2-rfq-line-rate { font-size: 11px; color: var(--ink-faint); white-space: nowrap; margin-top: 2px; }

.v2-rfq-form { padding: 18px 20px 24px; border-top: 1px solid var(--line); }
.v2-rfq-form h3 {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.v2-rfq-form input, .v2-rfq-form textarea {
  width: 100%; min-height: var(--tap); padding: 11px 13px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--line-soft);
  font: inherit; font-size: 13px; color: var(--ink);
}
.v2-rfq-form textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.v2-rfq-form input:focus, .v2-rfq-form textarea:focus {
  outline: none; background: var(--card);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash);
}
.v2-rfq-row { display: flex; gap: 10px; }
.v2-rfq-row input { flex: 1 1 0; min-width: 0; }
.v2-rfq-form .v2-btn { width: 100%; margin-top: 4px; }
.v2-rfq-form .v2-btn:disabled { opacity: .6; cursor: default; }

.v2-rfq-total { border-top: 1px solid var(--line); padding: 14px 20px 16px; background: var(--line-soft); }
.v2-rfq-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 13px; color: var(--ink-soft);
}
.v2-rfq-total-row b { font-size: 21px; font-weight: 800; color: var(--ink); }
.v2-rfq-fine { font-size: 10.5px; color: var(--ink-faint); line-height: 1.55; margin-top: 6px; }

/* Count badge on the header button. */
.v2-pill.is-live { background: #fff; color: var(--brand-ink); }

/* ============ toast ============ */

.v2-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 95; padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.v2-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .v2-rfq-panel { width: 100%; }
  .v2-card-foot { flex-direction: column; }
  .v2-card-foot .v2-btn-light { flex: 1 1 auto; }
}

/* ============ category dropdown ============ */

.v2-drop { position: relative; }
.v2-drop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  background: none; border: 0; cursor: pointer;
  color: #d4d4d8; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.v2-drop-btn:hover,
.v2-drop.is-open .v2-drop-btn { color: #fff; background: rgba(255, 255, 255, .06); }
.v2-caret { width: 14px; height: 14px; transition: transform .15s ease; }
.v2-drop.is-open .v2-caret { transform: rotate(180deg); }

.v2-drop-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 620px; max-width: min(760px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.v2-drop.is-open .v2-drop-menu { opacity: 1; visibility: visible; transform: none; }

/* Hover only where a pointer actually exists. On touch this rule never applies,
   which is why the menu has a click toggle as well. */
@media (hover: hover) and (pointer: fine) {
  .v2-drop:hover .v2-drop-menu { opacity: 1; visibility: visible; transform: none; }
  .v2-drop:hover .v2-drop-btn { color: #fff; background: rgba(255, 255, 255, .06); }
}

.v2-drop-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; padding: 12px; max-height: 60vh; overflow-y: auto;
}
.v2-drop-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--tap); padding: 0 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600;
}
.v2-drop-grid a:hover { background: var(--brand-wash); color: var(--brand-ink); }
.v2-drop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-drop-n {
  flex: none; font-size: 11px; font-weight: 700;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.v2-drop-grid a:hover .v2-drop-n { color: var(--brand); }

/* Grouped "All categories" menu: a top-level heading with its subcategories
   nested underneath, groups flowing into columns (masonry) so tall and short
   ones pack without big gaps. */
.v2-drop-cols {
  columns: 3; column-gap: 8px;
  padding: 12px; max-height: 62vh; overflow-y: auto;
}
.v2-drop-group { break-inside: avoid; margin-bottom: 8px; }
.v2-drop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 34px; padding: 4px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 800;
}
a.v2-drop-head:hover { background: var(--brand-wash); color: var(--brand-ink); }
a.v2-drop-head:hover .v2-drop-n { color: var(--brand); }
.v2-drop-head-plain { cursor: default; color: var(--ink-soft); }
.v2-drop-sub { display: flex; flex-direction: column; margin-bottom: 2px; }
.v2-drop-sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px; padding: 3px 10px 3px 20px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.v2-drop-sub a:hover { background: var(--brand-wash); color: var(--brand-ink); }
.v2-drop-sub a:hover .v2-drop-n { color: var(--brand); }

.v2-drop-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); border-top: 1px solid var(--line);
  background: var(--line-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.v2-drop-all:hover { background: var(--brand-wash); }

@media (max-width: 860px) {
  .v2-drop { position: static; }
  .v2-drop-menu {
    min-width: 0; left: 16px; right: 16px;
    max-width: none; border-radius: var(--radius);
  }
  .v2-drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-drop-cols { columns: 2; }
}

@media (max-width: 560px) {
  .v2-drop-btn { padding: 0 12px; font-size: 12px; }
  .v2-drop-grid { grid-template-columns: 1fr; max-height: 55vh; }
  .v2-drop-cols { columns: 1; max-height: 55vh; }
}

/* ============ sample request ============ */

.v2-sample-items { display: flex; flex-direction: column; gap: 8px; }
.v2-sample-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px;
}
.v2-sample-item img {
  width: 48px; height: 48px; flex: none; object-fit: contain;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px;
}
.v2-sample-item-main { flex: 1; min-width: 0; }
.v2-sample-item-name {
  display: block; font-size: 13px; font-weight: 700;
  line-height: 1.35; color: var(--ink);
}
/* Specificity, not preference: .v2-field input sets width:100%, and these rows
   live inside a .v2-field - which squeezed the name to one word per line and
   pushed the price out of the row. */
.v2-field .v2-sample-qty,
.v2-sample-qty {
  width: 78px; flex: 0 0 78px; min-height: var(--tap); text-align: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
}
.v2-sample-price {
  flex: none; min-width: 84px; text-align: right;
  font-size: 13px; font-weight: 800; color: var(--brand-ink);
}

.v2-sample-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 14px 16px;
  background: var(--brand-wash); border: 1px solid #a7f3d0; border-radius: 11px;
  font-size: 13px; font-weight: 700; color: var(--brand-ink);
}
.v2-sample-total b { font-size: 22px; font-weight: 800; }

.v2-steps { margin: 0; padding-left: 20px; }
.v2-steps li { font-size: 13px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 9px; }
.v2-steps strong { color: var(--ink); }

/* ============ confirmation line list ============ */

.v2-done-list {
  text-align: left; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
}
.v2-done-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 14px; font-size: 13px;
  border-top: 1px solid var(--line-soft);
}
.v2-done-row:first-child { border-top: 0; }
.v2-done-row-end { flex: none; color: var(--ink-soft); white-space: nowrap; }
.v2-done-row-total {
  background: var(--line-soft); font-weight: 800;
}
.v2-done-row-total .v2-done-row-end { color: var(--ink); }

@media (max-width: 560px) {
  .v2-sample-item { flex-wrap: wrap; }
  .v2-sample-item-main { flex: 1 1 100%; order: -1; }
  .v2-sample-qty { flex: 1 1 auto; width: auto; }
  .v2-sample-price { flex: 1 1 auto; text-align: right; }
}

/* ============ content pages ============ */

.v2-alert-good { background: var(--brand-wash); border: 1px solid #a7f3d0; color: var(--brand-ink); }

.v2-side-list { list-style: none; margin: 0; padding: 0; }
.v2-side-list a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 12px; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 600;
}
.v2-side-list a:hover { background: var(--line-soft); color: var(--ink); }
.v2-side-list a.is-on { background: var(--brand-wash); color: var(--brand-ink); }

/* ---- faq accordion ---- */

.v2-faq { border-bottom: 1px solid var(--line-soft); }
.v2-faq:last-child { border-bottom: 0; }
.v2-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--tap); padding: 14px 0; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ink); list-style: none;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary:hover { color: var(--brand-ink); }
.v2-faq summary .v2-caret { color: var(--ink-faint); }
.v2-faq[open] summary .v2-caret { transform: rotate(180deg); }
.v2-faq-body { padding: 0 0 16px; }
.v2-faq-body p:last-child { margin-bottom: 0; }

/* ---- blog ---- */

.v2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-card-img-wide { aspect-ratio: 16 / 10; object-fit: cover; padding: 0; }
.v2-card-excerpt { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.v2-card-date { font-size: 11px; color: var(--ink-faint); margin-top: auto; }

.v2-article {
  max-width: 760px; margin: 0 auto 44px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px;
}
.v2-article h1 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 10px; }
.v2-article-meta { font-size: 12px; color: var(--ink-faint); margin-bottom: 22px; }
.v2-article-img {
  width: 100%; border-radius: 12px; margin-bottom: 24px;
  aspect-ratio: 16 / 9; object-fit: cover;
}

@media (max-width: 1100px) { .v2-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .v2-grid-3 { grid-template-columns: 1fr; }
  .v2-article { padding: 22px; }
  .v2-article h1 { font-size: 24px; }
}

/* ============ account ============ */

/* The side nav reads first on a phone but sits right on a desktop. */
.v2-two-flip { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.v2-two-flip > .v2-aside { position: sticky; top: 16px; }

.v2-stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.v2-stat-card {
  display: block; padding: 16px; border-radius: 11px; text-decoration: none;
  background: var(--line-soft); border: 1px solid var(--line); color: inherit;
}
.v2-stat-card:hover { border-color: var(--brand); background: var(--brand-wash); color: inherit; }
.v2-stat-card-n { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.v2-stat-card-l { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

.v2-reqs { display: flex; flex-direction: column; }
.v2-req {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: var(--tap); padding: 13px 0;
  border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit;
}
.v2-req:first-child { border-top: 0; }
.v2-req:hover .v2-req-ref { color: var(--brand); }
.v2-req-ref {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  font-weight: 700; color: var(--ink); flex: none;
}
.v2-req-sub { font-size: 12px; color: var(--ink-soft); flex: 1 1 160px; min-width: 0; }
.v2-req-date { font-size: 12px; color: var(--ink-faint); flex: none; }

.v2-state {
  flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.v2-state-wait { background: #fef3c7; color: #92400e; }
.v2-state-good { background: var(--brand-wash); color: var(--brand-ink); }
.v2-state-dim  { background: var(--line-soft); color: var(--ink-soft); }

.v2-panel-quoted { border-color: var(--brand); background: var(--brand-wash); }
.v2-quoted-total { font-size: 30px; font-weight: 800; color: var(--brand-ink); margin-top: 6px; }

/* A borderless table for account detail pages - the catalogue table's black
   header is too heavy for a two-column list of what you ordered. */
.v2-table-plain { min-width: 520px; }
.v2-table-plain thead th {
  background: var(--line-soft); color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

/* ---- sample pipeline ---- */

.v2-track {
  display: flex; list-style: none; margin: 20px 0 0; padding: 0;
  gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.v2-track li {
  flex: 1 1 0; min-width: 84px; position: relative;
  padding-top: 22px; text-align: center;
}
/* The connecting line, drawn behind the dots. */
.v2-track li::before {
  content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--line);
}
.v2-track li:first-child::before { left: 50%; }
.v2-track li:last-child::before { right: 50%; }
.v2-track li.is-done::before { background: var(--brand); }
.v2-track-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line);
}
.v2-track li.is-done .v2-track-dot { background: var(--brand); border-color: var(--brand); }
.v2-track-label { font-size: 11px; color: var(--ink-faint); line-height: 1.35; }
.v2-track li.is-done .v2-track-label { color: var(--ink); font-weight: 600; }

/* ---- sign in ---- */

.v2-auth {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px; align-items: start; max-width: 900px; margin: 28px auto 60px;
}
.v2-auth-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; }
.v2-check { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 13px; cursor: pointer; }
.v2-check input { width: 18px; height: 18px; margin: 0; }
/* Same inheritance trap as the attachment picker: .v2-field label span is the
   required-asterisk red, and this span sits inside a label, so "Keep me signed
   in" rendered red as though it were an error. The span carries the click
   target, so reassert the colour rather than drop the element. */
.v2-field .v2-check span, .v2-check span { color: var(--ink); font-weight: 500; }
.v2-auth-alt {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-faint);
}
.v2-auth-alt a {
  /* min-width too: "Sign in" is a short label and was coming out 38px wide,
     which is a 44px-tall target you still have to aim at. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap);
  padding: 0 6px; margin-right: 8px;
  color: var(--brand-ink); font-weight: 600; text-decoration: none;
}
.v2-auth-alt a:hover { color: var(--brand); }

@media (max-width: 980px) {
  .v2-two-flip { grid-template-columns: 1fr; }
  .v2-two-flip > .v2-aside { position: static; order: -1; }
  .v2-auth { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .v2-req { gap: 8px; }
  .v2-req-sub { flex: 1 1 100%; order: 3; }
  .v2-stat-cards { grid-template-columns: 1fr; }
}

/* Inline links inside body copy inherit the paragraph's line-height, which puts
   them under the tap minimum. Padding restores the target without opening gaps
   in the text. */
.v2-aside p a,
.v2-prose p a {
  display: inline-block; padding: 11px 0; margin: -11px 0;
  color: var(--brand-ink); font-weight: 600;
}
.v2-aside p a:hover, .v2-prose p a:hover { color: var(--brand); }

/* The remember-me checkbox is 18px by design; the label around it is the target. */
.v2-check input { width: 20px; height: 20px; }
.v2-check { padding: 0 4px; margin: 0 -4px; }

/* ============ track ============ */

.v2-track-wrap { max-width: 760px; margin: 0 auto 60px; }
.v2-track-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.v2-track-form .v2-field { flex: 1 1 260px; min-width: 0; }
.v2-track-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 18px;
}
.v2-track-facts div {
  background: var(--line-soft); border-radius: 10px; padding: 12px 14px;
}
.v2-track-facts span { display: block; font-size: 11px; color: var(--ink-soft); }
.v2-track-facts b { display: block; font-size: 15px; font-weight: 800; margin-top: 3px; }

/* A single-column auth card - forgot and reset have no second panel. */
.v2-auth-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* ============ product detail, second pass ============ */

.v2-badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: var(--brand-wash); color: var(--brand-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}

/* Section headings with the accent bar the prototype uses. */
.v2-h-accent {
  position: relative; padding-left: 14px;
  font-size: 18px; font-weight: 800; margin-bottom: 14px;
}
.v2-h-accent::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 4px; border-radius: 2px; background: var(--brand);
}

/* ---- tier cards ---- */

.v2-tierbox {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-top: 20px;
}
.v2-tierbox-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.v2-tierbox-note { color: var(--brand-ink); }
.v2-tierbox-moq { font-size: 11px; color: var(--ink-faint); margin-top: 10px; }
.v2-tierbox-plain { padding: 20px; }

.v2-tiercards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
}
.v2-tiercard {
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px;
  background: var(--line-soft); transition: border-color .15s ease, background .15s ease;
}
/* The band the current quantity actually lands in. */
.v2-tiercard.is-on {
  border-color: var(--brand); background: var(--card);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.v2-tiercard-q { display: block; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.v2-tiercard-p { display: block; font-size: 19px; font-weight: 800; margin-top: 4px; }
.v2-tiercard.is-on .v2-tiercard-p { color: var(--brand-ink); }
.v2-tiercard-u { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 1px; }

/* ---- purchasable formats (roll / sheet sizes) --------------------------- */
/* Deliberately a sibling of the tier box, not a copy of it: a tier is a price
   band you fall into by quantity, a format is a thing you choose. Chips read as
   choosable; cards read as information. */
.v2-fmtbox {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-top: 14px;
}
.v2-fmtbox-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.v2-fmtbox-head h2 { font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }
.v2-fmtbox-sel {
  color: var(--brand-ink); background: var(--brand-wash);
  border-radius: 999px; padding: 4px 10px; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 700;
}
.v2-fmtbox-note { font-size: 11px; color: var(--ink-faint); margin: -4px 0 10px; }
.v2-fmts { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-fmt {
  min-height: var(--tap); cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 14px;
  background: var(--line-soft); color: inherit; font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.v2-fmt:hover { border-color: var(--ink-faint); }
.v2-fmt.is-on {
  border-color: var(--brand); background: var(--card);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.v2-fmt-n { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; }
.v2-fmt-p { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.v2-fmt.is-on .v2-fmt-p { color: var(--brand-ink); font-weight: 700; }
.v2-fmt-r { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 1px; }

/* ---- quantity + indicative value ---- */

.v2-order {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 18px;
}
.v2-estimate { text-align: right; }
.v2-estimate-l {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.v2-estimate-v { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; }
.v2-estimate-n { display: block; font-size: 10.5px; color: var(--ink-faint); }

/* ---- secondary actions ---- */

.v2-buy-second {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 20px; margin-top: 6px;
}
.v2-buy-second a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); font-size: 12.5px; font-weight: 600;
  color: var(--brand-ink); text-decoration: none;
}
.v2-buy-second a:hover { color: var(--brand); }

/* ---- assurances ---- */

.v2-assure {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.v2-assure > span {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 11px; color: var(--ink-soft); line-height: 1.5;
}
.v2-assure > span > span { display: block; min-width: 0; }
.v2-assure > span > svg { color: var(--brand); margin-top: 1px; flex: none; }
.v2-assure b { display: block; font-size: 12px; color: var(--ink); }

/* ---- specification table ---- */

.v2-spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.v2-spec th, .v2-spec td { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.v2-spec tr:first-child th, .v2-spec tr:first-child td { border-top: 0; }
.v2-spec th {
  text-align: left; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
  padding-right: 14px;
}
.v2-spec td { text-align: right; font-weight: 700; }

@media (max-width: 980px) {
  .v2-order { flex-direction: column; align-items: stretch; }
  .v2-estimate { text-align: left; }
}

/* "List rate" tag beside the price, so the figure is labelled rather than
   contradicted by a sentence beneath it. */
.v2-ratetag {
  align-self: center; padding: 3px 8px; border-radius: 6px;
  background: var(--line-soft); color: var(--ink-soft);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.v2-cta-note { font-size: 11.5px; color: var(--ink-soft); margin: 16px 0 8px; line-height: 1.55; }

/* Rows entered by the content team, set apart from the catalogue facts above
   them so it is clear which are system-derived and which are stated. */
.v2-spec-added th { color: var(--ink); font-weight: 600; }
.v2-spec-added:first-of-type th,
.v2-spec-added:first-of-type td { border-top: 2px solid var(--line); }

/* ============ product card, matched to the design ============ */

.v2-card { border-radius: 16px; }

/* The image sits in a padded well over a divider, and lifts slightly on hover,
   which is what gives the grid its depth. */
.v2-card-media {
  position: relative;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.v2-card-media > a { display: block; }
.v2-card-img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; padding: 22px; background: transparent;
  transition: transform .3s ease;
}
.v2-card:hover .v2-card-img { transform: scale(1.05); }

/* A product with no photo falls back to the company mark rather than an empty
   box. Dialled back so it reads as a placeholder, not as the product. */
.v2-card-img.is-fallback { padding: 30%; opacity: .28; filter: grayscale(1); }
.v2-card:hover .v2-card-img.is-fallback { transform: none; }

/* Quick-add, in the corner of the image. Keeps the card's single-action shape
   while leaving the basket reachable from the grid. */
.v2-card-add {
  position: absolute; top: 10px; right: 10px;
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  cursor: pointer; backdrop-filter: blur(4px);
  opacity: .55;
  transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.v2-card:hover .v2-card-add,
.v2-card-add:focus-visible { opacity: 1; }
.v2-card-add:hover { background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1; }

.v2-card-body { padding: 16px 16px 6px; gap: 6px; }
.v2-card-name { font-size: 13.5px; min-height: var(--tap); display: flex; align-items: center; }

.v2-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.v2-card-from { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.v2-card-price b { font-size: 17px; font-weight: 800; color: var(--ink); }
.v2-card-per { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }

.v2-card-foot { padding: 12px 16px 16px; display: block; }
.v2-btn-card {
  width: 100%; min-height: var(--tap); border-radius: 11px;
  background: var(--ink); color: #fff; font-size: 12.5px;
}
.v2-btn-card:hover { background: var(--brand); color: #fff; }

.v2-sample-empty-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ============ category sections (the grouped "All" landing) ============ */
/* Each of the top categories is a heading + a horizontal, swipeable row of its
   products. Arrows appear only when the row overflows (see catalog.blade.php),
   mirroring the chip rail; touch just swipes. */
.v2-catsec { margin-bottom: 34px; }
.v2-catsec:last-child { margin-bottom: 0; }
.v2-catsec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.v2-catsec-title {
  font-size: 18px; font-weight: 800; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.v2-catsec-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.v2-catsec-all {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 600; color: var(--brand-ink);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .15s ease;
}
.v2-catsec-all:hover { color: var(--brand); }
.v2-catsec-all svg { width: 15px; height: 15px; }

/* Subcategory capsule chips under a category heading, matching the catalogue
   chip rail. Wrap rather than scroll - there are at most a handful. */
.v2-catsec-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.v2-catsec-sub {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.v2-catsec-sub:hover { border-color: var(--brand); color: var(--brand-ink); }
.v2-catsec-sub-n {
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.v2-catsec-sub:hover .v2-catsec-sub-n { color: var(--brand); }

.v2-catsec-rail { display: flex; align-items: center; gap: 6px; }
.v2-catsec-track {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 18px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding-bottom: 4px;
  /* The arrows are the affordance; a bar under the row just adds noise. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.v2-catsec-track::-webkit-scrollbar { display: none; }
.v2-catsec-track > .v2-card { scroll-snap-align: start; }

.v2-catsec-btn {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.v2-catsec-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.v2-catsec-btn svg { width: 18px; height: 18px; }
.v2-catsec-btn[data-cat-scroll="-1"] svg { transform: rotate(180deg); }
.v2-catsec-btn:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--ink-faint); }

@media (max-width: 640px) {
  .v2-catsec-title { font-size: 16px; }
  .v2-catsec-track { grid-auto-columns: 158px; gap: 12px; }
  /* Touch swipes the row; the round buttons would only crowd it. */
  .v2-catsec-btn { display: none; }
}