/* ============================================================
   ShenzhenB2B-bd — storefront
   ============================================================ */

:root {
  /* Palette sampled from the ShenzhenB2B-bd logo (public/logo.png):
     blue #002868 → #023D80 → #006FD7 → #009AFE, orange #FF6905 → #FFB01A.
     The wordmark is navy with "B2B" in orange, so orange is accent-only:
     #ff6a00 on white is 3.3:1 and fails for body text. */
  --brand: #023d80;
  --brand-d: #002868;
  --brand-l: #e8f0fa;
  --brand-m: #006fd7;
  --brand-navy: #001a45;
  --accent: #ff6a00;
  --accent-l: #ffb01a;
  --ink: #0d1626;
  --ink-2: #40506a;
  --ink-3: #74839b;
  --line: #e0e7f0;
  --line-2: #eff4fa;
  --bg: #fbfcfe;
  --card: #ffffff;
  --red: #c0322a;
  --green: #187a4e;
  --amber-bg: #fff4e3;
  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(6, 26, 61, .05), 0 4px 14px rgba(6, 26, 61, .06);
  --shadow-lg: 0 8px 30px rgba(6, 26, 61, .12);
  --wrap: 1240px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  /* A wide, very pale wash of the brand colour behind the top of the page. It is the
     same blue as the banner, so the page reads as one surface rather than as a card
     sitting on grey. */
  background-image: radial-gradient(1100px 400px at 50% -140px, rgba(0, 111, 215, .07), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-m); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.012em; line-height: 1.25; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 680; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 12px; }
ul { margin: 0; padding-left: 20px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Bengali carries its vowels and marks above and below the consonant, so the line-height
   that suits Latin clips them and the negative tracking set for Latin headings squeezes
   them together. The body tag says which language the page was rendered in, so the
   metrics follow the script instead of the reader having to zoom. */
body[data-lang="bn"] { line-height: 1.72; }
body[data-lang="bn"] h1, body[data-lang="bn"] h2,
body[data-lang="bn"] h3, body[data-lang="bn"] h4 { letter-spacing: 0; line-height: 1.42; }
/* The rail's heading is a small-caps label, which the script cannot carry: Bengali has
   no uppercase, so the tracking alone was left to separate the words, and it pushed
   the conjuncts apart. The label reads as a label at normal spacing and weight. */
body[data-lang="bn"] .rail-head { letter-spacing: 0; text-transform: none; font-size: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (max-width: 720px) { .wrap { padding: 0 14px; } }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.ico { vertical-align: -3px; flex: 0 0 auto; }
.ico-sm { vertical-align: -2px; opacity: .8; }
.ico-lead { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* ---------------------------------------------------------------- strip */
.strip { background: var(--brand-d); color: #bfd4f0; font-size: 12.5px; }
.strip-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; }
.strip-msg { display: flex; align-items: center; gap: 7px; }
.strip-contact { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.strip-contact a { color: #d9edef; }
.strip-sep { opacity: .45; }
@media (max-width: 860px) { .strip { display: none; } }

/* --------------------------------------------------------------- header */
.hdr { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.hdr-in { display: flex; align-items: center; gap: 22px; height: 76px; }
.menu-btn { display: none; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); flex: 0 0 auto; }
.logo-mark { color: var(--brand); }
.brand-img { display: block; height: 58px; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 16.5px; letter-spacing: -.015em; color: var(--ink); font-weight: 700; }
.brand-txt i { font-style: normal; font-size: 10.5px; color: var(--ink-3); letter-spacing: .01em; }

.searchbar { flex: 1; position: relative; max-width: 620px; }
.searchbar input {
  width: 100%; height: 42px; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0 108px 0 40px; background: #f8fafb; transition: .15s;
}
.searchbar input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(10, 74, 140, .12); }
.searchbar-btn {
  position: absolute; right: 4px; top: 4px; height: 34px; padding: 0 18px; border: 0;
  background: var(--brand); color: #fff; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.searchbar-btn:hover { background: var(--brand-m); }
.search-cam {
  flex: 0 0 auto; width: 42px; height: 42px; margin-left: -12px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-2); background: #f8fafb;
  border: 1.5px solid var(--line); transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.search-cam:hover { color: var(--brand); border-color: var(--brand); background: #fff; transform: scale(1.1); }
.search-cam:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 74, 140, .12); }

.hdr-actions { display: flex; gap: 4px; margin-left: auto; }
.icon-btn {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 8px;
  color: var(--ink-2); font-size: 13px; background: none; border: 0; cursor: pointer; position: relative;
}
.icon-btn:hover { background: var(--line-2); color: var(--brand); }
.icon-label { font-size: 12.5px; }
.cart-count {
  position: absolute; top: 2px; left: 20px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--brand); color: #fff; border-radius: 9px; font-size: 10.5px;
  display: grid; place-items: center; font-weight: 700;
}
/* The language pair is a segment, not a menu: both names are always visible, the reader's
   own is marked, and the other one is the link. Each name is written in its own script so
   it can be recognised without being able to read it. */
.lang-switch {
  display: flex; align-items: center; gap: 2px; margin-left: 6px; padding: 3px;
  border: 1px solid var(--line); border-radius: 9px; background: #f8fafb;
}
.lang-opt {
  padding: 5px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ink-3);
  white-space: nowrap; transition: background .18s ease, color .18s ease;
}
.lang-opt:hover { color: var(--brand); background: #fff; }
.lang-opt.is-on {
  color: var(--brand); background: #fff; font-weight: 650; box-shadow: var(--shadow);
}
.lang-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 74, 140, .12); }
@media (max-width: 1023px) {
  .hdr-in { gap: 10px; height: 64px; }
  .brand-img { height: 42px; }
  .brand-txt i { display: none; }
  .searchbar { display: block; flex: 1 1 auto; max-width: none; min-width: 0; }
  .searchbar input { height: 40px; padding: 0 92px 0 36px; font-size: 13.5px; }
  .searchbar-btn { height: 32px; top: 4px; right: 4px; padding: 0 14px; font-size: 13px; }
  .search-cam { width: 40px; height: 40px; margin-left: 0; }
  .hdr-actions { display: none; }
  .icon-label { display: none; }
}
@media (max-width: 480px) {
  .hdr-in { gap: 8px; height: 60px; }
  .brand-img { height: 34px; }
  .brand-txt i { display: none; }
  .searchbar input { height: 38px; padding: 0 78px 0 32px; font-size: 13px; }
  .searchbar-btn { height: 30px; top: 4px; right: 4px; padding: 0 11px; font-size: 12.5px; }
  .search-cam { width: 38px; height: 38px; }
  .brand-txt b { font-size: 15px; }
}

/* left category rail (desktop) */
.rail { display: none; }
@media (min-width: 1024px) {
  body { padding-left: 210px; }
  /* The announcement bar spans the whole window, rail included, so the top of the page
     is one navy band instead of a bar chopped short by the rail standing over it. */
  .strip { margin-left: -210px; padding-left: 210px; }
  .rail {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 210px;
    background: #fff; border-right: 1px solid var(--line); z-index: 65; padding: 46px 10px 14px;
  }
  /* The head is the left end of that navy band, so it wears the band's colour and the
     same small-caps label the bar uses — the two read as one thing, not two. It is
     pinned to the column rather than sized by its flex line, because it has to reach
     past the column's own border to cover the seam that border would otherwise cut
     across the band. */
  .rail-head {
    position: absolute; left: 0; right: -1px; top: 0; height: 34px;
    display: flex; align-items: center; gap: 8px; padding: 0 20px;
    background: var(--brand-d); color: #bfd4f0;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  }
  .rail-head svg { opacity: .85; }
  .rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .rail-item { position: relative; }
  .rail-link {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px;
    color: var(--ink-2); font-size: 13.5px; font-weight: 500;
    transition: background .15s ease, color .15s ease;
  }
  /* A flat line icon in the brand colour, the way the category list is drawn everywhere
     else in the shop. A filled disc behind every icon made this column look like a
     different product sitting next to the page. */
  .rail-ico { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--brand); }
  .rail-ico .ico { opacity: .9; }
  .rail-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-chev { color: var(--ink-3); opacity: .45; transition: opacity .15s ease, color .15s ease; }
  .rail-link:hover { background: var(--line-2); color: var(--brand); }
  .rail-link:hover .rail-chev { opacity: 1; color: var(--brand); }
  /* The open category is marked the way the rest of the shop marks the open thing:
     a brand tint, the brand's own text colour, and a rule at the edge of the column. */
  .rail-item.is-on .rail-link { background: var(--brand-l); color: var(--brand-d); font-weight: 600; }
  .rail-item.is-on .rail-chev { opacity: 1; color: var(--brand); }
  .rail-item.is-on::before {
    content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
    background: var(--brand); border-radius: 0 3px 3px 0;
  }
  .rail-fly {
    display: none; position: absolute; left: 100%; top: -6px; width: 300px; padding: 14px 16px 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 70;
  }
  .rail-item:hover .rail-fly, .rail-item:focus-within .rail-fly { display: block; }
  .rail-fly-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2);
  }
  .rail-fly-head b { font-size: 14px; }
  .rail-fly-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--brand); font-weight: 600; }
  .rail-fly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
  .rail-fly-grid a { padding: 6px 7px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); }
  .rail-fly-grid a:hover { background: var(--line-2); color: var(--brand); }
  /* A bordered pill, the same shape and weight as the buttons on the page, so the link
     to the full list is read as a control rather than a line of loose blue text. */
  .rail-all {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; font-size: 12.5px; font-weight: 650; color: var(--brand);
    transition: background .15s ease, border-color .15s ease;
  }
  .rail-all:hover { background: var(--brand-l); border-color: var(--brand-l); }
  /* The two contact prompts sit in a tinted panel, like the panels used for price
     breakdowns and offers, instead of hanging off the bottom as loose grey text. */
  .rail-foot {
    margin-top: auto; padding: 10px; border-radius: var(--r); background: var(--brand-l);
    display: flex; flex-direction: column; gap: 2px;
  }
  .rail-help {
    display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px;
    font-size: 11.5px; color: var(--ink-2); line-height: 1.25; transition: background .15s ease;
  }
  .rail-help svg { color: var(--brand); flex: 0 0 auto; }
  .rail-help b { display: block; font-size: 12px; color: var(--brand-d); font-weight: 650; }
  .rail-help:hover { background: #fff; }
  .rail-help:hover b { color: var(--brand); }
  .catnav { display: none; }
}
@media (min-width: 1024px) and (max-height: 700px) { .rail-foot { display: none; } }

/* category drawer (mobile + tablet) */
.catnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2);
}
.catnav-top b { font-size: 15px; }
.catnav-close {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2);
}
.catnav-close:hover { background: var(--line-2); color: var(--brand); }
.catnav-in { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 20px; }
.catnav-all {
  display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--brand);
}
.catnav-link {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; list-style: none;
}
.catnav-link::-webkit-details-marker { display: none; }
.catnav-link span { flex: 1; }
.catnav-link:hover, .catnav-group[open] > .catnav-link { background: var(--line-2); color: var(--brand); }
.catnav-chev { color: var(--ink-3); transition: transform .15s; }
.catnav-group[open] .catnav-chev { transform: rotate(180deg); }
.catnav-kids { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 10px 10px 46px; }
.catnav-kids a { padding: 6px 10px; border-radius: 999px; background: var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.catnav-kids a:hover { background: var(--brand-l); color: var(--brand); }

@media (max-width: 1023px) {
  .catnav {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 360px);
    background: #fff; z-index: 75; overflow-y: auto; border-right: 1px solid var(--line);
    transform: translateX(-102%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .catnav { transform: none; visibility: visible; }
  .catnav-scrim { position: fixed; inset: 0; background: rgba(16,22,25,.4); z-index: 74; display: none; }
  body.nav-open .catnav-scrim { display: block; }
  body.nav-open { overflow: hidden; }
}

/* ------------------------------------------------------------ mobile bar */
.mobile-tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: #fff; border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabbar a, .mobile-tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; color: var(--ink-3); padding: 4px 0; position: relative; flex: 1;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.mobile-tabbar a.is-on, .mobile-tabbar button.is-on { color: var(--brand); }
.tab-badge {
  position: absolute; top: 0; right: 50%; transform: translateX(14px);
  background: var(--brand); color: #fff; font-size: 9.5px; border-radius: 8px;
  min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px;
}
@media (max-width: 1023px) {
  .mobile-tabbar { display: flex; }
  body { padding-bottom: 62px; }
}

/* more sheet (mobile + tablet) */
.more-sheet {
  display: none; position: fixed; left: 12px; right: 12px;
  bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 72;
  padding: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.more-sheet[hidden] { display: none !important; }
@media (max-width: 1023px) { .more-sheet:not([hidden]) { display: grid; } }
.more-sheet a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: 10px; font-size: 11.5px; color: var(--ink-2); text-align: center;
}
.more-sheet a:hover { background: var(--line-2); color: var(--brand); }
.more-sheet a svg { color: var(--brand); }
.more-lang {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: #f8fafb;
  font-size: 12.5px; color: var(--ink-2);
}
.more-lang svg { color: var(--brand); }
.more-lang b { color: var(--ink); }
/* The tile rules above lay every anchor out vertically; this one is a row inside a row. */
.more-sheet .more-lang-btn {
  margin-left: auto; flex-direction: row; padding: 6px 11px; font-size: 12px;
  background: var(--brand); color: #fff; white-space: nowrap;
}
.more-sheet .more-lang-btn:hover { background: var(--brand-m); color: #fff; }

/* ------------------------------------------------------------------ hero */
.hero { padding: 20px 0 0; }
.hero-slides {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--r-lg);
}
.hero-slides::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden;
  min-height: 330px; border-radius: var(--r-lg); display: flex; align-items: center;
  background: linear-gradient(115deg, var(--brand-d), var(--brand) 55%, var(--brand-m));
  color: #fff; padding: 46px 44px; isolation: isolate;
}
.hero-slide:nth-child(2) { background: linear-gradient(115deg, #002868, #023d80 58%, #006fd7); }
.hero-slide:nth-child(3) { background: linear-gradient(115deg, #3a1405, #8a3a05 52%, #e86f06); }

/* Two light sources over the banner's own gradient, so the panel reads as lit rather
   than filled. They sit under the copy and never over it. */
.hero-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 88% at 84% 16%, rgba(0, 154, 254, .5), transparent 70%),
    radial-gradient(52% 72% at 6% 102%, rgba(255, 106, 0, .32), transparent 72%);
}
.hero-slide:nth-child(3)::before {
  background:
    radial-gradient(58% 88% at 84% 16%, rgba(255, 176, 26, .45), transparent 70%),
    radial-gradient(52% 72% at 6% 102%, rgba(40, 14, 4, .6), transparent 72%);
}
/* A fine grid, faded out towards the edges. It gives the flat colour something to hold. */
.hero-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(75% 75% at 28% 42%, #000, transparent 76%);
  mask-image: radial-gradient(75% 75% at 28% 42%, #000, transparent 76%);
}
.hero-copy { max-width: 620px; position: relative; z-index: 3; }
.hero-kicker {
  display: inline-block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 106, 0, .22); border: 1px solid rgba(255, 176, 26, .45); color: #ffcc85;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; font-weight: 600;
}
.hero-slide h2 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; color: #fff; letter-spacing: -.022em; }
.hero-slide p { color: rgba(255, 255, 255, .85); font-size: 15.5px; max-width: 46ch; margin: 0 0 20px; }
.hero-art {
  position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  width: 400px; height: 400px; opacity: .17; pointer-events: none; z-index: 1;
  animation: heroSpin 120s linear infinite;
}
@keyframes heroSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* The two ways into the shop, side by side: the catalogue, and a quote for something
   specific. The second one is the quieter of the two — it is an outline on glass. */
.hero-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand-d);
  padding: 12px 22px; border-radius: 999px; font-weight: 650; font-size: 14px;
  box-shadow: 0 8px 22px rgba(0, 20, 60, .22); transition: transform .15s, box-shadow .15s, background .15s;
}
.hero-cta:hover { background: #eef4fb; color: var(--brand-d); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 20, 60, .3); }
.hero-cta-alt {
  display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .09); transition: .15s;
}
.hero-cta-alt:hover { color: #fff; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .65); transform: translateY(-1px); }

/* Three numbers the shop can actually vouch for: the live catalogue, the categories it
   is filed under, and the delivery window from the fastest option to the slowest. */
.hero-stats { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 0; }
.hero-stats li {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; border-radius: 12px; min-width: 128px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
}
.hero-stats b { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.hero-stats span { font-size: 11.5px; color: rgba(255, 255, 255, .78); line-height: 1.35; }
.hero-dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 0; }
.hero-dots span { width: 22px; height: 3px; background: var(--line); border-radius: 2px; }
@media (max-width: 860px) {
  .hero-slide { min-height: 230px; padding: 26px 22px; flex-basis: 92%; }
  .hero-slide h2 { font-size: 24px; }
  .hero-slide p { font-size: 14px; margin-bottom: 16px; }
  .hero-art { width: 240px; height: 240px; right: -70px; opacity: .1; }
  .hero-actions { margin-bottom: 20px; }
  /* Three equal columns rather than two-and-a-straggler. */
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stats li { min-width: 0; padding: 8px 10px; }
  .hero-stats b { font-size: 17px; }
  .hero-stats span { font-size: 10.5px; }
}

/* ----------------------------------------------------------- trust strip */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 18px 0 0;
  position: relative;
}
/* One hairline of colour along the top, so the strip is tied to the banner above it. */
.trust::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--brand), var(--brand-m) 45%, var(--accent));
}
.trust-item { background: #fff; padding: 18px; display: flex; gap: 12px; align-items: flex-start; transition: background .15s; }
.trust-item:hover { background: #f8fbff; }
.trust-ico {
  color: var(--accent); flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, #fff3e8, #ffe2c4); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .16);
}
.trust-item b { display: block; font-size: 13.5px; margin-bottom: 1px; }
.trust-item span { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr 1fr; } .trust-item { padding: 12px 13px; gap: 9px; } .trust-item b { font-size: 12.5px; } .trust-item span { font-size: 11px; } }

/* --------------------------------------------------------------- section */
.sect { padding: 34px 0 0; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
/* A short bar in front of every section title — the one ornament that repeats on the
   listing pages too, so the front page and its neighbours read as the same site. */
.sect-head h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.sect-head h2::before {
  content: ''; width: 4px; height: 20px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--brand-m), var(--brand));
}
.sect-head p { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.sect-more { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.sect-more:hover { gap: 8px; }
.sect-more { transition: gap .15s; }

/* -------------------------------------------------------- category tiles */
.catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cat-tile {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); transition: .18s; color: var(--ink);
  display: flex; flex-direction: column;
}
/* The hairline that grows across the top of the tile it is pointing at. */
.cat-tile::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--brand-m)); opacity: 0; transition: opacity .18s;
}
.cat-tile:hover { border-color: #c2d6ef; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--ink); }
.cat-tile:hover::after { opacity: 1; }

/* The photo at the top of the tile. It fills the whole width of the tile and bleeds to
   its edges, so a row of them reads as a row of pictures rather than of cards with
   pictures in them. */
.ct-media {
  position: relative; display: block; overflow: hidden; background: var(--line-2);
  aspect-ratio: 4 / 3;
}
.ct-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat-tile:hover .ct-media img { transform: scale(1.05); }
/* A scrim under the corner number, so it stays readable on a pale photo. */
.ct-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 45, .45) 0%, rgba(6, 20, 45, .1) 22%, transparent 60%, rgba(6, 20, 45, .42) 100%);
}
/* A category with nothing photographed keeps its symbol, on the same panel the photo
   would have filled, so the row stays level. */
.ct-media-blank {
  display: grid; place-items: center;
  background: linear-gradient(140deg, #eef4fb, #e3edf8);
}
.cat-tile:nth-child(2n) .ct-media-blank { background: linear-gradient(140deg, #fff4ea, #ffe8d5); }
/* The number of the tile in the grid, sitting quietly in the corner. */
.ct-num {
  position: absolute; top: 9px; right: 11px; z-index: 3; font-size: 10.5px; font-weight: 700;
  color: rgba(255, 255, 255, .9); letter-spacing: .05em; text-shadow: 0 1px 3px rgba(6, 20, 45, .55);
  transition: color .18s;
}
.cat-tile:hover .ct-num { color: #fff; }
/* On a tile with no picture there is no dark scrim to carry a white number, so the
   number goes back to being ink. */
.cat-tile:has(.ct-media-blank) .ct-num { color: #9fb2c8; text-shadow: none; }
.cat-tile:has(.ct-media-blank):hover .ct-num { color: var(--brand-m); }
.cat-tile .ct-ico {
  width: 50px; height: 50px; border-radius: 14px; background: var(--brand-l);
  color: var(--brand); display: grid; place-items: center;
  transition: transform .18s, background .18s, color .18s;
}
.cat-tile:hover .ct-ico { transform: translateY(-2px) scale(1.05); background: linear-gradient(140deg, #e8f0fa, #d5e6fa); color: var(--brand-m); }
/* Every other tile takes the warm half of the palette, so a five-across row is not
   five identical blue squares. */
.cat-tile:nth-child(2n) .ct-ico { background: #fff2e6; color: #c25708; }
.cat-tile:nth-child(2n):hover .ct-ico { background: linear-gradient(140deg, #fff2e6, #ffe3cb); color: #a94d05; }

/* The part of the tile below the picture. */
.ct-body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 12px 14px 0; }
.ct-name { color: inherit; }
.ct-name:hover { color: var(--brand-m); }
.cat-tile b { display: block; font-size: 13.5px; font-weight: 600; }
.cat-tile small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; min-height: 2.6em; }
/* The arrow that says the tile goes somewhere. */
.ct-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%;
  margin-top: 10px; padding: 8px 2px 12px; border-top: 1px solid var(--line-2);
}
.ct-arrow { color: #dbe4ee; display: inline-flex; transition: transform .18s, color .18s; }
.cat-tile:hover .ct-arrow { color: var(--brand-m); transform: translateX(3px); }
@media (max-width: 1180px) { .catgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .catgrid { grid-template-columns: repeat(2, 1fr); gap: 9px; } .ct-body { padding: 10px 10px 0; } .ct-media { aspect-ratio: 1 / 1; } }

/* The product a shopper picked on the front page, shown at the top of its category.
   It is marked so it can be told apart from the rest of the listing. */
.pcard.is-pinned { border-color: var(--brand-m); box-shadow: 0 0 0 2px rgba(0, 111, 215, .18), var(--shadow); }
.pcard-pin {
  position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--brand-m);
  box-shadow: 0 2px 8px rgba(0, 40, 100, .4);
}

/* ---------------------------------------------------------- product grid */
.pgrid { display: grid; gap: 14px; }
.pgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1040px) { .pgrid.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .pgrid.cols-4, .pgrid.cols-3 { grid-template-columns: repeat(2, 1fr); } .pgrid { gap: 10px; } }

.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; transition: .16s; color: var(--ink);
}
.pcard:hover { border-color: #c9d8dd; box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.pcard-media { position: relative; aspect-ratio: 1/1; background: var(--line-2); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.pcard:hover .pcard-media img { transform: scale(1.035); }
.pcard-badge {
  position: absolute; top: 8px; left: 8px; background: rgba(16, 22, 25, .82); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
}
.pcard-off { position: absolute; top: 8px; right: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 3px; }
.pcard-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard-brand { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; }
.pcard-title {
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 36px; margin: 0;
}
.pcard-price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 4px; }
.pcard-price .now { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.pcard-price .was { font-size: 11.5px; color: var(--ink-3); text-decoration: line-through; }
.pcard-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--ink-3); border-top: 1px solid var(--line-2); padding-top: 6px; margin-top: 3px; }
.pcard-meta .rep { color: var(--green); font-weight: 600; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 620;
  border: 1.5px solid transparent; cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-m); color: #fff; }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #232f36; color: #fff; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 7px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { height: 48px; font-size: 15px; padding: 0 26px; }

/* ------------------------------------------------------------------ pills */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 5px; letter-spacing: .01em; }
.tone-ok { background: #e8f5ee; color: var(--green); }
.tone-warn { background: var(--amber-bg); color: #a86a12; }
.tone-info { background: var(--brand-l); color: var(--brand-d); }
.tone-muted { background: #f0f2f4; color: var(--ink-3); }
.tone-red { background: #fdeceb; color: var(--red); }

.alert { border-radius: 8px; padding: 12px 16px; font-size: 13.5px; margin: 0 0 16px; border: 1px solid; }
.alert.tone-ok { background: #eef8f2; border-color: #cfeadd; color: #14603f; }
.alert.tone-warn { background: var(--amber-bg); border-color: #f0dcbc; color: #8a560d; }
.alert.tone-red { background: #fdeeed; border-color: #f5cfcc; color: #99241d; }
.alert.tone-info { background: var(--brand-l); border-color: #c3d6ec; color: var(--brand-d); }
.alert-page { margin-top: 16px; }

/* ---------------------------------------------------------------- crumb */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); padding: 16px 0 0; flex-wrap: wrap; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand); }
.crumb .sep { opacity: .5; }
.crumb [aria-current] { color: var(--ink-2); }

/* -------------------------------------------------------------- layout 2c */
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; padding-top: 18px; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; gap: 14px; } }

.facets { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 0; position: sticky; top: 120px; }
.facet { border-bottom: 1px solid var(--line-2); padding: 14px 16px; }
.facet:last-child { border-bottom: 0; }
.facet h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 0 0 10px; font-weight: 700; }
.facet a, .facet label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 5px 0; cursor: pointer; }
.facet a.is-on { color: var(--brand); font-weight: 650; }
.facet .count { font-size: 11px; color: var(--ink-3); }
.facet input[type=number] { width: 78px; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: 12.5px; }
.price-row { display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) {
  .facets { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .facet { border-bottom: 1px solid var(--line-2); }
}

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .count { font-size: 13px; color: var(--ink-3); }
.select { height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 10px; font-size: 13px; }

/* ---------------------------------------------------------------- Pager */
.pager { display: flex; gap: 6px; justify-content: center; margin: 28px 0 0; flex-wrap: wrap; }
.pg { min-width: 36px; height: 36px; padding: 0 11px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: #fff; color: var(--ink-2); }
.pg:hover { border-color: var(--brand); color: var(--brand); }
.pg.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; }
.pg.is-off { opacity: .4; }

/* ----------------------------------------------------------- product page */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 20px 0 0; align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 20px; } }

.gallery { position: sticky; top: 120px; }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery-main { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; aspect-ratio: 1/1; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.gallery-thumbs button { width: 68px; height: 68px; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; background: #fff; cursor: pointer; }
.gallery-thumbs button.is-on { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.pdp h1 { font-size: 25px; line-height: 1.28; margin: 6px 0 12px; }
.pdp-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stars { display: inline-flex; gap: 1px; color: #e0a32a; vertical-align: -2px; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 6px; }
.pdp-price { font-size: 30px; font-weight: 720; letter-spacing: -.02em; }
.pdp-was { font-size: 16px; color: var(--ink-3); text-decoration: line-through; }
.pdp-save { font-size: 12px; color: var(--red); font-weight: 650; background: #fdeceb; padding: 2px 7px; border-radius: 4px; }
.pdp-ship-note { font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; }

/* variation choice list — read off the supplier's sku matrix, informative until the cart takes a variant */
.pdp-choice { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 13px 15px; margin: 0 0 18px; }
.choice-axis { display: flex; gap: 10px; align-items: baseline; margin-bottom: 9px; }
.choice-key { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; min-width: 58px; }
.choice-vals { display: flex; flex-wrap: wrap; gap: 6px; }
/* A chip is a button: the value is the thing being chosen, so the whole chip is the hit
   area. The selected state is a filled border rather than a tick alone, because a tick on
   a white chip at this size reads as an icon, not as "this is the one". */
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 7px; padding: 5px 10px;
  font-size: 12.5px; font-weight: 600; background: #fff; color: var(--ink);
  text-align: left; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chip:hover:not(:disabled) { border-color: var(--brand-m); }
.chip:focus-visible { outline: 2px solid var(--brand-m); outline-offset: 2px; }
.chip.is-on { border-color: var(--brand); background: var(--brand-l); color: var(--brand-d); box-shadow: inset 0 0 0 1px var(--brand); }
.chip.is-on::after { content: "✓"; font-size: 11px; font-weight: 700; color: var(--brand); }
/* Unavailable: the combination exists on the source page but this shop cannot sell it —
   out of stock, or off sale. Dimmed and struck through, and not tappable. */
.chip.is-out, .chip:disabled { color: var(--ink-3); border-style: dashed; text-decoration: line-through; cursor: not-allowed; opacity: .7; }
.chip-sw { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; border: 1px solid var(--line); flex: 0 0 auto; }
.choice-note { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 0; }
.choice-error { font-size: 12px; font-weight: 600; color: var(--red); margin: 7px 0 0; }
.desc-strip { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.desc-strip.is-alone { margin-top: 0; }
.desc-strip img { display: block; width: 100%; height: auto; }

/* freight / landed cost */
.cost { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; margin: 0 0 18px; }
.cost-head { padding: 13px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fafcfc; }
.cost-head b { font-size: 13.5px; }
.cost-head span { font-size: 11.5px; color: var(--ink-3); }
.cost-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; }
.cost-mode {
  border: 1.5px solid var(--line); border-radius: 9px; padding: 10px 11px; cursor: pointer;
  position: relative; transition: .14s; background: #fff;
}
.cost-mode:hover { border-color: #c3d6ec; }
.cost-mode input { position: absolute; opacity: 0; pointer-events: none; }
.cost-mode b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.cost-mode span { font-size: 11px; color: var(--ink-3); display: block; }
.cost-mode .cm-days { font-size: 11px; color: var(--brand); font-weight: 650; margin-top: 5px; }
.cost-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-l); }
.cost-mode:has(input:checked) b { color: var(--brand-d); }
.cost-lines { padding: 4px 16px 14px; }
.cost-line { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; color: var(--ink-2); }
.cost-line.is-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cost-line .muted { color: var(--ink-3); font-size: 12px; }
.paysplit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.paysplit > div { background: #fafcfc; padding: 12px 16px; }
.paysplit .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; }
.paysplit .amt { font-size: 17px; font-weight: 700; color: var(--ink); }
.paysplit .sub { font-size: 11px; color: var(--ink-3); }
.paysplit > div:first-child .amt { color: var(--brand); }

.qty-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.stepper { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { width: 38px; height: 42px; border: 0; background: #fff; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; }
.stepper button:hover { background: var(--line-2); }
.stepper input { width: 52px; height: 42px; border: 0; text-align: center; font-weight: 650; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.moq-note { font-size: 12px; color: var(--ink-3); }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 9px 12px; width: 42%; background: #fafcfc; border-bottom: 1px solid var(--line-2); }
.spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin: 0 0 16px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; }
.panel > p:last-child, .panel > ul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ cart */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; padding-top: 18px; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cart-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line-2); align-items: center; }
.cart-row:last-child { border-bottom: 0; }
.cart-row img { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line-2); }
.cart-row h4 { font-size: 13.5px; font-weight: 550; line-height: 1.4; margin: 0 0 5px; }
.cart-row .sub { font-size: 11.5px; color: var(--ink-3); }
/* The variation the buyer picked, on its own line above the SKU row — it is the thing
   they will check first, and it must not be lost inside the metadata string. */
.cart-row .cart-spec { color: var(--ink-2); font-weight: 600; margin-bottom: 3px; }
.cart-row .line-price { font-weight: 700; font-size: 15px; text-align: right; }
.cart-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.link-danger { font-size: 12px; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 0; }
.link-danger:hover { color: var(--red); }

.summary { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); position: sticky; top: 120px; overflow: hidden; }
.summary-head { padding: 16px 18px; border-bottom: 1px solid var(--line-2); font-weight: 650; font-size: 14px; }
.summary-body { padding: 14px 18px; }
.summary-line { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; color: var(--ink-2); }
.summary-line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 17px; font-weight: 700; color: var(--ink); }
.summary-foot { padding: 0 18px 18px; }
@media (max-width: 900px) { .summary { position: static; } }

/* --------------------------------------------------------------- checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; padding-top: 18px; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: auto; } }

.field { display: block; margin-bottom: 0; }
.field > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field > span b { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px;
  background: #fff; font-size: 14px; transition: .14s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 74, 140, .12);
}
.field small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.field textarea { resize: vertical; min-height: 84px; }

.radio-cards { display: grid; gap: 8px; }
.radio-card { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--line); border-radius: 9px; padding: 11px 13px; cursor: pointer; background: #fff; }
.radio-card:hover { border-color: #c3d6ec; }
.radio-card input { accent-color: var(--brand); width: 16px; height: 16px; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-l); }
.radio-card b { display: block; font-size: 13px; }
.radio-card span { font-size: 11.5px; color: var(--ink-3); }
.radio-card .rc-right { margin-left: auto; font-size: 12px; color: var(--brand); font-weight: 650; white-space: nowrap; }

/* ----------------------------------------------------------------- order */
.order-head { background: var(--brand); color: #fff; border-radius: var(--r-lg); padding: 26px 28px; margin: 20px 0 20px; }
.order-head h1 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.order-head p { color: rgba(255, 255, 255, .82); margin: 0; font-size: 13.5px; }
.order-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: rgba(255, 255, 255, .16); padding: 4px 9px; border-radius: 5px; display: inline-block; margin-bottom: 12px; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 18px; position: relative; }
.timeline li:not(:last-child):before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1.5px; background: var(--line); }
.timeline .dot { width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; position: relative; z-index: 1; color: #fff; }
.timeline li.done .dot { background: var(--brand); border-color: var(--brand); }
.timeline li.current .dot { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-l); }
.timeline b { font-size: 13.5px; display: block; }
.timeline span { font-size: 12px; color: var(--ink-3); }

.pay-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-box { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: #fff; }
.pay-box.is-due { border-color: #f0dcbc; background: var(--amber-bg); }
.pay-box.is-paid { border-color: #cfeadd; background: #f2faf6; }
.pay-box .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.pay-box .amt { font-size: 22px; font-weight: 720; margin: 3px 0; }
.pay-box .note { font-size: 11.5px; color: var(--ink-3); }

/* ----------------------------------------------------------------- table */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; padding: 10px 12px; border-bottom: 1.5px solid var(--line); background: #fafcfc; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; }

/* The closing call on the front page: a shopper who has something specific in mind
   gets a way to say so, and the panel says so with a picture of what to send. */
.rfq-panel {
  position: relative; overflow: hidden; display: flex; gap: 18px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; padding: 22px 24px;
  border-radius: var(--r-lg); border: 1px solid #cfe4e7;
  background: linear-gradient(120deg, #eff6fc 0%, #e4eff8 52%, #fdf1e5 100%);
}
.rfq-panel::before {
  content: ''; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 176, 26, .3), transparent 68%);
}
.rfq-ico {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center;
  background: #fff; color: var(--brand); box-shadow: var(--shadow); position: relative;
}
.rfq-copy { flex: 1 1 300px; position: relative; }
.rfq-copy h3 { margin-bottom: 4px; }
.rfq-btn { position: relative; flex: 0 0 auto; }
@media (max-width: 560px) { .rfq-panel { padding: 18px; gap: 14px; } .rfq-btn { width: 100%; justify-content: center; } }

/* ------------------------------------------------------------------ misc */
.sect-tight { padding-top: 22px; }
.empty { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty-ico { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; background: var(--line-2); color: var(--ink-3); display: grid; place-items: center; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--ink-3); font-size: 13.5px; max-width: 46ch; margin: 0 auto 18px; }

.prose { max-width: 74ch; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.prose h2 { font-size: 19px; margin: 28px 0 10px; color: var(--ink); }
.prose h3 { margin: 22px 0 8px; }
.page-head { padding: 30px 0 6px; }
.page-head h1 { font-size: 27px; }
.page-head p { color: var(--ink-3); margin: 8px 0 0; max-width: 68ch; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; position: relative; }
.step .n { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-l); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; }
.step b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.step p { font-size: 12.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }
/* The four steps of the order, drawn as one run: the number becomes a filled marker and
   a dotted line carries the eye from one card to the next. */
.steps-flow .step .n {
  background: linear-gradient(140deg, var(--brand), var(--brand-m)); color: #fff;
  font-size: 12px; width: 26px; height: 26px;
  box-shadow: 0 4px 12px rgba(0, 61, 128, .28);
}
.steps-flow .step:not(:last-child)::after {
  content: ''; position: absolute; top: 30px; right: -14px; width: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.steps-flow .step:hover { border-color: #c2d6ef; box-shadow: var(--shadow); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .steps-flow .step:not(:last-child)::after { display: none; } }

.mode-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mode-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fafcfc; }
.mode-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.mode-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- auth */
.auth-wrap { max-width: 420px; margin: 48px auto 60px; padding: 0 20px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.auth-logo { margin-bottom: 18px; }
.auth-logo img { height: 52px; width: auto; }
.auth-card h1 { font-size: 22px; margin-bottom: 6px; }
.auth-card > p { color: var(--ink-3); font-size: 13.5px; margin-bottom: 20px; }
.auth-alt { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 18px; }

/* --------------------------------------------------------------- footer */
.ftr { background: var(--brand-navy); color: #a8b8d4; margin-top: 56px; padding: 44px 0 0; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; }
.f-col h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; font-weight: 700; }
.f-col ul { list-style: none; padding: 0; margin: 0; }
.f-col li { margin-bottom: 9px; }
.f-col a { color: #a9b7bd; font-size: 13.5px; }
.f-col a:hover { color: #fff; }
.f-about p { font-size: 13px; line-height: 1.6; color: #8fa0a7; margin: 14px 0 0; }
.brand-ftr .brand-txt b { color: #fff; }
.brand-ftr .brand-txt i { color: #8394b4; }
.brand-ftr .brand-bd { font-style: normal; color: var(--accent-l); }
.f-addr { display: flex; gap: 8px; align-items: flex-start; }
.f-lic { font-size: 11.5px; color: #7b8cad; border-top: 1px solid #16305c; padding-top: 10px; }
.ftr-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid #16305c; font-size: 12px; color: #8394b4; flex-wrap: wrap; }
@media (max-width: 900px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .f-about { grid-column: span 2; }
}
@media (max-width: 860px) { .ftr { margin-top: 36px; } }

/* ------------------------------------------------------------- error page */
.errpage { max-width: 460px; margin: 120px auto; text-align: center; padding: 0 20px; }
.err-code { font-size: 68px; font-weight: 800; color: var(--brand); letter-spacing: -.04em; line-height: 1; }
.errpage h1 { font-size: 20px; margin: 10px 0 8px; }
.errpage p { color: var(--ink-3); font-size: 14px; margin-bottom: 22px; }

/* --------------------------------------------------------------- utility */
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.right { text-align: right; }
.hr { height: 1px; background: var(--line); border: 0; margin: 18px 0; }

/* --------------------------------------------------------------- polish */
.sect-more { white-space: nowrap; }
.hero-dots span.is-on { background: var(--accent); }
.hero-dots span { transition: background .2s; }

/* --------------------------------------------------------- visual search */
.vs {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 22px 24px 20px; margin: 18px 0 22px;
  position: relative;
}
.vs [hidden] { display: none !important; }
.vs-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.vs-intro { max-width: 620px; }
.vs-kicker { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.vs-intro h2 { font-size: 24px; font-weight: 720; margin: 4px 0 6px; }
.vs-intro p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 560px; }
.vs-modes { display: inline-flex; gap: 4px; background: #f0f5fb; border-radius: 9px; padding: 4px; }
.vs-mode {
  border: 0; background: transparent; padding: 7px 17px; border-radius: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--ink-3); cursor: pointer;
}
.vs-mode.is-on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(6, 26, 61, .14); }

.vs-pane { margin-top: 16px; }
.vs-drop {
  display: block; border: 1.5px dashed #c6d7ea; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #f7fbff, #fff); padding: 24px 18px; text-align: center;
  transition: border-color .18s, background .18s, transform .18s;
}
.vs-drop:hover, .vs-drop.is-over { border-color: var(--brand-m); background: #eef7ff; }
.vs-drop.is-over { transform: scale(1.003); }
.vs-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vs-drop-ico { display: inline-flex; color: var(--brand-m); margin-bottom: 6px; }
.vs-drop b { display: block; font-size: 16px; }
.vs-drop p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }
.vs-drop small { display: block; margin-top: 8px; color: var(--ink-3); font-size: 11.5px; }
.vs-link { color: var(--brand-m); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

.vs-textrow { display: flex; gap: 9px; }
.vs-textrow input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 9px; background: #fbfdff; outline: none;
}
.vs-textrow input:focus { border-color: var(--brand-m); box-shadow: 0 0 0 3px rgba(0, 111, 215, .12); }

.vs-samples { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.vs-samples-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.vs-samp {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 4px;
  display: grid; gap: 2px; justify-items: center; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.vs-samp:hover { transform: translateY(-2px); border-color: #b9d2ee; box-shadow: 0 6px 16px rgba(6, 26, 61, .1); }
.vs-samp img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; }
.vs-samp em { font-style: normal; font-size: 10px; font-weight: 650; color: var(--ink-3); }
.vs-privacy { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }

.vs-scan {
  display: flex; gap: 28px; align-items: center; margin-top: 18px;
  background: linear-gradient(180deg, #f8fbff, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; position: relative; overflow: hidden;
}
.vs-scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #00b6ff, transparent);
  background-size: 38% 100%; background-repeat: no-repeat; animation: vs-sheen 2.2s linear infinite;
}
.vs-frame {
  position: relative; width: 236px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 13px;
  overflow: hidden; background: #0a1220; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(6, 26, 61, .22);
}
.vs-frame img { width: 100%; height: 100%; object-fit: cover; }
.vs-words { display: none; position: absolute; inset: 0; flex-direction: column; justify-content: center; padding: 22px; color: #eaf4ff; }
.vs-words span { font-family: Georgia, serif; font-size: 46px; line-height: .6; color: #5fb6ff; }
.vs-words p { margin: 12px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.vs-frame.is-words { background: linear-gradient(150deg, #0a1b33, #023d80 62%, #0a5aa8); }
.vs-frame.is-words .vs-words { display: flex; }
.vs-frame.is-words .vs-beam, .vs-frame.is-words .vs-ring { display: none; }
.vs-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(0, 12, 30, .3)); pointer-events: none; }
.vs-beam {
  position: absolute; left: -6%; right: -6%; top: -40%; height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 154, 254, .12) 45%, rgba(120, 220, 255, .55) 88%, #b9ecff 100%);
  border-bottom: 2px solid #d7f4ff; filter: blur(.5px); mix-blend-mode: screen;
  animation: vs-sweep 1.25s cubic-bezier(.45, 0, .55, 1) infinite;
}
.vs-corners i { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .85); }
.vs-corners i:nth-child(1) { top: 11px; left: 11px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.vs-corners i:nth-child(2) { top: 11px; right: 11px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.vs-corners i:nth-child(3) { bottom: 11px; left: 11px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.vs-corners i:nth-child(4) { bottom: 11px; right: 11px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.vs-ring { position: absolute; inset: 0; border-radius: 13px; border: 2px solid rgba(0, 154, 254, .55); animation: vs-ripple 1.45s ease-out infinite; pointer-events: none; }

.vs-side { flex: 1; min-width: 0; }
.vs-scan-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.vs-side h3 { font-size: 19px; margin-bottom: 12px; }
.vs-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.vs-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; font-size: 13.5px; color: var(--ink-3); transition: color .25s; }
.vs-steps li i { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #d8e2ef; flex: 0 0 auto; position: relative; transition: background .25s; }
.vs-steps li.on { color: var(--ink); font-weight: 600; }
.vs-steps li.on i { background: var(--brand-m); box-shadow: 0 0 0 0 rgba(0, 111, 215, .5); animation: vs-ping 1.4s infinite; }
.vs-steps li.done { color: var(--ink-2); }
.vs-steps li.done i { background: var(--green); }
.vs-steps li.done i::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.vs-bar { height: 5px; border-radius: 99px; background: #e8eff8; overflow: hidden; }
.vs-bar i {
  display: block; height: 100%; width: 4%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-m), #00b6ff 70%, #7ee0ff);
  box-shadow: 0 0 12px rgba(0, 154, 254, .5);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.vs-meta { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.vs-ghost {
  margin-top: 4px; border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.vs-ghost:hover { color: var(--ink); }

.vs-error { background: #fff6f5; border: 1px solid #f3d3d0; border-radius: 11px; padding: 14px 16px; margin-top: 16px; }
.vs-error b { color: #a32b22; font-size: 13.5px; }
.vs-error p { margin: 3px 0 10px; color: var(--ink-2); font-size: 13.5px; }

.vs-results { margin-top: 22px; scroll-margin-top: 130px; }
.vs-res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vs-res-head h2 { font-size: 22px; }
.vs-res-head p { margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.vs-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink);
  animation: vs-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.vs-card:hover { transform: translateY(-3px); border-color: #c9d8dd; box-shadow: 0 12px 28px rgba(6, 26, 61, .12); color: var(--ink); }
.vs-card.is-top { grid-column: span 2; }
.vs-card.is-top .vs-photo img { aspect-ratio: 16 / 10; }
.vs-photo { position: relative; background: #eef3f9; }
.vs-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vs-rank {
  position: absolute; top: 9px; left: 9px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 99px;
}
.vs-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.vs-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vs-body h3 { font-size: 14px; font-weight: 650; line-height: 1.3; }
.vs-meter { height: 4px; border-radius: 99px; background: #edf2f8; overflow: hidden; flex: 1; }
.vs-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #00a4ee); }
.vs-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vs-pct { font-size: 11px; font-weight: 700; color: var(--brand); }
.vs-cta { margin-top: 2px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.vs-card:hover .vs-cta { color: var(--brand-m); }
.vs-fine { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); }
.vs-none {
  margin: 4px 0 0; padding: 16px 18px; font-size: 14px; line-height: 1.6;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2);
}
.vs-none a { color: var(--brand); font-weight: 650; text-decoration: underline; }

.vs-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vs-divider::before, .vs-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

@keyframes vs-sweep { 0% { transform: translateY(0); } 100% { transform: translateY(385%); } }
@keyframes vs-sheen { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes vs-ripple { 0% { opacity: .65; transform: scale(1); } 70% { opacity: 0; transform: scale(1.035); } 100% { opacity: 0; transform: scale(1.035); } }
@keyframes vs-ping { 0% { box-shadow: 0 0 0 0 rgba(0, 111, 215, .5); } 70% { box-shadow: 0 0 0 7px rgba(0, 111, 215, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 111, 215, 0); } }
@keyframes vs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .vs { padding: 16px 14px; }
  .vs-intro h2 { font-size: 20px; }
  .vs-modes { width: 100%; }
  .vs-mode { flex: 1; }
  .vs-scan { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .vs-frame { width: 100%; max-width: 280px; margin: 0 auto; }
  .vs-card.is-top { grid-column: auto; }
  .vs-card.is-top .vs-photo img { aspect-ratio: 4 / 3; }
  .vs-privacy { margin-left: 0; width: 100%; }
  .vs-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .vs-body h3 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-beam, .vs-ring, .vs-scan::before, .vs-steps li.on i, .vs-card { animation: none !important; }
  .vs-bar i { transition: none; }
}

/* ============================================================ home feed ===
   The endless part of the home page: a shuffled grid, the picker that seeds it,
   and the sentinel site.js watches. Everything here is additive — the grid is the
   same .pgrid of .pcard the rest of the shop uses, so a card looks identical
   whichever page it was rendered on. */

.feed { padding-bottom: 40px; }
.feed .sect-head { margin-bottom: 14px; }

/* The picker, shown to a signed-in buyer who has not picked yet. */
.pick-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.pick-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pick-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.pick-head b svg { color: var(--accent); }
.pick-head span { font-size: 12.5px; color: var(--ink-3); }

.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pick-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 14px 7px 11px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pick-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-chip .pc-ico { display: inline-flex; color: var(--ink-3); transition: color .15s; }
.pick-chip:hover { border-color: #c9d8dd; color: var(--ink); }
.pick-chip.is-on, .pick-chip:has(input:checked) {
  border-color: var(--brand); background: var(--brand-l); color: var(--brand-d);
}
.pick-chip.is-on .pc-ico, .pick-chip:has(input:checked) .pc-ico { color: var(--brand); }
.pick-chip:focus-within { outline: 2px solid var(--brand-m); outline-offset: 2px; }

/* The sentinel. It sits below the grid and is what the observer watches; when there
   is nothing left it is replaced by the end note rather than left spinning. */
.feed-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px 0 0; min-height: 48px; }
.feed-spin { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.feed-spin svg { animation: feed-bob 1.1s ease-in-out infinite; }
.feed-done { font-size: 12.5px; color: var(--ink-3); margin: 0; text-align: center; }
.feed-done a { font-weight: 600; }

@keyframes feed-bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-3px); opacity: 1; } }

/* Cards arriving as the reader scrolls. Cheap on purpose: one opacity/translate
   transition, no layout thrash, and nothing at all under reduced motion. */
.feed .pcard.is-new { animation: feed-in .28s ease-out both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The seam between two rounds of the feed.
   Every listing wraps when the catalogue runs out, so the same products come back in a
   new order. A full-width row inside the grid says so once, quietly — without it, a
   repeat card reads as a bug rather than as a fresh shuffle. */
.feed-round {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.feed-round::before,
.feed-round::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.feed-round span { flex: 0 0 auto; }

/* A feed embedded in a page that already has its own heading — a category column, the
   search results, the strip under a product. It inherits the section rhythm it sits in
   rather than adding a second one. */
.feed-embed { padding-bottom: 0; }
.feed-embed .feed-more { margin-top: 22px; }
.pdp-similar { margin-top: 8px; }

/* The collapsed reference panel above the feed. */
.guide { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.guide > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 14px 18px; font-size: 14px; flex-wrap: wrap;
}
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary:hover { background: var(--line-2); }
.guide-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.guide-title svg { color: var(--brand); }
.guide-sub { font-size: 12.5px; color: var(--ink-3); flex: 1 1 auto; }
.guide-chev { color: var(--ink-3); transition: transform .2s; }
.guide[open] .guide-chev { transform: rotate(180deg); }
.guide-body { padding: 0 18px 18px; }
.guide-body .steps { margin-bottom: 18px; }

@media (max-width: 760px) {
  .guide-sub { display: none; }
  .pick-panel { padding: 14px; }
  .pick-chip { padding: 6px 11px 6px 9px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed .pcard.is-new, .feed-spin svg { animation: none !important; }
  .hero-art { animation: none !important; }
}

/* The picker on the signup card and the account page. Same chips as the home page,
   a different frame: the label is the .field label these forms already use, so the
   block reads as one more question in the form rather than a widget dropped into it. */
.pick-block { margin: 0 0 4px; }
.pick-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.pick-label b { font-weight: 600; color: var(--ink-3); }
.pick-note { font-size: 12px; color: var(--ink-3); margin: 0 0 9px; }
.auth-card .pick-chips { margin-bottom: 0; }
.auth-card .pick-chip { font-size: 12.5px; padding: 6px 12px 6px 10px; }
#interests .pick-chips { margin: 4px 0 12px; }