/**
 * Fire Shop — Storefront Component Styles
 *
 * Loads web fonts and defines the UI component library for the Fire Shop
 * storefront.  All selectors use the .fire- prefix and all values reference
 * tokens from fire-tokens.css — never hard-code colours, spacing, or radii.
 *
 * Sections (in order):
 *   1.  Fonts (Bunny Fonts @import)
 *   2.  Typography utilities
 *   3.  Buttons
 *   4.  Badges
 *   5.  Form inputs
 *   6.  Card
 *   7.  Alerts
 *   8.  Tables
 *   9.  Price display
 *   10. Layout utilities
 *
 * Source of truth: DESIGN.md
 * Depends on: fire-tokens.css (must be loaded first)
 * @since 1.0.0
 */

/* ============================================================
   1. Fonts — Bunny Fonts (GDPR-friendly Google Fonts alternative)
   ============================================================ */

/**
 * Satoshi        — Display / marketing headlines (weights: 500, 700)
 * Instrument Sans — Body / UI copy (weights: 400, 500, 600)
 * Geist           — Data, numbers, table cells (weights: 400, 500, 600)
 *
 * Geist Mono is loaded on-demand in contexts that need monospace (code blocks,
 * order IDs).  Add it to the @import if you need it globally.
 */
@import url('https://fonts.bunny.net/css?family=satoshi:500,700|instrument-sans:400,500,600|geist:400,500,600&display=swap');

/* ============================================================
   2. Typography utilities
   Scale from DESIGN.md:
     Display  28px / 1.2
     H1       24px / 1.3
     H2       20px / 1.3
     H3       16px / 1.4
     Body     16px / 1.5  (storefront — avoids iOS auto-zoom)
     Small    12px / 1.5
     Data     13px / 1.4  tabular-nums
   ============================================================ */

/**
 * Display — reserved for hero headings and marketing copy.
 * Uses Satoshi bold for maximum visual impact.
 */
.fire-heading-display {
  font-family:    var(--fire-font-display);
  font-size:      28px;
  font-weight:    700;
  line-height:    1.2;
  color:          var(--fire-text);
  letter-spacing: -0.01em;
  margin:         0;
}

/**
 * H1 — primary page title inside content regions.
 */
.fire-heading-1 {
  font-family:    var(--fire-font-display);
  font-size:      24px;
  font-weight:    700;
  line-height:    1.3;
  color:          var(--fire-text);
  letter-spacing: -0.01em;
  margin:         0;
}

/**
 * H2 — section headings (e.g. "Order summary", "Shipping").
 */
.fire-heading-2 {
  font-family:    var(--fire-font-display);
  font-size:      20px;
  font-weight:    500;
  line-height:    1.3;
  color:          var(--fire-text);
  margin:         0;
}

/**
 * H3 — sub-section headings, card titles.
 */
.fire-heading-3 {
  font-family: var(--fire-font-body);
  font-size:   16px;
  font-weight: 600;
  line-height: 1.4;
  color:       var(--fire-text);
  margin:      0;
}

/**
 * Body — default paragraph and label text.
 */
.fire-body {
  font-family: var(--fire-font-body);
  font-size:   16px;
  font-weight: 400;
  line-height: 1.5;
  color:       var(--fire-text);
}

/**
 * Small — fine print, helper text, timestamps.
 */
.fire-body-small {
  font-family: var(--fire-font-body);
  font-size:   12px;
  font-weight: 400;
  line-height: 1.5;
  color:       var(--fire-text-muted);
}

/**
 * Data — numeric values, table cells, stats.
 * tabular-nums ensures digits align in columns.
 */
.fire-data {
  font-family:           var(--fire-font-data);
  font-size:             13px;
  font-weight:           400;
  line-height:           1.4;
  color:                 var(--fire-text);
  font-variant-numeric:  tabular-nums;
}

/**
 * Mono — order IDs, transaction hashes, code snippets.
 */
.fire-mono {
  font-family: var(--fire-font-mono);
  font-size:   13px;
  font-weight: 400;
  line-height: 1.4;
  color:       var(--fire-text-muted);
}

/* ============================================================
   3. Buttons
   All buttons share base resets.  Variants layer colour on top.
   ============================================================ */

/**
 * Shared reset — applied to all .fire-btn-* variants.
 */
.fire-btn,
.fire-btn-primary,
.fire-btn-secondary,
.fire-btn-tertiary,
.fire-btn-ghost,
.fire-btn-danger {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--fire-space-xs);
  padding:         0 var(--fire-space-lg);
  border-radius:   var(--fire-radius-md);
  font-family:     var(--fire-font-body);
  font-size:       14px;
  font-weight:     500;
  line-height:     1;
  height:          44px;
  text-decoration: none;
  cursor:          pointer;
  transition:
    background-color var(--fire-duration-short) var(--fire-ease-move),
    border-color     var(--fire-duration-short) var(--fire-ease-move),
    color            var(--fire-duration-short) var(--fire-ease-move),
    box-shadow       var(--fire-duration-short) var(--fire-ease-move),
    opacity          var(--fire-duration-short) var(--fire-ease-move);
  white-space:     nowrap;
  user-select:     none;
  border:          1px solid transparent;
  box-sizing:      border-box;
}

/* Focus ring — shared across all button variants */
.fire-btn:focus-visible,
.fire-btn-primary:focus-visible,
.fire-btn-secondary:focus-visible,
.fire-btn-tertiary:focus-visible,
.fire-btn-ghost:focus-visible,
.fire-btn-danger:focus-visible {
  outline:        2px solid var(--fire-primary);
  outline-offset: 2px;
}

/* Disabled state — shared */
.fire-btn:disabled,
.fire-btn-primary:disabled,
.fire-btn-secondary:disabled,
.fire-btn-tertiary:disabled,
.fire-btn-ghost:disabled,
.fire-btn-danger:disabled,
.fire-btn[aria-disabled="true"],
.fire-btn-primary[aria-disabled="true"],
.fire-btn-secondary[aria-disabled="true"],
.fire-btn-tertiary[aria-disabled="true"],
.fire-btn-ghost[aria-disabled="true"],
.fire-btn-danger[aria-disabled="true"] {
  opacity: 0.4;
  cursor:  not-allowed;
  pointer-events: none;
}

/**
 * Primary — high-emphasis CTA (e.g. "Place order", "Add to cart").
 * .fire-btn alone acts as primary.
 */
.fire-btn,
.fire-btn-primary {
  background-color: var(--fire-primary);
  color:            #ffffff;
  border-color:     var(--fire-primary);
}

.fire-btn:hover:not(:disabled),
.fire-btn-primary:hover:not(:disabled) {
  background-color: var(--fire-primary-hover);
  border-color:     var(--fire-primary-hover);
  color:            #ffffff;
}

.fire-btn:active:not(:disabled),
.fire-btn-primary:active:not(:disabled) {
  background-color: var(--fire-primary-hover);
  box-shadow:       inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/**
 * Secondary — outlined action (e.g. "Apply coupon", "Add to cart" on cards).
 * Black outline with black text, transparent background.
 */
.fire-btn-secondary {
  background-color: transparent;
  color:            var(--fire-text);
  border-color:     var(--fire-text);
}

.fire-btn-secondary:hover:not(:disabled) {
  background-color: var(--fire-text);
  color:            var(--fire-surface);
  border-color:     var(--fire-text);
}

.fire-btn-secondary:active:not(:disabled) {
  background-color: var(--fire-text);
  color:            var(--fire-surface);
  box-shadow:       inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/**
 * Tertiary — helper controls (e.g. quantity +/-, filter).
 * Light border, dark text. Subtle at rest, darkens on hover.
 */
.fire-btn-tertiary {
  background-color: transparent;
  color:            var(--fire-text);
  border-color:     var(--fire-border);
}

.fire-btn-tertiary:hover:not(:disabled) {
  background-color: var(--fire-surface-alt);
  border-color:     var(--fire-text-muted);
}

.fire-btn-tertiary:active:not(:disabled) {
  background-color: var(--fire-surface-alt);
  box-shadow:       inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/**
 * Ghost — low-emphasis / tertiary action (e.g. "Cancel", navigation links).
 * No visible border at rest — border appears on hover for affordance.
 */
.fire-btn-ghost {
  background-color: transparent;
  color:            var(--fire-text-muted);
  border-color:     transparent;
}

.fire-btn-ghost:hover:not(:disabled) {
  background-color: var(--fire-surface-alt);
  color:            var(--fire-text);
  border-color:     var(--fire-border);
}

.fire-btn-ghost:active:not(:disabled) {
  background-color: var(--fire-border);
}

/**
 * Danger — destructive action (e.g. "Remove item", "Cancel order").
 */
.fire-btn-danger {
  background-color: var(--fire-error);
  color:            #ffffff;
  border-color:     var(--fire-error);
}

.fire-btn-danger:hover:not(:disabled) {
  filter:       brightness(0.9);
}

.fire-btn-danger:active:not(:disabled) {
  filter:       brightness(0.85);
  box-shadow:   inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   4. Badges
   Compact status labels used in order tables, product listings, etc.
   ============================================================ */

/**
 * Base badge — neutral / default.
 */
.fire-badge {
  display:         inline-flex;
  align-items:     center;
  padding:         2px var(--fire-space-sm);
  border-radius:   var(--fire-radius-full);
  font-family:     var(--fire-font-body);
  font-size:       11px;
  font-weight:     500;
  line-height:     1.4;
  letter-spacing:  0.01em;
  text-transform:  uppercase;
  white-space:     nowrap;
  background-color: var(--fire-surface-alt);
  color:            var(--fire-text-muted);
  border:           1px solid var(--fire-border);
}

.fire-badge-success {
  background-color: color-mix(in srgb, var(--fire-success) 12%, transparent);
  color:            var(--fire-success);
  border-color:     color-mix(in srgb, var(--fire-success) 25%, transparent);
}

.fire-badge-warning {
  background-color: color-mix(in srgb, var(--fire-warning) 12%, transparent);
  color:            var(--fire-warning);
  border-color:     color-mix(in srgb, var(--fire-warning) 25%, transparent);
}

.fire-badge-error {
  background-color: color-mix(in srgb, var(--fire-error) 12%, transparent);
  color:            var(--fire-error);
  border-color:     color-mix(in srgb, var(--fire-error) 25%, transparent);
}

.fire-badge-info {
  background-color: color-mix(in srgb, var(--fire-info) 12%, transparent);
  color:            var(--fire-info);
  border-color:     color-mix(in srgb, var(--fire-info) 25%, transparent);
}

/* ============================================================
   5. Form inputs
   ============================================================ */

/**
 * Shared reset for text-like inputs.
 */
.fire-input,
.fire-select,
.fire-textarea {
  display:          block;
  width:            100%;
  height:           44px;
  padding:          0 var(--fire-space-md);
  background-color: var(--fire-surface);
  color:            var(--fire-text);
  border:           1px solid var(--fire-border);
  border-radius:    var(--fire-radius-md);
  font-family:      var(--fire-font-body);
  font-size:        14px;
  font-weight:      400;
  line-height:      1;
  box-sizing:       border-box;
  transition:
    border-color var(--fire-duration-short) var(--fire-ease-move),
    box-shadow   var(--fire-duration-short) var(--fire-ease-move);
  appearance:       none;
  -webkit-appearance: none;
}

.fire-textarea {
  height: auto;
  padding: var(--fire-space-sm) var(--fire-space-md);
  line-height: 1.5;
}

.fire-input::placeholder,
.fire-textarea::placeholder {
  color: var(--fire-text-muted);
}

/* Focus ring */
.fire-input:focus,
.fire-select:focus,
.fire-textarea:focus {
  outline:      none;
  border-color: var(--fire-primary);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--fire-primary) 20%, transparent);
}

/* Disabled */
.fire-input:disabled,
.fire-select:disabled,
.fire-textarea:disabled {
  background-color: var(--fire-surface-alt);
  color:            var(--fire-text-muted);
  cursor:           not-allowed;
}

/* Invalid / error state */
.fire-input[aria-invalid="true"],
.fire-select[aria-invalid="true"],
.fire-textarea[aria-invalid="true"] {
  border-color: var(--fire-error);
}

.fire-input[aria-invalid="true"]:focus,
.fire-select[aria-invalid="true"]:focus,
.fire-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fire-error) 20%, transparent);
}

/**
 * Select — custom chevron via inline SVG background image.
 */
.fire-select {
  padding-right: var(--fire-space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B76' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--fire-space-md) center;
  cursor: pointer;
}

/**
 * Textarea — multi-line, vertically resizable only.
 */
.fire-textarea {
  min-height: 96px;
  resize:     vertical;
}

/**
 * Checkbox and Radio — custom-styled using accent-color for broad support,
 * with explicit size and focus ring.
 */
.fire-checkbox,
.fire-radio {
  appearance:     none;
  -webkit-appearance: none;
  width:          18px;
  height:         18px;
  border:         2px solid var(--fire-border);
  background:     var(--fire-surface);
  cursor:         pointer;
  flex-shrink:    0;
  transition:
    border-color     var(--fire-duration-micro) var(--fire-ease-move),
    background-color var(--fire-duration-micro) var(--fire-ease-move),
    box-shadow       var(--fire-duration-micro) var(--fire-ease-move);
}

.fire-checkbox {
  border-radius: var(--fire-radius-sm);
}

.fire-radio {
  border-radius: var(--fire-radius-full);
}

/* Checked state */
.fire-checkbox:checked,
.fire-radio:checked {
  background-color: var(--fire-primary);
  border-color:     var(--fire-primary);
}

/* Checkmark */
.fire-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='0.5' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
}

/* Radio dot */
.fire-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
}

/* Focus ring */
.fire-checkbox:focus-visible,
.fire-radio:focus-visible {
  outline:        2px solid var(--fire-primary);
  outline-offset: 2px;
}

/* Disabled */
.fire-checkbox:disabled,
.fire-radio:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* ============================================================
   6. Card
   General-purpose surface container.
   ============================================================ */

.fire-card {
  background-color: var(--fire-surface);
  border:           1px solid var(--fire-border);
  border-radius:    var(--fire-radius-md);
  box-shadow:       var(--fire-shadow-sm);
  padding:          var(--fire-space-lg);
}

/**
 * Card header — optional section with bottom border.
 */
.fire-card__header {
  padding-bottom: var(--fire-space-md);
  margin-bottom:  var(--fire-space-md);
  border-bottom:  1px solid var(--fire-border);
}

/**
 * Card footer — optional section with top border.
 */
.fire-card__footer {
  padding-top:  var(--fire-space-md);
  margin-top:   var(--fire-space-md);
  border-top:   1px solid var(--fire-border);
}

/* ============================================================
   7. Alerts
   Inline feedback messages for form submissions and page notices.
   ============================================================ */

/**
 * Base alert.
 */
.fire-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--fire-space-sm);
  padding:       var(--fire-space-md);
  border-radius: var(--fire-radius-md);
  border:        1px solid var(--fire-border);
  background:    var(--fire-surface-alt);
  font-family:   var(--fire-font-body);
  font-size:     14px;
  line-height:   1.5;
  color:         var(--fire-text);
}

.fire-alert-success {
  background-color: color-mix(in srgb, var(--fire-success) 10%, var(--fire-surface));
  border-color:     color-mix(in srgb, var(--fire-success) 30%, transparent);
  color:            var(--fire-success);
}

.fire-alert-warning {
  background-color: color-mix(in srgb, var(--fire-warning) 10%, var(--fire-surface));
  border-color:     color-mix(in srgb, var(--fire-warning) 30%, transparent);
  color:            var(--fire-warning);
}

.fire-alert-error {
  background-color: color-mix(in srgb, var(--fire-error) 10%, var(--fire-surface));
  border-color:     color-mix(in srgb, var(--fire-error) 30%, transparent);
  color:            var(--fire-error);
}

.fire-alert-info {
  background-color: color-mix(in srgb, var(--fire-info) 10%, var(--fire-surface));
  border-color:     color-mix(in srgb, var(--fire-info) 30%, transparent);
  color:            var(--fire-info);
}

/* ============================================================
   8. Tables
   ============================================================ */

/**
 * Full-width table with alternating row colors for scannability.
 */
.fire-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--fire-font-body);
  font-size:       14px;
  color:           var(--fire-text);
}

.fire-table th {
  padding:         var(--fire-space-sm) var(--fire-space-md);
  text-align:      left;
  font-weight:     600;
  font-size:       12px;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  color:           var(--fire-text-muted);
  border-bottom:   2px solid var(--fire-border);
  white-space:     nowrap;
}

.fire-table td {
  padding:         var(--fire-space-sm) var(--fire-space-md);
  border-bottom:   1px solid var(--fire-border);
  vertical-align:  middle;
}

/* Alternating rows */
.fire-table tbody tr:nth-child(even) td {
  background-color: var(--fire-surface-alt);
}

.fire-table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--fire-primary) 5%, var(--fire-surface));
  transition:       background-color var(--fire-duration-short) var(--fire-ease-move);
}

/* Remove bottom border from last row */
.fire-table tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric / data columns — right-align and use tabular figures */
.fire-table td.fire-table__col-num,
.fire-table th.fire-table__col-num {
  text-align:           right;
  font-family:          var(--fire-font-data);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9. Price display
   ============================================================ */

/**
 * Standard price.
 */
.fire-price {
  font-family:          var(--fire-font-data);
  font-size:            16px;
  font-weight:          500;
  font-variant-numeric: tabular-nums;
  color:                var(--fire-text);
  white-space:          nowrap;
}

/**
 * Sale price — shown alongside the struck-through original.
 * Wrap both in .fire-price-sale to get the correct layout.
 */
.fire-price-sale {
  display:     inline-flex;
  align-items: baseline;
  gap:         var(--fire-space-xs);
}

.fire-price-sale .fire-price-original {
  font-family:          var(--fire-font-data);
  font-size:            13px;
  font-variant-numeric: tabular-nums;
  color:                var(--fire-text-muted);
  text-decoration:      line-through;
  white-space:          nowrap;
}

.fire-price-sale .fire-price-discounted {
  font-family:          var(--fire-font-data);
  font-size:            16px;
  font-weight:          500;
  font-variant-numeric: tabular-nums;
  color:                var(--fire-error);   /* Sale price draws the eye */
  white-space:          nowrap;
}

/* ============================================================
   10. Layout utilities
   ============================================================ */

/**
 * .fire-container — centred content wrapper.
 * Max width matches the design grid (1120px).
 */
.fire-container {
  width:   100%;
  padding: 0 20px;
  margin:  0 auto;
}

.fire-shop-archive.fire-container {
  max-width: 1600px;
}

.fire-single-product.fire-container {
  max-width: 1120px;
}

@media (max-width: 767px) {
  .fire-container {
    padding: 0 12px;
  }
}

/**
 * Visually hidden — accessible hide (still in DOM for screen readers).
 */
.fire-sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  white-space: nowrap;
  border:    0;
}

/**
 * Divider — horizontal rule using the border token.
 */
.fire-divider {
  border:     none;
  border-top: 1px solid var(--fire-border);
  margin:     var(--fire-space-lg) 0;
}

/* ============================================================
   11. Breadcrumbs
   ============================================================ */

.fire-breadcrumbs {
  display:   flex;
  flex-wrap: wrap;
  align-items: center;
  gap:       var(--fire-space-xs);
  padding:   var(--fire-space-md) 0;
  color:     var(--fire-text-muted);
}

.fire-breadcrumbs__link {
  color:           var(--fire-text-muted);
  text-decoration: none;
  transition:      color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-breadcrumbs__link:hover {
  color:           var(--fire-primary);
  text-decoration: underline;
}

.fire-breadcrumbs__sep {
  color:   var(--fire-border);
  margin:  0 var(--fire-space-2xs);
}

.fire-breadcrumbs__current {
  color: var(--fire-text);
}

/* ============================================================
   12. Single Product Layout
   ============================================================ */

.fire-single-product {
  padding-top: var(--fire-space-lg);
  padding-bottom: var(--fire-space-3xl);
}

.fire-single-product__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fire-space-xl);
  margin-bottom: var(--fire-space-2xl);
}

@media (min-width: 768px) {
  .fire-single-product__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--fire-space-3xl);
    align-items: start;
  }
}

.fire-single-product__title {
  margin-bottom: var(--fire-space-md);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fire-single-product__price {
  margin-bottom: var(--fire-space-lg);
}

.fire-single-product__price .fire-price {
  font-size: 20px;
  font-weight: 400;
  color: var(--fire-text);
}

.fire-single-product__price .fire-price-sale .fire-price-original {
  font-size: 16px;
}

.fire-single-product__price .fire-price-sale .fire-price-discounted {
  font-size: 20px;
  font-weight: 400;
}

/* MOB/Fiat price flip */
.fire-price-flip__secondary {
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--fire-text-muted);
  cursor: pointer;
  margin-top: 2px;
  user-select: none;
  transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-price-flip__secondary:hover {
  color: var(--fire-text);
}

.fire-price-flip--swapped .fire-price-flip__primary {
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--fire-text-muted);
}

.fire-price-flip--swapped .fire-price-flip__primary .fire-price {
  font-size: inherit;
  font-weight: 400;
}

.fire-price-flip--swapped .fire-price-flip__secondary {
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 400;
  color: var(--fire-text);
  order: -1;
}

.fire-price-flip--swapped .fire-price-flip__secondary .fire-price-flip__mob {
  font-size: inherit;
}

.fire-price-flip {
  display: flex;
  flex-direction: column;
}

.fire-single-product__billing {
  color: var(--fire-text-muted);
  margin-bottom: var(--fire-space-md);
}

.fire-single-product__stock {
  margin-bottom: var(--fire-space-lg);
}

.fire-single-product__stock .fire-badge {
  margin-right: var(--fire-space-xs);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fire-single-product__short-desc {
  margin-bottom: var(--fire-space-lg);
  line-height: 1.7;
  color: var(--fire-text-muted);
}

.fire-single-product__rating {
  display: flex;
  align-items: center;
  gap: var(--fire-space-sm);
  margin-bottom: var(--fire-space-lg);
}

.fire-single-product__review-link {
  color: var(--fire-primary);
  text-decoration: none;
}

.fire-single-product__review-link:hover {
  text-decoration: underline;
}

/* Add to cart area */
.fire-single-product__add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--fire-space-md);
  margin-bottom: var(--fire-space-lg);
  padding-top: var(--fire-space-md);
  flex-wrap: wrap;
}

.fire-single-product__cart-btn {
  padding: var(--fire-space-sm) var(--fire-space-2xl);
}

.fire-single-product__external-btn {
  display: inline-flex;
  padding: var(--fire-space-sm) var(--fire-space-2xl);
  margin-bottom: var(--fire-space-lg);
}

.fire-single-product__external-btn:hover:not(:disabled) {
  background-color: var(--fire-text-muted);
  border-color: var(--fire-text-muted);
}

/* Meta (SKU, categories, tags) */
.fire-single-product__meta {
  margin-top: var(--fire-space-xl);
  padding-top: var(--fire-space-lg);
  border-top: 1px solid var(--fire-border);
  color: var(--fire-text-muted);
}

.fire-single-product__meta p {
  margin: 0 0 var(--fire-space-xs);
}

.fire-single-product__meta strong {
  font-weight: 500;
  color: var(--fire-text-muted);
}

.fire-single-product__meta a {
  color: var(--fire-text);
  text-decoration: none;
  transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-single-product__meta a:hover {
  color: var(--fire-primary);
}

/* ============================================================
   13. Quantity Selector
   ============================================================ */

.fire-quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.fire-quantity__btn {
  width:  44px;
  height: 44px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: 0;
  flex-shrink: 0;
}

.fire-quantity__minus {
  border-radius: var(--fire-radius-md) 0 0 var(--fire-radius-md);
}

.fire-quantity__plus {
  border-radius: 0 var(--fire-radius-md) var(--fire-radius-md) 0;
}

.fire-quantity__input {
  width:  48px;
  height: 44px;
  margin: 0;
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
  font-size: 13px;
  -moz-appearance: textfield;
}

.fire-quantity__input::-webkit-inner-spin-button,
.fire-quantity__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================================
   14. Product Gallery
   ============================================================ */

.fire-product-gallery {
  position: relative;
}

.fire-product-gallery__badge {
  position: absolute;
  top:  var(--fire-space-md);
  left: var(--fire-space-md);
  z-index: 2;
}

.fire-product-gallery__main {
  margin-bottom: var(--fire-space-md);
  border-radius: var(--fire-radius-md);
  overflow: hidden;
  background: var(--fire-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-product-gallery__main-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.fire-product-gallery__main-image {
  width: 100%;
  height: auto;
  display: block;
}

.fire-product-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fire-border);
}

.fire-product-gallery__thumbs {
  display: flex;
  gap: var(--fire-space-sm);
  overflow-x: auto;
  padding-bottom: var(--fire-space-xs);
}

.fire-product-gallery__thumb {
  flex-shrink: 0;
  width:  72px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: var(--fire-radius-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--fire-surface-alt);
  transition: border-color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-product-gallery__thumb:hover,
.fire-product-gallery__thumb--active {
  border-color: var(--fire-primary);
}

.fire-product-gallery__thumb img {
  width:  100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   15. Lightbox
   ============================================================ */

.fire-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fire-lightbox[hidden] {
  display: none;
}

.fire-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.fire-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
}

.fire-lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--fire-radius-md);
}

.fire-lightbox__close {
  position: absolute;
  top:   -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: var(--fire-space-xs);
  line-height: 1;
}

.fire-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  padding: var(--fire-space-sm) var(--fire-space-md);
  border-radius: var(--fire-radius-md);
  transition: background var(--fire-duration-short) var(--fire-ease-move);
}

.fire-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.fire-lightbox__prev {
  left: -60px;
}

.fire-lightbox__next {
  right: -60px;
}

@media (max-width: 767px) {
  .fire-lightbox__prev {
    left: var(--fire-space-xs);
  }
  .fire-lightbox__next {
    right: var(--fire-space-xs);
  }
}

/* ============================================================
   16. Variation Selector
   ============================================================ */

.fire-variation-selector {
  margin-bottom: var(--fire-space-lg);
}

.fire-variation-selector__group {
  margin-bottom: var(--fire-space-md);
}

.fire-variation-selector__label {
  display: block;
  margin-bottom: var(--fire-space-xs);
  font-weight: 500;
}

.fire-variation-selector__select {
  max-width: 280px;
}

.fire-variation-selector__info {
  margin-top: var(--fire-space-md);
  margin-bottom: var(--fire-space-md);
}

.fire-variation-selector__price {
  margin-bottom: var(--fire-space-sm);
}

.fire-variation-selector__price .fire-price {
  font-size: 20px;
  font-weight: 600;
}

.fire-variation-selector__cart {
  margin-top: var(--fire-space-md);
}

/* ============================================================
   17. Product Tabs (CSS-only switching)
   ============================================================ */

.fire-product-tabs {
  margin-bottom: var(--fire-space-2xl);
  margin-top: var(--fire-space-xl);
  padding-top: var(--fire-space-xl);
}

/* Hide radio inputs */
.fire-product-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Tab navigation */
.fire-product-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fire-border);
  margin-bottom: var(--fire-space-xl);
}

.fire-product-tabs__tab {
  padding: var(--fire-space-sm) var(--fire-space-lg);
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  color: var(--fire-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--fire-duration-short) var(--fire-ease-move),
    border-color var(--fire-duration-short) var(--fire-ease-move);
  user-select: none;
}

.fire-product-tabs__tab:hover {
  color: var(--fire-text);
}

/* Hide all panels by default */
.fire-product-tabs__panel {
  display: none;
}

/* CSS-only tab activation via adjacent sibling selectors.
   Each radio corresponds to the Nth tab label and Nth panel.
   The nav is also a div sibling, so panels are nth-of-type(2), (3), (4)
   since the nav is nth-of-type(1). */

/* First tab */
.fire-product-tabs__radio:nth-of-type(1):checked ~ .fire-product-tabs__nav .fire-product-tabs__tab:nth-child(1) {
  color: var(--fire-text);
  font-weight: 500;
  border-bottom-color: var(--fire-text);
}
.fire-product-tabs__radio:nth-of-type(1):checked ~ .fire-product-tabs__panel:nth-of-type(2) {
  display: block;
}

/* Second tab */
.fire-product-tabs__radio:nth-of-type(2):checked ~ .fire-product-tabs__nav .fire-product-tabs__tab:nth-child(2) {
  color: var(--fire-text);
  font-weight: 500;
  border-bottom-color: var(--fire-text);
}
.fire-product-tabs__radio:nth-of-type(2):checked ~ .fire-product-tabs__panel:nth-of-type(3) {
  display: block;
}

/* Third tab */
.fire-product-tabs__radio:nth-of-type(3):checked ~ .fire-product-tabs__nav .fire-product-tabs__tab:nth-child(3) {
  color: var(--fire-text);
  font-weight: 500;
  border-bottom-color: var(--fire-text);
}
.fire-product-tabs__radio:nth-of-type(3):checked ~ .fire-product-tabs__panel:nth-of-type(4) {
  display: block;
}

/* Tab content styling */
.fire-product-tabs__content {
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 1.7;
  color: var(--fire-text-muted);
}

.fire-product-tabs__content img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   18. Reviews
   ============================================================ */

.fire-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--fire-space-md);
  margin-bottom: var(--fire-space-xl);
}

.fire-review {
  padding: var(--fire-space-md);
}

.fire-review__header {
  margin-bottom: var(--fire-space-sm);
}

.fire-review__rating {
  margin-bottom: var(--fire-space-xs);
}

.fire-review__title {
  margin-top: var(--fire-space-xs);
}

.fire-review__body {
  margin-bottom: var(--fire-space-sm);
}

.fire-review__meta {
  display: flex;
  align-items: center;
  gap: var(--fire-space-sm);
  color: var(--fire-text-muted);
}

/* Review form */
.fire-review-form {
  margin-top: var(--fire-space-xl);
}

.fire-review-form__title {
  margin-bottom: var(--fire-space-md);
}

.fire-review-form__field {
  margin-bottom: var(--fire-space-md);
}

.fire-review-form__field label {
  display: block;
  margin-bottom: var(--fire-space-xs);
  font-weight: 500;
}

.fire-review-form__rating-select {
  margin-bottom: var(--fire-space-md);
}

.fire-review-form__rating-select > label {
  display: block;
  margin-bottom: var(--fire-space-xs);
  font-weight: 500;
}

/* Star rating select */
.fire-star-select {
  display: inline-flex;
  gap: var(--fire-space-2xs);
}

.fire-star-select__label {
  cursor: pointer;
  display: inline-flex;
}

.fire-star-select__star {
  transition: fill var(--fire-duration-micro) var(--fire-ease-move);
}

/* ============================================================
   19. Product Grid (responsive)
   ============================================================ */

.fire-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--fire-grid-columns, 4), 1fr);
  gap: var(--fire-space-xl);
}

/* Product card styles within grid */
.fire-product-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--fire-border);
  border-radius: var(--fire-radius-md);
  transition: box-shadow var(--fire-duration-medium) var(--fire-ease-move),
              border-color var(--fire-duration-medium) var(--fire-ease-move);
}

.fire-product-card:hover {
  box-shadow: var(--fire-shadow-md);
  border-color: transparent;
}

.fire-product-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.fire-product-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fire-surface-alt);
}

.fire-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fire-duration-medium) var(--fire-ease-move);
}

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

.fire-product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fire-border);
}

.fire-product-card__badge {
  position: absolute;
  top:  var(--fire-space-sm);
  left: var(--fire-space-sm);
  z-index: 1;
}

.fire-product-card__body {
  padding: var(--fire-space-md) var(--fire-space-md) var(--fire-space-sm);
  flex: 1;
  position: relative;
}

.fire-product-card__name {
  margin-bottom: var(--fire-space-xs);
  font-weight: 500;
  font-size: 15px;
  max-width: 90%;
}

.fire-product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--fire-space-xs);
  margin-bottom: var(--fire-space-xs);
}

.fire-product-card__price {
  margin-top: auto;
}

.fire-product-card__price .fire-price {
  font-size: 13px;
  font-weight: 400;
  color: var(--fire-text-muted);
}

.fire-product-card__price .fire-price-sale .fire-price-original {
  font-size: 12px;
}

.fire-product-card__price .fire-price-sale .fire-price-discounted {
  font-size: 13px;
  font-weight: 400;
}

.fire-product-card__add-to-cart {
  margin: 0 var(--fire-space-md) var(--fire-space-md);
  width: calc(100% - var(--fire-space-md) * 2);
  font-size: 13px;
}

.fire-product-card__added {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.fire-product-card__reverting {
  opacity: 0;
}

.fire-product-card__out-of-stock {
  display: block;
  text-align: center;
  padding: var(--fire-space-sm) var(--fire-space-md) var(--fire-space-md);
  color: var(--fire-text-muted);
}

/* Responsive grid columns */
@media (max-width: 1024px) {
  .fire-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .fire-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fire-space-md);
  }
}

@media (max-width: 479px) {
  .fire-product-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   20. Shop Archive Layout
   ============================================================ */

.fire-shop-archive {
  padding-top: var(--fire-space-lg);
  padding-bottom: var(--fire-space-3xl);
}

.fire-shop-archive__title {
  margin-bottom: var(--fire-space-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fire-shop-archive__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fire-space-xl);
}

/*
 * The sidebar is closed in both modes until the Filters button is pressed.
 * Above the mobile breakpoint it is a grid column that expands in place;
 * below it, the rules in section 21 take it out of the flow entirely, so a
 * closed sidebar costs the page no vertical space.
 *
 * A closed sidebar is hidden rather than merely collapsed, so nothing inside
 * it can be reached by keyboard. Visibility flips instantly on open (so the
 * panel can take focus straight away) and only at the end of the close, which
 * is what lets the sidebar stay on screen while it animates out.
 */
.fire-shop-archive__sidebar {
  grid-column: 1;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-width var(--fire-duration-medium) var(--fire-ease-move),
              opacity var(--fire-duration-medium) var(--fire-ease-move),
              visibility 0s linear var(--fire-duration-medium);
}

/* Filter toggle button */
.fire-shop-archive__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fire-space-xs);
  font-size: 13px;
}

/* Show sidebar when toggled */
.fire-shop-archive--filters-open .fire-shop-archive__sidebar {
  max-width: 260px;
  opacity: 1;
  visibility: visible;
  transition: max-width var(--fire-duration-medium) var(--fire-ease-move),
              opacity var(--fire-duration-medium) var(--fire-ease-move),
              visibility 0s linear 0s;
}

/* Panel header and backdrop belong to the mobile presentation only */
.fire-shop-archive__filters-header,
.fire-shop-archive__filters-backdrop {
  display: none;
}

@media (min-width: 768px) {
  .fire-shop-archive__layout {
    grid-template-columns: 0fr 1fr;
    gap: 0;
    transition: grid-template-columns var(--fire-duration-medium) var(--fire-ease-move),
                gap var(--fire-duration-medium) var(--fire-ease-move);
  }

  .fire-shop-archive--filters-open .fire-shop-archive__layout {
    grid-template-columns: 240px 1fr;
    gap: var(--fire-space-2xl);
  }
}

/* Toolbar (sort + count) */
.fire-shop-archive__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--fire-space-xl);
  padding-bottom: var(--fire-space-md);
  border-bottom: 1px solid var(--fire-border);
  flex-wrap: wrap;
  gap: var(--fire-space-sm);
}

.fire-shop-archive__count {
  margin: 0;
  color: var(--fire-text-muted);
}

.fire-shop-archive__sort .fire-select {
  width: auto;
  min-width: 180px;
}

/* ============================================================
   21. Sidebar Filters
   ============================================================ */

/*
 * Below 768px the sidebar is an off-canvas panel: fixed to the left edge,
 * out of the document flow, and slid in over a backdrop. It sits under the
 * mini cart drawer (9998/9999) so an open cart is never covered by filters.
 */
@media (max-width: 767px) {
  .fire-shop-archive {
    --fire-filters-panel-width: 320px;
  }

  .fire-shop-archive__sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 9991;
    box-sizing: border-box;
    width: 88vw;
    max-width: var(--fire-filters-panel-width);
    padding: 0 var(--fire-space-lg) var(--fire-space-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--fire-surface);
    box-shadow: var(--fire-shadow-lg);
    opacity: 1;
    transform: translateX(-100%);
    transition: transform var(--fire-duration-medium) var(--fire-ease-enter),
                visibility 0s linear var(--fire-duration-medium);
  }

  .fire-shop-archive--filters-open .fire-shop-archive__sidebar {
    max-width: var(--fire-filters-panel-width);
    transform: translateX(0);
    transition: transform var(--fire-duration-medium) var(--fire-ease-enter),
                visibility 0s linear 0s;
  }

  .fire-shop-archive__filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fire-duration-medium) var(--fire-ease-move),
                visibility 0s linear var(--fire-duration-medium);
  }

  .fire-shop-archive--filters-open .fire-shop-archive__filters-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--fire-duration-medium) var(--fire-ease-move),
                visibility 0s linear 0s;
  }

  /* Stays put while the filter groups scroll under it */
  .fire-shop-archive__filters-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 calc(var(--fire-space-lg) * -1) var(--fire-space-lg);
    padding: var(--fire-space-sm) var(--fire-space-sm) var(--fire-space-sm) var(--fire-space-lg);
    background: var(--fire-surface);
    border-bottom: 1px solid var(--fire-border);
  }

  .fire-shop-archive__filters-title {
    margin: 0;
    font-family: var(--fire-font-body);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fire-text-muted);
  }

  .fire-shop-archive__filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--fire-space-sm);
    border: none;
    border-radius: var(--fire-radius-sm);
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--fire-text-muted);
    cursor: pointer;
    transition: color var(--fire-duration-short) var(--fire-ease-move);
  }

  .fire-shop-archive__filters-close:hover {
    color: var(--fire-text);
  }

  /* The header's own hairline separates the first group, so it drops its top
     border rather than drawing a second line right under the first. */
  .fire-shop-archive__filters-header + .fire-filter-group {
    border-top: 0;
    padding-top: 0;
  }
}

/* Body scroll lock while the mobile filter panel is open */
body.fire-shop-filters-open {
  overflow: hidden;
}

.fire-filter-group {
  margin-bottom: var(--fire-space-lg);
  padding-bottom: var(--fire-space-lg);
  border-bottom: 1px solid var(--fire-border);
}

.fire-filter-group__title {
  margin-bottom: var(--fire-space-md);
}

/* Search filter */
.fire-filter-search {
  display: flex;
  align-items: stretch;
  gap: var(--fire-space-xs);
}

.fire-filter-search .fire-input {
  flex: 1;
}

.fire-filter-search .fire-btn-primary {
  flex-shrink: 0;
}

/* Category tree */
.fire-filter-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fire-filter-categories__item {
  margin-bottom: var(--fire-space-xs);
}

.fire-filter-categories__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--fire-text);
  padding: var(--fire-space-2xs) 0;
  transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-filter-categories__item a:hover {
  color: var(--fire-primary);
}

.fire-filter-categories__item--active > a {
  color: var(--fire-primary);
  font-weight: 600;
}

.fire-filter-categories__count {
  color: var(--fire-text-muted);
}

.fire-filter-categories__children {
  list-style: none;
  margin: 0;
  padding-left: var(--fire-space-md);
}

/* Price filter */
.fire-filter-price__inputs {
  display: flex;
  align-items: center;
  gap: var(--fire-space-xs);
  margin-bottom: var(--fire-space-sm);
}

.fire-filter-price__inputs .fire-input {
  width: 80px;
  text-align: center;
}

.fire-filter-price__sep {
  color: var(--fire-text-muted);
}

/* Checkbox filter */
.fire-filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--fire-space-sm);
  cursor: pointer;
}

/* Rating filter */
.fire-filter-ratings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fire-filter-ratings__item {
  margin-bottom: var(--fire-space-xs);
}

.fire-filter-ratings__item a {
  display: flex;
  align-items: center;
  gap: var(--fire-space-sm);
  text-decoration: none;
  color: var(--fire-text);
  padding: var(--fire-space-2xs) 0;
  transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-filter-ratings__item a:hover {
  color: var(--fire-primary);
}

.fire-filter-ratings__item--active a {
  color: var(--fire-primary);
  font-weight: 600;
}

/* ============================================================
   22. Active Filters
   ============================================================ */

.fire-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fire-space-sm);
  margin-bottom: var(--fire-space-lg);
}

.fire-active-filters__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--fire-space-xs);
}

.fire-active-filters__remove {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--fire-duration-short) var(--fire-ease-move);
}

.fire-active-filters__remove:hover {
  opacity: 1;
}

.fire-active-filters__clear {
  font-size: 12px;
}

/* ============================================================
   23. Pagination
   ============================================================ */

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

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

.fire-pagination__link {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
}

.fire-pagination__current {
  cursor: default;
}

.fire-pagination__ellipsis {
  padding: 0 var(--fire-space-xs);
  color: var(--fire-text-muted);
}

/* ============================================================
   24. Grouped Products
   ============================================================ */

.fire-grouped-products {
  margin-bottom: var(--fire-space-lg);
}

.fire-grouped-products__table {
  margin-bottom: var(--fire-space-md);
}

/* ============================================================
   25. Bundle Items
   ============================================================ */

.fire-bundle-items {
  margin-bottom: var(--fire-space-lg);
}

.fire-bundle-items__list {
  list-style: none;
  margin: var(--fire-space-md) 0;
  padding: 0;
}

.fire-bundle-items__item {
  display: flex;
  align-items: center;
  gap: var(--fire-space-md);
  padding: var(--fire-space-sm) 0;
  border-bottom: 1px solid var(--fire-border);
}

.fire-bundle-items__name {
  flex: 1;
}

.fire-bundle-items__qty {
  color: var(--fire-text-muted);
}

.fire-bundle-items__total {
  margin-top: var(--fire-space-md);
}

/* ============================================================
   26. Related Products
   ============================================================ */

.fire-related-products {
  margin-top: var(--fire-space-2xl);
  padding-top: var(--fire-space-xl);
  border-top: 1px solid var(--fire-border);
}

.fire-related-products__title {
  margin-bottom: var(--fire-space-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ============================================================
   27. Attributes Table
   ============================================================ */

.fire-attributes-table th {
  width: 180px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--fire-text);
}

/* ============================================================
   28. Stars (inline)
   ============================================================ */

.fire-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  vertical-align: middle;
}

/* ============================================================
   29. Cart Page

   The cart table, totals and empty state live in fire-cart.css, which
   loads on every page alongside this file. They used to be declared in
   both, against two different sets of class names, and the copy here won
   nothing while breaking the mobile layout. Only the notice remains,
   because only the notice is not declared over there.
   ============================================================ */

/* Cart notice */
.fire-cart-notice {
  padding: var(--fire-space-sm) var(--fire-space-md);
  border-radius: var(--fire-radius-md);
  margin-bottom: var(--fire-space-md);
  font-size: 14px;
  font-family: var(--fire-font-body);
}

.fire-cart-notice--error {
  background: rgba(217, 48, 37, 0.08);
  color: var(--fire-error);
  border: 1px solid rgba(217, 48, 37, 0.2);
}

.fire-cart-notice--info {
  background: rgba(37, 99, 235, 0.08);
  color: var(--fire-info);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* ============================================================
   30. Mini Cart Drawer
   ============================================================ */

.fire-mini-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fire-duration-normal, 200ms) ease,
              visibility var(--fire-duration-normal, 200ms) ease;
}

.fire-mini-cart-overlay--active {
  opacity: 1;
  visibility: visible;
}

.fire-mini-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90vw;
  max-width: 450px;
  background: var(--fire-surface);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform var(--fire-duration-normal, 200ms) ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  font-family: var(--fire-font-body);
}

.fire-mini-cart-drawer--open {
  transform: translateX(0);
}

.fire-mini-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fire-space-md) var(--fire-space-lg);
  border-bottom: 1px solid var(--fire-border);
  flex-shrink: 0;
}

.fire-mini-cart-drawer__title {
  margin: 0;
  font-family: var(--fire-font-body);
  font-size: 14px;
  font-weight: 600;
}

.fire-mini-cart-drawer__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--fire-text-muted);
  cursor: pointer;
  padding: var(--fire-space-sm);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fire-radius-sm);
  transition: color var(--fire-duration-fast, 100ms) ease;
}

.fire-mini-cart-drawer__close:hover {
  color: var(--fire-text);
}

.fire-mini-cart-contents {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Reaching the end of the item list must not start scrolling the page
     behind the drawer, which is how a touch scroll escapes the panel. */
  overscroll-behavior: contain;
}

/* Dropdown mode */
.fire-mini-cart-drawer[data-mode="dropdown"] {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  width: 360px;
  max-height: 480px;
  border-radius: var(--fire-radius-md);
  border: 1px solid var(--fire-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
}

.fire-mini-cart-drawer[data-mode="dropdown"].fire-mini-cart-drawer--open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.fire-mini-cart-overlay[data-mode="dropdown"] {
  display: none;
}

/* Mini cart items */
.fire-mini-cart__items {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.fire-mini-cart__item {
  display: flex;
  align-items: center;
  gap: var(--fire-space-sm);
  padding: var(--fire-space-md) var(--fire-space-lg);
  border-bottom: 1px solid var(--fire-border);
}

.fire-mini-cart__item-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--fire-radius-sm);
  display: block;
}

.fire-mini-cart__item-placeholder {
  width: 60px;
  height: 60px;
  background: var(--fire-surface-alt);
  border-radius: var(--fire-radius-sm);
}

.fire-mini-cart__item-details {
  flex: 1;
  min-width: 0;
}

.fire-mini-cart__item-name {
  display: block;
  font-family: var(--fire-font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--fire-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fire-mini-cart__item-meta {
  display: block;
  font-size: 12px;
  color: var(--fire-text-muted);
  margin-top: var(--fire-space-2xs);
  font-family: var(--fire-font-data);
}

.fire-mini-cart__item-remove {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--fire-text-muted);
  cursor: pointer;
  padding: var(--fire-space-xs);
  flex-shrink: 0;
  border-radius: var(--fire-radius-sm);
  transition: color var(--fire-duration-fast, 100ms) ease;
}

.fire-mini-cart__item-remove:hover {
  color: var(--fire-error);
}

/* Mini cart totals */
.fire-mini-cart__totals {
  padding: var(--fire-space-md) var(--fire-space-lg);
  border-top: 1px solid var(--fire-border);
}

.fire-mini-cart__totals-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--fire-font-body);
  font-size: 13px;
  padding: var(--fire-space-xs) 0;
  color: var(--fire-text-muted);
}

.fire-mini-cart__totals-row--total {
  font-family: var(--fire-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fire-text);
  border-top: 1px solid var(--fire-border);
  padding-top: var(--fire-space-sm);
  margin-top: var(--fire-space-xs);
}

.fire-mini-cart__totals-value {
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
}

/* Mini cart buttons */
.fire-mini-cart__buttons {
  padding: var(--fire-space-md) var(--fire-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--fire-space-sm);
  border-top: 1px solid var(--fire-border);
}

/* Mini cart empty state */
.fire-mini-cart-empty {
  padding: var(--fire-space-2xl) var(--fire-space-lg);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fire-mini-cart-empty__message {
  color: var(--fire-text-muted);
  font-size: 14px;
  margin-bottom: var(--fire-space-md);
}

/* Body scroll lock when mini cart is open */
body.fire-mini-cart-open {
  overflow: hidden;
}

/* ============================================================
   31. Cart Count Badge
   ============================================================ */

.fire-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--fire-radius-full);
  background: var(--fire-primary);
  color: #fff;
  font-family: var(--fire-font-data);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fire-cart-count:empty,
.fire-cart-count:not(.fire-cart-count--has-items) {
  display: none;
}

/* ============================================================
   32. Loading States
   ============================================================ */

.fire-loading {
  position: relative;
  pointer-events: none;
}

.fire-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 10;
  border-radius: inherit;
}

.fire-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--fire-border);
  border-top-color: var(--fire-primary);
  border-radius: 50%;
  animation: fire-spin 0.6s linear infinite;
  z-index: 11;
}

@keyframes fire-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   33. Cart & Checkout (external stylesheets)
   Cart and checkout page styles, responsive rules included, live in
   fire-cart.css and fire-checkout.css.
   ============================================================ */

/* ============================================================
   34. Add-to-Cart Button
   Base add-to-cart styles used across product cards and pages.
   ============================================================ */

.fire-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fire-space-xs);
  padding: var(--fire-space-sm) var(--fire-space-md);
  background-color: var(--fire-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--fire-radius-md);
  font-family: var(--fire-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--fire-duration-short) var(--fire-ease-move),
    opacity          var(--fire-duration-short) var(--fire-ease-move);
}

.fire-add-to-cart:hover {
  background-color: var(--fire-primary-hover);
}

.fire-add-to-cart:focus-visible {
  outline: 2px solid var(--fire-primary);
  outline-offset: 2px;
}

.fire-add-to-cart:disabled,
.fire-add-to-cart[aria-disabled="true"] {
  background-color: var(--fire-border);
  color: var(--fire-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.fire-add-to-cart--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.fire-add-to-cart--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: fire-atc-spin 0.6s linear infinite;
}

@keyframes fire-atc-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   35. Button Utility Classes
   ============================================================ */

/* Width: block (full width) */
.fire-btn--block,
.fire-btn--full {
  width: 100%;
}

/* ============================================================
   36. Thank You Page
   ============================================================ */

.fire-thank-you {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--fire-space-2xl) var(--fire-space-md);
  font-family: var(--fire-font-body);
}

.fire-thank-you__header {
  text-align: center;
  margin-bottom: var(--fire-space-xl);
}

.fire-thank-you__header .fire-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--fire-radius-full);
  background-color: rgba(26, 135, 84, 0.1);
  color: var(--fire-success);
  font-size: 28px;
  margin-bottom: var(--fire-space-md);
}

.fire-thank-you__header h1 {
  font-family: var(--fire-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--fire-text);
  margin: 0 0 var(--fire-space-sm) 0;
}

.fire-thank-you__header p {
  font-size: 14px;
  color: var(--fire-text-muted);
  margin: 0;
}

.fire-thank-you__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fire-space-md);
  padding: var(--fire-space-lg);
  background-color: var(--fire-surface-alt);
  border-radius: var(--fire-radius-md);
  margin-bottom: var(--fire-space-xl);
}

.fire-thank-you__details dt {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fire-text-muted);
  margin-bottom: var(--fire-space-xs);
}

.fire-thank-you__details dd {
  font-size: 14px;
  font-weight: 500;
  color: var(--fire-text);
  margin: 0;
}

.fire-thank-you__items {
  margin-bottom: var(--fire-space-xl);
}

.fire-thank-you__items h2 {
  font-family: var(--fire-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--fire-text);
  margin: 0 0 var(--fire-space-md) 0;
}

.fire-thank-you__items table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fire-thank-you__items table th {
  padding: var(--fire-space-sm) 0;
  border-bottom: 2px solid var(--fire-border);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fire-text-muted);
  text-align: left;
}

.fire-thank-you__items table th:last-child {
  text-align: right;
}

.fire-thank-you__items table td {
  padding: var(--fire-space-sm) 0;
  border-bottom: 1px solid var(--fire-border);
  color: var(--fire-text);
}

.fire-thank-you__items table td:last-child {
  text-align: right;
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
}

.fire-thank-you__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fire-space-xl);
}

.fire-thank-you__addresses h3 {
  font-family: var(--fire-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--fire-text);
  margin: 0 0 var(--fire-space-sm) 0;
}

.fire-thank-you__addresses address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fire-text-muted);
}

@media (max-width: 680px) {
  .fire-thank-you__addresses {
    grid-template-columns: 1fr;
    gap: var(--fire-space-lg);
  }
}

/* ============================================================
   Thank You Block (.fire-thankyou)
   ============================================================ */

.fire-thankyou {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--fire-space-xl) var(--fire-space-md);
  font-family: var(--fire-font-body);
}

.fire-thankyou-empty {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--fire-space-xxl) var(--fire-space-md);
  text-align: center;
}

.fire-thankyou-empty p {
  color: var(--fire-text-muted);
  margin-bottom: var(--fire-space-lg);
}

.fire-thankyou__header {
  text-align: center;
  margin-bottom: var(--fire-space-xl);
}

.fire-thankyou__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--fire-success);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--fire-space-md);
}

.fire-thankyou__subtitle {
  font-size: 14px;
  color: var(--fire-text-muted);
}

.fire-thankyou__details,
.fire-thankyou__items,
.fire-thankyou__totals {
  margin-bottom: var(--fire-space-xl);
}

.fire-thankyou__meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fire-thankyou__meta-table th,
.fire-thankyou__meta-table td {
  padding: var(--fire-space-sm) 0;
  border-bottom: 1px solid var(--fire-border);
}

.fire-thankyou__meta-table th {
  text-align: left;
  font-weight: 500;
  color: var(--fire-text-muted);
  width: 180px;
}

.fire-thankyou__txid {
  font-family: var(--fire-font-data);
  font-size: 12px;
  background-color: var(--fire-surface-alt);
  padding: 2px 8px;
  border-radius: var(--fire-radius-sm);
  word-break: break-all;
}

.fire-thankyou__items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fire-thankyou__items-table th {
  padding: var(--fire-space-sm) 0;
  border-bottom: 2px solid var(--fire-border);
  text-align: left;
  font-weight: 500;
  color: var(--fire-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fire-thankyou__items-table th:last-child {
  text-align: right;
}

.fire-thankyou__items-table td {
  padding: var(--fire-space-sm) 0;
  border-bottom: 1px solid var(--fire-border);
  font-size: 14px;
}

.fire-thankyou__items-table td:last-child {
  text-align: right;
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
}

.fire-thankyou__totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fire-thankyou__totals-table th,
.fire-thankyou__totals-table td {
  padding: var(--fire-space-sm) 0;
  border-bottom: 1px solid var(--fire-border);
}

.fire-thankyou__totals-table th {
  text-align: left;
  font-weight: 500;
  color: var(--fire-text-muted);
}

.fire-thankyou__totals-table td {
  text-align: right;
  font-family: var(--fire-font-data);
  font-variant-numeric: tabular-nums;
}

.fire-thankyou__total-row th,
.fire-thankyou__total-row td {
  font-size: 16px;
  font-weight: 700;
  color: var(--fire-text);
  border-bottom: none;
  padding-top: var(--fire-space-md);
}

.fire-thankyou__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fire-space-xl);
  margin-bottom: var(--fire-space-xl);
}

.fire-thankyou__address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fire-text-muted);
}

.fire-thankyou__actions {
  text-align: center;
  padding-top: var(--fire-space-lg);
  border-top: 1px solid var(--fire-border);
}

@media (max-width: 680px) {
  .fire-thankyou__addresses {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   Mini Cart FAB (floating action button)
   ────���───────────────────────────────────────────────────── */
.fire-mini-cart-fab {
  position: fixed;
  z-index: 9997;
}

.fire-mini-cart-fab--bottom-right {
  bottom: 32px;
  right: 32px;
}

.fire-mini-cart-fab--top-right {
  top: 32px;
  right: 32px;
}

.fire-mini-cart-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--fire-radius-full);
  border: none;
  background: var(--fire-text);
  color: var(--fire-bg);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  transition: transform var(--fire-duration-fast) var(--fire-ease-move),
              box-shadow var(--fire-duration-fast) var(--fire-ease-move);
  position: relative;
}

.fire-mini-cart-fab__btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.fire-mini-cart-fab__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.fire-mini-cart-fab__btn:active {
  transform: scale(0.97);
}

.fire-mini-cart-fab__btn .fire-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--fire-radius-full);
  background: var(--fire-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

.fire-mini-cart-fab__btn .fire-cart-count--hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fire-mini-cart-fab__btn {
    transition: none;
  }
}