/* ============================================================
   Keibid — Landing redesign mockup
   Modern aesthetic inspired by autohaus.framer.website
   ============================================================ */

:root {
  --ink:        #28334a;   /* COHO slate-navy — the "blue" the client liked */
  --ink-soft:   #45506a;
  --muted:      #76819a;
  --line:       #e8ebf2;   /* cool hairline — lighter */
  --paper:      #ffffff;
  --cream:      #f5f7fb;   /* cool off-white */
  --tint:       #eef1f8;
  --accent:     #2874fc;   /* COHO-flavored vivid blue accent */
  --accent-ink: #ffffff;
  --accent-soft:#9fc2ff;   /* light azure for dark backgrounds */
  --accent-deep:#1b58d6;   /* deeper blue for links/hover on light */
  --dark:       #28334a;   /* dark section = COHO navy */

  --radius:     20px;
  --radius-sm:  12px;
  /* soft, layered elevation */
  --shadow-xs:  0 1px 2px rgba(20,28,46,.05), 0 4px 14px -8px rgba(20,28,46,.12);
  --shadow-sm:  0 1px 3px rgba(20,28,46,.05), 0 10px 26px -14px rgba(20,28,46,.18);
  --shadow:     0 2px 6px rgba(20,28,46,.05), 0 22px 48px -22px rgba(20,28,46,.26);

  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1320px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* Focus ring only on interactive elements — keeps non-interactive containers/sections
   from showing a stray full-width blue line when they receive programmatic focus. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
[tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
:focus { outline: none; }
section:focus, .section:focus, .container:focus, [tabindex="-1"]:focus { outline: none; }

/* Map only the ampersand (U+0026) to an elegant serif italic,
   so headings keep Space Grotesk but the "&" reads cleanly. */
@font-face {
  font-family: 'AmpSerif';
  src: local('Georgia Italic'), local('Times New Roman Italic'), local('Cambria Italic'), local('Georgia');
  unicode-range: U+0026;
}

h1, h2, h3, h4 {
  font-family: 'AmpSerif', var(--font-display), 'Inter', sans-serif;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 600;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

/* ---------- Eyebrow / shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  opacity: .55;
}
.section__head--center .eyebrow { justify-content: center; }
.eyebrow--light { color: rgba(255,255,255,.72); }

em { font-style: normal; color: var(--ink); }
.hero__title em { background: linear-gradient(transparent 60%, var(--accent-soft) 0); padding: 0 .04em; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btnpad: 12px 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btnpad);
  font-size: .92rem; font-weight: 600;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn { position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(40,51,74,.55); }
.btn--primary:hover { box-shadow: 0 12px 26px -10px rgba(40,116,252,.5); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
/* shine sweep */
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn--primary:hover::after { left: 140%; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { color: var(--muted); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }
.btn--light { color: #fff; border-color: rgba(255,255,255,.25); }
.btn--light:hover { background: #fff; color: var(--ink); border-color:#fff; }
.btn--sm { --btnpad: 9px 16px; font-size: .84rem; }
.btn--lg { --btnpad: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }

.link-quiet { font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.link-quiet:hover { color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,246,251,.74);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-scrolled { border-color: var(--line); background: rgba(244,246,251,.93); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display), sans-serif; font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.02em;
  color: var(--ink);
}
.brand__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ink); color: var(--accent-soft);
}
.brand__mark svg { width: 19px; height: 19px; }
.brand--light { color: #fff; }
.brand--light .brand__mark { background: var(--accent); color: var(--accent-ink); }

.nav__links { display: flex; gap: 34px; margin-inline: auto; }
.nav__links a { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); position: relative; transition: color .2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--ink); transition: width .25s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
/* active tab indicator */
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { width: 100%; background: var(--accent); }
.nav__drop-t { position: relative; }
.nav__drop-t.is-active { color: var(--ink); }
.nav__drop-t.is-active::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: 18px; }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* header: search, Resources dropdown, notifications */
.nav__links { margin-inline: 0; }
.nav__search {
  flex: 1 1 auto; max-width: 300px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 13px; height: 40px;
}
.nav__search svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.nav__search input { border: 0; background: none; outline: none; font-size: .9rem; width: 100%; color: var(--ink); font-family: inherit; }
.nav__search input::placeholder { color: var(--muted); }

.nav__drop { position: relative; display: inline-flex; align-items: center; }
.nav__drop-t {
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit; padding: 0; transition: color .2s;
}
.nav__drop-t:hover { color: var(--ink); }
.nav__drop-t svg { width: 13px; height: 13px; }
.nav__drop-m {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; min-width: 212px;
  display: none; flex-direction: column; z-index: 200;
}
/* transparent bridge so the menu stays open while the cursor crosses the gap */
.nav__drop-m::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__drop:hover .nav__drop-m,
.nav__drop:focus-within .nav__drop-m { display: flex; }
.nav__drop-m a { font-size: .9rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-soft); padding: 9px 12px; border-radius: 8px; }
.nav__drop-m a::after { display: none; }
.nav__drop-m a:hover { color: var(--ink); background: var(--tint); }
.nav__drop-m a:hover::after { width: 0; }

.nav__bell { position: relative; color: var(--muted); display: inline-flex; align-items: center; transition: color .2s; }
.nav__bell:hover { color: var(--ink); }
.nav__bell svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav__search { display: none; }
}

/* header: labels always one line; search flex-shrinks to absorb width */
.nav__inner { gap: 16px; }
.nav__links { gap: 20px; align-items: center; flex: 0 0 auto; }
.nav__links a, .nav__drop-t { white-space: nowrap; }
.nav__search { flex: 0 1 240px; min-width: 0; margin-left: auto; }
.nav__actions { gap: 12px; flex: 0 0 auto; }
.nav__actions .link-quiet { white-space: nowrap; }
.btn { justify-content: center; text-align: center; }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 28px;
  background: var(--cream); border-bottom: 1px solid var(--line);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { padding: 12px 4px; font-weight: 500; font-size: 1.05rem; }
.mobile-menu hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.mobile-menu .btn { margin-top: 6px; }
/* Resources is a collapsible group on mobile (native <details>) so its sub-pages are
   reachable from the menu instead of jumping straight to one page. */
.mobile-menu__group { display: flex; flex-direction: column; }
.mobile-menu__group summary {
  list-style: none; cursor: pointer; padding: 12px 4px;
  font-weight: 500; font-size: 1.05rem; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 4px; opacity: .55;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.mobile-menu__group[open] summary::after { transform: rotate(-135deg); }
.mobile-menu__group a { padding-left: 20px; font-size: .98rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: 30px; overflow: hidden; }
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(80px); opacity: .4; pointer-events: none;
}
.hero::before { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(40,116,252,.35), transparent 70%); animation: blob 18s ease-in-out infinite; }
.hero::after  { width: 420px; height: 420px; bottom: 40px; left: -160px; background: radial-gradient(circle, rgba(159,194,255,.5), transparent 70%); animation: blob 22s ease-in-out infinite reverse; }
@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,30px) scale(1.12); }
  66%     { transform: translate(-30px,20px) scale(.94); }
}
.hero > .container { position: relative; z-index: 1; }
.hero .marquee { position: relative; z-index: 1; }

/* giant editorial title */
.hero__title {
  font-size: clamp(1.7rem, 4.7vw, 4.1rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  margin-top: 18px; white-space: nowrap;
}
.hero__title em {
  background: linear-gradient(100deg, #2874fc 0%, #7aa0ff 42%, #2874fc 68%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 4.5s linear infinite;
}
@keyframes sheen { to { background-position: 220% center; } }

/* lead row: copy left, CTA bottom-right */
.hero__lead { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-top: 34px; flex-wrap: wrap; }
.hero__lead p { font-size: 1.14rem; color: var(--ink-soft); max-width: 44ch; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }

/* wide cinematic media */
.hero__media { position: relative; margin-top: 44px; }
.hero__media > img {
  width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: center 42%;
  border-radius: 24px; box-shadow: var(--shadow);
}
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-sm);
}
.hero__card {
  position: absolute; left: 26px; bottom: 26px;
  padding: 16px 20px; border-radius: 16px; min-width: 252px;
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero__card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 10px; font-weight: 600; }
.hero__card-row strong { font-family: var(--font-display); font-size: 1.25rem; }
.hero__card-meta { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* stats strip */
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__stats > div { padding: 24px 24px 24px 0; }
.hero__stats > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.hero__stats > div strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.hero__stats > div span { font-size: .82rem; color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 100px; background: var(--ink); color: #fff;
}
.tag--live { background: #15803d; }
.tag--sold { background: var(--accent); }
.tag--ended { background: #64748b; }
.tag--live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #6ee7a0; }
/* Pulse the ring with transform+opacity on a pseudo-element instead of an animated
   box-shadow. box-shadow animates a painted property, forcing the rounded card clip to
   re-rasterise every frame near the corner — that paint pressure is what makes the LIVE
   badge clip while scrolling. transform/opacity composite, so no per-frame repaint. */
.tag--live i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #6ee7a0; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{ transform: scale(1); opacity: .7; } 70%,100%{ transform: scale(2.8); opacity: 0; } }

/* marquee */
.marquee { border-block: 1px solid var(--line); padding: 18px 0; overflow: hidden; margin-top: 20px; }
.marquee__track { display: flex; gap: 30px; white-space: nowrap; width: max-content; animation: scroll 26s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); letter-spacing: -.01em; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============================================================
   HERO BANNER (full-bleed, image background)
   ============================================================ */
.banner {
  position: relative;
  min-height: clamp(560px, 84vh, 840px);
  display: flex; align-items: flex-end;
  overflow: hidden; color: #fff;
}
.banner__bg { position: absolute; inset: 0; z-index: 0; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transform: scale(1.04); animation: bannerPan 26s ease-in-out infinite alternate; }
@keyframes bannerPan { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.12) translateX(-2%); } }
.banner__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,18,32,.78) 0%, rgba(12,18,32,.35) 46%, transparent 70%),
    linear-gradient(180deg, rgba(15,22,38,.5) 0%, transparent 28%, rgba(10,16,30,.82) 100%);
}
.banner__inner { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: 62px; }
.banner__title {
  font-family: var(--font-display), 'Inter', sans-serif;
  font-size: clamp(2.3rem, 6vw, 4.7rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.03em;
  max-width: 17ch; margin-top: 16px;
  text-shadow: 0 2px 34px rgba(0,0,0,.4);
}
.banner__title em { color: var(--accent-soft); font-style: normal; }
.banner__sub { margin-top: 20px; font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(255,255,255,.86); max-width: 50ch; line-height: 1.55; }
.banner__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.banner__card { position: absolute; right: 0; bottom: 62px; left: auto; min-width: 256px; color: var(--ink); }

/* ---------- How-it-works hero (light, photo right / text left) ---------- */
.hiw-hero { position: relative; overflow: hidden; background: var(--paper); isolation: isolate; }
.hiw-hero__photo { position: absolute; inset: 0; z-index: 0; }
.hiw-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hiw-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  /* Readable scrim over the text column on the left, fading to transparent so the
     trucks stay visible toward the right. */
  background:
    linear-gradient(90deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.78) 24%, rgba(255,255,255,.48) 34%, rgba(255,255,255,.15) 42%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,.38) 0%, transparent 16%, transparent 76%, rgba(245,247,251,.45) 89%, rgba(245,247,251,.9) 97%, #f5f7fb 100%);
}
.hiw-hero__inner {
  position: relative; z-index: 1;
  /* Left-align to the viewport (not the centered 1320 container) so the text doesn't
     drift far right on wide screens; capped offset keeps it tidy. */
  max-width: none;
  padding-left: clamp(24px, 6vw, 120px);
  min-height: clamp(520px, 64vh, 680px);
  display: flex; align-items: center;
  padding-top: 64px; padding-bottom: 64px;
}
.hiw-hero__text { max-width: 540px; }
.hiw-hero__title {
  font-family: var(--font-display), 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink); margin: 6px 0 0;
}
.hiw-hero__accent { color: var(--accent); }
.hiw-hero__sub {
  margin-top: 20px; font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--muted); line-height: 1.55; max-width: 42ch;
}
.hiw-hero__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 34px; max-width: 600px;
}
.hiw-card {
  display: block; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px 22px 22px; box-shadow: var(--shadow-xs);
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.hiw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent-soft); }
.hiw-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #e8f0ff; color: var(--accent); margin-bottom: 16px;
}
.hiw-card__icon svg { width: 22px; height: 22px; }
.hiw-card__title { font-size: 1.18rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; }
.hiw-card__desc { font-size: .95rem; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.hiw-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--accent); }
.hiw-card__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.hiw-card:hover .hiw-card__link svg { transform: translateX(4px); }

@media (max-width: 980px) {
  .hiw-hero__photo img { object-position: 64% 50%; }
  .hiw-hero__photo::after {
    background:
      linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.76) 30%, rgba(255,255,255,.5) 55%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.08) 100%),
      linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 30%, rgba(255,255,255,.72) 100%);
  }
}
@media (max-width: 640px) {
  .hiw-hero__photo img { object-position: 58% 40%; transform: none; }
  .hiw-hero__photo::after {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.7) 82%, rgba(245,247,251,.92) 96%, #f5f7fb 100%);
  }
  .hiw-hero__inner { min-height: 0; padding-top: 46px; padding-bottom: 46px; }
  .hiw-hero__cards { grid-template-columns: 1fr; gap: 14px; max-width: none; }
}

/* ============================================================
   SECTIONS / layout helpers
   ============================================================ */
.section { padding: 100px 0; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--dark); color: #fff; }
.section--dark .section__title { color: #fff; }
.hero-meta { padding-top: 40px; padding-bottom: 8px; }
.hero-meta .hero__stats { margin-top: 0; }
.hero-meta + .section { padding-top: 40px; }

.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 46px; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__title { font-size: clamp(2rem, 3.8vw, 3.05rem); font-weight: 700; letter-spacing: -.03em; }
.section__head p, .section__sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: 6px; max-width: 52ch; }

.grid { display: grid; gap: 24px; }
.grid--cards { grid-template-columns: repeat(4, 1fr); }
.grid--three { grid-template-columns: repeat(3, 1fr); }
.grid--four  { grid-template-columns: repeat(4, 1fr); }
.grid--tools { grid-template-columns: repeat(4, 1fr); margin-bottom: 48px; }
.grid--posts { grid-template-columns: repeat(3, 1fr); }

/* ---------- Brand statement ---------- */
.statement { padding: 80px 0; background: var(--cream); }
.statement__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4;
  letter-spacing: -.02em; max-width: 64rem; text-align: center; margin-inline: auto;
  color: var(--ink-soft);
}
.statement__text em { color: var(--ink); }

/* ============================================================
   AUCTION CARDS
   ============================================================ */
.card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  /* Keep the card on its own composited layer. Without this, the rounded overflow:hidden
     clip is re-rasterised every scroll frame and some browsers momentarily shave the top of
     content sitting near a corner (the LIVE badge) — a clip that only shows while scrolling.
     A stable layer keeps the rounded mask pinned to the card so the clip never drifts. */
  will-change: transform;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
/* While the page is scrolling, cards slide under a stationary cursor and would otherwise
   toggle their :hover lift on and off — reading as cards bobbing/clipping independently of
   the page. Dropping pointer-events during the scroll (the .is-scrolling flag is set by
   script.js and cleared shortly after scrolling stops) keeps every card moving as one with
   the page; hover effects resume the moment scrolling settles. */
html.is-scrolling .card,
html.is-scrolling .sold,
html.is-scrolling .value,
html.is-scrolling .hiw-card { pointer-events: none; }
/* Pause the pulsing LIVE dot while scrolling — its infinite box-shadow animation forces a
   repaint every frame inside the rounded card clip, which is what makes the corner-clip
   glitch above show up. It resumes the moment scrolling stops. */
html.is-scrolling .tag--live i::before { animation-play-state: paused; }
/* B: media gradient overlay + quick-view hint on hover */
.card__media .tag, .card__media .card__time, .card__media .card__starts, .card__media .sold__tag { z-index: 3; }
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(15,22,38,.58), rgba(15,22,38,0) 56%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover .card__media::before { opacity: 1; }
.card__media::after {
  content: "View details →"; position: absolute; z-index: 2; left: 50%; bottom: 14px;
  transform: translate(-50%, 10px); opacity: 0; white-space: nowrap; pointer-events: none;
  background: rgba(255,255,255,.96); color: var(--ink);
  font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
  padding: 9px 17px; border-radius: 100px; box-shadow: var(--shadow-sm);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card__media::after { opacity: 1; transform: translate(-50%, 0); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; flex: 0 0 auto; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media .tag { position: absolute; top: 12px; left: 12px; }
.card__time { position: absolute; top: 12px; right: 12px; font-size: .74rem; font-weight: 600; color: #fff; background: rgba(14,15,13,.6); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 100px; }
.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card__row h3 { font-size: 1.12rem; }
.card__brand { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.card__spec { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.card__foot span { font-size: .74rem; color: var(--muted); display: block; }
.card__foot strong { font-family: var(--font-display); font-size: 1.25rem; }

/* ============================================================
   VALUE CARDS
   ============================================================ */
.value { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.value__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.value__icon svg { width: 26px; height: 26px; color: var(--accent-ink); }
.value h3 { font-size: 1.3rem; margin-bottom: 10px; }
.value p { color: var(--ink-soft); font-size: .98rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.how__media { position: relative; }
.how__media img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; border-radius: 26px; box-shadow: var(--shadow); }
.how__badge { position: absolute; right: -20px; top: 38px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; animation: float 7s ease-in-out infinite; }
.how__badge strong { font-family: var(--font-display); font-size: 2rem; }
.how__badge span { font-size: .82rem; color: var(--muted); line-height: 1.3; }

.steps { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); padding-top: 3px; }
.step h3 { font-size: 1.18rem; margin-bottom: 5px; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* ============================================================
   RECENTLY SOLD (dark)
   ============================================================ */
.sold { transition: transform .3s var(--ease); }
.sold:hover { transform: translateY(-5px); }
.sold__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; }
.sold__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); transition: transform .5s var(--ease); }
.sold:hover .sold__media img { transform: scale(1.06); }
.sold__tag { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-ink); padding: 5px 11px; border-radius: 100px; }
.sold h3 { font-size: 1.05rem; color: #fff; }
.sold__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--accent-soft); margin: 4px 0; }
.sold__meta { font-size: .82rem; color: rgba(255,255,255,.5); }

/* ============================================================
   SELL CTA
   ============================================================ */
.cta { position: relative; border-radius: 28px; overflow: hidden; padding: 78px 40px; text-align: center; }
.cta__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #28334a, #1b3c72 55%, #28334a); background-size: 180% 180%; animation: ctaShift 14s ease-in-out infinite; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(110,150,255,.4), transparent 48%), radial-gradient(circle at 15% 90%, rgba(40,116,252,.35), transparent 42%); }
@keyframes ctaShift { 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.cta__inner { position: relative; max-width: 660px; margin-inline: auto; color: #fff; }
.cta__title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 18px; }
.cta__sub { color: rgba(255,255,255,.74); font-size: 1.08rem; margin-bottom: 32px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.stars { color: #e0a82e; letter-spacing: 2px; font-size: .95rem; }
.quote blockquote { font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.quote__author { display: flex; align-items: center; gap: 13px; }
.quote__author .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--paper); box-shadow: 0 2px 8px rgba(10,28,61,.18); }
.quote figcaption strong { display: block; font-family: var(--font-display); }
.quote figcaption span { font-size: .85rem; color: var(--muted); }

/* ============================================================
   RESOURCES + BLOG
   ============================================================ */
.tool { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.tool h3 { font-size: 1.12rem; margin-bottom: 8px; }
.tool p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 14px; }
.tool span { font-size: .85rem; font-weight: 600; color: var(--ink); }

.post {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4/3; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,20,42,.88) 0%, rgba(8,20,42,.45) 36%, rgba(8,20,42,0) 64%);
}
/* subtle inner frame, like the reference */
.post::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--accent); }
.post:hover > img { transform: scale(1.06); }
.post__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 24px 24px 26px; }
.post__cat { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.82); }
.post h3 { font-size: 1.22rem; margin-top: 9px; line-height: 1.24; color: #fff; }
.post__date { display: block; margin-top: 10px; font-size: .82rem; color: rgba(255,255,255,.68); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-top: 72px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 56px; }
.footer__brand .brand { margin-bottom: 18px; }
.footer__brand p { max-width: 38ch; font-size: .95rem; }
.footer__rating { margin-top: 18px; font-size: .9rem; color: rgba(255,255,255,.85); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer__col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer__col a { display: block; padding: 7px 0; font-size: .94rem; color: rgba(255,255,255,.7); transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.7); }
.footer__legal { display: flex; gap: 24px; }
.footer__legal a { color: rgba(255,255,255,.7); transition: color .2s; }
.footer__legal a:hover { color: #fff; }

/* ============================================================
   PRODUCT DETAIL PAGE (single auction)
   ============================================================ */
.crumbs { display: flex; align-items: center; gap: 10px; padding: 22px 0 6px; font-size: .85rem; color: var(--muted); }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }

.pdp { padding: 18px 0 80px; }
.pdp__grid { display: grid; grid-template-columns: 1.4fr .85fr; gap: 46px; align-items: start; min-width: 0; }
/* Grid items default to min-width:auto, which keeps them from shrinking below their
   content's min-content and blows the column past the viewport on mobile (clipped right
   edge). Allow the gallery and bid panel to shrink to the track. */
.pdp__grid > * { min-width: 0; }
.gallery, .gallery__thumbs { min-width: 0; }

/* gallery */
.gallery__main { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__live { position: absolute; top: 16px; left: 16px; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.gallery__thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, transform .2s; }
.gallery__thumbs img:hover { transform: translateY(-2px); }
.gallery__thumbs img.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(40,116,252,.2); }

.pdp__section { margin-top: 42px; }
.pdp__section h2 { font-size: 1.4rem; margin-bottom: 14px; }
.pdp__section p { color: var(--ink-soft); margin-bottom: 12px; max-width: 62ch; }
.inline-link, .pdp__section a.inline-link { color: var(--accent-deep); font-weight: 600; }
.inline-link:hover { text-decoration: underline; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.spec { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.spec span:first-child { color: var(--muted); }
.spec span:last-child { font-weight: 600; }

.bidlog { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bidlog th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.bidlog td { padding: 13px 0; border-bottom: 1px solid var(--line); }
.bidlog tbody tr:first-child td { font-weight: 600; }
.bidlog td:nth-child(2) { font-family: var(--font-display); }
.bidlog td:last-child { color: var(--muted); text-align: right; }
.bidlog th:last-child { text-align: right; }

/* bid panel */
.panel { position: sticky; top: 92px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 24px; box-shadow: var(--shadow-sm); }
.panel__head { display: flex; justify-content: space-between; align-items: center; }
.panel__watch { font-size: .88rem; color: var(--ink-soft); cursor: pointer; }
.panel__watch:hover { color: var(--accent-deep); }
.panel__title { font-size: 1.7rem; margin-top: 16px; letter-spacing: -.02em; }
.panel__loc { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.panel__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 7px; }

.panel__timer { margin-top: 22px; }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd > div { background: var(--tint); border-radius: 12px; padding: 10px 4px; text-align: center; }
.cd strong { font-family: var(--font-display); font-size: 1.4rem; display: block; line-height: 1; }
.cd span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.panel__bid { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.panel__bid strong { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.panel__bidcount { text-align: right; }
.panel__bidcount strong { font-size: 1.3rem; }
.reserve { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: #15803d; background: #e7f6ec; border-radius: 100px; padding: 5px 12px; }
.reserve--pending { color: #92600a; background: #fdf0d6; }

.bidform { display: flex; gap: 10px; margin-top: 18px; }
.bidform input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 100px; font: inherit; font-size: .92rem; transition: border-color .2s, box-shadow .2s; }
.bidform input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.16); }
.bidform .btn { flex-shrink: 0; }
.bidform__hint { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.bidform__hint strong { color: var(--ink); }

.notice { display: flex; gap: 11px; align-items: flex-start; background: #fff8e6; border: 1px solid #f1e0a8; color: #7a5b00; border-radius: 12px; padding: 12px 14px; font-size: .84rem; line-height: 1.45; margin-top: 16px; }
.notice__ico { flex-shrink: 0; }

.premium { background: var(--tint); border-radius: 14px; padding: 15px 16px; margin-top: 14px; }
.premium__row { display: flex; justify-content: space-between; gap: 14px; font-size: .88rem; color: var(--ink-soft); padding: 4px 0; }
.premium__row strong { color: var(--ink); font-family: var(--font-display); }
.premium__note { font-size: .8rem; color: var(--muted); margin-top: 8px; line-height: 1.45; }

.panel__trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: .82rem; color: var(--ink-soft); }

/* current bid + high bidder — distinctive accent card at top of bid panel */
.bidnow { margin-top: 20px; background: #eff5ff; border: 1px solid #d3e2ff; border-radius: 14px; padding: 15px 17px; }
.bidnow__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bidnow__label { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-deep); font-weight: 700; }
.bidnow__label svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bidnow__count { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--accent-deep); background: #dceafe; border-radius: 100px; padding: 3px 11px; }
.bidnow__amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.bidnow__amount .woocommerce-Price-amount { font-family: inherit; }
.bidnow__leader { font-size: .86rem; color: var(--ink-soft); margin-top: 7px; }
.bidnow__leader strong { color: var(--accent-deep); font-weight: 700; }

/* bid feedback notices — below the Place Bid button (success = green, error = red, info = neutral) */
.panel__notices { margin-top: 14px; }
.panel__notices .woocommerce-notices-wrapper:empty { display: none; }
.panel__notices ul { margin: 0; padding: 0; }
.panel__notices li { list-style: none; }
.panel__notices .woocommerce-message,
.panel__notices .woocommerce-error,
.panel__notices .woocommerce-info {
	list-style: none; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px;
	border: 1px solid transparent; font-size: .86rem; line-height: 1.45; font-weight: 500;
}
.panel__notices .woocommerce-message { background: #e7f6ec; border-color: #b6e3c4; color: #15803d; } /* success */
.panel__notices .woocommerce-error   { background: #fdecec; border-color: #f3c4c4; color: #b42318; } /* failure */
.panel__notices .woocommerce-info    { background: var(--tint); border-color: var(--line); color: var(--ink-soft); } /* neutral / informational */
.panel__notices a { font-weight: 600; color: inherit; text-decoration: underline; }
.panel__notices .button { display: none; } /* hide WooCommerce's injected action buttons (e.g. "View cart") */
/* Bid feedback: the confirm button shows a "Placing bid…" loading state while the page
   reloads, and the result notice briefly flashes so the bidder clearly sees the outcome. */
.btn.is-loading, .bid_button.is-loading { opacity: .65; cursor: progress; pointer-events: none; }
.kb-flash { animation: kbFlash 1.5s var(--ease); }
@keyframes kbFlash { 0% { box-shadow: 0 0 0 0 rgba(40,116,252,.4); } 55% { box-shadow: 0 0 0 7px rgba(40,116,252,0); } 100% { box-shadow: 0 0 0 0 rgba(40,116,252,0); } }

/* watch-this-auction toggle — compact outline pill (overrides legacy box styling) */
.panel__watch .wsawl-link { margin: 0 !important; }
.panel__watch .wsawl-link a,
.panel__watch a.add-wsawl,
.panel__watch a.remove-wsawl {
	display: inline-flex !important; align-items: center; gap: 7px !important;
	width: auto !important; padding: 7px 14px !important;
	font-family: inherit !important; font-size: .82rem !important; font-weight: 600 !important; line-height: 1 !important;
	color: var(--ink-soft) !important; background: var(--paper) !important;
	border: 1px solid var(--line) !important; border-radius: 100px !important;
	box-shadow: none !important; cursor: pointer; white-space: nowrap;
	transition: border-color .2s, color .2s, background .2s;
}
.panel__watch .wsawl-link a:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.panel__watch a.remove-wsawl { color: var(--accent-deep) !important; background: #eff5ff !important; border-color: #cfe0ff !important; } /* active / watching state */
.panel__watch .wsawl-link a::before { width: 14px !important; height: 14px !important; background: currentColor !important; flex: 0 0 auto; }

/* My Account: watchlist + my bids */
.kb-acct-h { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 16px; color: var(--ink); }
.kb-acct-empty { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 20px; }
.kb-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
/* My Listings: 2-up grid + pagination */
.kb-acct-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .kb-acct-grid--2 { grid-template-columns: 1fr; } }
.kb-pager { display: flex; justify-content: center; gap: 6px; margin: 22px 0 4px; flex-wrap: wrap; }
.kb-pager__btn { min-width: 36px; height: 36px; padding: 0 11px; border: 1px solid var(--line); background: var(--paper); border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink-soft); }
.kb-pager__btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.kb-pager__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.kb-pager__btn:disabled { opacity: .4; cursor: default; }
/* Widen the My Account content area (use the full page container) */
.logged-in.woocommerce-account .container { max-width: 1320px; }
.logged-in.woocommerce-account .page-content--wc { max-width: none !important; width: 100% !important; }
.logged-in.woocommerce-account .woocommerce-MyAccount-content { max-width: none !important; }
.kb-acct-item { display: flex; flex-direction: column; min-width: 0; }
.kb-acct-item .kb-acct-card { flex: 1 1 auto; }
.kb-acct-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.kb-acct-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--accent); }

/* Seller listing actions (edit / cancel) */
.kb-acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.kb-mini { font-size: .8rem; font-weight: 600; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.kb-mini:hover { border-color: var(--ink); }
.kb-mini--danger { color: #c0392b; border-color: #f0c9c2; }
.kb-mini--danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.kb-mini:disabled { opacity: .5; cursor: default; }
.kb-acct-reqnote { font-size: .74rem; font-weight: 600; color: #92600a; background: #fdf0d6; border-radius: 6px; padding: 5px 9px; }

/* Edit-listing modal */
.kb-editmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kb-editmodal[hidden] { display: none; }
.kb-editmodal__back { position: absolute; inset: 0; background: rgba(15,22,38,.55); }
.kb-editmodal__panel { position: relative; z-index: 1; background: var(--paper); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(20,28,46,.45); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 26px 26px 22px; }
.kb-editmodal__x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.kb-editmodal__title { margin: 0 0 6px; font-size: 1.3rem; }
.kb-editmodal__note { margin: 0 0 14px; font-size: .85rem; color: #92600a; background: #fdf0d6; border-radius: 8px; padding: 9px 12px; }
.kb-editform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.kb-editfield { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.kb-editfield[data-field="title"], .kb-editfield[data-field="description"] { grid-column: 1 / -1; }
.kb-editfield input, .kb-editfield textarea { font: inherit; font-size: .92rem; font-weight: 400; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%; box-sizing: border-box; background: #fff; height: auto; }
.kb-editfield textarea { resize: vertical; min-height: 90px; }
.kb-editfield input:focus, .kb-editfield textarea:focus { outline: none; box-shadow: none; border-color: var(--accent); }
.kb-editfield.is-locked { opacity: .6; }
.kb-editfield.is-locked input, .kb-editfield.is-locked textarea { background: var(--tint); cursor: not-allowed; }
.kb-editfield__hint { font-weight: 500; color: #92600a; }
.kb-editform__msg { grid-column: 1 / -1; color: #c0392b; font-size: .85rem; }
.kb-editform__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@media (max-width: 560px) { .kb-editform { grid-template-columns: 1fr; } }

/* Styled confirm dialog (cancel a listing) */
.kb-confirm { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kb-confirm[hidden] { display: none; }
.kb-confirm__back { position: absolute; inset: 0; background: rgba(15,22,38,.55); }
.kb-confirm__panel { position: relative; z-index: 1; background: var(--paper); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(20,28,46,.45); width: 100%; max-width: 400px; padding: 24px 24px 20px; text-align: center; }
.kb-confirm__title { margin: 0 0 8px; font-size: 1.2rem; }
.kb-confirm__msg { margin: 0 0 20px; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.kb-confirm__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kb-confirm__yes { background: #c0392b; color: #fff; border-color: #c0392b; }
.kb-confirm__yes:hover { background: #a93226; border-color: #a93226; color: #fff; }
/* Toast notifications (top-right): green = success, red = error, blue = info */
#kb-toasts { position: fixed; top: 16px; right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px)); }
.kb-toast { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(20,28,46,.42); padding: 13px 14px; font-size: .9rem; color: var(--ink); line-height: 1.45; transform: translateX(120%); opacity: 0; transition: transform .32s var(--ease), opacity .32s var(--ease); }
.kb-toast.is-in { transform: none; opacity: 1; }
.kb-toast.is-out { transform: translateX(120%); opacity: 0; }
.kb-toast__msg { flex: 1; }
.kb-toast__x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: .8; cursor: pointer; padding: 0; flex: 0 0 auto; }
.kb-toast__x:hover { color: var(--ink); }
.kb-toast__ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; margin-top: 1px; }
.kb-toast--success { border-left-color: #15803d; }
.kb-toast--success .kb-toast__ico { background: #15803d; }
.kb-toast--success .kb-toast__ico::before { content: "\2713"; }
.kb-toast--error { border-left-color: #c0392b; }
.kb-toast--error .kb-toast__ico { background: #c0392b; }
.kb-toast--error .kb-toast__ico::before { content: "\2715"; }
.kb-toast--info { border-left-color: var(--accent); }
.kb-toast--info .kb-toast__ico { background: var(--accent); }
.kb-toast--info .kb-toast__ico::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
@media (max-width: 480px) { #kb-toasts { top: 12px; right: 12px; left: 12px; max-width: none; } }
.kb-acct-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--tint); }
.kb-acct-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-acct-card__body { padding: 12px 14px 14px; }
.kb-acct-card__title { display: block; font-weight: 600; color: var(--ink); font-size: .92rem; line-height: 1.3; margin-bottom: 10px; }
.kb-acct-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kb-acct-card__bid small { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.kb-acct-card__bid strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.kb-acct-card__time { font-size: .78rem; color: var(--muted); }
.kb-acct-stat { position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 100px; color: #fff; }
.kb-acct-stat--win { background: #15803d; }      /* winning */
.kb-acct-stat--out { background: #b42318; }       /* outbid */
.kb-acct-stat--won { background: var(--accent); } /* won */
.kb-acct-stat--lost { background: var(--muted); } /* did not win */
.kb-acct-stat--review { background: #92600a; } /* seller listing under review */
/* seller dashboard header (title + "List a truck") */
.kb-listings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kb-listings-head .btn--sm { padding: 9px 18px; font-size: .85rem; flex: 0 0 auto; }
.logged-in.woocommerce-account .kb-listings-head .btn { color: #fff !important; text-decoration: none !important; }
.logged-in.woocommerce-account .kb-listings-head .btn:hover { color: #fff !important; }

/* Seller hub: stats strip */
.kb-sell-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kb-sell-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; text-align: left; }
button.kb-sell-stat { cursor: pointer; font: inherit; transition: border-color .2s, transform .2s; }
button.kb-sell-stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.kb-sell-stat strong { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--ink); margin-bottom: 3px; }
.kb-sell-stat span { font-size: .76rem; color: var(--muted); }
.kb-sell-stat--btn strong { color: var(--accent-deep); }

/* Seller hub: sub-tabs */
.kb-sell-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.kb-sell-tab { background: none; border: 0; padding: 10px 16px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kb-sell-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.kb-sell-pane { display: none; }
.kb-sell-pane.is-active { display: block; }

/* Seller hub: status filter pills */
.kb-sell-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kb-pill { background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.kb-pill:hover { border-color: var(--ink); }
.kb-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Seller hub: buyer questions */
.kb-qa { display: flex; flex-direction: column; gap: 14px; }
.kb-qa__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.kb-qa__truck { display: inline-block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); text-decoration: none; margin-bottom: 8px; }
.kb-qa__truck:hover { text-decoration: underline; }
.kb-qa__meta { font-size: .82rem; color: var(--muted); margin-bottom: 3px; }
.kb-qa__meta strong { color: var(--ink); font-weight: 600; }
.kb-qa__q { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.kb-qa__q p, .kb-qa__reply p { margin: 0; }
.kb-qa__reply { border-left: 3px solid var(--accent-soft); background: var(--cream); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.kb-qa__you { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent); border-radius: 100px; padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }
.kb-qa__form { display: flex; gap: 10px; margin-top: 12px; align-items: flex-start; }
.kb-qa__form textarea { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; resize: vertical; box-sizing: border-box; }
.kb-qa__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.kb-qa__form .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .kb-sell-stats { grid-template-columns: repeat(2, 1fr); } }

/* Public seller profile (/seller/<id>/) */
.kb-seller { display: flex; align-items: center; gap: 20px; padding: 6px 0 4px; }
.kb-seller__av img, .kb-seller__av .avatar { width: 96px !important; height: 96px !important; min-width: 96px; max-width: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--line); }
.kb-seller__name { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin: 0 0 8px; }
.kb-seller__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kb-seller__since { color: var(--muted); font-size: .9rem; }
.kb-seller__stats { display: flex; gap: 14px; margin: 26px 0 6px; flex-wrap: wrap; }
.kb-seller__stats > div { flex: 1; min-width: 130px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; text-align: center; }
.kb-seller__stats strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.kb-seller__stats span { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kb-seller__h { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 36px 0 16px; }
.kb-reviews { display: flex; flex-direction: column; gap: 12px; }
.kb-review { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 14px 16px; }
.kb-review__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kb-review__stars { color: #f5b301; letter-spacing: 1px; }
.kb-review__by { font-weight: 600; color: var(--ink); font-size: .92rem; }
.kb-review__date { color: var(--muted); font-size: .82rem; }
.kb-review__text { margin: 6px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
@media (max-width: 560px) { .kb-seller { flex-direction: column; align-items: flex-start; } }
/* Seller rating badge (global, so it styles outside the rating widget too) */
.kb-rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ink); font-size: .9rem; }
.kb-rating__star { color: #f5b301; }
.kb-rating--none { color: var(--muted); font-weight: 500; font-size: .85rem; }

/* Blog — single article (clean reading view) + listing pagination */
.kb-article { padding: 0 0 56px; }
.kb-article__head { max-width: 760px; margin: 0 auto; }
.kb-article__cat { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-deep); margin: 16px 0 10px; }
.kb-article__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); margin: 0 0 14px; }
.kb-article__meta { color: var(--muted); font-size: .92rem; margin-bottom: 8px; }
.kb-article__media { max-width: 960px; margin: 26px auto 36px; }
.kb-article__media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.kb-article__body { max-width: 760px; margin: 0 auto; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.78; }
.kb-article__body > * + * { margin-top: 1.15em; }
.kb-article__body h2 { font-family: var(--font-display); font-size: 1.55rem; color: var(--ink); margin-top: 1.7em; line-height: 1.25; }
.kb-article__body h3 { font-size: 1.28rem; color: var(--ink); margin-top: 1.5em; }
.kb-article__body a { color: var(--accent-deep); text-decoration: underline; }
.kb-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.kb-article__body ul, .kb-article__body ol { padding-left: 1.4em; }
.kb-article__body li { margin: .45em 0; }
.kb-article__body blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin-left: 0; color: var(--ink); font-style: italic; }
.kb-article__foot { max-width: 760px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.kb-pagination { margin-top: 34px; text-align: center; }
.kb-pagination .nav-links { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.kb-pagination .page-numbers { display: inline-block; padding: 9px 15px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.kb-pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.kb-pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent-deep); }

/* Auction detail — Heads up + Recommended Services (upsell, always visible below the listing) */
.kb-rs { max-width: 1180px; margin: 0 auto; }
.kb-rs__heads { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.kb-rs__heads strong { font-size: 1.05rem; color: var(--ink); }
.kb-rs__heads p { margin: 8px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.65; }
.kb-rs__note { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.kb-rs__h { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); margin: 26px 0 14px; }
.kb-rs__list { display: flex; flex-direction: column; gap: 10px; }
.kb-rs__row { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 18px; transition: border-color .2s, box-shadow .2s; }
.kb-rs__row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.kb-rs__ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; background: #eff5ff; color: var(--accent-deep); display: grid; place-items: center; }
.kb-rs__ico svg { width: 22px; height: 22px; }
.kb-rs__txt { flex: 1; min-width: 0; }
.kb-rs__name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.kb-rs__desc { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.kb-rs__cta { color: var(--accent-deep); font-weight: 700; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.kb-rs__cta:hover { text-decoration: underline; }
.kb-rs__fine { font-size: .78rem; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 560px) { .kb-rs__row { flex-wrap: wrap; } .kb-rs__cta { flex: 1 1 100%; } }

/* seller / vendor card */
.vendor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 30px; box-shadow: var(--shadow-sm); }
.vendor__id { display: flex; align-items: center; gap: 16px; }
.avatar--lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vendor__id h3 { font-size: 1.4rem; margin-top: 2px; }
.vendor__meta { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.vendor__meta .stars { color: #e0a82e; margin-right: 6px; }
.vendor__blurb { color: var(--ink-soft); margin-top: 16px; max-width: 70ch; }
.vendor__actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ============================================================
   PDP — EXTRA BLOCKS (share bar, video, comments, callouts)
   ============================================================ */
.pdp__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0 2px; }
.backlink { font-size: .9rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.backlink:hover { color: var(--ink); }
.pdp__share { display: flex; gap: 10px; }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: 7px 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.chip-btn:hover { border-color: var(--ink); color: var(--ink); }

.videobox { display: grid; place-items: center; text-align: center; aspect-ratio: 16/7; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--tint); color: var(--muted); gap: 6px; padding: 24px; }
.videobox svg { width: 30px; height: 30px; color: var(--muted); }
.videobox strong { font-family: var(--font-display); color: var(--ink-soft); font-size: 1.05rem; }
.videobox span { font-size: .9rem; }

.ask { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.ask h3 { font-size: 1.1rem; margin-bottom: 3px; }
.ask p { font-size: .92rem; color: var(--ink-soft); }

.comments__empty { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; text-align: center; color: var(--ink-soft); }
.comments__empty strong { display: block; font-family: var(--font-display); color: var(--ink); margin-bottom: 4px; }
.comments__mod { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.comment-form { margin-top: 16px; }
.comment-form textarea { width: 100%; min-height: 96px; resize: vertical; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.16); }
.comment-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.comment-form__note { font-size: .82rem; color: var(--muted); }
.comment-list { display: flex; flex-direction: column; gap: 20px; margin: 18px 0 22px; }
.comment-item { display: flex; gap: 12px; }
.comment-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-item__body { flex: 1; }
.comment-item__head { display: flex; align-items: baseline; gap: 10px; }
.comment-item__head strong { font-size: .92rem; }
.comment-item__head .when { font-size: .78rem; color: var(--muted); }
.comment-item p { font-size: .92rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.comment-reply { margin-top: 14px; margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--line); }
.comment-reply .comment-item__head strong::after { content: "Seller"; margin-left: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-deep); background: var(--tint); padding: 2px 7px; border-radius: 100px; vertical-align: middle; }
.about-block { margin-top: 18px; }
.about-block h4 { font-size: .95rem; margin-bottom: 8px; }
.about-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.about-list li { position: relative; padding-left: 22px; font-size: .94rem; color: var(--ink-soft); }
.about-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.about-list--check li::before { content: "✓"; left: 0; top: 0; width: auto; height: auto; background: none; color: #15803d; font-weight: 700; font-size: .85rem; }

.grid--two { grid-template-columns: repeat(2, 1fr); }
.tool__arrow { color: var(--accent-deep); }

/* tabs */
.tabs { margin-top: 32px; }
.tabs__nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__btn { position: relative; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .96rem; color: var(--muted); padding: 12px 16px; white-space: nowrap; transition: color .2s; }
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-active { color: var(--ink); }
.tabs__btn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transition: transform .25s var(--ease); }
.tabs__btn.is-active::after { transform: scaleX(1); }
.tabs__btn .pill { display: inline-block; margin-left: 5px; font-size: .76rem; font-weight: 600; color: var(--muted); background: var(--tint); border-radius: 100px; padding: 1px 7px; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabs__panel .pdp__section:first-child { margin-top: 0; }

/* ============================================================
   HOMEPAGE — auctions + activity, snapshot, features, community
   ============================================================ */
/* live auctions + recent activity */
.auc-layout { display: grid; grid-template-columns: 1fr 322px; gap: 28px; align-items: start; }
.auc-layout .grid--cards { grid-template-columns: repeat(2, 1fr); }

.activity { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 92px; }
.activity__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.activity__head h3 { font-size: 1.05rem; }
.activity__head svg { width: 18px; height: 18px; color: var(--accent); }
.activity__item { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.activity__item img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.activity__item p { font-size: .86rem; line-height: 1.35; }
.activity__item p strong { font-weight: 600; }
.activity__time { font-size: .76rem; color: var(--muted); margin-top: 2px; display: block; }
.activity__more { display: inline-block; margin-top: 14px; font-size: .85rem; font-weight: 600; color: var(--accent-deep); }

/* carousel (3-up, prev/next) */
.head-actions { display: flex; align-items: center; gap: 14px; }
.carousel { position: relative; }
/* Flex (not grid-auto-columns) so the card width resolves reliably on first paint —
   percentage grid-auto-columns inside a scroll-snap container can mis-size until a reflow
   on some browsers (iOS Safari) and in responsive preview tools.
   snap-type is "proximity" (not "mandatory"): mandatory's first-paint layout pass mis-sizes
   the percentage flex-basis, so on mobile the next card's peek only appears after a swipe
   forces a reflow. proximity still snaps cleanly on a deliberate swipe without that glitch. */
.carousel__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 4px; margin: -4px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .card { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; scroll-snap-align: start; }
.carousel__nav { display: inline-flex; gap: 8px; }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.carousel__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.carousel__btn svg { width: 19px; height: 19px; }

/* recent activity as a full-width row under the carousel */
.activity--row { position: static; margin-top: 28px; }
.activity--row .activity__head { margin-bottom: 14px; }
.activity--row .activity__feed { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 26px; }
.activity--row .activity__item { border-top: 0; padding: 6px 0; }
.activity--row .activity__item p { font-size: .82rem; }

/* upcoming / recently listed cards */
.card__starts { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 600; background: rgba(40,51,74,.82); color: #fff; backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 100px; }
.card__when { font-size: .84rem; color: var(--muted); margin-top: 8px; }
.card__when strong { color: var(--ink); font-weight: 600; }

/* recently sold + market snapshot */
.sold-layout { display: grid; grid-template-columns: 1fr 344px; gap: 28px; align-items: start; }
.sold-layout .grid--cards { grid-template-columns: repeat(3, 1fr); align-content: start; }
.snapshot { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: 100px; }
.snapshot__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.snapshot__head h3 { font-size: 1.05rem; }
.snapshot__head span { font-size: .78rem; color: var(--muted); }
.snapshot__row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.snapshot__row .name { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.snapshot__row .name small { color: var(--muted); font-weight: 400; }
.snapshot__row .price { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.snapshot__row .trend { font-size: .78rem; font-weight: 700; min-width: 46px; text-align: right; }
.trend--up { color: #15803d; }
.trend--down { color: #c0392b; }
.spark { flex: 1; height: 26px; min-width: 40px; overflow: visible; }
.spark polyline { fill: none; stroke: #15803d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark--down polyline { stroke: #c0392b; }
.spark circle { fill: #15803d; }
.spark--down circle { fill: #c0392b; }

/* live bid ticker */
.ticker { display: flex; align-items: center; gap: 16px; background: var(--ink); color: #fff; border-radius: 100px; padding: 11px 20px; overflow: hidden; margin-bottom: 28px; }
.ticker__label { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; flex-shrink: 0; }
.ticker__label i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #6ee7a0; }
.ticker__label i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #6ee7a0; animation: pulse 1.8s infinite; }
.ticker__win { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { display: inline-flex; gap: 30px; white-space: nowrap; animation: scroll 34s linear infinite; }
.ticker__track span { font-size: .86rem; color: rgba(255,255,255,.7); }
.ticker__track strong { color: #fff; font-weight: 600; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* Simple Auctions native countdown (.countdown_*) — clean, professional layout: big number, small
   uppercase label below, even spacing (fixes oversized labels + crowded Minutes/Seconds). */
.countdown_row { display: inline-flex; gap: 16px; align-items: flex-start; }
.countdown_section { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #76819a); line-height: 1.2; }
.countdown_section br { display: none; }
.countdown_amount { font-family: var(--font-display, inherit); font-size: 1.7rem; font-weight: 700; color: var(--ink, #28334a); letter-spacing: -.01em; line-height: 1; margin-bottom: 5px; }
.snapshot__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.snapshot__stats strong { display: block; font-family: var(--font-display); font-size: 1.4rem; }
.snapshot__stats span { font-size: .73rem; color: var(--muted); }

/* why buyers love kei trucks */
.features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.feature { text-align: center; }
.feature__icon { width: 48px; height: 48px; border-radius: 13px; background: var(--tint); display: grid; place-items: center; margin: 0 auto 14px; }
.feature__icon svg { width: 23px; height: 23px; color: var(--accent); }
.feature h3 { font-size: 1.02rem; margin-bottom: 6px; }
.feature p { font-size: .86rem; color: var(--ink-soft); }

/* built by the kei community (instagram) */
.community { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.community__cell { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: block; }
.community__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.community__cell:hover img { transform: scale(1.08); }
.community__cta { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: var(--tint); border: 1px solid var(--line); border-radius: 14px; text-align: center; padding: 14px; }
.community__cta svg { width: 26px; height: 26px; color: var(--accent); }
.community__cta strong { font-size: .9rem; }
.community__cta span { font-size: .78rem; color: var(--accent-deep); font-weight: 600; }
.community__note { text-align: center; margin-top: 24px; font-size: .94rem; color: var(--ink-soft); }
.community__note a { color: var(--accent-deep); font-weight: 600; }

/* footer social */
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.social-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); transition: background .2s, color .2s, transform .2s; }
.social-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.social-btn svg { width: 18px; height: 18px; }

/* ============================================================
   LIVE AUCTIONS — listing/browse page
   ============================================================ */
/* Live Auctions hero — light banner with a dark stat bar (client mockup). */
.la-hero-section { padding-top: 26px; }
.la-hero { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper); }
.la-hero__main { position: relative; min-height: 440px; display: flex; align-items: center; overflow: hidden; }
.la-hero__photo { position: absolute; inset: 0; z-index: 0; }
.la-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.la-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  /* White wash over the left text column (fading right so the trucks stay clear) plus a
     soft bottom dissolve into the white card so the photo edge has no hard boundary. */
  background:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 22%, rgba(255,255,255,.74) 34%, rgba(255,255,255,.28) 45%, rgba(255,255,255,0) 54%),
    linear-gradient(180deg, transparent 58%, rgba(255,255,255,.35) 80%, rgba(255,255,255,.82) 93%, #fff 100%);
}
.la-hero__content { position: relative; z-index: 1; padding: 56px clamp(28px, 5vw, 64px); max-width: 600px; }
.la-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); background: #e8f0ff; border-radius: 100px; padding: 7px 15px;
}
.la-hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(40,116,252,.18); }
.la-hero__title {
  font-family: var(--font-display), 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.03;
  letter-spacing: -.03em; color: var(--ink); margin: 22px 0 0;
}
.la-hero__accent { color: var(--accent); }
.la-hero__sub { margin-top: 20px; font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--ink-soft); line-height: 1.55; max-width: 40ch; }
.la-hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.la-hero__cta .btn--primary { background: var(--accent); color: #fff; }
.la-hero__cta .btn--primary:hover { background: #1e63e6; color: #fff; }
.la-hero__cta .btn--outline { background: #fff; box-shadow: var(--shadow-xs); }

.la-hero__stats {
  background: #101a30; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding: 20px clamp(22px, 3vw, 36px); margin: 14px; border-radius: 16px;
}
.la-stat { display: flex; align-items: flex-start; gap: 12px; color: #fff; }
.la-stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(40,116,252,.16); color: var(--accent-soft); flex-shrink: 0;
}
.la-stat__icon svg { width: 18px; height: 18px; }
.la-stat__body { display: flex; flex-direction: column; min-width: 0; }
.la-stat__body strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.05; letter-spacing: -.01em; }
.la-stat__label { font-size: .84rem; font-weight: 600; margin-top: 2px; }
.la-stat__sub { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.3; }

/* Eyebrow icon + primary-button leading icon (Sell hero). */
.la-hero__eyebrow svg { width: 14px; height: 14px; }
.la-hero__cta .btn svg { width: 17px; height: 17px; }

/* Light (white) stat bar variant — used on the Sell hero. */
.la-hero__stats--light {
  background: var(--paper); align-items: center;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.la-hero__stats--light .la-stat { color: var(--ink); align-items: center; }
.la-hero__stats--light .la-stat__icon { background: #e8f0ff; color: var(--accent); border-radius: 50%; }
.la-hero__stats--light .la-stat__body strong { color: var(--ink); }
.la-hero__stats--light .la-stat__label { color: var(--muted); font-weight: 500; }
/* thin separators between stats (desktop/tablet) */
.la-hero__stats--light .la-stat + .la-stat { border-left: 1px solid var(--line); padding-left: 20px; }

.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px 0; }
/* Keyword search box in the filter bar (matches the dropdown/location pill styling). */
.kb-search { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 8px 14px; flex: 1 1 230px; min-width: 200px; max-width: 320px; transition: border-color .2s; }
.kb-search:hover { border-color: var(--ink); }
.kb-search:focus-within { border-color: var(--accent); }
.kb-search > svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.kb-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; outline: none; font-family: inherit; font-size: .9rem; color: var(--ink); height: auto; box-shadow: none; }
/* The pill already shows focus via :focus-within; suppress the input's own focus ring
   (a global input:focus outline) so a second blue box doesn't appear inside the pill. */
.kb-search__input:focus, .kb-search__input:focus-visible { outline: none; box-shadow: none; border: 0; }
.kb-search__input::placeholder { color: var(--muted); }
.filterbar__btn { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: 10px 16px; cursor: pointer; transition: border-color .2s; }
.filterbar__btn:hover { border-color: var(--ink); }
.selectish { display: inline-flex; flex-direction: column; line-height: 1.15; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 7px 32px 7px 14px; cursor: pointer; position: relative; }
.selectish span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.selectish strong { font-size: .9rem; font-weight: 600; }
.selectish::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-45%); color: var(--muted); font-size: .8rem; }
.toggle { display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 600; cursor: pointer; user-select: none; }
.toggle i { width: 38px; height: 22px; border-radius: 100px; background: #d4d8e2; position: relative; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.is-on i { background: var(--accent); }
.toggle.is-on i::after { transform: translateX(16px); }

.sortbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0 26px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.sortbar__opts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sortbar__label { font-size: .85rem; color: var(--muted); margin-right: 8px; }
.sortlink { font-size: .9rem; font-weight: 600; color: var(--muted); padding: 6px 11px; border-radius: 8px; cursor: pointer; background: none; border: 0; }
.sortlink.is-active { color: var(--accent); }
.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.viewtoggle button { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 8px 13px; background: var(--paper); border: 0; cursor: pointer; color: var(--muted); }
.viewtoggle button.is-active { background: var(--tint); color: var(--ink); }
.viewtoggle svg { width: 15px; height: 15px; }

/* "Load more" control under the full catalog grids (Live Auctions + Browse). */
.keibay-loadmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
.keibay-loadmore__btn {
  -webkit-tap-highlight-color: transparent;
  min-width: 190px; justify-content: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-weight: 600;
}
.keibay-loadmore__btn::after {
  content: ""; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.keibay-loadmore__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.keibay-loadmore__status { margin: 0; font-size: .85rem; font-weight: 500; color: var(--ink-soft); }

/* Mobile: the sort row's plain text links wrap into a ragged block. Restructure it into a
   tidy stack — "Sort by:" label, sort options as a 2-up pill grid, then the results count
   and grid/list toggle on their own row. (Shared by Live Auctions + Browse.) */
@media (max-width: 640px) {
  .sortbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 0 18px; margin-bottom: 22px; }
  .sortbar__opts { flex-wrap: wrap; gap: 8px; }
  .sortbar__label { width: 100%; margin: 0; font-weight: 600; }
  .sortlink { flex: 1 1 calc(50% - 4px); text-align: center; border: 1px solid var(--line); border-radius: 100px; padding: 9px 12px; background: var(--paper); }
  .sortlink.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
  .sortbar > div:last-child { width: 100%; justify-content: space-between; gap: 12px; }
  .sortbar > div:last-child strong { font-size: .85rem; line-height: 1.35; }
  .sortbar > div:last-child strong > span { white-space: nowrap; }
  .viewtoggle { flex: 0 0 auto; }
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: .72rem; font-weight: 600; color: var(--ink-soft); background: var(--tint); border-radius: 7px; padding: 4px 9px; }
.card__metarow { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.card__watch { display: inline-flex; align-items: center; gap: 5px; }
.card__reserve { display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 100px; margin-top: 10px; }
.card__reserve--met { color: #15803d; background: #e7f6ec; }
.card__reserve--no { color: #92600a; background: #fdf0d6; }

.ending-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; margin-top: 8px; align-items: stretch; }
.ending-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.ending-list h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 4px; }
.ending-list h3 svg { width: 18px; height: 18px; color: var(--accent); }
.ending-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.ending-row:first-of-type { border-top: 0; }
.ending-row img { width: 54px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ending-row .er-name { flex: 1; font-size: .9rem; font-weight: 600; }
.ending-row .er-loc { font-size: .8rem; color: var(--muted); font-weight: 400; display: block; }
.ending-row .er-time { font-size: .85rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ending-list__more { display: inline-block; margin-top: 14px; font-size: .85rem; font-weight: 600; color: var(--accent-deep); }

.assurances { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: space-evenly; }
.assurance { display: flex; gap: 12px; }
.assurance svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; }
.assurance h4 { font-size: .92rem; margin-bottom: 3px; }
.assurance p { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }

.band { display: flex; align-items: center; gap: 30px; position: relative; border-radius: var(--radius); padding: 32px 38px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #28334a, #1b3c72 60%, #28334a); }
.band img { width: 210px; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.band__text { flex: 1; }
.band__text h3 { color: #fff; font-size: 1.5rem; }
.band__text p { color: rgba(255,255,255,.78); margin-top: 6px; max-width: 52ch; }
.band .btn { flex-shrink: 0; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .tag--live i, .hero::before, .hero::after,
  .hero__card, .how__badge, .cta__bg, .hero__title em { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .grid--cards, .grid--four, .grid--tools { grid-template-columns: repeat(2, 1fr); }
  .auc-layout, .sold-layout { grid-template-columns: 1fr; }
  .activity, .snapshot { position: static; }
  .sold-layout .grid--cards { grid-template-columns: repeat(2, 1fr); }
  .carousel__track > .card { flex-basis: calc((100% - 24px) / 2); }
  .activity--row .activity__feed { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .features { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .community { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__inner .nav__mobile-social { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
  .nav__burger { display: flex; margin-left: 4px; }
  .hero__media > img { aspect-ratio: 3/2; }
  .banner { min-height: 0; }
  .banner__inner { padding-top: 56px; padding-bottom: 48px; }
  .banner__card { display: none; }
  .banner__bg::after { background: linear-gradient(180deg, rgba(15,22,38,.45) 0%, transparent 30%, rgba(10,16,30,.86) 100%); }
  .pdp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .panel { position: static; }
  .how { grid-template-columns: 1fr; gap: 40px; }
  .how__media { max-width: 460px; }
  .grid--three, .grid--posts, .grid--two { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .community { grid-template-columns: repeat(3, 1fr); }
  .carousel__track > .card { flex-basis: 82%; }
  .activity--row .activity__feed { grid-template-columns: 1fr; }
  .ending-grid, .assurances { grid-template-columns: 1fr; }
  .la-hero__main { min-height: 360px; }
  .la-hero__photo img { object-position: 66% 50%; }
  .la-hero__photo::after { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 92%); }
  .la-hero__content { padding: 40px 28px; }
  .la-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .la-hero__stats--light .la-stat + .la-stat { border-left: 0; padding-left: 0; }
  .band { flex-direction: column; align-items: flex-start; }
  .band img { width: 100%; }
  .section__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .grid--cards, .grid--four, .grid--tools { grid-template-columns: 1fr; }
  .sold-layout .grid--cards { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  /* Center the "Why Keibid" trust cards on mobile so their content matches the centered
     section heading (left-aligned content looks lopsided in a full-width single column). */
  .why-card { align-items: center; text-align: center; }
  .why-card__foot { align-self: stretch; justify-content: center; }
  .hero__title { white-space: normal; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats > div { padding: 18px 16px 18px 0; }
  .hero__stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__lead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__card { left: 14px; bottom: 14px; min-width: 0; right: 14px; }
  .la-hero__stats { grid-template-columns: 1fr; gap: 20px; }
  .la-hero__photo::after { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.35) 100%); }
  .snapshot { padding: 20px 16px; min-width: 0; }
  .snapshot__row { gap: 10px; min-width: 0; }
  .snapshot__row .name { white-space: normal; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__bar { flex-direction: column; gap: 14px; text-align: center; }
  .cta { padding: 56px 22px; }
}

/* Footer columns collapse into tap-to-expand accordions on phones — only the big category
   headings show; tapping one reveals its links. Desktop keeps the open columns. */
@media (max-width: 640px) {
  .footer__cols { grid-template-columns: 1fr; gap: 0; }
  .footer__col { border-top: 1px solid rgba(255,255,255,.12); }
  .footer__col h4 { margin: 0; padding: 16px 2px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  .footer__col h4::after { content: ""; width: 8px; height: 8px; margin-right: 4px; opacity: .6; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
  .footer__col.is-open h4::after { transform: rotate(-135deg); }
  .footer__col a { display: none; }
  .footer__col.is-open a { display: block; }
  .footer__col.is-open { padding-bottom: 12px; }
}

/* ============================================================
   Simple Auctions bid block — fitted into our auction panel
   ============================================================ */
.panel__sa { margin: 16px 0 4px; }
.panel__sa .auction-time, .panel__sa .main-auction, .panel__sa .auction-time-countdown { color: var(--ink); font-family: var(--font-display), sans-serif; }
.panel__sa .auction-time-countdown *, .panel__sa .main-auction * { color: var(--ink) !important; }
.panel__sa .reserve, .panel__sa .reserve.hold { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--accent-deep); background: var(--tint); border: 0; border-radius: 100px; padding: 7px 14px; margin: 12px 0; }
.panel__sa form.cart, .panel__sa .auction_form { margin: 14px 0 0; padding: 0; border: 0; background: none; }
.panel__sa .quantity, .panel__sa .quantity.buttons_added { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-width: 100%; background: #fff; }
.panel__sa .input-text.qty.bid, .panel__sa input.bid, .panel__sa input.qty { border: 0 !important; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--ink); padding: 13px 8px; width: 100%; background: none; box-shadow: none; }
.panel__sa .minus-bid, .panel__sa .plus-bid { background: var(--tint); border: 0; color: var(--ink); font-size: 1.25rem; line-height: 1; min-width: 46px; cursor: pointer; }
.panel__sa .minus-bid:hover, .panel__sa .plus-bid:hover { background: var(--line); }
.panel__sa .bid_button, .panel__sa button.bid_button, .panel__sa .auction_form .button.alt { display: block; width: 100%; background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 100px !important; padding: 15px 24px !important; font-weight: 600 !important; font-size: 1rem !important; cursor: pointer; margin-top: 12px !important; box-shadow: 0 8px 20px -10px rgba(40,51,74,.55); transition: background .25s; }
.panel__sa .bid_button:hover, .panel__sa .auction_form .button.alt:hover { background: var(--accent) !important; }
.panel__sa a.watchlist, .panel__sa .add_to_watchlist { color: var(--ink-soft); font-size: .9rem; }

/* Override legacy green bid-button styling on the auction detail (higher specificity than the injected rule) */
body.single-product .panel__sa .auction_form .bid_button.button,
body.single-product .panel__sa .auction_form .bid_button.button.alt {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
body.single-product .panel__sa .auction_form .bid_button.button:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   Restyle the legacy green "Sell your truck" (kse-) form to Keibid blue
   ============================================================ */
html body .kse-fsec { color: var(--accent-deep) !important; }
html body .kse-btn, html body button.kse-btn, html body .kse-btn.primary,
html body .kse-realform button[type="submit"], html body .kse-mob-cta { background: var(--ink) !important; color: #fff !important; }
html body .kse-btn:hover, html body button.kse-btn:hover, html body .kse-btn.primary:hover,
html body .kse-realform button[type="submit"]:hover { background: var(--accent) !important; }
html body .kse-realform input:focus, html body .kse-realform select:focus, html body .kse-realform textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(40,116,252,.14) !important; }
html body .kse-recap span { color: var(--accent-deep) !important; background: var(--tint) !important; border-color: #d7defa !important; }
html body .kse-drop:hover, html body .kse-drop.kse-drag { border-color: var(--accent) !important; background: #eef4ff !important; box-shadow: 0 0 0 3px rgba(40,116,252,.12) !important; }
html body .kse-drop .kse-drop-main b { color: var(--accent-deep) !important; }
html body .kse-orlinks summary { color: var(--accent-deep) !important; }
html body .kse-success { color: #1b58d6 !important; background: #eef4ff !important; border-color: var(--accent-soft) !important; }
html body .kse-startcard h3 .kse-accent, html body .kse-list-sub a { color: var(--accent-deep) !important; }

/* Widen the legacy design's boxed sections to match our container width */
html body .kb-hero-inner, html body .kb-section, html body .kse-fullwrap { max-width: var(--container) !important; }

/* ============================================================
   Generic page shell + content typography (Keibid design)
   ============================================================ */
.page-section { padding: 54px 0 80px; }
.page-hero { margin-bottom: 26px; }
.page-title { font-family: var(--font-display), sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.08; }
.page-content { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }
.page-content > * + * { margin-top: 1.05em; }
.page-content h2 { font-family: var(--font-display), sans-serif; font-size: 1.7rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-top: 1.5em; }
.page-content h3 { font-family: var(--font-display), sans-serif; font-size: 1.28rem; font-weight: 600; color: var(--ink); margin-top: 1.3em; }
.page-content h4 { font-weight: 700; color: var(--ink); }
.page-content a { color: var(--accent-deep); text-decoration: underline; }
.page-content a:hover { color: var(--accent); }
.page-content ul, .page-content ol { padding-left: 1.3em; }
.page-content li { margin: .4em 0; }
.page-content img { border-radius: var(--radius); max-width: 100%; height: auto; }
.page-content blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--ink); font-size: 1.1rem; }
.page-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.page-content table { width: 100%; border-collapse: collapse; }
.page-content th, .page-content td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.page-content th { background: var(--tint); color: var(--ink); }
.page-content--wc { max-width: 1040px; }

/* WooCommerce — keep function, present in our design */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce #respond input#submit {
  background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 100px !important;
  padding: 12px 24px !important; font-weight: 600 !important; font-size: .95rem !important; box-shadow: 0 8px 20px -10px rgba(40,51,74,.5); transition: background .2s;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce #respond input#submit:hover { background: var(--accent) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-input-wrapper input, .woocommerce input.input-text, .woocommerce select, .select2-container--default .select2-selection--single {
  border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: .95rem !important; color: var(--ink) !important; min-height: 46px;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(40,116,252,.12) !important; outline: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: 11px 18px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; text-decoration: none; border-radius: 10px 10px 0 0; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--ink); background: var(--tint); }
/* My Account (logged in): menu on the LEFT, content on the RIGHT, full width with breathing room.
   Overrides Kadence's float layout (which put the nav on the right). Scoped to .logged-in so the
   logged-out login/register form keeps its narrow, centered layout. */
.logged-in.woocommerce-account .page-content { max-width: none !important; margin: 0 !important; }
.logged-in.woocommerce-account .woocommerce { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 52px; width: 100%; }
.logged-in.woocommerce-account .account-navigation-wrap { float: none !important; order: 0; flex: 0 0 230px; width: 230px !important; margin: 0 !important; }
.logged-in.woocommerce-account .woocommerce-MyAccount-content { float: none !important; order: 1; flex: 1 1 0%; width: auto !important; min-width: 0; margin: 0 !important; }
/* nav as a clean vertical sidebar (override the horizontal tab styling above) */
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column !important; flex-wrap: nowrap !important; border-bottom: 0 !important; gap: 3px; margin: 14px 0 0 !important; }
.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { border-radius: 10px !important; }
/* Addresses page: the billing/shipping cards stack with no gap (container is display:block,
   so its gap is ignored) — make it a flex column so the cards get real breathing room. */
.logged-in.woocommerce-account .woocommerce-Addresses { display: flex !important; flex-direction: column; gap: 28px; }

/* Profile photo block at the top of Account details. */
.kb-avatar { display: flex; align-items: center; gap: 20px; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.kb-avatar__pic { flex-shrink: 0; }
.kb-avatar__pic img, .kb-avatar__pic .avatar { width: 88px !important; height: 88px !important; min-width: 88px; max-width: 88px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--line); background: var(--tint); }
.kb-avatar__h { margin: 0 0 4px; font-size: 1rem; color: var(--ink); }
.kb-avatar__hint { margin: 0 0 12px; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.kb-avatar__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kb-avatar__remove { background: none; border: 0; color: #c0392b; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.kb-avatar__remove[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.kb-avatar__err { color: #c0392b; font-size: .86rem; margin: 10px 0 0; }
.kb-avatar__cam { margin-top: 14px; max-width: 300px; }
.kb-avatar__cam video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #0b1220; display: block; transform: scaleX(-1); }
.kb-avatar__cam-actions { display: flex; gap: 10px; margin-top: 10px; }
/* Account sidebar user card (our replacement for Kadence's gravatar-linked avatar) */
.kb-acctnav { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 0 2px; }
.kb-acctnav__av { flex: 0 0 auto; display: inline-block; line-height: 0; }
.kb-acctnav__av img, .kb-acctnav__av .avatar { width: 48px !important; height: 48px !important; min-width: 48px; max-width: 48px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; }
.kb-acctnav__name { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-acctnav__name:hover { color: var(--accent-deep); }
@media (max-width: 480px) { .kb-avatar { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Account details (edit-account): even field spacing + clean "Password change" section
   (WC ships zero row margins and a browser-default groove fieldset border). */
.logged-in.woocommerce-account form.edit-account .form-row { margin: 0 0 20px !important; padding: 0; width: 100% !important; float: none !important; display: block; }
.logged-in.woocommerce-account form.edit-account label { display: block; margin-bottom: 7px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.logged-in.woocommerce-account form.edit-account input.input-text { width: 100%; }
.logged-in.woocommerce-account form.edit-account em,
.logged-in.woocommerce-account form.edit-account span.description { display: block; margin-top: 7px; font-style: normal; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.logged-in.woocommerce-account form.edit-account fieldset { border: 0 !important; border-top: 1px solid var(--line) !important; margin: 26px 0 4px !important; padding: 26px 0 0 !important; }
.logged-in.woocommerce-account form.edit-account fieldset legend { display: block; width: 100%; float: none; font-family: var(--font-display); font-size: 1.1rem !important; font-weight: 600; color: var(--ink); padding: 0 !important; margin: 0 0 18px !important; }
.logged-in.woocommerce-account form.edit-account button[type="submit"] { margin-top: 10px; }
/* Auctions settings checkbox: the generic input styling above turns it into a tall bordered
   box (13×46) — reset it to a proper square and keep checkbox + label on one line. */
.logged-in.woocommerce-account form.edit-account .form-row.input-checkbox label.checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .95rem; color: var(--ink); line-height: 1.4; cursor: pointer; }
.logged-in.woocommerce-account form.edit-account input.input-checkbox {
  width: 18px !important; height: 18px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  flex: 0 0 auto; accent-color: var(--accent); -webkit-appearance: checkbox; appearance: auto;
}
.logged-in.woocommerce-account form.edit-account .form-row.input-checkbox .optional { color: var(--muted); font-weight: 400; }

/* My Account dashboard (Keibid) */
.kb-dash__lead { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; margin: 0 0 24px; max-width: 56ch; }
.kb-dash__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.kb-dash__card { display: flex; flex-direction: column; gap: 3px; padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.kb-dash__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.logged-in.woocommerce-account .kb-dash__card,
.logged-in.woocommerce-account .kb-dash__card:hover,
.logged-in.woocommerce-account .kb-dash__card * { text-decoration: none !important; }
.kb-dash__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #eff5ff; color: var(--accent-deep); margin-bottom: 8px; }
.kb-dash__ico svg { width: 20px; height: 20px; }
.kb-dash__t { font-weight: 600; font-size: 1rem; color: var(--ink); }
.kb-dash__s { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.kb-dash__logout { font-size: .88rem; color: var(--muted); margin: 0; }
.kb-dash__logout a { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 520px) { .kb-dash__links { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .logged-in.woocommerce-account .woocommerce { gap: 26px; }
  .logged-in.woocommerce-account .account-navigation-wrap { flex: 1 1 100%; width: 100% !important; }
  .logged-in.woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 100%; }
}
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--tint); color: var(--ink); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 14px 16px; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--accent) !important; border-radius: 10px; }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--accent) !important; }

/* FAQ accordion + statement (Keibid design) */
.faq__item { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: #fff; overflow: hidden; box-shadow: var(--shadow-xs); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-family: var(--font-display), sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s; flex: 0 0 auto; }
.faq__item[open] .faq__chev { transform: rotate(-135deg); }
.faq__a { padding: 0 20px 20px; color: var(--ink-soft); line-height: 1.7; }
.faq__a p { margin: 0; }
.statement__text { font-size: 1.45rem; line-height: 1.5; color: var(--ink-soft); font-family: var(--font-display), sans-serif; margin-top: 14px; }
.statement__text em { color: var(--ink); font-style: normal; }

/* Listing / lead form on the dedicated submit page — keep function, our look */
html body .page-content form button[type="submit"],
html body .page-content button.kse-btn,
html body .page-content .kse-realform button[type="submit"] {
  background: var(--ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px -12px rgba(40,51,74,.5) !important;
}
html body .page-content form button[type="submit"]:hover,
html body .page-content button.kse-btn:hover { background: var(--accent) !important; }
html body .page-content .kse-realform input, html body .page-content .kse-realform select {
  border-radius: 10px !important; border-color: var(--line) !important;
}

/* Start-your-listing form (step 1) — Keibid design */
.listform { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 38px 36px; box-shadow: var(--shadow); }
.listform__head { text-align: center; margin-bottom: 22px; }
.listform__head .section__title { margin: 6px 0 8px; }
.listform__head p { color: var(--muted); }
.listform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.listform__grid select, .listform__grid input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.listform__grid select:focus, .listform__grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.listform__grid input[name="model"] { grid-column: 1 / -1; }
.listform__form .btn--block { margin-top: 10px; }
.listform__meta { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 14px; }
@media (max-width: 560px) { .listform__grid { grid-template-columns: 1fr; } .listform { padding: 28px 20px; } }

/* Calculator (Transaction Cost / Eligibility) — Keibid design */
.page-lead { color: var(--muted); max-width: 640px; margin-top: 10px; font-size: 1.05rem; }
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; margin-top: 30px; align-items: start; }
/* min-width:0 lets the columns shrink on a phone; without it the long <select> options
   ("Standard (5% buyer fee, capped $1,000)") force the form wider than the viewport. */
.calc > * { min-width: 0; }
.calc__form { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.calc__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.calc__field > span { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.calc__field input, .calc__field select { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; -webkit-appearance: none; appearance: none; }
.calc__field input:focus, .calc__field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.calc__panel { background: var(--ink); color: #fff; border-radius: 18px; padding: 26px; position: sticky; top: 90px; }
.calc__panel .eyebrow { color: #9fc2ff; }
.calc__rows { margin-top: 14px; }
.calc__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; color: rgba(255,255,255,.8); }
.calc__row strong { color: #fff; font-weight: 600; }
.calc__row--total { border-bottom: 0; margin-top: 6px; padding-top: 16px; border-top: 2px solid rgba(255,255,255,.25); }
.calc__row--total span { color: #fff; font-weight: 700; font-size: 1.1rem; }
.calc__row--total strong { color: #fff; font-weight: 700; font-size: 1.35rem; }
.calc__note { color: rgba(255,255,255,.55); font-size: .78rem; margin-top: 16px; }
@media (max-width: 760px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc__panel { position: static; } }

/* Eligibility verdict + 3-col grid */
.grid--three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .grid--three { grid-template-columns: 1fr; } }
.calc__verdict { margin-top: 14px; }
.calc__verdict p { color: rgba(255,255,255,.8); margin: 8px 0 0; font-size: .92rem; line-height: 1.55; }
.calc__verdict strong { font-size: 1.3rem; display: block; color: #fff; }
.calc__verdict--empty p { color: rgba(255,255,255,.6); }
.calc__verdict--ok strong { color: #6ee7a8; }
.calc__verdict--wait strong { color: #ffd166; }

/* ============================================================
   KEI TRUCK LAWS BY STATE
   ============================================================ */
.laws-hero { position: relative; overflow: hidden; background: linear-gradient(180deg,#f3f6fc,#fff); border-bottom: 1px solid var(--line); padding: 44px 0 52px; min-height: 430px; display: flex; align-items: center; }
.laws-hero .container { position: relative; z-index: 2; }
.laws-hero__copy { max-width: 560px; }
.laws-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 1; }
.laws-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.laws-hero__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f4f7fc 0%, rgba(244,247,252,.88) 22%, rgba(244,247,252,.25) 52%, rgba(244,247,252,0) 74%); }
.laws-hero__title { font-family: var(--font-display), sans-serif; font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 14px 0 12px; }
.laws-hero__title em { color: var(--accent); font-style: normal; display: block; }
.laws-hero__sub { color: var(--ink-soft); font-size: 1.05rem; max-width: 460px; margin-bottom: 20px; }
.laws-search { display: flex; align-items: stretch; gap: 10px; max-width: 500px; margin-bottom: 16px; }
.laws-search__field { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; box-shadow: var(--shadow-xs); }
.laws-search__field svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.laws-search__field input { border: 0; outline: none; background: none; font-size: 1rem; padding: 14px 0; width: 100%; color: var(--ink); font-family: inherit; }
.laws-search__btn { flex: 0 0 auto; background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 0 26px; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.laws-search__btn:hover { background: var(--accent-deep); }
.notice--info { background: #eef4ff; border: 1px solid #d3e2ff; }
.notice--info .notice__ico { color: var(--accent); }

.laws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
/* min-width:0 lets the columns shrink on a phone; without it the map/table/side content
   forces the column wider than the viewport and everything spills off the right. */
.laws-grid > * { min-width: 0; }
.laws-h2 { font-family: var(--font-display), sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0 0 16px; }

/* status palette (semantic) */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; flex: 0 0 auto; }
.dot--allowed { background: #1f9d57; } .dot--restrict { background: #e0a107; }
.dot--difficult { background: #db4b4b; } .dot--unclear { background: #97a2b4; }

.statemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 7px; }
.statetile { font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .03em; border-radius: 9px; padding: 12px 0; cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .12s; color: #28425f; }
.statetile--allowed { background: #e4f5ea; color: #147a43; } .statetile--restrict { background: #fdf3df; color: #9a6e05; }
.statetile--difficult { background: #fce9e9; color: #b53636; } .statetile--unclear { background: #eef1f6; color: #6c7892; }
.statetile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.statetile.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.statetile.is-dim { opacity: .28; }
.statemap__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: .82rem; color: var(--ink-soft); }
.statemap__legend span { display: inline-flex; align-items: center; }

.laws-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.laws-tab { font-family: inherit; font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; transition: .15s; }
.laws-tab:hover { border-color: var(--accent); color: var(--accent); }
.laws-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.laws-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.laws-table th { background: var(--tint); text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 16px; }
.laws-table td { padding: 13px 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); vertical-align: middle; }
.laws-row__name { background: none; border: 0; font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--accent-deep); cursor: pointer; padding: 0; text-align: left; }
.laws-row__name:hover { text-decoration: underline; }
.laws-note { max-width: 360px; }
.pill { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 100px; white-space: nowrap; }
.pill--allowed { background: #e4f5ea; color: #147a43; } .pill--restrict { background: #fdf3df; color: #9a6e05; }
.pill--difficult { background: #fce9e9; color: #b53636; } .pill--unclear { background: #eef1f6; color: #6c7892; }

.laws-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.laws-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.laws-card__state { display: block; font-family: var(--font-display), sans-serif; font-size: 1.4rem; font-weight: 600; color: var(--accent-deep); margin-bottom: 10px; }
.laws-card__desc { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: 12px 0 16px; }
.laws-reqs, .laws-checklist { list-style: none; margin: 10px 0 0; padding: 0; }
.laws-reqs li { position: relative; padding: 6px 0 6px 24px; font-size: .9rem; color: var(--ink-soft); }
.laws-reqs li::before { content: "\2713"; position: absolute; left: 0; color: #1f9d57; font-weight: 700; }
.laws-checklist li { padding: 10px 0; border-top: 1px solid var(--line); }
.laws-checklist li:first-child { border-top: 0; }
.laws-checklist strong { display: block; color: var(--ink); font-size: .92rem; }
.laws-checklist span { color: var(--muted); font-size: .82rem; }
.laws-cta { background: var(--ink); color: #fff; border-radius: 16px; padding: 24px; }
.laws-cta h3 { font-family: var(--font-display), sans-serif; font-size: 1.2rem; margin: 0 0 8px; }
.laws-cta p { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0 0 16px; }

@media (max-width: 900px) {
  .laws-hero__media { width: 100%; opacity: .25; } .laws-hero__copy { max-width: 100%; }
  .laws-grid { grid-template-columns: minmax(0, 1fr); } .laws-side { position: static; }
  .laws-note { max-width: none; }
}
@media (max-width: 560px) {
  /* Drop the long "Notes" column on a phone so the State + Status table fits the screen
     (auto table layout would otherwise force it wider than the viewport). The note text is
     still shown in the state's detail card when you tap a row. */
  .laws-table th:nth-child(3), .laws-table td:nth-child(3) { display: none; }
}

/* Geographic US map (Kei truck laws) */
.usmap-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.usmap { width: 100%; height: auto; display: block; }
.statepath { stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: fill .15s, opacity .15s; }
.statepath--allowed { fill: #7cc89a; }
.statepath--restrict { fill: #f2cb5e; }
.statepath--difficult { fill: #e88080; }
.statepath--unclear { fill: #c8cfd9; }
.statepath:hover { fill-opacity: .82; }
.statepath.is-active { stroke: var(--ink); stroke-width: 2.6; }
.statepath.is-dim { opacity: .22; }

/* Before-you-buy icons + directory view-all */
.laws-checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--line); }
.laws-checklist li:first-child { border-top: 0; }
.laws-check__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.laws-check__ic svg { width: 19px; height: 19px; }
.laws-checklist strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: 2px; }
.laws-checklist span { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.laws-table__foot { text-align: center; margin-top: 18px; }

/* Seller listing form: validation feedback */
.kb-invalid { border-color: #db4b4b !important; box-shadow: 0 0 0 3px rgba(219,75,75,.14) !important; }
.kb-form-error { background: #fce9e9; border: 1px solid #f3c9c9; color: #b53636; padding: 12px 16px; border-radius: 10px; font-size: .9rem; font-weight: 600; margin-bottom: 18px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; margin-top: 8px; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; font-family: inherit; font-size: .95rem; color: var(--ink); resize: vertical; box-sizing: border-box; }
.contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.contact-form__note { color: var(--muted); font-size: .82rem; margin: 0; }
.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.contact-card__ic { display: inline-flex; width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 12px; }
.contact-card__ic svg { width: 20px; height: 20px; }
.contact-card h3 { font-size: 1.02rem; color: var(--ink); margin: 0 0 4px; }
.contact-card p { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.contact-card__link { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .contact-form__row { grid-template-columns: 1fr; } }

/* Price Guide */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; margin-top: 8px; }
/* min-width:0 lets the columns shrink below their content's min size — without it the
   nested stats grid forces the column wider than a narrow phone and the cards get clipped. */
.pg-grid > * { min-width: 0; }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.pg-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.pg-stat__label { display: block; color: var(--muted); font-size: .8rem; margin-bottom: 6px; }
.pg-stat__value { font-family: var(--font-display), sans-serif; font-size: 1.5rem; color: var(--ink); font-weight: 600; }
.pg-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 22px; }
.pg-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.pg-card__head h3 { font-size: 1.1rem; color: var(--ink); margin: 0; }
.pg-card__head span { color: var(--muted); font-size: .82rem; }
.pg-chart { width: 100%; height: 210px; display: block; background: var(--tint); border-radius: 10px; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-pill { background: var(--tint); color: var(--accent-deep); border: 1px solid #dce6fa; border-radius: 100px; padding: 7px 14px; font-size: .85rem; font-weight: 600; }
.pg-side { display: flex; flex-direction: column; gap: 16px; }
.pg-feature { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pg-feature__media { aspect-ratio: 4/3; background: var(--tint); }
.pg-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-feature__body { padding: 20px; }
.pg-feature__body h3 { font-size: 1.1rem; color: var(--ink); margin: 6px 0 4px; }
.pg-feature__spec { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.pg-feature__price { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pg-feature__price span { color: var(--muted); font-size: .78rem; }
.pg-feature__price strong { color: var(--ink); font-size: 1.2rem; font-family: var(--font-display), sans-serif; }
.pg-note { display: flex; gap: 10px; background: #eef4ff; border: 1px solid #d3e2ff; border-radius: 12px; padding: 14px 16px; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
.pg-note .notice__ico { color: var(--accent); flex: 0 0 auto; }
@media (max-width: 820px) { .pg-grid { grid-template-columns: minmax(0, 1fr); } .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home: Notify Me (replaces stats bar) */
.notify { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--tint); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; }
.notify__text strong { display: block; font-family: var(--font-display), sans-serif; font-size: 1.12rem; color: var(--ink); margin-bottom: 4px; }
.notify__text p { color: var(--ink-soft); font-size: .92rem; margin: 0; max-width: 580px; }
.notify__form { display: flex; gap: 10px; flex: 0 0 auto; }
.notify__form input { border: 1px solid var(--line); border-radius: 11px; padding: 12px 16px; font-size: .95rem; font-family: inherit; min-width: 220px; background: #fff; color: var(--ink); }
.notify__form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.notify__done { color: var(--accent-deep); font-weight: 600; margin: 0; }
@media (max-width: 720px) { .notify { flex-direction: column; align-items: stretch; } .notify__form { flex-direction: column; } .notify__form input { min-width: 0; } }

/* Home: How it works — two paths (buy / sell) */
.paths__head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 28px; flex-wrap: wrap; }
.paths__intro { flex: 1 1 360px; max-width: 560px; }
.paths__features { display: flex; gap: 18px; background: #eef1f8; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; flex: 0 1 auto; }
.pfeat { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--ink); line-height: 1.22; }
.pfeat > span:last-child { max-width: 96px; }
.pfeat__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #dbe6fb; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.pfeat__ic svg { width: 18px; height: 18px; }
@media (max-width: 1040px) {
  .paths__features { flex-wrap: wrap; }
  .pfeat { flex: 1 1 180px; }
  /* Once the pills wrap they have room, so drop the desktop 96px label cap (which is only
     there to fit four pills across on a wide screen) — labels now sit on one line and wrap
     only if they truly overflow. The feature box keeps its full width (row layout). */
  .pfeat > span:last-child { max-width: none; }
}
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); --path-accent: var(--accent); --path-tint: #eaf1ff; }
.path--sell { --path-accent: var(--ink); --path-tint: #eef1f8; }
.path__top { position: relative; min-height: 215px; display: flex; align-items: center; overflow: hidden; background: #fff; }
.path__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 90% center; z-index: 1; }
.path__top::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, #fff 0%, #fff 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.55) 64%, rgba(255,255,255,0) 84%); }
.path__top-in { position: relative; z-index: 3; padding: 26px; max-width: 54%; }
.path__btn { display: flex; width: max-content; min-width: 220px; max-width: 100%; margin-left: auto; margin-right: auto; }
.path__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--path-tint); color: var(--path-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); margin-bottom: 14px; }
.path__ic svg { width: 22px; height: 22px; }
.path__top-in h3 { font-family: var(--font-display), sans-serif; font-size: 1.5rem; color: var(--ink); margin: 0 0 6px; }
.path__lead { color: var(--ink-soft); margin: 0; }
.path__body { padding: 6px 26px 26px; }
.path__steps { list-style: none; margin: 0 0 22px; padding: 0; }
.path__steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.path__steps li:first-child { border-top: 0; }
.path__num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--path-tint); color: var(--path-accent); font-family: var(--font-display), sans-serif; font-weight: 600; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.path__steps h4 { font-size: 1rem; color: var(--ink); margin: 4px 0 2px; }
.path__steps p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.5; }
.path__btn { background: var(--path-accent) !important; color: #fff !important; border-color: var(--path-accent) !important; }
.path__btn:hover { filter: brightness(1.1); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } .paths__head { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .paths__features { grid-template-columns: 1fr; } }

/* Home: Why Keibid cards (4-up) */
.why-sub { max-width: 620px; margin: 14px auto 0; text-align: center; }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-xs); }
.why-card__ic { width: 62px; height: 62px; border-radius: 18px; background: #e7eefc; color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.why-card__ic svg { width: 29px; height: 29px; }
.why-card h3 { font-family: var(--font-display), sans-serif; font-size: 1.28rem; color: var(--ink); margin: 0 0 12px; }
.why-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 20px; flex: 1 1 auto; }
.why-card__foot { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--ink); }
.why-card__check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.why-card__check svg { width: 12px; height: 12px; }
.why-foot { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 36px; color: var(--ink); font-weight: 600; }
.why-foot svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }

/* Auction Q&A — comment form */
.comment-respond { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.comment-form__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 14px; }
.comment-form { display: flex; flex-direction: column; gap: 14px; }
.comment-form .cf-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.comment-form .cf-row label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.comment-form .cf-row label span { color: var(--muted); font-weight: 400; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; font-family: inherit; font-size: .95rem; color: var(--ink); background: #fff; box-sizing: border-box; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.comment-form .form-submit { margin: 4px 0 0; }
.comment-reply-link { font-size: .82rem; font-weight: 600; color: var(--accent-deep); margin-top: 8px; display: inline-block; }
.comment-reply-link:hover { color: var(--accent); }
@media (min-width: 600px) {
  .comment-form { flex-flow: row wrap; }
  .comment-form .cf-row { flex: 1 1 100%; }
  .comment-form .cf-half { flex: 1 1 calc(50% - 7px); }
  .comment-form .form-submit { flex: 1 1 100%; }
}

/* Push primary nav tabs away from the logo */
.nav__links { margin-left: clamp(28px, 4.5vw, 64px); }

/* Refined logo: gradient badge + two-tone wordmark */
.brand__mark { background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%); color: #fff; box-shadow: 0 5px 14px -6px rgba(40,116,252,.55); }
.brand__accent { color: var(--accent); }
.brand--light .brand__mark { background: linear-gradient(135deg, var(--accent) 0%, #5b93ff 100%); color: #fff; }
.brand--light .brand__accent { color: var(--accent-soft); }

/* Header social icons (Facebook / Instagram) */
.nav__social { display: inline-flex; align-items: center; gap: 4px; }
/* Mobile-only social cluster in the header bar (sits between the logo and the burger);
   the desktop social lives in .nav__actions, so this is hidden until the burger appears. */
.nav__mobile-social { display: none; }
.nav__social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); transition: color .2s, background .2s; }
.nav__social-btn svg { width: 18px; height: 18px; }
.nav__social-btn:hover { color: var(--accent); background: var(--tint); }
@media (max-width: 1080px) { .nav__social { display: none; } }
.mobile-menu__social { display: flex; gap: 6px; margin-top: 12px; }

/* Separate header social icons from the account/bell cluster */
.nav__actions .nav__social { margin-right: 8px; padding-right: 14px; border-right: 1px solid var(--line); }

/* Social login buttons (account screen) */
.social-login { max-width: 400px; margin: 0 auto 4px; display: flex; flex-direction: column; gap: 12px; }
.social-login__btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 11px; font-weight: 600; font-size: .95rem; border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.social-login__btn--google { background: #fff; color: var(--ink); }
.social-login__btn--google:hover { background: #f5f8fc; border-color: var(--muted); }
.social-login__btn--facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.social-login__btn--facebook:hover { background: #166fe0; }
.social-login__btn svg { flex: 0 0 auto; }
.social-login__divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0; }
.social-login__divider::before, .social-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Social login buttons — unify to white/outline, remove underline; login form spacing */
.page-content .social-login__btn { text-decoration: none; color: var(--ink); }
.social-login__btn--facebook { background: #fff; color: var(--ink); border-color: var(--line); }
.social-login__btn--facebook:hover { background: #f5f8fc; border-color: var(--muted); }
.social-login__btn--facebook svg { color: #1877f2; }
.woocommerce-form-login__rememberme { display: block; margin: 4px 0 14px; }
.woocommerce-form-login button[name="login"] { margin-top: 2px; }

/* Account page: narrower content + bigger centered Login/Register buttons */
.woocommerce-account .page-content { max-width: 820px; margin-left: auto; margin-right: auto; }
.woocommerce-account button[name="login"],
.woocommerce-account button[name="register"] {
  display: block !important;
  margin: 18px auto 0 !important;
  padding: 14px 46px !important;
  font-size: 1rem !important;
}
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-LostPassword { text-align: center; }

/* Account page refine: narrower + bigger buttons + left-aligned remember me */
.woocommerce-account .page-content { max-width: 640px; }
.woocommerce-account button[name="login"],
.woocommerce-account button[name="register"] {
  padding: 16px 60px !important;
  font-size: 1.05rem !important;
  min-width: 220px;
}
.woocommerce-account .woocommerce-form-login__rememberme { text-align: left; }

/* WooCommerce error/notice — Keibid design (account & forms) */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error {
  list-style: none; margin: 0 auto 18px; max-width: 640px;
  background: #fce9e9; border: 1px solid #f3c9c9; color: #b53636;
  padding: 13px 16px; border-radius: 12px; font-size: .9rem; font-weight: 500;
}
.woocommerce-account .woocommerce-error li { list-style: none; margin: 0; padding-left: 22px; position: relative; }
.woocommerce-account .woocommerce-error li::before { content: "!"; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #db4b4b; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px; }
.woocommerce-account .woocommerce-error a { color: #b53636; text-decoration: underline; }

/* Account: single-form auth (Login first, toggle to Register) */
.kb-auth .u-column1, .kb-auth .u-column2 { width: 100%; float: none; max-width: 100%; }
.kb-auth .u-column2 { display: none; }
.kb-auth.show-register .u-column1 { display: none; }
.kb-auth.show-register .u-column2 { display: block; }
.kb-auth-toggle { text-align: center; margin-top: 16px; color: var(--ink-soft); font-size: .92rem; }
.kb-auth-toggle a { color: var(--accent-deep); font-weight: 600; }
.kb-auth-toggle a:hover { color: var(--accent); }

/* Live Auctions: functional filter selects, prettier 4WD toggle, list view */
.selectish select { border: 0; background: none; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; outline: none; max-width: 140px; }
.toggle { border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: 9px 16px; transition: border-color .2s, color .2s; }
.toggle:hover { border-color: var(--ink); }
.toggle.is-on { border-color: var(--accent); color: var(--accent-deep); }
.grid.grid--list { display: flex; flex-direction: column; gap: 14px; }
.grid--list .card { display: grid; grid-template-columns: 250px 1fr; align-items: stretch; }
.grid--list .card__media { height: 100%; min-height: 180px; }
@media (max-width: 600px) { .grid--list .card { grid-template-columns: 1fr; } }

/* Live Auctions: custom filter dropdown */
.kbdd { position: relative; }
.kbdd__btn { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: border-color .2s; }
.kbdd__btn:hover { border-color: var(--ink); }
.kbdd.is-open .kbdd__btn { border-color: var(--accent); }
.kbdd__inner { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.kbdd__inner small { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kbdd__inner strong { font-size: .9rem; font-weight: 600; color: var(--ink); }
.kbdd__btn > svg { width: 12px; height: 12px; color: var(--muted); transition: transform .2s; flex: 0 0 auto; }
.kbdd.is-open .kbdd__btn > svg { transform: rotate(180deg); }
.kbdd__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; display: none; }
.kbdd.is-open .kbdd__menu { display: block; }
.kbdd__menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font-family: inherit; font-size: .9rem; color: var(--ink-soft); border-radius: 8px; cursor: pointer; }
.kbdd__menu button:hover { background: var(--tint); color: var(--ink); }
.kbdd__menu button.is-sel { color: var(--accent-deep); font-weight: 600; background: var(--tint); }

/* Listing card location line */
.card__loc { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); margin: 2px 0 6px; }
.card__loc svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Reusable U.S. state autocomplete (Sell wizard + Browse/Live location filter) */
.kb-stateac { position: relative; }
.kb-stateac__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 320px; max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; display: none; }
.kb-stateac__menu.is-open { display: block; }
.kb-stateac__menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font-family: inherit; font-size: .9rem; color: var(--ink-soft); border-radius: 8px; cursor: pointer; }
.kb-stateac__menu button span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.kb-stateac__menu button:hover, .kb-stateac__menu button.is-active { background: var(--tint); color: var(--ink); }
/* Filter-bar variant: matches the .kbdd control look */
.kb-stateac--filter { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 6px 14px; transition: border-color .2s; }
.kb-stateac--filter:hover { border-color: var(--ink); }
.kb-stateac--filter:focus-within { border-color: var(--accent); }
.kb-stateac--filter > svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.kb-stateac--filter .kb-stateac__inner { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.kb-stateac--filter .kb-stateac__inner small { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kb-stateac--filter .kb-stateac__q { border: 0; background: none; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); padding: 0; width: 130px; outline: none; }
.kb-stateac--filter .kb-stateac__q::placeholder { color: var(--ink); font-weight: 600; opacity: .9; }

/* Live Auctions: list view (horizontal cards) — corrected */
.grid.grid--list .card { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; }
.grid--list .card__media { aspect-ratio: auto; height: 100%; min-height: 190px; }
.grid--list .card__body { display: flex; flex-direction: column; padding: 20px 24px; }
.grid--list .card__reserve { align-self: flex-start; }
.grid--list .card__foot { margin-top: auto; }
.grid--list .card .btn--block { width: auto; align-self: flex-start; min-width: 160px; }
@media (max-width: 640px) { .grid.grid--list .card { grid-template-columns: 1fr; } .grid--list .card__media { aspect-ratio: 4/3; } }

/* ---- Auction watchlist (Simple Auctions native, restyled into our panel) ---- */
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__watch .wsawl-link { margin: 0; }
.panel__watch .sa-watchlist-action {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  background: var(--tint); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: color .2s, background .2s, border-color .2s;
}
.panel__watch .sa-watchlist-action::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.panel__watch .sa-watchlist-action:hover { color: var(--accent); background: #fff; border-color: var(--accent-soft); }
.panel__watch .remove-wsawl { color: var(--accent-deep); background: #eef4ff; border-color: var(--accent-soft); }
.panel__watch .sa-watchlist-action.no-action { opacity: .65; cursor: default; }

/* ---- Register-to-bid modal (card-on-file gate) ---- */
.kb-modal[hidden] { display: none; }
.kb-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.kb-modal__overlay { position: fixed; inset: 0; background: rgba(20,28,46,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.kb-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 30px 28px; margin: auto; }
.kb-modal__x { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.kb-modal__x:hover { color: var(--ink); }
.kb-reg__title { font-size: 1.5rem; text-align: center; margin-bottom: 12px; }
.kb-reg__lead { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; text-align: center; margin-bottom: 8px; }
.kb-reg__warn { color: var(--ink); font-weight: 600; font-size: .9rem; text-align: center; margin-bottom: 16px; }
.kb-reg__sec { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); margin: 18px 0 10px; }
.kb-field { display: block; margin-bottom: 12px; }
.kb-field > span { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.kb-field input, .kb-field select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; -webkit-appearance: none; appearance: none; box-sizing: border-box; }
.kb-field input:focus, .kb-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.kb-card-element { padding: 13px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-sizing: border-box; }
.kb-card-element.StripeElement--focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(40,116,252,.12); }
.kb-card-element.StripeElement--invalid { border-color: #db4b4b; }
.kb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-card-row { display: flex; gap: 12px; }
.kb-card-row .kb-field { flex: 1; }
.kb-field-row:has(.kb-field--sm) { grid-template-columns: 110px 1fr; }
.kb-reg__note { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 6px 0 16px; }
.kb-reg__err { background: #fdeee9; border: 1px solid #f3d6cb; color: #b3261e; padding: 10px 12px; border-radius: 8px; font-size: .85rem; margin-bottom: 12px; }
.kb-reg__done { text-align: center; padding: 14px 0; }
.kb-reg__check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #15803d; color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .kb-modal__dialog { padding: 26px 20px; } .kb-field-row, .kb-field-row:has(.kb-field--sm) { grid-template-columns: 1fr; } }

/* ---- Account: password show/hide, confirm, button gating, hint/policy spacing ---- */
.kb-pass-wrap { position: relative; display: block; }
.kb-pass-wrap > input { padding-right: 44px !important; }
.kb-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.kb-eye:hover { color: var(--ink); }
.kb-eye svg { width: 18px; height: 18px; }
.kb-mismatch { display: block; color: #b3261e; font-size: .82rem; margin-top: 6px; }
.kb-mismatch[hidden] { display: none; }
.woocommerce-form-register button[type="submit"]:disabled,
.woocommerce-form-register button.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.woocommerce-form-register button.is-disabled:hover { background: var(--ink); color: #fff; }
.woocommerce-form-register button.is-disabled::after { display: none; }
/* separate the password strength hint from the privacy-policy text */
.woocommerce-password-hint { display: block; margin: 8px 0 4px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.woocommerce-form-register .woocommerce-privacy-policy-text { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Use only our own password eye toggle — hide WooCommerce's native show/hide to avoid duplicates/desync */
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input { display: none !important; }

/* Register-to-bid: phone with country dial code (Cars & Bids style) */
.kb-phone { display: flex; gap: 8px; }
.kb-phone__code { width: auto !important; flex: 0 0 auto; min-width: 104px; }
.kb-phone input[type="tel"] { flex: 1 1 auto; width: auto; }

/* Parts & Accessories marketplace (gated). Mobile-first; all grids use minmax(0,1fr)+min-width:0
   so long part names / images can never blow the layout out horizontally. */
.kb-parts-adminbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff7e6; border-bottom: 1px solid #f0d9a6; color: #7a5a12; font-size: .9rem; padding: 10px 20px; }
.kb-parts-adminbar__tag { background: #e7a431; color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.kb-parts-wip { border: 1px dashed var(--line, #e2e8f5); border-radius: 14px; background: #f7f9ff; padding: 28px 24px; color: var(--ink-soft, #45506a); }
.kb-parts-wip p { margin: 0; line-height: 1.6; }
.kb-parts-sub { color: var(--ink-soft, #45506a); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; margin: 0 0 24px; }

/* Filter bar */
.kb-parts-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; }
.kb-parts-filters__search { flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line, #e2e8f5); border-radius: 11px; font: inherit; }
.kb-parts-filters__sel { flex: 0 1 180px; min-width: 0; max-width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line, #e2e8f5); border-radius: 11px; font: inherit; background: #fff; }
.kb-parts-filters__clear { align-self: center; color: var(--muted, #76819a); font-size: .9rem; text-decoration: none; }
.kb-parts-filters__clear:hover { text-decoration: underline; }

/* Category grid */
.kb-parts-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 0 0 30px; }
.kb-parts-cat { min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px 14px; border: 1px solid var(--line, #e2e8f5); border-radius: 14px; background: #fff; color: var(--ink, #28334a); font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kb-parts-cat:hover { border-color: var(--accent, #2874fc); box-shadow: 0 6px 18px rgba(40, 116, 252, .1); transform: translateY(-2px); }
.kb-parts-cat.is-active { border-color: var(--accent, #2874fc); background: #f0f5ff; }
.kb-parts-cat__name { min-width: 0; overflow-wrap: anywhere; }

/* Listings grid */
.kb-parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.kb-part { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line, #e2e8f5); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.kb-part:hover { box-shadow: 0 10px 26px rgba(20, 30, 55, .1); transform: translateY(-3px); }
.kb-part__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f1f4fa; }
.kb-part__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-part__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted, #76819a); font-size: .85rem; }
.kb-part__cond { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92); color: var(--ink, #28334a); font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; box-shadow: 0 1px 4px rgba(20, 28, 46, .15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.kb-part__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.kb-part__title { min-width: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.kb-part__fits { min-width: 0; font-size: .85rem; color: var(--muted, #76819a); overflow-wrap: anywhere; }
.kb-part__price { font-weight: 700; color: var(--ink, #28334a); margin-top: 2px; }
.kb-part__ship { font-size: .8rem; color: var(--muted, #76819a); }
.kb-part__ship.is-free { color: #15803d; font-weight: 700; }
.kb-parts-filters__check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink, #28334a); white-space: nowrap; }
.kb-parts-filters__check input { width: auto; }
.kb-partpage__ship.is-free { color: #15803d; font-weight: 700; }

.kb-parts-empty { border: 1px dashed var(--line, #e2e8f5); border-radius: 14px; background: #f7f9ff; padding: 34px 24px; text-align: center; color: var(--ink-soft, #45506a); }
.kb-parts-empty p { margin: 0 0 4px; line-height: 1.6; }

@media (max-width: 560px) {
	.kb-parts-filters__sel { flex: 1 1 calc(50% - 5px); }
	.kb-parts-catgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
}

/* Marketplace head row + admin moderation toggle */
.kb-parts-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.kb-parts-head > div { min-width: 0; }
.kb-parts-sellbtn { flex: 0 0 auto; white-space: nowrap; }
.kb-parts-adminbar__mod { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.kb-parts-modbtn { border: 1px solid #e0c483; background: #fff; color: #7a5a12; font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.kb-parts-modbtn.is-on { background: #e7a431; border-color: #e7a431; color: #fff; }

/* List-a-part form */
.kb-partform { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.kb-partform__row { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.kb-partform__row > span { font-weight: 600; color: var(--ink, #28334a); font-size: .92rem; }
.kb-partform__row > span small { font-weight: 400; color: var(--muted, #76819a); }
.kb-partform input[type="text"], .kb-partform input[type="search"], .kb-partform input[type="file"], .kb-partform select, .kb-partform textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line, #e2e8f5); border-radius: 11px; padding: 11px 13px; font: inherit; background: #fff; }
.kb-partform textarea { resize: vertical; }
.kb-partform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kb-partform__checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.kb-partform__check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .92rem; color: var(--ink, #28334a); }
.kb-partform__check input { width: auto; }
.kb-partform__hint { color: var(--muted, #76819a); font-size: .82rem; }
.kb-partform__msg { color: #c0392b; font-size: .9rem; background: #fdecea; border: 1px solid #f5c6c0; border-radius: 10px; padding: 10px 12px; }
.kb-partform__actions { display: flex; justify-content: flex-end; }
.kb-partform__sellerac { position: relative; }
.kb-partform__sellerres { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30; background: #fff; border: 1px solid var(--line, #e2e8f5); border-radius: 11px; box-shadow: 0 12px 28px -12px rgba(20, 28, 46, .3); max-height: 260px; overflow: auto; }
.kb-partform__sellerrow { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f0f2f7; padding: 9px 13px; font: inherit; cursor: pointer; }
.kb-partform__sellerrow:last-child { border-bottom: 0; }
.kb-partform__sellerrow:hover { background: #f5f8ff; }
.kb-partform__sellerrow strong { font-weight: 600; color: var(--ink, #28334a); font-size: .95rem; }
.kb-partform__sellerrow small { color: var(--muted, #76819a); font-size: .82rem; }
.kb-partform__sellerempty { padding: 10px 13px; color: var(--muted, #76819a); font-size: .9rem; }
.kb-partform__sellerpick { color: #1a7f4b; font-weight: 600; font-size: .85rem; }
@media (max-width: 560px) {
	.kb-partform__grid { grid-template-columns: 1fr; }
}

/* Multi-photo uploader (accumulate + thumbnails + remove) */
.kb-imgup__drop { width: 100%; display: block; text-align: center; border: 2px dashed var(--line, #e2e8f5); border-radius: 12px; background: #f7f9ff; padding: 18px 16px; cursor: pointer; font: inherit; color: var(--ink-soft, #45506a); }
.kb-imgup__drop:hover, .kb-imgup__drop.is-drag { border-color: var(--accent, #2874fc); background: #eef4ff; }
.kb-imgup__drop strong { color: var(--accent, #2874fc); }
.kb-imgup__drop small { color: var(--muted, #76819a); }
.kb-imgup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.kb-imgup__grid:empty { margin-top: 0; }
.kb-imgup__cell { position: relative; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--line, #e2e8f5); background: #f1f4fa; }
.kb-imgup__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-imgup__main { position: absolute; left: 4px; bottom: 4px; background: rgba(26, 39, 68, .9); color: #fff; font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.kb-imgup__rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(20, 28, 46, .8); color: #fff; cursor: pointer; line-height: 1; font-size: 14px; padding: 0; }
.kb-imgup__rm:hover { background: #c0392b; }

/* Single part: hover-to-zoom main image */
.kb-partpage__main { cursor: zoom-in; }
.kb-partpage__main img { transition: transform .12s ease-out; }
.kb-partpage__main.is-zoom img { transform: scale(2.3); }

/* Parts card: clickable area + stock/add footer */
.kb-part__link { display: flex; flex: 1 1 auto; flex-direction: column; text-decoration: none; color: inherit; }
.kb-part__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 14px; margin-top: auto; }
.kb-part__stock { font-size: .8rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kb-part__stock.is-in { color: #1a7f4b; }
.kb-part__stock.is-out { color: #c0392b; }
.kb-part__add { flex: 0 0 auto; }
/* WooCommerce appends an inline "View cart" link + leaves a focus box after an AJAX add — hide the
   link (we show a toast + the header cart instead) and keep the focus ring only for keyboard users. */
.kb-part__foot .added_to_cart { display: none !important; }
.kb-part__add:focus { outline: none; box-shadow: none; }
.kb-part__add:focus-visible { outline: 2px solid var(--accent, #2874fc); outline-offset: 2px; }
.kb-part__add.loading { opacity: .7; pointer-events: none; }

/* Header mini-cart (only visible once items are in the cart) */
.nav__cart { position: relative; display: inline-flex; align-items: center; color: var(--muted, #76819a); transition: color .2s; }
.nav__cart:hover { color: var(--ink, #28334a); }
.nav__cart svg { width: 23px; height: 23px; display: block; }
.nav__cart.is-empty { display: none; }
.nav__cart-count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; background: var(--accent, #2874fc); color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; border-radius: 999px; }

/* Single part page */
.kb-partpage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.kb-partpage__media { min-width: 0; }
.kb-partpage__main { aspect-ratio: 4 / 3; background: #f1f4fa; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.kb-partpage__main img { width: 100%; height: 100%; object-fit: cover; }
.kb-partpage__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kb-partpage__thumb { width: 72px; height: 56px; padding: 0; border: 1px solid var(--line, #e2e8f5); border-radius: 9px; overflow: hidden; background: #fff; cursor: pointer; }
.kb-partpage__thumb.is-active { border-color: var(--accent, #2874fc); }
.kb-partpage__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-partpage__panel { min-width: 0; }
.kb-partpage__title { font-size: 1.7rem; line-height: 1.25; margin: 8px 0 12px; overflow-wrap: anywhere; }
.kb-partpage__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kb-partbadge { background: #eef2fb; color: var(--ink, #28334a); font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
.kb-partpage__stock { font-size: .8rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.kb-partpage__stock.is-in { background: #e6f6ee; color: #1a7f4b; }
.kb-partpage__stock.is-out { background: #fdecea; color: #c0392b; }
.kb-partpage__price { font-size: 1.6rem; font-weight: 800; color: var(--ink, #28334a); margin: 4px 0 4px; }
.kb-partpage__ship { color: var(--muted, #76819a); font-size: .9rem; margin: 0 0 14px; }
.kb-partpage__fits { color: var(--ink-soft, #45506a); margin: 0 0 16px; overflow-wrap: anywhere; }
.kb-partpage__cart { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kb-partpage__btns { display: flex; gap: 10px; flex: 1 1 240px; flex-wrap: wrap; }
.kb-partpage__add, .kb-partpage__buy { flex: 1 1 auto; white-space: nowrap; }
.kb-partpage__qty { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--ink, #28334a); }
.kb-partpage__qty input { width: 84px; border: 1px solid var(--line, #e2e8f5); border-radius: 10px; padding: 10px 12px; font: inherit; }
.kb-partpage__soldout { color: #c0392b; font-weight: 600; }
.kb-partpage__sku { color: var(--muted, #76819a); font-size: .85rem; margin: 16px 0 0; }
.kb-partpage__desc { margin-top: 36px; max-width: 760px; }
.kb-partpage__h2 { font-size: 1.2rem; margin: 0 0 10px; }
@media (max-width: 800px) {
	.kb-partpage { grid-template-columns: 1fr; gap: 22px; }
}

/* Your parts (seller manage list) */
.kb-parts-headbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kb-myparts { display: flex; flex-direction: column; gap: 10px; }
.kb-mypart { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line, #e2e8f5); border-radius: 14px; background: #fff; min-width: 0; }
.kb-mypart__thumb { flex: 0 0 auto; width: 64px; height: 50px; border-radius: 9px; overflow: hidden; background: #f1f4fa; }
.kb-mypart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-mypart__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.kb-mypart__title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.kb-mypart__meta { font-size: .88rem; color: var(--muted, #76819a); }
.kb-mypart__status { font-weight: 700; }
.kb-mypart__status--publish { color: #1a7f4b; }
.kb-mypart__status--pending { color: #b8860b; }
.kb-mypart__status--draft { color: var(--muted, #76819a); }
.kb-mypart__actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.kb-mypart__cancel { background: #fff; border: 1px solid #e3b4ad; color: #c0392b; }
.kb-mypart__cancel:hover { background: #fdecea; }
@media (max-width: 560px) {
	.kb-mypart { flex-wrap: wrap; }
	.kb-mypart__actions { width: 100%; }
}

/* Find parts for your truck */
.kb-fitfinder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin: 0 0 20px; border: 1px solid var(--line, #e2e8f5); border-radius: 14px; background: #f7f9ff; }
.kb-fitfinder__label { font-weight: 700; color: var(--ink, #28334a); }
.kb-fitfinder__opts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.kb-fitfinder__opt { border: 1px solid var(--line, #e2e8f5); background: #fff; color: var(--ink, #28334a); font-size: .88rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; text-decoration: none; transition: border-color .15s, background .15s; }
.kb-fitfinder__opt:hover { border-color: var(--accent, #2874fc); }
.kb-fitfinder__opt.is-active { background: var(--accent, #2874fc); border-color: var(--accent, #2874fc); color: #fff; }

/* Single part: related + reviews */
.kb-partpage__related { margin-top: 40px; }
.kb-partpage__reviews { margin-top: 36px; max-width: 760px; }
.kb-partpage__reviews .comment-form-rating, .kb-partpage__reviews .stars { margin-bottom: 10px; }
.kb-partpage__reviews ol.commentlist { list-style: none; margin: 0 0 20px; padding: 0; }
.kb-partpage__reviews .comment-text { border: 1px solid var(--line, #e2e8f5); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.kb-partpage__reviews textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e2e8f5); border-radius: 11px; padding: 11px 13px; font: inherit; }