/*
 * Custom CSS — "RacPacks" (rac.social) inspired look
 * Charcoal background, panel-dark rounded cards with glow borders,
 * red-orange accent, pill buttons, Akira Expanded headings + Nexa Bold body,
 * animated red background glows.
 *
 * This file will not be overwritten by theme updates.
*/

/* Fallback web fonts (Google) — render if the commercial fonts below
   are not uploaded. Archivo ≈ Akira Expanded, Montserrat ≈ Nexa. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------
 * 0. Custom fonts — Akira Expanded (headings) + Nexa (body)
 *    The font files live in this theme's assets folder, alongside
 *    this custom.css. Make sure Akira-Expanded.otf, Nexa-Heavy.ttf
 *    and Nexa-ExtraLight.ttf are uploaded with the theme.
 *
 *    Note: the Nexa pack ships only ExtraLight + Heavy weights (no
 *    true "Bold"), so body text uses ExtraLight and bold/semibold
 *    text uses Heavy — the heaviest available, closest to "Nexa Bold".
 * --------------------------------------------------------------- */
@font-face {
  font-family: 'Akira Expanded';
  src: url('Akira-Expanded.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Nexa ExtraLight → light/normal weights */
@font-face {
  font-family: 'Nexa';
  src: url('Nexa-ExtraLight.ttf') format('truetype');
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

/* Nexa Heavy → semibold/bold weights */
@font-face {
  font-family: 'Nexa';
  src: url('Nexa-Heavy.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
 * 1. Palette (rac.social tokens)
 *    carbon-black #141414 | panel-dark #222228 | rescue-red #f04a3a
 *    clean-white #f5f5f5
 *    Delete this block if you prefer to control colors from the
 *    shop builder settings instead.
 * --------------------------------------------------------------- */
:root:root {
  --cl-accent: 240, 74, 58;
  --cl-background: 20, 20, 20;
  --cl-card: 34, 34, 40;
  --cl-t-primary: 245, 245, 245;
  --cl-t-accent: 245, 245, 245;
}

body {
  background-color: #141414 !important;
  font-family: 'Nexa', 'Montserrat', sans-serif !important;
}

/* ---------------------------------------------------------------
 * 2. Typography — Akira Expanded display headings, Nexa Bold body
 * --------------------------------------------------------------- */
h1, h2, h3 {
  font-family: 'Akira Expanded', 'Archivo', 'Arial Black', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
}

::selection {
  background: rgba(240, 74, 58, 0.35);
}

/* ---------------------------------------------------------------
 * 3. Background atmosphere — faint grid + animated red glows
 * --------------------------------------------------------------- */

/* Faint grid overlay (static) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 245, 245, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 245, 0.3) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.03;
}

/* Central red glow — slow "breathing" pulse */
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  max-width: 100vw;
  transform: translate(-50%, -50%);
  background: rgba(240, 74, 58, 0.06);
  border-radius: 9999px;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
  animation: glow-breathe 9s ease-in-out infinite alternate;
}

/* Repurpose the fixed full-screen particles layer as a glow container.
   (Was hidden before.) The particle canvas is hidden; two blurred red
   orbs drift slowly in the corners. */
#particles-js {
  z-index: 0;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}

#particles-js canvas {
  display: none !important;
}

#particles-js::before,
#particles-js::after {
  content: '';
  position: absolute;
  border-radius: 9999px;
  filter: blur(130px);
  pointer-events: none;
}

#particles-js::before {
  top: -12%;
  left: -6%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  background: rgba(240, 74, 58, 0.10);
  animation: glow-drift-a 19s ease-in-out infinite;
}

#particles-js::after {
  bottom: -14%;
  right: -6%;
  width: 52vw;
  height: 52vw;
  max-width: 700px;
  max-height: 700px;
  background: rgba(240, 74, 58, 0.08);
  animation: glow-drift-b 25s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%   { opacity: 0.5;  transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes glow-drift-a {
  0%   { transform: translate(-8%, -6%)  scale(1);    opacity: 0.55; }
  50%  { transform: translate(10%,  6%)  scale(1.18); opacity: 0.9;  }
  100% { transform: translate(-8%, -6%)  scale(1);    opacity: 0.55; }
}

@keyframes glow-drift-b {
  0%   { transform: translate(8%,  8%)   scale(1.1);  opacity: 0.45; }
  50%  { transform: translate(-8%, -6%)  scale(0.92); opacity: 0.8;  }
  100% { transform: translate(8%,  8%)   scale(1.1);  opacity: 0.45; }
}

/* Respect users who prefer reduced motion — hold the glows still. */
@media (prefers-reduced-motion: reduce) {
  body::after,
  #particles-js::before,
  #particles-js::after {
    animation: none !important;
  }
}

/* Keep page content above every background layer */
#app {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
 * 4. Cards & panels — rounded-3xl with subtle borders
 * --------------------------------------------------------------- */
[class*="bg-card"] {
  border-radius: 1.5rem;
}

/* Product / group cards: clip contents, glow border on hover */
a.group[class*="bg-card"] {
  overflow: hidden;
  border-width: 2px;
  border-color: rgba(245, 245, 245, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

a.group[class*="bg-card"]:hover {
  border-color: rgba(240, 74, 58, 0.6);
  box-shadow: 0 0 32px rgba(240, 74, 58, 0.18);
  transform: translateY(-3px);
}

a.group[class*="bg-card"] img {
  border-radius: 1rem;
}

/* ---------------------------------------------------------------
 * 5. Buttons — full pill shape like rac.social
 * --------------------------------------------------------------- */
button,
a.inline-flex.border,
.border-accent-500,
.border-accent-600,
input[type="submit"] {
  border-radius: 9999px !important;
}

/* Outline buttons get the thicker 2px accent border */
a.inline-flex.border,
.border-accent-500 {
  border-width: 2px;
}

/* ---------------------------------------------------------------
 * 6b. Hide the order-quantity controls entirely (product page + cart).
 *     The quantity stays at its default (1 / the product's minimum),
 *     so Add to Cart / Buy Now still work — customers just can't
 *     change the amount. Items can still be removed from the cart via
 *     the ✕ button (forced visible on all screen sizes below).
 *     Delete this whole block to bring the quantity steppers back.
 * --------------------------------------------------------------- */

/* Product page: the "Quantity" label + stepper block */
div:has(> label[for="quantity"]) {
  display: none !important;
}

/* Cart page: the per-item quantity stepper */
div:has(> input[x-model\.number="cartItem.quantity"]) {
  display: none !important;
}

/* Cart page: keep the remove (✕) button visible on mobile too,
   otherwise items couldn't be removed once the stepper is hidden */
button[\@click^="removeItem"] {
  display: block !important;
}

/* ---------------------------------------------------------------
 * 6. Inputs & dropdowns — softly rounded
 * --------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.choices__inner {
  border-radius: 1rem !important;
}

.choices.is-open .choices__inner {
  border-radius: 1rem 1rem 0 0 !important;
}

.choices__list.choices__list--dropdown {
  border-radius: 0 0 1rem 1rem !important;
  overflow: hidden;
}

.currency-selector.xs .choices__inner,
.currency-selector.lg .choices__inner {
  border-radius: 0.75rem !important;
}