/* =========================================
   GLOBAL BASE
========================================= */

body {
  display: block;
  font-family: "Orbitron", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 2px;
  background-color: #260000;
}
::-webkit-scrollbar-thumb {
  background: red;
}
::-webkit-scrollbar-thumb:hover {
  background: silver;
}

/* =========================================
   FORM ELEMENTS — font always matches site font
   Browsers default inputs/buttons to system font
========================================= */

input,
select,
textarea,
button {
  font-family: "Orbitron", sans-serif;
  font-size: inherit;
}

/* =========================================
   TYPOGRAPHY SYSTEM
   All font sizes controlled from here.
   Templates must use these variables —
   never hardcode pt/px sizes directly.
========================================= */

:root {

  /* Core scale */
  --font-base:       12pt;   /* body text, p, labels, cart */
  --font-small:       9pt;   /* shop card info, metadata, secondary */
  --font-tiny:        6pt;   /* shop figcaption, image counters */
  --font-ui:         12pt;   /* nav, checkout fields, order page */
  --font-heading:    24pt;   /* shop title, archive list, page titles */
  --font-heading-sm: 18pt;   /* archive mobile, blog index */
  --font-display:    48pt;   /* radio station — intentional display */
  --font-blog-body:   9pt;   /* blog paragraph text */
  --font-post-body:   9pt;   /* post/archive body text */

  /* Line heights */
  --lh-base:   1.4;
  --lh-tight:  16pt;
  --lh-ui:     18pt;
  --lh-heading: 24pt;

  /* Z-index scale */
  --z-page:       1;
  --z-foreground: 20;
  --z-icon:       50;
  --z-cart:    1000;
  --z-cart-btn: 1010;
}

/* =========================================
   BODY BASE
========================================= */

body {
  font-size: var(--font-base);
  line-height: var(--lh-base);
}

/* =========================================
   CART — complete font reset
   Covers every possible text element inside
   the cart, regardless of which template CSS
   is loaded. !important overrides any global
   li, p, a, button rules from template files.
========================================= */

.cart-container,
.cart-container p,
.cart-container span,
.cart-container strong,
.cart-container em,
.cart-container small,
.cart-container li,
.cart-container ul,
.cart-container a,
.cart-container form,
.cart-container label,
.open-cart {
  font-size: var(--font-ui) !important;
  font-family: "Orbitron", sans-serif !important;
  line-height: var(--lh-base) !important;
  text-indent: 0 !important;
}

.cart-container button,
.cart-container .checkout-link {
  font-size: var(--font-ui) !important;
  font-family: "Orbitron", sans-serif !important;
  font-weight: bold !important;
}

.cart-container li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cart-container ul {
  padding: 0 !important;
  margin: 0 !important;
}

.cart-container strong {
  display: inline !important;
  padding: 0 !important;
}

.cart-container a {
  text-decoration: none !important;
}

.open-cart {
  font-weight: bold !important;
}

/* =========================================
   Z-INDEX PROTECTION
   Cart always above all page decorations
========================================= */

.foreground,
.foreground_wire,
.foreground_panel,
.metallic-panel-desktop,
.pillar {
  z-index: var(--z-foreground) !important;
}

.icon-shell {
  z-index: var(--z-icon) !important;
}

.cart-container {
  z-index: var(--z-cart);
}

.open-cart {
  z-index: var(--z-cart-btn);
}

/* =========================================
   MOBILE OVERRIDES
========================================= */

@media screen and (max-width: 1024px) {

  :root {
    /* On mobile, Orbitron renders larger — scale down across the board */
    --font-base:        9pt;   /* body text shrinks to match template intent */
    --font-ui:          9pt;   /* cart, nav, labels */
    --font-small:       7pt;   /* secondary metadata */
    --font-tiny:        5pt;   /* captions, counters */
    --font-heading:    18pt;   /* page titles */
    --font-heading-sm: 14pt;   /* sub-headings */
    --font-blog-body:   9pt;   /* blog body */
    --font-post-body:   9pt;   /* post body */
    --lh-tight:        13pt;
    --lh-ui:           15pt;
  }

  /* Cart pinned at 12pt on mobile — always readable regardless of body scale */
  .cart-container,
  .cart-container p,
  .cart-container span,
  .cart-container strong,
  .cart-container em,
  .cart-container small,
  .cart-container li,
  .cart-container ul,
  .cart-container a,
  .cart-container form,
  .cart-container label,
  .cart-container button,
  .cart-container .checkout-link,
  .open-cart {
    font-size: 12pt !important;
  }

  /* Checkout fields — 16px prevents iOS zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select {
    font-size: 16px !important;
  }

}

/* Small phones (≤ 375px) — nudge down slightly more */
@media screen and (max-width: 375px) {
  :root {
    --font-base:        8pt;
    --font-ui:          8pt;
    --font-heading:    16pt;
    --font-heading-sm: 12pt;
  }
}