/*
  ================================================================
  BENCHMARK EMAIL — Help Scout Custom CSS — COMPLETE MERGED FILE
  This is the ONE file that should go in Custom CSS from now on.
  It replaces v19/v20 and every separate patch file that came
  before it (show-collections, category-cards, hide-nav-links,
  warmth) — they're all combined here in the correct order so the
  cascade resolves correctly. Do not paste patches separately
  alongside this file.
  ================================================================
*/

/* ── FONTS ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Song+Myung&display=swap');

/* ── GLOBAL ─────────────────────────────────────────────────── */
body {
  font-family: 'Poppins', sans-serif !important;
  background:  #f4f0f8 !important;
  color:       #3C3549 !important;
}

/* ── HEADER & LOGO ──────────────────────────────────────────── */
header#mainNav,
header#mainNav.navbar {
  background:     #fff !important;
  border-bottom:  1px solid #EDE5FF !important;
  box-shadow:     none !important;
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  min-height:     52px !important;
}

header#mainNav .navbar-inner {
  background:  #fff !important;
  box-shadow:  none !important;
  border:      none !important;
  padding:     0 20px !important;
  min-height:  52px !important;
}

header#mainNav a.brand,
header#mainNav .brand {
  padding:     12px 0 !important;
  margin:      0 !important;
  line-height: normal !important;
}

header#mainNav a.brand img,
header#mainNav .brand img,
.navbar a.brand img,
a.brand img {
  height:     26px !important;
  width:      auto !important;
  max-height: 26px !important;
  max-width:  150px !important;
  display:    block !important;
}

header#mainNav .nav > li > a,
.navbar .nav > li > a {
  font-family:   'Poppins', sans-serif !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  color:         #3C247F !important;
  padding:       6px 11px !important;
  border-radius: 6px !important;
  margin:        0 1px !important;
  transition:    background 0.18s !important;
  line-height:   normal !important;
}

header#mainNav .nav > li > a:hover,
.navbar .nav > li > a:hover {
  background: #F0EAFF !important;
  color:      #27174F !important;
}

/* ---- Nav shows only Login + Release Notes, everything else hidden ---- */
header#mainNav .nav > li {
  display: none !important;
}

header#mainNav .nav > li:has(a[href*="login"]),
header#mainNav .nav > li:has(a[href*="release-notes"]) {
  display: inline-block !important;
}

/* ── HERO ───────────────────────────────────────────────────── */
#docsSearch {
  background:    linear-gradient(135deg, #3C247F 0%, #6A2FAF 100%) !important;
  border-bottom: none !important;
  padding:       48px 28px 44px !important;
  text-align:    center !important;
  position:      relative !important;
  overflow:      visible !important;
  /* Reverted to visible — overflow:hidden here was clipping the
     search suggestions dropdown, which needs to extend below the
     hero. The bleeding shapes are sized/positioned below to look
     right WITHOUT needing the hero to clip them. */
}

#docsSearch::before {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(circle at 15% 60%, rgba(242,151,218,0.18) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(0,148,153,0.15)   0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit !important;
}

/* Bold shapes, echoing the brand's own marketing-site style — sized
   and positioned to stay within the hero's own box so they don't
   need overflow:hidden (which would break the search dropdown). */
#docsSearch::after {
  content:       '';
  position:      absolute;
  left:          -40px;
  bottom:        -40px;
  width:         220px;
  height:        220px;
  background:    #DCB8FE !important;
  border-radius: 50% !important;
  opacity:       1 !important;
  z-index:       0 !important;
  pointer-events: none !important;
}

#docsSearch h1 {
  font-family:   'Song Myung', serif !important;
  color:         #fff !important;
  font-size:     1.85rem !important;
  font-weight:   normal !important;
  margin:        0 0 14px 0 !important;
  position:      relative !important;
  z-index:       2 !important;
  overflow:      visible !important;
  display:       block !important;
  visibility:    visible !important;
}

#docsSearch h1::before {
  content:       '';
  position:      absolute;
  left:          -120px;
  bottom:        -30px;
  width:         110px;
  height:        110px;
  background:    #FBB040 !important;
  border-radius: 50% !important;
  opacity:       1 !important;
  z-index:       -1 !important;
  pointer-events: none !important;
}

/* ── SEARCH BAR (scoped to the homepage hero only — #searchBar is
   reused as an ID on other pages too, e.g. the collection sidebar) ── */
#docsSearch #searchBar {
  position:      relative !important;
  z-index:       1 !important;
  display:       block !important;
  max-width:     580px !important;
  width:         100% !important;
  height:        50px !important;
  margin:        0 auto !important;
  border-radius: 18px !important;
  box-shadow:    0 6px 24px rgba(0,0,0,0.22) !important;
  background:    #fff !important;
  /* NOTE: overflow:hidden used to live here to keep the rounded
     corners clean, but it also clipped Help Scout's autocomplete
     suggestions dropdown (which renders below the input, inside
     this same container). Removed — rounding is applied directly
     to the input/button corners below instead, so the shape still
     looks right without cutting off the dropdown. */
}

#docsSearch #searchBar input.search-query,
#docsSearch #searchBar input[type="search"],
#docsSearch #searchBar input[type="text"] {
  display:            block !important;
  float:              none !important;
  width:              100% !important;
  height:             100% !important;
  background:         #fff !important;
  border:             none !important;
  border-radius:      18px 0 0 18px !important;
  box-shadow:         none !important;
  outline:            none !important;
  color:              #3C3549 !important;
  font-family:        'Poppins', sans-serif !important;
  font-size:          13px !important;
  padding:            0 90px 0 16px !important;
  margin:             0 !important;
  -webkit-appearance: none !important;
  vertical-align:     middle !important;
  box-sizing:         border-box !important;
}

#docsSearch #searchBar input.search-query::placeholder {
  color: #9D9AA4 !important;
}

#docsSearch #searchBar button,
#docsSearch #searchBar .btn,
#docsSearch #searchBar input[type="submit"] {
  position:        absolute !important;
  top:             0 !important;
  right:           0 !important;
  height:          100% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           auto !important;
  white-space:     nowrap !important;
  background-color:#009499 !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   0 18px 18px 0 !important;
  box-shadow:      none !important;
  font-family:     'Poppins', sans-serif !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  padding:         0 24px !important;
  margin:          0 !important;
  cursor:          pointer !important;
  transition:      background-color 0.2s !important;
}

#docsSearch #searchBar button:hover,
#docsSearch #searchBar .btn:hover,
#docsSearch #searchBar input[type="submit"]:hover {
  background-color: #007A7E !important;
  color:            #fff !important;
}

/* ── CONTENT AREA GRID (homepage) ──────────────────────────── */
/* Scoped with :has() so this grid ONLY applies on the homepage
   (where #contentArea's direct children are .collection-category
   cards) — NOT on collection pages, which reuse the same #contentArea
   ID/class for a completely different two-column layout. Without this
   scoping, forcing display:grid there turns its row + footer into
   side-by-side grid cells instead of a normal stacked page. */
section#contentArea:has(> section.collection-category) {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   24px !important;
  padding:               40px 28px 0 !important;
  max-width:             1060px !important;
  margin:                0 auto !important;
  box-sizing:            border-box !important;
  align-items:           start !important;
}

section#contentArea:has(> section.collection-category)::before,
section#contentArea:has(> section.collection-category)::after {
  display: none !important;
  content: none !important;
  height:  0 !important;
}

@media (max-width: 780px) {
  section#contentArea:has(> section.collection-category) {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 18px 16px 0 !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  section#contentArea:has(> section.collection-category) {
    grid-template-columns: 1fr !important;
    padding: 14px 14px 0 !important;
  }
}

#noResults {
  grid-column: 1 / -1 !important;
  height:      0 !important;
  overflow:    hidden !important;
  padding:     0 !important;
  margin:      0 !important;
  font-size:   0 !important;
  line-height: 0 !important;
}

section#contentArea > footer.center {
  grid-column:   1 / -1 !important;
  background:    #3C3549 !important;
  color:         #6C6876 !important;
  font-family:   'Poppins', sans-serif !important;
  font-size:     12px !important;
  text-align:    center !important;
  padding:       20px 28px !important;
  margin:        16px -28px 0 !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  border:        none !important;
}

section#contentArea > footer.center a {
  color:      #DCB8FE !important;
  transition: color 0.2s !important;
}

section#contentArea > footer.center a:hover {
  color: #fff !important;
}

/* ── COLLECTION CARDS (homepage) — shows the collection itself,
   not its categories ── */
section#contentArea > section.collection-category {
  background:     #fff !important;
  border:         1.5px solid #EDE5FF !important;
  border-radius:  18px !important;
  padding:        0 !important;
  position:       relative !important;
  overflow:       hidden !important;
  box-shadow:     0 2px 10px rgba(60,36,127,0.06) !important;
  transition:     transform 0.22s, box-shadow 0.22s, border-color 0.22s !important;
  cursor:         pointer !important;
  display:        flex !important;
  flex-direction: column !important;
}

section#contentArea > section.collection-category:last-of-type {
  grid-column: 1 / -1 !important;
}

section#contentArea > section.collection-category::before {
  content:       '' !important;
  position:      absolute !important;
  top:           0 !important;
  left:          0 !important;
  right:         0 !important;
  height:        3px !important;
  background:    linear-gradient(90deg, #FBB040, #6A2FAF) !important;
  border-radius: 18px 18px 0 0 !important;
  opacity:       0 !important;
  transition:    opacity 0.22s !important;
  z-index:       1 !important;
}

section#contentArea > section.collection-category:hover {
  transform:    translateY(-3px) !important;
  box-shadow:   0 8px 24px rgba(60,36,127,0.14) !important;
  border-color: #DCB8FE !important;
}

section#contentArea > section.collection-category:hover::before {
  opacity: 1 !important;
}

/* Hide the category breakdown — collections are the visible unit */
section#contentArea > section.collection-category > section.category-list {
  display: none !important;
}

/* Show the collection's own name/link in its place */
section#contentArea > section.collection-category > h2 {
  display:         flex !important;
  flex-direction:  column !important;
  flex:            1 !important;
  align-items:     center !important;
  justify-content: center !important;
  text-align:      center !important;
  gap:             10px !important;
  padding:         30px 22px 26px !important;
  margin:          0 !important;
  min-height:      120px !important;
  box-sizing:      border-box !important;
}

section#contentArea > section.collection-category > h2 a {
  font-family:     'Song Myung', serif !important;
  font-size:       1.05rem !important;
  color:           #3C247F !important;
  font-weight:     normal !important;
  text-decoration: none !important;
  line-height:     1.3 !important;
}

/* "Stretched link" trick — makes the whole card clickable, not just
   the visible text. Deliberately NOT giving the <a> itself
   position:relative, so this pseudo-element's inset:0 skips past it
   and anchors to the card (section.collection-category) instead,
   which already has position:relative from the card styling above.
   No JavaScript needed. */
section#contentArea > section.collection-category > h2 a::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
}

section#contentArea > section.collection-category:hover > h2 {
  background: linear-gradient(135deg, #FCEFDC, #F7EEFF) !important;
}

/* ── COLLECTION CARD ICONS ──────────────────────────────────── */
/* Line-style icons in a soft circle badge, matching the brand
   guideline's rounded/single-color iconography rule. Matched by a
   substring of the collection's URL slug — same technique as the
   nav quick links — so this works on any site regardless of the
   numeric collection IDs, including once this moves to production.
   A generic default icon covers any collection name not listed
   below (e.g. sandbox test collections). */

section#contentArea > section.collection-category > h2::before {
  content:             '';
  display:             block;
  width:               44px;
  height:              44px;
  border-radius:       50% !important;
  background-color:    #F7EEFF !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     22px 22px !important;
  flex-shrink:         0 !important;
  /* default: generic document icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h4l2 2h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5z'/%3E%3C/svg%3E") !important;
}

/* Getting Started — flag */
section#contentArea > section.collection-category:has(> h2 a[href*="getting-started"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18M5 4h11l-3 4 3 4H5'/%3E%3C/svg%3E") !important;
}

/* Account Settings — gear */
section#contentArea > section.collection-category:has(> h2 a[href*="account-settings"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E") !important;
}

/* Contacts — person */
section#contentArea > section.collection-category:has(> h2 a[href*="contacts"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 20c0-3.5 3-6 7-6s7 2.5 7 6'/%3E%3C/svg%3E") !important;
}

/* Delivery & Verification — shield check */
section#contentArea > section.collection-category:has(> h2 a[href*="delivery"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") !important;
}

/* Emails & Design — envelope */
section#contentArea > section.collection-category:has(> h2 a[href*="emails"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") !important;
}

/* Forms — document with lines */
section#contentArea > section.collection-category:has(> h2 a[href*="forms"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E") !important;
}

/* Integrations & API — plug */
section#contentArea > section.collection-category:has(> h2 a[href*="integrations"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v4M15 2v4M7 6h10v4a5 5 0 0 1-10 0V6z'/%3E%3Cpath d='M12 15v7'/%3E%3C/svg%3E") !important;
}

/* Reports — bar chart */
section#contentArea > section.collection-category:has(> h2 a[href*="reports"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M20 20H4'/%3E%3C/svg%3E") !important;
}

/* Release Notes — megaphone */
section#contentArea > section.collection-category:has(> h2 a[href*="release-notes"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l6 4V6l-6 4H3z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E") !important;
}

/* Videos — play button */
section#contentArea > section.collection-category:has(> h2 a[href*="videos"]) > h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C247F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5v-7z'/%3E%3C/svg%3E") !important;
}

/* ── COLLECTION PAGE (clicking into a collection) ───────────── */
.collectionHeader h1,
.categoryHeader h1 {
  font-family: 'Song Myung', serif !important;
  color:       #3C247F !important;
  font-size:   1.6rem !important;
  font-weight: normal !important;
}

.collectionHeader p,
.categoryHeader p {
  font-family: 'Poppins', sans-serif !important;
  font-size:   13px !important;
  color:       #6C6876 !important;
}

.article-list,
.category-articles {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}

.article-list li,
.category-articles li {
  border-bottom: 1px solid #f0ecf8 !important;
  list-style:    none !important;
}

.article-list li a,
.category-articles li a {
  font-family:     'Poppins', sans-serif !important;
  font-size:       13px !important;
  font-weight:     500 !important;
  color:           #27174F !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     center !important;
  padding:         10px 4px !important;
  gap:             8px !important;
  transition:      color 0.18s, padding-left 0.18s !important;
}

.article-list li a::before,
.category-articles li a::before {
  content:     '→' !important;
  color:       #009499 !important;
  font-size:   12px !important;
  flex-shrink: 0 !important;
  transition:  transform 0.18s !important;
}

.article-list li a:hover,
.category-articles li a:hover {
  color:        #009499 !important;
  padding-left: 6px !important;
}

a.more-link,
.more-link {
  font-family:     'Poppins', sans-serif !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  color:           #009499 !important;
  text-decoration: none !important;
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             4px !important;
  margin-top:      8px !important;
}

a.more-link:hover { color: #007A7E !important; }

/* ---- Collection page's category sidebar — clean list, not boxed
   cards, categories stay in their original left-side position ---- */
#contentArea aside#sidebar form#searchBar.sm {
  max-width: 320px !important;
  margin:    0 0 22px 0 !important;
}

#contentArea aside#sidebar h3 {
  font-family: 'Song Myung', serif !important;
  color:       #3C247F !important;
  font-size:   1.3rem !important;
  font-weight: normal !important;
  margin:      0 0 14px 0 !important;
}

#contentArea aside#sidebar ul.nav-list {
  list-style: none !important;
  margin:     0 0 8px 0 !important;
  padding:    0 !important;
  display:    block !important;
}

#contentArea aside#sidebar ul.nav-list li {
  list-style: none !important;
  margin:     0 0 6px 0 !important;
  display:    block !important;
}

#contentArea aside#sidebar ul.nav-list li a {
  display:         block !important;
  font-family:     'Song Myung', serif !important;
  font-size:       1.05rem !important;
  color:           #3C247F !important;
  text-decoration: none !important;
  padding:         4px 0 !important;
  transition:      color 0.18s !important;
}

#contentArea aside#sidebar ul.nav-list li a:hover {
  color: #009499 !important;
}

#contentArea aside#sidebar ul.nav-list li a i.icon-arrow {
  display: none !important;
}

/* ── SEARCH RESULTS ─────────────────────────────────────────── */
#serp-dd .result a,
.search-results .result a {
  font-family:     'Poppins', sans-serif !important;
  font-weight:     500 !important;
  color:           #3C247F !important;
  text-decoration: none !important;
  font-size:       13px !important;
}

#serp-dd .result a:hover { color: #009499 !important; }

#serp-dd .result p,
.search-results .result p {
  font-size:   12px !important;
  color:       #6C6876 !important;
  margin:      2px 0 0 !important;
  font-family: 'Poppins', sans-serif !important;
}

/* ── ARTICLE PAGE ───────────────────────────────────────────── */
.articleTitle,
.article h1 {
  font-family: 'Song Myung', serif !important;
  color:       #3C247F !important;
  font-size:   1.7rem !important;
  font-weight: normal !important;
}

.articleBody,
.article-body {
  font-family: 'Poppins', sans-serif !important;
  font-size:   14px !important;
  line-height: 1.78 !important;
  color:       #3C3549 !important;
}

.articleBody h2,
.articleBody h3 {
  font-family: 'Song Myung', serif !important;
  color:       #3C247F !important;
  font-weight: normal !important;
}

.articleBody code {
  background:    #F0EAFF !important;
  color:         #6A2FAF !important;
  border-radius: 4px !important;
  padding:       1px 5px !important;
  font-size:     12px !important;
}

.articleBody blockquote,
.callout,
.note {
  background:    #F7EEFF !important;
  border-left:   3px solid #3C247F !important;
  border-radius: 0 8px 8px 0 !important;
  padding:       10px 16px !important;
  margin:        14px 0 !important;
  color:         #27174F !important;
  font-size:     13px !important;
}

.articleFoot time.lu {
  display: none !important;
}

.prevNextNav a,
.articleFoot .prevNext a {
  font-family:     'Poppins', sans-serif !important;
  font-size:       12px !important;
  font-weight:     500 !important;
  color:           #3C247F !important;
  border:          1.5px solid #EDE5FF !important;
  border-radius:   18px !important;
  padding:         9px 14px !important;
  text-decoration: none !important;
  transition:      border-color 0.2s, background 0.2s !important;
  display:         inline-block !important;
}

.prevNextNav a:hover,
.articleFoot .prevNext a:hover {
  border-color: #DCB8FE !important;
  background:   #F7EEFF !important;
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb,
.breadcrumb-wrap {
  font-family: 'Poppins', sans-serif !important;
  font-size:   12px !important;
}

.breadcrumb a,
.breadcrumb-wrap a {
  color:           #009499 !important;
  text-decoration: none !important;
}

.breadcrumb a:hover { color: #007A7E !important; }

.breadcrumb .divider,
.breadcrumb-wrap .divider {
  color:   #9D9AA4 !important;
  padding: 0 4px !important;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer,
.docs-footer,
footer.center {
  grid-column:  1 / -1 !important; /* harmless no-op outside a grid context (e.g. collection pages); spans the grid's columns on the homepage */
  /* Full-bleed technique: #contentArea has max-width:1060px and is
     centered, so grid-column alone only spans that constrained width,
     not the actual browser viewport. This breaks the footer out to
     true edge-to-edge width, matching the header/hero above it.
     Using margin-only calc() here instead of left:50%/position:relative
     — the previous version resolved "50%" against some positioned
     ancestor's box instead of the true viewport, shifting the whole
     footer to the right instead of centering it edge-to-edge. */
  width:        100vw !important;
  margin-left:  calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  background:   #3C3549 !important;
  color:        #6C6876 !important;
  font-family:  'Poppins', sans-serif !important;
  font-size:    12px !important;
  padding:      20px 24px !important;
  text-align:   center !important;
  box-sizing:   border-box !important;
}

footer a,
.docs-footer a {
  color:      #DCB8FE !important;
  transition: color 0.2s !important;
}

footer a:hover,
.docs-footer a:hover {
  color: #fff !important;
}