.site-nav__link {
    font-size: var(--element-text-font-size--body-md);
  }
  
    .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 140px;
      }

      @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 160px;
        }
      }

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

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

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

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

.flex-grid--index__promo-grid {
        margin-top: -16px;
        margin-left: -16px;
        
          padding-left: 16px;
          padding-right: 16px;
        
      }

      .flex-grid--index__promo-grid .flex-grid--gutters {
        margin-top: -16px;
        margin-left: -16px;
      }

      .flex-grid--index__promo-grid .flex-grid__item {
        padding-top: 16px;
        padding-left: 16px;
      }

      @media only screen and (max-width: 589px) {
        .flex-grid--index__promo-grid {
          margin-top: -8px;
          margin-left: -8px;
          
            padding-left: 8px;
            padding-right: 8px;
          
        }

        .flex-grid--index__promo-grid .flex-grid--gutters {
          margin-top: -8px;
          margin-left: -8px;
        }

        .flex-grid--index__promo-grid .flex-grid__item {
          padding-top: 8px;
          padding-left: 8px;
        }
      }

.flex-grid__item--advanced_kWnD7G {
                min-height: 240.0px;
              }

              @media only screen and (min-width: 769px) {
                .flex-grid__item--advanced_kWnD7G {
                  min-height: 320.0px;
                }
              }

              @media only screen and (min-width: 1140px) {
                .flex-grid__item--advanced_kWnD7G {
                  min-height: 400px;
                }
              }

.flex-grid__item--advanced_N9kLaL {
                min-height: 240.0px;
              }

              @media only screen and (min-width: 769px) {
                .flex-grid__item--advanced_N9kLaL {
                  min-height: 320.0px;
                }
              }

              @media only screen and (min-width: 1140px) {
                .flex-grid__item--advanced_N9kLaL {
                  min-height: 400px;
                }
              }

.flex-grid__item--advanced_NQjHtB {
                min-height: 204.0px;
              }

              @media only screen and (min-width: 769px) {
                .flex-grid__item--advanced_NQjHtB {
                  min-height: 272.0px;
                }
              }

              @media only screen and (min-width: 1140px) {
                .flex-grid__item--advanced_NQjHtB {
                  min-height: 340px;
                }
              }

.flex-grid__item--advanced_bcbyFL {
                min-height: 204.0px;
              }

              @media only screen and (min-width: 769px) {
                .flex-grid__item--advanced_bcbyFL {
                  min-height: 272.0px;
                }
              }

              @media only screen and (min-width: 1140px) {
                .flex-grid__item--advanced_bcbyFL {
                  min-height: 340px;
                }
              }

.flex-grid--index__promo_grid_7YwNkY {
        margin-top: -20px;
        margin-left: -20px;
        
      }

      .flex-grid--index__promo_grid_7YwNkY .flex-grid--gutters {
        margin-top: -20px;
        margin-left: -20px;
      }

      .flex-grid--index__promo_grid_7YwNkY .flex-grid__item {
        padding-top: 20px;
        padding-left: 20px;
      }

      @media only screen and (max-width: 589px) {
        .flex-grid--index__promo_grid_7YwNkY {
          margin-top: -10px;
          margin-left: -10px;
          
        }

        .flex-grid--index__promo_grid_7YwNkY .flex-grid--gutters {
          margin-top: -10px;
          margin-left: -10px;
        }

        .flex-grid--index__promo_grid_7YwNkY .flex-grid__item {
          padding-top: 10px;
          padding-left: 10px;
        }
      }

.flex-grid__item--advanced_wHbftz {
                min-height: 228.0px;
              }

              @media only screen and (min-width: 769px) {
                .flex-grid__item--advanced_wHbftz {
                  min-height: 304.0px;
                }
              }

              @media only screen and (min-width: 1140px) {
                .flex-grid__item--advanced_wHbftz {
                  min-height: 380px;
                }
              }

/* 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-index__trust_signals.index-section {
    margin-top: 8px;
    margin-bottom: 20px;
  }

  .trust-signals-index__trust_signals {
    padding: 36px 0 36px;
    background: #ffffff;
  }

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

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

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

  .trust-signals-index__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-index__trust_signals .trust-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
  }

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

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

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

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

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

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

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

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

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

.featured-resources-index__homepage_featured_resources {
    padding: px 0 px;
    background: #ffffff;
  }

  .featured-resources-index__homepage_featured_resources .featured-resources-header {
    position: relative;
    text-align: center;
    margin-bottom: 28px;
  }

  .featured-resources-index__homepage_featured_resources .featured-resources-header__text {
    max-width: 760px;
    margin: 0 auto;
  }

  .featured-resources-index__homepage_featured_resources .featured-resources-header .section-header__title {
    margin-bottom: 0;
  }

  .featured-resources-index__homepage_featured_resources .resources-subheading {
    max-width: 760px;
    margin: 8px auto 0;
    color: #4a4a4a;
  }

  .featured-resources-index__homepage_featured_resources .resources-view-all-link {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #111111;
  }

  .featured-resources-index__homepage_featured_resources .resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media only screen and (max-width: 900px) {
    .featured-resources-index__homepage_featured_resources .resources-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Below wide desktop, drop the absolute-positioned "View all" link so it stops
     overlapping / crowding the centered heading — flow it below, centered. */
  @media only screen and (max-width: 989px) {
    .featured-resources-index__homepage_featured_resources .resources-view-all-link {
      position: static;
      display: inline-block;
      margin-top: 12px;
      white-space: normal;
    }
  }

  @media only screen and (max-width: 640px) {
    .featured-resources-index__homepage_featured_resources {
      padding: px 0 px;
    }

    .featured-resources-index__homepage_featured_resources .resources-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

/* ⚠️ [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.sutravape.com: body #fff / #000, font Poppins, and --color-button-primary = #22b3f5, with
     color-scheme-3 rendering #22b3f5 behind white text.
     ⚠️ 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 Sutra blue 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. */
  /* ⚠️ NOT the dbr-pro-SPRING-2026 banner that is on the homepage today: this overlay runs
     indefinitely, and a dated seasonal image ages into a liability. This is the evergreen DBR Pro
     banner, verified 2026-08-12 (HTTP 200, 700x467). */
  .gv-nl__media { background: #f2f2f2 url('https://www.sutravape.com/cdn/shop/files/sutra-dbr-pro-banner_9ec91ffa-cd13-4752-a5e8-3364bd0a80a7.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: 'Poppins',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: #d6effc; 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: 'Poppins',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: #22b3f5; color: #ffffff; font-family: 'Poppins',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; } }