/* === ZODIAC CLEAN === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body, * {
  font-family: 'Inter', system-ui, sans-serif !important;
}

body {
  background: #050507 !important;
  color: #fff !important;
}

/* HIDE: stats (SALES/BUYERS/RATING) */
[class*="shop-stats"],
[class*="ShopStats"],
[class*="stats-grid"],
header .grid.grid-cols-3 {
  display: none !important;
}

/* HIDE: currency switcher */
[class*="CurrencySwitcher"],
button[aria-label*="urrency"] {
  display: none !important;
}

/* HIDE: extra nav links */
nav a[href$="/"],
nav a[href*="/products"]:not([href*="/product/"]),
nav a[href*="/login"],
nav a[href*="/reviews"],
nav a[href*="/feedback"],
nav a[href*="/faq"],
nav a[href*="/status"],
nav a[href*="/blog"] {
  display: none !important;
}

/* HIDE: footer policy links */
footer a[href*="privacy"],
footer a[href*="refund"] {
  display: none !important;
}

/* HIDE: product image area */
[class*="product-image"],
[class*="ProductImage"],
main img:not([alt*="cart" i]) {
  display: none !important;
}

/* HIDE: top shop logo banner */
header img:not([alt*="cart"]) {
  display: none !important;
}

/* Active variant border → red */
[class*="border-indigo"],
[class*="border-violet"],
[class*="ring-indigo"],
[class*="ring-violet"] {
  border-color: #c0282c !important;
  box-shadow: 0 0 0 2px #c0282c !important;
}

/* Accent text → red */
[class*="text-indigo"],
[class*="text-violet"] {
  color: #e63946 !important;
}

/* Primary buttons (Buy Now / Add to Cart / Submit) */
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.bg-violet-500, .bg-violet-600, .bg-violet-700,
.bg-blue-500, .bg-blue-600, .bg-blue-700,
button[type="submit"] {
  background: linear-gradient(90deg, #c0282c, #e63946) !important;
  color: #fff !important;
  border: none !important;
}
/* === ZODIAC PRODUCT BANNER === */
/* ⚠ Step 1: Upload the banner image to SellAuth → Storefront → Images
   Step 2: Copy the URL it gives you
   Step 3: Paste the URL below in IMG_URL */

[class*="product-image"],
[class*="ProductImage"],
[class*="product-page"] > div:first-child {
  position: relative !important;
  min-height: 380px !important;
  background-image: url('IMG_URL') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Hide the empty cube placeholder icon underneath */
[class*="product-image"] svg,
[class*="ProductImage"] svg,
[class*="product-page"] > div:first-child svg,
[class*="product-image"] img:not([alt*="banner" i]),
.no-image-placeholder {
  display: none !important;
}

/* Darken overlay so price/text on top stays readable if any */
[class*="product-image"]::after,
[class*="ProductImage"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5,1,3,0.6) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Subtle border glow matching the brand */
[class*="product-image"],
[class*="ProductImage"] {
  border: 1px solid rgba(230,57,70,0.15) !important;
  box-shadow: 0 0 40px rgba(192,40,44,0.15) !important;
}
/* === ZODIAC PRODUCT BANNER === */
[class*="product-image"],
[class*="ProductImage"],
[class*="product-page"] > div:first-child {
  position: relative !important;
  min-height: 380px !important;
  background-image: url('https://zodiacshop.xyz/zodiac-banner.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(230,57,70,0.15) !important;
  box-shadow: 0 0 40px rgba(192,40,44,0.15) !important;
}

/* Hide the empty placeholder + product name text on top of image */
[class*="product-image"] svg,
[class*="ProductImage"] svg,
[class*="product-image"] > h1,
[class*="product-image"] > h2,
[class*="product-image"] > p,
[class*="product-image"] > div > h1,
[class*="product-image"] > div > h2 {
  display: none !important;
}

/* Soft fade at bottom for any text overlay */
[class*="product-image"]::after,
[class*="ProductImage"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5,1,3,0.4) 100%);
  pointer-events: none;
  border-radius: inherit;
}