/** Shopify CDN: Minification failed

Line 5682:10 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:fyre-account-settings (INDEX:4) */
.settings__top {
    margin-bottom: 22px;
  }
  .settings__title {
    font-size: clamp(28px, 3.6vw, 40px);
  }
  .settings__sub {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .settings__card {
    position: relative;
    margin-bottom: 16px;
    padding: 26px 24px 10px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
  }
  .settings__card-title {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 0.01em;
  }
  .settings__card-sub {
    margin: 6px 0 14px;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .settings__saved {
    position: absolute;
    top: 28px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2f7d32;
  }
  .settings__saved::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .settings__group {
    margin: 16px 0 4px;
  }
  .settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line-2, #e6e2da);
  }
  .settings__row:last-child {
    border-bottom: 0;
  }
  .settings__row-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }
  .settings__row-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .settings__row-sub a {
    color: var(--color-accent, #d11a1a);
  }
  .settings__switch {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    padding: 0;
    border: 0;
    background: var(--color-line, #c7c1b6);
    cursor: pointer;
  }
  .settings__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    transition: left 0.15s;
  }
  .settings__switch[aria-checked='true'] {
    background: var(--color-accent, #d11a1a);
  }
  .settings__switch[aria-checked='true']::after {
    left: 18px;
  }
  .settings__switch:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .settings__switch:focus-visible {
    outline: 2px solid var(--color-ink, #191814);
    outline-offset: 2px;
  }
  .settings__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding-bottom: 16px;
  }
  @media (max-width: 640px) {
    .settings__fields {
      grid-template-columns: 1fr;
    }
  }
  .settings__field {
    display: grid;
    gap: 6px;
  }
  .settings__field label,
  .settings__field .settings__label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
  }
  .settings__field select,
  .settings__value {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-line, #c7c1b6);
    background: var(--color-paper, #f7f4f0);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-ink, #191814);
    box-sizing: border-box;
  }
  .settings__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .settings__value a {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--color-accent, #d11a1a);
  }
  .settings__export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 16px;
    padding: 16px 18px;
    background: var(--color-paper-2, #ebe8e0);
  }
  .settings__export .garage__btn {
    background: var(--color-ink, #191814);
  }
  .settings__danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: #fbe5e5;
    border: 2px solid var(--color-accent, #d11a1a);
  }
  .settings__danger h2 {
    margin: 4px 0 6px;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
  }
  .settings__danger p {
    margin: 0;
    font-size: 14px;
  }
  .settings__danger .garage__btn {
    background: transparent;
    border-color: var(--color-accent, #d11a1a);
    color: var(--color-accent, #d11a1a);
  }
  .settings__danger .garage__btn:hover {
    background: var(--color-accent, #d11a1a);
    color: #fff;
  }
  .settings__notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #eef6ee;
    border-left: 3px solid #2f7d32;
    font-size: 14px;
  }
/* END_SECTION:fyre-account-settings */

/* START_SECTION:fyre-addresses (INDEX:5) */
.addr__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }
  .addr__title {
    font-size: clamp(26px, 3.4vw, 38px);
  }
  .addr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .addr__card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 2px;
  }
  .addr__card--default {
    border: 2px solid var(--color-accent, #d11a1a);
    padding: 19px;
  }
  .addr__name {
    margin: 0 0 10px;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
  .addr__lines {
    margin: 0;
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
  }
  .addr__flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 10px 10px 12px;
    background: var(--color-paper-2, #ebe8e0);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    text-decoration: none;
  }
  .addr__card--default .addr__flag {
    color: var(--color-accent, #d11a1a);
  }
  a.addr__flag:hover {
    background: var(--color-line-2, #e6e2da);
  }
  .addr__switch {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    background: var(--color-line, #c7c1b6);
  }
  .addr__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    transition: left 0.15s;
  }
  .addr__card--default .addr__switch {
    background: var(--color-accent, #d11a1a);
  }
  .addr__card--default .addr__switch::after {
    left: 16px;
  }
  .addr__actions {
    display: flex;
    gap: 18px;
    margin-top: 18px;
  }
  .addr__action {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink, #191814);
    text-decoration: none;
  }
  .addr__action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .addr__action--danger {
    color: var(--color-accent, #d11a1a);
  }
  .addr__note {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .addr__note a {
    color: var(--color-accent, #d11a1a);
  }
/* END_SECTION:fyre-addresses */

/* START_SECTION:fyre-b2b-dashboard (INDEX:8) */
/* ─── fyre-b2b-dashboard scoped styles ────────────────────────────────────── */

  .b2b--dashboard {
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-text, #1a1a1a);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 14px);
    padding-top: var(--spacing-40, 40px);
    padding-bottom: var(--spacing-80, 80px);
  }

  .b2b--dashboard__inner {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--spacing-content-padding, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32, 32px);
  }

  /* ─── Welcome row ──────────────────────────────────────────────────────────── */

  .b2b--welcome {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12, 12px);
  }

  .b2b--welcome__heading {
    font-family: var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
    font-size: var(--font-size-h1, 40px);
    font-weight: var(--font-weight-heading, 400);
    line-height: var(--line-height-heading, 1);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: 0.02em;
    color: var(--color-ink, #191814);
    margin: 0;
  }

  .b2b--welcome__heading em {
    font-style: normal;
    color: var(--color-accent, #d94f1e);
  }

  /* ─── KPI tiles ────────────────────────────────────────────────────────────── */

  .b2b--kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16, 16px);
  }

  .b2b--kpi-tile {
    background: var(--color-surface, #f7f5f0);
    border: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    border-radius: var(--border-radius-card, 0px);
    padding: var(--spacing-card-padding, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6, 6px);
    position: relative;
  }

  .b2b--kpi-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-accent, #d94f1e);
  }

  .b2b--kpi-tile__label {
    font-size: var(--font-size-label, 12px);
    letter-spacing: var(--letter-spacing-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-muted, #8a857b);
    font-weight: var(--font-weight-semibold, 600);
  }

  .b2b--kpi-tile__value {
    font-family: var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    line-height: 1;
    color: var(--color-ink, #191814);
  }

  .b2b--kpi-tile__sub {
    font-size: var(--font-size-caption, 12px);
    color: var(--color-muted, #8a857b);
  }

  /* ─── CTA row ──────────────────────────────────────────────────────────────── */

  .b2b--cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12, 12px);
  }

  .b2b--cta-row__heading {
    font-size: var(--font-size-label, 12px);
    letter-spacing: var(--letter-spacing-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-muted, #8a857b);
    font-weight: var(--font-weight-semibold, 600);
    margin: 0;
  }

  .b2b--cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8, 8px);
  }

  .b2b--btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8, 8px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-button-m, 15px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-button, 2px);
    padding: var(--spacing-button-padding-y, 14px) var(--spacing-button-padding-x, 24px);
    transition:
      background 0.15s ease,
      color 0.15s ease;
    white-space: nowrap;
  }

  .b2b--btn--primary {
    background: var(--color-primary, #e85d04);
    color: var(--color-text-inverse, #f5f5f0);
  }

  .b2b--btn--primary:hover,
  .b2b--btn--primary:focus-visible {
    background: var(--color-accent-hover, #bf4318);
    outline: 2px solid var(--color-accent, #d94f1e);
    outline-offset: 2px;
  }

  .b2b--btn--secondary {
    background: transparent;
    color: var(--color-ink, #191814);
    border: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
  }

  .b2b--btn--secondary:hover,
  .b2b--btn--secondary:focus-visible {
    border-color: var(--color-primary, #e85d04);
    color: var(--color-primary, #e85d04);
    outline: none;
  }

  /* ─── Panel base ───────────────────────────────────────────────────────────── */

  .b2b--panel {
    border: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    background: var(--color-surface, #f7f5f0);
  }

  .b2b--panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-16, 16px) var(--spacing-20, 20px);
    border-bottom: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
  }

  .b2b--panel__title {
    font-family: var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
    font-size: var(--font-size-h4, 18px);
    font-weight: var(--font-weight-heading, 400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink, #191814);
    margin: 0;
  }

  .b2b--panel__body {
    padding: var(--spacing-20, 20px);
  }

  /* ─── Rapid order pad ──────────────────────────────────────────────────────── */

  .b2b--rapid-order__tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    margin-bottom: var(--spacing-16, 16px);
  }

  .b2b--rapid-order__tab {
    font-size: var(--font-size-label, 12px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-muted, #8a857b);
    padding: var(--spacing-8, 8px) var(--spacing-16, 16px);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition:
      color 0.1s,
      border-color 0.1s;
  }

  .b2b--rapid-order__tab[aria-selected='true'] {
    color: var(--color-ink, #191814);
    border-bottom-color: var(--color-accent, #d94f1e);
  }

  .b2b--rapid-order__pane {
    display: none;
  }

  .b2b--rapid-order__pane[aria-hidden='false'] {
    display: block;
  }

  .b2b--rapid-order__sku-area {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--font-size-small, 12px);
    color: var(--color-ink, #191814);
    background: var(--color-paper, #f7f4f0);
    border: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    border-radius: var(--border-radius-input, 2px);
    padding: var(--spacing-12, 12px);
    box-sizing: border-box;
  }

  .b2b--rapid-order__sku-area:focus {
    outline: 2px solid var(--color-accent, #d94f1e);
    outline-offset: -1px;
    border-color: var(--color-accent, #d94f1e);
  }

  .b2b--rapid-order__hint {
    font-size: var(--font-size-caption, 12px);
    color: var(--color-muted, #8a857b);
    margin: var(--spacing-6, 6px) 0 var(--spacing-12, 12px);
  }

  .b2b--rapid-order__csv-drop {
    border: 2px dashed var(--color-border, #d0d0c8);
    border-radius: var(--border-radius-sm, 4px);
    padding: var(--spacing-32, 32px) var(--spacing-20, 20px);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s;
  }

  .b2b--rapid-order__csv-drop:hover,
  .b2b--rapid-order__csv-drop.b2b--is-dragover {
    border-color: var(--color-accent, #d94f1e);
  }

  .b2b--rapid-order__csv-drop p {
    font-size: var(--font-size-body, 14px);
    color: var(--color-muted, #8a857b);
    margin: 0 0 var(--spacing-12, 12px);
  }

  .b2b--rapid-order__csv-input {
    display: none;
  }

  .b2b--rapid-order__actions {
    display: flex;
    gap: var(--spacing-8, 8px);
    flex-wrap: wrap;
    margin-top: var(--spacing-16, 16px);
  }

  /* ─── Fleet grid ───────────────────────────────────────────────────────────── */

  .b2b--fleet-grid__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .b2b--fleet-grid__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body, 14px);
  }

  .b2b--fleet-grid__table th {
    font-size: var(--font-size-label, 12px);
    letter-spacing: var(--letter-spacing-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-muted, #8a857b);
    font-weight: var(--font-weight-semibold, 600);
    text-align: left;
    padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
    border-bottom: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    white-space: nowrap;
  }

  .b2b--fleet-grid__table td {
    padding: var(--spacing-10, 10px) var(--spacing-12, 12px);
    border-bottom: var(--border-width-default, 1px) solid var(--color-line-2, #dfdcd2);
    vertical-align: middle;
    color: var(--color-ink, #191814);
  }

  .b2b--fleet-grid__table tr:last-child td {
    border-bottom: none;
  }

  .b2b--fleet-grid__table tr:hover td {
    background: var(--color-paper-2, #ebe7df);
  }

  .b2b--status-badge {
    display: inline-block;
    font-size: var(--font-size-badge, 11px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--border-radius-badge, 2px);
    padding: 2px var(--spacing-6, 6px);
  }

  .b2b--status-badge--open {
    background: var(--color-warning-light, #f2e6c8);
    color: var(--color-warning, #5a4a2a);
  }
  .b2b--status-badge--pending {
    background: var(--color-paper-2, #ebe7df);
    color: var(--color-muted, #8a857b);
  }
  .b2b--status-badge--complete {
    background: var(--color-success-light, #def0de);
    color: var(--color-accent-green, #2d6b3a);
  }

  .b2b--fleet-grid__empty {
    text-align: center;
    color: var(--color-muted, #8a857b);
    padding: var(--spacing-40, 40px) var(--spacing-20, 20px);
    font-size: var(--font-size-body, 14px);
  }

  /* ─── Order history ────────────────────────────────────────────────────────── */

  .b2b--order-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .b2b--order-history__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12, 12px);
    padding: var(--spacing-12, 12px) 0;
    border-bottom: var(--border-width-default, 1px) solid var(--color-line-2, #dfdcd2);
    flex-wrap: wrap;
  }

  .b2b--order-history__row:last-child {
    border-bottom: none;
  }

  .b2b--order-history__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .b2b--order-history__number {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink, #191814);
    font-size: var(--font-size-body, 14px);
  }

  .b2b--order-history__date {
    font-size: var(--font-size-caption, 12px);
    color: var(--color-muted, #8a857b);
  }

  .b2b--order-history__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-12, 12px);
    flex-shrink: 0;
  }

  .b2b--order-history__amount {
    font-family: var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
    font-size: var(--font-size-h4, 18px);
    font-weight: var(--font-weight-heading, 400);
    color: var(--color-ink, #191814);
  }

  .b2b--order-history__link {
    font-size: var(--font-size-small, 12px);
    color: var(--color-primary, #e85d04);
    text-decoration: none;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.04em;
  }

  .b2b--order-history__link:hover {
    text-decoration: underline;
  }

  .b2b--order-history__empty {
    text-align: center;
    color: var(--color-muted, #8a857b);
    padding: var(--spacing-32, 32px) 0;
  }

  .b2b--panel__footer {
    padding: var(--spacing-12, 12px) var(--spacing-20, 20px);
    border-top: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
    text-align: center;
  }

  /* ─── Auth gate ────────────────────────────────────────────────────────────── */

  .b2b--auth-gate {
    text-align: center;
    padding: var(--spacing-80, 80px) var(--spacing-24, 24px);
    background: var(--color-surface, #f7f5f0);
    border: var(--border-width-default, 1px) solid var(--color-border, #d0d0c8);
  }

  .b2b--auth-gate__heading {
    font-family: var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink, #191814);
    margin: 0 0 var(--spacing-12, 12px);
  }

  .b2b--auth-gate__copy {
    font-size: var(--font-size-body, 14px);
    color: var(--color-muted, #8a857b);
    margin: 0 0 var(--spacing-24, 24px);
  }

  /* ─── Tablet 750px+ ────────────────────────────────────────────────────────── */

  @media (min-width: 750px) {
    .b2b--kpi-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .b2b--cta-group {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .b2b--rapid-order__actions {
      justify-content: flex-start;
    }
  }

  /* ─── Desktop 990px+ ───────────────────────────────────────────────────────── */

  @media (min-width: 990px) {
    .b2b--dashboard__inner {
      gap: var(--spacing-40, 40px);
    }

    .b2b--welcome__heading {
      font-size: var(--font-size-h5, 40px);
    }

    .b2b--dashboard__main-cols {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: var(--spacing-32, 32px);
      align-items: start;
    }

    .b2b--dashboard__side {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-24, 24px);
    }
  }
/* END_SECTION:fyre-b2b-dashboard */

/* START_SECTION:fyre-builds (INDEX:17) */
.builds__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }
  .builds__title {
    font-size: clamp(28px, 3.6vw, 40px);
  }
  .builds__sub {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .builds__top .garage__btn {
    padding: 13px 22px;
  }
  .builds__status-msg {
    margin: -8px 0 16px;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
  }

  /* ── board ────────────────────────────────────────────────────── */
  .builds__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (max-width: 520px) {
    .builds__grid {
      grid-template-columns: 1fr;
    }
  }
  .builds__card {
    display: grid;
    grid-template-columns: 42% 1fr;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 2px;
    overflow: hidden;
    transition:
      box-shadow 0.18s,
      transform 0.18s;
  }
  .builds__card:hover {
    box-shadow: 0 12px 28px rgba(25, 24, 20, 0.08);
    transform: translateY(-2px);
  }
  @media (max-width: 520px) {
    .builds__card {
      grid-template-columns: 1fr;
    }
    .builds__art {
      aspect-ratio: 16 / 9;
    }
  }
  .builds__art {
    position: relative;
    display: grid;
    place-items: center;
    background: var(--color-paper-2, #ebe8e0);
    border-right: 1px solid var(--color-line, #c7c1b6);
    overflow: hidden;
  }
  .builds__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
  }
  .builds__art-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.6;
    text-align: center;
    padding: 12px;
  }
  .builds__body {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
  }
  .builds__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
  }
  .builds__state::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .builds__state--progress {
    color: var(--color-accent, #d11a1a);
  }
  .builds__state--complete {
    color: #2f7d32;
  }
  .builds__name {
    margin: 8px 0 6px;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 0.01em;
    line-height: 1.08;
  }
  .builds__vehicle {
    margin: 0;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .builds__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 0;
    border-top: 1px solid var(--color-line-2, #e6e2da);
    border-bottom: 1px solid var(--color-line-2, #e6e2da);
  }
  .builds__stat dt {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
    margin: 0 0 4px;
  }
  .builds__stat dd {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 22px;
    line-height: 1;
  }
  .builds__stat--money dd {
    color: var(--color-accent, #d11a1a);
  }
  .builds__bar {
    height: 4px;
    margin: 16px 0;
    background: var(--color-line-2, #e6e2da);
  }
  .builds__bar span {
    display: block;
    height: 100%;
    background: var(--color-accent, #d11a1a);
  }
  .builds__bar--complete span {
    background: #2f7d32;
  }
  .builds__open {
    width: 100%;
  }
  .builds__updated {
    margin: 12px 0 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
  }

  /* ── templates ────────────────────────────────────────────────── */
  .builds__templates {
    margin-top: 28px;
    border: 1px solid var(--color-line, #c7c1b6);
    background: #fff;
  }
  .builds__templates-head {
    margin: 0;
    padding: 14px 20px;
    background: var(--color-ink, #191814);
  }
  .builds__templates-head .garage__eyebrow {
    margin: 0;
  }
  .builds__templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .builds__template {
    padding: 20px 22px 22px;
    border-left: 1px solid var(--color-line, #c7c1b6);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .builds__template:first-child {
    border-left: 0;
  }
  .builds__template h3 {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.02em;
  }
  .builds__template p {
    margin: 0;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
    flex: 1;
  }
  .builds__template .garage__link {
    align-self: flex-start;
    color: var(--color-accent, #d11a1a);
    text-decoration: none;
    font-weight: 700;
  }
  .builds__template .garage__link:hover {
    text-decoration: underline;
  }

  /* ── detail ───────────────────────────────────────────────────── */
  .builds__back {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    text-decoration: none;
  }
  .builds__back:hover {
    color: var(--color-accent, #d11a1a);
  }
  .builds__detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .builds__detail-actions .garage__btn--ghost {
    border-color: var(--color-ink, #191814);
    background: #fff;
  }
  .builds__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 2fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
  }
  @media (max-width: 640px) {
    .builds__summary {
      grid-template-columns: repeat(3, 1fr);
    }
    .builds__summary .builds__bar {
      grid-column: 1 / -1;
    }
  }
  .builds__summary .builds__bar {
    margin: 0;
  }
  .builds__parts {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .builds__part {
    display: grid;
    grid-template-columns: auto 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
  }
  .builds__part--bought {
    background: var(--color-paper, #f7f4f0);
  }
  .builds__part--bought .builds__part-title {
    text-decoration: line-through;
    opacity: 0.6;
  }
  .builds__check {
    display: grid;
    justify-items: center;
    gap: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    cursor: pointer;
  }
  .builds__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent, #d11a1a);
    cursor: pointer;
  }
  .builds__thumb {
    width: 72px;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--color-paper-2, #ebe8e0);
  }
  .builds__part-vendor {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .builds__part-title {
    margin: 3px 0;
    font-size: 15px;
    font-weight: 600;
  }
  .builds__part-title a {
    color: inherit;
    text-decoration: none;
  }
  .builds__part-title a:hover {
    color: var(--color-accent, #d11a1a);
  }
  .builds__part-meta {
    margin: 0;
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .builds__part-side {
    display: grid;
    justify-items: end;
    gap: 6px;
  }
  .builds__part-price {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 20px;
  }
  .builds__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-line, #c7c1b6);
  }
  .builds__qty button {
    width: 26px;
    height: 26px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
  }
  .builds__qty span {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
  }
  @media (max-width: 560px) {
    .builds__part {
      grid-template-columns: auto 56px minmax(0, 1fr);
    }
    .builds__thumb {
      width: 56px;
    }
    .builds__part-side {
      grid-column: 2 / -1;
      justify-items: start;
      grid-auto-flow: column;
      align-items: center;
    }
  }
  .builds__detail-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
  }

  /* ── new build dialog (reuses .garage__dialog / .garage__form) ── */
  .builds__dialog .garage__form {
    gap: 14px;
  }
/* END_SECTION:fyre-builds */

/* START_SECTION:fyre-customer-account (INDEX:32) */
.customer-account--section {
    background-color: var(--color-background, #f5f5f0);
    padding-top: var(--spacing-section-padding-y, 48px);
    padding-bottom: var(--spacing-section-padding-y, 48px);
  }

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

  .customer-account--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h1, 36px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-16, 16px);
  }

  .customer-account--meta {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    color: var(--color-ink-light, #666);
    margin-bottom: var(--spacing-32, 32px);
  }

  .customer-account--meta a {
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-account--meta a:hover {
    text-decoration: underline;
  }

  .customer-account--subheading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h3, 20px);
    font-weight: var(--font-weight-heading, 400);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    color: var(--color-ink, #191814);
    margin: 0 0 var(--spacing-16, 16px);
  }

  .customer-account--orders {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
  }

  .customer-account--orders th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-border, #d4d0c8);
    font-weight: 600;
    color: var(--color-ink, #191814);
  }

  .customer-account--orders td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #d4d0c8);
    color: var(--color-ink, #191814);
  }

  .customer-account--orders a {
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-account--orders a:hover {
    text-decoration: underline;
  }

  .customer-account--empty {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    color: var(--color-ink-light, #666);
  }

  @media (max-width: 768px) {
    .customer-account--orders,
    .customer-account--orders thead,
    .customer-account--orders tbody,
    .customer-account--orders th,
    .customer-account--orders td,
    .customer-account--orders tr {
      display: block;
    }

    .customer-account--orders thead {
      display: none;
    }

    .customer-account--orders td {
      padding: 8px 16px;
      text-align: right;
    }

    .customer-account--orders td::before {
      content: attr(data-label);
      float: left;
      font-weight: 600;
    }
  }
/* END_SECTION:fyre-customer-account */

/* START_SECTION:fyre-customer-activate (INDEX:33) */
.customer-activate--section {
    background-color: var(--color-background, #f5f5f0);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-section-padding-y, 48px) var(--spacing-content-padding, 24px);
  }

  .customer-activate--card {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-40, 40px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customer-activate--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-24, 24px);
    text-align: center;
  }

  .customer-activate--form .field {
    margin-bottom: var(--spacing-16, 16px);
  }

  .customer-activate--form label {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    font-weight: 500;
    color: var(--color-ink, #191814);
    margin-bottom: 6px;
  }

  .customer-activate--form input[type='password'] {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    border: 1px solid var(--color-border, #d4d0c8);
    border-radius: var(--radius-default, 4px);
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-ink, #191814);
    transition: border-color 0.2s ease;
  }

  .customer-activate--form input:focus {
    outline: none;
    border-color: var(--color-accent, #e85d24);
  }

  .customer-activate--submit {
    width: 100%;
    padding: 14px 24px;
    margin-top: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-accent, #e85d24);
    border: none;
    border-radius: var(--radius-default, 4px);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease;
  }

  .customer-activate--submit:hover {
    background-color: var(--color-accent-hover, #d04f1c);
  }

  .customer-activate--decline {
    display: block;
    margin-top: var(--spacing-16, 16px);
    text-align: center;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    color: var(--color-ink-light, #666);
  }

  .customer-activate--decline a {
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-activate--decline a:hover {
    text-decoration: underline;
  }
/* END_SECTION:fyre-customer-activate */

/* START_SECTION:fyre-customer-addresses (INDEX:34) */
.customer-addresses--section {
    background-color: var(--color-background, #f5f5f0);
    padding-top: var(--spacing-section-padding-y, 48px);
    padding-bottom: var(--spacing-section-padding-y, 48px);
  }

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

  .customer-addresses--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h1, 36px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-32, 32px);
  }

  .customer-addresses--back {
    display: inline-block;
    margin-bottom: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-addresses--back:hover {
    text-decoration: underline;
  }

  .customer-addresses--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-24, 24px);
    margin-bottom: var(--spacing-32, 32px);
  }

  .customer-addresses--card {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-24, 24px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customer-addresses--card p {
    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-ink, #191814);
    margin: 0 0 var(--spacing-16, 16px);
  }

  .customer-addresses--card-actions {
    display: flex;
    gap: var(--spacing-8, 8px);
  }

  .customer-addresses--card-actions button,
  .customer-addresses--card-actions a {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    color: var(--color-accent, #e85d24);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
  }

  .customer-addresses--card-actions button:hover,
  .customer-addresses--card-actions a:hover {
    text-decoration: underline;
  }

  .customer-addresses--default-badge {
    display: inline-block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent, #e85d24);
    margin-bottom: var(--spacing-8, 8px);
  }

  .customer-addresses--add-btn {
    display: inline-block;
    padding: 14px 24px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-accent, #e85d24);
    border: none;
    border-radius: var(--radius-default, 4px);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .customer-addresses--add-btn:hover {
    background-color: var(--color-accent-hover, #d04f1c);
  }

  /* ── Form styles ── */
  .customer-addresses--form {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-32, 32px);
    margin-bottom: var(--spacing-32, 32px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: none;
  }

  .customer-addresses--form.active {
    display: block;
  }

  .customer-addresses--form .field {
    margin-bottom: var(--spacing-16, 16px);
  }

  .customer-addresses--form label {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    font-weight: 500;
    color: var(--color-ink, #191814);
    margin-bottom: 6px;
  }

  .customer-addresses--form input[type='text'],
  .customer-addresses--form input[type='tel'],
  .customer-addresses--form select {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    border: 1px solid var(--color-border, #d4d0c8);
    border-radius: var(--radius-default, 4px);
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-ink, #191814);
    transition: border-color 0.2s ease;
  }

  .customer-addresses--form input:focus,
  .customer-addresses--form select:focus {
    outline: none;
    border-color: var(--color-accent, #e85d24);
  }

  .customer-addresses--form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16, 16px);
  }

  @media (max-width: 768px) {
    .customer-addresses--form-row {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:fyre-customer-addresses */

/* START_SECTION:fyre-customer-login (INDEX:35) */
.customer-login--section {
    background-color: var(--color-background, #f5f5f0);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-section-padding-y, 48px) var(--spacing-content-padding, 24px);
  }

  .customer-login--card {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-40, 40px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customer-login--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-24, 24px);
    text-align: center;
  }

  .customer-login--form .field {
    margin-bottom: var(--spacing-16, 16px);
  }

  .customer-login--form label {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    font-weight: 500;
    color: var(--color-ink, #191814);
    margin-bottom: 6px;
  }

  .customer-login--form input[type='email'],
  .customer-login--form input[type='password'] {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    border: 1px solid var(--color-border, #d4d0c8);
    border-radius: var(--radius-default, 4px);
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-ink, #191814);
    transition: border-color 0.2s ease;
  }

  .customer-login--form input:focus {
    outline: none;
    border-color: var(--color-accent, #e85d24);
  }

  .customer-login--submit {
    width: 100%;
    padding: 14px 24px;
    margin-top: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-accent, #e85d24);
    border: none;
    border-radius: var(--radius-default, 4px);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease;
  }

  .customer-login--submit:hover {
    background-color: var(--color-accent-hover, #d04f1c);
  }

  .customer-login--links {
    margin-top: var(--spacing-16, 16px);
    text-align: center;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
  }

  .customer-login--links a {
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-login--links a:hover {
    text-decoration: underline;
  }
/* END_SECTION:fyre-customer-login */

/* START_SECTION:fyre-customer-order (INDEX:36) */
.customer-order--section {
    background-color: var(--color-background, #f5f5f0);
    padding-top: var(--spacing-section-padding-y, 48px);
    padding-bottom: var(--spacing-section-padding-y, 48px);
  }

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

  .customer-order--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h1, 36px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-8, 8px);
  }

  .customer-order--date {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    color: var(--color-ink-light, #666);
    margin-bottom: var(--spacing-32, 32px);
  }

  .customer-order--back {
    display: inline-block;
    margin-bottom: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-order--back:hover {
    text-decoration: underline;
  }

  .customer-order--table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    margin-bottom: var(--spacing-32, 32px);
  }

  .customer-order--table th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--color-border, #d4d0c8);
    font-weight: 600;
    color: var(--color-ink, #191814);
  }

  .customer-order--table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border, #d4d0c8);
    color: var(--color-ink, #191814);
  }

  .customer-order--totals {
    max-width: 360px;
    margin-left: auto;
    margin-bottom: var(--spacing-32, 32px);
  }

  .customer-order--totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    color: var(--color-ink, #191814);
    border-bottom: 1px solid var(--color-border, #d4d0c8);
  }

  .customer-order--totals-row.total {
    font-weight: 700;
    border-bottom: none;
    padding-top: 12px;
  }

  .customer-order--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-32, 32px);
    margin-top: var(--spacing-32, 32px);
  }

  .customer-order--address-block h3 {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h3, 20px);
    font-weight: var(--font-weight-heading, 400);
    text-transform: var(--text-transform-heading, uppercase);
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    color: var(--color-ink, #191814);
    margin: 0 0 var(--spacing-8, 8px);
  }

  .customer-order--address-block p {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    color: var(--color-ink, #191814);
    line-height: var(--line-height-body, 1.6);
    margin: 0;
  }

  @media (max-width: 768px) {
    .customer-order--addresses {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:fyre-customer-order */

/* START_SECTION:fyre-customer-register (INDEX:37) */
.customer-register--section {
    background-color: var(--color-background, #f5f5f0);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-section-padding-y, 48px) var(--spacing-content-padding, 24px);
  }

  .customer-register--card {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-40, 40px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customer-register--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-24, 24px);
    text-align: center;
  }

  .customer-register--form .field {
    margin-bottom: var(--spacing-16, 16px);
  }

  .customer-register--form label {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    font-weight: 500;
    color: var(--color-ink, #191814);
    margin-bottom: 6px;
  }

  .customer-register--form input[type='text'],
  .customer-register--form input[type='email'],
  .customer-register--form input[type='password'] {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    border: 1px solid var(--color-border, #d4d0c8);
    border-radius: var(--radius-default, 4px);
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-ink, #191814);
    transition: border-color 0.2s ease;
  }

  .customer-register--form input:focus {
    outline: none;
    border-color: var(--color-accent, #e85d24);
  }

  .customer-register--submit {
    width: 100%;
    padding: 14px 24px;
    margin-top: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-accent, #e85d24);
    border: none;
    border-radius: var(--radius-default, 4px);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease;
  }

  .customer-register--submit:hover {
    background-color: var(--color-accent-hover, #d04f1c);
  }

  .customer-register--links {
    margin-top: var(--spacing-16, 16px);
    text-align: center;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
  }

  .customer-register--links a {
    color: var(--color-accent, #e85d24);
    text-decoration: none;
  }

  .customer-register--links a:hover {
    text-decoration: underline;
  }
/* END_SECTION:fyre-customer-register */

/* START_SECTION:fyre-customer-reset-password (INDEX:38) */
.customer-reset--section {
    background-color: var(--color-background, #f5f5f0);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-section-padding-y, 48px) var(--spacing-content-padding, 24px);
  }

  .customer-reset--card {
    background-color: var(--color-surface, #ffffff);
    border-radius: var(--radius-default, 4px);
    padding: var(--spacing-40, 40px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .customer-reset--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: var(--font-weight-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-24, 24px);
    text-align: center;
  }

  .customer-reset--form .field {
    margin-bottom: var(--spacing-16, 16px);
  }

  .customer-reset--form label {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-small, 14px);
    font-weight: 500;
    color: var(--color-ink, #191814);
    margin-bottom: 6px;
  }

  .customer-reset--form input[type='password'] {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    border: 1px solid var(--color-border, #d4d0c8);
    border-radius: var(--radius-default, 4px);
    background-color: var(--color-background, #f5f5f0);
    color: var(--color-ink, #191814);
    transition: border-color 0.2s ease;
  }

  .customer-reset--form input:focus {
    outline: none;
    border-color: var(--color-accent, #e85d24);
  }

  .customer-reset--submit {
    width: 100%;
    padding: 14px 24px;
    margin-top: var(--spacing-24, 24px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--font-size-body, 16px);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-accent, #e85d24);
    border: none;
    border-radius: var(--radius-default, 4px);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease;
  }

  .customer-reset--submit:hover {
    background-color: var(--color-accent-hover, #d04f1c);
  }
/* END_SECTION:fyre-customer-reset-password */

/* START_SECTION:fyre-fitment-hero (INDEX:45) */
.fithero--section {
    position: relative;
    width: 100%;
    min-height: 171px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .fithero--bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .fithero--bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .fithero--bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(26, 24, 21, 0.72) 0%,
      rgba(26, 24, 21, 0.32) 60%,
      transparent 100%
    );
  }

  .fithero--inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: var(--spacing-24, 24px) var(--spacing-content-padding, 24px);
  }

  .fithero--eyebrow {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--font-size-eyebrow, 11px);
    font-weight: var(--font-weight-mono-bold, 700);
    letter-spacing: var(--letter-spacing-eyebrow, 0.14em);
    text-transform: uppercase;
    color: var(--color-accent, #d94f1e);
    margin: 0 0 var(--spacing-8, 8px);
    line-height: 1;
  }

  .fithero--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: var(--line-height-heading-tight, 1);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading, 0.02em);
    color: var(--color-text-on-dark, #f5f0e8);
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .fithero--inner {
      padding-top: var(--spacing-32, 32px);
      padding-bottom: var(--spacing-32, 32px);
    }

    .fithero--heading {
      font-size: 44px;
    }
  }

  @media screen and (min-width: 990px) {
    .fithero--section {
      min-height: 171px;
    }

    .fithero--inner {
      padding-left: var(--spacing-page-padding, 80px);
      padding-right: var(--spacing-page-padding, 80px);
    }

    .fithero--heading {
      font-size: 52px;
    }
  }
/* END_SECTION:fyre-fitment-hero */

/* START_SECTION:fyre-garage (INDEX:48) */
.garage {
    background: var(--color-paper, #f7f4f0);
    color: var(--color-ink, #191814);
    font-family: var(--font-body, 'DM Sans', sans-serif);
  }
  .garage [hidden] {
    display: none !important;
  }
  .garage__eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #d11a1a);
    margin: 0 0 8px;
  }
  .garage__eyebrow--muted {
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
  }
  .garage__display {
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    font-weight: 400;
    margin: 0;
  }

  /* ── customer header band ─────────────────────────────────────── */
  .garage__head {
    background: var(--color-paper-2, #ebe8e0);
    border-bottom: 1px solid var(--color-line, #c7c1b6);
  }
  .garage__head-inner {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: 36px var(--spacing-content-padding, 24px) 28px;
  }
  .garage__name {
    font-size: clamp(30px, 4vw, 44px);
  }
  .garage__meta {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
  }
  .garage__meta a {
    color: var(--color-accent, #d11a1a);
    text-decoration: none;
  }
  .garage__meta a:hover {
    text-decoration: underline;
  }

  /* ── layout ───────────────────────────────────────────────────── */
  .garage__inner {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: 32px var(--spacing-content-padding, 24px) 72px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .garage__inner {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  /* ── sidebar ──────────────────────────────────────────────────── */
  .garage__side {
    position: sticky;
    /* Clears the sticky site header */
    top: calc(var(--header-height-desktop, 64px) + 24px);
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }
  @media (max-width: 900px) {
    .garage__side {
      position: static;
    }
  }
  .garage__side-card {
    background: var(--color-ink, #191814);
    color: #fff;
    padding: 18px 18px 16px;
  }
  .garage__side-card .garage__eyebrow {
    margin-bottom: 6px;
  }
  .garage__side-name {
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .garage__side-email {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .garage__nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .garage__nav li + li {
    border-top: 1px solid var(--color-line-2, #e6e2da);
  }
  .garage__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-ink, #191814);
    text-decoration: none;
    transition: background 0.15s;
  }
  .garage__nav a:hover {
    background: var(--color-paper, #f7f4f0);
  }
  .garage__nav a[aria-current='page'] {
    background: #f9e3e3;
    color: var(--color-accent, #d11a1a);
    box-shadow: inset 3px 0 0 var(--color-accent, #d11a1a);
  }
  .garage__nav a.garage__nav--quiet {
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
    background: var(--color-paper, #f7f4f0);
  }
  .garage__nav .fyre-icon {
    font-size: 10px;
  }
  /* Mobile: segmented toggle, equal-width tabs; the header above already shows the name/email */
  @media (max-width: 900px) {
    .garage__side-card {
      display: none;
    }
    .garage__nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .garage__nav li + li {
      border-top: 0;
    }
    .garage__nav li:nth-child(even) {
      border-left: 1px solid var(--color-line, #c7c1b6);
    }
    .garage__nav li:nth-child(n + 3) {
      border-top: 1px solid var(--color-line, #c7c1b6);
    }
    .garage__nav a {
      justify-content: center;
      padding: 13px 10px;
      white-space: nowrap;
    }
    .garage__nav a[aria-current='page'] {
      background: var(--color-ink, #191814);
      color: #fff;
      box-shadow: none;
    }
    .garage__nav .fyre-icon {
      display: none;
    }
  }

  /* ── hero ─────────────────────────────────────────────────────── */
  .garage__hero {
    position: relative;
    overflow: hidden;
    background: var(--color-ink, #191814);
    color: #fff;
    border-radius: 6px;
    padding: 26px 28px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .garage__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -55deg,
      transparent 0 22px,
      rgba(255, 255, 255, 0.025) 22px 23px
    );
    pointer-events: none;
  }
  .garage__hero > * {
    position: relative;
  }
  .garage__hero-title {
    font-size: clamp(26px, 3.2vw, 36px);
    color: #fff;
  }
  .garage__hero-sub {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
  }
  @media (max-width: 640px) {
    .garage__hero {
      flex-direction: column;
      padding: 22px;
    }
    .garage__tile {
      aspect-ratio: 16 / 9;
    }
  }

  /* ── buttons ──────────────────────────────────────────────────── */
  .garage__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: var(--color-accent, #d11a1a);
    color: #fff;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
      transform 0.12s,
      background 0.15s,
      box-shadow 0.15s;
  }
  .garage__btn:hover {
    background: #b51515;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(209, 26, 26, 0.25);
  }
  .garage__btn:active {
    transform: translateY(0);
    box-shadow: none;
  }
  .garage__btn--ghost {
    background: transparent;
    border-color: var(--color-line, #c7c1b6);
    color: var(--color-ink, #191814);
  }
  .garage__btn--ghost:hover {
    background: var(--color-paper-2, #ebe8e0);
    box-shadow: none;
  }
  .garage__btn--full {
    width: 100%;
  }
  .garage__link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .garage__link:hover {
    color: var(--color-accent, #d11a1a);
  }

  /* ── fleet grid ───────────────────────────────────────────────── */
  @media (max-width: 599px) {
    .garage__inner .garage__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .garage__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
  }
  .garage__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    overflow: hidden;
    transition:
      transform 0.18s,
      box-shadow 0.18s,
      border-color 0.18s;
  }
  .garage__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(25, 24, 20, 0.08);
  }
  .garage__card--primary {
    border-color: var(--color-accent, #d11a1a);
    box-shadow: 0 0 0 1px var(--color-accent, #d11a1a);
  }
  .garage__tile {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-paper-2, #ebe8e0)
      linear-gradient(160deg, rgba(255, 255, 255, 0.6), transparent 60%);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .garage__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(25, 24, 20, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(25, 24, 20, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .garage__tile svg {
    position: relative;
    width: 62%;
    height: auto;
    color: var(--color-ink, #191814);
    opacity: 0.85;
    filter: drop-shadow(0 8px 10px rgba(25, 24, 20, 0.12));
  }
  .garage__tile-year {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    background: rgba(25, 24, 20, 0.85);
    color: #fff;
    border-radius: 3px;
  }
  .garage__tile-make {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 28px;
    letter-spacing: 0.04em;
    color: rgba(25, 24, 20, 0.12);
  }
  .garage__body {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  .garage__nick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .garage__nick {
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .garage__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent, #d11a1a);
    white-space: nowrap;
  }
  .garage__vehicle {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .garage__engine {
    margin: 0;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .garage__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-line-2, #e6e2da);
  }
  .garage__stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .garage__stat dt {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
    margin: 0;
  }
  .garage__stat dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }
  .garage__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
  .garage__actions .garage__btn {
    flex: 1;
  }
  .garage__actions .garage__btn--ghost {
    flex: 0 0 auto;
  }
  .garage__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .garage__foot[hidden] {
    display: none;
  }

  /* ── remove confirm + undo toast (BugHerd #101) ─────────────────── */
  .garage__confirm {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-left: 3px solid var(--color-accent, #d11a1a);
    border-radius: 4px;
    background: var(--color-paper, #f7f4f0);
  }
  .garage__confirm[hidden] {
    display: none;
  }
  .garage__confirm-text {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--color-ink, #191814);
  }
  .garage__confirm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
  }
  .garage__toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 50;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px 12px 18px;
    border-radius: 4px;
    background: var(--color-ink, #191814);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(25, 24, 20, 0.3);
  }
  .garage__toast[hidden] {
    display: none;
  }
  .garage__toast-undo {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .garage__toast-undo:hover {
    opacity: 0.75;
  }

  /* ── empty state ──────────────────────────────────────────────── */
  .garage__empty {
    margin-top: 18px;
    padding: 48px 24px;
    border: 1px dashed var(--color-line, #c7c1b6);
    border-radius: 6px;
    text-align: center;
    background: #fff;
  }
  .garage__empty .fyre-icon {
    font-size: 34px;
    color: var(--color-line, #c7c1b6);
  }
  .garage__empty h3 {
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
    margin: 12px 0 6px;
  }
  .garage__empty p {
    margin: 0 0 18px;
    color: var(--color-ink-2, #39342d);
    font-size: 14px;
  }

  /* ── wishlist ─────────────────────────────────────────────────── */
  .garage__wishlist {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--color-line, #c7c1b6);
    scroll-margin-top: 90px;
  }
  .garage__wishlist-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }
  .garage__wishlist-title {
    font-size: clamp(22px, 2.6vw, 30px);
  }
  .garage__wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .garage__wishlist-grid .product-card {
    position: relative;
  }
  .garage__unsave {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-line, #c7c1b6);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-ink, #191814);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .garage__unsave:hover {
    background: var(--color-accent, #d11a1a);
    color: #fff;
    border-color: var(--color-accent, #d11a1a);
  }
  .garage__empty--slim {
    padding: 26px 20px;
  }
  .garage__empty--slim p {
    margin: 0;
  }

  /* ── dialog ───────────────────────────────────────────────────── */
  .garage__dialog {
    border: 0;
    padding: 0;
    border-radius: 8px;
    width: min(520px, calc(100vw - 32px));
    background: #fff;
    color: var(--color-ink, #191814);
    box-shadow: 0 30px 80px rgba(25, 24, 20, 0.35);
  }
  .garage__dialog::backdrop {
    background: rgba(25, 24, 20, 0.55);
    backdrop-filter: blur(2px);
  }
  .garage__dialog-head {
    background: var(--color-ink, #191814);
    color: #fff;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .garage__dialog-head h2 {
    font-size: 24px;
    color: #fff;
  }
  .garage__dialog-close {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
  }
  .garage__form {
    padding: 22px 24px 24px;
    display: grid;
    gap: 14px;
  }
  .garage__field {
    display: grid;
    gap: 6px;
  }
  .garage__field label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
  }
  .garage__field select,
  .garage__field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--color-ink, #191814);
  }
  .garage__field select:disabled {
    background: var(--color-paper, #f7f4f0);
    color: var(--color-ink-2, #39342d);
    opacity: 0.6;
  }
  .garage__field select:focus,
  .garage__field input:focus {
    outline: 2px solid var(--color-ink, #191814);
    outline-offset: 1px;
  }
  .garage__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .garage__vehicle-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .garage__vehicle-fields > [hidden] {
    display: none;
  }
  @media (max-width: 480px) {
    .garage__vehicle-fields {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    .garage__row {
      grid-template-columns: 1fr;
    }
  }
  .garage__form-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
  }
  .garage__error {
    margin: 0;
    font-size: 12px;
    color: var(--color-accent, #d11a1a);
  }
  .garage__hint {
    margin: -4px 0 0;
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
/* END_SECTION:fyre-garage */

/* START_SECTION:fyre-order-detail (INDEX:54) */
.odetail [data-order-id] {
    display: none;
  }
  .odetail [data-order-id].is-active {
    display: block;
  }
  .odetail__wrap {
    max-width: var(--spacing-page-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--spacing-content-padding, 24px);
  }
  .odetail__title {
    font-size: clamp(28px, 4vw, 44px);
  }
  .odetail__back {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    text-decoration: none;
  }
  .odetail__back:hover {
    color: var(--color-accent, #d11a1a);
  }

  /* ── progress ─────────────────────────────────────────────────── */
  .odetail__steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 34px 0 10px;
  }
  .odetail__step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .odetail__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: var(--color-line, #c7c1b6);
  }
  .odetail__step.is-done:not(:last-child)::after {
    background: var(--color-accent, #d11a1a);
  }
  .odetail__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-line, #c7c1b6);
    background: #fff;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--color-ink-2, #39342d);
  }
  .odetail__step.is-done .odetail__dot {
    background: var(--color-accent, #d11a1a);
    border-color: var(--color-accent, #d11a1a);
    color: #fff;
  }
  .odetail__step-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink, #191814);
  }
  .odetail__step:not(.is-done) .odetail__step-label {
    opacity: 0.6;
  }
  .odetail__step-date {
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
    margin-top: -6px;
  }
  .odetail__notice {
    margin: 28px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-left: 3px solid var(--color-accent, #d11a1a);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
  }

  /* ── items + shipping ─────────────────────────────────────────── */
  .odetail__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    padding: 36px 0 56px;
  }
  @media (max-width: 900px) {
    .odetail__main {
      grid-template-columns: 1fr;
    }
  }
  .odetail__h2 {
    font-size: 22px;
    margin: 0 0 14px;
  }
  .odetail__items {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .odetail__item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
  }
  .odetail__thumb {
    width: 92px;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--color-paper-2, #ebe8e0);
    border: 1px solid var(--color-line-2, #e6e2da);
  }
  .odetail__vendor {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .odetail__item-title {
    margin: 4px 0 6px;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
  .odetail__item-title a {
    color: inherit;
    text-decoration: none;
  }
  .odetail__item-title a:hover {
    color: var(--color-accent, #d11a1a);
  }
  .odetail__spec {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .odetail__qty {
    margin: 6px 0 0;
    font-size: 13px;
  }
  .odetail__item-price {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 22px;
    white-space: nowrap;
  }
  @media (max-width: 560px) {
    .odetail__item {
      grid-template-columns: 64px minmax(0, 1fr);
    }
    .odetail__thumb {
      width: 64px;
    }
    .odetail__item-price {
      grid-column: 2;
      font-size: 18px;
    }
  }
  .odetail__totals {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    display: grid;
    gap: 6px;
    font-size: 14px;
  }
  .odetail__totals div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .odetail__totals .odetail__grand {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--color-line-2, #e6e2da);
    font-weight: 700;
  }
  .odetail__side {
    padding: 20px;
    background: var(--color-paper-2, #ebe8e0);
    border-radius: 6px;
    display: grid;
    gap: 10px;
  }
  .odetail__label {
    margin: 6px 0 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .odetail__address {
    margin: 0;
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
  }
  .odetail__address strong {
    display: block;
  }
  .odetail__tracking {
    margin: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--color-accent, #d11a1a);
    word-break: break-all;
  }
  .odetail__tracking a {
    color: inherit;
  }
  .odetail__side .garage__btn {
    width: 100%;
  }
  .odetail__side .garage__btn--ghost {
    background: transparent;
    border-color: var(--color-ink, #191814);
  }

  /* ── documents ────────────────────────────────────────────────── */
  .odetail__docs {
    padding: 12px 0 56px;
  }
  .odetail__docs-sub {
    margin: 10px 0 20px;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .odetail__doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .odetail__doc {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    overflow: hidden;
  }
  .odetail__doc-art {
    display: grid;
    place-items: center;
    height: 130px;
    background: var(--color-paper-2, #ebe8e0);
  }
  .odetail__doc-art span {
    width: 66px;
    height: 88px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    display: grid;
    place-items: start center;
    padding-top: 12px;
    color: var(--color-accent, #d11a1a);
    box-shadow: 0 6px 14px rgba(25, 24, 20, 0.06);
  }
  .odetail__doc-body {
    padding: 16px;
    display: grid;
    gap: 4px;
    flex: 1;
  }
  .odetail__doc-title {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.02em;
  }
  .odetail__doc-desc {
    margin: 0;
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .odetail__doc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
  }
  .odetail__doc-foot .odetail__label {
    margin: 0;
  }
  .odetail__doc-foot .garage__btn {
    padding: 9px 14px;
  }
  .odetail__custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--color-paper-2, #ebe8e0);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
  }
  .odetail__custom .garage__btn--ghost {
    border-color: var(--color-ink, #191814);
  }

  /* ── help lanes + faq ─────────────────────────────────────────── */
  .odetail__help {
    background: #fff;
    border-top: 1px solid var(--color-line, #c7c1b6);
    padding: 48px 0 64px;
  }
  .odetail__lanes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 20px;
  }
  .odetail__lane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--color-ink, #191814);
    border-top-width: 4px;
    border-radius: 2px;
  }
  .odetail__lane h3 {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
  }
  .odetail__lane p {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    flex: 1;
  }
  .odetail__faq {
    margin-top: 24px;
    padding: 22px;
    background: var(--color-paper-2, #ebe8e0);
    border-radius: 4px;
  }
  .odetail__faq details {
    border-top: 1px solid var(--color-line, #c7c1b6);
  }
  .odetail__faq summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
  }
  .odetail__faq summary::-webkit-details-marker {
    display: none;
  }
  .odetail__faq summary::after {
    content: 'Open +';
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
    white-space: nowrap;
  }
  .odetail__faq details[open] summary::after {
    content: 'Close −';
  }
  .odetail__faq-answer {
    padding: 0 0 16px;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
  }
  .odetail__faq-answer > :first-child {
    margin-top: 0;
  }

  /* ── printable document ───────────────────────────────────────── */
  .odoc {
    display: none;
  }
  #odetail-print {
    display: none;
  }
  @media print {
    body.odetail-printing > *:not(#odetail-print) {
      display: none !important;
    }
    body.odetail-printing #odetail-print {
      display: block;
    }
    #odetail-print .odoc {
      display: block;
      font: 12px/1.5 var(--font-body, 'DM Sans', sans-serif);
      color: #000;
    }
    .odoc h1 {
      font-size: 22px;
      margin: 0 0 4px;
      text-transform: uppercase;
    }
    .odoc__meta {
      margin: 0 0 18px;
    }
    .odoc__cols {
      display: flex;
      gap: 40px;
      margin-bottom: 18px;
    }
    .odoc table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 14px;
    }
    .odoc th,
    .odoc td {
      text-align: left;
      padding: 6px 4px;
      border-bottom: 1px solid #ccc;
      vertical-align: top;
    }
    .odoc .odoc__num {
      text-align: right;
      white-space: nowrap;
    }
    #odetail-print[data-mode='slip'] .odoc__money,
    #odetail-print[data-mode='slip'] .odoc__payments,
    #odetail-print[data-mode='invoice'] .odoc__payments,
    #odetail-print[data-mode='receipt'] .odoc__slip-only,
    #odetail-print[data-mode='invoice'] .odoc__slip-only {
      display: none;
    }
    #odetail-print .odoc__title {
      display: none;
    }
    #odetail-print[data-mode='invoice'] .odoc__title--invoice,
    #odetail-print[data-mode='receipt'] .odoc__title--receipt,
    #odetail-print[data-mode='slip'] .odoc__title--slip {
      display: block;
    }
  }
/* END_SECTION:fyre-order-detail */

/* START_SECTION:fyre-orders (INDEX:55) */
/* ── filter tabs ──────────────────────────────────────────────── */
  .orders__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }
  .orders__tab {
    padding: 9px 14px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 4px;
    background: #fff;
    color: var(--color-ink, #191814);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      background 0.15s,
      border-color 0.15s;
  }
  .orders__tab:hover {
    background: var(--color-paper-2, #ebe8e0);
  }
  .orders__tab[aria-pressed='true'] {
    background: var(--color-ink, #191814);
    border-color: var(--color-ink, #191814);
    color: #fff;
  }

  /* ── order cards ──────────────────────────────────────────────── */
  .orders__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .orders__card {
    display: grid;
    grid-template-columns: 130px 130px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    transition:
      box-shadow 0.18s,
      border-color 0.18s;
  }
  .orders__card:hover {
    box-shadow: 0 10px 24px rgba(25, 24, 20, 0.07);
    border-color: var(--color-ink-2, #39342d);
  }
  .orders__num {
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .orders__date {
    margin: 4px 0 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .orders__status {
    justify-self: start;
    padding: 4px 8px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 2px;
    background: var(--color-paper-2, #ebe8e0);
    color: var(--color-ink, #191814);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .orders__status--processing {
    background: var(--color-accent, #d11a1a);
    border-color: var(--color-accent, #d11a1a);
    color: #fff;
  }
  .orders__status--refunded,
  .orders__status--cancelled {
    background: transparent;
    color: var(--color-ink-2, #39342d);
  }
  .orders__items {
    margin: 0;
    font-size: 14px;
  }
  .orders__ship {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.75;
  }
  .orders__total {
    text-align: right;
  }
  .orders__price {
    display: block;
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 24px;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }
  .orders__view {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #d11a1a);
    text-decoration: none;
  }
  .orders__view:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  @media (max-width: 760px) {
    .orders__card {
      grid-template-columns: 1fr auto;
      gap: 10px 16px;
    }
    .orders__status {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }
    .orders__summary {
      grid-column: 1 / -1;
    }
    .orders__total {
      grid-column: 1 / -1;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding-top: 10px;
      border-top: 1px solid var(--color-line-2, #e6e2da);
      text-align: left;
    }
  }

  /* ── pagination ───────────────────────────────────────────────── */
  .orders__pager {
    margin-top: 14px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 6px;
    text-align: center;
  }
  .orders__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 0 16px;
    list-style: none;
    border-bottom: 1px solid var(--color-line-2, #e6e2da);
  }
  .orders__page {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 2px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--color-ink, #191814);
    text-decoration: none;
  }
  a.orders__page:hover {
    background: var(--color-paper-2, #ebe8e0);
  }
  .orders__page--current {
    background: var(--color-ink, #191814);
    border-color: var(--color-ink, #191814);
    color: #fff;
  }
  .orders__page--gap {
    border: 0;
    min-width: 0;
    padding: 0;
  }
  .orders__step {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink, #191814);
    text-decoration: none;
    padding: 0 12px;
  }
  .orders__step:hover {
    color: var(--color-accent, #d11a1a);
  }
  .orders__count {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
/* END_SECTION:fyre-orders */

/* START_SECTION:fyre-wishlist (INDEX:75) */
.wish__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
  }
  .wish__title {
    font-size: clamp(28px, 3.6vw, 40px);
  }
  .wish__sub {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.8;
  }
  .wish__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wish__actions .garage__btn {
    padding: 13px 22px;
  }
  .wish__actions .garage__btn--ghost {
    border-color: var(--color-ink, #191814);
    background: #fff;
  }
  .wish__btn-dark {
    background: var(--color-ink, #191814);
  }
  .wish__btn-dark:hover {
    background: #000;
    box-shadow: 0 6px 16px rgba(25, 24, 20, 0.25);
  }
  .wish__status {
    margin: -10px 0 18px;
    font-size: 13px;
    color: var(--color-ink-2, #39342d);
  }

  .wish__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wish__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 2px;
    transition:
      box-shadow 0.18s,
      transform 0.18s;
  }
  .wish__card:hover {
    box-shadow: 0 12px 28px rgba(25, 24, 20, 0.08);
    transform: translateY(-2px);
  }
  .wish__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--color-white, #fff);
    border-bottom: 1px solid var(--color-line, #c7c1b6);
    overflow: hidden;
  }
  .wish__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
  }
  .wish__type {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.6;
  }
  .wish__heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--color-accent, #d11a1a);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(25, 24, 20, 0.12);
    transition: transform 0.15s;
  }
  .wish__heart:hover {
    transform: scale(1.1);
  }
  .wish__body {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .wish__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
  }
  .wish__name a {
    color: inherit;
    text-decoration: none;
  }
  .wish__name a:hover {
    color: var(--color-accent, #d11a1a);
  }
  .wish__sku {
    margin: 6px 0 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
  }
  .wish__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 0;
  }
  .wish__now {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 28px;
    line-height: 1;
  }
  .wish__was {
    font-size: 14px;
    color: var(--color-ink-2, #39342d);
    opacity: 0.6;
  }
  .wish__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-line-2, #e6e2da);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-2, #39342d);
  }
  .wish__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2f7d32;
  }
  .wish__stock::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
  }
  .wish__stock--out {
    color: var(--color-ink-2, #39342d);
    opacity: 0.7;
  }
  .wish__saved {
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .wish__atc {
    margin-top: 14px;
    width: 100%;
  }
  .wish__atc:disabled {
    background: var(--color-line, #c7c1b6);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .wish__card--skeleton .wish__media {
    background: var(--color-paper-2, #ebe8e0);
    animation: wish-pulse 1.2s ease-in-out infinite;
  }
  @keyframes wish-pulse {
    50% {
      opacity: 0.55;
    }
  }
/* END_SECTION:fyre-wishlist */

/* START_SECTION:main-page (INDEX:77) */
.page--section {
    background-color: var(--color-background, #f5f5f0);
    padding-top: var(--spacing-section-padding-y, 48px);
    padding-bottom: var(--spacing-section-padding-y, 48px);
  }

  .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-heading, 400);
    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-ink, #191814);
    margin: 0 0 var(--spacing-32, 32px);
  }

  .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-ink, #191814);
  }

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

  .page--content p {
    margin-bottom: var(--spacing-16, 16px);
  }

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

/* CSS from block stylesheet tags */
/* START_BLOCK:mega-menu-menu (INDEX:87) */
.header--mega-menu-columns {
    display: grid;
    grid-template-columns: repeat(var(--mega-menu-columns, 5), 1fr);
    column-gap: var(--space-xl, 32px);
    align-items: start;
    min-width: 0;
  }
  .header--mega-menu-column {
    display: flex;
    flex-direction: column;
    /* Figma: 22px group-to-group gap -> rounded to the nearest spacing
       token, --space-lg (24px), per the plan's own stated preference. */
    gap: var(--space-lg, 24px);
    min-width: 0;
  }
  .header--mega-menu-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
  }
  .header--mega-menu-group-heading {
    /* Overrides base.css's h1-h6 reset (Anton family, 400 weight) — the
       uppercase transform itself is inherited from that same reset, not
       duplicated here. */
    margin: 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent, #b83a2e);
  }
  .header--mega-menu-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
  }
  .header--mega-menu-link {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--color-muted, #8a857c);
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .header--mega-menu-link:hover {
    color: var(--color-accent, #b83a2e);
  }
  .header--mega-menu-link:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
    color: var(--color-accent, #b83a2e);
  }
/* END_BLOCK:mega-menu-menu */

/* START_BLOCK:mega-menu (INDEX:89) */
.header--mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown, 200);
  }
  @media (min-width: 990px) {
    .header--mega-menu {
      display: block;
    }
  }
  /* Editor select can open this below 990px (customizer preview can be
     narrower) — hover-open is already gated to >=990px in JS. */
  .header--mega-menu.is-open {
    display: block;
  }
  .header--mega-menu-panel {
    width: 100%;
    background-color: var(--color-white, #ffffff);
    /* Negative spread keeps the blur from bleeding onto the header above. */
    box-shadow: 0 16px 20px -4px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Short viewports (small laptop, customizer's own shrunken preview)
       scroll internally instead of overflowing off-screen. */
    max-height: calc(100vh - var(--header-height-desktop, 64px));
    overflow-y: auto;
  }
  .header--mega-menu.is-open .header--mega-menu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .header--mega-menu-panel-inner {
    max-width: var(--spacing-header-footer-max-width, 1440px);
    margin: 0 auto;
    padding: 28px var(--spacing-content-padding, 80px) var(--space-2xl, 48px);
  }
  .header--mega-menu-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-lg, 24px);
  }
  .header--mega-menu-heading {
    margin: 0;
  }
  .header--mega-menu-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding-bottom: var(--space-sm, 8px);
    border-bottom: 2px solid var(--color-accent, #b83a2e);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink, #1a1815);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
  }
  .header--mega-menu-view-all:hover {
    opacity: 0.75;
  }
  .header--mega-menu-view-all:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
  .header--mega-menu-view-all-icon {
    color: var(--color-accent, #b83a2e);
  }
  /* 12-col grid — every nested child is a direct item, spanning its own
     `width` via inline grid-column (needs "tag": null on the child's own
     schema, or Shopify's automatic content_for wrapper div eats the span).
     No dense packing — would reorder items out of block_order. */
  .header--mega-menu-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-xl, 32px);
    align-items: stretch;
  }
  /* Tile height Third/Half/Full is a fraction of the row's real height —
     needs align-items: stretch above; Auto opts back out here. */
  .header--mega-menu-content .mobilenav--card--height-auto {
    align-self: start;
  }
  .header--mega-menu-content .mobilenav--card--height-third {
    height: 33.333%;
  }
  .header--mega-menu-content .mobilenav--card--height-half {
    height: 50%;
  }
  .header--mega-menu-content .mobilenav--card--height-full {
    height: 100%;
  }
  .header--mega-menu-content .mobilenav--card--height-third .mobilenav--card__media,
  .header--mega-menu-content .mobilenav--card--height-half .mobilenav--card__media,
  .header--mega-menu-content .mobilenav--card--height-full .mobilenav--card__media {
    aspect-ratio: auto;
    height: 100%;
  }
/* END_BLOCK:mega-menu */

/* START_BLOCK:product-add-to-build (INDEX:91) */
.build-picker {
    border: 0;
    padding: 0;
    border-radius: 8px;
    width: min(440px, calc(100vw - 32px));
    background: #fff;
    color: var(--color-ink, #191814);
    box-shadow: 0 30px 80px rgba(25, 24, 20, 0.35);
  }
  .build-picker::backdrop {
    background: rgba(25, 24, 20, 0.55);
  }
  .build-picker__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-ink, #191814);
    color: #fff;
  }
  .build-picker__title {
    margin: 0;
    font-family: var(--font-display, 'Anton', sans-serif);
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 0.02em;
  }
  .build-picker__close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
  }
  .build-picker__body {
    padding: 18px 20px 20px;
    display: grid;
    gap: 14px;
  }
  .build-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
  }
  .build-picker__option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-paper, #f7f4f0);
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .build-picker__option:hover {
    border-color: var(--color-accent, #d11a1a);
  }
  .build-picker__option small {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.7;
  }
  .build-picker__empty {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
  }
  .build-picker__new label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .build-picker__row {
    display: flex;
    gap: 8px;
  }
  .build-picker__row input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-line, #c7c1b6);
    border-radius: 4px;
    font: inherit;
  }
  .build-picker__create {
    padding: 10px 14px;
    border: 0;
    border-radius: 4px;
    background: var(--color-accent, #d11a1a);
    color: #fff;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }
  .build-picker__done {
    margin: 0;
    padding: 12px 14px;
    background: #eef6ee;
    border-radius: 4px;
    font-size: 14px;
  }
  .build-picker__done a {
    color: var(--color-accent, #d11a1a);
  }
/* END_BLOCK:product-add-to-build */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:algolia-collection-hierarchy (INDEX:117) */
algolia-collection-hierarchy .collection__filter-group__body {
    max-height: 420px;
  }
/* END_SNIPPET:algolia-collection-hierarchy */

/* START_SNIPPET:algolia-sort-by-sheet (INDEX:125) */
/* Wrapper adds no box of its own: the only visible child (#plp-sort-sheet)
     is position:fixed. display:contents also creates no stacking context. */
  algolia-sort-by-sheet {
    display: contents;
  }

  .plp-sort-sheet {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
  }

  .plp-sort-sheet.is-open {
    pointer-events: auto;
  }

  .plp-sort-sheet--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .plp-sort-sheet.is-open .plp-sort-sheet--overlay {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .plp-sort-sheet--panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* dvh, not plain vh: this panel is the one drawer in this build sized
       off viewport height (the side panels use a fixed width/vw instead) —
       toggling body overflow:hidden on open can shift mobile browser chrome
       and recompute a plain vh value mid-transition, visibly janking the
       slide. dvh tracks the actual rendered viewport instead. vh kept as a
       fallback for browsers without dvh support. */
    max-height: 80vh;
    max-height: 80dvh;
    background-color: var(--color-paper, #f7f5f0);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }

  .plp-sort-sheet.is-open .plp-sort-sheet--panel {
    transform: translateY(0);
    box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.25);
  }

  .plp-sort-sheet--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 20px 16px 20px;
    flex-shrink: 0;
  }

  .plp-sort-sheet--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
  }

  .plp-sort-sheet--close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-paper-2, #ebe8e0);
    border: none;
    cursor: pointer;
    color: var(--color-ink, #1a1815);
    transition: color 0.2s ease;
  }

  .plp-sort-sheet--close:hover {
    color: var(--color-accent, #b83a2e);
  }

  .plp-sort-sheet--list {
    list-style: none;
    margin: 0;
    padding: 0 20px 20px;
    overflow-y: auto;
  }

  .plp-sort-sheet--option {
    /* Native <button> reset so rows render exactly like the old <li> rows.
       Must stay above border-bottom/font-* below (same rule, later wins).
       content-box: the old <li> was content-box, so height:44px + the 1px
       border-bottom = 45px per row; a button's default border-box would
       shrink that to 44px. */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: content-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    display: flex;
    align-items: center;
    height: 44px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    color: var(--color-ink, #1a1815);
    border-bottom: 1px solid var(--color-line, #c8c2b6);
    cursor: pointer;
  }

  /* Each button is the sole child of its <li>, so :last-child must be
     evaluated on the <li>, not the button. */
  li:last-child > .plp-sort-sheet--option {
    border-bottom: none;
  }

  .plp-sort-sheet--option[aria-current="true"] {
    font-weight: 700;
    color: var(--color-accent, #b83a2e);
  }

  .plp-sort-sheet--panel:focus-visible,
  .plp-sort-sheet--close:focus-visible,
  .plp-sort-sheet--option:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
/* END_SNIPPET:algolia-sort-by-sheet */

/* START_SNIPPET:algolia-sort-by (INDEX:126) */
.collection__sort-dropdown {
    position: relative;
  }

  /* Figma 1185:90: plain "SORT: BEST FIT ▾" text run, no box/border/
     background — matches this row's own .collection__sort-label (11px,
     no transform, same Body/XS style already documented above). */
  .collection__sort-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-ink, #1a1815);
    white-space: nowrap;
  }

  /* Exact raw glyph box from Figma metadata (node 1185:90, layer 893:1525,
     "caret-down"): width 6px, height 9px — not a guessed/square size. The
     `i.` type selector (matching fyre-icon-set.liquid's own i.fyre-icon
     pattern) is required, not decorative: at equal (0,1,0) specificity
     between this class and .fyre-icon--md (the 20px default fyre-icon-set
     falls back to since no icon_size is passed), whichever loads later in
     the compiled stylesheet wins — this class alone was losing that tie,
     which is why the caret was still rendering oversized. */
  i.collection__sort-trigger-caret {
    width: 6px;
    height: 9px;
    font-size: 9px;
    transition: transform 0.15s ease;
  }

  .collection__sort-dropdown.is-open .collection__sort-trigger-caret {
    transform: rotate(180deg);
  }

  .collection__sort-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-line, #c8c2b6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 20;
  }

  .collection__sort-popover[hidden] {
    display: none;
  }

  /* Button reset first so the rules below still win; border-box + 100%
     width keeps the same outer box the old <li role="option"> rows had. */
  .collection__sort-option {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    padding: 8px 12px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--color-ink, #1a1815);
    cursor: pointer;
  }

  .collection__sort-option:hover,
  .collection__sort-option:focus-visible {
    background: var(--color-paper-2, #ebe8e0);
  }

  .collection__sort-option[aria-current="true"] {
    font-weight: 700;
  }

  .collection__sort-trigger:focus-visible,
  .collection__sort-option:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
/* END_SNIPPET:algolia-sort-by */

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

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4, 4px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4, 4px);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--color-line, #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, #1a1a1a);
}
/* END_SNIPPET:breadcrumb */

/* START_SNIPPET:card-article (INDEX:129) */
.blog--card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }

  .blog--card:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }

  .blog--card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 357 / 240;
    border: 1px solid var(--color-line, #c8c2b6);
    overflow: hidden;
    background: var(--color-paper-2, #ebe7df);
  }

  .blog--card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .blog--card:hover .blog--card__image {
    transform: scale(1.03);
  }

  .blog--card__image-placeholder {
    position: absolute;
    inset: 0;
    background-color: var(--color-scheme-surface, var(--color-paper-2, #ebe7df));
  }

  .blog--card__image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .blog--card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .blog--card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .blog--card__category {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-category-label, #3aa7c4);
    white-space: nowrap;
  }

  .blog--card__date {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-muted, #8c8c8c);
    white-space: nowrap;
  }

  /* Custom (not the shared .heading utility) — .heading force-uppercases and
     swaps to var(--font-display) (Anton), but Figma's card title is
     mixed-case DM Sans Bold 18px (Archivo Black -> DM Sans 700 substitution,
     same precedent as fyre-blog-hero.md's J3 featured-title). text-transform
     is explicit since the theme's global h1..h6{text-transform:uppercase}
     default would otherwise silently force this <h3> uppercase. */
  .blog--card__title {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    color: var(--color-ink, #191814);
    margin: 0;
  }

  .blog--card:hover .blog--card__title {
    color: var(--color-accent, #b83a2e);
  }

  /* 2-line clamp per plan §9 J4 — keeps uneven excerpt lengths from
     producing a visibly ragged 3x3 grid. */
  .blog--card__excerpt {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-ink-2, #4d4d4d);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* END_SNIPPET:card-article */

/* START_SNIPPET:card-collection (INDEX:130) */
/* --- catgrid prefix (legacy default) --- */
  .catgrid--card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-card, 0px);
  }

  .catgrid--card__media {
    position: relative;
    height: var(--card-height);
    overflow: hidden;
  }

  .catgrid--card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .catgrid--card:hover .catgrid--card__img {
    transform: scale(1.04);
  }

  .catgrid--card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 24, 21, 0.72) 0%, rgba(26, 24, 21, 0.12) 55%, transparent 100%);
    pointer-events: none;
  }

  .catgrid--card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .catgrid--card__title {
    font-family: var(--font-display, "Anton", sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-on-dark, #F5F0E8);
    margin: 0;
  }

  .catgrid--card__cta {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: var(--font-size-small, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #D94F1E);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* --- collist prefix (fyre-collection-list) --- */
  .collist--card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-card, 0px);
  }

  .collist--card__media {
    position: relative;
    height: var(--card-height);
    overflow: hidden;
  }

  .collist--card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .collist--card:hover .collist--card__img {
    transform: scale(1.04);
  }

  .collist--card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 24, 21, 0.80) 0%, rgba(26, 24, 21, 0.10) 60%, transparent 100%);
    pointer-events: none;
  }

  .collist--card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-16, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 4px);
  }

  .collist--card__title {
    font-family: var(--font-display, "Anton", sans-serif);
    font-size: var(--font-size-h3, 24px);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-on-dark, #F5F0E8);
    margin: 0;
  }

  .collist--card__count {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: var(--font-size-caption, 12px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-label, 0.08em);
    text-transform: uppercase;
    color: var(--color-accent-soft, #F2D0BF);
  }

  .collist--card__cta {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: var(--font-size-small, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #D94F1E);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .collist--card__img--placeholder {
    background-color: var(--color-paper-2, #EBE7DF);
  }
/* END_SNIPPET:card-collection */

/* START_SNIPPET:card-product (INDEX:131) */
.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-placeholder-svg {
    width: 40px;
    height: 40px;
    opacity: 0.3;
  }

  .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:132) */
.cart-drawer--root {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
  }
  .cart-drawer--root.is-open {
    pointer-events: auto;
  }
  .cart-drawer--root.is-busy .cart-drawer--qty-btn,
  .cart-drawer--root.is-busy .cart-drawer--remove,
  .cart-drawer--root.is-busy [data-action="quick-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);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  .cart-drawer--root.is-open .cart-drawer--overlay {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .cart-drawer--panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    background-color: var(--color-paper, #f7f5f0);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }
  .cart-drawer--root.is-open .cart-drawer--panel {
    transform: translateX(0);
  }

  /* ─── Header (dark — the one surface that stays dark per Figma) ─── */
  .cart-drawer--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background-color: var(--color-background-dark, #1a1815);
    flex-shrink: 0;
  }
  .cart-drawer--heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cart-drawer--eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    /* Fixed white, not the accent (was red) — red-on-dark here measured
       ~3.3:1, failing WCAG's 4.5:1 text minimum against this header's
       deliberately-always-dark background (see the comment on
       .cart-drawer--header above). Same stays-white-regardless-of-scheme
       pattern used for the blog card title/read-more fixes — a literal
       var(--color-white) would get shadowed by
       snippets/fyre-color-scheme-css.liquid's per-scheme mapping. */
    color: var(--color-white-fixed, #fff);
    margin: 0;
  }
  .cart-drawer--count {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--color-white, #ffffff);
    margin: 0;
  }
  .cart-drawer--close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--color-white, #ffffff);
    cursor: pointer;
    color: var(--color-white, #ffffff);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .cart-drawer--close:hover {
    color: var(--color-accent, #b83a2e);
    border-color: var(--color-accent, #b83a2e);
  }
  .cart-drawer--close-icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* ─── Shipping lead-time + free-shipping progress ─── */
  .cart-drawer--shipping-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 22px;
    background-color: var(--color-paper-2, #ebe8e0);
    border-bottom: 1px solid var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--shipping-meta[hidden] { display: none; }
  /* No lead time and the bar hidden (state unknown): drop the empty strip; the JS un-hiding the bar brings it back. */
  .cart-drawer--shipping-meta:not(:has(> :not([hidden]))) { display: none; }
  .cart-drawer--lead-time {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    background-color: var(--color-white, #ffffff);
    border-radius: 6px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    color: var(--color-ink, #1a1815);
  }
  .cart-drawer--lead-time-icon {
    font-size: 10px !important;
    width: 10px !important;
    height: 10px !important;
    color: var(--color-ink, #1a1815);
  }
  .cart-drawer--progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .cart-drawer--progress[hidden] { display: none; }
  .cart-drawer--progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .cart-drawer--progress-label {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted, #8a857c);
    text-transform: uppercase;
  }
  .cart-drawer--progress-value {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted, #8a857c);
    white-space: nowrap;
  }
  .cart-drawer--progress-value.is-unlocked {
    color: var(--color-fit-green, #2b8f46);
  }
  .cart-drawer--progress-track {
    width: 100%;
    height: 4px;
    background-color: var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--progress-fill {
    height: 4px;
    background-color: var(--color-fit-green, #2b8f46);
    transition: width 0.3s ease;
  }
  /* Threshold met but free shipping blocked (employee / over the weight cap) */
  .cart-drawer--progress-fill.is-blocked {
    background-color: var(--color-accent, #b83a2e);
  }

  /* ─── Body / items ─── */
  .cart-drawer--body {
    flex: 1;
    overflow-y: auto;
    padding: 0 22px;
  }
  .cart-drawer--items {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cart-drawer--item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--item:last-child {
    border-bottom: none;
  }
  .cart-drawer--item-image-link {
    flex-shrink: 0;
  }
  .cart-drawer--item-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--item-placeholder {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-line-2, #e0dcd2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-drawer--item-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cart-drawer--item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cart-drawer--item-title {
    display: block;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink, #1a1815);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cart-drawer--item-variant,
  .cart-drawer--item-sku {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-muted, #8a857c);
    margin: 0;
  }
  /* WHY no padding-top here: .cart-drawer--item-info's own flex gap (4px)
     already spaces every row, title through controls — an extra padding-top
     on top of that gap was doubling up, which is most of what read as
     "spaced out" on this line item. */
  .cart-drawer--item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cart-drawer--fit-pill {
    display: none;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    background-color: var(--color-fit-green-soft, #dcefe2);
    color: var(--color-fit-green, #2b8f46);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
    /* A full vehicle label ("Fits Your Volkswagen · GTI · 1995 · 2.0L ·
       Auto (4 Speed) · FWD") was overflowing past the drawer's edge — flex
       items default to min-width:auto (won't shrink below content), so
       min-width:0 here lets it actually respect max-width and ellipsize. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* <cart-fitment> paints the pill via data-fit-state on the pill itself. */
  .cart-drawer--item .cart-drawer--fit-pill[data-fit-pill][data-fit-state="fit"] {
    display: inline-flex;
  }
  /* The pill is an inline-flex box, so ellipsis has to live on the inner text
     (a flex item) rather than on the pill. */
  .cart-drawer--fit-pill [data-fit-pill-text] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cart-drawer--qty {
    display: flex;
    align-items: center;
    height: 22px;
    border: 1px solid var(--color-line, #c8c2b6);
  }
  .cart-drawer--qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ink, #1a1815);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }
  .cart-drawer--qty-btn:first-child { border-right: 1px solid var(--color-line, #c8c2b6); }
  .cart-drawer--qty-btn:last-child { border-left: 1px solid var(--color-line, #c8c2b6); }
  .cart-drawer--qty-btn:hover {
    color: var(--color-accent, #b83a2e);
  }
  .cart-drawer--qty-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 10px;
    color: var(--color-ink, #1a1815);
    width: 34px;
    min-width: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    appearance: none;
  }
  /* iOS zooms the page when focusing inputs under 16px */
  @media (hover: none) {
    .cart-drawer--qty-value { font-size: 16px; }
  }
  .cart-drawer--item-price-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
  }
  .cart-drawer--item-price {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
    white-space: nowrap;
  }
  .cart-drawer--remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-muted, #8a857c);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s ease;
  }
  .cart-drawer--remove:hover {
    color: var(--color-accent, #b83a2e);
  }
  .cart-drawer--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 200px;
    color: var(--color-muted, #8a857c);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ─── Upsell ─── */
  .cart-drawer--upsell {
    border-top: 2px solid var(--color-line, #c8c2b6);
    padding: 20px 0 0;
    margin-top: 4px;
  }
  .cart-drawer--upsell[hidden] { display: none; }
  .cart-drawer--upsell-title {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent, #b83a2e);
    text-transform: uppercase;
    margin: 0 0 12px;
  }
  .cart-drawer--upsell-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    background-color: var(--color-white, #ffffff);
    border-bottom: 1px solid var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--upsell-row:last-child {
    border-bottom: none;
  }
  .cart-drawer--upsell-image {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: cover;
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-line-2, #e0dcd2);
  }
  .cart-drawer--upsell-placeholder {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-line-2, #e0dcd2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-drawer--upsell-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cart-drawer--upsell-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cart-drawer--upsell-title-text {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink, #1a1815);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cart-drawer--upsell-sku {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted, #8a857c);
    margin-top: 0;
  }
  .cart-drawer--upsell-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
  }
  .cart-drawer--upsell-price {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 14px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
    white-space: nowrap;
  }
  .cart-drawer--upsell-add {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border: none;
    background-color: var(--color-accent, #b83a2e);
    color: var(--color-white, #ffffff);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .cart-drawer--upsell-add:hover {
    background-color: var(--color-primary-hover, var(--color-accent));
  }

  /* ─── Footer ─── */
  .cart-drawer--footer {
    padding: 20px 22px;
    background-color: var(--color-white, #ffffff);
    border-top: 1px solid var(--color-line, #c8c2b6);
    flex-shrink: 0;
  }
  .cart-drawer--footer[hidden] { display: none; }
  .cart-drawer--totals {
    display: flex;
    flex-direction: column;
  }
  .cart-drawer--totals-row[hidden] {
    display: none;
  }
  .cart-drawer--totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--color-muted, #8a857c);
  }
  .cart-drawer--totals-row span:last-child {
    font-weight: 700;
    color: var(--color-ink, #1a1815);
  }
  .cart-drawer--totals-row:nth-child(2) {
    padding-bottom: 12px;
  }
  .cart-drawer--ship-estimate {
    align-items: flex-start;
    padding-bottom: 12px;
  }
  .cart-drawer--ship-estimate[hidden] { display: none; }
  .cart-drawer--ship-estimate-lead {
    display: block;
    font-size: 11px;
  }
  .cart-drawer--totals-row .cart-drawer--ship-estimate-lead span {
    font-weight: 400;
    color: inherit;
  }
  .cart-drawer--shipping-free {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--color-fit-green, #2b8f46) !important;
  }
  .cart-drawer--shipping-tbd {
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--color-muted, #8a857c) !important;
  }
  .cart-drawer--totals-row--total {
    padding-top: 10px;
    padding-bottom: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--color-line-2, #e0dcd2);
    color: var(--color-ink, #1a1815);
  }
  .cart-drawer--totals-row--total span:first-child {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink, #1a1815);
    text-transform: uppercase;
  }
  .cart-drawer--totals-row--total span:last-child {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
  }
  .cart-drawer--checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background-color: var(--color-accent, #b83a2e);
    color: var(--color-white, #ffffff);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .cart-drawer--checkout-btn:hover {
    background-color: var(--color-primary-hover, var(--color-accent));
  }
  .cart-drawer--checkout-icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
  }
  .cart-drawer--view-cart {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted, #8a857c);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .cart-drawer--view-cart:hover {
    color: var(--color-ink, #1a1815);
  }

  /* Short screens: the whole panel scrolls so line items stay visible; only the header and Checkout stay pinned. */
  @media (max-height: 760px) {
    .cart-drawer--panel {
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .cart-drawer--header {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .cart-drawer--body {
      flex: none;
      overflow: visible;
    }
    /* Footer flattened so Checkout pins to the panel, not the footer box */
    .cart-drawer--footer {
      display: contents;
    }
    .cart-drawer--totals {
      flex-shrink: 0;
      padding: 20px 22px 0;
      background-color: var(--color-white, #ffffff);
      border-top: 1px solid var(--color-line, #c8c2b6);
    }
    .cart-drawer--checkout-btn {
      position: sticky;
      bottom: 0;
      z-index: 1;
      flex-shrink: 0;
      width: auto;
      margin: 0;
      border: 12px solid var(--color-white, #ffffff);
      border-width: 12px 22px;
      background-clip: padding-box;
      box-shadow: 0 -1px 0 var(--color-line, #c8c2b6);
      height: 72px;
    }
    .cart-drawer--view-cart {
      flex-shrink: 0;
      margin-top: 0;
      padding: 0 22px 20px;
      background-color: var(--color-white, #ffffff);
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:fyre-card-review (INDEX:141) */
.review-card {
    background-color: var(--color-white, #ffffff);
    border: 1px solid var(--color-line, #c8c2b6);
    padding: var(--space-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
  }

  .review-card__stars {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent, #c94a1e);
    white-space: nowrap;
  }

  .review-card__headline {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
    margin: 0;
    white-space: normal;
  }

  .review-card__body {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-ink, #1a1815);
    margin: 0;
  }

  .review-card__attribution {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent, #c94a1e);
    white-space: nowrap;
    margin-top: var(--space-xs, 4px);
  }
/* END_SNIPPET:fyre-card-review */

/* START_SNIPPET:fyre-cart-clear (INDEX:142) */
.cart-clear[hidden],
  .cart-clear [hidden] {
    display: none !important;
  }
  .cart-clear {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    color: var(--color-muted, #8a857c);
  }
  .cart-clear__confirm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .cart-clear__btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-muted, #8a857c);
    cursor: pointer;
  }
  .cart-clear__btn:hover,
  .cart-clear__btn--yes {
    color: var(--color-accent, #b83a2e);
  }
  .cart-clear__btn:disabled {
    opacity: 0.5;
    cursor: wait;
  }
  .cart-clear--dark,
  .cart-clear--dark .cart-clear__btn {
    color: rgba(255, 255, 255, 0.7);
  }
  .cart-clear--dark .cart-clear__btn:hover,
  .cart-clear--dark .cart-clear__btn--yes {
    color: var(--color-white, #ffffff);
  }
/* END_SNIPPET:fyre-cart-clear */

/* START_SNIPPET:fyre-free-shipping-progress (INDEX:163) */
.shipping-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  /* Same band as the cart drawer's shipping strip */
  .shipping-progress--boxed {
    padding: 16px 22px;
    margin-bottom: 16px;
    background-color: var(--color-paper-2, #ebe8e0);
    border-bottom: 1px solid var(--color-line-2, #e0dcd2);
  }
  .shipping-progress[hidden] {
    display: none;
  }
  .shipping-progress__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .shipping-progress__label,
  .shipping-progress__value {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted, #8a857c);
  }
  .shipping-progress__label {
    text-transform: uppercase;
  }
  .shipping-progress__value {
    white-space: nowrap;
  }
  .shipping-progress__value.is-unlocked {
    color: var(--color-fit-green, #2b8f46);
  }
  .shipping-progress__track {
    width: 100%;
    height: 4px;
    background-color: var(--color-line-2, #e0dcd2);
  }
  .shipping-progress__fill {
    height: 4px;
    background-color: var(--color-fit-green, #2b8f46);
    transition: width 0.3s ease;
  }
  .shipping-progress__fill.is-blocked {
    background-color: var(--color-accent, #b83a2e);
  }
/* END_SNIPPET:fyre-free-shipping-progress */

/* START_SNIPPET:fyre-group (INDEX:164) */
/*
    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: 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:165) */
/* 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:fyre-plp-filters-flyout (INDEX:167) */
.plp-filters--drawer {
    position: fixed;
    inset: 0;
    /* Above 9999, not mobile-nav/cart-drawer's 300 — fyre-header.liquid's
       sticky wrapper (#shopify-section-{id}) is z-index:9999 when
       enable_sticky is on (the schema default), which otherwise paints over
       this drawer since both compete in the root stacking context. The
       drawer stays where it renders (a direct child of the section wrapper,
       no ancestor stacking context) rather than being moved to <body>. */
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
  }

  .plp-filters--drawer.is-open {
    pointer-events: auto;
  }

  .plp-filters--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }

  .plp-filters--drawer.is-open .plp-filters--overlay {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .plp-filters--panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    /* var(--color-paper), not Figma's literal white — matches the desktop
       PLP's own background, per human correction 2026-09-10. */
    background-color: var(--color-paper, #f7f5f0);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }

  .plp-filters--drawer.is-open .plp-filters--panel {
    transform: translateX(0);
    box-shadow: 4px 0px 16px 0px rgba(0, 0, 0, 0.25);
  }

  .plp-filters--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 20px 16px 20px;
    flex-shrink: 0;
  }

  .plp-filters--heading {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-ink, #1a1815);
  }

  .plp-filters--close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-paper-2, #ebe8e0);
    border: none;
    cursor: pointer;
    color: var(--color-ink, #1a1815);
    transition: color 0.2s ease;
  }

  .plp-filters--close:hover {
    color: var(--color-accent, #b83a2e);
  }

  .plp-filters--body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
  }

  /* Space between the active filter chips and the filters below them. */
  .plp-filters--body algolia-current-refinements > .collection__chips:not([hidden]) {
    margin-bottom: 15px;
  }

  /* margin-top must stay >= 0: .collection__filter-group__body clips overflow. */
  /* 20px boxes, 14px labels and a little row padding for touch (BugHerd #92) */
  .plp-filters--body .collection__filter-option {
    padding: 3px 0;
  }

  .plp-filters--body .collection__filter-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    /* Label's 14px x 1.45 first line is ~20.3px, so the box needs no offset. */
    margin-top: 0;
  }

  .plp-filters--body .collection__filter-option-label {
    font-size: 14px;
    line-height: 1.45;
  }

  .plp-filters--body .collection__filter-option input[type="checkbox"]:checked {
    background-size: 13px 10px;
  }

  .plp-filters--panel:focus-visible,
  .plp-filters--close:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
/* END_SNIPPET:fyre-plp-filters-flyout */

/* START_SNIPPET:fyre-plp-mobile-toolbar (INDEX:168) */
.plp-toolbar {
    display: flex;
    flex-direction: column;
    /* No horizontal inset (Figma's own 16px dropped) — edge-to-edge on the
       bar itself, per human correction 2026-09-10. No top padding either,
       per a later correction — bottom padding only. */
    padding: 0 0 12px;
    /* var(--color-paper), not Figma's literal white — matches the desktop
       PLP's own background (.collection in algolia-collection.liquid),
       per human correction 2026-09-10. */
    background-color: var(--color-paper, #f7f5f0);
  }

  @media (min-width: 990px) {
    .plp-toolbar {
      display: none;
    }
  }

  .plp-toolbar__btn-row {
    display: flex;
    gap: 10px;
  }

  .plp-toolbar__btn {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-line, #c8c2b6);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-ink, #1a1815);
  }

  .plp-toolbar__btn-icon {
    flex-shrink: 0;
  }

  .plp-toolbar__btn-label {
    white-space: nowrap;
  }

  .plp-toolbar__btn:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
/* END_SNIPPET:fyre-plp-mobile-toolbar */

/* START_SNIPPET:mega-menu-promo-tile (INDEX:186) */
.mobilenav--card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-line, #C7C1B6);
    border-radius: var(--border-radius-card, 0px);
  }

  .mobilenav--card:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }

  /* Height from aspect-ratio (mega-menu-tile.liquid's aspect_ratio setting);
     min-height is just a floor for narrow tiles. height=third/half/full
     override lives in blocks/mega-menu.liquid's stylesheet instead (desktop
     grid-row context only). */
  .mobilenav--card__media {
    position: relative;
    aspect-ratio: var(--tile-aspect-ratio, 2 / 1);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }

  .mobilenav--card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Same hover-zoom as card-collection.liquid's .catgrid--card__img. */
    transition: transform 0.4s ease;
  }

  .mobilenav--card:hover .mobilenav--card__img {
    transform: scale(1.04);
  }

  .mobilenav--card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(102, 102, 102, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
  }

  .mobilenav--card__content {
    position: relative;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobilenav--card__title {
    font-family: var(--font-display, "Anton", sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--color-text-on-dark, #F5F0E8);
    margin: 0;
  }

  .mobilenav--card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mobilenav--card__count {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-line, #C7C1B6);
  }

  .mobilenav--card__cta-icon {
    color: var(--color-text-on-dark, #F5F0E8);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .mobilenav--card:hover .mobilenav--card__cta-icon,
  .mobilenav--card:focus-visible .mobilenav--card__cta-icon {
    transform: translateX(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .mobilenav--card__cta-icon {
      transition: none;
    }
  }

  .mobilenav--card__img--placeholder {
    background-color: var(--color-paper-2, #EBE7DF);
  }
/* END_SNIPPET:mega-menu-promo-tile */

/* START_SNIPPET:mobile-nav (INDEX:187) */
.mobile-nav--drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    overflow: hidden;
  }
  .mobile-nav--drawer.is-open {
    pointer-events: auto;
  }
  .mobile-nav--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  .mobile-nav--drawer.is-open .mobile-nav--overlay {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .mobile-nav--panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background-color: var(--color-paper, #fff);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }
  .mobile-nav--drawer.is-open .mobile-nav--panel {
    transform: translateX(0);
    box-shadow: 4px 0px 16px 0px rgba(0, 0, 0, 0.25);
  }
  .mobile-nav--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 20px 16px 20px;
    flex-shrink: 0;
  }
  .mobile-nav--logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  /* Figma drawer logo caps at 120px regardless of the header's own
     logo_width — fetch still requests the larger size, just displayed capped. */
  .mobile-nav--logo-img {
    display: block;
    max-width: 120px;
    height: auto;
    object-fit: contain;
  }
  .mobile-nav--wordmark {
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: var(--font-size-h2, 24px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.48px;
    color: var(--color-ink, #191814);
    white-space: nowrap;
  }
  .mobile-nav--close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-paper-2, #ebe8e0);
    border: none;
    cursor: pointer;
    color: var(--color-ink, #191814);
    transition: color 0.2s ease;
  }
  .mobile-nav--close:hover {
    color: var(--color-accent, #b83a2e);
  }
  .mobile-nav--hairlines {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  .mobile-nav--hairlines span {
    display: block;
    height: 1px;
    background-color: var(--color-line-2, #dfdcd2);
  }
  .mobile-nav--list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
  }
  /* 35px fixed row height, matching Figma exactly. */
  .mobile-nav--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 35px;
    padding: 0 20px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-ink, #191814);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .mobile-nav--link:hover,
  .mobile-nav--link[aria-current="page"] {
    color: var(--color-accent, #b83a2e);
  }
  .mobile-nav--link--plain {
    font-weight: 600;
  }
  .mobile-nav--summary {
    cursor: pointer;
    list-style: none;
    font-weight: 400;
  }
  .mobile-nav--summary::-webkit-details-marker {
    display: none;
  }
  .mobile-nav--details--promo > .mobile-nav--summary {
    font-weight: 600;
  }
  .mobile-nav--chevron {
    color: var(--color-accent, #b83a2e);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  /* Keyed off .is-open (JS-toggled), not native [open] — [open] only
     clears after the close animation finishes, which would stick the
     chevron/background in the open state through the whole collapse. */
  .mobile-nav--details.is-open > .mobile-nav--summary .mobile-nav--chevron {
    transform: rotate(90deg);
  }
  .mobile-nav--details.is-open > .mobile-nav--summary {
    background-color: var(--color-paper-2, #ebe8e0);
    color: var(--color-accent, #b83a2e);
    font-weight: 700;
  }
  /* Accordion animation via CSS grid-template-rows (0fr <-> 1fr), not
     JS-measured max-height — scrollHeight reads caused visible jank on
     image-heavy panels. JS only toggles .is-open + [open], no size math. */
  .mobile-nav--accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-nav--details.is-open > .mobile-nav--accordion-panel {
    grid-template-rows: 1fr;
  }
  /* overflow: hidden makes min-height: 0 take effect (grid items default to
     content-based min-height, which would block the collapse). */
  .mobile-nav--accordion-panel-inner {
    overflow: hidden;
    min-height: 0;
  }
  /* #4d4d4d/#bfbfbf are neutral grays with no matching theme token. */
  .mobile-nav--sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-paper, #fbfaf9);
  }
  .mobile-nav--sub-link {
    height: 40px;
    padding-left: 36px;
    font-size: 13px;
    font-weight: 400;
    color: #4d4d4d;
  }
  .mobile-nav--sub-link .mobile-nav--chevron {
    color: #bfbfbf;
  }
  /* fyre-icon-set has no size below "sm" — scaled down instead. */
  .mobile-nav--chevron--sub {
    transform: scale(0.55);
  }
  .mobile-nav--group-label {
    margin: 0;
    padding: 16px 20px 12px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-muted, #8a857b);
  }
  /* Figma (907:10459): tiles run full-bleed, no gap/padding. */
  .mobile-nav--promo-tiles {
    display: flex;
    flex-direction: column;
    background-color: var(--color-paper-2, #ebe8e0);
  }
  .mobile-nav--promo-tiles .mobilenav--card {
    border: none;
    border-radius: 0;
  }
  .mobile-nav--footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 8px;
    flex-shrink: 0;
  }
  .mobile-nav--divider {
    height: 1px;
    margin-top: 36px;
    background-color: var(--color-line-2, #dfdcd2);
    flex-shrink: 0;
  }
  /* Focus indicators (golden-checklist gate 8.7) */
  .mobile-nav--summary:focus-visible,
  .mobile-nav--link:focus-visible,
  .mobile-nav--close:focus-visible {
    outline: 2px solid var(--color-accent, #b83a2e);
    outline-offset: 2px;
  }
/* END_SNIPPET:mobile-nav */