/* ===================================================================
   THEME OVERRIDE PATCH
   Purpose: re-skin the existing app (dark horror/vintage theme) toward
   the light cream/black/red streetwear look from the reference screenshot,
   WITHOUT touching any app logic (cart, checkout, admin, auth).
   How it works: the app defines its colors/fonts as CSS variables on
   :root. Because this file loads AFTER the app's own CSS file, these
   redeclarations win and cascade everywhere automatically.
   =================================================================== */

/* 1. Load a clean sans font close to the screenshot (Inter is already
      loaded by index.html, so we reuse it) plus a bold display face. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Core surface colors: dark void -> light cream page like screenshot */
  --void: oklch(97% 0.004 90);          /* page background: near-white/cream */
  --ink: oklch(97% 0.004 90);           /* was near-black bg, now matches void */
  --card: oklch(99% 0.002 90);          /* cards: white */
  --cream: oklch(15% 0.01 90);          /* was light text color, now dark text
                                            (since --foreground: var(--cream)) */
  --background: oklch(97% 0.004 90);
  --foreground: oklch(15% 0.01 90);

  /* Accent colors: red replaces the coral/lime/plum/tangerine palette */
  --coral: oklch(57% 0.22 25);          /* red accent, e.g. "own the vibe" red */
  --destructive: oklch(57% 0.22 25);
  --tangerine: oklch(57% 0.22 25);
  --lime: oklch(57% 0.22 25);
  --plum: oklch(15% 0.01 90);

  --border: oklch(15% 0.01 90 / 0.12);
  --muted-foreground: oklch(15% 0.01 90 / 0.6);

  /* Fonts: swap typewriter/Cinzel horror-vintage look for clean bold sans */
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --scrawl: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Buttons/cards: screenshot uses fully rounded pill buttons + soft cards */
  --radius: 0.75rem;
  --radius-2xl: 1.25rem;

  /* Kill the "blood" glow shadow from the horror theme */
  --shadow-blood: 0 8px 24px -8px oklch(15% 0.01 90 / 0.15);
  --shadow-pop: 4px 4px 0 0 oklch(15% 0.01 90);
}

/* 2. The hero section used a dark multi-color radial gradient
      (--gradient-hero). Replace with the soft grey/white gradient
      look behind the hero image in the screenshot. */
:root {
  --gradient-hero:
    radial-gradient(at 20% 20%, oklch(90% 0.01 90 / 0.6), transparent 55%),
    radial-gradient(at 80% 30%, oklch(93% 0.01 90 / 0.5), transparent 55%),
    radial-gradient(at 50% 90%, oklch(88% 0.01 90 / 0.4), transparent 60%);
}

/* 3. Force real page background + text color, since some browsers/parts
      of the app may set background-color directly rather than through
      the variable chain. */
html, body {
  background-color: oklch(97% 0.004 90) !important;
  color: oklch(15% 0.01 90) !important;
}

/* 4. Buttons that use the "pop shadow" (offset hard shadow) should read
      as solid black pill buttons like the screenshot's "Explore" button. */
button[style*="var(--shadow-pop)"] {
  outline: none !important;
}

/* 5. Headings should read bold/tight like the screenshot's big serif-less
      display headline ("Wear your fandom, own the vibe."). */
h1, h2, h3, .font-display {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 6. Price "sale" red and badges (e.g. "-33%", "NEW DROP") should use the
      new red accent instead of the old coral/tangerine. Tailwind utility
      classes like text-red-500, bg-red-500 etc. already read from
      --color-red-* which Tailwind computes independently of our app
      variables above, so nudge those too for consistency. */
:root {
  --color-red-500: oklch(57% 0.22 25);
  --color-red-600: oklch(50% 0.22 25);
  --color-red-400: oklch(65% 0.2 25);
}

/* 7. FIX: category tile grid was 4 cols x 6 items -> uneven last row with
      empty space bottom-right, and square tiles. Force 3 cols x 2 rows,
      wider rectangular tiles, filling the section cleanly. */
.grid:has(> a[href*="/category"]),
.grid:has(> a[href*="/shop"]) {
  grid-template-columns: repeat(3, 1fr) !important;
}
.grid:has(> a[href*="/category"]) > a,
.grid:has(> a[href*="/shop"]) > a {
  aspect-ratio: 16 / 10 !important;
}

/* Fallback (in case tiles aren't wrapped in <a>): any grid with exactly
   6 direct children that are image-card style buttons/divs, force same. */
.grid:has(> *:nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr) !important;
}
.grid:has(> *:nth-child(6):last-child) > * {
  aspect-ratio: 16 / 10 !important;
}

/* 8. FIX: several sections (Shop by category, Feature This Week, Built
      for fans / Obsessed with quality, Pick your fandom) still show a
      black/dark background even though their text is now dark. These
      sections likely use a bg-void / bg-ink / bg-background(dark) class
      that wasn't caught by the :root variable swap. Force every top
      level <section> to a light background so text is readable. */
section {
  background-color: oklch(97% 0.004 90) !important;
}
section .bg-void,
section .bg-ink,
section[class*="bg-"] {
  background-color: oklch(97% 0.004 90) !important;
}

/* Keep the hero section's own image/gradient visible (don't flatten it
   to plain white) — restore just the hero to its intended light gradient. */
section:has(h1) {
  background: var(--gradient-hero), oklch(97% 0.004 90) !important;
}

/* 9. FIX: "Featured this week" spotlight section still has black side
      margins/wrapper bars left+right of the light card. This is an inner
      wrapper div with its own dark bg that section-level rule didn't
      reach. Force it and any ancestor divs light too. */
section:has(.font-display, h2) div {
  background-color: transparent;
}
body, #root, #root > div {
  background-color: oklch(97% 0.004 90) !important;
}
* {
  --void: oklch(97% 0.004 90) !important;
}

/* 10. FIX: category tiles are stacking two images vertically inside each
       cell (overlap) because my earlier fixed aspect-ratio fought the
       app's own 2-row internal layout. Let the tile size be automatic
       again, just keep 3 columns. */
.grid:has(> a[href*="/category"]) > a,
.grid:has(> a[href*="/shop"]) > a,
.grid:has(> *:nth-child(6):last-child) > * {
  aspect-ratio: auto !important;
  height: auto !important;
}

/* 11. FIX: category tile text (category name, item count) is dark-on-dark
       against the tile's own dark background image overlay. Force it white. */
.grid:has(> a[href*="/category"]) a *,
.grid:has(> a[href*="/shop"]) a *,
.grid:has(> *:nth-child(6):last-child) * {
  color: oklch(98% 0 0) !important;
}

/* 12. FIX: hero section still shows a black-to-transparent gradient
       overlay across the left side. Remove it. */
section:has(h1) * {
  background-image: none !important;
}
section:has(h1) {
  background: var(--gradient-hero), oklch(97% 0.004 90) !important;
}

/* 13. FIX: footer "Navigate / Contact / Follow Us" body text (links,
       email, phone, address, copyright line) was white-on-white/near
       invisible. Force all footer text to black. Keep the red headings
       (Navigate/Contact/Follow Us) and logo as-is since those already
       read fine. */
footer, footer * {
  color: oklch(15% 0.01 90) !important;
}
footer a:hover {
  opacity: 0.7;
}

/* 14. FIX: shop page category filter labels (T-Shirts, Mugs, etc.) were
       dark-on-dark. Force them white. Scoped to the shop/filter sidebar
       buttons so it doesn't affect unrelated black-on-white text
       elsewhere on the site. */
aside button, aside a,
[class*="filter"] button, [class*="filter"] a,
[class*="sidebar"] button, [class*="sidebar"] a {
  color: oklch(98% 0 0) !important;
}

/* 15. FIX: shop page category filter pills (All, T-Shirt, Mug, Cushion,
       Coaster, Mousepad, Tote Bag, Beer Mug, Rakhi Combo, Trackpant) and
       the "Featured" sort dropdown had dark text on a dark pill/bar
       background - unreadable. SCOPED to the shop filter bar only (a
       container that holds many sibling rounded-full pills stacked
       together), not global, so it doesn't affect header nav pills or
       the "Our Story" button elsewhere on the site. */
main [class*="rounded-full"]:has(~ [class*="rounded-full"]),
main [class*="rounded-full"] ~ [class*="rounded-full"] {
  color: oklch(98% 0 0) !important;
}
/* Active/selected pill (red background, e.g. "All") should stay dark
   text for contrast against red, not white. */
main [class*="rounded-full"][aria-pressed="true"],
main [class*="rounded-full"][aria-selected="true"] {
  color: oklch(15% 0.01 90) !important;
}

/* 16. FIX: header nav pills (Shop, About Us, etc.) and the hero's
       "Our Story" button got swept up by rule 15's earlier broad
       selector - restore their intended dark text on light background. */
header button, header a,
nav button, nav a {
  color: oklch(15% 0.01 90) !important;
}
header button[class*="bg-"], nav button[class*="bg-"] {
  color: inherit !important;
}
/* "Our Story" outline button on the hero (light/white background,
   bordered pill) - force dark text explicitly. */
section:has(h1) button:not([class*="bg-coral"]):not([class*="bg-red"]) {
  color: oklch(15% 0.01 90) !important;
}