/* Settings Variables */
    .ed_breadcrumbs-section#ed_section-collection__om_breadcrumbs {
      --breadcrumbs-alignment: start;
      --breadcrumbs-text-color: #000;
      --breadcrumbs-font-size: 14px;
      --breadcrumbs-font-case: default;
      --breadcrumbs-font-weight: normal;
      --padding-left: 40px;
      --padding-right: 20px;
      --padding-top: 20px;
      --padding-bottom: 0px;
      --padding-left-mobile: 18px;
      --padding-right-mobile: 20px;
      --padding-top-mobile: 20px;
      --padding-bottom-mobile: 12px;
      --max-width: none;
      
    }

    /* Section */
    .ed_breadcrumbs-section {
      padding-top: var(--padding-top);
      padding-bottom: var(--padding-bottom);
      padding-left: var(--padding-left);
      padding-right: var(--padding-right);
      color: var(--breadcrumbs-text-color);
    }
    .ed_breadcrumbs-section * {
      color: var(--breadcrumbs-text-color);
    }

    @media (max-width: 767px) {
      .ed_breadcrumbs-section {
        padding-left: var(--padding-left-mobile);
        padding-right: var(--padding-right-mobile);
        padding-top: var(--padding-top-mobile);
        padding-bottom: var(--padding-bottom-mobile);
      }
    }

    /* Nav */
    nav.ed_breadcrumbs {
      margin: 0 auto;
      max-width: var(--max-width);
    }

    /* List items */
    .ed_breadcrumbs-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: var(--breadcrumbs-alignment);
    }
    .ed_breadcrumbs-list li {
      display: inline-flex;
      align-items: center;
    }

    /* Arrows */
    .ed_breadcrumbs-list.arrows li:not(:last-child):after {
      border-style: solid;
      border-width: .10em .10em 0 0;
      content: '';
      display: inline-block;
      height: .4em;
      width: .4em;
      margin: 0 .4em;
      position: relative;
      transform: rotate(45deg);
      vertical-align: middle;
      font-size: calc(var(--breadcrumbs-font-size) + 2px);
      /* top: -0.1em; */
    }
    [dir="rtl"] .ed_breadcrumbs-list.arrows li:not(:last-child):after {
      transform: rotate(220deg);
    }

    .ed_breadcrumbs-list.slashes li:not(:last-child):after {
      content: '/';
      margin: 0 .4em;
      font-size: var(--breadcrumbs-font-size);
    }

    /* Links */
    .ed_breadcrumbs-list a,
    .ed_breadcrumbs-list [aria-current="page"] {
      color: inherit;
      text-decoration: none;
      font-size: var(--breadcrumbs-font-size);
      font-weight: var(--breadcrumbs-font-weight);
      text-transform: var(--breadcrumbs-font-case);
    }
    .ed_breadcrumbs-list a:hover,
    .ed_breadcrumbs-list a:focus {
      text-decoration: underline;
    }

.collection-filter__item--count {
    text-align: left;
  }
  html[dir="rtl"] .collection-filter__item--count {
    text-align: right;
  }

@media screen and (min-width: 769px) {
    .collection-filter__item--drawer {
      display: none;
    }
    .collection-filter__item--count {
      text-align: left;
    }
    html[dir='rtl'] .collection-filter__item--count {
      text-align: right;
    }
  }

/* Tighten this section's spacing to the collection above/below (overrides the global
     .index-section 60px rhythm for this section only; inner padding set via section settings). */
  #shopify-section-collection__trust_signals.index-section {
    margin-top: 8px;
    margin-bottom: 20px;
  }

  .trust-signals-collection__trust_signals {
    padding: 12px 0 12px;
    background: #ffffff;
  }

  .trust-signals-collection__trust_signals .trust-heading {
    text-align: center;
    margin-bottom: 10px;
  }

  .trust-signals-collection__trust_signals .trust-subheading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
    color: #4a4a4a;
    opacity: 0.85;
  }

  .trust-signals-collection__trust_signals .trust-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }

  .trust-signals-collection__trust_signals .trust-item {
    text-align: center;
    padding: 18px 12px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: #ffffff;
    height: 100%;
  }

  .trust-signals-collection__trust_signals .trust-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
  }

  .trust-signals-collection__trust_signals .trust-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 7px;
    color: #111111;
  }

  .trust-signals-collection__trust_signals .trust-text {
    font-size: 13px;
    line-height: 1.35;
    color: #4a4a4a;
    margin: 0;
  }

  @media only screen and (max-width: 1180px) {
    .trust-signals-collection__trust_signals .trust-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media only screen and (max-width: 768px) {
    .trust-signals-collection__trust_signals {
      padding: 24px 0 24px;
    }

    .trust-signals-collection__trust_signals .trust-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .trust-signals-collection__trust_signals .trust-item {
      padding: 15px 10px;
    }

    .trust-signals-collection__trust_signals .trust-icon {
      font-size: 26px;
    }

    .trust-signals-collection__trust_signals .trust-title {
      font-size: 14px;
    }

    .trust-signals-collection__trust_signals .trust-text {
      font-size: 12px;
    }
  }

.site-nav__link {
    font-size: var(--element-text-font-size--body-sm);
  }
  
    .site-nav__link {
      text-transform: uppercase;
      letter-spacing: 2px;
    }

.header-item--logo,
      [data-layout="left-center"] .header-item--logo,
      [data-layout="left-center"] .header-item--icons {
        flex: 0 1 150px;
      }

      @media only screen and (min-width: 769px) {
        .header-item--logo,
        [data-layout="left-center"] .header-item--logo,
        [data-layout="left-center"] .header-item--icons {
          flex: 0 0 220px;
        }
      }

      .site-header__logo a {
        width: 150px;
      }

      .is-light .site-header__logo .logo--inverted {
        width: 150px;
      }

      @media only screen and (min-width: 769px) {
        .site-header__logo a {
          width: 220px;
        }

        .is-light .site-header__logo .logo--inverted {
          width: 220px;
        }
      }

/* Settings Variables */
    .ed_breadcrumbs-section#ed_section-collection__om_breadcrumbs {
      --breadcrumbs-alignment: start;
      --breadcrumbs-text-color: #000;
      --breadcrumbs-font-size: 14px;
      --breadcrumbs-font-case: default;
      --breadcrumbs-font-weight: normal;
      --padding-left: 40px;
      --padding-right: 20px;
      --padding-top: 20px;
      --padding-bottom: 0px;
      --padding-left-mobile: 18px;
      --padding-right-mobile: 20px;
      --padding-top-mobile: 20px;
      --padding-bottom-mobile: 12px;
      --max-width: none;
      
    }

    /* Section */
    .ed_breadcrumbs-section {
      padding-top: var(--padding-top);
      padding-bottom: var(--padding-bottom);
      padding-left: var(--padding-left);
      padding-right: var(--padding-right);
      color: var(--breadcrumbs-text-color);
    }
    .ed_breadcrumbs-section * {
      color: var(--breadcrumbs-text-color);
    }

    @media (max-width: 767px) {
      .ed_breadcrumbs-section {
        padding-left: var(--padding-left-mobile);
        padding-right: var(--padding-right-mobile);
        padding-top: var(--padding-top-mobile);
        padding-bottom: var(--padding-bottom-mobile);
      }
    }

    /* Nav */
    nav.ed_breadcrumbs {
      margin: 0 auto;
      max-width: var(--max-width);
    }

    /* List items */
    .ed_breadcrumbs-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: var(--breadcrumbs-alignment);
    }
    .ed_breadcrumbs-list li {
      display: inline-flex;
      align-items: center;
    }

    /* Arrows */
    .ed_breadcrumbs-list.arrows li:not(:last-child):after {
      border-style: solid;
      border-width: .10em .10em 0 0;
      content: '';
      display: inline-block;
      height: .4em;
      width: .4em;
      margin: 0 .4em;
      position: relative;
      transform: rotate(45deg);
      vertical-align: middle;
      font-size: calc(var(--breadcrumbs-font-size) + 2px);
      /* top: -0.1em; */
    }
    [dir="rtl"] .ed_breadcrumbs-list.arrows li:not(:last-child):after {
      transform: rotate(220deg);
    }

    .ed_breadcrumbs-list.slashes li:not(:last-child):after {
      content: '/';
      margin: 0 .4em;
      font-size: var(--breadcrumbs-font-size);
    }

    /* Links + current-page (non-linked terminal crumb) share the same type treatment */
    .ed_breadcrumbs-list a,
    .ed_breadcrumbs-list [aria-current="page"] {
      color: inherit;
      text-decoration: none;
      font-size: var(--breadcrumbs-font-size);
      font-weight: var(--breadcrumbs-font-weight);
      text-transform: var(--breadcrumbs-font-case);
    }
    .ed_breadcrumbs-list a:hover,
    .ed_breadcrumbs-list a:focus {
      text-decoration: underline;
    }

.gv-moved-notice{display:flex;align-items:center;gap:9px;padding:10px 14px;margin:0 0 18px;
      background:#e9f0fb;border:1px solid #d2e0f4;border-radius:3px}
    .gv-moved-notice__mark{flex:0 0 auto;width:20px;height:20px;border-radius:3px;display:block}
    .gv-moved-notice__text{margin:0;font-size:13px;line-height:1.45;color:#1a5fa5;min-width:0}
    .gv-moved-notice__text strong{font-weight:700;color:#1a5fa5}
    @media screen and (max-width:749px){
      .gv-moved-notice{align-items:flex-start}
      .gv-moved-notice__mark{margin-top:1px}
    }

/* ⚠️ [hidden] MUST WIN. Author `display` rules below beat the UA sheet's [hidden]{display:none};
     without this every step renders stacked at once. Same trap already hit in bis-notify.liquid. */
  .gv-nl[hidden], .gv-nl-teaser[hidden], .gv-nl__step[hidden] { display: none !important; }

  /* ⚠️ PALETTE MEASURED OFF THE LIVE STOREFRONT 2026-08-12, not carried over from Wulf and not read
     from config/settings_data.json (which the live theme can be ahead of). Resolved on
     www.gotvape.com: body #fff / #000, font Oswald, and --color-button-primary = #ff8b00 —
     Got Vape ORANGE. Shared with gv-wholesale (sibling brands), NOT copied from Wulf's red.
     ⚠️ Wulf's ink (#272831) and sage (#d3dac9) are DELIBERATELY ABSENT — they are Wulf's scheme, and
     using them here would look almost right, which is the failure mode this whole port keeps hitting.
     ⚠️ Ink is PINNED on the card, never inherited: the overlay must not pick up a section's
     colour scheme and render light-on-light.
     ⚠️ The buttons are NOT restyled: .gvws-button already reads var(--color-button-primary), so it
     resolves to Got Vape orange on its own. Hard-coding a colour here would fork it from the theme. */
  .gv-nl { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .gv-nl__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .gv-nl__card { position: relative; z-index: 1; width: min(680px,100%); background: #ffffff; color: #000000;
                 display: grid; grid-template-columns: 250px 1fr; border: 1px solid #e5e5e5; box-shadow: 0 26px 64px rgba(0,0,0,.28); }
  /* ⚠️ NO background-image FROM A SETTING. `settings.gv_nl_image` does not exist in this theme's
     schema, and an empty url('') resolves against the document base — every page load would refetch
     the page's own HTML as an image. Flat fill until a real asset is wired in. */
  /* Real Shopify CDN asset rather than a theme setting: `settings.gv_nl_image` does not exist in this
     theme's schema, and an empty url('') would refetch the page's own HTML as an image. */
  /* ⚠️⚠️ PICK AN IMAGE THAT SURVIVES THE CROP, NOT JUST THE RIGHT SUBJECT. This column is 250x330
     (ratio ~0.76) with background-size:cover. Exxus shipped a 2.00 landscape here and it rendered
     as a hand against a blur with no visible product.
     ⭐ The rule is NOT "use a portrait source" — Wulf's live popup is 700x418 (ratio 1.67) and
     renders perfectly. What matters is whether the SUBJECT survives a centre-crop: at 1.67 the crop
     keeps the middle ~45% horizontally, which is fine for a centred product and fatal for an
     off-centre one.
     ✅ This one is 700x418 (ratio 1.67 — the same as Wulf's proven image). Simulated the exact
     250x330 cover-crop before shipping: the Nova bubbler lands dead centre with both hands framing
     it. Owner-selected 2026-09-11 from a shortlist of three.
     ⚠️ DELIBERATELY NOT a dated seasonal banner — this overlay runs indefinitely.
     ⚠️ AND NOT a file whose NAME sounds right. In one session `*-desktop-hero.jpg` turned out to be
     a banner with SHOP NOW baked into the pixels, `*-using.jpg` an instruction diagram, and
     `*-hand-pipe-*` a product type rather than a hand. Open the image. */
  .gv-nl__media { background: #f2f2f2 url('https://www.gotvape.com/cdn/shop/files/woman-using-wulf-nova-on-park-trail.jpg?width=700') center/cover no-repeat;
                  min-height: 330px; }
  /* ⚠️ THE CARD MUST NOT RESIZE BETWEEN STEPS. Height was content-driven, so step 1 (subhead + two
     buttons + fine print) rendered taller than step 2 (field + button + one line) and the overlay
     visibly jumped when you advanced. A floor on the body keeps every step in the same box; the
     existing `margin-top:auto` on .gv-nl__actions then pins the controls to the same baseline
     throughout. Value is the tallest step (step 1) measured at the 680px desktop width. */
  /* ⚠️ THE CARD MUST NOT RESIZE BETWEEN STEPS — and a magic min-height only approximates that,
     because the true height moves with font loading, wrapping and copy edits. Instead all three
     steps occupy the SAME grid cell, so the body is always as tall as the TALLEST step no matter
     which one is showing. Nothing to keep in sync. */
  .gv-nl__body { padding: 34px; display: grid; }
  .gv-nl__step { grid-area: 1 / 1; display: flex; flex-direction: column; }
  /* ⚠️ Hidden steps must still OCCUPY the cell, or the grid collapses to the visible one and the
     jump returns. visibility:hidden keeps the box (unlike display:none) and still removes it from
     the accessibility tree and the tab order. This deliberately overrides the [hidden] rule above,
     which exists to stop the steps rendering stacked — grid placement handles that instead. */
  .gv-nl__step[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
  .gv-nl__logo { width: 104px; height: auto; display: block; margin-bottom: 24px; grid-area: 1 / 1; align-self: start; }
  .gv-nl__close { position: absolute; top: 9px; right: 11px; width: 26px; height: 26px; border: 0;
                  background: transparent; color: #9a9a9a; font-size: 17px; line-height: 1; cursor: pointer; }
  .gv-nl__close:hover, .gv-nl__close:focus-visible { color: #000000; }

  .gv-nl__offer { font-family: 'Oswald','Arial Narrow',Arial,sans-serif; font-size: 3.4rem; font-weight: 700;
                  line-height: .92; letter-spacing: -.02em; text-transform: uppercase; margin: 0; color: #000000; }
  .gv-nl__offer--sm { font-size: 2.1rem; line-height: 1.05; }
  .gv-nl__offer span { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .2em; margin-top: 12px; color: #6b6c78; }
  .gv-nl__sub { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: #6b6c78; }
  .gv-nl__actions { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 11px; }
  .gv-nl__form { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .gv-nl__submit, .gv-nl__yes { min-height: 52px; font-size: 16px; }
  .gv-nl__submit[disabled] { opacity: .6; cursor: not-allowed; }
  /* ⚠️ NO INVERT HACK NEEDED HERE. bis-notify sits on a black panel where the house button's
     #111 hover disappears; on this white card the stock .gvws-button hover is correct. Do not
     copy that override across — it would make the button vanish into the card. */
  .gv-nl__no { background: none; border: 0; color: #7c7d89; font-size: 14px; cursor: pointer;
               text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
  .gv-nl__no:hover, .gv-nl__no:focus-visible { color: #000000; }
  .gv-nl__fine { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #84858f; }
  /* Status line. Emphasis is weight and ink, not colour — keeps error copy calm on a white card. */
  .gv-nl__msg { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #000000; font-weight: 700; }
  .gv-nl__msg:empty { display: none; }

  .gv-nl__done { justify-content: center; }
  .gv-nl__check { width: 42px; height: 42px; border-radius: 50%; background: #e4f4d9; color: #000000;
                  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
  .gv-nl__done-title { font-family: 'Oswald','Arial Narrow',Arial,sans-serif; font-size: 1.55rem; font-weight: 700;
                       text-transform: uppercase; letter-spacing: .02em; margin: 0; color: #000000; }
  .gv-nl__done-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #6b6c78; }
  .gv-nl__done-email { color: #000000; word-break: break-word; }

  .gv-nl-teaser { position: fixed; left: 18px; bottom: 0; z-index: 9997; border: 0; cursor: pointer;
                  background: #76c043; color: #ffffff; font-family: 'Oswald','Arial Narrow',Arial,sans-serif;
                  font-weight: 700; font-size: 13px; letter-spacing: .13em; padding: 12px 16px;
                  border-radius: 2px 2px 0 0; box-shadow: 0 -6px 22px rgba(39,40,49,.3); }

  @media (max-width: 749px) {
    .gv-nl { padding: 0; align-items: flex-end; }
    .gv-nl__card { grid-template-columns: 1fr; width: 100%; }
    .gv-nl__media { min-height: 78px; }
    /* No floor on the sheet: a phone sizes to content, and a fixed height would leave dead space
       above the keyboard on step 2. The jump is a desktop-only artefact of the side-by-side card. */
    /* The sheet keeps the same grid stacking so it doesn't jump either, but sizes to its own
       tallest step rather than a desktop-derived number. */
    .gv-nl__body { padding: 22px 20px 20px; }
    .gv-nl__offer { font-size: 2.6rem; }
  }
  @media (prefers-reduced-motion: reduce) { .gv-nl, .gv-nl__card { animation: none !important; transition: none !important; } }