/* =========================================================
   RYZ Premium UI — Cosmos.pm inspired (custom.css override)
   Author intent:
   - Typography first (Rajdhani titles / Inter body)
   - Black + deep surfaces (#0A0A0A) with blur depth
   - Cosmos borders (#1A0000) -> hover neon red (#FF0000) + subtle glow
   - NobleModz buttons: black + red outline + red text -> hover full red + white text
   - More breathing room: double padding inside product cards
   Notes:
   - Uses !important where needed to crush base theme.
   - “Product card” selector includes your known SellAuth/Nunjucks card root class.
   - If your store uses different card wrappers, add them to the PRODUCT CARD SELECTORS block.
========================================================= */

/* =========================
   0) Fonts (Google Fonts)
========================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap");

/* =========================
   1) Design Tokens
========================= */
:root{
  --ryz-bg: #000000 !important;

  --ryz-surface: #0a0a0a !important;
  --ryz-surface-2: #070707 !important;

  --ryz-text: #f5f5f5 !important;
  --ryz-muted: rgba(245,245,245,.72) !important;

  --ryz-red: #ff0000 !important;
  --ryz-red-dark: #1a0000 !important;

  --ryz-border: #1a0000 !important;
  --ryz-border-hover: #ff0000 !important;

  --ryz-glow-subtle: 0 0 15px rgba(255, 0, 0, 0.2) !important;
  --ryz-glow-neon: 0 0 18px rgba(255,0,0,.55), 0 0 48px rgba(255,0,0,.22) !important;

  --ryz-radius: 14px !important;
  --ryz-radius-sm: 10px !important;

  --ryz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans" !important;
  --ryz-font-title: "Rajdhani", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans" !important;

  --ryz-title-spacing: 3px !important;
}

/* =========================
   2) Global Base / Background
========================= */
html{
  background: var(--ryz-bg) !important;
  color: var(--ryz-text) !important;
}

body{
  background: var(--ryz-bg) !important;
  background-color: var(--ryz-bg) !important;
  color: var(--ryz-text) !important;
  font-family: var(--ryz-font-body) !important;
  font-weight: 400 !important;

  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  /* Premium depth without leaving black */
  background-image:
    radial-gradient(1000px 520px at 50% -10%, rgba(255,0,0,.06), transparent 60%) !important,
    radial-gradient(900px 540px at 15% 30%, rgba(255,0,0,.04), transparent 62%) !important,
    radial-gradient(900px 540px at 85% 25%, rgba(255,0,0,.03), transparent 65%) !important,
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 5px) !important;
}

/* Links (clean, premium) */
a{
  color: var(--ryz-text) !important;
  text-decoration: none !important;
}
a:hover{
  color: var(--ryz-red) !important;
  text-shadow: 0 0 16px rgba(255,0,0,.18) !important;
}

/* Selection */
::selection{
  background: rgba(255,0,0,.35) !important;
  color: #ffffff !important;
}

/* =========================
   3) Typography (MOST IMPORTANT)
   - Rajdhani for titles (h1/h2/h3)
   - Uppercase + letter-spacing: 3px
   - Inter for body text
========================= */
h1, h2, h3{
  font-family: var(--ryz-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ryz-title-spacing) !important;
  font-weight: 700 !important;
  color: var(--ryz-text) !important;
}

h4, h5, h6{
  font-family: var(--ryz-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  color: var(--ryz-text) !important;
}

p, span, li, label, small, strong, em, input, textarea, select, button{
  font-family: var(--ryz-font-body) !important;
}

p, li{
  color: var(--ryz-muted) !important;
  line-height: 1.65 !important;
}

/* Optional: make “brand” text look premium if you have it */
.brand, .logo-text, .site-title, [data-brand]{
  font-family: var(--ryz-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  color: var(--ryz-red) !important;
}

/* =========================
   4) PRODUCT CARD SELECTORS (edit safely)
   Add selectors here if your shop uses other wrappers.
========================= */
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group,
.product-card,
[class*="product-card"],
.card,
[class*="card"]{
  background: var(--ryz-surface) !important;
  background-color: var(--ryz-surface) !important;

  border: 1px solid var(--ryz-border) !important;
  border-radius: var(--ryz-radius) !important;

  color: var(--ryz-text) !important;

  /* Depth */
  box-shadow: 0 18px 70px rgba(0,0,0,.88) !important;

  /* Cosmos.pm glassy feel */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  overflow: hidden !important;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, filter .3s ease !important;
}

a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group:hover,
.product-card:hover,
[class*="product-card"]:hover,
.card:hover,
[class*="card"]:hover{
  border-color: var(--ryz-border-hover) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.92), var(--ryz-glow-subtle) !important;
  transform: translateY(-2px) !important;
  filter: saturate(1.06) contrast(1.06) !important;
}

/* =========================
   5) Double padding inside product cards (breathing room)
   - Your template uses px-4 py-2 / p-2 / px-4 pb-4
   We override those exact classes inside the card root.
========================= */
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group .px-4{
  padding-left: 2rem !important;  /* 1rem -> 2rem */
  padding-right: 2rem !important;
}
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group .py-2{
  padding-top: 1rem !important;   /* .5rem -> 1rem */
  padding-bottom: 1rem !important;
}
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group .p-2{
  padding: 1rem !important;       /* .5rem -> 1rem */
}
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group .pb-4{
  padding-bottom: 2rem !important; /* 1rem -> 2rem */
}

/* Separators in your card (convert white/5 -> red tint) */
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group .border-b.border-white\/5{
  border-bottom-color: rgba(255,0,0,.18) !important;
}

/* Card title polish */
a.block.h-full.bg-card\/75.border.border-white\/5.text-t-primary.group h3.text-lg.font-bold.truncate{
  font-family: var(--ryz-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 22px rgba(255,0,0,.12) !important;
}

/* =========================
   6) Buttons — NobleModz style
   - Default: black bg, red border, red text
   - Hover: full red bg, white text, neon glow
========================= */
button,
[type="button"], [type="submit"],
.btn, .button,
a.btn, a.button{
  background: #000000 !important;
  background-color: #000000 !important;

  border: 1px solid var(--ryz-red) !important;
  border-radius: var(--ryz-radius-sm) !important;

  color: var(--ryz-red) !important;

  font-family: var(--ryz-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;

  box-shadow: 0 14px 45px rgba(0,0,0,.85) !important;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease, filter .3s ease !important;
}

button:hover,
[type="button"]:hover, [type="submit"]:hover,
.btn:hover, .button:hover,
a.btn:hover, a.button:hover{
  background: var(--ryz-red) !important;
  background-color: var(--ryz-red) !important;

  color: #ffffff !important;

  box-shadow: 0 18px 60px rgba(0,0,0,.92), var(--ryz-glow-neon) !important;
  transform: translateY(-1px) !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

/* =========================
   7) Kill leftover blues (SellAuth indigo/violet/purple)
========================= */
.text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900,
.text-indigo-50, .text-indigo-100, .text-indigo-200, .text-indigo-300, .text-indigo-400, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900,
.text-violet-50, .text-violet-100, .text-violet-200, .text-violet-300, .text-violet-400, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900,
.text-purple-50, .text-purple-100, .text-purple-200, .text-purple-300, .text-purple-400, .text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900{
  color: var(--ryz-red) !important;
}

.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-blue-300, .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
.bg-indigo-50, .bg-indigo-100, .bg-indigo-200, .bg-indigo-300, .bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
.bg-violet-50, .bg-violet-100, .bg-violet-200, .bg-violet-300, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
.bg-purple-50, .bg-purple-100, .bg-purple-200, .bg-purple-300, .bg-purple-400, .bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900{
  background-color: var(--ryz-red) !important;
}

.border-blue-50, .border-blue-100, .border-blue-200, .border-blue-300, .border-blue-400, .border-blue-500, .border-blue-600, .border-blue-700, .border-blue-800, .border-blue-900,
.border-indigo-50, .border-indigo-100, .border-indigo-200, .border-indigo-300, .border-indigo-400, .border-indigo-500, .border-indigo-600, .border-indigo-700, .border-indigo-800, .border-indigo-900,
.border-violet-50, .border-violet-100, .border-violet-200, .border-violet-300, .border-violet-400, .border-violet-500, .border-violet-600, .border-violet-700, .border-violet-800, .border-violet-900,
.border-purple-50, .border-purple-100, .border-purple-200, .border-purple-300, .border-purple-400, .border-purple-500, .border-purple-600, .border-purple-700, .border-purple-800, .border-purple-900{
  border-color: var(--ryz-red) !important;
}

/* Focus rings often stay blue */
*:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,0,0,.35), 0 0 0 6px rgba(255,0,0,.14) !important;
}

/* =========================
   8) Reduced motion (accessibility)
========================= */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}