/* =========================================================================
   Remibee — ElevenLabs-inspired skin: monochrome minimalism (near-black ink,
   huge tight headlines, black pill CTAs, whisper-gray panels, hairlines),
   with the floating honey hexagons kept as the brand's signature accent.
   Class names and templates are unchanged — only the skin differs.
   ========================================================================= */

:root {
  --ink: #0a0a0a;          /* primary text + buttons        */
  --ink-hover: #2b2b2b;    /* button hover                  */
  --slate: #5f5f5c;        /* secondary text                */
  --mute: #9a9a97;         /* muted text / placeholders     */
  --paper: #ffffff;        /* base background               */
  --warm: #f7f7f6;         /* whisper-gray panels/sections  */
  --line: #e8e8e6;         /* hairline borders              */
  --amber: #ffbd59;        /* logo amber — hexagons & shapes */
  --amber-deep: #9a6f12;   /* legible amber text / accents  */
  --amber-soft: #fdecc8;   /* soft amber fills / badges     */
  --radius: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 24px rgba(10, 10, 10, 0.08);
}

/* ---- Base ---------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
}
body { background-color: var(--paper); line-height: 1.6; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
a { color: var(--ink); transition: color 0.15s ease; text-decoration: none; }
a:hover { color: var(--amber-deep); }

/* No focus ring on mouse clicks (links, buttons, logo, accordions, hamburger) —
   browsers draw it on click, which reads as a stray border. Keyboard (Tab)
   navigation still gets a clean amber ring via :focus-visible (accessibility). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
input[type='submit']:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
label:focus:not(:focus-visible),
.rb-logo:focus:not(:focus-visible),
.rb-hamburger:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
a:focus-visible,
button:focus-visible,
.button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--ink); color: #fff; }

/* Full-bleed helper */
.rb-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Announcement bar ----------------------------------------------------- */
.rb-announce {
  background-color: var(--paper);
  color: var(--slate);
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}

/* ---- Topbar --------------------------------------------------------------- */
.rb-topbar { background-color: var(--paper); }
/* Three-zone symmetric bar: logo | centered nav | actions. The outer zones share
   1fr each, so the nav sits on the page's true center line. */
.rb-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.rb-topbar-inner > .rb-logo { justify-self: start; }
.rb-topbar-inner > .rb-nav { justify-self: center; }
.rb-topbar-inner > .rb-topbar-actions { justify-self: end; }
.rb-logo { display: inline-flex; align-items: center; }
.rb-logo-img { max-height: 40px; width: auto; display: block; }
.rb-logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.rb-nav { display: flex; align-items: center; gap: 4px; }
.rb-nav a {
  color: var(--slate);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.rb-nav a:hover { color: var(--amber-deep); background-color: var(--amber-soft); }
.rb-topbar-actions { display: flex; align-items: center; gap: 8px; }
.rb-action-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 0 12px;
  white-space: nowrap;
}
.rb-action-link:hover { color: var(--slate); }
.rb-signup-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rb-signup-pill:hover { background-color: var(--ink-hover); color: #fff; transform: translateY(-1px); }
/* Mobile-menu elements hidden on desktop */
.rb-hamburger, .rb-menu-checkbox, .rb-mobile-menu { display: none; }

@media (max-width: 820px) {
  .rb-topbar { position: relative; }
  .rb-topbar-inner { display: flex; justify-content: space-between; gap: 12px; padding: 0 18px; }
  .rb-nav, .rb-topbar-actions { display: none; }

  .rb-menu-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .rb-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; margin-right: -8px;
    cursor: pointer; border-radius: 10px;
  }
  .rb-hamburger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.22s ease, opacity 0.18s ease; }
  .rb-menu-checkbox:checked ~ .rb-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rb-menu-checkbox:checked ~ .rb-hamburger span:nth-child(2) { opacity: 0; }
  .rb-menu-checkbox:checked ~ .rb-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .rb-mobile-menu {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px 16px 18px; box-shadow: var(--shadow-soft);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .rb-menu-checkbox:checked ~ .rb-mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .rb-mobile-menu a { display: block; padding: 13px 10px; font-size: 16px; font-weight: 500; color: var(--ink); border-radius: 10px; }
  .rb-mobile-menu a:hover { background: var(--amber-soft); color: var(--amber-deep); }
  .rb-mobile-menu .rb-mobile-cta { margin-top: 8px; background: var(--ink); color: #fff; text-align: center; border-radius: var(--radius-pill); }
  .rb-mobile-menu .rb-mobile-cta:hover { background: var(--ink-hover); color: #fff; }
  .rb-mobile-menu .rb-mobile-sep { height: 1px; background: var(--line); margin: 8px 0; }
}

/* Kill Storefront leftovers */
.site-header-cart,
.storefront-handheld-footer-bar,
.storefront-breadcrumb,
#secondary { display: none !important; }

/* No sidebars in this design: content area is always full width (Storefront floats
   it to ~74% when it thinks a sidebar exists, which breaks full-bleed sections). */
#primary,
.content-area {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ---- Hero ------------------------------------------------------------------ */
.rb-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--paper);
  /* Fill the whole first screen: viewport minus announcement bar (~38px) + topbar (68px),
     so the next section is only revealed by scrolling. svh keeps mobile URL bars honest. */
  min-height: calc(100vh - 106px);
  min-height: calc(100svh - 106px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 64px;
}
.rb-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.rb-hero-title {
  font-weight: 600;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
/* Attention words ("Faster", "Smarter"): the brand honey's OWN hue, darkened only in
   lightness (#e6a42b) — rhymes with the logo dot and hexagons, ~2.1:1 on white.
   ON LOAD they start black and the amber sweeps in left-to-right over 3s. The sweep is
   a gradient (amber | ink) clipped to the glyphs, twice the text width, slid from the
   ink half into the amber half; `background-clip:text` paints the letters with it.
   Faster runs 1–4.5s; Smarter runs 1.65–5.15s via .rb-hl-late. */
.rb-hero-title .rb-hl {
  color: #e6a42b; /* fallback if background-clip:text is unsupported */
  background-image: linear-gradient(to right, #e6a42b 42%, var(--ink) 58%);
  background-size: 220% 100%;
  background-position: 100% 0; /* start on the ink (black) half */
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Glow lives in the keyframes, not here — while the word is still black (during the
     delay) there is NO glow; it ramps in only as the amber sweeps across. Kept SHARP:
     tiny blur radii so it's a crisp warm edge, not a soft bloom. */
  animation: rbHlReveal 3.5s ease 1s forwards;
}
.rb-hero-title .rb-hl-late { animation-delay: 1.65s; }

@keyframes rbHlReveal {
  from {
    background-position: 100% 0; /* ink half → word is black */
    text-shadow: 0 0 4px rgba(230, 164, 43, 0), 0 0 1px rgba(255, 189, 89, 0); /* no glow */
  }
  to {
    background-position: 0 0; /* amber half → left-to-right reveal */
    text-shadow: 0 0 4px rgba(230, 164, 43, 0.6), 0 0 1px rgba(255, 189, 89, 0.65); /* sharp glow */
  }
}

/* Respect reduced-motion: no sweep, just settle on the amber (with the sharp glow). */
@media (prefers-reduced-motion: reduce) {
  .rb-hero-title .rb-hl {
    animation: none;
    background: none;
    -webkit-text-fill-color: #e6a42b;
    text-shadow: 0 0 4px rgba(230, 164, 43, 0.6), 0 0 1px rgba(255, 189, 89, 0.65);
  }
}
.rb-hero-sub {
  color: var(--slate);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 32px;
  /* Fade in slowly AFTER the headline sweep: sub 2.5–4.5s, then the search bar
     4.5–6.5s (same 2s length, starting when the sub finishes). Both hidden until
     their delay because base opacity is 0 and the animation only fills forwards. */
  opacity: 0;
  animation: rbFadeUp 2s ease 2.5s forwards;
}
.rb-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 580px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  animation: rbFadeUp 2s ease 4.5s forwards;
}
@keyframes rbFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: show both immediately, no fade. */
@media (prefers-reduced-motion: reduce) {
  .rb-hero-sub, .rb-hero-search { opacity: 1; animation: none; transform: none; }
}
.rb-hero-search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15.5px;
  padding: 12px 0;
  min-width: 0;
  /* Reset the browser's native search-field chrome (Chrome/Safari draw their own
     inset box around type="search" inputs) — it was peeking out as a stray line
     above our custom pill. Our own Search button replaces the native icon/clear. */
  appearance: none;
  -webkit-appearance: none;
}
.rb-hero-search input[type="search"]::-webkit-search-decoration,
.rb-hero-search input[type="search"]::-webkit-search-cancel-button,
.rb-hero-search input[type="search"]::-webkit-search-results-button,
.rb-hero-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.rb-hero-search input[type="search"]:focus { outline: none; box-shadow: none; }
.rb-hero-search button {
  flex: 0 0 auto;
  background-color: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 30px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rb-hero-search button:hover { background-color: var(--ink-hover); transform: translateY(-1px); }

/* Floating logo-amber hexagons — the brand's signature accent */
.rb-hex-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rb-hex {
  position: absolute;
  bottom: -140px;
  background-color: var(--amber);
  opacity: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  animation-name: rbHexFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Opacity is held high across most of the travel: at the old 0.4 peak the amber read as
   invisible against --warm, so the motion was running but nobody could see it. */
@keyframes rbHexFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.42; }
  70%  { opacity: 0.42; }
  100% { transform: translateY(-92vh) rotate(180deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-hex { animation: none; opacity: 0.22; }
  .rb-track { animation: none !important; }
}

/* ---- Content bands ---------------------------------------------------------- */
.rb-band { padding: 96px 16px; background-color: var(--paper); }
.rb-band-warm { background-color: var(--warm); }
.rb-band-line { border-top: 1px solid var(--line); }
.rb-band-inner { max-width: 1200px; margin: 0 auto; }
.rb-center { text-align: center; }
.rb-eyebrow {
  margin: 0 0 10px;
  color: var(--amber-deep);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rb-h2 { margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 40px); letter-spacing: -0.025em; }
.rb-h3 { margin: 56px 0 20px; font-size: clamp(22px, 3vw, 26px); letter-spacing: -0.02em; }
/* Not auto-centred by default: `margin: 0 auto` silently indents the paragraph inside any
   left-aligned column (it centres the max-width box against the wider column), which put
   the RFQ promo's copy 47px right of its own heading. Centring is opted into by .rb-center,
   which is what every centred band already uses. */
.rb-sub { margin: 0 0 44px; max-width: 580px; color: var(--slate); font-size: 16px; line-height: 1.6; }
.rb-center .rb-sub { margin-left: auto; margin-right: auto; }

/* Stats strip — monochrome numerals */
/* Even 4-column grid (2×2 on mobile) so every stat cell is identical width. */
.rb-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 0;
  margin: 0 auto 48px;
  max-width: 880px;
}
.rb-stat { display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.rb-stat:nth-child(even) { border-left: 1px solid var(--line); }
@media (min-width: 768px) {
  .rb-stats { grid-template-columns: repeat(4, 1fr); }
  .rb-stat + .rb-stat { border-left: 1px solid var(--line); }
}
.rb-stat-value {
  color: var(--ink);
  font-size: 46px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rb-stat-label { margin-top: 6px; color: var(--slate); font-size: 13px; line-height: 18px; }

/* Marquee product rows */
.rb-marquee {
  overflow: hidden;
  margin-bottom: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* 55s over a ~4200px track was ~38px/sec — technically animating, but slow enough to read
   as a static row. ~75px/sec is unmistakably moving without becoming distracting. */
.rb-track { display: flex; width: max-content; animation: rbMarquee 28s linear infinite; }
.rb-track-reverse { animation-direction: reverse; animation-duration: 34s; }
.rb-marquee:hover .rb-track { animation-play-state: paused; }
@keyframes rbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rb-card {
  flex: 0 0 auto;
  width: 248px;
  margin-right: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.rb-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background-color: var(--warm);
  color: var(--slate);
  border: 1px solid var(--line);
}
.rb-badge-white { background-color: var(--amber-soft); color: var(--amber-deep); border-color: #f3d79a; }
.rb-badge-bulk { background-color: var(--warm); color: var(--slate); }
.rb-card-name { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.rb-card-meta { color: var(--slate); font-size: 13px; }
.rb-card-gated { color: var(--mute); font-size: 12px; font-style: italic; }

.rb-cta-row { margin: 16px 0 0; }
/* One pill geometry everywhere: same 44px height as the hero search button. */
.rb-pill-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  color: #fff !important;
  font-weight: 500;
  font-size: 15px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rb-pill-btn:hover { background-color: var(--ink-hover); transform: translateY(-1px); }

/* Two/three column blocks */
.rb-two-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
.rb-three-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
  .rb-two-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .rb-three-cols { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
}
/* Panels: equal heights, CTAs pinned to the same baseline in both columns. */
.rb-panel {
  background-color: var(--warm);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rb-panel h3 { margin: 0 0 10px; font-size: 20px; }
.rb-panel p { color: var(--slate); font-size: 15px; line-height: 1.6; margin: 0 0 24px; flex: 1; }
.rb-panel .rb-pill-btn { margin-top: auto; }
.rb-step {
  text-align: center;
  padding: 32px 24px;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rb-band-warm .rb-step { background-color: #fff; border: none; }
.rb-step h3 { margin: 0 0 10px; font-size: 18px; }
.rb-step-num { color: var(--amber-deep); font-weight: 700; }
.rb-step p { color: var(--slate); font-size: 14.5px; line-height: 1.6; margin: 0; }
.rb-text-cols { margin-bottom: 8px; }
.rb-text-cols p { color: var(--slate); font-size: 15.5px; line-height: 1.7; margin: 0; text-align: left; }

/* Bottom SEO/FAQ band: centered headings, centered column of text + FAQ */
.rb-band-line .rb-h2,
.rb-band-line .rb-h3 { text-align: center; }
.rb-band-line .rb-two-cols { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* FAQ accordion — minimal, monochrome, centered as a block */
.rb-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.rb-faq-item { border-bottom: 1px solid var(--line); }
.rb-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.4;
  transition: color 0.15s ease;
}
.rb-faq-item summary::-webkit-details-marker { display: none; }
.rb-faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--amber-deep);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s ease;
}
.rb-faq-item[open] summary::after { content: '\2212'; color: var(--amber-deep); }
.rb-faq-item summary:hover { color: var(--amber-deep); }
.rb-faq-item p { margin: 0; padding: 0 4px 22px; max-width: 720px; color: var(--slate); font-size: 15px; line-height: 1.65; }

/* ---- Footer ------------------------------------------------------------------ */
.rb-footer {
  background-color: var(--paper);
  border-top: 1px solid var(--line);
  padding: 64px 24px 48px;
}
/* Footer mirrors the topbar's balance: brand block left, link columns right,
   both top-aligned on the same baseline with even column gaps. */
.rb-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.rb-footer-brand .rb-logo-img { max-height: 40px; }
.rb-footer-tagline { margin: 14px 0 4px; color: var(--ink); font-weight: 500; font-size: 14.5px; }
.rb-footer-copy { margin: 0; color: var(--mute); font-size: 12.5px; }
.rb-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.rb-footer-col { display: flex; flex-direction: column; gap: 11px; min-width: 150px; }
.rb-footer-col-title {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rb-footer-col a { color: var(--slate); font-size: 14px; }
.rb-footer-col a:hover { color: var(--ink); }
/* Operator identification strip — full-width base line under the columns. */
.rb-footer-legal {
  max-width: 1140px;
  margin: 36px auto 0;
  padding: 18px 24px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.rb-footer-legal p { margin: 0; color: var(--mute); font-size: 12.5px; line-height: 1.6; }

/* ---- Buttons (global WooCommerce) — black pills ---------------------------------- */
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.button,
.added_to_cart,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.7em 1.7em;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
button:hover,
.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--ink-hover);
  color: #fff;
  transform: translateY(-1px);
}
button:disabled,
.button.disabled,
.button:disabled {
  background-color: var(--line);
  color: var(--mute);
  transform: none;
  cursor: not-allowed;
}

/* ---- Forms ---------------------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(248, 184, 88, 0.30);
}

/* ---- Product grid / cards (shop pages) -------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--ink); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ink); font-weight: 600; }

/* Gated pricing ("Sign in to see price") */
.remibee-gated-price,
a.remibee-gated-price { display: inline-block; color: var(--slate); font-style: italic; font-weight: 500; }
.remibee-gated-price:hover { color: var(--ink); text-decoration: underline; }
.button.remibee-gated-cta { background-color: transparent; color: var(--ink); border: 1px solid var(--line); }
.button.remibee-gated-cta:hover { background-color: var(--warm); color: var(--ink); }
/* Shop grid already shows a "Sign in to see price" link as the price — drop the
   redundant duplicate button beneath it (still shown on single product pages). */
.woocommerce ul.products li.product .remibee-gated-cta { display: none; }

/* Seller agreement box (vendor dashboard) */
.remibee-seller-terms {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--warm);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--slate);
}
.remibee-seller-terms a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.remibee-seller-terms label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }

/* Pseudonymous vendor badge */
.remibee-verified-partner { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info { border-top-color: var(--ink); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ink); }

/* Content pages readability */
.page .entry-content { max-width: 820px; margin: 0 auto; }
.page .entry-title { text-align: center; margin: 24px 0 28px; letter-spacing: -0.03em; }

/* ---- Auth page (My Account, logged out) — the Remibee hexagon auth look ---- */
/* Pre-login the Login/Register card supplies its own headings, so the outer page
   title would be a redundant duplicate — hide it only in that state. Once logged
   in (body.logged-in), restore it as the dashboard's heading so buyers and sellers
   land on a real page instead of jumping straight to "Hello {name}…" with nothing
   above it. */
.woocommerce-account:not(.logged-in) .entry-title { display: none; }
.woocommerce-account.logged-in .entry-title {
  text-align: center;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.03em;
  margin: 8px 0 32px;
}
.rb-auth {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--paper);
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 96px;
}
.rb-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 44px 44px 40px;
}
@media (max-width: 640px) {
  .rb-auth-card { padding: 28px 20px; }
}
/* WooCommerce renders Login/Register as .u-columns > .u-column1/.u-column2 —
   its stylesheet floats them at 48% width, so neutralise that inside the card. */
.rb-auth-card .u-columns { display: grid; grid-template-columns: 1fr; gap: 40px; }
.rb-auth-card .u-column1,
.rb-auth-card .u-column2 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .rb-auth-card .u-columns { grid-template-columns: 1fr 1fr; gap: 0; }
  .rb-auth-card .u-column1 { padding-right: 44px; border-right: 1px solid var(--line); }
  .rb-auth-card .u-column2 { padding-left: 44px; }
}
.rb-auth-card h2 {
  margin: 0 0 20px;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-align: center;
}
.rb-auth-card form.login,
.rb-auth-card form.register { border: none; padding: 0; margin: 0; border-radius: 0; }
.rb-auth-card .form-row { margin-bottom: 16px; }
.rb-auth-card label { font-size: 13.5px; font-weight: 500; color: var(--slate); margin-bottom: 6px; display: block; }
.rb-auth-card input[type='text'],
.rb-auth-card input[type='email'],
.rb-auth-card input[type='password'],
.rb-auth-card .form-row input.input-text,
.rb-auth-card .password-input,
.rb-auth-card .form-row { width: 100% !important; box-sizing: border-box; }
.rb-auth-card .password-input input { width: 100% !important; }
.rb-auth-card button[type='submit'],
.rb-auth-card .woocommerce-button,
.rb-auth-card .woocommerce-form-login__submit,
.rb-auth-card .woocommerce-form-register__submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: 4px;
}
.rb-auth-card .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--slate);
  font-size: 13.5px;
}
.rb-auth-card .woocommerce-LostPassword {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
}
.rb-auth-card .woocommerce-LostPassword a { color: var(--slate); text-decoration: underline; text-underline-offset: 2px; }
.rb-auth-card .woocommerce-LostPassword a:hover { color: var(--ink); }
.rb-auth-card .woocommerce-privacy-policy-text { color: var(--mute); font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; }
.rb-auth-card .woocommerce-privacy-policy-text a { text-decoration: underline; }

/* Logged-in account dashboard: tidy navigation to match the skin */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--slate);
  font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background-color: var(--amber-soft); color: var(--amber-deep); }

/* ---- Dokan vendor dashboard ---------------------------------------------
   The vendor dashboard skin now lives in its own stylesheet, assets/css/
   remibee-dashboard.css, loaded only on Dokan pages (see functions.php ->
   remibee_enqueue_dashboard_styles). It was moved out of here because it had
   grown to ~100 lines that every storefront visitor downloaded but only
   sellers ever saw, and because two files targeting the same components was
   already producing !important fights. Do not re-add Dokan rules here. */

/* ============ Symmetry & professionalism pass (all inner pages) ============ */

/* Every inner page shares one centered axis and one vertical rhythm. */
.site-main { padding: 40px 0 72px; }
.home .site-main { padding: 0; }

/* WooCommerce page titles: centered on the page spine, consistent scale. */
.woocommerce-page .page-title,
.archive .page-title {
  text-align: center;
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.03em;
  margin: 16px 0 8px;
}

/* Shop toolbar: quiet, centered. The result count is clutter — remove it. */
.woocommerce-result-count { display: none; }
.woocommerce-ordering { float: none !important; display: flex; justify-content: center; margin: 0 auto 36px; }
.woocommerce-ordering select { min-width: 220px; text-align: center; }

/* Product cards: identical heights, centered content, price row pinned to the bottom
   so every card in a row ends on the same baseline. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }
.woocommerce ul.products li.product img { border-radius: 12px; }
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .remibee-gated-price { margin-top: auto; }

/* Pagination: centered pills. */
.woocommerce nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul { border: none; display: inline-flex; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); color: var(--slate); background: var(--paper);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Single product: align the two halves and calm the type. */
.single-product div.product .product_title { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; }
.single-product div.product .woocommerce-product-details__short-description { color: var(--slate); }
.single-product div.product .woocommerce-tabs ul.tabs li a { font-weight: 500; }

/* Content pages: one reading column, comfortable rhythm. */
.page .entry-content > p:first-child { font-size: 17.5px; color: var(--slate); line-height: 1.7; }
.page .entry-content h2 { margin: 40px 0 12px; font-size: clamp(22px, 3vw, 28px); }
.page .entry-content p, .page .entry-content li { line-height: 1.7; }
.page .entry-content ul, .page .entry-content ol { padding-left: 22px; }

/* Marquee cards: identical heights regardless of name length. */
.rb-card { min-height: 132px; }

/* Panels & steps stretch to equal heights within their rows. */
.rb-two-cols > *, .rb-three-cols > * { height: 100%; }

/* Cart & checkout: center the forms on the page spine. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { max-width: 1000px; margin: 0 auto; }

/* ================= Responsive polish (phones & tablets) ================= */
@media (max-width: 767px) {
  .rb-band { padding: 60px 20px; }
  .rb-sub { margin-bottom: 32px; }
  .rb-stat-value { font-size: clamp(34px, 12vw, 44px); }
  .rb-stat { padding: 0 12px; }
  .rb-stat-label { font-size: 12px; }
  .rb-panel { padding: 32px 24px; }
  .rb-step { padding: 28px 22px; }
  .rb-h3 { margin-top: 40px; }
  .rb-faq-item summary { font-size: 15.5px; padding: 18px 2px; }
  .rb-footer { padding: 48px 20px 36px; }
  .rb-footer-inner { gap: 32px; }
  .rb-footer-cols { gap: 40px; width: 100%; }
  .rb-footer-col { min-width: 130px; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
}
@media (max-width: 480px) {
  .rb-hero { padding: 40px 16px 56px; min-height: calc(100svh - 130px); }
  .rb-hero-search { padding: 6px 6px 6px 16px; }
  .rb-hero-search button { padding: 12px 20px; font-size: 14px; }
  .rb-announce { font-size: 11.5px; padding: 8px 14px; }
  .rb-footer-cols { gap: 28px; }
  .rb-panel .rb-pill-btn, .rb-cta-row .rb-pill-btn { width: 100%; justify-content: center; }
  .page .entry-content { padding: 0 4px; }
}

/* =========================================================================
   Remibee Phase 1 — trust & discovery UI (COA chip, Verified Business badge,
   compliance-document panel, browse-by-benefit / certification grids).
   Uses the same ink/amber/warm tokens as the rest of the skin.
   ========================================================================= */

/* ---- COA chip (shop grid + single) -------------------------------------- */
.remibee-loop-chips { margin: 6px 0 2px; }
.remibee-doc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 10px; border-radius: var(--radius-pill);
  line-height: 1.5; white-space: nowrap;
}
.remibee-doc-chip::before {
  content: ""; width: 9px; height: 10px; display: inline-block;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-doc-chip.is-valid { background: #e8f3ec; color: #2f7d4f; }
.remibee-doc-chip.is-valid::before { background: #2f7d4f; }
.remibee-doc-chip.is-expired { background: var(--amber-soft); color: var(--amber-deep); }
.remibee-doc-chip.is-expired::before { background: var(--amber-deep); }

/* ---- Verified Business badge -------------------------------------------- */
.remibee-loop-verified { margin: 4px 0 2px; }
.remibee-single-verified { margin: 0 0 12px; }
.remibee-verified-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.005em;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; line-height: 1.4;
}
.remibee-verified-badge.is-compact { font-size: 11px; padding: 3px 9px; gap: 5px; }
.remibee-verified-tick {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--amber); position: relative;
}
.remibee-verified-badge.is-compact .remibee-verified-tick { width: 11px; height: 11px; }
.remibee-verified-tick::after {
  content: ""; position: absolute; left: 4.5px; top: 2px;
  width: 3px; height: 6px; border: solid var(--ink);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.remibee-verified-badge.is-compact .remibee-verified-tick::after { left: 3.5px; top: 1.5px; height: 5px; }

/* ---- Compliance-document panel (single product) ------------------------- */
.remibee-docs-panel {
  margin: 18px 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--warm);
}
.remibee-docs-panel-chip { margin-bottom: 10px; }
.remibee-docs-panel-title {
  font-size: 14px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em;
}
.remibee-docs-list { list-style: none; margin: 0; padding: 0; }
.remibee-docs-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.remibee-docs-list li:first-child { border-top: none; }
.remibee-doc-file-ico {
  width: 12px; height: 14px; flex: none; border-radius: 2px;
  background: var(--amber); position: relative;
}
.remibee-doc-file-ico::after {
  content: ""; position: absolute; top: 3px; left: 2px; right: 2px; height: 1.5px;
  background: var(--paper); box-shadow: 0 3px 0 var(--paper), 0 6px 0 var(--paper);
}
.remibee-docs-gated { font-size: 13.5px; color: var(--slate); margin: 0; }

/* ---- Vendor form sections (Dokan) --------------------------------------- */
.remibee-docs-heading, .remibee-axis-heading, .remibee-kyb-heading {
  font-size: 16px; font-weight: 600; margin: 4px 0 2px;
}
.remibee-docs-help, .remibee-axis-help, .remibee-kyb-help {
  font-size: 13px; color: var(--slate); margin: 0 0 14px; max-width: 60ch;
}
.remibee-doc-row { margin-bottom: 16px; }
.remibee-doc-current { font-size: 12.5px; color: var(--slate); margin: 0 0 6px; }
.remibee-kyb-section { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.remibee-kyb-approved { color: #2f7d4f; }
.remibee-axis-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.remibee-axis-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink); font-weight: 400; cursor: pointer;
}
.remibee-axis-group { margin-bottom: 16px; }

/* ---- [remibee_browse] grids --------------------------------------------- */
.remibee-browse-axis { margin: 0 0 40px; }
.remibee-browse-title {
  font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px;
}
.remibee-browse-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.remibee-browse-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s, transform .15s;
}
.remibee-browse-chip:hover { border-color: var(--amber); background: var(--amber-soft); transform: translateY(-1px); }
.remibee-browse-chip-count {
  font-size: 12px; font-weight: 600; color: var(--slate);
  background: var(--warm); border-radius: var(--radius-pill); padding: 1px 8px; min-width: 22px; text-align: center;
}
.remibee-browse-chip:hover .remibee-browse-chip-count { color: var(--amber-deep); background: rgba(255,255,255,.65); }

/* =========================================================================
   Remibee Phase 2 — anonymous RFQ engine (request-a-quote form, buyer inbox,
   seller inbox, quote cards). Same ink/amber/warm tokens.
   ========================================================================= */

/* ---- Notices ------------------------------------------------------------ */
.remibee-rfq-notice {
  padding: 12px 16px; border-radius: 12px; font-size: 14px; margin: 0 0 18px;
  border: 1px solid var(--line);
}
.remibee-rfq-notice.is-success { background: #e8f3ec; border-color: #cfe6d8; color: #256b41; }
.remibee-rfq-notice.is-error { background: var(--amber-soft); border-color: #f2dca6; color: var(--amber-deep); }

/* ---- Request-a-quote CTA on the product page ---------------------------- */
.remibee-rfq-cta { margin: 20px 0; }
.remibee-rfq-open {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: var(--radius-pill);
  cursor: pointer; list-style: none; transition: background .15s;
}
.remibee-rfq-open::-webkit-details-marker { display: none; }
.remibee-rfq-open:hover { background: var(--ink-hover); color: #fff; }
.remibee-rfq-hex {
  width: 12px; height: 13px; flex: none; background: var(--amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-rfq-details[open] .remibee-rfq-open { border-radius: var(--radius) var(--radius) 0 0; }
.remibee-rfq-body {
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 20px; background: var(--warm);
}
.remibee-rfq-intro { font-size: 13.5px; color: var(--slate); margin: 0 0 14px; }

/* ---- The form ----------------------------------------------------------- */
.remibee-rfq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.remibee-rfq-field { display: flex; flex-direction: column; gap: 5px; }
.remibee-rfq-field.remibee-rfq-col2 { grid-column: 1 / -1; }
.remibee-rfq-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.005em; }
.remibee-rfq-field em { color: var(--amber-deep); font-style: normal; }
.remibee-rfq-form input[type="text"],
.remibee-rfq-form input[type="date"],
.remibee-rfq-form select,
.remibee-rfq-form textarea,
.remibee-quote-form input,
.remibee-quote-form select,
.remibee-quote-form textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; background: var(--paper); color: var(--ink); width: 100%;
}
.remibee-rfq-form textarea, .remibee-quote-form textarea { resize: vertical; }
.remibee-rfq-form input:focus, .remibee-rfq-form select:focus, .remibee-rfq-form textarea:focus,
.remibee-quote-form input:focus, .remibee-quote-form select:focus, .remibee-quote-form textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft);
}
.remibee-rfq-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.remibee-rfq-submit, .remibee-btn-accept {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: none; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; padding: 11px 24px; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.remibee-rfq-submit:hover, .remibee-btn-accept:hover { background: var(--ink-hover); color: #fff; }
.remibee-rfq-privacy { font-size: 12.5px; color: var(--slate); }
.remibee-rfq-gated { font-size: 14px; }

/* ---- Inbox shells ------------------------------------------------------- */
.remibee-inbox-title { font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 18px; }
.remibee-inbox-empty {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 32px 24px; text-align: center; background: var(--warm);
}
.remibee-inbox-empty h3 { font-size: 17px; margin: 0 0 6px; }
.remibee-inbox-empty p { font-size: 14px; color: var(--slate); margin: 0 0 16px; max-width: 46ch; margin-inline: auto; }

/* ---- RFQ block ---------------------------------------------------------- */
.remibee-rfq-block {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  margin: 0 0 18px; background: var(--paper); box-shadow: var(--shadow-soft);
}
.remibee-rfq-block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.remibee-rfq-subject { font-size: 17px; font-weight: 600; margin: 0 0 3px; letter-spacing: -0.01em; }
.remibee-rfq-block-meta { font-size: 13px; color: var(--slate); margin: 0; }
.remibee-rfq-specs { font-size: 13.5px; color: var(--ink-hover); margin: 10px 0 0; }
.remibee-rfq-status {
  flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap;
}
.remibee-rfq-status.is-open, .remibee-rfq-status.is-targeted { background: var(--amber-soft); color: var(--amber-deep); }
.remibee-rfq-status.is-closed { background: var(--warm); color: var(--slate); }
.remibee-rfq-status.is-awarded { background: #e8f3ec; color: #256b41; }
.remibee-rfq-count { font-size: 13px; font-weight: 600; color: var(--ink); margin: 16px 0 10px; }
.remibee-rfq-empty { font-size: 13.5px; color: var(--slate); margin: 14px 0 0; }

/* ---- Quote cards (buyer view) ------------------------------------------- */
.remibee-quote-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.remibee-quote-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--warm);
}
.remibee-quote-card.is-accepted { border-color: #97ceac; background: #eef7f1; }
.remibee-quote-card.is-declined { opacity: 0.66; }
.remibee-quote-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.remibee-quote-alias { font-size: 14px; font-weight: 600; }
.remibee-quote-flag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; }
.remibee-quote-flag.is-accepted { background: #256b41; color: #fff; }
.remibee-quote-flag.is-declined { background: var(--line); color: var(--slate); }
.remibee-quote-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.remibee-quote-figures .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); font-weight: 600; }
.remibee-quote-figures .v { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.remibee-quote-notes { font-size: 13px; color: var(--ink-hover); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.remibee-quote-accept { margin-top: 12px; }
.remibee-btn-accept { font-size: 13px; padding: 8px 18px; width: 100%; }
.remibee-btn-close {
  margin-top: 14px; background: none; border: 1px solid var(--line); color: var(--slate);
  border-radius: var(--radius-pill); font-size: 13px; padding: 7px 16px; cursor: pointer;
}
.remibee-btn-close:hover { border-color: var(--slate); color: var(--ink); }

/* ---- Seller quote form -------------------------------------------------- */
.remibee-quote-toggle {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--amber-deep);
  margin-top: 14px; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.remibee-quote-toggle::-webkit-details-marker { display: none; }
.remibee-quote-toggle::before { content: "+"; font-weight: 700; }
details[open] > .remibee-quote-toggle::before { content: "\2013"; }
.remibee-quote-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.remibee-quote-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.remibee-quote-form label { display: flex; flex-direction: column; gap: 5px; }
.remibee-quote-form label > span { font-size: 12px; font-weight: 600; }
.remibee-quote-notes-field { margin-top: 12px; }

@media (max-width: 600px) {
  .remibee-rfq-grid { grid-template-columns: 1fr; }
  .remibee-quote-figures { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Remibee Phase 3 — ingredient hub header + deal / escrow workflow cards.
   ========================================================================= */

/* ---- Ingredient hub header ---------------------------------------------- */
.remibee-hub-header {
  background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; margin: 0 0 28px;
}
.remibee-hub-eyebrow {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--amber-deep); margin: 0 0 8px;
}
.remibee-hub-title { font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; }
.remibee-hub-intro { font-size: 15px; color: var(--slate); max-width: 68ch; margin: 0 0 16px; }
.remibee-hub-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 12px; }
.remibee-hub-facts span { font-size: 14px; color: var(--ink); }
.remibee-hub-facts b { font-size: 18px; font-weight: 700; color: var(--ink); }
.remibee-hub-certs { font-size: 13.5px; color: var(--ink-hover); margin: 0 0 20px; }
.remibee-hub-certs-label { font-weight: 600; color: var(--slate); }
.remibee-hub-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: var(--radius-pill); transition: background .15s;
}
.remibee-hub-cta::before {
  content: ""; width: 12px; height: 13px; background: var(--amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-hub-cta:hover { background: var(--ink-hover); color: #fff; }

/* ---- Vendor "core ingredient" field ------------------------------------- */
.remibee-ingredient-help { font-size: 12.5px; color: var(--slate); margin: 6px 0 0; max-width: 60ch; }

/* ---- Deals -------------------------------------------------------------- */
.remibee-deals { margin-top: 36px; padding-top: 8px; }
.remibee-deal-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  margin: 0 0 16px; background: var(--paper); box-shadow: var(--shadow-soft);
}
.remibee-deal-card.is-released { border-color: #97ceac; }
.remibee-deal-card.is-cancelled { opacity: 0.72; }
.remibee-deal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.remibee-deal-subject { font-size: 16px; font-weight: 600; margin: 0 0 3px; letter-spacing: -0.01em; }
.remibee-deal-counter { font-size: 13px; color: var(--slate); margin: 0; }
.remibee-deal-status {
  flex: none; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill);
  white-space: nowrap; background: var(--amber-soft); color: var(--amber-deep);
}
.remibee-deal-status.is-released { background: #e8f3ec; color: #256b41; }
.remibee-deal-status.is-cancelled { background: var(--warm); color: var(--slate); }

/* progress rail */
.remibee-deal-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.remibee-deal-step {
  font-size: 11px; font-weight: 600; padding: 5px 11px 5px 22px; border-radius: var(--radius-pill);
  position: relative; background: var(--warm); color: var(--mute);
}
.remibee-deal-step::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 9px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--mute);
}
.remibee-deal-step.is-done { background: var(--amber-soft); color: var(--amber-deep); }
.remibee-deal-step.is-done::before { background: var(--amber-deep); }
.remibee-deal-step.is-current { background: var(--ink); color: #fff; }
.remibee-deal-step.is-current::before { background: var(--amber); }

.remibee-deal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.remibee-deal-btn {
  background: var(--ink); color: #fff; border: none; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; padding: 10px 20px; cursor: pointer; transition: background .15s;
}
.remibee-deal-btn:hover { background: var(--ink-hover); }
.remibee-deal-btn-danger { background: none; color: var(--slate); border: 1px solid var(--line); }
.remibee-deal-btn-danger:hover { background: none; border-color: var(--crit, #b23b2e); color: var(--crit, #b23b2e); }
.remibee-deal-wait, .remibee-deal-done { font-size: 13px; color: var(--slate); margin: 4px 0 0; }
.remibee-deal-done { color: #256b41; font-weight: 600; }

@media (max-width: 600px) {
  .remibee-hub-header { padding: 22px 20px; }
  .remibee-deal-actions { flex-direction: column; }
  .remibee-deal-btn, .remibee-deal-btn-danger { width: 100%; }
}

/* =========================================================================
   Remibee Phase 4 — reputation (ratings + response badge), saved searches,
   reorder. Same ink/amber/warm tokens.
   ========================================================================= */

/* ---- Reputation strip --------------------------------------------------- */
.remibee-reputation { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.remibee-loop-reputation { margin: 4px 0 2px; }
.remibee-single-reputation { margin: 0 0 12px; }

/* rating hexagons */
.remibee-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.remibee-rating.is-new { color: var(--mute); font-size: 12px; font-style: italic; }
.remibee-rating-marks { display: inline-flex; gap: 2px; }
.remibee-rating-hex {
  width: 11px; height: 12px; display: inline-block; background: var(--line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-rating-hex.is-on { background: var(--amber); }
.remibee-rating-num { font-weight: 700; color: var(--ink); }
.remibee-rating-count { color: var(--mute); font-size: 12px; }

/* response-time badge */
.remibee-response-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: #256b41; background: #e8f3ec; padding: 3px 10px; border-radius: var(--radius-pill);
}
.remibee-response-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f7d4f; }

/* ---- Rating form (in deal card) ----------------------------------------- */
.remibee-rate-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.remibee-rate-label { font-size: 13.5px; font-weight: 600; }
.remibee-rate-done { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--slate); display: flex; align-items: center; gap: 4px; }
.remibee-rate-done .remibee-rating-hex { margin-left: 1px; }

/* star picker: reversed radios so :hover/:checked fill leftward */
.remibee-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.remibee-rate-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.remibee-rate-stars label {
  width: 22px; height: 22px; cursor: pointer; background: var(--line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background .12s;
}
.remibee-rate-stars label:hover,
.remibee-rate-stars label:hover ~ label,
.remibee-rate-stars input:checked ~ label { background: var(--amber); }
.remibee-rate-stars input:focus-visible + label { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.remibee-rate-note {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px;
  font-family: inherit; min-width: 220px; flex: 1;
}
.remibee-rate-note:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }

/* ---- Save-search buttons ------------------------------------------------ */
.remibee-hub-alert { margin-top: 12px; }
.remibee-search-alert { margin: 0 0 16px; }
.remibee-ss-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; padding: 9px 18px;
  transition: border-color .15s, background .15s;
}
.remibee-ss-btn::before {
  content: ""; width: 10px; height: 11px; background: var(--amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-ss-btn:hover { border-color: var(--amber); background: var(--amber-soft); }
.remibee-ss-saved-flag { font-size: 12.5px; font-weight: 600; color: var(--amber-deep); display: inline-flex; align-items: center; gap: 6px; }
.remibee-ss-saved-flag::before {
  content: ""; width: 10px; height: 11px; background: var(--amber-deep);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---- Saved-searches list (buyer inbox) ---------------------------------- */
.remibee-saved-searches { margin-top: 36px; }
.remibee-ss-intro { font-size: 13.5px; color: var(--slate); margin: 0 0 14px; }
.remibee-ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.remibee-ss-item {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 8px 7px 14px; background: var(--paper);
}
.remibee-ss-hex { width: 10px; height: 11px; background: var(--amber); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.remibee-ss-label { font-size: 14px; font-weight: 500; }
.remibee-ss-remove {
  border: none; background: var(--warm); color: var(--slate); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; padding: 0;
}
.remibee-ss-remove:hover { background: var(--amber-soft); color: var(--amber-deep); }
.remibee-ss-del { margin: 0; }

/* ---- Reorder button ----------------------------------------------------- */
.remibee-reorder-btn {
  display: inline-block; margin-top: 12px; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink); background: none;
  border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; padding: 9px 18px;
  transition: border-color .15s, background .15s;
}
.remibee-reorder-btn:hover { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); }

/* =========================================================================
   Remibee — site-wide UI polish pass (desktop + phone): brand-aligned
   notices, tighter mobile rhythm, consistent trust-stack spacing, refined
   cards & typography. Appended last so it refines earlier rules.
   ========================================================================= */

/* ---- Global refinements ------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
::selection { background: var(--amber-soft); color: var(--ink); }

/* ---- WooCommerce / Dokan notices → brand (was Storefront blue/green/red) - */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  background: var(--warm) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--amber) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 15px 20px !important;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message { border-left-color: var(--good, #2f7d4f) !important; }
.woocommerce-error   { border-left-color: var(--crit, #b23b2e) !important; }
/* Buttons that sit inside a notice (e.g. "View cart") → pill, not a clashing block. */
.woocommerce-info .button,
.woocommerce-message .button {
  background: var(--ink) !important; color: #fff !important;
  border-radius: var(--radius-pill) !important; padding: 8px 18px !important;
  margin-left: auto; font-size: 13px !important;
}
.woocommerce-info .button:hover,
.woocommerce-message .button:hover { background: var(--ink-hover) !important; }

/* ---- Hero: don't force a full screen on phones (kills the dead gap) ------ */
@media (max-width: 767px) {
  .rb-hero { min-height: auto !important; padding: 36px 18px 44px !important; }
  .rb-hero-title { margin-bottom: 14px; }
  .rb-hero-sub { margin-bottom: 24px; }
}

/* ---- Consistent section rhythm ------------------------------------------ */
@media (max-width: 767px) {
  .rb-band { padding: 52px 20px; }
  .rb-h2 { font-size: clamp(24px, 6.5vw, 32px); }
  .rb-stats { gap: 28px 12px; }
}
@media (max-width: 400px) {
  .rb-band { padding: 44px 18px; }
}

/* ---- Product page: even spacing down the trust stack -------------------- */
.single-product .remibee-single-verified,
.single-product .remibee-single-reputation,
.single-product .remibee-docs-panel,
.single-product .remibee-rfq-cta { clear: both; }
.single-product div.product .entry-summary > .price { margin-bottom: 14px; }
.remibee-single-reputation { margin-top: 2px; }

/* ---- Shop cards: uniform, gentle lift ----------------------------------- */
ul.products li.product,
.products li.product {
  transition: transform .16s ease, box-shadow .16s ease;
}
ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,10,10,.09);
}

/* ---- Forms: consistent control sizing on phones ------------------------- */
@media (max-width: 600px) {
  .remibee-rfq-actions { flex-direction: column; align-items: stretch; }
  .remibee-rfq-submit { width: 100%; }
  .remibee-rfq-privacy { text-align: center; }
  .remibee-quote-form-grid { grid-template-columns: 1fr 1fr; }
  .remibee-deal-top { flex-direction: column; }
  .remibee-deal-status { align-self: flex-start; }
  .remibee-rate-form { flex-direction: column; align-items: stretch; }
  .remibee-rate-note { min-width: 0; }
}

/* ---- Account / dashboard breathing room --------------------------------- */
.woocommerce-account .woocommerce { max-width: 1100px; margin-inline: auto; }
.remibee-inbox, .remibee-deals, .remibee-saved-searches { max-width: 920px; margin-inline: auto; }

/* ---- Footer: align columns on wide screens ------------------------------ */
.rb-footer-cols { justify-content: space-between; }

/* ---- Buttons: unify hover lift on all pill CTAs ------------------------- */
.rb-pill-btn, .remibee-rfq-submit, .remibee-hub-cta, .remibee-rfq-open {
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rb-pill-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,10,10,.12); }

/* ---- Standard presentation cover images --------------------------------- */
.remibee-std-img { width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
ul.products li.product .remibee-std-img { aspect-ratio: 1 / 1; }
.remibee-presentation-help { font-size: 12.5px; color: var(--slate); margin: 6px 0 0; max-width: 60ch; }

/* ---- Content pages: comfortable reading measure (was ~94 chars/line) ----- */
.page:not(.woocommerce-page) .entry-content { max-width: 68ch; margin-inline: auto; }
.page:not(.woocommerce-page) .entry-content h2 { margin-top: 2em; }
.page:not(.woocommerce-page) .entry-content > p:first-of-type {
  font-size: 1.08em; color: var(--ink-hover);
}

/* =========================================================================
   Remibee — homepage architecture sections (discovery grid, RFQ promo,
   comparison table, closing CTA). Patterns adapted from the category-led
   and request-led structures the leading ingredient marketplaces use.
   ========================================================================= */

.rb-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Dark band + light type variants ------------------------------------ */
.rb-band-ink { background-color: var(--ink); }
.rb-h2-light { color: #fff; }
.rb-sub-light { color: #b9b7b1; }
.rb-eyebrow-light { color: var(--amber); }
.rb-pill-btn-light {
  background-color: var(--amber) !important; color: var(--ink) !important; border-color: var(--amber) !important;
}
.rb-pill-btn-light:hover { background-color: #f6c876 !important; color: var(--ink) !important; }
.rb-pill-btn-ghost {
  background-color: transparent !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
.rb-pill-btn-ghost:hover { background-color: rgba(255,255,255,.09) !important; color: #fff !important; }

/* ---- Discovery grid ("Find it three ways") ------------------------------ */
.rb-browse-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px; text-align: left;
}
.rb-browse-col {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 20px; display: flex; flex-direction: column;
}
.rb-browse-col-title {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--amber-deep); margin: 0 0 14px;
}
.rb-browse-links { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.rb-browse-links li { border-top: 1px solid var(--line); }
.rb-browse-links li:first-child { border-top: none; }
.rb-browse-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: color .14s;
}
.rb-browse-links a:hover { color: var(--amber-deep); }
.rb-browse-links a span { min-width: 0; }
.rb-browse-links a em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--slate);
  background: var(--warm); border-radius: var(--radius-pill); padding: 2px 9px; flex: none;
}
.rb-browse-all {
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  align-self: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.rb-browse-all:hover { color: var(--amber-deep); border-bottom-color: var(--amber); }

/* ---- RFQ promo band ----------------------------------------------------- */
.rb-rfq-promo {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px;
  /* Top-align the two columns so the eyebrow and the first list item share a baseline.
     `center` only looked right while the columns happened to be the same height — any
     copy edit to either side would have drifted them apart. */
  align-items: start;
  text-align: left;
}
.rb-rfq-promo-text .rb-h2 { margin-bottom: 14px; }
.rb-rfq-promo-text .rb-sub { margin-bottom: 26px; max-width: 52ch; }
.rb-rfq-promo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rb-rfq-promo-points li {
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.13);
  color: #b9b7b1; font-size: 14.5px; line-height: 1.5;
}
.rb-rfq-promo-points li:first-child { border-top: none; }
.rb-rfq-promo-points strong {
  display: block; color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 2px;
}

/* ---- Comparison table --------------------------------------------------- */
.rb-compare-wrap { margin-top: 36px; overflow-x: auto; }
.rb-compare {
  width: 100%; min-width: 640px; border-collapse: collapse; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.rb-compare thead th {
  font-size: 13px; font-weight: 600; padding: 16px 18px; color: var(--slate);
  border-bottom: 1px solid var(--line); background: var(--warm); white-space: nowrap;
}
.rb-compare thead th.is-us { color: var(--ink); background: var(--amber-soft); }
.rb-compare tbody th {
  font-size: 14px; font-weight: 600; color: var(--ink); padding: 15px 18px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.rb-compare tbody td {
  font-size: 14px; color: var(--slate); padding: 15px 18px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.rb-compare tbody td.is-us { color: var(--ink); font-weight: 500; background: rgba(248,184,88,.07); }
.rb-compare tbody tr:last-child th,
.rb-compare tbody tr:last-child td { border-bottom: none; }

/* ---- Final CTA ---------------------------------------------------------- */
.rb-final-cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px;
}
/* Lower-commitment escape hatch under the two primary buttons — quieter than a button
   so it never competes with them, but still an obvious next step. */
.rb-final-cta-alt {
  margin: 18px 0 0; font-size: 14.5px; color: #c2bcb1;
}
.rb-final-cta-alt a {
  color: var(--amber); text-decoration: underline; text-underline-offset: 3px;
}
.rb-final-cta-alt a:hover { color: #ffd08a; }
/* Verifiable trust facts sitting with the CTA (not logos/testimonials — those would
   breach seller anonymity or have to be invented). */
.rb-final-cta-trust {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.rb-final-cta-trust li {
  position: relative; padding-left: 20px;
  font-size: 13.5px; color: #b9b7b1; white-space: nowrap;
}
.rb-final-cta-trust li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--amber); font-size: 13px; font-weight: 700;
}
@media (max-width: 600px) {
  .rb-final-cta-trust { flex-direction: column; align-items: center; gap: 9px; }
  .rb-final-cta-trust li { white-space: normal; text-align: center; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .rb-browse-cols { grid-template-columns: 1fr 1fr; }
  .rb-rfq-promo { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .rb-browse-cols { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .rb-browse-col { padding: 20px 20px 16px; }
  .rb-rfq-promo-text .rb-sub { max-width: none; }
  .rb-final-cta-actions { flex-direction: column; }
  .rb-final-cta-actions .rb-pill-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   Remibee — colour & chrome optimisation.

   Pure #0a0a0a read as harsh, especially across the large dark bands. The
   brand is honey, so the dark is retuned to a WARM charcoal that carries a
   slight amber bias instead of a cold true black — softer to look at, and it
   makes the amber sit in the same family rather than fighting it. Retuning
   the tokens cascades to every button, badge and section site-wide.
   ========================================================================= */

/* =========================================================================
   THE PALETTE — three brand colours, plus neutrals derived from them.

   Built on the 60-30-10 discipline that every serious B2B interface follows:
     60%  --paper  #ffffff  page ground; the site is mostly white and breathes
     30%  --ink    #24211d  type, dark bands, secondary buttons
     10%  --amber  #ffbd59  the logo colour — CTAs and highlights ONLY

   --tan #e4d2b7 is deliberately NOT a fourth brand colour. Four competing
   colours is where B2B sites start looking amateur; tan instead serves as the
   warm SURFACE the other three sit on (feature bands, chips, soft fills), and
   every neutral below is mixed from it so the greys are never cold.

   Amber's scarcity is the point: it appears only where we want a click. The
   moment it is used for ordinary furniture it stops meaning "act here".

   CONTRAST NOTE — measured, not guessed:
     amber on white .............. 1.7:1  → never use amber for text on white
     ink on amber ................ 9.7:1  → the correct button pairing
     amber-deep on white ......... 4.8:1  → this is the token for amber-coloured TEXT
   ========================================================================= */
:root {
  /* Warm charcoal replaces near-black. Still strong, far less aggressive. */
  --ink: #24211d;
  --ink-hover: #3a352e;
  /* Large dark areas get a slightly lifted tone so they don't read as a void. */
  --ink-band: #2a2620;

  --paper: #ffffff;
  /* The warm surface. Full strength for feature moments (the product showcase
     band, chips); everything below is a tint of it. */
  --tan: #e4d2b7;
  /* ~30% tan on white: kept as the SUBTLE fill for pills, badges and status
     chips so those stay quiet. */
  --warm: #f7f2e9;
  /* The full-strength section band tone (matches the product video's ground) —
     used for the alternating warm sections and the top announce strip. Distinct
     from --warm so bumping the sections deep tan doesn't also darken every pill. */
  --band-warm: #e3cfaf;
  /* Hairlines, mixed from tan so borders belong to the same family. */
  --line: #ebe3d6;

  /* Type greys, warm-biased. Both meet WCAG AA on white (6.4:1 and 4.5:1). */
  --slate: #635d54;
  --mute: #7d766a;

  /* The logo amber, plus the two variants its contrast limits demand. */
  --amber: #ffbd59;
  --amber-deep: #93690f;   /* legible amber TEXT — amber itself is not */
  --amber-soft: #ffefd6;   /* soft fills / badges */

  --shadow-soft: 0 10px 24px rgba(36, 33, 29, 0.07);
}

/* Large dark bands: lifted warm tone rather than the button black. */
.rb-band-ink { background-color: var(--ink-band); }
.rb-sub-light { color: #c2bcb1; }
.rb-rfq-promo-points li { border-top-color: rgba(255, 255, 255, 0.12); color: #c2bcb1; }

/* ---- Top nav: real buttons with a clear active state -------------------- */
.rb-nav { gap: 6px; }
.rb-nav a {
  display: inline-flex; align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  color: var(--slate);
  font-weight: 500;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.rb-nav a:hover {
  background-color: var(--warm);
  border-color: var(--line);
  color: var(--ink);
}
.rb-nav a[aria-current="page"] {
  background-color: var(--amber-soft);
  border-color: #f3dcae;
  color: var(--amber-deep);
  font-weight: 600;
}

/* "List a product" becomes a secondary outlined button next to Sign up. */
.rb-action-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 18px;
  color: var(--ink);
  transition: background-color .14s ease, border-color .14s ease;
}
.rb-action-btn:hover { background-color: var(--warm); border-color: var(--mute); color: var(--ink); }

/* Announcement strip: warm tint so the page opens softly, not on a hard rule. */
.rb-announce { background-color: var(--warm); color: var(--slate); }

/* The video showcase is the ONE deep-tan (#e3cfaf) band — it has to be, so the clip's
   ground blends instead of showing a box. On that darker ground the warm-biased greys
   lose contrast (measured: --slate ~4.3:1, --mute ~3:1), so scope a darker pair INSIDE
   the showcase only — every paragraph and label then clears WCAG AA (~5.5:1 / ~4.6:1). */
.rb-showcase { --slate: #524d44; --mute: #5f594e; }
/* The amber eyebrow was tuned for white (~4.5:1); on #e3cfaf it falls to ~3.2:1.
   Deepen it to an ochre on the showcase only — still reads gold, now ~4.7:1 AA. */
.rb-showcase .rb-eyebrow { color: #745105; }

/* ---- Soften the heaviest solid-black elements --------------------------- */
/* The Verified Business badge was a solid black lozenge on every card. */
.remibee-verified-badge { background: var(--ink-band); }
/* Step numerals + eyebrows keep amber, but sit on warmer ground. */
.rb-band-warm .rb-step { background-color: var(--paper); border: 1px solid var(--line); }
/* Marquee cards pick up the warmer hairline. */
.rb-card { border-color: var(--line); }

/* Shadows: warm-tinted instead of neutral black. */
ul.products li.product:hover { box-shadow: 0 12px 28px rgba(36, 33, 29, .08); }
.rb-pill-btn:hover { box-shadow: 0 8px 20px rgba(36, 33, 29, .13); }

/* Focus ring keeps amber but on the warmer ink for contrast. */
a:focus-visible, button:focus-visible, .button:focus-visible, summary:focus-visible {
  outline-color: var(--amber-deep);
}

/* ---- Mobile: nav buttons in the drawer ---------------------------------- */
@media (max-width: 767px) {
  .rb-mobile-menu a { border-radius: 10px; }
  .rb-mobile-menu a[aria-current="page"] { background-color: var(--amber-soft); color: var(--amber-deep); }
}

/* =========================================================================
   Closing info + FAQ section: one shared frame.
   The intro text block was capped at 1000px while the FAQ was capped at
   820px, so their left/right edges never lined up — each element was
   centred, but the section as a whole read as unbalanced. Both now share a
   single 920px measure so every edge aligns; answers keep their own
   narrower reading width so long copy stays comfortable.
   ========================================================================= */
.rb-band-line .rb-h2,
.rb-band-line .rb-h3,
.rb-band-line .rb-two-cols,
.rb-band-line .rb-seo-lede,
.rb-band-line .rb-trust-chips,
.rb-band-line .rb-faq {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
/* Clear separation between the intro copy and the FAQ block. */
.rb-band-line .rb-h3 { margin-top: 56px; }
/* Answer copy: readable measure inside the wider row. */
.rb-faq-item p { max-width: 68ch; }

/* Centred headings break where the line happens to run out, which left the h2 as a short
   line stacked on a long one. `balance` asks the browser to even the line lengths, which
   is what makes a centred multi-line heading read as deliberate rather than accidental. */
.rb-band-line .rb-h2,
.rb-band-line .rb-h3 { text-wrap: balance; }

@media (min-width: 768px) {
  /* The two paragraphs are 363 and 241 characters, so equal-width columns left the right
     one ending well short of the left. CSS multi-column balances the height but does it
     by splitting a paragraph across the gutter, which reads worse than the raggedness.
     Sizing each column to its own copy instead evens the bottoms while keeping every
     paragraph whole and each idea in one place. */
  .rb-band-line .rb-text-cols {
    grid-template-columns: 1.28fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .rb-band-line .rb-text-cols > * { height: auto; }
}

@media (max-width: 767px) {
  .rb-band-line .rb-h3 { margin-top: 40px; }
}

/* =========================================================================
   Remibee — marketplace header: persistent search, Browse dropdown,
   single primary CTA, and an RFQ inbox shortcut for signed-in traders.
   ========================================================================= */

/* ---- Browse dropdown ---------------------------------------------------- */
.rb-nav-group { position: relative; display: inline-flex; }
.rb-caret {
  width: 0; height: 0; margin-left: 7px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor; opacity: .65;
  transition: transform .16s ease;
}
.rb-nav-group:hover .rb-caret,
.rb-nav-group:focus-within .rb-caret { transform: rotate(180deg); }

.rb-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 290px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(36, 33, 29, .12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
/* Bridge the gap so the pointer can travel from the trigger into the panel. */
.rb-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.rb-nav-group:hover .rb-dropdown,
.rb-nav-group:focus-within .rb-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.rb-dropdown a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
}
.rb-dropdown a strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.rb-dropdown a span { display: block; font-size: 12.5px; color: var(--slate); margin-top: 1px; }
.rb-dropdown a:hover { background: var(--warm); border-color: var(--line); }
.rb-dropdown a:hover strong { color: var(--amber-deep); }

/* ---- Header search ------------------------------------------------------ */
.rb-search-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.rb-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; flex: none;
  transition: background-color .14s ease, border-color .14s ease;
}
.rb-search-btn svg { width: 18px; height: 18px; display: block; }
.rb-search-btn:hover { background: var(--warm); border-color: var(--mute); }
.rb-search-checkbox:checked ~ .rb-search-row { display: block; }

.rb-search-row {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--warm);
  padding: 16px;
}
.rb-search-form {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px 5px 5px 18px;
}
.rb-search-form input[type="search"] {
  flex: 1; border: none; background: none; outline: none;
  font-size: 15px; font-family: inherit; color: var(--ink); min-width: 0;
  appearance: none; -webkit-appearance: none;
}
.rb-search-form input[type="search"]::-webkit-search-decoration,
.rb-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.rb-search-form button {
  border: none; cursor: pointer; flex: none;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 22px; border-radius: var(--radius-pill);
  transition: background-color .14s ease;
}
.rb-search-form button:hover { background: var(--ink-hover); }

/* ---- Actions: one primary CTA, everything else quiet -------------------- */
.rb-action-sell { color: var(--slate); }
.rb-action-sell:hover { color: var(--ink); }

.rb-requests-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.rb-requests-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--amber); color: var(--ink);
  font-size: 11.5px; font-weight: 700; line-height: 1;
}

/* ---- Mobile ------------------------------------------------------------- */
.rb-mobile-search { margin-bottom: 6px; }
.rb-mobile-search input[type="search"] {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 12px 18px; font-size: 15px; font-family: inherit; background: var(--paper);
  appearance: none; -webkit-appearance: none;
}
.rb-mobile-search input[type="search"]:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft);
}

@media (max-width: 991px) {
  /* Below the desktop bar the drawer carries search + nav, so hide the toggle. */
  .rb-search-btn { display: none; }
  .rb-search-row { display: none !important; }
}
@media (max-width: 1120px) {
  .rb-nav { gap: 2px; }
  .rb-nav a { padding: 8px 11px; font-size: 13.5px; }
  .rb-topbar-actions { gap: 6px; }
  .rb-action-link { padding: 0 8px; font-size: 13.5px; }
}

/* Anchored browse sections land clear of the viewport edge. */
.remibee-browse-axis { scroll-margin-top: 96px; }

/* ---- Request-a-quote page, logged out: pitch panel ----------------------- */
.remibee-rfq-pitch { max-width: 640px; margin: 0 auto; text-align: left; }
.remibee-rfq-pitch-lede { font-size: 16.5px; color: var(--ink-hover); line-height: 1.65; margin: 0 0 28px; }
.remibee-rfq-pitch-steps { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: rbstep; }
.remibee-rfq-pitch-steps li {
  position: relative; padding: 16px 0 16px 52px;
  border-top: 1px solid var(--line); counter-increment: rbstep;
  font-size: 14.5px; color: var(--slate); line-height: 1.55;
}
.remibee-rfq-pitch-steps li:first-child { border-top: none; }
.remibee-rfq-pitch-steps li::before {
  content: counter(rbstep);
  position: absolute; left: 0; top: 16px;
  width: 32px; height: 36px; display: grid; place-items: center;
  background: var(--amber); color: var(--ink); font-weight: 700; font-size: 15px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.remibee-rfq-pitch-steps strong { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
.remibee-rfq-pitch-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
@media (max-width: 600px) {
  .remibee-rfq-pitch-cta { flex-direction: column; align-items: stretch; text-align: center; }
}
.entry-content a.remibee-rfq-submit, .remibee-rfq-pitch-cta a.remibee-rfq-submit, a.remibee-rfq-submit { text-decoration: none !important; }

/* =========================================================================
   Focus chrome, universal pass. Earlier resets listed elements one by one,
   and every module added since (header search, dropdown, star picker, deal
   buttons, Dokan/Woo form fields) fell outside the list — so clicks still
   produced the browser's blue ring in places. Rules now:
     - mouse/touch click  → no ring, anywhere;
     - keyboard focus     → amber ring (accessibility preserved);
     - text fields        → our amber border+glow instead of the default;
     - native checks/radios/progress → amber accent, not browser blue.
   ========================================================================= */

/* Mouse click: kill the default ring on every element. */
*:focus:not(:focus-visible) { outline: none !important; }

/* Keyboard: one consistent amber ring everywhere. */
:focus-visible {
  outline: 2px solid var(--amber-deep) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Text-entry fields match :focus-visible even on click (by spec), so give them
   the brand treatment instead of a ring: amber border + soft glow. */
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px var(--amber-soft) !important;
}

/* Native control fill colour (checkboxes, radios, range, progress): the default
   is blue; brand it. Covers "Remember me", the customer/vendor radios, etc. */
:root { accent-color: var(--amber-deep); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--amber-deep); }

/* Checks/radios don't need the glow treatment — keyboard ring only. */
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) { box-shadow: none !important; }

/* MOQ field: quantity + unit sit on one row in the vendor product form. */
.remibee-moq-row { display: flex; gap: 10px; align-items: center; }
.remibee-moq-row input[type="number"] { flex: 1; min-width: 0; }
.remibee-moq-row select { flex: 0 0 130px; }
.remibee-min-order-hint {
  font-size: 12.5px; color: var(--amber-deep); background: var(--amber-soft);
  border-radius: 8px; padding: 10px 14px; margin: 4px 0 14px; max-width: 70ch;
}

/* =========================================================================
   Category tags on listing cards.
   Each category carries its own tint so families are scannable at a glance.
   The palette is deliberately muted and warm-leaning: sixteen saturated
   colours would fight the amber brand and read as confetti, so these are
   low-chroma tints that sit quietly beside it.
   ========================================================================= */
.rb-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rb-badge-cat { font-weight: 600; }

.rb-cat-amber { background-color: #fdecc8; color: #8a6210; }
.rb-cat-sage  { background-color: #e6efe4; color: #47653f; }
.rb-cat-teal  { background-color: #dcecec; color: #2c6565; }
.rb-cat-slate { background-color: #e4e9ef; color: #435367; }
.rb-cat-plum  { background-color: #eee4ec; color: #67405f; }
.rb-cat-clay  { background-color: #f7e6dd; color: #834d33; }
.rb-cat-olive { background-color: #edeedd; color: #595f30; }
.rb-cat-rose  { background-color: #f7e4e6; color: #83414b; }

@media (max-width: 480px) {
  .rb-card-tags { gap: 5px; }
  .rb-badge-cat { font-size: 10.5px; padding: 2px 8px; }
}

/* =========================================================================
   Standard cover images must never be cropped.
   The pack shots are landscape (2000x1414) while product slots are square,
   so letterbox them: fit the whole image inside the slot on white, rather
   than filling the slot and slicing the sides off.
   ========================================================================= */
ul.products li.product img.remibee-std-img,
.products li.product img.remibee-std-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  object-position: center;
  background: var(--paper);
  padding: 6px;
  box-sizing: border-box;
}
/* Single product gallery: same rule, a little more room to breathe. */
.woocommerce-product-gallery .remibee-std-gallery img.remibee-std-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--paper);
  padding: 10px;
  box-sizing: border-box;
}

/* Price unit + minimum order on listing cards. */
.remibee-price-unit { color: var(--slate); font-weight: 500; font-size: 0.85em; }
.remibee-price-moq {
  display: block; font-size: 12px; color: var(--mute); font-weight: 500;
  margin-top: 2px; letter-spacing: 0.01em;
}

/* =========================================================================
   Content-page components: lede, Knowledge Center TOC — used by the About /
   Knowledge Center / Contact copy authored in the page editor.
   ========================================================================= */
.entry-content .rb-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 28px;
}
.rb-kc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.rb-kc-toc a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 999px);
  background: var(--paper);
  color: var(--slate);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.rb-kc-toc a:hover { border-color: var(--amber-deep); color: var(--amber-deep); }
/* Anchored headings land clear of the sticky header. */
.entry-content h2[id] { scroll-margin-top: 96px; }

/* =========================================================================
   404 — search + three ways forward
   ========================================================================= */
.rb-404 { max-width: 720px; margin: 0 auto; padding: 48px 0 72px; text-align: center; }
.rb-404-title { font-size: clamp(30px, 4.5vw, 42px); letter-spacing: -0.03em; margin: 8px 0 12px; text-wrap: balance; }
.rb-404-sub { color: var(--slate); max-width: 52ch; margin: 0 auto 28px; line-height: 1.65; }
.rb-404-search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 36px; }
.rb-404-search input[type='search'] {
  flex: 1;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
}
.rb-404-search button {
  min-height: 48px;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}
.rb-404-search button:hover { background: var(--ink-hover); }
.rb-404-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.rb-404-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.rb-404-card:hover { border-color: var(--amber-deep); transform: translateY(-2px); }
.rb-404-card strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.rb-404-card span { color: var(--slate); font-size: 13px; line-height: 1.5; }
@media (max-width: 767px) {
  .rb-404-links { grid-template-columns: 1fr; }
  .rb-404-search { flex-direction: column; }
}

/* =========================================================================
   Shop / search empty state — an unmet search is an RFQ lead, not a dead end
   ========================================================================= */
.rb-no-results {
  grid-column: 1 / -1;
  width: 100%;
  padding: 56px 28px;
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.rb-no-results-title { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.02em; text-wrap: balance; }
.rb-no-results-sub { max-width: 54ch; margin: 0 auto 22px; color: var(--slate); line-height: 1.65; }
.rb-no-results-actions { margin: 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.rb-no-results-alt { color: var(--slate); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.rb-no-results-alt:hover { color: var(--ink); }

/* =========================================================================
   Search suggestions dropdown (remibee-core/assets/remibee-suggest.js)
   ========================================================================= */
.rb-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(36, 33, 29, .06), 0 16px 40px rgba(36, 33, 29, .12);
  max-height: 380px;
  overflow-y: auto;
  text-align: left;
}
.rb-suggest-head {
  padding: 8px 12px 4px;
  color: var(--mute);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rb-suggest-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.rb-suggest-item.is-active,
.rb-suggest-item:hover { background: var(--warm); }
.rb-suggest-label { color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.rb-suggest-meta { color: var(--mute); font-size: 12px; white-space: nowrap; flex: none; }
/* The RFQ fallback row reads as an action, not a result. */
.rb-suggest-item.is-rfq { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 12px; }
.rb-suggest-item.is-rfq .rb-suggest-label { color: var(--amber-deep); font-weight: 600; }
.rb-suggest-item.is-recent .rb-suggest-label { color: var(--slate); font-weight: 400; }


/* =========================================================================
   Homepage SEO/trust band — replaces the old wall-of-text with a tight lede
   plus scannable trust chips (the pattern every major B2B marketplace uses
   for its closing value block: terse, verifiable, easy to skim).
   ========================================================================= */
.rb-seo-lede {
  max-width: 64ch;
  margin: 0 0 22px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.7;
}
.rb-trust-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rb-trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.rb-trust-chips li::before {
  content: "✓";
  flex: none;
  color: var(--amber-deep);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================================
   Pinned product showcase — the pack shots narrate the trading story while
   the text column scrolls past. Deliberately subtle: small rotation, slow
   cross-fades, nothing crosses the screen.

   The photos are shot on white; mix-blend-mode:multiply melts that white
   into the warm band so the products float free without any image editing.
   ========================================================================= */
/* The product video carries a baked-in warm background (a gradient: roughly #dac6a8 in
   the corners to #efe0c8 low-centre). Rather than fight it, the whole band adopts the
   video's average tone and the video's edges are feathered — so the clip melts into the
   section instead of sitting in a visible box. Tweak this one value to re-match if the
   video is ever re-rendered with a different backdrop. */
/* The product video carries a baked-in warm background (a gradient: roughly #dac6a8 in
   the corners to #efe0c8 low-centre). Rather than fight it, the whole band adopts the
   video's average tone and the video's edges are feathered — so the clip melts into the
   section instead of sitting in a visible box. Tweak this one value to re-match if the
   video is ever re-rendered with a different backdrop. */
/* The clip is colour-graded so its backdrop lands on the same warm cream as --warm, and
   the band uses that colour too — so the video has no visible boundary.
   Cream rather than white on purpose: the bottle is white, and against a white ground it
   vanished. The cream keeps the product readable while still matching the page.
   Re-grade the clip and change this together if one ever moves. */
.rb-showcase { --showcase-bg: var(--band-warm); position: relative; }

.rb-showcase.rb-band-warm { background-color: var(--showcase-bg); }

.rb-showcase-grid {
  display: grid;
  /* Video column gets the larger share so the product reads big. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr);
  gap: 40px;
  align-items: start;
  max-width: 1460px;
  margin: 24px auto 0;
}

/* Text column: each step owns a viewport-ish slice so the pin has room to tell
   the story; inactive steps recede rather than disappear. */
.rb-showcase-step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  opacity: .28;
  transition: opacity .45s ease;
}
.rb-showcase-step.is-active { opacity: 1; }
.rb-showcase-step .rb-step-num { font-size: 13px; letter-spacing: .08em; }
.rb-showcase-step h3 { margin: 0; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; color: var(--ink); }
.rb-showcase-step p { margin: 0; max-width: 44ch; color: var(--slate); font-size: 15.5px; line-height: 1.65; }
/* Visual column: pinned while its grid track scrolls. */
.rb-showcase-visual {
  position: sticky;
  top: 96px;
  height: calc(100vh - 160px);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .rb-showcase-step { transition: none; opacity: 1; }
}

/* The scroll-scrubbed product video. Blend is switched OFF for the video wrapper —
   multiply was a trick for melting white photo grounds into the band; a real video
   carries its own baked background, so it presents as a clean rounded card instead. */
.rb-showcase-visual.rb-has-video { mix-blend-mode: normal; }
/* The clip's baked-in backdrop is a gradient, so it can never flat-match the band.
   Instead of masking the video (mask-image on a <video> is unreliable across
   engines), a scrim pseudo-element paints the band colour OVER the clip's edges,
   fading to transparent at the centre. Same visual result, but it's just a normal
   painted gradient — it composites identically everywhere. */
.rb-showcase-videowrap {
  position: relative;
  width: min(1120px, 100%);
  line-height: 0; /* kill the inline-descender gap under the video */
}
/* Edges are MASKED, not painted over.
   The previous approach layered the band colour on top of the clip to hide its border.
   That works on the border, but any overlay reaching inward also veils the product —
   which is what made the bottle look soft. A mask instead makes the outer band
   progressively TRANSPARENT, so the section shows through and the picture underneath is
   never tinted. Effectively a soft crop: the rectangle's edge simply stops existing.
   Two gradients combined with `intersect` fade all four sides; the centre stays at full
   opacity, so the product is pixel-for-pixel untouched. */
.rb-showcase-video {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-composite: intersect;
}

/* Mobile: no pinned column to scrub in — the video sits above the steps and loops,
   and the steps stack as plain readable blocks. */
@media (max-width: 899px) {
  .rb-showcase-grid { grid-template-columns: 1fr; gap: 8px; }
  .rb-showcase-visual {
    position: sticky;
    top: 72px;
    height: auto;
    min-height: 0;
    order: -1;
    padding: 4px 0 12px;
  }
  .rb-showcase-video { width: 100%; }
  .rb-showcase-step {
    min-height: 0;
    padding: 22px 0;
    opacity: 1;
  }
}

/* Storefront puts overflow-x:hidden on the .site wrapper (and body) to clip
   full-bleed sections. `hidden` turns the wrapper into a scroll container, which
   silently breaks EVERY position:sticky inside it (the showcase pin, the dashboard
   sidebar…): the element pins to a box that never scrolls, i.e. never pins.
   `clip` clips identically but creates no scroll container, so sticky works. */
.site,
body.home .hfeed {
  overflow: clip !important;
}