/* ============================================================
   PAGE: wholesale.css — vertical-specific accent rules for
   Wholesale / Bulk Export Courier pages.

   Stack: fonts → slp-critical → slp-deferred → pickles.css → THIS file
   pickles.css owns ALL layout, grid, FAQ, TOC, hero-content, trust-strip,
   carrier-band, testimonial, and mobile breakpoints — do NOT redefine them here.

   This sheet only adds the wholesale hero gradient + a handful of
   B2B-specific UI accents.
   ============================================================ */

/* ----- Hero tint — deep navy/indigo export feel ----- */
.hero--wholesale {
  background-image:
    linear-gradient(135deg, #0d1b4b 0%, #1a2e7a 42%, #2a47b8 100%),
    var(--hero-img, url('../../photos/hero-main.webp'));
  background-color: #0d1b4b;
  background-size: cover;
  background-position: center;
}

/* When a hero photo is set via --hero-img, blend it with the gradient */
.hero--wholesale[style*="--hero-img"] {
  background-image:
    linear-gradient(rgba(13, 27, 75, 0.80), rgba(26, 46, 122, 0.74)),
    var(--hero-img);
}

/* ----- B2B trust strip accent — darker border for wholesale pages ----- */
.hero--wholesale ~ .trust-strip {
  border-top: 3px solid #1a2e7a;
}

/* ----- Wholesale chip row accent (re-uses .pickle-chip-row from pickles.css) ----- */
.hero--wholesale ~ * .pickle-chip {
  border-color: rgba(26, 46, 122, 0.18);
  color: #1a2e7a;
}

/* ----- Segment card left-border accent override ----- */
.hero--wholesale ~ * .segment-card {
  border-left-color: #1a2e7a;
}

/* ----- Why-card emoji background pill ----- */
.hero--wholesale ~ * .why-card .why-emoji {
  background: rgba(26, 46, 122, 0.07);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ----- Mobile fallback: ensure hero text readable on small viewports ----- */
@media (max-width: 600px) {
  .hero--wholesale {
    background-image:
      linear-gradient(rgba(13, 27, 75, 0.88), rgba(26, 46, 122, 0.85)),
      var(--hero-img, url('../../photos/hero-main.webp'));
  }
}

.b2b-pricing-copy {
  max-width: 720px;
  margin: 0 auto 1.5rem;
}