/* ============================================================
   VELOCITY — Dark Neon Web Theme for Bagisto
   Drop into: public/themes/velocity/css/velocity.css
   Then @import in your master layout or enqueue via webpack
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --pink:   #ff2d78;
  --purple: #7f00ff;
  --cyan:   #00d4ff;
  --green:  #39ff14;
  --dark:   #080808;
  --dark2:  #111111;
  --dark3:  #1a1a1a;
  --mid:    #2a2a2a;
  --border: #1e1e1e;
  --muted:  #555555;
  --text:   #e8e8e8;
  --sub:    #888888;
}

/* ─── RESET / BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--dark) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--text) !important;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; }

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 4px; }

/* ─── TYPOGRAPHY ──────────────────────────────────────────── */
.velocity-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
}
.velocity-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ─── NAVBAR OVERRIDE ─────────────────────────────────────── */
header,
.navbar,
nav[class*="header"],
.header-content,
[class*="nav-bar"],
[class*="header-container"] {
  background: var(--dark2) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Logo area */
.logo-wrapper a,
.logo a,
[class*="logo"] a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 3px !important;
  color: #fff !important;
}

/* Nav links */
nav a,
.navbar a,
[class*="nav-item"] a,
[class*="menu-item"] a {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sub) !important;
  transition: color 0.2s !important;
}
nav a:hover,
[class*="nav-item"] a:hover { color: var(--pink) !important; }

/* Search bar */
input[type="search"],
input[name="query"],
[class*="search-input"],
[class*="search"] input {
  background: var(--dark3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
input[type="search"]:focus,
[class*="search"] input:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 2px rgba(255,45,120,0.15) !important;
  outline: none !important;
}

/* Cart icon badge */
[class*="cart-count"],
[class*="cart-badge"],
.cart-items-count {
  background: var(--pink) !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
}

/* ─── VELOCITY TICKER ─────────────────────────────────────── */
.velocity-ticker {
  overflow: hidden;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--green), var(--pink));
  background-size: 300% 100%;
  animation: tickerBg 5s linear infinite;
  padding: 7px 0;
  white-space: nowrap;
}
@keyframes tickerBg {
  0%   { background-position: 0%   50%; }
  100% { background-position: 300% 50%; }
}
.velocity-ticker-inner {
  display: inline-block;
  animation: tickerScroll 22s linear infinite;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #000;
  text-transform: uppercase;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.velocity-ticker-dot { margin: 0 20px; opacity: 0.5; }

/* ─── HERO SECTION ────────────────────────────────────────── */
.velocity-hero {
  position: relative;
  min-height: 520px;
  background: var(--dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 60px 60px 60px 80px;
}

/* Grid texture */
.velocity-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(127,0,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,0,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
/* Pink glow left */
.velocity-hero::after {
  content: '';
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,45,120,0.12), transparent 70%);
  pointer-events: none;
}

.velocity-hero-content {
  position: relative;
  z-index: 3;
  max-width: 520px;
}

.velocity-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 5px 14px 5px 6px;
  border: 1px solid rgba(255,45,120,0.25);
  border-radius: 30px;
  background: rgba(255,45,120,0.06);
}
.velocity-eyebrow .pulse {
  width: 7px; height: 7px;
  background: var(--pink);
  border-radius: 50%;
  animation: pulse 1.5s ease infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

.velocity-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.velocity-hero-title .line1 {
  display: block;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.velocity-hero-title .line2 {
  display: block;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.velocity-hero-sub {
  font-size: 16px;
  color: var(--sub);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 400px;
}

.velocity-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-velocity-primary {
  background: var(--pink);
  color: #fff !important;
  border: none;
  padding: 15px 32px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 8px;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(255,45,120,0.45), 0 4px 16px rgba(0,0,0,0.5);
  transition: box-shadow 0.2s, transform 0.15s;
  display: inline-block;
}
.btn-velocity-primary:hover {
  box-shadow: 0 0 40px rgba(255,45,120,0.6);
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-velocity-ghost {
  background: transparent;
  color: var(--green) !important;
  border: 1px solid rgba(57,255,20,0.4);
  padding: 15px 32px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 8px;
  text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s;
  display: inline-block;
}
.btn-velocity-ghost:hover {
  border-color: var(--green);
  background: rgba(57,255,20,0.06);
  color: var(--green) !important;
}

/* Hero mascot / image right side */
.velocity-hero-mascot {
  position: absolute;
  right: 60px;
  bottom: 0;
  z-index: 2;
  width: 340px;
}
/* Purple glow behind mascot */
.velocity-hero-glow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 480px;
  height: 520px;
  background: radial-gradient(ellipse at 60% 80%, rgba(127,0,255,0.22) 0%, rgba(255,45,120,0.08) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ─── STATS STRIP ─────────────────────────────────────────── */
.velocity-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--dark2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.velocity-stat {
  padding: 18px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.velocity-stat:last-child { border-right: none; }
.velocity-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.velocity-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: var(--sub);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── SECTION HEADERS ─────────────────────────────────────── */
.velocity-section {
  padding: 48px 80px 24px;
}
@media (max-width: 768px) {
  .velocity-section { padding: 32px 20px 16px; }
}

.velocity-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.velocity-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 3px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.velocity-section-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 26px;
  background: var(--pink);
  border-radius: 2px;
}
.velocity-see-all {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}
.velocity-see-all:hover { color: var(--pink); }

/* ─── CATEGORY GRID ───────────────────────────────────────── */
.velocity-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .velocity-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .velocity-cat-grid { grid-template-columns: 1fr; }
}

.velocity-cat-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  position: relative;
  aspect-ratio: 2/1;
  transition: transform 0.2s, border-color 0.2s;
}
.velocity-cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,45,120,0.3);
}
.velocity-cat-card.wide {
  grid-column: span 2;
  aspect-ratio: 3/1;
}

.velocity-cat-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  position: relative;
}
.bg-sherehe { background: linear-gradient(135deg, #1a0020 0%, #4a0050 50%, #800060 100%); }
.bg-drinks   { background: linear-gradient(135deg, #0d001a 0%, #2d0060 100%); }
.bg-food     { background: linear-gradient(135deg, #001a05 0%, #004d10 100%); }
.bg-miraa    { background: linear-gradient(135deg, #001a15 0%, #003d30 100%); }
.bg-grocery  { background: linear-gradient(135deg, #001525 0%, #003060 100%); }

.velocity-cat-emoji {
  font-size: 56px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.2));
  line-height: 1;
}
.velocity-cat-card.wide .velocity-cat-emoji { font-size: 72px; }

.velocity-cat-text { position: relative; z-index: 1; }
.velocity-cat-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1;
}
.velocity-cat-card.wide .velocity-cat-name { font-size: 32px; }
.velocity-cat-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.velocity-cat-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--pink);
  color: #fff;
}
.velocity-cat-badge.purple { background: var(--purple); }
.velocity-cat-badge.green  { background: #1a7a00; color: var(--green); }

/* Inner glow border */
.velocity-cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

/* ─── IMAGE CAROUSEL OVERRIDE ─────────────────────────────── */
[class*="carousel"],
[class*="banner-slider"],
[class*="image-carousel"] {
  background: var(--dark) !important;
}
[class*="carousel"] img,
[class*="banner-slider"] img { border-radius: 12px; }

/* Dot indicators */
[class*="carousel-dot"],
[class*="slider-dot"],
.swiper-pagination-bullet {
  background: var(--mid) !important;
  opacity: 1 !important;
}
[class*="carousel-dot"].active,
[class*="slider-dot"].active,
.swiper-pagination-bullet-active {
  background: var(--pink) !important;
  width: 20px !important;
  border-radius: 4px !important;
}

/* Arrows */
[class*="carousel-arrow"],
[class*="slider-arrow"],
.swiper-button-prev,
.swiper-button-next {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  color: var(--pink) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 14px !important; color: var(--pink) !important; }

/* ─── PRODUCT CARDS ───────────────────────────────────────── */
[class*="product-card"],
.product-item,
[class*="product-flat-card"] {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s, transform 0.2s !important;
  overflow: hidden !important;
}
[class*="product-card"]:hover,
.product-item:hover {
  border-color: rgba(255,45,120,0.3) !important;
  transform: translateY(-2px) !important;
}

/* Product name */
[class*="product-card"] [class*="product-name"],
[class*="product-card"] [class*="name"],
.product-item .name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  letter-spacing: 0.3px !important;
}

/* Product price */
[class*="product-card"] [class*="price"],
[class*="product-card"] .price,
.product-item .price {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  color: var(--green) !important;
  letter-spacing: 0.5px !important;
}

/* Original / crossed price */
[class*="product-card"] [class*="original-price"],
[class*="product-card"] del {
  color: var(--muted) !important;
  font-family: 'Rajdhani', sans-serif !important;
}

/* Discount badge */
[class*="product-card"] [class*="discount"],
[class*="product-card"] [class*="badge"] {
  background: var(--pink) !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}

/* Add to cart / wishlist buttons */
[class*="add-to-cart"],
[class*="buy-now"],
button[class*="cart"] {
  background: var(--pink) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  box-shadow: 0 0 16px rgba(255,45,120,0.35) !important;
  transition: box-shadow 0.2s !important;
}
[class*="add-to-cart"]:hover { box-shadow: 0 0 28px rgba(255,45,120,0.55) !important; }

/* Wishlist heart */
[class*="wishlist"] svg,
[class*="wishlist"] i {
  color: var(--pink) !important;
  fill: var(--pink) !important;
}

/* ─── SHEREHE / FEATURED BANNER ───────────────────────────── */
.velocity-sherehe {
  margin: 8px 80px 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a0020 0%, #3d0060 40%, #600050 100%);
  border: 1px solid rgba(127,0,255,0.3);
  overflow: hidden;
  position: relative;
  padding: 36px 40px;
}
@media (max-width: 768px) {
  .velocity-sherehe { margin: 8px 20px 0; padding: 24px 20px; }
}
.velocity-sherehe::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,45,120,0.2), transparent 70%);
  pointer-events: none;
}
.velocity-sherehe-eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.velocity-sherehe-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #fff, rgba(255,45,120,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.velocity-sherehe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 28px;
}
.velocity-chip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.velocity-sherehe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.velocity-sherehe-from {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.velocity-sherehe-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1;
}

/* ─── DELIVERY STRIP ──────────────────────────────────────── */
.velocity-delivery {
  margin: 20px 80px;
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 768px) {
  .velocity-delivery { margin: 16px 20px; padding: 16px 20px; }
}
.velocity-delivery-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(57,255,20,0.1), rgba(0,212,255,0.1));
  border: 1px solid rgba(57,255,20,0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.velocity-delivery-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}
.velocity-delivery-sub {
  font-size: 12px;
  color: var(--sub);
  margin-top: 3px;
}
.velocity-delivery-time {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.velocity-delivery-mins {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--cyan);
  line-height: 1;
}
.velocity-delivery-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: var(--sub);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ─── FORMS (contact, checkout etc) ──────────────────────── */
input,
textarea,
select {
  background: var(--dark3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  transition: border-color 0.2s !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(255,45,120,0.12) !important;
  outline: none !important;
}
label {
  color: var(--sub) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.primary-button,
button[type="submit"],
[class*="primary-button"] {
  background: var(--pink) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  box-shadow: 0 0 24px rgba(255,45,120,0.4) !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}
.primary-button:hover,
button[type="submit"]:hover {
  box-shadow: 0 0 36px rgba(255,45,120,0.6) !important;
  transform: translateY(-1px) !important;
}

/* Contact form specific */
[class*="control-group"] {
  margin-bottom: 20px !important;
}

/* ─── FOOTER ──────────────────────────────────────────────── */
footer,
[class*="footer"] {
  background: var(--dark2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--sub) !important;
}
footer a,
[class*="footer"] a {
  color: var(--sub) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s !important;
}
footer a:hover,
[class*="footer"] a:hover { color: var(--pink) !important; }
[class*="footer-title"],
[class*="footer-heading"] {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  color: #fff !important;
}

/* ─── CARDS / PANELS (generic) ────────────────────────────── */
[class*="card"],
[class*="panel"],
[class*="box"] {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
}

/* ─── TABLES ──────────────────────────────────────────────── */
table { border-collapse: collapse !important; }
th {
  background: var(--dark3) !important;
  color: var(--sub) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
}
td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
tr:hover td { background: rgba(255,45,120,0.03) !important; }

/* ─── PAGINATION ──────────────────────────────────────────── */
[class*="pagination"] a,
[class*="page-link"] {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  color: var(--sub) !important;
  border-radius: 6px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
}
[class*="pagination"] a:hover,
[class*="page-link"]:hover,
[class*="pagination"] .active a,
[class*="pagination"] .active {
  background: var(--pink) !important;
  color: #fff !important;
  border-color: var(--pink) !important;
}

/* ─── BREADCRUMB ──────────────────────────────────────────── */
[class*="breadcrumb"] {
  background: transparent !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}
[class*="breadcrumb"] a { color: var(--sub) !important; }
[class*="breadcrumb"] a:hover { color: var(--pink) !important; }
[class*="breadcrumb"] .active,
[class*="breadcrumb"] li:last-child { color: var(--pink) !important; }

/* ─── ALERTS / FLASH MESSAGES ─────────────────────────────── */
[class*="alert-success"],
[class*="flash-success"] {
  background: rgba(57,255,20,0.08) !important;
  border: 1px solid rgba(57,255,20,0.25) !important;
  color: var(--green) !important;
  border-radius: 8px !important;
}
[class*="alert-error"],
[class*="flash-error"],
[class*="alert-danger"] {
  background: rgba(255,45,120,0.08) !important;
  border: 1px solid rgba(255,45,120,0.25) !important;
  color: var(--pink) !important;
  border-radius: 8px !important;
}

/* ─── VELOCITY FOOTER TAG ─────────────────────────────────── */
.velocity-footer-tag {
  text-align: center;
  padding: 32px 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 6px;
  color: #2a2a2a;
  text-transform: uppercase;
}

/* ─── RESPONSIVE NAV MOBILE ───────────────────────────────── */
@media (max-width: 768px) {
  .velocity-hero {
    padding: 40px 20px 200px;
    min-height: 480px;
    align-items: flex-start;
  }
  .velocity-hero-title { font-size: 80px; }
  .velocity-hero-mascot {
    right: 0;
    width: 200px;
  }
  .velocity-section { padding: 28px 16px 12px; }
  .velocity-sherehe { margin: 8px 16px 0; }
}

/* ============================================================
   VELOCITY — BAGISTO CUSTOMIZATION SECTION OVERRIDES
   Fixes white backgrounds from static content, banners,
   product carousels injected by the theme customizer
   ============================================================ */

/* ─── KILL ALL WHITE / LIGHT BACKGROUNDS ─────────────────── */

/* Every div / section that Bagisto renders gets dark bg */
main > div,
main > section,
[class*="container"],
[class*="section"],
[class*="wrapper"],
[class*="content"],
[class*="homepage"],
[class*="home-page"],
[class*="customization"] {
  background: var(--dark) !important;
  color: var(--text) !important;
}

/* Static content blocks injected via customizer HTML */
[class*="static-content"],
[class*="static_content"],
[class*="custom-html"],
[class*="theme-content"] {
  background: var(--dark) !important;
  color: var(--text) !important;
}

/* Any inline white or light backgrounds set via Bagisto static HTML */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #f"],
[style*="background-color: #f"] {
  background: var(--dark) !important;
  background-color: var(--dark) !important;
}

/* ─── STATIC HTML TEXT OVERRIDES ─────────────────────────── */

/* Large dark-navy heading text from old static blocks */
[style*="color: #1e293b"],
[style*="color:#1e293b"],
[style*="color: #0f172a"],
[style*="color:#0f172a"],
[style*="color: #1a1a2e"],
[style*="color: #171717"],
[style*="color: rgb(30"],
[style*="color: navy"],
[style*="color: dark"] {
  color: var(--text) !important;
}

/* Force all p, h tags inside static blocks to be light */
[class*="static"] p,
[class*="static"] h1,
[class*="static"] h2,
[class*="static"] h3,
[class*="static"] h4,
[class*="content"] p,
[class*="content"] h1,
[class*="content"] h2,
[class*="content"] h3 {
  color: var(--text) !important;
}

/* ─── PRODUCT CAROUSEL / GRID ─────────────────────────────── */

/* The outer section Bagisto wraps product carousels in */
[class*="product-list"],
[class*="products-section"],
[class*="featured-products"],
[class*="new-arrival"],
[class*="new_arrival"],
[class*="hot-deal"],
[class*="hot_deal"] {
  background: var(--dark) !important;
}

/* Product grid items */
[class*="product-grid"],
[class*="product-listing"] {
  background: var(--dark) !important;
}

/* Product card image placeholder */
[class*="product-card"] [class*="image"],
[class*="product-card"] img {
  background: var(--dark3) !important;
}

/* ─── CATEGORY CAROUSEL (Bagisto default) ─────────────────── */
[class*="category-carousel"],
[class*="categories-section"],
[class*="category-section"] {
  background: var(--dark) !important;
}

/* Category item circles — override white bg */
[class*="category-carousel"] [class*="image"],
[class*="category-carousel"] [class*="icon"] {
  background: var(--dark3) !important;
  border: 1px solid var(--border) !important;
}

/* Category name labels */
[class*="category-carousel"] [class*="name"],
[class*="category-carousel"] p,
[class*="category-carousel"] span {
  color: var(--sub) !important;
}

/* ─── IMAGE CAROUSEL / BANNER SLIDER ──────────────────────── */

/* Wrapper that Bagisto gives the image carousel */
[class*="image-carousel"],
[class*="banner-carousel"],
[class*="slider-section"],
[class*="carousel-section"] {
  background: var(--dark) !important;
}

/* The placeholder grey backgrounds on unloaded images */
[class*="carousel"] [class*="placeholder"],
[class*="carousel"] [class*="skeleton"] {
  background: var(--dark3) !important;
}

/* "Get UPTO 40% OFF" promo bar that appears below banners */
[class*="promo-bar"],
[class*="offer-bar"],
[class*="announcement"],
[class*="deal-bar"] {
  background: var(--dark2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--pink) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* The specific "Get UPTO 40% OFF..." text row — light purple bg in screenshots */
div[class*="text-center"][style*="background"],
section[style*="background: #e"],
section[style*="background:#e"],
section[style*="background: rgb(2"],
div[style*="background: #dde"],
div[style*="background: #ede"],
div[style*="background: #e8e"],
div[style*="background: #f0f"],
div[style*="background: lavender"],
div[style*="background: #e0e7ff"],
div[style*="background:#e0e7ff"] {
  background: var(--dark2) !important;
  color: var(--pink) !important;
}

/* ─── "ALL →" LINK ROW ────────────────────────────────────── */

/* The row showing section title + "ALL →" link */
[class*="section-head"],
[class*="section-header"],
[class*="carousel-header"],
[class*="list-header"] {
  background: var(--dark) !important;
  border-bottom: none !important;
}

/* "ALL →" text link */
[class*="section-head"] a,
[class*="section-header"] a,
[class*="carousel-header"] a,
[class*="list-header"] a {
  color: var(--sub) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
[class*="section-head"] a:hover { color: var(--pink) !important; }

/* Section title that shows as a thin pink bar + text */
[class*="section-head"] h2,
[class*="section-head"] h3,
[class*="section-header"] h2,
[class*="section-header"] h3 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 3px !important;
  color: #fff !important;
  background: transparent !important;
}

/* ─── SPECIFIC STATIC CONTENT BLOCK STYLES ────────────────── */

/* "Unleash Your Boldness" large text block — dark it up */
.text-5xl, .text-4xl, .text-3xl,
[class*="heading"],
[class*="hero-text"],
[class*="banner-text"] {
  color: var(--text) !important;
}

/* Any section that has a very light grey or white bg */
section:not(.velocity-hero):not(.velocity-stats) {
  background: var(--dark) !important;
}

/* Grid / image blocks in static content */
[class*="grid"] img,
[class*="image-grid"] img {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
}

/* Image borders that show as white/light in static blocks */
[class*="rounded-3xl"],
[class*="rounded-2xl"],
[class*="img-container"] {
  background: var(--dark3) !important;
  border-color: var(--border) !important;
}

/* ─── TAILWIND OVERRIDES (Bagisto uses Tailwind) ──────────── */

/* bg-white, bg-gray-*, bg-slate-* */
.bg-white,
.bg-gray-50, .bg-gray-100, .bg-gray-200,
.bg-slate-50, .bg-slate-100,
.bg-zinc-50, .bg-zinc-100 {
  background-color: var(--dark) !important;
}

/* text-black, text-gray-900 etc */
.text-black,
.text-gray-900, .text-gray-800, .text-gray-700,
.text-slate-900, .text-slate-800,
.text-zinc-900, .text-zinc-800,
.text-neutral-900, .text-neutral-800,
.text-[#1e293b], .text-\[\#1e293b\] {
  color: var(--text) !important;
}

/* border-gray-* */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200,
.border-zinc-100, .border-zinc-200 {
  border-color: var(--border) !important;
}

/* ─── FONT-DM-SERIF (old theme headings) ─────────────────── */

/* Bagisto default theme uses DM Serif for big headings */
.font-dmserif,
[class*="font-dm"],
[style*="font-family: DM"],
[style*="font-family:DM"] {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px !important;
  color: var(--text) !important;
}

/* ─── PAGE PADDING / CONTAINER FIX ────────────────────────── */

/* Remove any white container backgrounds */
.container,
.max-1180\:px-5,
[class*="max-w-"] {
  background: transparent !important;
}