/* ============================================================
   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 — brand purple (was navy; unified to brand palette) ----- */
.hero--wholesale {
  background-image:
    linear-gradient(135deg, #4a0072 0%, #6a0099 42%, #9c27b0 100%),
    var(--hero-img, url('../../photos/hero-main.webp'));
  background-color: #4a0072;
  background-size: cover;
  background-position: center;
}

/* When a hero photo is set via --hero-img, blend it with the brand purple */
.hero--wholesale[style*="--hero-img"],
.hero.hero--wholesale[style*="--hero-img"] {
  background-image:
    linear-gradient(135deg, rgba(74, 0, 114, 0.62) 0%, rgba(106, 0, 153, 0.52) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
}

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

/* ----- Wholesale chip row accent (re-uses .pickle-chip-row from pickles.css) ----- */
.hero--wholesale ~ * .pickle-chip {
  border-color: rgba(74, 0, 114, 0.18);
  color: #4a0072;
}

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

/* ----- Why-card emoji background pill ----- */
.hero--wholesale ~ * .why-card .why-emoji {
  background: rgba(74, 0, 114, 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[style*="--hero-img"],
  .hero.hero--wholesale[style*="--hero-img"] {
    background-image:
      linear-gradient(135deg, rgba(13, 27, 75, 0.68) 0%, rgba(26, 46, 122, 0.58) 100%),
      var(--hero-img, url('../../photos/hero-main.webp'));
  }
}

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