/* ============================================================
   bs-policies-page.css
   Scoped to /policies/ and all /policies/* sub-pages
   Enqueued via bs-page-nav-assets.php
   ============================================================ */

/* ── Root variables (policies section) ── */
:root {
  --bs-black:       #111111;
  --bs-amber:       #b0743e;
  --bs-amber-pale:  #f5ede4;
  --bs-white:       #ffffff;
  --bs-gray-100:    #f2eeea;
  --bs-gray-300:    #d0c8c0;
  --bs-gray-500:    #8a7f76;
  --bs-gray-700:    #3d3530;
}

/* ────────────────────────────────────────────────────────────
   HERO SECTION
   ──────────────────────────────────────────────────────────── */

/* Radial amber glow overlay */
.bs-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(176,116,62,0.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.bs-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* Hero eyebrow text */
.bs-hero-eyebrow {
  font-size: 0.625rem !important;   /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
}

/* Amber highlight <span> inside H1 — wrap target words in:
   <span class="bs-hero-highlight">Network Rules</span> */
.bs-hero-highlight { color: #b0743e !important; }

/* H1 fluid font size — Elementor's size field does not accept clamp().
   Set 40px in Elementor as a visual reference; CSS overrides on the live page. */
.bs-hero .elementor-heading-title {
  font-size: clamp(28px, 4vw, 46px) !important;
}

/* Seller member + third-party policies pages — longer titles need
   a smaller cap to fit on one line at desktop. No white-space: nowrap
   so mobile can wrap naturally.                                    */
.page-id-26575 .bs-hero .elementor-heading-title,
.page-id-26618 .bs-hero .elementor-heading-title {
  font-size: clamp(24px, 3.2vw, 36px) !important;
}

/* Mobile — restore natural wrapping, bump size back up for readability */
@media (max-width: 768px) {
  .page-id-26575 .bs-hero .elementor-heading-title,
  .page-id-26618 .bs-hero .elementor-heading-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    white-space: normal !important;
  }
}


/* Hero subtitle */
.bs-hero-sub {
  color: rgba(255,255,255,0.55) !important;
  max-width: 480px !important;
  line-height: 1.6 !important;
}

/* Breadcrumb (sub-pages only) */
.bs-hero-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.625rem !important;  /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.bs-hero-breadcrumb:hover {
  color: #b0743e !important;
}

.bs-hero-breadcrumb a,
.bs-hero-breadcrumb a strong {
  color: rgba(255,255,255,0.4) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.bs-hero-breadcrumb a:hover,
.bs-hero-breadcrumb a:hover strong {
  color: #b0743e !important;
}

/* ── Ajax Search Pro search bar ───────────────────────────────
   Assign bs-hero-search to the Elementor shortcode widget.
   ASP structure: asp_w_container > probox (flex row) > prosettings
                  + proinput > form > input.orig
                  + promagnifier (button)
   The pill shell is on asp_w_container. The probox margin is
   zeroed out so it fills the pill without double-spacing.
   The promagnifier is pulled out of flow and positioned
   absolutely inside the pill, right 6px, vertically centered.
   ──────────────────────────────────────────────────────────── */

/* Outer centering wrapper */
.bs-hero-search .asp_w_container {
  max-width: 560px !important;
  margin: 0 auto !important;
  position: relative !important;   /* establishes stacking context */
}

/* The pill shell — background, border, radius live here */
.bs-hero-search .probox {
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 50px !important;
  transition: border-color 0.2s !important;
  margin: 0 !important;            /* remove ASP's default 8px margin */
  height: auto !important;
  align-items: center !important;
}

/* Amber border on focus */
.bs-hero-search .probox:focus-within {
  border-color: #b0743e !important;
}

/* proinput grows to fill the pill; right padding leaves room for button */
.bs-hero-search .proinput {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 52px 0 20px !important;
  height: auto !important;
}

/* The actual text input */
.bs-hero-search .proinput input.orig {
  width: 100% !important;
  padding: 14px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;  /* 13px */
  height: auto !important;
  margin: 0 !important;
}

.bs-hero-search .proinput input.orig::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

/* promagnifier — amber pill button, absolute right 6px, centered */
.bs-hero-search .promagnifier {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #b0743e !important;
  border: none !important;
  border-radius: 50px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin: 0 !important;
}

.bs-hero-search .promagnifier:hover {
  background: #d4956a !important;
}

/* Search icon SVG — 14px, white */
.bs-hero-search .promagnifier .innericon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
}

.bs-hero-search .promagnifier .innericon svg {
  width: 14px !important;
  height: 14px !important;
}

.bs-hero-search .promagnifier .innericon svg path,
.bs-hero-search .promagnifier .innericon svg polygon {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Clear (×) button */
.bs-hero-search .asp_clear {
  color: rgba(255,255,255,0.4) !important;
}

/* Hide prosettings icon (search type switcher — not needed here) */
.bs-hero-search .prosettings {
  display: none !important;
}

/* Results dropdown */
.bs-hero-search .asp_r {
  border-radius: 12px !important;
  margin-top: 6px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────
   SHARED: SECTION LABEL
   ──────────────────────────────────────────────────────────── */

.bs-section-label {
  font-size: 0.625rem !important;  /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
}

/* ────────────────────────────────────────────────────────────
   AUDIENCE CARDS (landing page)
   ──────────────────────────────────────────────────────────── */

.bs-audience-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.bs-audience-card {
  background: #ffffff !important;
  border: 1.5px solid #d0c8c0 !important;
  border-radius: 12px !important;
  padding: 24px 22px !important;       /* tighter than 32px 28px */
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;                 /* reduced from 16px */
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Bottom amber bar sweep on hover */
.bs-audience-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #b0743e !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.25s ease !important;
}

.bs-audience-card:hover {
  border-color: #b0743e !important;
  box-shadow: 0 8px 32px rgba(176,116,62,0.12) !important;
  transform: translateY(-3px) !important;
}

.bs-audience-card:hover::after {
  transform: scaleX(1) !important;
}

/* Card icon container */
.bs-audience-card-icon {
  width: 44px !important;
  height: 44px !important;
  background: #f5ede4 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Force the Elementor icon wrapper and icon element to also center */
.bs-audience-card-icon .elementor-widget-container,
.bs-audience-card-icon .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.bs-audience-card-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Card audience label */
.bs-audience-card-label {
  font-size: 0.625rem !important;  /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
}

/* Card title */
.bs-audience-card-title {
  font-size: 1.125rem !important;  /* 18px */
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.2 !important;
}

/* Card description */
.bs-audience-card-desc {
  font-size: 0.75rem !important;  /* 12px */
  color: #8a7f76 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
}

/* Card policies list */
.bs-audience-card-policies {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;                   /* gap handled by p margins below */
  border-top: 1px solid #f2eeea !important;
  padding-top: 12px !important;
  margin-top: 6px !important;
}

/* Policy list items — Elementor text editor renders <p><span>text</span></p>
   Target p only (not span) so the ::before dot fires exactly once per item */
.bs-audience-card-policies .elementor-widget-container p,
.bs-audience-card-policy-item,
.bs-audience-card-policies li {
  font-size: 0.6875rem !important;  /* 11px */
  color: #3d3530 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.4 !important;
  list-style: none !important;
}

.bs-audience-card-policies .elementor-widget-container p:last-child,
.bs-audience-card-policies li:last-child {
  margin-bottom: 0 !important;
}

/* Span inside p — inline, no extra dot */
.bs-audience-card-policies .elementor-widget-container p span {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* Amber dot — one per p only, NOT on span */
.bs-audience-card-policies .elementor-widget-container p::before,
.bs-audience-card-policy-item::before,
.bs-audience-card-policies li::before {
  content: '' !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  border-radius: 50% !important;
  background: #b0743e !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Card CTA row — margin-top: auto pushes it to the bottom of the card */
.bs-audience-card-cta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

.bs-audience-card-cta svg {
  transition: transform 0.2s !important;
}

.bs-audience-card:hover .bs-audience-card-cta svg {
  transform: translateX(4px) !important;
}

/* ────────────────────────────────────────────────────────────
   LEGAL DOCUMENTS SECTION (landing page)
   ──────────────────────────────────────────────────────────── */

.bs-legal-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.bs-legal-card {
  background: #111111 !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: row !important;      /* row: text block left, arrow right */
  align-items: stretch !important;     /* stretch so text block fills full height */
  justify-content: space-between !important;
  gap: 16px !important;
  transition: background 0.2s !important;
}

/* Text content group — wraps eyebrow + title + desc in a left-aligned column */
.bs-legal-card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Force each text widget inside the card to full width and left-align */
.bs-legal-card > .elementor-element:not(.bs-legal-card-arrow) {
  width: 100% !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.bs-legal-card:hover {
  background: #3d3530 !important;
}

/* Triple-class override — Elementor's frontend CSS uses multi-class selectors
   like .e-con.e-flex with !important. Adding .e-con as a third class gives us
   higher specificity and wins regardless of load order.                    */
.elementor-element-7059816.bs-legal-card.e-con,
.elementor-element-cbb68a1.bs-legal-card.e-con {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 24px !important;
}

/* Force each non-arrow child to left-align — text block on the left */
.elementor-element-7059816.bs-legal-card.e-con > .elementor-element:not(.bs-legal-card-arrow),
.elementor-element-cbb68a1.bs-legal-card.e-con > .elementor-element:not(.bs-legal-card-arrow) {
  text-align: left !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: calc(100% - 60px) !important;
}

.bs-legal-card-eyebrow {
  font-size: 0.625rem !important;  /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.bs-legal-card-title {
  font-size: 1rem !important;  /* 16px */
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.bs-legal-card-desc {
  font-size: 0.6875rem !important;  /* 11px */
  color: rgba(255,255,255,0.45) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.bs-legal-card-arrow {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
  align-self: center !important;
}

/* Force Elementor's inner wrappers to also center the icon */
.bs-legal-card-arrow .elementor-widget-container,
.bs-legal-card-arrow .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.bs-legal-card-arrow .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.bs-legal-card:hover .bs-legal-card-arrow {
  background: rgba(255,255,255,0.15) !important;
}

/* ────────────────────────────────────────────────────────────
   SIBLING NAVIGATION (sub-pages only)
   ──────────────────────────────────────────────────────────── */

.bs-sibling-nav {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.bs-sibling-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1.5px solid #d0c8c0 !important;
  color: #8a7f76 !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Suppress any SVG the Elementor icon widget injects into the nav pill —
   the arrow character in the HTML markup handles the back arrow visually */
.bs-sibling-link svg {
  display: none !important;
}

.bs-sibling-link:hover {
  border-color: #b0743e !important;
  color: #b0743e !important;
}

.bs-sibling-link.active,
.bs-sibling-link active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────
   POLICY CARDS (sub-pages)
   ──────────────────────────────────────────────────────────── */

.bs-policy-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.bs-policy-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #d0c8c0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Left amber border sweep on hover */
.bs-policy-card::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #b0743e !important;
  transform: scaleY(0) !important;
  transform-origin: top !important;
  transition: transform 0.25s ease !important;
}

.bs-policy-card:hover {
  border-color: #b0743e !important;
  box-shadow: 0 6px 24px rgba(176,116,62,0.10) !important;
  transform: translateY(-2px) !important;
}

.bs-policy-card:hover::after {
  transform: scaleY(1) !important;
}

/* Policy card icon container */
.bs-policy-card-icon {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  background: #f5ede4 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* Icon image inside the container */
.bs-policy-card-icon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

/* Elementor icon widget inner wrappers — ensure centering */
.bs-policy-card-icon .elementor-widget-container,
.bs-policy-card-icon .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.bs-policy-card-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* The Elementor col wrapper containing the icon — center it vertically,
   zero out Elementor's default 10px column padding */
.bs-policy-card > .e-con:first-child {
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Policy card text body */
.bs-policy-card-body {
  flex: 1 !important;
}

/* The Elementor col wrapper containing the body text — must grow to push arrow right */
.bs-policy-card > .e-con:nth-child(2) {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.bs-policy-card-title {
  font-size: 0.8125rem !important;  /* 13px */
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 5px !important;
  line-height: 1.3 !important;
}

.bs-policy-card-desc {
  font-size: 0.6875rem !important;  /* 11px */
  color: #8a7f76 !important;
  line-height: 1.55 !important;
}

/* Policy card arrow circle */
.bs-policy-card-arrow {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border: 1.5px solid #d0c8c0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: background 0.2s, border-color 0.2s !important;
}

/* Constrain the Elementor col wrapping the arrow — zero padding, fixed width */
.bs-policy-card > .e-con:last-child {
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
}

/* Elementor icon inner wrappers on the arrow widget */
.bs-policy-card-arrow .elementor-widget-container,
.bs-policy-card-arrow .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.bs-policy-card-arrow .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Arrow icon size */
.bs-policy-card-arrow .elementor-icon i,
.bs-policy-card-arrow .elementor-icon svg {
  font-size: 11px !important;
  width: 11px !important;
  color: #8a7f76 !important;
  transition: color 0.2s !important;
}

.bs-policy-card:hover .bs-policy-card-arrow {
  background: #b0743e !important;
  border-color: #b0743e !important;
}

/* Arrow icon flips to white on hover */
.bs-policy-card:hover .bs-policy-card-arrow .elementor-icon i,
.bs-policy-card:hover .bs-policy-card-arrow .elementor-icon svg {
  color: #ffffff !important;
}

/* Arrow svg stroke flips to white on hover */
.bs-policy-card:hover .bs-policy-card-arrow svg path,
.bs-policy-card:hover .bs-policy-card-arrow svg polyline {
  stroke: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────
   SECTION DIVIDER
   ──────────────────────────────────────────────────────────── */

.bs-divider {
  border: none !important;
  border-top: 1px solid #d0c8c0 !important;
}

/* Assign bs-help-section to the top-level section container wrapping
   the help banner on each sub-page. The border-top is on the e-con-inner
   so it matches the 1100px content width rather than going full-bleed.  */
.bs-help-section {
  padding-top: 0 !important;
}

.bs-help-section > .e-con-inner {
  border-top: 1px solid #d0c8c0 !important;
  padding-top: 40px !important;
}

/* ────────────────────────────────────────────────────────────
   HELP BANNER (all pages)
   ──────────────────────────────────────────────────────────── */

.bs-help-banner {
  background: #f5ede4 !important;
  border: 1.5px solid #d0c8c0 !important;
  border-radius: 12px !important;
  padding: 28px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.bs-help-banner-title {
  font-size: 0.875rem !important;  /* 14px */
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 4px !important;
}

.bs-help-banner-desc {
  font-size: 0.75rem !important;  /* 12px */
  color: #8a7f76 !important;
  line-height: 1.5 !important;
}

.bs-help-banner-desc a {
  color: #b0743e !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.bs-help-banner-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 22px !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
}

.bs-help-banner-cta:hover {
  background: #b0743e !important;
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */

/* Tablet — 960px */
@media (max-width: 960px) {
  .bs-audience-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  .bs-hero .elementor-heading-title {
    font-size: 1.75rem !important; /* 28px */
  }
  .bs-audience-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bs-legal-grid {
    grid-template-columns: 1fr !important;
  }
  .bs-policy-grid {
    grid-template-columns: 1fr !important;
  }
  .bs-help-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Sibling nav — horizontal scroll strip, no wrapping.
     Pills stay compact in a single scrollable row.        */
  .bs-sibling-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    /* Bleed to edge of container for natural scroll feel  */
    padding-bottom: 4px !important;
    /* Hide scrollbar — still scrollable via touch/drag    */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .bs-sibling-nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Policy cards — keep the row layout at mobile (icon left, text, arrow right).
     The grid already switches to 1-col; the card itself stays flex-row.          */
  .bs-policy-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  /* Keep body column growing to push arrow right */
  .bs-policy-card > .e-con:nth-child(2) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .bs-help-banner {
    padding: 22px 20px !important;
  }
  .bs-sibling-nav {
    gap: 6px !important;
  }
  .bs-sibling-link {
    font-size: 0.625rem !important;  /* 10px */
    padding: 8px 14px !important;
  }
}

/* ── Divider container — narrow above/below gap ───────────── */
/* Targets the Elementor container wrapping the divider line */
.elementor-element-04c713f {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED POLICY DOCUMENT BLOCK
   Dark banner linking to the full governing legal document.
   Sits between the .bs-section-label and the policy card grid.
   Assign .bs-featured-policy to the Elementor container.
   ═══════════════════════════════════════════════════════════════ */

/* Outer container — dark card, full width of the content column */
.bs-featured-policy.e-con {
  background: #111111 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  /* e-con-full has no .e-con-inner — padding goes directly on the container */
  padding: 22px 28px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  transition: background 0.2s ease !important;
  cursor: pointer !important;
}
.bs-featured-policy.e-con:hover {
  background: #1c1c1c !important;
}

/* Icon column — first child, fixed 44×44px bronze circle */
/* Also supports explicit .bs-featured-policy-icon class if assigned */
.bs-featured-policy.e-con > .e-con:first-child,
.bs-featured-policy-icon.e-con {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  background: rgba(176,116,62,0.15) !important;
  border: 1px solid rgba(176,116,62,0.35) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
/* Icon widget inside icon col */
.bs-featured-policy.e-con > .e-con:first-child .elementor-icon,
.bs-featured-policy.e-con > .e-con:first-child .elementor-icon svg,
.bs-featured-policy.e-con > .e-con:first-child .elementor-icon i,
.bs-featured-policy-icon .elementor-icon,
.bs-featured-policy-icon .elementor-icon svg,
.bs-featured-policy-icon .elementor-icon i {
  color: #b0743e !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* Body column — second child, grows to fill remaining space */
.bs-featured-policy-body.e-con,
.bs-featured-policy.e-con > .e-con:nth-child(2) {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 4px !important;
}

/* Eyebrow label inside body — "Full legal document" */
.bs-featured-policy-body .bs-featured-policy-eyebrow,
.bs-featured-policy-body .bs-featured-policy-eyebrow * {
  font-size: 0.625rem !important;   /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin: 0 0 4px !important;
}

/* Document title */
.bs-featured-policy-body .bs-featured-policy-title,
.bs-featured-policy-body .bs-featured-policy-title * {
  font-size: 0.875rem !important;   /* 14px */
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}

/* Description */
.bs-featured-policy-body .bs-featured-policy-desc,
.bs-featured-policy-body .bs-featured-policy-desc * {
  font-size: 0.75rem !important;    /* 12px */
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* CTA column — last child, shrinks to content width */
.bs-featured-policy-cta.e-con,
.bs-featured-policy.e-con > .e-con:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
}

/* "Read policy" text */
.bs-featured-policy-cta .bs-featured-policy-cta-label,
.bs-featured-policy-cta .bs-featured-policy-cta-label * {
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Arrow circle button */
.bs-featured-policy-arrow {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(176,116,62,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.bs-featured-policy-arrow .elementor-icon,
.bs-featured-policy-arrow .elementor-icon svg,
.bs-featured-policy-arrow .elementor-icon i {
  color: #b0743e !important;
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
}

/* Divider between featured block and "Individual policies" label.
   The class lands on the Elementor widget container — suppress the
   container border-top so only Elementor's own divider line shows.  */
.bs-policy-section-divider {
  border: none !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}

/* "Individual policies" sub-label that sits above the card grid.
   Match the 20px gap that "Buyer policies" has above the featured block. */
.bs-individual-policies-label,
.bs-individual-policies-label * {
  font-size: 0.625rem !important;   /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin: 0 !important;
}
/* Zero out the Elementor container's own margin-bottom so spacing
   comes only from the label widget margin above                    */
.elementor-element-275d99b {
  margin-bottom: 0 !important;
  padding-bottom: 20px !important;
}

/* ── Responsive — stack on mobile ──────────────────────────── */
@media (max-width: 640px) {
  .bs-featured-policy.e-con {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 20px 20px !important;
  }
  .bs-featured-policy-cta.e-con,
  .bs-featured-policy.e-con > .e-con:last-child {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POLICY DOCUMENT PAGES — hero/header styling
   Uses native Elementor widgets only (no EKit).
   Assign .bs-policy-doc-hero to the top-level header section
   on each full policy document page (Terms of Use, Seller Member
   Policy, Privacy Policy, and any future policy doc pages).
   Widget order inside section (top to bottom):
     1. Text widget  → .bs-policy-doc-breadcrumb  (back link)
     2. Heading H1   → .bs-policy-doc-title        (doc name)
     3. Search shortcode widget (untouched)
   ═══════════════════════════════════════════════════════════════ */

/* Section — dark bg, texture, amber bottom line                   */
.bs-policy-doc-hero.e-con {
  background: #1e1919 !important;
  padding: 64px 40px 52px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.bs-policy-doc-hero.e-con::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 44px,
    rgba(255,255,255,0.018) 44px,
    rgba(255,255,255,0.018) 45px
  ) !important;
  pointer-events: none !important;
}
.bs-policy-doc-hero.e-con::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(176,116,62,0.5), transparent) !important;
}

/* Lift all widget content above the ::before texture              */
.bs-policy-doc-hero .elementor-widget-container {
  position: relative !important;
  z-index: 1 !important;
}

/* Back link — small uppercase muted text, amber on hover          */
.bs-policy-doc-breadcrumb .elementor-widget-container,
.bs-policy-doc-breadcrumb p {
  font-size: 0.625rem !important;   /* 10px */
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.bs-policy-doc-breadcrumb a {
  color: rgba(255,255,255,0.4) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.bs-policy-doc-breadcrumb a:hover {
  color: #b0743e !important;
}

/* H1 title — white, bold, tight tracking                          */
.bs-policy-doc-title .elementor-heading-title {
  font-size: clamp(28px, 3.5vw, 44px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bs-policy-doc-hero.e-con {
    padding: 48px 24px 40px !important;
  }
  .bs-policy-doc-title .elementor-heading-title {
    font-size: clamp(24px, 6vw, 34px) !important;
  }
}