/** Shopify CDN: Minification failed

Line 2579:24 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:fyre-blog (INDEX:5) */
.blog--section {
    background-color: var(--color-background-dark, #1a1815);
  }

  .blog--inner {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding-left: var(--spacing-content-padding, 24px);
    padding-right: var(--spacing-content-padding, 24px);
  }

  .blog--header {
    border-bottom: 2px solid var(--color-accent);
  }

  .blog--heading {
    font-family: var(--font-display, "Anton"), sans-serif;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    line-height: var(--line-height-heading, 1);
    color: var(--color-white);
    margin: 0 0 var(--space-md) 0;
  }

  .blog--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .blog--grid__item {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 750px) {
    .blog--grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-xl);
    }
  }

  @media (min-width: 990px) {
    .blog--grid--3-col {
      grid-template-columns: repeat(3, 1fr);
    }
    .blog--grid--2-col {
      grid-template-columns: repeat(2, 1fr);
    }
    .blog--grid--4-col {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .blog--pagination {
    margin-top: var(--space-2xl);
    display: flex;
    justify-content: center;
  }

  .blog--empty {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: var(--font-size-body, 14px);
    color: var(--color-text-light, #A8A8A8);
    text-align: center;
    padding: var(--space-2xl) 0;
    margin: 0;
  }
/* END_SECTION:fyre-blog */

/* START_SECTION:fyre-cart (INDEX:8) */
/* ── Container / head ─────────────────────────────────────────────── */
  .fyre-cart__container {
    display: flex;
    flex-direction: column;
  }
  .fyre-cart__container > .fyre-breadcrumbs {
    margin-bottom: var(--space-7); /* 40px — breadcrumb -> title gap */
  }
  .fyre-cart__head {
    display: flex;
    align-items: baseline;
    gap: 12px; /* title <-> badge gap — literal, no token */
    margin-bottom: var(--space-7); /* 40px — title -> content gap */
  }
  .fyre-cart__title {
    font-size: 90px; /* literal, no token between h1/82 and display/126 */
    line-height: 1;
  }
  .fyre-cart__count {
    display: none; /* mobile-only badge — see /AC3; pure CSS-visibility
                       gate is the only real mechanism available to a
                       server-rendered Liquid section (no viewport access a
                       render time) — same convention already used elsewhere
                       in this theme (sections/fyre-brand-story-banner.liquid) */
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* ── Two-column layout ────────────────────────────────────────────── */
  .fyre-cart__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* 20px — Summary Wrap top padding, reused as the stacked-column gap */
  }
  @media (min-width: 1200px) {
    /* Below 1200px the fixed 560px summary column squeezes the line items,
       so the layout stays stacked until there's room for both. */
    .fyre-cart__layout {
      display: grid;
      grid-template-columns: 1fr 560px; /* 560px — Order Summary panel fixed width */
      gap: var(--space-7); /* 40px — content row gap */
      align-items: start;
    }
  }

  /* ── Line items ────────────────────────────────────────────────────── */
  .fyre-cart__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-6); /* 32px — reasoned: gap between item list and Continue Shopping, not itemized in */
  }
  .fyre-cart__item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5); /* 20px — gap between line item cards */
  }
  .fyre-cart__item {
    display: flex;
    gap: 28px; /* image <-> copy gap */
    padding: 28px; /* line item card padding */
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
  }
  .fyre-cart__item-image-link {
    flex-shrink: 0;
  }
  .fyre-cart__item-image,
  .fyre-cart__item-image--placeholder {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius-card);
    display: block;
    background-color: var(--color-white);
  }
  .fyre-cart__item-image--placeholder {
    background-color: var(--color-background-alt);
  }
  .fyre-cart__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2); /* 8px — reasoned internal row rhythm, not itemized per-row in */
  }
  .fyre-cart__item-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .fyre-cart__item-title:hover {
    text-decoration: underline;
  }
  .fyre-cart__item-sku {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 0;
  }

  /* Config rows — item.properties, not a fixed field list */
  .fyre-cart__item-config {
    display: flex;
    align-items: stretch;
    gap: 14px; /* bar <-> text gap */
  }
  .fyre-cart__item-config-bar {
    display: block;
    width: 4px;
    background-color: var(--color-accent);
    flex-shrink: 0;
  }
  .fyre-cart__item-config-rows {
    display: flex;
    flex-direction: column;
    gap: 6px; /* rows stacked 6px apart */
  }
  .fyre-cart__item-config-row {
    display: flex;
    gap: 8px; /* label:value gap */
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
  }
  .fyre-cart__item-config-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
  }
  .fyre-cart__item-config-value {
    color: var(--color-text-secondary);
  }

  .fyre-cart__edit-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 17px;
    color: var(--color-accent);
    text-decoration: none;
  }
  .fyre-cart__edit-link:hover {
    text-decoration: underline;
  }
  .fyre-cart__item-lead-time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 17px;
    color: var(--color-text-muted);
  }
  i.fyre-cart__item-lead-time-icon {
    /* element+class beats fyre-icon-set's single-class base rule — same
       specificity convention fyre-breadcrumbs.liquid already documents. */
    color: var(--color-warning);
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .fyre-cart__item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 4px;
  }
  .fyre-cart__qty {
    display: flex;
    align-items: center;
  }
  .fyre-cart__qty-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border-light);
    background-color: var(--color-white);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .fyre-cart__qty-btn:not(:first-child) {
    margin-left: -1px;
  }
  .fyre-cart__qty-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    position: relative;
    z-index: 1;
  }
  .fyre-cart__qty-value {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    margin-left: -1px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    color: var(--color-text-secondary);
  }
  .fyre-cart__item-price {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
  }
  .fyre-cart__item-pricing {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .fyre-cart__item-price-original {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--color-text-muted);
  }
  .fyre-cart__item-discounts {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fyre-cart__item-discounts li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-fitment-success);
  }
  .fyre-cart__item-remove {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-accent);
    text-decoration: none;
  }
  .fyre-cart__item-remove:hover {
    text-decoration: underline;
  }

  /* Continue Shopping — fyre-element-button secondary/rectangle match, with
     a scoped override for the border/text color (Figma's #171717 vs. the
     component's own default --color-border) and the exact measured
     padding/type-size (), since neither hits the design
     token-for-token as shipped. */
  .fyre-cart__continue.button {
    margin-top: var(--space-2);
    align-self: flex-start;
    border-color: var(--color-text-secondary);
    color: var(--color-text-secondary);
    padding: 14px 32px;
    gap: 8px;
  }
  .fyre-cart__continue .button__text {
    font-size: 22px;
  }

  /* ── Order Summary panel ──────────────────────────────────────────── */
  .fyre-cart__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* 20px — gap between summary rows */
    padding: 32px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
  }
  .fyre-cart__summary-heading {
    font-family: var(--font-display);
    font-size: 40px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1;
  }

  .fyre-cart__promo {
    display: flex;
    align-items: stretch;
  }
  .fyre-cart__promo-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border-light);
    border-right: none;
    border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
    box-sizing: border-box;
    height: 48px;
    padding: 0 0 0 16px; /* left-only text inset */
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 22px;
    color: var(--color-text-secondary);
    background-color: var(--color-white);
  }
  .fyre-cart__promo-input::placeholder {
    color: var(--color-border);
  }
  .fyre-cart__promo-apply {
    flex-shrink: 0;
    height: 48px;
    padding: 0 24px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .fyre-cart__promo-apply:hover {
    background-color: var(--color-text-secondary);
  }
  .fyre-cart__promo-message {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-accent);
  }
  .fyre-cart__promo-codes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fyre-cart__promo-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 30px;
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }
  .fyre-cart__promo-code-summary {
    font-weight: var(--font-weight-medium, 500);
    text-transform: none;
    color: var(--color-fitment-success);
  }
  .fyre-cart__promo-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
  }
  .fyre-cart__promo-remove:hover {
    color: var(--color-accent);
  }

  .fyre-cart__divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0;
  }

  .fyre-cart__summary-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-4); /* 20px — reused for the row-to-row rhythm within this block */
  }
  .fyre-cart__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
  }
  .fyre-cart__summary-label {
    color: var(--color-text-primary);
  }
  .fyre-cart__summary-value {
    color: var(--color-text-secondary);
  }
  .fyre-cart__summary-sublabel {
    display: block;
    font-weight: var(--font-weight-medium, 500);
    font-size: 18px;
    color: var(--color-text-secondary);
  }
  .fyre-cart__summary-row--discount .fyre-cart__summary-value {
    color: var(--color-fitment-success);
  }
  .fyre-cart__summary-value--free {
    color: var(--color-fitment-success); /* real token, not the close-but-not-exact Figma literal */
  }

  /* Free-shipping progress above the items: same look as the mini cart's (cart-drawer.liquid). */
  .fyre-cart__shipping {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .fyre-cart__shipping[hidden] {
    display: none;
  }
  .fyre-cart__shipping-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-text-muted);
  }
  .fyre-cart__shipping.is-unlocked .fyre-cart__shipping-message {
    color: var(--color-fitment-success);
  }
  .fyre-cart__shipping-bar {
    width: 100%;
    height: 6px;
    border-radius: var(--border-radius-default);
    background-color: var(--color-border-light);
    overflow: hidden;
  }
  .fyre-cart__shipping-bar-fill {
    height: 100%;
    background-color: var(--color-fitment-success);
    transition: width 0.3s ease;
  }
  @media (min-width: 990px) {
    .fyre-cart__shipping-bar {
      height: 8px;
      border-radius: var(--radius-pill);
    }
  }

  .fyre-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .fyre-cart__total-label,
  .fyre-cart__total-value {
    font-family: var(--font-display);
    font-size: 44px;
    color: var(--color-text-primary);
  }

  .fyre-cart__checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  /* Checkout button — fyre-element-button primary/diagonal default already
     matches bg/radius exactly; only height + exact type-size
     need a scoped override since neither button size step hits 64px/30px. */
  .fyre-cart__pay-btn.button {
    height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .fyre-cart__pay-btn .button__text {
    font-size: 30px;
    font-weight: var(--font-weight-semibold);
  }

  .fyre-cart__or {
    text-align: center;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-border);
    margin: 0;
  }

  /* Shopify's own dynamic checkout buttons — real rendering/styling
     controlled by Shopify + the enabled payment method, not this theme. Only outer stacking is ours. */
  .fyre-cart__additional-checkout-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .fyre-cart__secure-line {
    text-align: center;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 0;
  }

  /* ── Busy state ────────────────────────────────────────────────────── */
  .fyre-cart.is-busy .fyre-cart__qty-btn,
  .fyre-cart.is-busy .fyre-cart__item-remove {
    opacity: 0.5;
    pointer-events: none;
  }
  /* WHY: checkout disabled while a mutation is in flight — submitting
     mid-request can reach checkout with the pre-mutation cart state. */
  .fyre-cart.is-busy .fyre-cart__pay-btn {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ── Empty state ───────────────────────────────────────────────────── */
  .fyre-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-9) 0;
    text-align: center;
  }
  .fyre-cart__empty-heading {
    font-family: var(--font-display);
    font-size: var(--font-size-h2);
    color: var(--color-text-secondary);
    margin: 0;
  }
  .fyre-cart__empty-body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    margin: 0;
  }

  /* ── Mobile ─────────────── */
  @media screen and (max-width: 767px) {
    .fyre-cart__container > .fyre-breadcrumbs {
      margin-bottom: var(--space-2); /* 8px */
    }
    .fyre-cart__container > .fyre-breadcrumbs :is(.fyre-breadcrumbs__link, .fyre-breadcrumbs__text) {
      font-size: 17px;
    }
    .fyre-cart__container > .fyre-breadcrumbs i.fyre-breadcrumbs__sep-icon {
      width: 10px;
      height: 10px;
      font-size: 10px;
    }
    .fyre-cart__head {
      margin-bottom: var(--space-3); /* 16px */
    }
    .fyre-cart__count {
      display: inline-flex;
      font-size: 18px;
    }
    .fyre-cart__title {
      font-size: 40px;
      line-height: 1;
    }

    .fyre-cart__item-list {
      gap: 14px;
    }
    .fyre-cart__item {
      padding: 16px;
      gap: 12px;
    }
    .fyre-cart__item-image,
    .fyre-cart__item-image--placeholder {
      width: 80px;
      height: 80px;
    }
    .fyre-cart__item-title {
      font-size: 18px;
      line-height: 1.28;
    }
    .fyre-cart__item-sku {
      font-size: 15px;
    }
    .fyre-cart__item-config-bar {
      width: 3px;
    }
    .fyre-cart__item-config-rows {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2px 8px;
    }
    .fyre-cart__item-config-row {
      font-size: 15px;
    }
    .fyre-cart__item-lead-time {
      font-size: 15px;
    }
    i.fyre-cart__item-lead-time-icon {
      width: 13px;
      height: 13px;
      font-size: 13px;
    }
    .fyre-cart__qty-btn,
    .fyre-cart__qty-value {
      width: 34px;
      height: 34px;
      font-size: 17px;
    }
    .fyre-cart__item-price {
      font-size: 28px;
    }
    .fyre-cart__item-remove {
      display: block;
      width: 100%;
      text-align: left;
      font-size: 16px;
    }
    .fyre-cart__item-price-original {
      font-size: 18px;
    }
    .fyre-cart__item-discounts li {
      font-size: 16px;
    }

    .fyre-cart__continue.button {
      width: 100%;
      padding: 12px 16px;
    }
    .fyre-cart__continue .button__text {
      font-size: 17px;
    }

    .fyre-cart__summary {
      padding: 20px;
      gap: 14px;
    }
    .fyre-cart__summary-rows {
      gap: 14px;
    }
    .fyre-cart__summary-heading {
      font-size: 30px;
      line-height: 1.05;
    }
    .fyre-cart__promo-input {
      padding: 0 11px;
      font-size: 18px;
    }
    .fyre-cart__promo-apply {
      padding: 0 14px;
      font-size: 18px;
    }
    .fyre-cart__summary-row {
      font-size: 19px;
    }
    .fyre-cart__summary-sublabel {
      font-size: 15px;
    }
    .fyre-cart__total-label,
    .fyre-cart__total-value {
      font-size: 34px;
    }
    .fyre-cart__pay-btn.button {
      height: auto;
      padding: 16px;
    }
    .fyre-cart__pay-btn .button__text {
      font-size: 18px;
    }
    .fyre-cart__or {
      font-size: 16px;
    }
    .fyre-cart__secure-line {
      font-size: 16px;
    }
  }
/* END_SECTION:fyre-cart */

/* START_SECTION:main-blog (INDEX:52) */
.main-blog {
    background-color: var(--color-background);
  }

  .main-blog__tags {
    margin-bottom: var(--space-xl);
  }

  .main-blog__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .main-blog__tag,
  .main-blog__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--font-size-label);
    text-decoration: none;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .main-blog__tag:hover,
  .main-blog__page:is(a):hover,
  .main-blog__tag[aria-current],
  .main-blog__page--current {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-white);
  }

  .main-blog__tag:focus-visible,
  .main-blog__page:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .main-blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .main-blog__item {
    display: flex;
    flex-direction: column;
  }

  .main-blog__item > * {
    flex: 1;
  }

  @media (min-width: 750px) {
    .main-blog__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-xl);
    }
    .main-blog__grid--single {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 990px) {
    .main-blog__grid,
    .main-blog__grid--single {
      grid-template-columns: repeat(var(--main-blog-columns, 3), 1fr);
    }
  }

  .main-blog__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
  }

  .main-blog__page--gap {
    border-color: transparent;
    padding: 0 var(--space-xs);
  }

  .main-blog__empty {
    margin: 0;
    padding: var(--space-2xl) 0;
    text-align: center;
    color: var(--color-text-muted);
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-page (INDEX:53) */
.page--section {
    background-color: var(--color-background, #f5f5f0);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .page--inner {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--spacing-content-padding, 24px);
  }

  .page--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h1, 36px);
    font-weight: var(--font-weight-regular);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    line-height: var(--line-height-heading, 1);
    color: var(--color-text-primary, #191814);
    margin: 0 0 var(--space-xl);
  }

  .page--content {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    line-height: var(--line-height-body, 1.6);
    color: var(--color-text-primary, #191814);
  }

  .page--content h2,
  .page--content h3,
  .page--content h4 {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-weight: var(--font-weight-regular);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
  }

  .page--content p {
    margin-bottom: var(--space-md);
  }

  .page--content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-default);
  }
/* END_SECTION:main-page */

/* CSS from block stylesheet tags */
/* START_BLOCK:mega_menu (INDEX:68) */
/* One-off shell values scoped to this block only, not global tokens
     (project rule: no new custom property for a single component's own
     literal). .megamenu--dropdown (simple 300px native-submenu case) stays
     defined in sections/fyre-header.liquid instead.
     Show/hide via clip-path+opacity+visibility (not display) so opening can
     animate; clip-path unveils the panel top-down, like sliding out from
     under the bar. visibility's transition-delay keeps it out of the
     a11y/hit-testing tree while closed. */
  .megamenu {
    position: absolute;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    z-index: 60;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    transition: opacity 0.25s ease, clip-path 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
  }
  .megamenu.is-open {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0% 0);
    pointer-events: auto;
    transition: opacity 0.25s ease, clip-path 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .megamenu {
      transition: opacity 0.15s linear, visibility 0s linear 0.15s;
      clip-path: none;
    }
    .megamenu.is-open {
      transition: opacity 0.15s linear;
    }
  }
  .megamenu--mega {
    /* Figma node 1522:5691: panel top sits 2px above the header bar's
       bottom edge — near-flush, not gapped. */
    top: calc(100% - 2px);
    /* left/right:0 alone resolves against .header--bar's padding box,
       excluding its 2px border, leaving the panel 2px narrower per side.
       Offsetting by the border width matches the bar's true outer width. */
    left: -2px;
    right: -2px;
    padding: 40px 48px 44px;
    border-radius: var(--border-radius-default) var(--border-radius-default) var(--radius-diagonal-lg) 0;
    /* Tight, low-blur shadow — any real blur radius visibly mismatches
       the sharp 60px diagonal corner's own curve at close range. */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

  /* 12-col grid — each nested child (mega_menu_column / mega_menu_promo) is
     a direct grid item spanning its own `width` via inline grid-column
     (needs "tag": null on each child, or Shopify's wrapper div eats the
     span). No dense packing — would reorder items out of block_order. */
  .megamenu__content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-2xl, 48px);
    align-items: stretch;
  }

  .megamenu__cta {
    margin-top: var(--space-lg, 24px);
    padding: 10px 54px !important;
  }

  @media (max-width: 1439px) {
    .megamenu--mega.is-open {
      overflow-y: auto;
      max-height: 70vh;
    }
  }
/* END_BLOCK:mega_menu */

/* START_BLOCK:mega_menu_column (INDEX:69) */
/* Base (mega-style) link look. Moved here from sections/fyre-header.liquid
     along with the markup that uses these classes. */
  .megamenu-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .megamenu-col__label {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-text-muted);
    margin: 0;
  }
  .megamenu-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .megamenu-col__link {
    display: block;
    padding: 4px 8px;
    margin-left: -8px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 22px;
    color: var(--color-text-primary);
    text-decoration: none;
  }
  .megamenu-col__link:hover {
    color: var(--color-text-secondary);
  }
  .megamenu-col__link[aria-current="page"] {
    color: var(--color-accent);
  }
/* END_BLOCK:mega_menu_column */

/* START_BLOCK:mega_menu_promo (INDEX:70) */
/* Sizing (grid-column span) is this tile's own inline style, not a fixed
     half/full flex-basis class. */
  .megamenu-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    min-height: var(--megamenu-promo-min-height, 275px);
    overflow: hidden;
    padding: 45px 30px 15px;
    color: var(--color-white);
    text-decoration: none;
  }
  /* Figma node 1522:5852: promo tiles sit in a wrapping frame with one 60px
     diagonal radius + overflow:clip on the frame, not per-tile. Since this
     architecture has no dedicated promos-only wrapper (all mega_menu
     children share one flat grid), :first-of-type/:last-of-type reproduces
     it — matches by tag (mega_menu_column renders <div>, this renders <a>),
     so it only matches among promo tiles regardless of columns between
     them. A single promo tile matches both rules, getting both corners. */
  .megamenu-promo:first-of-type {
    border-top-left-radius: var(--radius-diagonal-lg);
  }
  .megamenu-promo:last-of-type {
    border-bottom-right-radius: var(--radius-diagonal-lg);
  }
  /* Real Figma gap between promo tiles is 24px, tighter than the shared
     grid's own 48px (correct for column-to-column/column-to-promo
     spacing) — grid `gap` can't be different for one specific pair of
     items, so this pulls each promo tile 24px closer to whatever
     precedes it. Assumes promo tiles are grouped consecutively in block
     order (the intended usage — matches Figma's own columns-then-promos
     grouping); a promo interleaved between columns would pull toward the
     wrong neighbor. */
  .megamenu-promo:not(:first-of-type) {
    margin-left: -24px;
  }
  .megamenu-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Own compositing layer so the diagonal corners stay clipped while the
     image scales (otherwise the corners flicker square). */
  .megamenu-promo {
    isolation: isolate;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .megamenu-promo:hover .megamenu-promo__img,
  .megamenu-promo:focus-visible .megamenu-promo__img {
    transform: scale(1.05);
  }
  .megamenu-promo:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px; /* inside the edge: the mask clips anything outside it */
  }
  @media (prefers-reduced-motion: reduce) {
    .megamenu-promo__img {
      transition: none;
    }
  }
  .megamenu-promo__img--pos-top { object-position: top; }
  .megamenu-promo__img--pos-bottom { object-position: bottom; }
  .megamenu-promo__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  }
  /* Real Figma structure (node 1522:5852): title + arrow share ONE row
     with a shared red accent border-left wrapping both — matches the
     same pattern used by sections/fyre-collection-grid.liquid's
     .collection-grid__tile-footer and sections/fyre-home-hero.liquid's
     .hero-tile__content, for visual consistency across all "photo tile
     with accent-bordered label" instances in the theme. */
  .megamenu-promo__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    border-left: 2px solid var(--color-accent);
    padding-left: 20px;
  }
  .megamenu-promo__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-tile-md);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-white);
  }
  .megamenu-promo__arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
  }
  /* Same sequenced hover swap as .collection-grid__tile-arrow /
     .hero-tile__arrow: current arrow shoots right and fades, then a
     second one enters from the left after a short delay. */
  .megamenu-promo__arrow-track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .megamenu-promo__arrow-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .megamenu-promo__arrow-icon:first-child {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.25s ease-in, opacity 0.2s ease-in;
  }
  .megamenu-promo__arrow-icon:last-child {
    transform: translateX(-150%);
    opacity: 0;
    transition: transform 0.25s ease-out 0.15s, opacity 0.2s ease-out 0.15s;
  }
  .megamenu-promo:hover .megamenu-promo__arrow-icon:first-child {
    transform: translateX(150%);
    opacity: 0;
  }
  .megamenu-promo:hover .megamenu-promo__arrow-icon:last-child {
    transform: translateX(0);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .megamenu-promo__arrow-icon:first-child,
    .megamenu-promo__arrow-icon:last-child {
      transition: none;
    }
  }
/* END_BLOCK:mega_menu_promo */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:algolia-autocomplete (INDEX:81) */
.header[data-sticky-state='active'] algolia-autocomplete[data-open] [data-algolia-autocomplete-container] {
    top: var(--autocomplete-gutter);
  }
/* END_SNIPPET:algolia-autocomplete */

/* START_SNIPPET:breadcrumb (INDEX:91) */
.breadcrumb {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: var(--font-size-label);
  color: var(--color-text-muted, #888888);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--color-border, #C7C1B6);
}

.breadcrumb__link {
  color: var(--color-text-muted, #888888);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb__link:hover {
  color: var(--color-accent, #D94F1E);
}

.breadcrumb__item--current .breadcrumb__text {
  color: var(--color-text-primary);
}
/* END_SNIPPET:breadcrumb */

/* START_SNIPPET:card-collection-tile (INDEX:93) */
.collection-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 171 / 118;
    background-color: var(--color-background-dark);
    text-decoration: none;
  }
  @media screen and (min-width: 990px) {
    .collection-tile {
      aspect-ratio: 475 / 320;
    }
  }
  .collection-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Own compositing layer for the tile so its rounded corners stay clipped
     while the image scales (otherwise the corners flicker square). */
  .collection-tile {
    isolation: isolate;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .collection-tile:hover .collection-tile__img,
  .collection-tile:focus-visible .collection-tile__img {
    transform: scale(1.05);
  }
  @media (prefers-reduced-motion: reduce) {
    .collection-tile__img {
      transition: none;
    }
  }
  .collection-tile__img--placeholder {
    background-color: var(--color-background-alt);
    fill: var(--color-border);
  }
  .collection-tile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    pointer-events: none;
  }
  @media screen and (min-width: 990px) {
    .collection-tile__overlay {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    }
  }
  .collection-tile__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0 10px 12px 12px;
  }
  @media screen and (min-width: 990px) {
    .collection-tile__footer {
      padding: var(--space-lg);
    }
  }
  .collection-tile__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-tile-md);
    line-height: 1.1;
    color: var(--color-white);
    border-left: 1px solid var(--color-accent);
    padding-left: var(--space-sm);
  }
  @media screen and (min-width: 990px) {
    .collection-tile__name {
      border-left-width: 2px;
    }
  }
  .collection-tile__arrow {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    color: var(--color-white);
  }
  .collection-tile__arrow i.fyre-icon {
    width: 8px;
    height: 8px;
    font-size: 8px;
  }
  @media screen and (min-width: 990px) {
    .collection-tile__arrow {
      width: 40px;
      height: 40px;
      border-width: 2px;
    }
    .collection-tile__arrow i.fyre-icon {
      width: 14px;
      height: 14px;
      font-size: 14px;
    }
  }
  .collection-tile__arrow-track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .collection-tile__arrow-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .collection-tile__arrow-icon:first-child {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.25s ease-in, opacity 0.2s ease-in;
  }
  .collection-tile__arrow-icon:last-child {
    transform: translateX(-150%);
    opacity: 0;
    transition: transform 0.25s ease-out 0.15s, opacity 0.2s ease-out 0.15s;
  }
  .collection-tile:hover .collection-tile__arrow-icon:first-child {
    transform: translateX(150%);
    opacity: 0;
  }
  .collection-tile:hover .collection-tile__arrow-icon:last-child {
    transform: translateX(0);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .collection-tile__arrow-icon:first-child,
    .collection-tile__arrow-icon:last-child {
      transition: none;
    }
  }
  .collection-tile:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px; /* inside the edge: the tile's mask clips anything outside it */
  }
/* END_SNIPPET:card-collection-tile */

/* START_SNIPPET:card-product (INDEX:95) */
.hpcalc--part-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-16, 16px);
    background-color: var(--color-background-charcoal, #2D2D2D);
    border: 1px solid var(--color-border-dark, #2D2D2D);
    padding: var(--spacing-16, 16px);
    transition: border-color 0.15s ease;
  }

  .hpcalc--part-card:hover {
    border-color: var(--color-accent, #D94F1E);
  }

  .hpcalc--part-card-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
  }

  .hpcalc--part-card-img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    background-color: var(--color-surface-mid, #2A2A2A);
  }

  .hpcalc--part-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hpcalc--part-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hpcalc--part-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 4px);
    min-width: 0;
  }

  .hpcalc--part-card-vendor {
    font-size: var(--font-size-eyebrow, 11px);
    letter-spacing: var(--letter-spacing-eyebrow, 0.14em);
    text-transform: uppercase;
    color: var(--color-text-light, #A8A8A8);
  }

  .hpcalc--part-card-title-link {
    text-decoration: none;
    color: inherit;
  }

  .hpcalc--part-card-title-link:hover .hpcalc--part-card-title {
    color: var(--color-accent, #D94F1E);
  }

  .hpcalc--part-card-title {
    font-size: var(--font-size-body, 14px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-on-dark, #F5F0E8);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
  }

  .hpcalc--part-card-sku {
    font-size: var(--font-size-small, 12px);
    color: var(--color-text-light, #A8A8A8);
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hpcalc--part-card-price {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-4, 4px);
  }

  .hpcalc--part-card-price-label {
    font-size: var(--font-size-small, 12px);
    color: var(--color-text-light, #A8A8A8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .hpcalc--part-card-price-value {
    font-family: var(--font-heading, "Barlow Condensed", Impact, sans-serif);
    font-size: var(--font-size-h3, 24px);
    font-weight: var(--font-weight-heading, 400);
    color: var(--color-text-on-dark, #F5F0E8);
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .hpcalc--part-card-price-compare {
    font-size: var(--font-size-body, 14px);
    color: var(--color-text-light, #A8A8A8);
    text-decoration: line-through;
  }

  .hpcalc--part-card-badge {
    font-size: var(--font-size-badge, 11px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px var(--spacing-6, 6px);
    border-radius: var(--border-radius-badge, 2px);
  }

  .hpcalc--part-card-badge--sold-out {
    background-color: var(--color-background-dark, #1a1815);
    color: var(--color-text-light, #A8A8A8);
    border: 1px solid var(--color-border-dark, #2D2D2D);
  }
/* END_SNIPPET:card-product */

/* START_SNIPPET:cart-drawer (INDEX:96) */
/* Show/hide via visibility+pointer-events (not display:none/block) so the
     backdrop (.cart-drawer--overlay, below) can actually fade — display
     isn't a transitionable property, and display:none on the root was
     removing the whole subtree (including the panel) from render, so the
     overlay had no chance to animate at all. The panel's own transform/
     transition (.cart-drawer--panel below) is untouched — already a real,
     working slide. visibility's own transition-delay (matched to the
     panel's own 0.3s slide) keeps the root out of the accessibility/
     hit-testing tree while closed without needing display, same technique
     as blocks/mega_menu.liquid's `.megamenu`. */
  .cart-drawer--root {
    position: fixed;
    inset: 0;
    z-index: 300;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.3s;
  }
  .cart-drawer--root.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-drawer--root {
      transition: visibility 0s linear 0.15s;
    }
    .cart-drawer--root.is-open {
      transition: visibility 0s linear 0s;
    }
  }
  .cart-drawer--root.is-busy .cart-drawer--qty-btn,
  .cart-drawer--root.is-busy .cart-drawer--remove,
  .cart-drawer--root.is-busy .cart-drawer--upsell-add {
    opacity: 0.5;
    pointer-events: none;
  }
  /* WHY: checkout disabled while a mutation is in flight — navigating
     mid-request can reach checkout with the pre-mutation cart state */
  .cart-drawer--root.is-busy .cart-drawer--checkout-btn {
    opacity: 0.6;
    pointer-events: none;
  }
  .cart-drawer--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    /* Fades in/out in sync with the panel's own slide (same 0.3s duration)
       instead of snapping instantly with the old display:none/block
       toggle — see .cart-drawer--root's own comment above. */
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .cart-drawer--root.is-open .cart-drawer--overlay {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-drawer--overlay {
      transition: opacity 0.15s linear;
    }
  }

  /* Real Figma panel (node 1522:5198): 680px on desktop, full width on
     mobile — a light theme, not the dark shop-dap treatment this was
     ported from. */
  .cart-drawer--panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(680px, 100vw);
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.3);
  }
  .cart-drawer--root.is-open .cart-drawer--panel {
    transform: translateX(0);
  }

  /* ─── header ────────────────────────────────────────────── */
  .cart-drawer--header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 32px 36px 0;
    flex-shrink: 0;
  }
  .cart-drawer--header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cart-drawer--title-group {
    display: flex;
    /* stretch (not center) so the accent bar fills the row's real height —
       Figma's own bar is "self-stretch", not a fixed px value. */
    align-items: stretch;
    gap: var(--space-3);
  }
  .cart-drawer--accent-bar {
    display: block;
    width: 4px;
    background-color: var(--color-accent);
  }
  .cart-drawer--title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.1;
  }
  .cart-drawer--count {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 22px;
    color: var(--color-text-muted);
    align-self: flex-end;
    padding-bottom: 4px;
  }
  .cart-drawer--close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--border-radius-default);
    transition: color 0.2s ease;
  }
  .cart-drawer--close .fyre-icon {
    width: 28px;
    height: 28px;
    font-size: 28px;
  }
  .cart-drawer--close:hover {
    color: var(--color-accent);
  }

  /* ─── free shipping progress ───────────────────────────────
     Real setting: settings.cart_free_shipping_threshold — see config/
     settings_schema.json "Cart" group. */
  .cart-drawer--shipping {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .cart-drawer--shipping[hidden] {
    display: none;
  }
  .cart-drawer--shipping-message {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-text-muted);
  }
  .cart-drawer--shipping.is-unlocked .cart-drawer--shipping-message {
    color: var(--color-fitment-success);
  }
  .cart-drawer--shipping-bar {
    width: 100%;
    height: 6px;
    border-radius: var(--border-radius-default);
    background-color: var(--color-border-light);
    overflow: hidden;
  }
  .cart-drawer--shipping-bar-fill {
    height: 100%;
    background-color: var(--color-fitment-success);
    transition: width 0.3s ease;
  }
  @media (min-width: 990px) {
    .cart-drawer--shipping-bar {
      height: 8px;
      border-radius: var(--radius-pill);
    }
  }

  .cart-drawer--scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cart-drawer--body {
    flex: 1 0 auto;
    padding: var(--space-md) 36px 0;
  }
  .cart-drawer--items {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cart-drawer--item {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
  }
  .cart-drawer--item:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light);
  }
  .cart-drawer--item-image-link {
    flex-shrink: 0;
  }
  .cart-drawer--item-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: var(--border-radius-default);
    background-color: var(--color-white);
  }
  .cart-drawer--item-placeholder,
  .cart-drawer--upsell-image.cart-drawer--item-placeholder {
    background-color: var(--color-background-alt);
  }
  .cart-drawer--item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .cart-drawer--item-title {
    display: block;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-decoration: none;
  }
  .cart-drawer--item-title:hover {
    text-decoration: underline;
  }
  .cart-drawer--lead-time {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 17px;
    color: var(--color-text-muted);
  }
  .cart-drawer--lead-time .fyre-icon {
    color: var(--color-warning);
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
  .cart-drawer--item-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cart-drawer--item-details:empty {
    display: none;
  }
  .cart-drawer--item-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
  }
  .cart-drawer--item-detail-row span:first-child {
    color: var(--color-text-muted);
    text-transform: uppercase;
  }
  .cart-drawer--item-detail-row span:last-child {
    color: var(--color-text-secondary);
  }
  .cart-drawer--edit-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: fit-content;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 17px;
    color: var(--color-accent);
    text-decoration: none;
  }
  .cart-drawer--edit-link:hover {
    text-decoration: underline;
  }
  .cart-drawer--edit-link .fyre-icon {
    color: var(--color-accent);
    width: 14px;
    height: 14px;
    font-size: 14px;
  }
  .cart-drawer--item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-xs);
  }
  .cart-drawer--qty {
    display: flex;
    align-items: center;
  }
  .cart-drawer--qty-btn {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 20px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .cart-drawer--qty-btn:not(:first-child) {
    margin-left: -1px;
  }
  .cart-drawer--qty-btn:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    position: relative;
    z-index: 1;
  }
  .cart-drawer--qty-value {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-text-secondary);
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    margin-left: -1px;
  }
  .cart-drawer--item-price {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--color-text-secondary);
  }
  .cart-drawer--remove {
    align-self: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .cart-drawer--remove:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .cart-drawer--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-3xl) 0;
    color: var(--color-text-muted);
    text-align: center;
  }
  .cart-drawer--empty .fyre-icon {
    color: var(--color-border-light);
    margin-bottom: var(--space-sm);
  }
  .cart-drawer--empty-title {
    font-family: var(--font-display);
    font-size: 24px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
  }
  .cart-drawer--empty-body {
    font-family: var(--font-body);
    font-size: 16px;
    margin: 0;
  }

  /* ─── upsell rail ───────────────────────────────────────────
     Real Shopify product recommendations, injected by fyre-cart-drawer.js.
     Both Figma frames (desktop 1522:5337 / mobile 1522:7573) give this its
     own light-grey band, distinct from the panel's white — confirmed via
     pixel sampling (fills don't surface in Figma's own code export):
     desktop #f8f8f8, mobile #f7f7f7. */
  .cart-drawer--upsell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-lg) 36px;
    background-color: #f8f8f8;
    flex-shrink: 0;
  }
  .cart-drawer--upsell[hidden] {
    display: none;
  }
  .cart-drawer--upsell-heading {
    font-family: var(--font-display);
    font-size: 30px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
  }
  .cart-drawer--upsell-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .cart-drawer--upsell-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-sm);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-default);
  }
  .cart-drawer--upsell-image-link {
    flex-shrink: 0;
  }
  .cart-drawer--upsell-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--border-radius-default);
    background-color: var(--color-white);
    display: block;
  }
  .cart-drawer--upsell-info {
    flex: 1;
    min-width: 0;
  }
  .cart-drawer--upsell-title {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-text-secondary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .cart-drawer--upsell-sku {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
  }
  .cart-drawer--upsell-price {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;
    color: var(--color-text-primary);
    margin: 2px 0 0;
  }
  .cart-drawer--upsell-add {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-default);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .cart-drawer--upsell-add .fyre-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
  .cart-drawer--upsell-add:hover {
    background-color: var(--color-accent);
  }

  /* ─── footer ────────────────────────────────────────────── */
  .cart-drawer--footer {
    padding: var(--space-lg) 36px 32px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .cart-drawer--footer[hidden] {
    display: none;
  }
  .cart-drawer--subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 34px;
    text-transform: uppercase;
  }
  .cart-drawer--subtotal span:first-child {
    color: var(--color-text-muted);
  }
  .cart-drawer--subtotal span:last-child {
    color: var(--color-text-primary);
  }
  .cart-drawer--shipping-note {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 0;
  }
  /* Diagonal pill: opposite corners share a radius, the other two stay
     sharp — same treatment as the rest of the site's primary CTAs. */
  .cart-drawer--checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-diagonal-md) var(--border-radius-default) var(--radius-diagonal-md) var(--border-radius-default);
    transition: background-color 0.2s ease;
  }
  .cart-drawer--checkout-btn:hover {
    background-color: var(--color-primary-hover);
  }
  .cart-drawer--view-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 26px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: 2px solid var(--color-text-secondary);
    border-radius: var(--radius-diagonal-md) var(--border-radius-default) var(--radius-diagonal-md) var(--border-radius-default);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .cart-drawer--view-cart:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* ─── mobile (real Figma 1522:7500) ────────────────────────
     Tighter padding, smaller type/imagery, upsell rail regains its own
     #f7f7f7 band per that frame. */
  @media screen and (max-width: 767px) {
    .cart-drawer--header {
      padding: 20px 20px 0;
      gap: var(--space-sm);
    }
    .cart-drawer--accent-bar {
      height: 24px;
    }
    .cart-drawer--title {
      font-size: 24px;
    }
    .cart-drawer--count {
      font-size: 13px;
    }
    .cart-drawer--body {
      padding: var(--space-sm) 20px 0;
    }
    .cart-drawer--item {
      gap: var(--space-md);
      padding: var(--space-md) 0;
    }
    .cart-drawer--item-image {
      width: 72px;
      height: 72px;
      object-fit: cover;
    }
    .cart-drawer--item-title {
      font-size: 15px;
    }
    .cart-drawer--item-price {
      font-size: 18px;
    }
    .cart-drawer--qty-btn,
    .cart-drawer--qty-value {
      width: 28px;
      height: 28px;
      font-size: 14px;
    }
    .cart-drawer--upsell {
      padding: var(--space-md) 20px;
    }
    .cart-drawer--upsell-heading {
      font-size: 24px;
    }
    .cart-drawer--upsell-image {
      width: 52px;
      height: 52px;
      object-fit: cover;
    }
    .cart-drawer--upsell-title {
      font-size: 15px;
    }
    .cart-drawer--upsell-sku {
      font-size: 13px;
    }
    .cart-drawer--upsell-price {
      font-size: 16px;
    }
    .cart-drawer--upsell-add {
      width: 28px;
      height: 28px;
    }
    .cart-drawer--upsell-add .fyre-icon {
      width: 11px;
      height: 11px;
      font-size: 11px;
    }
    .cart-drawer--footer {
      padding: var(--space-md) 20px 24px;
    }
    .cart-drawer--subtotal {
      font-size: 26px;
    }
    .cart-drawer--checkout-btn {
      height: auto;
      font-size: 18px;
      padding: 16px 20px;
    }
    .cart-drawer--view-cart {
      height: auto;
      font-size: 16px;
      padding: 12px 20px;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:fitment-selector-tabs (INDEX:98) */
/* Header instance only (#nav-ymm): same full-bleed mobile treatment as
     the 767px block in fitment-selector-tabs.css, but starting sooner at
     max-width:1099px instead of 767px. */
  @media (max-width: 1099px) {
    #nav-ymm fitment-selector-tabs[data-layout] {
      --color-fitment-shell: var(--color-background-dark);
      --fitment-row-gap: 10px;
      width: 100vw;
      min-height: 0;
      margin: 0 0 0 calc(-50vw + 50%);
      padding: var(--space-3) var(--space-4);
      border-radius: 0;
    }

    #nav-ymm fitment-selector-tabs .fitment-tab-heading {
      width: 100%;
      font-size: 15px;
      font-weight: var(--font-weight-medium);
      line-height: 1.3;
    }

    #nav-ymm fitment-selector-tabs .label-desktop {
      display: none;
    }

    #nav-ymm fitment-selector-tabs .label-mobile {
      display: inline;
    }

    #nav-ymm fitment-selector-tabs .fitment-tab-list {
      width: 100%;
      gap: var(--space-2);
    }

    #nav-ymm fitment-selector-tabs .fitment-tab {
      flex: 1 1 0;
      min-height: 32px;
      padding: 0 var(--space-2);
      font-size: 14px;
    }
  }
/* END_SNIPPET:fitment-selector-tabs */

/* START_SNIPPET:fitment-vehicle-selector (INDEX:99) */
/* Header instance only (#nav-ymm): the form/matched half of the mobile
     treatment in fitment-vehicle-selector.css, starting sooner at
     max-width:1099px instead of 767px (the tab band half is in
     snippets/fitment-selector-tabs.liquid). The home hero instance
     (.hero__finder) keeps the 767px threshold. */
  @media (max-width: 1099px) {
    /* The shared stacked layout (fitment-vehicle-selector.css's 989px
       block), repeated so the header also stacks from 990–1099px. */
    #nav-ymm .fitment-selector {
      grid-template-columns: 1fr;
    }

    #nav-ymm .fitment-selector .heading,
    #nav-ymm .fitment-selector .dropdowns,
    #nav-ymm .fitment-selector .actions {
      grid-column: 1;
    }

    #nav-ymm .fitment-selector .actions {
      gap: var(--space-2);
    }

    #nav-ymm .fitment-selector .submit {
      width: 100%;
    }

    #nav-ymm .fitment-selector .actions :is(.submit, #submit, #set-fitment) {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
    }

    #nav-ymm .fitment-selector .dropdowns {
      flex-wrap: nowrap;
      gap: var(--space-2);
    }

    #nav-ymm .fitment-selector .fitment-dropdown {
      flex: 1 1 0;
      min-height: 32px;
      padding: 7px 20px 7px 10px;
      border-width: 1px;
      border-radius: var(--border-radius-default);
      font-size: 14px;
      line-height: 1.3;
    }

    #nav-ymm .fitment-selector .submit {
      min-height: 39px;
      padding: 10px 14px;
      border-radius: 0;
      font-size: 15px;
      letter-spacing: normal;
      line-height: 1.3;
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched {
      flex-wrap: wrap;
      gap: 10px var(--space-2); /* rows match the search form's 10px row gap */
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-label {
      display: block;
      width: 100%;
      font-size: 15px;
      font-weight: var(--font-weight-medium);
      line-height: 1.3;
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-display {
      flex-wrap: nowrap;
      gap: var(--space-2);
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-chip {
      flex: 1 1 0;
      min-height: 32px;
      padding: 7px 10px;
      border-width: 1px;
      border-radius: var(--border-radius-default);
      font-size: 14px;
      line-height: 1.3;
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .remove-vehicle {
      min-height: 32px;
      padding: 6px 12px;
      border-radius: 0;
      font-size: 15px;
    }

    /* Phones: chips get the first row; Browse Parts (stretching) + reset share the next. */
    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-display {
      flex-basis: 100%;
    }

    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-browse {
      flex: 1 1 auto;
    }
  }

  @media (min-width: 768px) and (max-width: 1099px) {
    #nav-ymm .fitment-selector[data-vehicle-matched] .vehicle-matched-label {
      display: block;
    }
  }
/* END_SNIPPET:fitment-vehicle-selector */

/* START_SNIPPET:fyre-breadcrumbs (INDEX:101) */
.fyre-breadcrumbs {
  /* Defensive horizontal-scroll fallback for long trails on narrow
     viewports — carried over from the legacy fyre-breadcrumb.liquid
     section's own safeguard (Plan §3 AC). */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.fyre-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma: 10px uniform gap (text<->icon, icon<->text) — no token match */
  list-style: none;
  margin: 0;
  padding: 0;
}

.fyre-breadcrumbs__item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.fyre-breadcrumbs__link,
.fyre-breadcrumbs__text {
  font-family: var(--font-body); /* Smooch Sans */
  font-size: 20px; /* Figma: 20px, literal — no token */
  line-height: 1.3;
  color: #bdbdbd;
  text-decoration: none;
}

.fyre-breadcrumbs__link {
  transition: color 0.15s ease;
}

.fyre-breadcrumbs__link:hover,
.fyre-breadcrumbs__link:focus-visible {
  color: var(--color-white);
}

.fyre-breadcrumbs__item--current .fyre-breadcrumbs__text {
  color: var(--color-white); /* Figma: exact token match */
}

/* i.fyre-breadcrumbs__sep-icon (element + class) intentionally beats
   .fyre-icon--sm (single class) on specificity — same fix documented in
   fyre-icon-set.liquid's own comment, so this override wins regardless of
   stylesheet-tag load/concatenation order. */
i.fyre-breadcrumbs__sep-icon {
  font-size: 11px; /* Figma: 11px, between fyre-icon-set's discrete size steps */
  width: 11px;
  height: 11px;
  color: var(--color-accent); /* Figma: exact match to --color-brand-red */
}

@media screen and (max-width: 767px) {
  .fyre-breadcrumbs__link,
  .fyre-breadcrumbs__text {
    /* Reasoned mobile default (Plan §8.1) — no mobile Figma frame exists
       for this node; ~14-15px in line with other mobile label sizes. */
    font-size: 15px;
  }
}

/* ── fyre-breadcrumbs--lg modifier ───────────────────────────────────
   Sizing-only variant for sections/fyre-collection-header.liquid (Plan
   docs/section-plans/collection/collection-header.md §2a/§3), measured
   from Figma node 1801:8008 (desktop) / 1522:7707 (mobile). Scoped
   entirely to the modifier class so the default size used by
   fyre-page-header.liquid, at any breakpoint, is untouched. ─────────── */
.fyre-breadcrumbs--lg .fyre-breadcrumbs__link,
.fyre-breadcrumbs--lg .fyre-breadcrumbs__text {
  font-size: var(--font-size-h5); /* 24px — exact token match to the desktop node's Figma value */
}

/* Same specificity-override reasoning as the default-size icon rule above
   (element + class beats fyre-icon-set's single-class base rule
   regardless of stylesheet load order). */
.fyre-breadcrumbs--lg i.fyre-breadcrumbs__sep-icon {
  font-size: 12px; /* literal — Figma value for this node, same "no token at this exact step" situation as the default 11px */
  width: 12px;
  height: 12px;
}

@media screen and (max-width: 767px) {
  .fyre-breadcrumbs--lg .fyre-breadcrumbs__list {
    /* Figma mobile node (1522:7707): trail wraps to a second line instead
       of the default's horizontal-scroll fallback. Scoped to --lg only —
       fyre-page-header's mobile breadcrumb behavior is unaffected. */
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 8px;
  }
  .fyre-breadcrumbs--lg .fyre-breadcrumbs__link,
  .fyre-breadcrumbs--lg .fyre-breadcrumbs__text {
    font-size: var(--font-size-button-sm); /* 13px — exact token match, Figma mobile node */
  }
  .fyre-breadcrumbs--lg i.fyre-breadcrumbs__sep-icon {
    font-size: 8px; /* literal — Figma mobile node, no token at this step */
    width: 8px;
    height: 8px;
  }
}

/* Color-only variant for a light/white section background — the default
   #a4a4a4 link / white current-crumb colors assume a dark hero band.
   Separator chevron is unchanged (var(--color-accent)) in both variants. */
.fyre-breadcrumbs--on-light .fyre-breadcrumbs__link,
.fyre-breadcrumbs--on-light .fyre-breadcrumbs__text {
  color: var(--color-text-muted);
}
.fyre-breadcrumbs--on-light .fyre-breadcrumbs__link:hover,
.fyre-breadcrumbs--on-light .fyre-breadcrumbs__link:focus-visible {
  color: var(--color-text-secondary);
}
.fyre-breadcrumbs--on-light .fyre-breadcrumbs__item--current .fyre-breadcrumbs__text {
  color: var(--color-text-secondary);
}
/* END_SNIPPET:fyre-breadcrumbs */

/* START_SNIPPET:fyre-download-link (INDEX:110) */
.fyre-download-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: var(--space-3); /* 16px */
    padding: 20px 26px; /* 26px literal */
    background-color: var(--color-white);
    border: 2px solid var(--color-border); /* #b1b1b1 */
    border-radius: var(--border-radius-default); /* 2px */
    text-decoration: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
  }
  .fyre-download-link:hover,
  .fyre-download-link:focus-visible {
    border-color: var(--color-accent);
  }

  .fyre-download-link__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-default); /* 2px */
    background-color: var(--color-accent); /* #df0000 */
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 15px; /* literal */
    line-height: 1;
    color: var(--color-white);
  }

  .fyre-download-link__label {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 22px; /* literal */
    line-height: 1.35;
    color: var(--color-text-secondary);
  }

  .fyre-download-link__icon {
    flex-shrink: 0;
    font-size: 18px; /* literal */
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
  }
/* END_SNIPPET:fyre-download-link */

/* START_SNIPPET:fyre-group (INDEX:115) */
/*
    Intentional, scoped exception to this repo's "no !important" convention
    (golden checklist gate 2.8): fyre-group is a generic layout primitive
    that a merchant can nest ANY theme block inside — it has to reliably win
    against whatever CSS that nested block content brings (responsive
    width/hide overrides, the mobile flex-direction reversal below). Every
    !important here is deliberate and scoped to .fyre-group's own rules —
    do not "fix" this into a regression.

    The align-*/justify-*/items-align-*/hide-* classes below are compounded
    with .fyre-group (e.g. `.fyre-group.align-start`) rather than left as
    bare global utility classes: the reference theme (shopify-sisters-closet)
    ships a separate fyre-global-utility.css that defines these as
    theme-wide utilities, but this theme (shopify-shop-dap) has no
    equivalent utility stylesheet. Scoping them to .fyre-group keeps this
    primitive self-contained instead of introducing new bare, generic-named
    global classes (`.align-start`, `.hide-mobile`, etc.) as a side effect
    of this build.
  */

  .fyre-group {
    box-sizing: border-box;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .fyre-group--column {
    flex-direction: column;
    padding-left: calc(var(--fyre-row-gap, 0px) / 2);
    padding-right: calc(var(--fyre-row-gap, 0px) / 2);
  }
  .fyre-group--row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Column layout: apply gap to content */
  .fyre-group--column > .fyre-group__content {
    gap: var(--fyre-group-gap);
  }

  /* Width - Uses cascading CSS variable system */
  .fyre-group {
    width: var(--fyre-group-width-desktop);
  }

  /* Border Styles */
  .fyre-group--border-solid { border-style: solid; }
  .fyre-group--border-dashed { border-style: dashed; }
  .fyre-group--border-dotted { border-style: dotted; }

  @media (max-width: 989px) {
    .fyre-group {
      width: var(--fyre-group-width-tablet);
    }
  }

  @media (max-width: 749px) {
    .fyre-group {
      width: var(--fyre-group-width-mobile);
    }

    .fyre-group--mobile-stack > .fyre-group__content {
      flex-direction: column !important;
      gap: var(--fyre-group-gap);
    }
  }

  .fyre-group__media-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .fyre-group__bg-img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    -webkit-user-drag: none;
  }
  .fyre-group__bg-img--cover { object-fit: cover; }
  .fyre-group__bg-img--contain { object-fit: contain; }

  .fyre-group__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  .fyre-group__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
  }

  .fyre-group__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    flex-wrap: inherit;
    width: auto;
    min-width: 100%;
  }

  .fyre-group--column > .fyre-group__content > div.shopify-block {
    width: 100%;
  }

  /* Row layout's counterpart to the column rule above: gives each block's
     own Shopify-generated wrapper div a real, percentage-resolvable height
     to fill (the row's own cross-axis stretch height) — without this, a
     block like blocks/callout-box.liquid setting height:100% on itself has
     nothing definite to resolve against (its direct parent, this wrapper
     div, would otherwise have no explicit height), so its own height:100%
     silently computes to auto instead of actually filling the row. */
  .fyre-group--row > .fyre-group__content > div.shopify-block {
    height: 100%;
  }

  /* Row layout: negative margin to offset item padding; row-gap for wrapped row spacing */
  .fyre-group--row > .fyre-group__content {
    margin-left: var(--fyre-group-row-margin);
    margin-right: var(--fyre-group-row-margin);
    row-gap: var(--fyre-group-gap);
    width: calc(100% + var(--fyre-row-gap)) !important;
  }
  .fyre-group--column > .fyre-group__content {
    height: 100%;
  }

  /* Row items: horizontal padding for gap spacing */
  .fyre-group--row .fyre-group__item {
    box-sizing: border-box;
    padding-left: calc(var(--fyre-group-gap, 20px) / 2);
    padding-right: calc(var(--fyre-group-gap, 20px) / 2);
  }

  /* Remove pointer events if group is linked, but re-enable them for usual interactive descendants: */
  .fyre-group__link ~ .fyre-group__content {
    pointer-events: none;
    align-self: stretch;
  }
  .fyre-group__link ~ .fyre-group__content a,
  .fyre-group__link ~ .fyre-group__content button,
  .fyre-group__link ~ .fyre-group__content input,
  .fyre-group__link ~ .fyre-group__content textarea,
  .fyre-group__link ~ .fyre-group__content select {
    pointer-events: auto;
  }

  .fyre-group--row > .fyre-group__content > .fyre-group {
    align-self: stretch;
  }

  /* Horizontal/vertical alignment classes — scoped to .fyre-group, see note above */
  .fyre-group.align-start    { align-items: flex-start !important; }
  .fyre-group.align-end      { align-items: flex-end !important; }
  .fyre-group.align-center   { align-items: center !important; }
  .fyre-group.align-stretch  { align-items: stretch !important; }
  .fyre-group.align-baseline { align-items: baseline !important; }

  .fyre-group.justify-start   { justify-content: flex-start !important; }
  .fyre-group.justify-end     { justify-content: flex-end !important; }
  .fyre-group.justify-center  { justify-content: center !important; }
  .fyre-group.justify-between { justify-content: space-between !important; }
  .fyre-group.justify-around  { justify-content: space-around !important; }
  .fyre-group.justify-evenly  { justify-content: space-evenly !important; }

  /* Items Alignment classes */
  .items-align-start    { align-items: flex-start !important; }
  .items-align-center   { align-items: center !important; }
  .items-align-end      { align-items: flex-end !important; }
  .items-align-stretch  { align-items: stretch !important; }
  .items-align-baseline { align-items: baseline !important; }

  /* Stretch: fill shopify-block height for inner groups in a stretch row */
  .items-align-stretch.fyre-group--row > .fyre-group__content > div.shopify-block > .fyre-group,
  .align-stretch.fyre-group--row > .fyre-group__content > div.shopify-block > .fyre-group {
    height: 100%;
  }

  /* Hide-per-breakpoint — scoped to .fyre-group, see note above */
  @media (max-width: 749px) {
    .fyre-group.hide-mobile { display: none !important; }
  }
  @media (min-width: 750px) and (max-width: 989px) {
    .fyre-group.hide-tablet { display: none !important; }
  }
  @media (min-width: 990px) {
    .fyre-group.hide-desktop { display: none !important; }
  }
/* END_SNIPPET:fyre-group */

/* START_SNIPPET:fyre-icon-set (INDEX:116) */
/* inline-flex + centering (not just vertical-align) so the glyph centers
     inside its fixed-size box regardless of a given Font Awesome icon's own
     internal ascent/descent metrics — vertical-align alone left some icons
     sitting visibly low next to adjacent text.

     WHY the `i` type selector: fontawesome-shopify.css's own base rule
     (.fa, .fa-solid, .far, ...) sets `display: inline-block` at the exact
     same specificity (one class) as this rule. Whichever stylesheet's
     <link> happens to load later in <head> would otherwise win that tie —
     confirmed live: FA's rule was winning, silently killing this flexbox
     centering entirely (an icon inside its own flex-item context, so the
     computed value read "block", not "inline-block" — blockification
     disguised which rule had actually won). `i.fyre-icon` (0,1,1) beats
     `.fa-solid` (0,1,0) outright, so this no longer depends on load order. */
  i.fyre-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .fyre-icon--sm  { font-size: 14px; width: 14px; height: 14px; }
  .fyre-icon--md  { font-size: 20px; width: 20px; height: 20px; }
  .fyre-icon--lg  { font-size: 28px; width: 28px; height: 28px; }
  .fyre-icon--xl  { font-size: 40px; width: 40px; height: 40px; }
/* END_SNIPPET:fyre-icon-set */

/* START_SNIPPET:mobile-nav (INDEX:129) */
/* Right-edge flyout — same pattern as snippets/cart-drawer.liquid (root
     visibility/pointer-events toggle, panel transform/transition, overlay
     fade). visibility+pointer-events (not display) let opacity/transform
     animate; visibility's transition-delay matches the panel's 0.3s slide
     to keep the root out of the a11y/hit-testing tree while closed. */
  .mobile-nav--drawer {
    position: fixed;
    inset: 0;
    z-index: 300; /* matches cart-drawer's scale; header stays static while open */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.3s;
  }
  .mobile-nav--drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav--drawer {
      transition: visibility 0s linear 0.15s;
    }
    .mobile-nav--drawer.is-open {
      transition: visibility 0s linear 0s;
    }
  }
  .mobile-nav--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    /* Fades in sync with the panel's 0.3s slide instead of snapping with
       the visibility toggle above. */
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .mobile-nav--drawer.is-open .mobile-nav--overlay {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav--overlay {
      transition: opacity 0.15s linear;
    }
  }
  .mobile-nav--panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* Wider than cart-drawer's 400px cap — this panel is denser (search,
       vehicle chips, full nav, Shop By Vehicle grid, utility + contact
       info) and 420px still reads full-bleed on any real phone. */
    width: min(420px, 100vw);
    overflow-y: auto;
    /* Setting overflow-y alone makes overflow-x compute as auto (not
       visible), triggering an unwanted horizontal scrollbar. */
    overflow-x: hidden;
    background-color: var(--color-header-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    scrollbar-width: none; /* still scrolls; scrollbar hidden */
  }
  .mobile-nav--panel::-webkit-scrollbar {
    display: none;
  }
  .mobile-nav--drawer.is-open .mobile-nav--panel {
    transform: translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav--panel {
      transform: none;
      opacity: 0;
      transition: opacity 0.15s linear;
    }
    .mobile-nav--drawer.is-open .mobile-nav--panel {
      opacity: 1;
    }
  }

  .mobile-nav--header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background-color: var(--color-header-bg);
    flex-shrink: 0;
  }
  .mobile-nav--title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-white);
  }
  .mobile-nav--logo-link {
    display: flex;
    align-items: center;
  }
  .mobile-nav--logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
  }
  .mobile-nav--close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    border-radius: var(--border-radius-sm, 4px);
    transition: color 0.2s ease;
  }
  .mobile-nav--close:hover {
    color: var(--color-accent);
  }

  .mobile-nav--search-wrap {
    padding: 4px 18px 16px;
  }
  /* Static placeholder (Figma node 1522:7424), real values — not wired to
     search yet. */
  .mobile-nav--search-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--color-text-muted);
    border-radius: var(--border-radius-default);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-border);
  }

  .mobile-nav--vehicle-row {
    padding: 0 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-nav--vehicle-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-border);
  }
  .mobile-nav--vehicle-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .mobile-nav--chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: 13px;
    color: var(--color-white);
    text-decoration: none;
    border: 1px solid var(--color-text-muted);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
  }
  .mobile-nav--vehicle-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-border);
    padding: 4px;
  }
  .mobile-nav--vehicle-reset[hidden] { display: none; }
  .mobile-nav--reset-icon { font-size: 11px; width: 11px; height: 11px; }

  .mobile-nav--list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-nav--item {
    border-bottom: 1px solid var(--color-border-dark);
  }
  .mobile-nav--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 16px 18px;
    font-family: var(--font-display);
    font-size: 24px;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .mobile-nav--link:hover {
    color: var(--color-accent);
  }
  .mobile-nav--chevron { color: var(--color-accent); transition: transform 0.2s ease; }
  .mobile-nav--summary {
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav--summary::-webkit-details-marker { display: none; }
  .mobile-nav--details[open] .mobile-nav--summary .mobile-nav--chevron {
    transform: rotate(90deg);
  }
  /* No CSS transition here on purpose — the JS below animates this via the
     Web Animations API (explicit height keyframes measured fresh on every
     toggle), which is the only technique that's actually smooth AND
     correct in both directions for a native <details> (a CSS max-height/
     grid-rows transition races the browser's own instant open/close and
     looks janky/wrong). */
  .mobile-nav--sub-list,
  .mobile-nav--mega-body {
    overflow: hidden;
  }
  .mobile-nav--sub-list {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 0;
  }
  .mobile-nav--sub-link {
    height: auto;
    padding: 10px 18px 10px 32px;
    font-size: 18px;
  }
  .mobile-nav--view-all {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Mega-menu override accordion body (see doc-comment) — wraps the
     `data-mobile-mega-fragment` templates JS clones in, in place of a
     native `.mobile-nav--sub-list`. Each column is its own
     `.mobile-nav--mega-col`; links reuse `.mobile-nav--sub-link` directly. */
  .mobile-nav--mega-body {
    padding-bottom: 8px;
  }
  .mobile-nav--mega-col + .mobile-nav--mega-col {
    margin-top: 12px;
  }
  .mobile-nav--mega-col-heading {
    margin: 0;
    padding: 10px 18px 4px 32px;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-border);
  }

  .mobile-nav--sbv {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--color-border-dark);
  }
  .mobile-nav--sbv-heading {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--color-white);
    margin: 0;
    text-transform: uppercase;
  }
  .mobile-nav--chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mobile-nav--utility-row {
    padding: 16px 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
    border-bottom: 1px solid var(--color-border-dark);
  }
  .mobile-nav--utility-link {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-border);
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-nav--contact {
    padding: 20px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
  }
  .mobile-nav--contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    text-decoration: none;
  }
  .mobile-nav--contact-row .fyre-icon { color: var(--color-accent); font-size: 14px; width: 14px; height: 14px; }
  .mobile-nav--contact-row--phone span {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
    color: var(--color-white);
  }
  .mobile-nav--contact-row--hours span {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--color-border);
  }

  @media (min-width: 1100px) {
    .mobile-nav--drawer { display: none !important; }
  }
/* END_SNIPPET:mobile-nav */