/** Shopify CDN: Minification failed

Line 300:50 Unexpected "*"

**/
/*
  ICEBYAK custom CSS — navigation bar only.
  Loaded by layout/theme.liquid after theme.css so it overrides.
  Specs match the Claude Design handoff bundle (ICEBYAK Homepage.html).
  Tokens:
    --blue:   #4f71f8
    --blue-d: #3458e8
    --text:   #0d0d0d
    --dim:    #6b6b6b
    --border: #e4e4e4
*/

@media only screen and (min-width: 769px) {

  /* Allow the megamenu panel to span the full viewport */
  .site-nav.site-navigation,
  .site-nav__item,
  .site-nav--is-megamenu,
  .icebyak-nav--has-megamenu {
    position: static !important;
  }

  /* === Claude Design nav bar — blue band behind the desktop nav UL ===
     Targets ONLY the menu UL (`.site-nav.site-navigation.small--hide`),
     not the search-icon slot which also lives inside `.header-item--navigation`. */

  /* Make sure the left/right header-item slots stay white (search, icons) */
  .header-item.header-item--navigation,
  .header-item--navigation {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Make sure parents above the nav don't clip the ul */
  .site-header .page-width { overflow: visible !important; }

  /* Nav band wrapper — full-bleed because it's rendered OUTSIDE .page-width
     in sections/header.liquid. Background goes here, no pseudo hacks needed. */
  .cd-nav-band {
    background: #1b3bbb !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .cd-nav-band > .page-width {
    overflow: visible !important;
  }
  html body ul.site-nav.site-navigation.small--hide {
    background: transparent !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    position: relative;
    overflow: visible !important;
  }
  html body ul.site-nav.site-navigation.small--hide::before,
  html body ul.site-nav.site-navigation.small--hide::after {
    display: none !important;
    content: none !important;
  }
  /* Force every ancestor of the nav UL to allow overflow so the pseudo's
     box-shadow isn't clipped by a hidden parent. */
  .site-header,
  .site-header__wrapper,
  .site-header > .page-width,
  .site-header .page-width,
  .site-header .text-center,
  .site-header .header-layout {
    overflow: visible !important;
  }
  ul.site-nav.site-navigation.small--hide > li {
    background: transparent !important;
    border: none !important;
  }
  /* Make sure the megamenu sits ABOVE the nav band's box-shadow clones */
  .icebyak-megamenu,
  .site-nav__dropdown.megamenu {
    z-index: 200 !important;
  }

  /* Kill the white gap below the blue nav band — collapse any padding /
     margin / bottom-border on the wrappers that sit between the nav and
     whatever section follows (announcement bar, hero, etc). */
  .site-header .page-width:has(> .text-center > ul.site-navigation),
  .site-header .page-width {
    padding-bottom: 0 !important;
  }
  .site-header > .page-width > .text-center {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
  }
  .site-header > .page-width > .text-center > * { line-height: normal; }
  .site-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* ============================================================
     GLOBAL ANNOUNCEMENTS — BNPL ticker + Gold Sale promo bar.
     Rendered by snippets/global-announcements.liquid via theme.liquid.
     ============================================================ */
  .ib-ticker {
    background: #080c14;
    border-bottom: 0.5px solid #1e2a4a;
    overflow: hidden;
    height: 44px;
    display: flex;
    align-items: center;
    cursor: default;
  }
  .ib-ticker__track {
    display: inline-flex;
    align-items: center;
    animation: ibScroll 36s linear infinite;
    will-change: transform;
    white-space: nowrap;
  }
  .ib-ticker__track:hover { animation-play-state: paused; }
  @keyframes ibScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .ib-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 30px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.04em;
    border-right: 0.5px solid #1e2a4a;
    white-space: nowrap;
  }
  .ib-ticker__item strong { color: #ffffff; font-weight: 600; }
  .ib-ticker__logo { display: inline-flex; align-items: center; justify-content: center; height: 26px; flex-shrink: 0; }
  .ib-ticker__logo img { height: 100%; width: auto; object-fit: contain; display: block; max-width: 80px; }
  .ib-ticker__dot { width: 4px; height: 4px; border-radius: 50%; background: #1a4fd6; flex-shrink: 0; }

  .ib-promo {
    background: #06090f;
    padding: 11px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(196,154,10,0.2);
    border-bottom: 1px solid rgba(196,154,10,0.2);
  }
  .ib-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(196,154,10,0.06) 40%, rgba(240,201,58,0.1) 50%, rgba(196,154,10,0.06) 60%, transparent 100%);
    animation: ibPromoSweep 5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes ibPromoSweep {
    0%   { left: -50%; }
    100% { left: 130%; }
  }
  .ib-promo__inner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .ib-promo__diamond {
    width: 4px;
    height: 4px;
    background: #c49a0a;
    transform: rotate(45deg);
    opacity: 0.6;
    flex-shrink: 0;
  }
  .ib-promo__badge {
    background: linear-gradient(135deg, #b8860b 0%, #f0c93a 45%, #fde882 52%, #f0c93a 58%, #b8860b 100%);
    background-size: 200% 100%;
    animation: ibBadgeShimmer 3s ease-in-out infinite;
    color: #0a0800;
    font-family: 'DM Serif Display', serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 3px 12px;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    flex-shrink: 0;
  }
  @keyframes ibBadgeShimmer {
    0%,100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
  }
  .ib-promo__text {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ============================================================
     TOP UTILITY BAR — restyles the existing Impulse `.toolbar`
     to look like the design's dark utility strip. The hardcoded
     "Financing / 14-Day Returns" text is injected by
     snippets/toolbar.liquid; the locale (English/Español) selector
     is the existing Impulse multi-selector.
     ============================================================ */
  .toolbar,
  .toolbar.small--hide {
    background: #0a0a0a !important;
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
  }
  .toolbar .page-width {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .toolbar .toolbar__content {
    height: 36px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
  }
  .toolbar .toolbar__item {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .toolbar .toolbar__item--cd-util {
    color: rgba(255,255,255,0.85);
    margin-right: auto; /* pushes everything else (social, locale) to the right */
  }

  /* Centered FREE U.S. SHIPPING — bold, uppercase, white */
  .toolbar .toolbar__item--cd-shipping {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .toolbar .page-width {
    position: relative;
  }
  .cd-util__shipping {
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
  }

  /* Hide Impulse's standalone announcement bar (FREE US SHIPPING ON ALL ORDERS
     row that sits above the toolbar) — it's been merged into the toolbar above. */
  .announcement-bar,
  .shopify-section--announcement,
  .shopify-section[id*="announcement-bar"],
  [class*="announcement-bar"]:not([class*="ai-announcement"]) {
    display: none !important;
  }

  /* ============================================================
     TIGHTEN SECTION MARGINS — remove white space between stacked bars.
     Order on collection pages:
       toolbar → header → blue-nav → ticker → Gold Sale → hero → benefit → pills → grid
     Each section should sit flush against the next.
     ============================================================ */
  .ib-ticker,
  .ib-promo,
  .template-collection .collection-hero,
  .template-collection .section-header--flush,
  .template-collection .section-header.section-header--flush,
  .cd-coll-benefit,
  .template-collection .chain-tabs-wrap.cd-subcat-bar {
    margin: 0 !important;
  }
  /* Zero out the wrapper margins around hero + benefit + pills */
  .template-collection #shopify-section-template--*[id*="collection-header"],
  .template-collection .shopify-section[id*="collection-header"] {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Pill row no bottom margin — let the page-width content grid space handle it */
  .template-collection .chain-tabs-wrap.cd-subcat-bar {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  /* Page-width container above the grid — small top padding only (was 24px both) */
  .template-collection .collection-content .page-width {
    padding-top: 0 !important;
  }
  /* Grid row sits directly under the pill bar with a slim 20px breathing room */
  .template-collection .collection-content .page-width > .grid {
    margin-top: 20px !important;
  }

  /* Aggressively zero out the Shopify section wrappers + content wrappers
     on collection pages so consecutive bars sit flush (no auto white space). */
  body.template-collection .shopify-section,
  body.template-collection .shopify-section[id*="collection-header"],
  body.template-collection .shopify-section[id*="template-"][id*="collection"],
  body.template-collection .shopify-section[id*="footer-promotions"],
  body.template-collection .shopify-section[id*="newsletter"],
  body.template-collection .shopify-section[id*="apps"]:not([id*="header"]) {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.template-collection .collection-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.template-collection .page-content,
  body.template-collection .page-content--top,
  body.template-collection .page-content--bottom {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
  /* Some Impulse layouts add a sticky-header offset spacer — zero it too. */
  body.template-collection .header-sticky-wrapper + *,
  body.template-collection .site-header + * {
    margin-top: 0 !important;
  }
  .toolbar a,
  .toolbar .toolbar__menu a,
  .toolbar .multi-selectors__menu-button,
  .toolbar button {
    color: rgba(255,255,255,0.85) !important;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: none !important;
  }
  .toolbar a:hover { color: #d4a843 !important; }

  /* === Locale / currency dropdown popup — dark text on white bg === */
  .toolbar .multi-selectors__list,
  .toolbar .multi-selectors__menu,
  .toolbar .multi-selectors__list-wrap,
  .toolbar .disclosure-list,
  .toolbar .disclosure,
  .toolbar .selector-popout,
  .toolbar [role="list"][aria-hidden="false"],
  .toolbar ul[id*="LocaleList"],
  .toolbar ul[id*="CurrencyList"] {
    background: #ffffff !important;
    border: 1px solid #e4e4e4 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
    padding: 6px 0 !important;
  }
  .toolbar .multi-selectors__list a,
  .toolbar .multi-selectors__list button,
  .toolbar .multi-selectors__list li,
  .toolbar .multi-selectors__menu a,
  .toolbar .multi-selectors__menu button,
  .toolbar .disclosure-list a,
  .toolbar .disclosure-list button,
  .toolbar .disclosure-list li,
  .toolbar .disclosure a,
  .toolbar .disclosure button,
  .toolbar .selector-popout a,
  .toolbar .selector-popout button {
    color: #0d0d0d !important;
    background: transparent !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 8px 16px !important;
    display: block;
    width: 100%;
    text-align: left;
  }
  .toolbar .multi-selectors__list a:hover,
  .toolbar .multi-selectors__list button:hover,
  .toolbar .disclosure-list a:hover,
  .toolbar .disclosure-list button:hover,
  .toolbar .disclosure a:hover,
  .toolbar .selector-popout a:hover,
  .toolbar .selector-popout button:hover {
    color: #1b3bbb !important;
    background: #f6f6f6 !important;
  }

  /* Util item bits (reused from old .cd-util CSS) */
  .cd-util__item {
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
  }
  a.cd-util__item--link {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
    cursor: pointer;
  }
  a.cd-util__item--link:hover,
  a.cd-util__item--link:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }
  .cd-util__dot {
    color: #d4a843;
    margin: 0 4px;
    font-weight: 700;
  }
  .cd-util__sep {
    color: rgba(255,255,255,0.25);
    margin: 0 4px;
  }
  @media (max-width: 640px) {
    .toolbar .toolbar__content {
      height: auto;
      min-height: 32px;
      padding: 6px 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    .toolbar,
    .toolbar.small--hide { font-size: 11px !important; letter-spacing: 0.04em !important; }
  }

  /* ============================================================
     LOGO consistency — same size everywhere, bigger on homepage
     ============================================================ */
  .site-header__logo img,
  .site-header__logo-image,
  a.site-header__logo img,
  .site-header__logo img.small--hide {
    max-height: 88px !important;
    width: auto !important;
    height: auto !important;
  }
  /* Homepage: bigger logo for stronger brand presence */
  .template-index .site-header__logo img,
  .template-index .site-header__logo-image,
  .template-index a.site-header__logo img,
  .template-index .site-header__logo img.small--hide {
    max-height: 130px !important;
  }
  @media (max-width: 768px) {
    .site-header__logo img,
    .site-header__logo-image,
    a.site-header__logo img,
    .site-header__logo img.small--hide,
    .template-index .site-header__logo img,
    .template-index a.site-header__logo img {
      max-height: 64px !important;
    }
  }

  /* Top-level nav links — white uppercase Barlow Condensed on blue */
  .site-nav__link,
  .site-nav__link.site-nav__link--underline {
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap;
  }
  .site-nav__link:hover,
  .site-nav__item:hover > .site-nav__link,
  .site-nav__item:focus-within > .site-nav__link {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.18) !important;
  }
  /* Kill the old hover underline so it doesn't sit on the blue bar */
  .site-nav__item:hover > .site-nav__link:after,
  .site-nav__item:focus-within > .site-nav__link:after {
    display: none !important;
    content: none !important;
  }

  /* Megamenu panel — clean white, hairline borders, soft shadow */
  .icebyak-megamenu {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e4e4e4 !important;
    border-bottom: 1px solid #e4e4e4 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  }

  /* Beat base Impulse .megamenu padding/line-height bleeding through */
  .icebyak-megamenu.megamenu {
    padding: 36px 40px !important;
    line-height: 1.6 !important;
  }

  /* Kill the base .site-nav__dropdown shadow when it's the megamenu */
  .site-nav--is-megamenu .site-nav__dropdown {
    box-shadow: none !important;
  }

  /* Inner layout — flex so columns center horizontally when fewer than 4 are
     populated. Each column takes its natural content width up to ~220px. */
  .icebyak-megamenu__inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 56px !important;
  }

  .icebyak-megamenu__column {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    flex: 0 1 200px;
    min-width: 160px;
  }

  /* Kill per-link backgrounds and box styling inherited from base Impulse */
  .icebyak-megamenu a,
  .icebyak-megamenu .site-nav__dropdown-link {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Column heading (.mcol h4 in design) — blue, tiny, very uppercase */
  .icebyak-megamenu__heading {
    display: block !important;
    color: #4f71f8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  .icebyak-megamenu__heading:hover {
    color: #4f71f8 !important;
  }

  /* Sub-link (.mcol a in design) — plain dim gray */
  .icebyak-megamenu__link {
    display: block !important;
    color: #6b6b6b !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.6 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
  }
  .icebyak-megamenu__link:hover {
    color: #0d0d0d !important;
  }

  /* Hide any megamenu collection images */
  .icebyak-megamenu .megamenu__colection-image,
  .icebyak-megamenu .megamenu__collection-image,
  .icebyak-megamenu img {
    display: none !important;
  }

  /* "Shop All {title} →" CTA inside the last column */
  .icebyak-megamenu__cta {
    display: block !important;
    color: #4f71f8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.6 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
  }
  .icebyak-megamenu__cta:hover,
  .icebyak-megamenu__cta:focus {
    color: #3458e8 !important;
  }
  .icebyak-megamenu__cta-arrow {
    display: inline-block;
    margin-left: 2px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .icebyak-megamenu.megamenu {
    padding: 28px 28px !important;
  }
  .icebyak-megamenu__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

/* ============================================================
   HEADER ICONS — force cart, search, account visible site-wide.
   The Impulse theme hides the right-side search icon on desktop in
   center layouts (it's supposed to be in a left slot). Show both
   so users always see them.
   ============================================================ */
.site-header__icons,
.site-nav__icons,
.header-item--icons .site-nav,
.header-item--icons .site-nav__icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}
.header-item.header-item--icons {
  background: transparent !important;
  background-color: transparent !important;
}
.site-nav__icons .site-nav__link,
.site-nav__link.site-nav__link--icon,
a.site-nav__link.js-drawer-open-cart,
a.site-nav__link.js-search-header,
.header-item--icons a.site-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0a0a0a !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 8px !important;
  background: transparent !important;
}
.site-nav__link--icon .icon,
.site-nav__link--icon svg {
  width: 22px !important;
  height: 22px !important;
  color: #0a0a0a !important;
  fill: currentColor;
  stroke: currentColor;
}
.site-nav__link--icon:hover .icon,
.site-nav__link--icon:hover svg { color: var(--cd-blue, #1b3bbb) !important; }

/* Search icon — Impulse hides it on desktop for center layouts. Show it. */
a.site-nav__link.js-search-header.medium-up--hide {
  display: inline-flex !important;
}

/* Left-slot search icon (center layout) — keep it visible too */
.header-item.header-item--left.header-item--navigation,
.header-item.header-item--left.header-item--navigation .site-nav,
.header-item.header-item--left.header-item--navigation .site-nav__link {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #0a0a0a !important;
}
.header-item.header-item--left.header-item--navigation .site-nav__link svg {
  color: #0a0a0a !important;
  width: 22px;
  height: 22px;
}

/* Cart bubble — gold accent count badge */
.cart-link__bubble {
  background: #d4a843 !important;
  color: #0a0a0a !important;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
  font-weight: 700;
}

/* ============================================================
   MOBILE DRAWER MENU — dark theme, Claude Design aesthetic.
   Behavior (open/close, collapsible) is left untouched.
   ============================================================ */
.drawer,
#NavDrawer.drawer {
  background: #0a0a0a !important;
  color: #ffffff !important;
}
.drawer__contents,
.drawer__scrollable {
  background: #0a0a0a !important;
}
.drawer__fixed-header,
.drawer__header {
  background: #0a0a0a !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.drawer__close-button,
.drawer__close .icon-close,
.drawer__close-button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Each top-level item gets a hairline divider */
.mobile-nav__item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent !important;
}

/* Top-level mobile nav items — Bebas Neue, big, white */
.mobile-nav__link--top-level,
.mobile-nav__link--button.mobile-nav__link--top-level,
.mobile-nav__link--top-level .mobile-nav__faux-link {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  padding: 16px 20px !important;
  background: transparent !important;
}
.mobile-nav__link--top-level:hover,
.mobile-nav__link--top-level:focus,
.mobile-nav__link--top-level[data-active="true"],
.mobile-nav__link--top-level .mobile-nav__faux-link[data-active="true"] {
  color: #d4a843 !important;
  background: rgba(212,168,67,0.06) !important;
}

/* Sub-list links — gray, smaller, gold on hover */
.mobile-nav__sublist {
  background: rgba(255,255,255,0.02) !important;
}
.mobile-nav__sublist .mobile-nav__link,
.mobile-nav__sublist .mobile-nav__faux-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 12px 28px !important;
  background: transparent !important;
}
.mobile-nav__sublist .mobile-nav__link:hover,
.mobile-nav__sublist .mobile-nav__link:focus,
.mobile-nav__sublist .mobile-nav__link[data-active="true"] {
  color: #d4a843 !important;
  background: rgba(212,168,67,0.05) !important;
}

/* Grandchild links — even lighter indent */
.mobile-nav__grandchildlist .mobile-nav__link {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  padding-left: 40px !important;
}
.mobile-nav__grandchildlist .mobile-nav__link:hover,
.mobile-nav__grandchildlist .mobile-nav__link[data-active="true"] {
  color: #d4a843 !important;
}

/* Collapsible chevron icons — white, gold when open */
.mobile-nav .collapsible-trigger .icon,
.mobile-nav .collapsible-trigger svg {
  color: rgba(255,255,255,0.8) !important;
  fill: rgba(255,255,255,0.8) !important;
}
.mobile-nav .collapsible-trigger.is-open .icon,
.mobile-nav .collapsible-trigger.is-open svg,
.mobile-nav .collapsible-trigger:hover .icon {
  color: #d4a843 !important;
  fill: #d4a843 !important;
}

/* Social icon row at the bottom of the drawer — white, gold on hover */
.mobile-nav__social {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 20px !important;
}
.mobile-nav__social .icon { fill: rgba(255,255,255,0.7) !important; }
.mobile-nav__social a:hover .icon { fill: #d4a843 !important; }

/* ============================================================
   COLLECTION PAGE polish — match new homepage aesthetic.
   Restyles the default Impulse collection layout via class overrides.
   No markup changes — keeps Shopify's product loop intact.
   ============================================================ */

/* Make the page-width wrapper around the flush hero variant NOT constrain it.
   The flush variant lives inside .page-width which has max-width; we use
   negative margins to push the hero out to the viewport edges. */
.template-collection .page-content--top:has(> .section-header--flush),
.template-collection .page-width.page-content--top {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}
.template-collection .section-header--flush,
.template-collection .section-header.section-header--flush {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Collection page hero — dark gradient with subtle product imagery overlay.
   Restyles both image-backed (.collection-hero) and flush (.section-header--flush)
   variants so the look is consistent. */
.template-collection .collection-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #162064 100%) !important;
  position: relative;
  overflow: hidden;
  padding: 56px 24px 44px !important;
  color: #fff !important;
}
.template-collection .collection-hero__image {
  opacity: 0.22 !important;
  mask-image: linear-gradient(to left, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
.template-collection .collection-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto;
}
.template-collection .section-header--flush,
.template-collection .section-header.section-header--flush {
  background: linear-gradient(135deg, #0a0a0a 0%, #162064 100%) !important;
  padding: 56px 24px 44px !important;
  color: #fff !important;
  text-align: left !important;
}
.template-collection .section-header--flush .section-header__title,
.template-collection .section-header--hero .section-header__title {
  color: #ffffff !important;
}
.template-collection .section-header__shadow {
  background: transparent !important;
  box-shadow: none !important;
}
.template-collection .section-header,
.template-collection .section-header--hero {
  background: transparent !important;
  padding: 0 !important;
}
.template-collection .section-header__title,
.template-collection .collection-hero__title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(44px, 5.5vw, 84px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
  max-width: 1500px;
}
/* Last word of the collection title gets a gold accent */
.template-collection .cd-col-title-accent { color: #d4a843 !important; }

/* Hero description (full HTML rendered from collection.description) —
   Barlow Condensed to match the Bebas family aesthetic of the design. */
.template-collection .cd-col-desc,
.template-collection .cd-col-desc p,
.template-collection .cd-col-desc span {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
}
.template-collection .cd-col-desc {
  max-width: 640px;
  margin: 0 0 10px !important;
}
.template-collection .cd-col-desc p { margin: 0 0 6px; }
.template-collection .cd-col-desc strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.template-collection .cd-col-desc a {
  color: #d4a843 !important;
  border-bottom: 1px solid rgba(212,168,67,0.4);
}

/* Spanish description — italic, slightly dimmer */
.template-collection .cd-col-desc-es {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.5) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  max-width: 640px;
  margin: 0 0 22px !important;
  letter-spacing: 0.01em;
}

/* Gold tag eyebrow above the collection title (Claude Design's .col-tag) */
.template-collection .cd-col-tag {
  display: inline-block;
  background: #d4a843;
  color: #0a0a0a;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 14px;
}

/* Description on the dark hero — light translucent */
.template-collection .cd-col-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 0 22px;
}

/* Stats row at the bottom of the hero */
.template-collection .cd-col-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.template-collection .cd-col-stat {
  display: flex;
  flex-direction: column;
}
.template-collection .cd-col-stat__num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: #d4a843;
  letter-spacing: 0.02em;
  line-height: 1;
}
.template-collection .cd-col-stat__lbl {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* Breadcrumbs sit ABOVE the title on the dark hero — small Barlow gold */
.template-collection .breadcrumbs,
.template-collection .breadcrumb,
.template-collection .collection-hero .breadcrumbs,
.template-collection .section-header__shadow .breadcrumbs {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 16px !important;
}
.template-collection .breadcrumbs a,
.template-collection .breadcrumb a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s;
}
.template-collection .breadcrumbs a:hover,
.template-collection .breadcrumb a:hover { color: #d4a843 !important; }
.template-collection .breadcrumbs .breadcrumb__separator,
.template-collection .breadcrumb__separator { color: rgba(255,255,255,0.3) !important; }
.template-collection .breadcrumbs span,
.template-collection .breadcrumb span:not(a):last-child { color: #d4a843 !important; font-weight: 700 !important; }

/* Description below the title — light translucent on dark hero */
.template-collection .collection__description,
.template-collection .rte.collection__description,
.template-collection .collection-hero__description,
.template-collection .section-header__description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  max-width: 600px;
  margin-top: 0 !important;
}

/* Filter sidebar — restyled to match the design */
.template-collection .collection-sidebar,
.template-collection .grid__item--sidebar {
  padding-top: 8px;
}
.template-collection .collection-filter,
.template-collection .collection-sidebar h2 {
  margin-bottom: 14px;
}
.template-collection .collection-sidebar h2,
.template-collection .collection-filter h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #0d0d0d !important;
  margin-bottom: 18px !important;
}
.template-collection .collection-filter__group,
.template-collection .filter-group {
  border-bottom: 1px solid #e4e4e4 !important;
  padding: 14px 0 !important;
}
.template-collection .collection-filter__group-toggle,
.template-collection .filter-group__title {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  padding-bottom: 10px !important;
}
.template-collection .collection-filter__item label,
.template-collection .filter-group__item label,
.template-collection .filter-group__item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #4a5468 !important;
  padding: 3px 0 !important;
  cursor: pointer;
  transition: color 0.2s;
}
.template-collection .collection-filter__item label:hover,
.template-collection .filter-group__item label:hover { color: #1b3bbb !important; }
.template-collection .collection-filter__item input[type="checkbox"],
.template-collection .filter-group__item input[type="checkbox"] {
  accent-color: #1b3bbb !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer;
}
.template-collection .collection-filter__count,
.template-collection .filter-group__count {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: #6b6b6b !important;
  font-weight: 500 !important;
}

/* Toolbar (product count + sort) */
.template-collection .collection__toolbar,
.template-collection .filters-toolbar,
.template-collection .filters-toolbar-wrapper {
  border-bottom: 1px solid #e4e4e4 !important;
  padding: 16px 0 !important;
  margin-bottom: 18px !important;
}
.template-collection .filters-toolbar__product-count,
.template-collection .product-count,
.template-collection .collection-results-count {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6b6b6b !important;
}

/* Sort dropdown — custom appearance */
.template-collection .filters-toolbar__input-wrapper select,
.template-collection select[id*="SortBy"],
.template-collection .collection-sort select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  border: 1.5px solid #e4e4e4 !important;
  padding: 9px 38px 9px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #0d0d0d !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230d0d0d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  transition: border-color 0.2s;
}
.template-collection .filters-toolbar__input-wrapper select:hover,
.template-collection select[id*="SortBy"]:hover {
  border-color: #0d0d0d !important;
}

/* Product card hover lift */
.template-collection .grid-product,
.template-collection .product-card {
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}
.template-collection .grid-product:hover,
.template-collection .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-color: #0d0d0d;
}

/* Sale badge — black/gold sharp corners */
.template-collection .grid-product__tag,
.template-collection .product-card__badge {
  background: #d9382a !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 4px 9px !important;
}

/* PERSONALIZED (and any other badge:* product tag) — royal blue */
.template-collection .grid-product__tag.iba-grid-badge,
.grid-product__tag.iba-grid-badge,
.iba-image-badge {
  background: #1b3bbb !important;
  color: #ffffff !important;
  border: none !important;
}

/* ============================================================
   FORCE IMPULSE COLLAPSIBLE FILTERS TO BE ALWAYS OPEN
   Impulse uses .collapsible-content--sidebar with inline
   style="height: 0px" + JS to animate. Override at the CSS level
   so every filter group expands by default.
   ============================================================ */
/* Scope force-open to FILTER collapsibles ONLY (--sidebar variant).
   Previously I targeted generic .collapsible-content which broke the mobile
   drawer (its sub-menus also use .collapsible-content and were all expanding). */
.template-collection .collection-sidebar .collapsible-content,
.template-collection .grid__item--sidebar .collapsible-content,
.template-collection .collapsible-content--sidebar,
.template-collection .filter-form .collapsible-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.template-collection .collection-sidebar .collapsible-trigger,
.template-collection .collection-sidebar .collapsible-trigger-btn,
.template-collection .collection-sidebar .tag-list__header,
.template-collection .grid__item--sidebar .collapsible-trigger,
.template-collection .grid__item--sidebar .collapsible-trigger-btn,
.template-collection .filter-form .collapsible-trigger {
  pointer-events: none;
}
.template-collection .collection-sidebar .collapsible-trigger .icon-chevron-down,
.template-collection .collection-sidebar .tag-list__header .icon-chevron-down,
.template-collection .grid__item--sidebar .collapsible-trigger .icon-chevron-down,
.template-collection .filter-form .collapsible-trigger svg {
  display: none !important;
}

/* ============================================================
   FORCE FILTER GROUPS TO RENDER AS LISTS (open)
   Even if Shopify Admin has them set to "Dropdown", CSS forces
   <details> elements open and reveals filter list contents.
   Note: native <select> dropdowns can't be converted via CSS —
   if these rules don't work, the filter is a real <select>.
   ============================================================ */
.template-collection .grid__item--sidebar details,
.template-collection .collection-sidebar details,
.template-collection .collection-filter details,
.template-collection .filter-group details,
.template-collection .filter-group {
  /* Visually open the disclosure */
}
.template-collection .grid__item--sidebar details > *:not(summary),
.template-collection .collection-sidebar details > *:not(summary),
.template-collection .collection-filter details > *:not(summary) {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.template-collection details[open] > *:not(summary),
.template-collection details:not([open]) > *:not(summary) {
  display: block !important;
}
/* Also force any explicit collapsed-state class to render */
.template-collection .filter-group--closed .filter-group__body,
.template-collection .collection-filter__group--closed .collection-filter__items,
.template-collection .collection-filter__items,
.template-collection .filter-group__body,
.template-collection .filter-group__list,
.template-collection .filter-group__content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
}
/* Hide any "view all" dropdown chevrons that would appear next to a closed dropdown */
.template-collection .collection-filter__dropdown-arrow,
.template-collection .filter-group__dropdown-arrow,
.template-collection .filter-group summary .icon-chevron-down,
.template-collection .filter-group summary .icon-caret {
  display: none !important;
}

/* ============================================================
   COLLECTION PAGE WHITE BENEFIT STRIP
   Replaces the beige Impulse block with a clean 4-icon white row.
   ============================================================ */
.cd-coll-benefit {
  background: #ffffff;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  padding: 18px 24px;
}
.cd-coll-benefit__inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.cd-coll-benefit__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d0d0d;
  white-space: nowrap;
}
.cd-coll-benefit__item svg {
  color: #1b3bbb;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cd-coll-benefit { padding: 14px 16px; }
  .cd-coll-benefit__inner { gap: 18px; }
  .cd-coll-benefit__item { font-size: 12px; }
}

/* Hide the beige Impulse "promo" / "footer-promotions" / trust block
   that was duplicating this content. Targets common selector patterns. */
.template-collection .footer-promotions,
.template-collection .shopify-section[id*="footer-promotions"],
.template-collection .promo-grid--collection,
body.template-collection .shopify-section--promo,
/* AI-generated announcement banner block (the actual beige strip on this site) */
.template-collection [class*="ai-announcement-banner"],
.template-collection [class*="ai_announcement_banner"],
.template-collection .ai-announcement-banner {
  display: none !important;
}

/* ============================================================
   DESIGN-EXACT ALIGNMENT — pixel values pulled from the Claude
   Design HTML so fonts + spacing match precisely.
   ============================================================ */

/* Hero — match .col-hero exactly */
.template-collection .collection-hero,
.template-collection .section-header--flush,
.template-collection .section-header.section-header--flush {
  padding: 50px 24px 40px !important;
}
/* Hero stat num — design uses 24px (I had 26px) */
.template-collection .cd-col-stat__num {
  font-size: 24px !important;
  letter-spacing: 0.02em !important;
}
/* Hero stat label */
.template-collection .cd-col-stat__lbl {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
}
/* Hero stats gap */
.template-collection .cd-col-stats { gap: 30px !important; }

/* FILTERS heading — design uses Bebas 22px (I had 26px) */
.template-collection .collection-sidebar::before,
.template-collection .grid__item--sidebar > form::before,
.template-collection .grid__item--sidebar > .filter-form::before,
.template-collection .collection-sidebar > h2,
.template-collection .grid__item--sidebar > h2,
.template-collection .collection-filter > h2 {
  font-size: 22px !important;
  letter-spacing: 0.06em !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

/* Filter group (.fgroup) — design has padding 14px 0 (not 16px) */
.template-collection .collection-filter__group,
.template-collection .filter-group,
.template-collection .collection-sidebar__group {
  padding: 14px 0 !important;
}

/* Filter group title (.fg-h) — Barlow 13px / 0.12em (not 14px / 0.18em) */
.template-collection .collection-filter__group-toggle,
.template-collection .filter-group__title,
.template-collection .collection-sidebar .collapsible-trigger,
.template-collection .collection-sidebar .collapsible-trigger-btn,
.template-collection .collection-sidebar [class*="tag-list__header"],
.template-collection .grid__item--sidebar .collapsible-trigger,
.template-collection .grid__item--sidebar .collapsible-trigger-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

/* Filter option (.fopt) — 13px / weight 400 / padding 3px 0 */
.template-collection .collection-filter__item label,
.template-collection .filter-group__item label,
.template-collection .filter-group__list label,
.template-collection .collection-filter__item,
.template-collection .filter-group__item {
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 3px 0 !important;
}

/* Filter count (.fopt-count) — Barlow 12px (not 13px) */
.template-collection .collection-filter__count,
.template-collection .filter-group__count,
.template-collection .filter-group__item-count,
.template-collection .collection-sidebar .tag-list__count,
.template-collection .collection-sidebar [class*="tag-list__count"],
.template-collection .grid__item--sidebar [class*="tag-list__count"] {
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Product card name (.pname) — 13px / 500 / min-height 36px / 2-line clamp */
.template-collection .grid-product__title,
.template-collection .product-card__title,
.template-collection .card__heading,
.template-collection .card__heading a {
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 36px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Product card price (.pprice) — Bebas big & bold for collection grid readability */
.template-collection .grid-product__price,
.template-collection .product-card__price,
.template-collection .price,
.template-collection .price__regular .price-item--regular {
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Product card compare-at price */
.template-collection .price__compare,
.template-collection .price-item--regular.price--compare,
.template-collection .grid-product__price--original {
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Product grid — 4 columns / 12px gap (design exact) */
.template-collection .grid-product,
.template-collection .pgrid {
  /* Impulse uses its own .grid system, so don't force grid-template-columns
     globally — but set the gap to match design where it does apply. */
}
.template-collection .grid--uniform .grid__item,
.template-collection .product-grid .grid__item {
  padding-left: 6px !important;
  padding-right: 6px !important;
  margin-bottom: 12px !important;
}

/* About section (.col-desc-sec) — 50px 24px / bg2 / 1px border-top */
.cd-col-about {
  padding: 50px 24px !important;
}
.cd-col-about__title {
  font-size: 36px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 16px !important;
}
.cd-col-about__desc {
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
  max-width: 780px;
}
.cd-col-about__cards {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 30px !important;
}
.cd-col-about__card {
  padding: 20px !important;
}

/* Sub-category pill bar — design uses .subcat-bar at 18px 24px,
   each pill at 8px 16px with .1em letter-spacing */
.template-collection .chain-tabs-wrap {
  padding: 18px 0 !important;
}
.template-collection .chain-tab,
.template-collection .chain-tab.grid {
  padding: 8px 16px !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}

/* Force the sidebar to design's 240px width on desktop so the proportions match.
   Impulse defaults to one-fifth (20%) which is too wide on most screens. */
@media (min-width: 990px) {
  .template-collection .grid__item--sidebar,
  .template-collection .grid__item.grid__item--sidebar {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    width: 240px !important;
  }
  .template-collection .grid__item--content,
  .template-collection .grid__item.grid__item--content {
    flex: 1 1 auto !important;
    max-width: calc(100% - 240px - 30px) !important;
  }
}

/* Inject a "FILTERS" heading above the first filter group via CSS pseudo —
   Impulse doesn't render one by default. */
.template-collection .collection-sidebar::before,
.template-collection .grid__item--sidebar > form::before,
.template-collection .grid__item--sidebar > .filter-form::before {
  content: 'Filters';
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d0d0d;
  padding: 0 0 14px;
  margin: 0 0 18px;
  border-bottom: 2px solid #0d0d0d;
}

/* Force Claude Design fonts on the filter sidebar — Impulse classes can be
   inconsistent, so this is a catch-all that overrides any inherited serif. */
.template-collection .collection-sidebar,
.template-collection .collection-sidebar *,
.template-collection .grid__item--sidebar,
.template-collection .grid__item--sidebar * {
  font-family: 'DM Sans', Helvetica, sans-serif !important;
}
.template-collection .collection-sidebar > h2,
.template-collection .collection-sidebar h2:first-child,
.template-collection .grid__item--sidebar > h2,
.template-collection .grid__item--sidebar h2:first-child {
  font-family: 'Bebas Neue', sans-serif !important;
}
.template-collection .collection-sidebar .collapsible-trigger,
.template-collection .collection-sidebar .collapsible-trigger-btn,
.template-collection .collection-sidebar [class*="tag-list__header"],
.template-collection .grid__item--sidebar .collapsible-trigger,
.template-collection .grid__item--sidebar .collapsible-trigger-btn,
.template-collection .grid__item--sidebar [class*="tag-list__header"],
.template-collection .collection-filter__group-toggle,
.template-collection .filter-group__title {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: #0d0d0d !important;
}
.template-collection .collection-sidebar .tag-list__label,
.template-collection .collection-sidebar [class*="tag-list__count"],
.template-collection .collection-sidebar .tag__count,
.template-collection .grid__item--sidebar [class*="tag-list__count"] {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #6b6b6b !important;
}

/* ============================================================
   CHAIN-TABS / PENDANT-TABS as text-only pill bar
   (hides the icon circles, restyles to match design)
   ============================================================ */
/* Hide the OLD chain-tabs that render inside the content cell — the new
   .cd-subcat-bar variants now render above .grid in main-collection.liquid. */
.template-collection .grid__item--content .chain-tabs-wrap:not(.cd-subcat-bar) {
  display: none !important;
}

.template-collection .chain-tabs-wrap.cd-subcat-bar,
.template-collection .chain-tabs-wrap.cd-subcat-bar.pendants-tabs,
.template-collection .chain-tabs-wrap.cd-subcat-bar.pendants-tabs.womens-pendants-tabs {
  background: #f6f6f6 !important;
  border-bottom: 1px solid #e4e4e4 !important;
  margin: 0 0 20px !important;
  padding: 18px 24px !important;
  width: auto !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}
.template-collection .chain-tabs-wrap::-webkit-scrollbar {
  display: none;
}
/* Hide the "Shop by style" label — design has a clean pill row only */
.template-collection .chain-tabs-label {
  display: none !important;
}
.template-collection .chain-tabs,
.template-collection .chain-tabs.grid-style {
  display: flex !important;
  flex-wrap: wrap !important; /* wrap so nothing gets cut off */
  gap: 8px !important;
  max-width: 1500px;
  margin: 0 auto !important; /* centered */
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important; /* center pills horizontally */
  overflow: visible !important;
}
.template-collection .chain-tabs::-webkit-scrollbar,
.template-collection .chain-tabs.grid-style::-webkit-scrollbar { display: none; }

/* The individual tab — convert icon+text card to a flat text pill */
.template-collection .chain-tab,
.template-collection .chain-tab.grid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #e4e4e4 !important;
  border-radius: 0 !important;
  color: #0d0d0d !important;
  cursor: pointer;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
  min-width: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}
.template-collection .chain-tab:hover,
.template-collection .chain-tab.grid:hover {
  border-color: #0d0d0d !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
}
.template-collection .chain-tab.is-active,
.template-collection .chain-tab.grid.is-active {
  background: #1b3bbb !important;
  color: #ffffff !important;
  border-color: #1b3bbb !important;
}

/* Hide the icon circles entirely */
.template-collection .chain-tab .chain-icon,
.template-collection .chain-tab.grid .chain-icon,
.template-collection .chain-tab img,
.template-collection .chain-icon img {
  display: none !important;
}

/* Label inherits the new pill typography */
.template-collection .chain-label {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .template-collection .chain-tabs-wrap,
  .template-collection .chain-tabs-wrap.pendants-tabs,
  .template-collection .chain-tabs-wrap.pendants-tabs.womens-pendants-tabs {
    padding: 14px 16px !important;
  }
  .template-collection .chain-tab,
  .template-collection .chain-tab.grid {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   FILTER SIDEBAR — refined to match design (FILTERS title with
   thick underline, KARAT/STYLE/WIDTH group titles with chevrons,
   checkbox list with right-aligned counts).
   ============================================================ */
.template-collection .collection-sidebar,
.template-collection .grid__item--sidebar {
  padding-top: 8px;
}

/* Big "FILTERS" title with thick underline */
.template-collection .collection-sidebar > h2,
.template-collection .collection-filter > h2,
.template-collection .collection-sidebar h2:first-child,
.template-collection .filters-toolbar > h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  padding: 0 0 14px !important;
  margin: 0 0 18px !important;
  border-bottom: 2px solid #0d0d0d !important;
  display: block !important;
}

/* Filter groups (KARAT, STYLE, WIDTH) */
.template-collection .collection-filter__group,
.template-collection .filter-group {
  border-bottom: 1px solid #e4e4e4 !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.template-collection .collection-filter__group:first-of-type,
.template-collection .filter-group:first-of-type {
  padding-top: 0 !important;
}
.template-collection .collection-filter__group:last-of-type,
.template-collection .filter-group:last-of-type {
  border-bottom: none !important;
}

/* Group title — Barlow Condensed uppercase, with a chevron on the right */
.template-collection .collection-filter__group-toggle,
.template-collection .filter-group__title,
.template-collection .collection-filter__group > summary,
.template-collection .filter-group > summary {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  width: 100%;
  list-style: none;
}
.template-collection .collection-filter__group-toggle::after,
.template-collection .filter-group__title::after,
.template-collection .filter-group > summary::after,
.template-collection .collection-filter__group > summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid #0d0d0d;
  border-bottom: 2px solid #0d0d0d;
  transform: rotate(45deg);
  margin-left: 12px;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}
.template-collection .collection-filter__group--closed .collection-filter__group-toggle::after,
.template-collection .filter-group--closed .filter-group__title::after,
.template-collection details:not([open]) > summary::after {
  transform: rotate(-45deg);
  margin-bottom: 0;
  margin-top: 4px;
}
/* Hide native disclosure arrow on <summary> */
.template-collection .collection-filter__group > summary::-webkit-details-marker,
.template-collection .filter-group > summary::-webkit-details-marker {
  display: none;
}

/* Filter option rows — checkbox + label + count */
.template-collection .collection-filter__item,
.template-collection .filter-group__item,
.template-collection .filter-group__list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none;
}
.template-collection .collection-filter__item label,
.template-collection .filter-group__item label,
.template-collection .filter-group__list label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0d0d0d !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.template-collection .collection-filter__item label:hover,
.template-collection .filter-group__item label:hover { color: #1b3bbb !important; }

/* Checkbox — square, larger, blue accent */
.template-collection .collection-filter__item input[type="checkbox"],
.template-collection .filter-group__item input[type="checkbox"],
.template-collection .filter-group__list input[type="checkbox"],
.template-collection input[type="checkbox"].filter-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #0d0d0d !important;
  background: #ffffff !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  transition: background 0.15s, border-color 0.15s;
}
.template-collection .collection-filter__item input[type="checkbox"]:hover,
.template-collection .filter-group__item input[type="checkbox"]:hover {
  border-color: #1b3bbb !important;
}
.template-collection .collection-filter__item input[type="checkbox"]:checked,
.template-collection .filter-group__item input[type="checkbox"]:checked {
  background: #1b3bbb !important;
  border-color: #1b3bbb !important;
}
.template-collection .collection-filter__item input[type="checkbox"]:checked::after,
.template-collection .filter-group__item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

/* Count badge on the right of each option */
.template-collection .collection-filter__count,
.template-collection .filter-group__count,
.template-collection .filter-group__item-count {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b6b6b !important;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* "Clear filters" / "Reset all" link */
.template-collection .collection-filter__clear,
.template-collection .filter-group__clear,
.template-collection .filters-toolbar__clear,
.template-collection .filter-group__reset {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1b3bbb !important;
  border-bottom: 1px solid rgba(27, 59, 187, 0.3);
  padding-bottom: 2px;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(27, 59, 187, 0.3) !important;
  cursor: pointer;
}

/* Mobile — stack sidebar above grid */
@media (max-width: 900px) {
  .template-collection .grid__item--sidebar {
    padding: 0 16px 16px;
  }
  .template-collection .collection-hero,
  .template-collection .section-header--flush {
    padding: 36px 16px 28px !important;
  }
  .template-collection .section-header__title,
  .template-collection .collection-hero__title {
    font-size: clamp(34px, 9vw, 56px) !important;
  }
}

/* ============================================================
   COLLECTION ABOUT BLOCK — renders below the product grid
   when collection.description is set. Pulls title + description
   then appends 3 educational cards (Authentic / Karat / Diamonds).
   ============================================================ */
.cd-col-about {
  background: #f6f6f6;
  padding: 56px 24px;
  border-top: 1px solid #e4e4e4;
}
.cd-col-about__inner {
  max-width: 1500px;
  margin: 0 auto;
}
.cd-col-about__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: #0d0d0d;
  margin: 0 0 18px;
}
.cd-col-about__title span {
  color: #1b3bbb;
}
.cd-col-about__desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: #4a5468;
  line-height: 1.75;
  max-width: 900px;
  margin: 0 0 26px;
}
.cd-col-about__desc strong { color: #0d0d0d; font-weight: 600; }
.cd-col-about__desc em {
  display: block;
  color: #6b6b6b;
  font-style: italic;
  font-size: 14px;
  margin-top: 14px;
}
.cd-col-about__desc a {
  color: #1b3bbb;
  border-bottom: 1px solid rgba(27, 59, 187, 0.3);
}
.cd-col-about__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.cd-col-about__card {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  padding: 24px 22px;
}
.cd-col-about__card-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0d0d0d;
  margin: 0 0 10px;
  line-height: 1.1;
}
.cd-col-about__card-h span {
  color: #1b3bbb;
}
.cd-col-about__card-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: #6b6b6b;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .cd-col-about { padding: 36px 16px; }
  .cd-col-about__cards { grid-template-columns: 1fr; }
}

/* Filter sidebar */
.template-collection .collection-filter,
.template-collection .filters-toolbar {
  background: #ffffff;
  border: none;
}
.template-collection .collection-filter__group-toggle,
.template-collection .filter-group__title {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
}
.template-collection .collection-filter__item,
.template-collection .filter-group__item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #4a5468 !important;
}

/* Sort dropdown + product count toolbar */
.template-collection .collection__toolbar,
.template-collection .filters-toolbar {
  border-bottom: 1px solid #e4e4e4;
  padding: 14px 0;
}
.template-collection .filters-toolbar__product-count,
.template-collection .product-count {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6b6b6b !important;
}

/* Product grid cards — match homepage Bebas price + DM Sans name */
.template-collection .grid-product__title,
.template-collection .product-card__title,
.template-collection .card__heading,
.template-collection .card__heading a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0d0d0d !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}
.template-collection .grid-product__price,
.template-collection .product-card__price,
.template-collection .price,
.template-collection .price__regular .price-item--regular,
.template-collection a.grid-product__link .grid-product__price,
.template-collection a.grid-product__link .grid-product__price *,
.template-collection .grid-product__price .money,
.template-collection a.grid-product__link .grid-product__price--sale {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: #0d0d0d !important;
}
/* Compare-at (strikethrough) price needs to stay smaller */
.template-collection a.grid-product__link .grid-product__price--original {
  font-size: 14px !important;
  color: #767676 !important;
}
.template-collection .price-item--sale {
  color: #d9382a !important;
}
.template-collection .price__compare,
.template-collection .price-item--regular.price--compare {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #767676 !important;
  text-decoration: line-through !important;
}

/* Pagination */
.template-collection .pagination,
.template-collection .pagination-wrapper {
  padding: 32px 0;
  text-align: center;
}
.template-collection .pagination__item,
.template-collection .pagination a {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.template-collection .pagination__item--current {
  color: #1b3bbb !important;
}

/* "Shop by style" chain-tabs at top of collection — refine spacing */
.template-collection .chain-tabs-wrap {
  padding: 12px 0 4px;
}
.template-collection .chain-tabs-label {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #1b3bbb !important;
}
.template-collection .chain-tab.is-active {
  outline: 2px solid #1b3bbb;
  outline-offset: 2px;
}

/* ============================================================
   MOBILE PATCH PASS — addresses items found in pre-launch audit
   Applied at end so it wins specificity battles cleanly.
   ============================================================ */

/* 1) Mobile blue nav strip — KEEP visible on mobile (user preference).
      Confirmed showing BEST SELLERS / CHAINS / RINGS / PENDANTS row
      below the logo on phones, which we want to preserve. */
@media (max-width: 768px) {
  .cd-nav-band {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cd-nav-band::-webkit-scrollbar { display: none; }
}

/* 2) Footer Affirm/Shop Pay disclosure — tighten padding on narrow phones
      so the legal text doesn't get cramped against the edge. */
@media (max-width: 480px) {
  .footer__financing-disclosures {
    padding: 12px 10px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* 3) Hero tag eyebrow on collection pages — let it wrap cleanly
      instead of overflowing on very narrow phones. */
@media (max-width: 480px) {
  .cd-col-tag {
    font-size: 10px !important;
    padding: 5px 10px !important;
    letter-spacing: 0.12em !important;
  }
}

/* 4) Chain tabs row on collection pages — ensure horizontal scroll
      works smoothly on mobile without cutting off the last pill. */
@media (max-width: 768px) {
  .template-collection .chain-tabs.grid-style {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .template-collection .chain-tabs.grid-style::-webkit-scrollbar { display: none; }
  .template-collection .chain-tab.grid {
    flex: 0 0 auto;
  }
}

/* 5) Best-Sellers / Diamonds / Women's sliders — ensure first card
      isn't cut off behind viewport edge on mobile. */
@media (max-width: 640px) {
  .ib-slider {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 6) Toolbar — on phones, ensure it doesn't horizontally scroll.
      Wrap items cleanly. */
@media (max-width: 480px) {
  .toolbar__content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px !important;
    padding: 6px 0 !important;
  }
  .toolbar__item--cd-util,
  .toolbar__item--cd-shipping {
    width: 100%;
    text-align: center;
    margin-right: 0 !important;
  }
  .cd-util__shipping {
    font-size: 11px !important;
  }
}

/* 7) Product card titles on collection grid — ensure they don't
      get truncated to weird widows on narrow phones. */
@media (max-width: 480px) {
  .template-collection .grid-product__title {
    font-size: 12px !important;
    min-height: 32px !important;
  }
}

/* 8) Shop By Price card padding on the smallest phones —
      prevent the 'Most Popular' eyebrow from butting against the edge. */
@media (max-width: 360px) {
  .cd-pricetier {
    padding: 14px 14px 12px !important;
  }
  .cd-pricetier__amt { font-size: 20px !important; }
}


/* ============================================================
   CRITICAL MOBILE FIX — BNPL ticker + Gold Sale promo
   These were previously wrapped inside @media (min-width: 769px)
   which left them completely unstyled on mobile, causing the
   payment logos to render at their natural (huge) image sizes.
   ============================================================ */
@media (max-width: 768px) {
  /* Ticker container — same dark bar, shorter on mobile */
  .ib-ticker {
    background: #080c14;
    border-bottom: 0.5px solid #1e2a4a;
    overflow: hidden;
    height: 36px;
    display: flex;
    align-items: center;
    cursor: default;
    text-decoration: none;
  }
  .ib-ticker__track {
    display: inline-flex;
    align-items: center;
    animation: ibScroll 28s linear infinite;
    will-change: transform;
    white-space: nowrap;
  }
  .ib-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
  }
  .ib-ticker__item strong { color: #ffffff; font-weight: 600; }
  .ib-ticker__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    flex-shrink: 0;
  }
  .ib-ticker__logo img {
    height: 100% !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain;
    display: block;
  }
  .ib-ticker__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1a4fd6;
    flex-shrink: 0;
  }

  /* Gold Sale promo bar — black background with gold accents */
  .ib-promo {
    background: #0a0a0a;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    overflow: hidden;
    padding: 8px 12px;
    text-align: center;
  }
  .ib-promo__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.04em;
  }
  .ib-promo__diamond {
    width: 5px;
    height: 5px;
    background: #d4a843;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .ib-promo__badge {
    background: #d4a843;
    color: #0a0a0a;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .ib-promo__text {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .ib-promo__text strong {
    color: #fde882;
    font-weight: 700;
  }

  /* Ensure the scroll animation keyframes exist (in case the desktop
     block defining them isn't reached on mobile parsing — defensive). */
  @keyframes ibScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* ============================================================
   MOBILE DRAWER MENU — fix invisible chevron arrows
   The chevron SVG ships with stroke="#000" which is invisible
   against the dark drawer background. Force white stroke.
   ============================================================ */
@media (max-width: 768px) {
  .mobile-nav .icon-chevron-down,
  .mobile-nav .icon-chevron-down path,
  .mobile-nav__toggle svg,
  .mobile-nav__toggle svg path,
  .mobile-nav__toggle .icon-chevron-down,
  .mobile-nav__toggle .icon-chevron-down path {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
  }
  /* Remove the white button-background that was making the icon area
     look like an empty box. */
  .mobile-nav__toggle,
  .mobile-nav__toggle .faux-button,
  .mobile-nav__toggle .collapsible-trigger {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  /* Smaller, less obtrusive expand button */
  .mobile-nav__toggle .icon-chevron-down {
    width: 14px;
    height: 9px;
  }
}

/* ============================================================
   PRODUCT SLIDER — visible swipe hint on mobile
   Adds a subtle scroll indicator line below each .ib-slider so
   shoppers know they can swipe for more products.
   ============================================================ */
@media (max-width: 900px) {
  .ib-section { position: relative; }
  /* Show a small scrollbar-like indicator under the slider */
  .ib-slider {
    scrollbar-width: thin;
    scrollbar-color: rgba(13,13,13,0.35) rgba(13,13,13,0.08);
  }
  .ib-slider::-webkit-scrollbar {
    display: block !important;
    height: 3px;
    background: rgba(13,13,13,0.08);
  }
  .ib-slider::-webkit-scrollbar-thumb {
    background: rgba(13,13,13,0.35);
    border-radius: 3px;
  }
  /* "Swipe →" hint next to each section's "View all" link */
  .ib-section__header .ib-section__viewall::after {
    content: '';
  }
  /* Swipe hint moved BELOW the product slider rather than in the header.
     Uses :has(.ib-slider) so it only appears on sections that actually
     contain a horizontal slider (Best Sellers, Diamond Jewelry, Women's). */
  .ib-section__header::after {
    content: none;
  }
  .ib-section:has(.ib-slider)::after {
    content: '← SWIPE FOR MORE →';
    display: block;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #1b3bbb;
    margin-top: 14px;
    text-align: center;
    width: 100%;
  }
}

/* ============================================================
   MOBILE — FLUSH SECTIONS on collection pages
   Desktop had these rules at lines 285-329 inside @media (min-width: 769px).
   Mirror them for mobile so the BNPL ticker → Gold Sale → header →
   collection hero → benefit strip → chain tabs sit flush with no gaps.
   ============================================================ */
@media (max-width: 768px) {
  /* Zero out wrapper margins/padding around every announcement & header bar */
  body.template-collection .shopify-section,
  body.template-collection .shopify-section[id*="collection-header"],
  body.template-collection .shopify-section[id*="template-"][id*="collection"],
  body.template-collection .shopify-section[id*="footer-promotions"],
  body.template-collection .shopify-section[id*="newsletter"],
  body.template-collection .shopify-section[id*="apps"]:not([id*="header"]) {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The bars themselves shouldn't have any top/bottom margin */
  .ib-ticker,
  .ib-promo,
  .template-collection .collection-hero,
  .template-collection .section-header--flush,
  .template-collection .section-header.section-header--flush,
  .cd-coll-benefit,
  .template-collection .chain-tabs-wrap.cd-subcat-bar,
  .template-collection .chain-tabs-wrap {
    margin: 0 !important;
  }

  /* Collection-header shopify-section wrapper — sometimes Shopify adds
     padding here in the customizer that creates the gap before the hero. */
  .template-collection .shopify-section[id*="collection-header"] {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The chain-tabs row directly under the benefit strip */
  .template-collection .chain-tabs-wrap.cd-subcat-bar,
  .template-collection .chain-tabs-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Page-width container above the grid — kill its top padding so the
     filter sidebar/grid sits directly under the chain tabs. */
  .template-collection .collection-content,
  .template-collection .collection-content .page-width {
    margin: 0 !important;
    padding-top: 0 !important;
  }
  .template-collection .collection-content .page-width > .grid {
    margin-top: 16px !important;
  }

  /* Belt-and-suspenders: kill the top spacing on the very first content
     section after the header on every page type. */
  body.template-collection .main-content > .shopify-section:first-child,
  body.template-collection #MainContent > .shopify-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================================
   TEPO PRODUCT OPTIONS — restyled to match ICEbyAK product page
   The Tepo app injects custom fields like "Ring Size" via the
   .tcustomizer-field wrapper. Restyle to match our existing
   variant picker (.ib-sz buttons) so they feel native.
   ============================================================ */

/* Container — space it like the variant picker */
.tcustomizer-field,
.tcustomizer-wrap,
.qikify-customize-product,
.qikify-product-options {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* The field label ("RING SIZE *", "NAME *", etc.) */
.tcustomizer-field label,
.tcustomizer-field-label,
.tcustomizer-field .field-label,
.qikify-option-label,
.qikify-field-label {
  display: block !important;
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

/* Required asterisk — subtle gold instead of harsh red */
.tcustomizer-field .required,
.tcustomizer-field-required,
.tcustomizer-field label .required-marker,
.tcustomizer-field label [aria-label="required"],
.qikify-required {
  color: #d4a843 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* Dropdown / select trigger — match our buttons (rounded 8px, light border) */
.tcustomizer-field select,
.tcustomizer-field input[type="text"],
.tcustomizer-field input[type="email"],
.tcustomizer-field input[type="number"],
.tcustomizer-field .tcustomizer-dropdown,
.tcustomizer-field .tcustomizer-select,
.tcustomizer-field .tcustomizer-select__trigger,
.qikify-select,
.qikify-option-select {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}

/* Placeholder text ("Select Ring Size") — muted gray */
.tcustomizer-field select:invalid,
.tcustomizer-field .tcustomizer-select__placeholder,
.tcustomizer-field input::placeholder {
  color: #9ca3af !important;
}

/* Hover state — subtle border darken */
.tcustomizer-field select:hover,
.tcustomizer-field input:hover,
.tcustomizer-field .tcustomizer-dropdown:hover,
.tcustomizer-field .tcustomizer-select:hover,
.tcustomizer-field .tcustomizer-select__trigger:hover {
  border-color: #0d0d0d !important;
}

/* Focus state — royal blue ring */
.tcustomizer-field select:focus,
.tcustomizer-field select:focus-visible,
.tcustomizer-field input:focus,
.tcustomizer-field input:focus-visible,
.tcustomizer-field .tcustomizer-dropdown:focus,
.tcustomizer-field .tcustomizer-select:focus,
.tcustomizer-field .tcustomizer-select__trigger:focus,
.tcustomizer-field .tcustomizer-select.is-open {
  border-color: #1b3bbb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(27, 59, 187, 0.15) !important;
}

/* Dropdown options list — clean white panel with subtle shadow */
.tcustomizer-field ul,
.tcustomizer-field [role="listbox"],
.tcustomizer-field .tcustomizer-select__options,
.tcustomizer-field .tcustomizer-dropdown__options,
.tcustomizer-field .tcustomizer-option-list {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  padding: 4px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Individual options */
.tcustomizer-field li,
.tcustomizer-field [role="option"],
.tcustomizer-field .tcustomizer-option,
.tcustomizer-field .tcustomizer-value {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
}

/* Option hover */
.tcustomizer-field li:hover,
.tcustomizer-field [role="option"]:hover,
.tcustomizer-field .tcustomizer-option:hover,
.tcustomizer-field .tcustomizer-value:hover {
  background: #f6f6f6 !important;
}

/* Selected option — royal blue */
.tcustomizer-field li[aria-selected="true"],
.tcustomizer-field [role="option"][aria-selected="true"],
.tcustomizer-field .tcustomizer-option.is-selected,
.tcustomizer-field .tcustomizer-value.is-selected {
  background: #1b3bbb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* If Tepo renders fee/price next to option, mute it */
.tcustomizer-field .tcustomizer-option-price,
.tcustomizer-field .option-price {
  color: rgba(13, 13, 13, 0.55) !important;
  font-weight: 400 !important;
  margin-left: auto !important;
  font-size: 13px !important;
}

/* Text inputs for personalization (custom name engraving etc.) — same treatment */
.tcustomizer-field textarea,
.qikify-textarea {
  width: 100% !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  resize: vertical !important;
}
.tcustomizer-field textarea:focus,
.qikify-textarea:focus {
  border-color: #1b3bbb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(27, 59, 187, 0.15) !important;
}

/* Helper / hint text under a field */
.tcustomizer-field .field-hint,
.tcustomizer-field .tcustomizer-help,
.tcustomizer-field small,
.qikify-field-description {
  display: block !important;
  font-size: 12px !important;
  color: rgba(13, 13, 13, 0.55) !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* Error state — red border + helper text */
.tcustomizer-field.is-error select,
.tcustomizer-field.is-error input,
.tcustomizer-field.is-error textarea,
.tcustomizer-field.is-error .tcustomizer-select__trigger {
  border-color: #d9382a !important;
  box-shadow: 0 0 0 3px rgba(217, 56, 42, 0.12) !important;
}
.tcustomizer-field .error-message,
.tcustomizer-field .tcustomizer-error {
  color: #d9382a !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

/* Mobile tightening */
@media (max-width: 768px) {
  .tcustomizer-field {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
  .tcustomizer-field select,
  .tcustomizer-field .tcustomizer-select__trigger {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* ============================================================
   TEPO — corrected class names (double underscore variants).
   The previous block used .tcustomizer-dropdown (single dash);
   live HTML actually uses .tcustomizer__dropdown (double underscore).
   These rules will only take effect AFTER the inline styles Tepo
   injects via JS are stripped — see the script in
   iicebyak-product-main.liquid that runs on product pages.
   ============================================================ */

/* Widget root — strip the heavy border/shadow Tepo applies inline */
.tcustomizer-product-form.tcustomizer-widget {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Field wrapper */
.tcustomizer-field {
  margin: 18px 0 !important;
  padding: 0 !important;
}

/* Field label ("RING SIZE *") */
.tcustomizer-field .tcustomizer-field__heading,
.tcustomizer-field__heading {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #0d0d0d !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
}
/* Required marker */
.tcustomizer-field .tcustomizer-field__required,
.tcustomizer-field__heading .required {
  color: #d4a843 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* Dropdown container — force full-width, not Tepo's 280px */
.tcustomizer-field .tcustomizer__dropdown,
.tcustomizer__dropdown {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

.tcustomizer__dropdown__main-content,
.tcustomizer-field .tcustomizer__dropdown__main-content {
  width: 100% !important;
}

/* Dropdown trigger button — this is the box with "Select Ring Size" */
.tcustomizer__dropdown-button,
.tcustomizer__dropdown-select,
.tcustomizer__dropdown-button.tcustomizer__dropdown-select {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

.tcustomizer__dropdown-button:hover {
  border-color: #0d0d0d !important;
}

.tcustomizer__dropdown-button:focus,
.tcustomizer__dropdown-button:focus-visible,
.tcustomizer__dropdown.is-open .tcustomizer__dropdown-button {
  border-color: #1b3bbb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(27, 59, 187, 0.15) !important;
}

/* Placeholder span ("Select Ring Size") */
.tcustomizer__dropdown-button span,
.tcustomizer__dropdown-button .placeholder {
  color: #9ca3af !important;
  font-weight: 500 !important;
}

/* Once an option is selected, the span fills with actual text */
.tcustomizer__dropdown-button.has-value span {
  color: #0d0d0d !important;
}

/* Dropdown options panel */
.tcustomizer__dropdown-list,
.tcustomizer__dropdown-list.active,
.tcustomizer__dropdown-list.display-bottom {
  width: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  padding: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: absolute !important;
  max-height: 260px !important;
  z-index: 50 !important;
}

/* Individual options inside list */
.tcustomizer__dropdown-list-item,
.tcustomizer__dropdown-list-item-content,
.tcustomizer__dropdown-list > div,
.tcustomizer__dropdown-list [role="option"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.tcustomizer__dropdown-list-item:hover,
.tcustomizer__dropdown-list > div:hover,
.tcustomizer__dropdown-list [role="option"]:hover {
  background: #f6f6f6 !important;
}

.tcustomizer__dropdown-list-item.is-selected,
.tcustomizer__dropdown-list-item[aria-selected="true"],
.tcustomizer__dropdown-list > div.is-selected,
.tcustomizer__dropdown-list [role="option"][aria-selected="true"] {
  background: #1b3bbb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Mobile sizing */
@media (max-width: 768px) {
  .tcustomizer-field { margin: 14px 0 !important; }
  .tcustomizer__dropdown-button {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}