/* ================================================================
   ALPHABEAST PREMIUM V2.0 — LUXURY ATHLETIC DESIGN SYSTEM
   "Every pixel screams premium."
   ================================================================ */

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

/* ================================================================
   §1  DESIGN TOKENS
   ================================================================ */
:root {
  /* Gold Palette */
  --ab-gold: #D4AF37;
  --ab-gold-light: #F4E4A6;
  --ab-gold-mid: #E8CC5A;
  --ab-gold-dark: #A88734;
  --ab-gold-deep: #8B6914;
  --ab-gold-rgb: 212, 175, 55;

  /* Accent */
  --ab-red: #C41E3A;
  --ab-red-glow: rgba(196, 30, 58, 0.5);
  --ab-green: #4CAF50;

  /* Backgrounds */
  --ab-bg: #000000;
  --ab-bg-1: #0A0A0A;
  --ab-bg-2: #0D0D08;
  --ab-bg-card: #0F0F0B;
  --ab-bg-card-2: #161611;
  --ab-bg-elevated: #1A1A14;

  /* Text */
  --ab-text: #FFFFFF;
  --ab-text-2: #C8C8C8;
  --ab-text-3: #888;
  --ab-text-dim: #555;

  /* Borders */
  --ab-border: rgba(212, 175, 55, 0.18);
  --ab-border-subtle: rgba(255, 255, 255, 0.05);
  --ab-border-glow: rgba(212, 175, 55, 0.45);

  /* Gradients */
  --ab-grad-gold: linear-gradient(135deg, #A88734, #D4AF37, #F4E4A6, #D4AF37, #A88734);
  --ab-grad-gold-text: linear-gradient(135deg, #D4AF37 0%, #F4E4A6 40%, #D4AF37 60%, #F4E4A6 80%, #D4AF37 100%);
  --ab-grad-gold-btn: linear-gradient(135deg, #8B6914 0%, #A88734 15%, #D4AF37 35%, #F4E4A6 50%, #D4AF37 65%, #A88734 85%, #8B6914 100%);
  --ab-grad-card: linear-gradient(160deg, #161611 0%, #0F0F0B 100%);
  --ab-grad-hero: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
  --ab-grad-page: linear-gradient(180deg, #000 0%, #0A0A06 40%, #0D0D08 100%);

  /* Shadows */
  --ab-shadow-card: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  --ab-shadow-card-hover:
    0 25px 50px rgba(0,0,0,0.8),
    0 10px 20px rgba(0,0,0,0.5),
    0 0 40px rgba(212,175,55,0.07),
    0 0 0 1px rgba(212,175,55,0.15);
  --ab-shadow-gold-glow:
    0 0 15px rgba(212,175,55,0.25),
    0 0 40px rgba(212,175,55,0.1);
  --ab-shadow-btn:
    0 4px 15px rgba(0,0,0,0.4),
    0 0 20px rgba(212,175,55,0.15);
  --ab-shadow-btn-hover:
    0 8px 30px rgba(0,0,0,0.5),
    0 0 40px rgba(212,175,55,0.25),
    0 0 80px rgba(212,175,55,0.1);

  /* Typography */
  --ab-font: 'Montserrat', 'Poppins', sans-serif;
  --ab-font-body: 'Inter', sans-serif;

  /* Radius */
  --ab-r-sm: 8px;
  --ab-r-md: 12px;
  --ab-r-lg: 16px;
  --ab-r-xl: 20px;
  --ab-r-pill: 100px;

  /* Motion */
  --ab-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ab-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ab-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ab-dur: 0.35s;
  --ab-dur-slow: 0.6s;

  /* Glass */
  --ab-glass: rgba(12, 12, 8, 0.75);
  --ab-glass-border: rgba(212, 175, 55, 0.1);
  --ab-blur: blur(16px);
}

/* ================================================================
   §2  DUKAAN VARIABLE OVERRIDES — DARK THEME FORCE
   ================================================================ */
:root {
  --white: #0A0A0A !important;
  --black-12: #FFFFFF !important;
  --black-25: #E0E0E0 !important;
  --black-30: #C0C0C0 !important;
  --black-50: #888 !important;
  --black-60: #666 !important;
  --black-70: #444 !important;
  --black-80: #333 !important;
  --black-85: #222 !important;
  --black-90: rgba(212, 175, 55, 0.1) !important;
  --black-95: #151510 !important;
  --black-96: #121210 !important;
  --black-98: #0D0D08 !important;
  --primary-black: #FFFFFF !important;
  --primary: #FFFFFF !important;
  --secondary: #D4AF37 !important;
  --division-primary: rgba(212, 175, 55, 0.08) !important;
  --navicon-hover: rgba(212, 175, 55, 0.08) !important;
  --drawer-background-primary: #0A0A06 !important;
  --search-background: #151510 !important;
  --odd-background: #0D0D08 !important;
  --secondary-green: #4CAF50 !important;
  --secondary-red: #C41E3A !important;
  --main-background: #000 !important;
  --border-radius-small: 8px !important;
  --border-radius-medium: 12px !important;
  --border-radius-large: 16px !important;
  --border-radius-modal: 16px !important;
  --shimmer-gradient: linear-gradient(to right, #151510 8%, #1A1A14 18%, #151510 33%) !important;
}

/* ================================================================
   §3  GLOBAL RESET & BASE
   ================================================================ */
* { box-sizing: border-box; }

*:not(svg):not(svg *) {
  font-family: var(--ab-font-body) !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ab-grad-page) !important;
  background-attachment: fixed !important;
  color: var(--ab-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection highlight */
::selection {
  background: rgba(212, 175, 55, 0.3) !important;
  color: #fff !important;
}
::-moz-selection {
  background: rgba(212, 175, 55, 0.3) !important;
  color: #fff !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; display: block !important; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #A88734, #D4AF37);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #D4AF37; }

@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none !important; }
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ab-gold) !important;
  outline-offset: 3px !important;
}

/* ================================================================
   §4  TYPOGRAPHY — LUXURY
   ================================================================ */
h1, h2, h3, h4, h5, h6,
.store-name-text, .menu-text,
.category-heading, .small-category-heading,
.main-title, .footer-heading,
[class*="heading"], [class*="title"] {
  font-family: var(--ab-font) !important;
  letter-spacing: -0.02em !important;
}

/* Gradient text utility */
.t-24_32,
.top-categories h3,
.category-heading,
.small-category-heading {
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  background: var(--ab-grad-gold-text) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: ab-text-shine 4s linear infinite !important;
}

@keyframes ab-text-shine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Section headings — gold glow */
.top-categories h3 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  text-shadow: 0 0 30px rgba(212,175,55,0.15) !important;
  margin-bottom: 40px !important;
  text-align: center !important;
}

.category-heading {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  text-align: center !important;
  text-shadow: 0 0 30px rgba(212,175,55,0.12) !important;
}

/* Body text */
.t-16_24 { font-size: clamp(0.875rem, 1.5vw, 1rem) !important; line-height: 1.55 !important; }
.t-18_26 { font-size: clamp(0.9rem, 2vw, 1.125rem) !important; line-height: 1.5 !important; }

/* Color overrides */
.t-black-12, .c-black-12 { color: #fff !important; }
.t-black-30, .c-black-30, .color-b-30 { color: var(--ab-text-2) !important; }
.c-danger { color: var(--ab-red) !important; }
.s-green, .c-green { color: var(--ab-green) !important; }
.s-red, .c-red { color: var(--ab-red) !important; }

/* ================================================================
   §5  HEADER — GLASS MORPHISM NAV
   ================================================================ */
.sub-head-1-sub {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: var(--ab-glass) !important;
  backdrop-filter: var(--ab-blur) !important;
  -webkit-backdrop-filter: var(--ab-blur) !important;
  border-bottom: 1px solid var(--ab-glass-border) !important;
  box-shadow:
    0 4px 30px rgba(0,0,0,0.6),
    0 1px 0 rgba(212,175,55,0.05) !important;
  transition: box-shadow var(--ab-dur) var(--ab-ease) !important;
}

.sub-head-1-wrapper { background: transparent !important; }
.sub-header-1 { background: transparent !important; padding: 14px 0 !important; }
@media (max-width: 1024px) { .sub-header-1 { padding: 10px 16px !important; } }
.sub-header-2 { background: transparent !important; border-bottom: 1px solid var(--ab-glass-border) !important; }

/* Logo */
.company-name-logo img {
  border-radius: 8px !important;
  transition: filter var(--ab-dur) var(--ab-ease) !important;
}
.company-name-logo img:hover {
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(212,175,55,0.3)) !important;
}
.store-name-text {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

/* Nav links */
.nav-links {
  color: var(--ab-text-2) !important;
  background: transparent !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
  position: relative !important;
}
.nav-links::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; width: 0; height: 2px;
  background: var(--ab-grad-gold);
  border-radius: 2px;
  transition: all var(--ab-dur) var(--ab-ease);
  transform: translateX(-50%);
}
.nav-links:hover { color: var(--ab-gold) !important; background: rgba(212,175,55,0.06) !important; }
.nav-links:hover::after { width: 60%; }

/* Nav icons */
.nav-icons button {
  background: transparent !important;
  border-radius: 50% !important;
  min-height: 40px !important; padding: 8px !important;
  color: var(--ab-text-2) !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
.nav-icons button:hover {
  color: var(--ab-gold) !important;
  background: rgba(212,175,55,0.08) !important;
  box-shadow: 0 0 15px rgba(212,175,55,0.1) !important;
}

/* Hamburger */
.menu-hamburger svg path { fill: var(--ab-text-2) !important; transition: fill var(--ab-dur) !important; }
.menu-hamburger:hover svg path { fill: var(--ab-gold) !important; }

/* Categories link */
.categories-link {
  background: transparent !important;
  border-radius: var(--ab-r-pill) !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
.categories-link:hover { background: rgba(212,175,55,0.06) !important; }
.categories-text { color: var(--ab-text-2) !important; font-weight: 600 !important; }
.categories-link:hover .categories-text { color: var(--ab-gold) !important; }

/* ================================================================
   §6  HERO / BANNERS — CINEMATIC
   ================================================================ */
.dukaan-banners {
  position: relative !important;
}

/* Radial gold glow behind banners */
.dukaan-banners::before {
  content: '' !important;
  position: absolute !important;
  top: -40%; left: -10%; right: -10%; bottom: -40% !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.dukaan-banners .splide__slide img {
  border-radius: var(--ab-r-lg) !important;
  transition: transform 8s ease, filter 0.4s ease !important;
}
.dukaan-banners .splide__slide:hover img {
  transform: scale(1.03) !important;
}

/* Splide dots */
.splide__pagination__page {
  background: rgba(212,175,55,0.25) !important;
  border: none !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
.splide__pagination__page.is-active {
  background: var(--ab-gold) !important;
  transform: scale(1.6) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.6), 0 0 30px rgba(212,175,55,0.2) !important;
}

/* Splide arrows */
.splide__arrow {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
  opacity: 0.6 !important;
}
.splide__arrow:hover {
  background: rgba(212,175,55,0.12) !important;
  border-color: rgba(212,175,55,0.4) !important;
  opacity: 1 !important;
  box-shadow: 0 0 20px rgba(212,175,55,0.2) !important;
}
.splide__arrow svg { fill: var(--ab-gold) !important; }

/* ================================================================
   §7  TOP CATEGORIES — LUXURY CARDS
   ================================================================ */
.top-categories {
  padding: 70px 0 !important;
  position: relative !important;
}

/* Decorative gold line */
.top-categories::before,
.top-categories::after {
  content: '' !important;
  position: absolute !important;
  left: 10%; right: 10%; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25), transparent) !important;
}
.top-categories::before { top: 0 !important; }
.top-categories::after { bottom: 0 !important; }

.top-category-image {
  border-radius: var(--ab-r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--ab-border-subtle) !important;
  background: var(--ab-bg-card) !important;
  aspect-ratio: 1/1 !important;
  display: block !important;
  position: relative !important;
  transition: all var(--ab-dur-slow) var(--ab-ease) !important;
  box-shadow: var(--ab-shadow-card) !important;
}

/* Corner accents */
.top-category-image::before,
.top-category-image::after {
  content: '' !important;
  position: absolute !important;
  width: 20px !important; height: 20px !important;
  border-color: rgba(212,175,55,0.3) !important;
  border-style: solid !important;
  border-width: 0 !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
  z-index: 2 !important;
  opacity: 0 !important;
}
.top-category-image::before {
  top: 8px !important; left: 8px !important;
  border-top-width: 2px !important; border-left-width: 2px !important;
}
.top-category-image::after {
  bottom: 8px !important; right: 8px !important;
  border-bottom-width: 2px !important; border-right-width: 2px !important;
}
.top-category-image:hover::before,
.top-category-image:hover::after {
  opacity: 1 !important;
  border-color: var(--ab-gold) !important;
}

.top-category-image:hover {
  border-color: rgba(212,175,55,0.3) !important;
  box-shadow: var(--ab-shadow-card-hover) !important;
  transform: translateY(-10px) scale(1.02) !important;
}

.top-category-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s var(--ab-ease), filter 0.4s var(--ab-ease) !important;
}
.top-category-image:hover img {
  transform: scale(1.15) !important;
  filter: brightness(1.1) !important;
}

.top-category-name {
  text-align: center !important;
  font-family: var(--ab-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ab-text-3) !important;
  margin-top: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: color var(--ab-dur) !important;
}
.top-category-name a:hover { color: var(--ab-gold) !important; }

/* ================================================================
   §8  PRODUCT CARDS — ULTIMATE LUXURY
   ================================================================ */

/* Card wrapper */
.cards_item {
  position: relative !important;
  perspective: 1000px !important;
}

/* Card container */
.card {
  position: relative !important;
  overflow: visible !important;
  transition: transform var(--ab-dur-slow) var(--ab-ease) !important;
}

/* Image container */
.product-card-image-container {
  border: 1px solid var(--ab-border-subtle) !important;
  border-radius: var(--ab-r-lg) !important;
  overflow: hidden !important;
  background: var(--ab-bg-card) !important;
  position: relative !important;
  transition: all var(--ab-dur-slow) var(--ab-ease) !important;
  box-shadow: var(--ab-shadow-card) !important;
}

/* Gradient overlay on images */
.product-card-image-container::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%) !important;
  opacity: 0 !important;
  transition: opacity var(--ab-dur) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: var(--ab-r-lg) !important;
}
.product-card-image-container:hover::after { opacity: 1 !important; }

/* Corner accent on hover */
.product-card-image-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--ab-grad-gold) !important;
  background-size: 200% auto !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform var(--ab-dur) var(--ab-ease) !important;
  z-index: 2 !important;
  border-radius: var(--ab-r-lg) var(--ab-r-lg) 0 0 !important;
}
.product-card-image-container:hover::before {
  transform: scaleX(1) !important;
  animation: ab-gold-sweep 2s linear infinite !important;
}

@keyframes ab-gold-sweep {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Hover: lift + glow */
.cards_item:hover .product-card-image-container {
  border-color: rgba(212,175,55,0.2) !important;
  box-shadow: var(--ab-shadow-card-hover) !important;
  transform: translateY(-12px) !important;
}

/* Image zoom */
.card_image img {
  object-fit: cover !important;
  transition: transform 0.6s var(--ab-ease), filter 0.4s var(--ab-ease) !important;
  will-change: transform !important;
}
.product-card-image-container:hover .card_image img,
.product-card-image-container:hover img {
  transform: scale(1.12) !important;
  filter: brightness(1.05) !important;
}

/* Card text */
.card_title, .card_text {
  color: var(--ab-text) !important;
  font-family: var(--ab-font) !important;
}

/* Product name in card */
.card .oxford-product-name,
.card .product-listing-name,
.card_title a {
  font-family: var(--ab-font) !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  transition: color var(--ab-dur) !important;
}
.cards_item:hover .card_title a,
.cards_item:hover .oxford-product-name {
  color: var(--ab-gold-light) !important;
}

/* Price styling */
.selling-price,
.oxford-product-price,
[class*="selling-price"] {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  text-shadow: 0 0 20px rgba(212,175,55,0.15) !important;
}

/* Strikethrough price */
.strikeThrough {
  color: var(--ab-text-dim) !important;
  font-size: 13px !important;
}

/* Discount badge */
.c-danger,
[class*="discount"] {
  color: var(--ab-red) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ================================================================
   §9  BUTTONS — 3D GOLD WITH SHIMMER
   ================================================================ */

/* Primary Gold Button */
.btn-primary,
button.btn-primary {
  position: relative !important;
  background: var(--ab-grad-gold-btn) !important;
  background-size: 200% auto !important;
  color: #000 !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 15px 34px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: var(--ab-shadow-btn) !important;
  transition:
    transform var(--ab-dur) var(--ab-ease-spring),
    box-shadow var(--ab-dur) var(--ab-ease),
    background-position 0.6s var(--ab-ease) !important;
  z-index: 1 !important;
}

/* Shimmer sweep */
.btn-primary::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -120% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.4) 50%,
    transparent 80%
  ) !important;
  transition: none !important;
  z-index: 2 !important;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--ab-shadow-btn-hover) !important;
  background-position: right center !important;
  color: #000 !important;
  background-color: unset !important;
}

.btn-primary:hover::before {
  animation: ab-shimmer-sweep 0.8s ease forwards !important;
}

@keyframes ab-shimmer-sweep {
  0% { left: -120%; }
  100% { left: 120%; }
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* Secondary / Outline */
.btn-secondary,
.btn-outline-primary {
  position: relative !important;
  background: transparent !important;
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--ab-gold) !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 14px 32px !important;
  min-height: 50px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  transition: all var(--ab-dur) var(--ab-ease-spring) !important;
}
.btn-outline-primary::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(212,175,55,0.08) !important;
  opacity: 0 !important;
  transition: opacity var(--ab-dur) !important;
  border-radius: inherit !important;
}
.btn-outline-primary:hover::before { opacity: 1 !important; }
.btn-outline-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 25px rgba(212,175,55,0.15), 0 8px 20px rgba(0,0,0,0.3) !important;
  border-color: var(--ab-gold-light) !important;
  color: var(--ab-gold-light) !important;
}

/* Newsletter / Invert button */
.btn-invert {
  background: var(--ab-grad-gold-btn) !important;
  background-size: 200% auto !important;
  color: #000 !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: all var(--ab-dur) var(--ab-ease-spring) !important;
  font-size: 14px !important;
  box-shadow: var(--ab-shadow-btn) !important;
}
.btn-invert:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ab-shadow-btn-hover) !important;
  background-position: right center !important;
  color: #000 !important;
}

/* ================================================================
   §10  PRODUCT DETAIL PAGE
   ================================================================ */

/* Breadcrumbs */
.breadcrumb-item { color: var(--ab-text-dim) !important; font-size: 13px !important; }
.breadcrumb-item:hover { color: var(--ab-gold) !important; }
.breadcrumbs span { color: var(--ab-text-dim) !important; }

/* Product title */
h1.product-title,
.product-detail-name {
  font-family: var(--ab-font) !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  color: #fff !important;
  line-height: 1.2 !important;
}

/* Product price */
.product-detail-price {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  text-shadow: 0 0 25px rgba(212,175,55,0.2) !important;
}

/* Variant chips */
.variant-chip, .size-chip, .flavor-chip {
  background: var(--ab-bg-card) !important;
  border: 1.5px solid var(--ab-border-subtle) !important;
  color: var(--ab-text-2) !important;
  border-radius: var(--ab-r-md) !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  min-height: 44px !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
.variant-chip:hover, .size-chip:hover, .flavor-chip:hover {
  border-color: var(--ab-gold) !important;
  color: var(--ab-gold) !important;
  background: rgba(212,175,55,0.06) !important;
}
.variant-chip.selected, .variant-chip.active,
.size-chip.selected, .flavor-chip.selected {
  background: rgba(212,175,55,0.1) !important;
  border-color: var(--ab-gold) !important;
  color: var(--ab-gold) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(212,175,55,0.15) !important;
}

/* Thumbnail active */
.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 2px solid var(--ab-gold) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 10px rgba(212,175,55,0.2) !important;
}

/* Trust badges */
.trusted-badges {
  background: rgba(212,175,55,0.03) !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: var(--ab-r-md) !important;
  padding: 20px !important;
}

/* Ratings */
.ratingsContainer {
  border-top: 1px solid rgba(212,175,55,0.08) !important;
}

/* Product description */
.product-details-text a { color: var(--ab-gold) !important; }
.product-details-text a:hover { color: var(--ab-gold-light) !important; }
.product-details-text { color: var(--ab-text-2) !important; line-height: 1.7 !important; }
.product-details-text strong { color: #fff !important; font-weight: 600 !important; }
.product-details-text table td {
  padding: 12px 16px !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  color: var(--ab-text-2) !important;
}
.product-details-text table tr:first-child td {
  background: rgba(212,175,55,0.04) !important;
  color: var(--ab-gold) !important;
  font-weight: 600 !important;
}
.product-details-text img { border-radius: 12px !important; }

/* Mobile sticky buttons */
@media (max-width: 1024px) {
  .pdp-button-wrapper {
    background: var(--ab-glass) !important;
    backdrop-filter: var(--ab-blur) !important;
    -webkit-backdrop-filter: var(--ab-blur) !important;
    border-top: 1px solid var(--ab-glass-border) !important;
  }
}

/* ================================================================
   §11  CATEGORY / FILTER PAGE
   ================================================================ */

/* Sort dropdown */
.sortby-dropdown {
  background: rgba(10,10,6,0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  border-radius: var(--ab-r-md) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
  padding: 6px !important;
  min-width: 210px !important;
}
.sortby-dropdown-value {
  cursor: pointer !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  color: var(--ab-text-2) !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}
.sortby-dropdown-value:hover {
  background: rgba(212,175,55,0.06) !important;
  color: var(--ab-gold) !important;
}

/* Filter sidebar */
advanced-filters {
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: var(--ab-r-lg) !important;
  background: var(--ab-bg-card) !important;
  overflow: hidden !important;
}
.filter-block-wrapper {
  border-bottom: 1px solid rgba(212,175,55,0.06) !important;
  padding: 16px !important;
}
.filter-block-wrapper .block-title {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.filter-block-wrapper h3 { color: var(--ab-text-2) !important; }

/* Checkmark */
.checkmark {
  background: transparent !important;
  border: 1.5px solid rgba(212,175,55,0.25) !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
}
.form-input-container input:checked ~ .checkmark {
  background: var(--ab-gold) !important;
  border-color: var(--ab-gold) !important;
}
.form-input-container .checkmark:after {
  border-color: #000 !important;
}

/* Radio */
.radio-checkmark {
  background: transparent !important;
  border: 1.5px solid rgba(212,175,55,0.25) !important;
  transition: all 0.2s !important;
}
.form-input-container input:checked ~ .radio-checkmark {
  border-color: var(--ab-gold) !important;
}
.form-input-container .radio-checkmark:after {
  background: var(--ab-gold) !important;
}
.form-input-container .text-2 { color: var(--ab-text-2) !important; }
.form-input-container:hover .text-2 { color: var(--ab-gold) !important; }

/* Pagination */
.page-number-tag {
  border-radius: 50% !important;
  min-width: 38px !important; height: 38px !important;
  border: 1px solid var(--ab-border-subtle) !important;
  background: var(--ab-bg-card) !important;
  color: var(--ab-text-2) !important;
  font-weight: 600 !important;
  transition: all 0.25s var(--ab-ease) !important;
}
.page-number-tag:hover {
  border-color: rgba(212,175,55,0.3) !important;
  color: var(--ab-gold) !important;
}
.page-number-tag.active {
  background: var(--ab-gold) !important;
  border-color: var(--ab-gold) !important;
  color: #000 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(212,175,55,0.4), 0 4px 10px rgba(0,0,0,0.3) !important;
}
#pagination-wrapper .arrow {
  background: var(--ab-bg-card) !important;
  color: var(--ab-gold) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  border-radius: 50% !important;
  transition: all 0.2s !important;
}
#pagination-wrapper .arrow:hover {
  background: rgba(212,175,55,0.08) !important;
  border-color: rgba(212,175,55,0.3) !important;
}

/* Filter CTAs */
#submit-filter-cta {
  background: var(--ab-grad-gold-btn) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-radius: var(--ab-r-pill) !important;
  box-shadow: var(--ab-shadow-btn) !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
#submit-filter-cta:hover {
  box-shadow: var(--ab-shadow-btn-hover) !important;
  transform: translateY(-2px) !important;
  background-position: right center !important;
}
#clear-filter-cta {
  background: transparent !important;
  color: var(--ab-gold) !important;
  border: 1.5px solid var(--ab-gold) !important;
}

/* Mobile sort bar */
.custom-mobile-sort-button {
  background: var(--ab-glass) !important;
  backdrop-filter: var(--ab-blur) !important;
  -webkit-backdrop-filter: var(--ab-blur) !important;
  border-bottom: 1px solid var(--ab-glass-border) !important;
}
.custom-mobile-sort-button button {
  color: var(--ab-text-2) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}
.mobile-filter-button-divider { background: rgba(212,175,55,0.12) !important; }

/* ================================================================
   §12  CATEGORIES / SEARCH PAGES
   ================================================================ */
.product-category-image {
  border-radius: var(--ab-r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--ab-border-subtle) !important;
  background: var(--ab-bg-card) !important;
  transition: all var(--ab-dur-slow) var(--ab-ease) !important;
  box-shadow: var(--ab-shadow-card) !important;
  position: relative !important;
}
.product-category-image::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.product-category-image:hover::before { opacity: 1 !important; }
.product-category-image:hover {
  border-color: rgba(212,175,55,0.3) !important;
  box-shadow: var(--ab-shadow-card-hover) !important;
  transform: translateY(-10px) !important;
}
.product-category-image img {
  transition: transform 0.6s var(--ab-ease) !important;
  object-fit: cover !important;
}
.product-category-image:hover img { transform: scale(1.12) !important; }

/* Search input */
.search-input {
  background: var(--ab-bg-card) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  border-radius: var(--ab-r-pill) !important;
  color: #fff !important;
  padding: 13px 24px !important;
  transition: all var(--ab-dur) !important;
}
.search-input:focus {
  border-color: var(--ab-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12), 0 0 20px rgba(212,175,55,0.08) !important;
  outline: none !important;
}
.search-input::placeholder { color: var(--ab-text-dim) !important; }

/* Search sidebar */
.search-sidebar-info {
  background: rgba(6,6,4,0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ================================================================
   §13  IMAGE OVERLAY / BRAND STORY
   ================================================================ */
.image-with-overlay {
  border-radius: var(--ab-r-lg) !important;
  overflow: hidden !important;
}
.image-with-overlay-container {
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.2) 100%) !important;
}
.image-with-overlay-container .btn-primary {
  background: var(--ab-grad-gold-btn) !important;
  background-size: 200% auto !important;
  color: #000 !important;
}

/* ================================================================
   §14  FOOTER — PREMIUM DARK
   ================================================================ */
.main-footer {
  background: linear-gradient(180deg, #060604 0%, #000 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.1) !important;
  position: relative !important;
}
/* Decorative glow */
.main-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 20%; right: 20%; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent) !important;
}

.footer-heading {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.footer-text { color: var(--ab-text-dim) !important; font-size: 14px !important; line-height: 1.8 !important; }

/* Social icons */
.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  margin: 0 5px !important;
  transition: all var(--ab-dur) var(--ab-ease) !important;
}
.social-icon:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(212,175,55,0.1) !important;
}

/* Newsletter input */
#newsletter-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  border-radius: var(--ab-r-pill) !important;
  color: #fff !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  outline: none !important;
  transition: all var(--ab-dur) !important;
}
#newsletter-input:focus {
  border-color: var(--ab-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.1), 0 0 20px rgba(212,175,55,0.08) !important;
}
#newsletter-input::placeholder { color: var(--ab-text-dim) !important; }

/* ================================================================
   §15  MOBILE BOTTOM NAV
   ================================================================ */
.nav-footer {
  background: var(--ab-glass) !important;
  backdrop-filter: var(--ab-blur) !important;
  -webkit-backdrop-filter: var(--ab-blur) !important;
  border-top: 1px solid var(--ab-glass-border) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   §16  CATEGORIES SIDEBAR
   ================================================================ */
.categories-sidebar-info {
  background: rgba(8,8,5,0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.categories-sidebar .overlay {
  border-right: 1px solid var(--ab-glass-border) !important;
}
.sidebar-list-item {
  transition: all 0.2s !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
.sidebar-list-item:hover { background: rgba(212,175,55,0.04) !important; }
.sidebar-category-container img {
  border: 1px solid var(--ab-border-subtle) !important;
  border-radius: 8px !important;
}
.menu-text {
  color: #fff !important;
  font-family: var(--ab-font) !important;
  font-weight: 700 !important;
}
.grey-line { background: rgba(212,175,55,0.06) !important; }

/* ================================================================
   §17  HELLOBAR / ANNOUNCEMENT
   ================================================================ */
.dkn-hellobar, .hellobar-wrapper, hello-bar {
  background: linear-gradient(90deg, #000 0%, #1A1200 50%, #000 100%) !important;
  border-bottom: 1px solid rgba(212,175,55,0.1) !important;
}
.dkn-hellobar *, .hellobar-wrapper * {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* ================================================================
   §18  SHIMMER / LOADING
   ================================================================ */
.shimmer, [class*="shimmer"] {
  background: var(--ab-bg-card) !important;
  background-image: linear-gradient(
    90deg,
    var(--ab-bg-card) 0%,
    var(--ab-bg-elevated) 40%,
    var(--ab-bg-card) 60%
  ) !important;
  background-size: 300% 100% !important;
  animation: ab-shimmer 2s ease-in-out infinite !important;
  border-radius: var(--ab-r-sm) !important;
}
@keyframes ab-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ================================================================
   §19  COUPON / PROMO
   ================================================================ */
.coupon-card, .promo-card, .offer-card {
  background: linear-gradient(145deg, rgba(212,175,55,0.04), rgba(0,0,0,0.6)) !important;
  border: 1px dashed rgba(212,175,55,0.25) !important;
  border-radius: var(--ab-r-md) !important;
  padding: 16px !important;
  transition: all var(--ab-dur) !important;
}
.coupon-card:hover { border-color: rgba(212,175,55,0.5) !important; }
.coupon-code {
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  color: var(--ab-gold) !important;
  letter-spacing: 0.12em !important;
  background: rgba(212,175,55,0.06) !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
}

/* ================================================================
   §20  BADGES & TAGS
   ================================================================ */
[class*="discount-percent"], [class*="off-badge"], .offer-tag {
  background: var(--ab-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 4px 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px var(--ab-red-glow) !important;
  animation: ab-badge-pulse 2.5s ease-in-out infinite !important;
}
@keyframes ab-badge-pulse {
  0%, 100% { box-shadow: 0 2px 8px var(--ab-red-glow); }
  50% { box-shadow: 0 2px 16px var(--ab-red-glow), 0 0 30px rgba(196,30,58,0.15); }
}

/* ================================================================
   §21  MODALS / DRAWERS
   ================================================================ */
.modal, .drawer {
  background: var(--ab-bg-card) !important;
  border: 1px solid var(--ab-glass-border) !important;
  border-radius: var(--ab-r-xl) var(--ab-r-xl) 0 0 !important;
}
@media (min-width: 1024px) {
  .modal, .drawer { border-radius: var(--ab-r-xl) !important; }
}
product-variant-selection-modal { z-index: 300 !important; }

/* ================================================================
   §22  WHATSAPP BUTTON
   ================================================================ */
.whatsapp-button, [class*="whatsapp"] {
  background: #25D366 !important;
  border-radius: var(--ab-r-pill) !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3) !important;
  transition: all var(--ab-dur) var(--ab-ease-spring) !important;
}
.whatsapp-button:hover, [class*="whatsapp"]:hover {
  transform: scale(1.08) translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(37,211,102,0.4) !important;
}

/* ================================================================
   §23  KEYFRAME ANIMATIONS
   ================================================================ */

/* Gold pulse glow */
@keyframes ab-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.2); }
  50% { box-shadow: 0 0 25px rgba(212,175,55,0.5), 0 0 60px rgba(212,175,55,0.15); }
}

/* Float */
@keyframes ab-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Rotate subtle */
@keyframes ab-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scale in */
@keyframes ab-scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Fade in up */
@keyframes ab-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   §24  SCROLL ANIMATIONS
   ================================================================ */
.ab-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ab-ease-out), transform 0.7s var(--ab-ease-out);
}
.ab-fade-in.ab-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for grid items */
.cards_item:nth-child(1) { transition-delay: 0.05s; }
.cards_item:nth-child(2) { transition-delay: 0.1s; }
.cards_item:nth-child(3) { transition-delay: 0.15s; }
.cards_item:nth-child(4) { transition-delay: 0.2s; }
.cards_item:nth-child(5) { transition-delay: 0.25s; }
.cards_item:nth-child(6) { transition-delay: 0.3s; }

/* ================================================================
   §25  DECORATIVE AMBIENT ELEMENTS
   ================================================================ */

/* Body ambient glow */
body::before {
  content: '' !important;
  position: fixed !important;
  top: -50vh !important; left: 30% !important;
  width: 40vw !important; height: 40vw !important;
  background: radial-gradient(circle, rgba(212,175,55,0.03) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Section gold separator pattern */
.top-categories + div::before,
best-seller-load-point::before {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 3px !important;
  background: var(--ab-grad-gold) !important;
  margin: 0 auto 40px !important;
  border-radius: 2px !important;
}

/* ================================================================
   §26  RESPONSIVE — MOBILE LUXURY
   ================================================================ */
@media (max-width: 1024px) {
  .hamburger {
    display: flex !important;
    align-items: center !important;
  }

  .categories-sidebar-info {
    min-width: 280px !important;
    max-width: 85vw !important;
  }

  .category-sidebar-list {
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 640px) {
  .btn-primary, .btn-outline-primary, .btn-invert {
    min-height: 52px !important;
    font-size: 14px !important;
    width: 100% !important;
  }

  .top-category-image::before,
  .top-category-image::after { display: none !important; }

  .product-card-image-container::before { display: none !important; }

  /* Simplify shadows on mobile for perf */
  .product-card-image-container {
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
  }
  .cards_item:hover .product-card-image-container {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 15px rgba(212,175,55,0.06) !important;
  }
}

/* ================================================================
   §27  PERFORMANCE HINTS
   ================================================================ */
.product-card-image-container,
.top-category-image,
.product-category-image,
.splide__slide,
.btn-primary,
.btn-outline-primary {
  will-change: transform;
  contain: layout style;
}

/* ================================================================
   §28  PRINT
   ================================================================ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .sub-head-1-sub, .nav-footer { display: none !important; }
}

/* ================================================================
   §29  MISC LAYOUT.CSS OVERRIDES
   ================================================================ */
.category-page-header { margin-top: 40px !important; }
.sort {
  border: 1px solid var(--ab-border) !important;
  background: var(--ab-bg-card) !important;
  color: var(--ab-text-2) !important;
  border-radius: var(--ab-r-md) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.sort:hover { border-color: var(--ab-gold) !important; color: var(--ab-gold) !important; }
.content { min-height: 60vh; }
.bk-white, .bk-odd { background: transparent !important; }
.overlay-search { background: transparent !important; }
.footer-social-links-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

/* ================================================================
   §30  DUKAAN PRODUCT CARD COMPONENT OVERRIDES
   ================================================================ */
.dkn-product-card-container, .oxford-product-card {
  background: var(--ab-grad-card) !important;
  border: 1px solid var(--ab-border-subtle) !important;
  border-radius: var(--ab-r-lg) !important;
  overflow: hidden !important;
  transition: all var(--ab-dur-slow) var(--ab-ease) !important;
  position: relative !important;
  box-shadow: var(--ab-shadow-card) !important;
}
.dkn-product-card-container:hover, .oxford-product-card:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(212,175,55,0.2) !important;
  box-shadow: var(--ab-shadow-card-hover) !important;
}

/* Scrollable subcategories pills */
.dknScrollableCategories-item {
  background: var(--ab-bg-card) !important;
  border: 1px solid var(--ab-border-subtle) !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 8px 20px !important;
  color: var(--ab-text-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all 0.2s !important;
}
.dknScrollableCategories-item:hover,
.dknScrollableCategories-item.active {
  border-color: rgba(212,175,55,0.3) !important;
  color: var(--ab-gold) !important;
  background: rgba(212,175,55,0.05) !important;
}

/* ================================================================
   §31  CRITICAL TEXT VISIBILITY FIXES
   Dukaan uses `color: var(--white)` for TEXT in many places.
   Since --white is now #0A0A0A (dark bg), we must override
   every text element that expects "white" to mean light text.
   ================================================================ */

/* Utility class: .c-white means "white text" */
.c-white,
.t-white {
  color: #FFFFFF !important;
}

/* Utility class: .c-black means "primary text" — in dark mode = white */
.c-black,
.t-black {
  color: #FFFFFF !important;
}

/* Card title — layout.css sets this to color: var(--white) */
.card_title {
  color: #FFFFFF !important;
}

/* General .btn text */
.btn {
  color: #FFFFFF !important;
}

/* Banner / hero text elements */
.banner-heading,
.banner-text,
.banner-text-2,
.banner-selling-price,
.banner-resp-text,
.banner-resp-text-2,
[class*="banner-"] .c-white,
.image-with-overlay-content .title,
.image-with-overlay-content .description {
  color: #FFFFFF !important;
}

/* Featured product / brand story text */
.featured-product-description,
.brandstory .title,
.brandstory .description {
  color: #FFFFFF !important;
}

/* Btn-outline-invert (used in featured sections) */
.btn-outline-invert {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
.btn-outline-invert:hover {
  color: var(--ab-gold) !important;
  border-color: var(--ab-gold) !important;
  background: rgba(212,175,55,0.1) !important;
}

/* btn-view-all */
.btn-view-all {
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  background: transparent !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}
.btn-view-all:hover {
  border-color: var(--ab-gold) !important;
  color: var(--ab-gold) !important;
}

/* Out of stock button */
.btn-out-stock {
  color: var(--ab-text-3) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--ab-r-pill) !important;
}

/* Newsletter / mailchimp section */
.dkn-mailchimp-container {
  background: linear-gradient(135deg, rgba(212,175,55,0.04) 0%, rgba(0,0,0,0.6) 100%) !important;
  border-top: 1px solid rgba(212,175,55,0.08) !important;
}
.dkn-mailchimp-header-text,
.dkn-mailchimp-description-text {
  color: #FFFFFF !important;
}
.dkn-mailchimp-header-text {
  background: var(--ab-grad-gold-text) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Footer text — store details heading, store name */
.store-details-heading,
.footer-details .footer-text {
  color: #FFFFFF !important;
}
.store-details-heading {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.footer-details .footer-text.t-14_20 {
  color: var(--ab-text-3) !important;
}

/* Quick links in footer */
.footer-details a {
  color: var(--ab-text-3) !important;
  transition: color 0.2s !important;
}
.footer-details a:hover {
  color: var(--ab-gold) !important;
}

/* WhatsApp button text */
.whatsapp-button-text,
[class*="whatsapp"] span {
  color: #FFFFFF !important;
}

/* Mobile nav footer text */
.nav-footer-button p,
.nav-footer-button .medium {
  color: var(--ab-text-3) !important;
  font-size: 10px !important;
}

/* Testimonials text */
.testimonials .card_text,
.testimonials .review,
.testimonials .name {
  color: #FFFFFF !important;
}
.testimonials .name {
  color: var(--ab-text-2) !important;
}
.testimonials .card_text_primary {
  color: #FFFFFF !important;
}

/* Category card product names (categories listing page) */
.product-category-name {
  color: #FFFFFF !important;
  font-family: var(--ab-font) !important;
  font-weight: 600 !important;
}

/* Search modal text */
.search-modal .modal-title,
.search-modal .section-heading {
  color: #FFFFFF !important;
}
.search-modal .recent-search-item-text {
  color: var(--ab-text-2) !important;
}

/* Mobile header category name */
.header-category-name {
  color: #FFFFFF !important;
}

/* Product card price label area */
.dkn-product-card-price-label .c-black,
.dkn-product-card-name,
.card_content .card_text {
  color: #FFFFFF !important;
}

/* Category page heading + counts */
.category-page-header .c-black,
.category-page-header .c-black-30,
.category-page-header span {
  color: #FFFFFF !important;
}

/* Hamburger menu items */
.ham-nav .c-black,
.ham-nav .menu-text,
.mobile-menu-item .c-black,
.mobile-drop-down-item {
  color: #FFFFFF !important;
}

/* Background fix: elements using bg: var(--white) that should be dark */
.ham-nav .overlay,
.mobile-menu-section {
  background: #0A0A06 !important;
}

/* Ensure product card selling price always gold */
.dkn-product-card-selling-price {
  color: var(--ab-gold) !important;
}

/* Search page title */
.search-page-section .title-1 {
  color: #FFFFFF !important;
}

/* ================================================================
   §32  NUCLEAR TEXT VISIBILITY FIX
   Force ALL text that uses var(--white) or inherits from body
   to be readable on dark backgrounds. This catches everything
   Dukaan's layout.css sets with color: var(--white).
   ================================================================ */

/*
   The root cause: Dukaan uses --white for both backgrounds AND text.
   We set --white to dark for backgrounds, but text needs to stay light.
   This blanket fix catches everything we missed above.
*/

/* All body text defaults to white */
body, html {
  color: #FFFFFF !important;
}

/* All paragraph, span, div, label text */
p, span, div, label, li, td, th, dt, dd, figcaption, blockquote, cite {
  color: inherit;
}

/* Product description — THE MAIN ISSUE in screenshot */
.product-details-text,
.product-details-text *,
.product-details-text p,
.product-details-text li,
.product-details-text span,
.product-details-text div,
.product-details-text td,
.product-details-text th,
.product-details-text h1,
.product-details-text h2,
.product-details-text h3,
.product-details-text h4,
.product-details-text h5,
.product-details-text h6 {
  color: #D0D0D0 !important;
}
.product-details-text strong,
.product-details-text b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.product-details-text h1,
.product-details-text h2,
.product-details-text h3,
.product-details-text h4 {
  color: #FFFFFF !important;
}
.product-details-text a {
  color: var(--ab-gold) !important;
}

/* Product description section wrapper */
.product-description-wrapper,
.product-description-section {
  color: #D0D0D0 !important;
}

/* Product name on PDP */
.product-description-title,
.product-name,
.product-variant-selection-modal .product-name {
  color: #FFFFFF !important;
}

/* Product prices everywhere */
.product-selling-price {
  color: var(--ab-gold) !important;
}
.product-original-price {
  color: #666 !important;
}
.product-discount-badge,
.product-discount-percentage,
.product-discount-price {
  color: var(--ab-green) !important;
}

/* Stock left message */
.stock-left-message {
  color: var(--ab-red) !important;
}

/* Product info in modal */
.product-variant-selection-modal .product-information,
.product-variant-selection-modal .product-information * {
  color: #D0D0D0 !important;
}
.product-variant-selection-modal .product-name {
  color: #FFFFFF !important;
}
.product-variant-selection-modal .product-selling-price {
  color: var(--ab-gold) !important;
}

/* Variant selection labels */
.select-size-heading,
.size-selection-heading,
.color-selection-heading {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 13px !important;
}
.mandatory-star {
  color: var(--ab-red) !important;
}

/* Size/variant labels */
.size-value,
.color-value {
  color: var(--ab-text-2) !important;
}

/* Product card content text */
.card_content {
  color: #FFFFFF !important;
}
.card_content * {
  color: inherit !important;
}
.card_content .product-selling-price,
.card_content .dkn-product-card-selling-price {
  color: var(--ab-gold) !important;
}
.card_content .product-original-price,
.card_content .dkn-product-card-original-price {
  color: #666 !important;
}
.card_content .product-discount,
.card_content .dkn-product-card-discount,
.card_content .s-green {
  color: var(--ab-green) !important;
}

/* Ratings section text */
.ratingsContainer,
.ratingsContainer * {
  color: #D0D0D0 !important;
}
.ratingsContainer .customerRatingCount,
.ratingsContainer .totalStars {
  color: #888 !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs * {
  color: #888 !important;
}
.breadcrumbs a:hover {
  color: var(--ab-gold) !important;
}

/* Badge container text */
.badge-container * {
  color: #FFFFFF !important;
}

/* All heading classes that Dukaan might use */
[class*="heading"],
[class*="title"] {
  color: #FFFFFF !important;
}

/* Category/bestseller section title */
[data-bestseller-category-title] {
  color: #FFFFFF !important;
}

/* Section backgrounds that were var(--white) — force dark */
.category-heading,
.small-category-heading {
  -webkit-text-fill-color: transparent !important;
}

/* Show more text */
.show-more-button {
  color: var(--ab-gold) !important;
}

/* Back button / nav text on product page */
.product-page-sub-nav h4,
.product-page-sub-nav span,
.product-mob-nav * {
  color: #FFFFFF !important;
}

/* Countdown timer */
.adv-countdown-timer,
.adv-countdown-timer * {
  color: #FFFFFF !important;
}

/* BXGY badges */
.bxgy-badge,
.bxgy-badge * {
  color: #FFFFFF !important;
}

/* Coupon page section */
.dkn-coupon-products-list .card_text,
.dkn-coupon-products-list .product-name {
  color: #FFFFFF !important;
}

/* General: any element with var(--white) as text in inline styles */
[style*="color: var(--white)"],
[style*="color:var(--white)"] {
  color: #FFFFFF !important;
}

/* ================================================================
   §33  ADD TO CART BUTTON — SOLID GOLD (CONVERSION FOCUSED)
   The default btn-outline-primary on product cards is too subtle.
   Make it a filled gold CTA that screams "BUY ME".
   ================================================================ */

/* Add to bag — initial state: SOLID GOLD */
.add-to-bag-button-wrapper .without-cart-add-to-bag-button,
.add-to-bag-button-wrapper .btn-outline-primary,
add-to-bag-button-with-variants .btn-outline-primary,
add-to-bag-button .btn-outline-primary {
  background: var(--ab-grad-gold-btn) !important;
  background-size: 200% auto !important;
  color: #000 !important;
  border: none !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--ab-r-pill) !important;
  padding: 14px 28px !important;
  min-height: 48px !important;
  box-shadow: var(--ab-shadow-btn) !important;
  transition:
    transform var(--ab-dur) var(--ab-ease-spring),
    box-shadow var(--ab-dur) var(--ab-ease),
    background-position 0.5s var(--ab-ease) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.add-to-bag-button-wrapper .without-cart-add-to-bag-button:hover,
.add-to-bag-button-wrapper .btn-outline-primary:hover,
add-to-bag-button-with-variants .btn-outline-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: var(--ab-shadow-btn-hover) !important;
  background-position: right center !important;
  color: #000 !important;
  background-color: unset !important;
}

/* CRITICAL: Respect Dukaan's hidden attribute on all elements */
[hidden],
.hidden,
button.hidden,
div.hidden,
*.hidden {
  display: none !important;
}

/* Quantity selector (+/-) — HIDDEN by default, Dukaan shows it via JS */
.with-cart-add-to-bag-button {
  display: none !important;
}
/* Only show when Dukaan removes the hidden class (item is in cart) */
.with-cart-add-to-bag-button:not(.hidden) {
  display: flex !important;
  background: transparent !important;
  border: 1.5px solid var(--ab-gold) !important;
  border-radius: var(--ab-r-pill) !important;
  min-height: 48px !important;
  margin-top: 12px !important;
  width: 100% !important;
  overflow: hidden !important;
}
/* When qty selector is visible, hide the "Add to Bag" button */
.with-cart-add-to-bag-button:not(.hidden) ~ .without-cart-add-to-bag-button,
.add-to-bag-button-wrapper:has(.with-cart-add-to-bag-button:not(.hidden)) .without-cart-add-to-bag-button {
  display: none !important;
}

/* +/- buttons inside the qty selector */
.with-cart-add-to-bag-button .remove-button,
.with-cart-add-to-bag-button .add-button {
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.with-cart-add-to-bag-button .remove-button:hover,
.with-cart-add-to-bag-button .add-button:hover {
  background: rgba(212,175,55,0.1) !important;
}

/* +/- SVG icons — make them gold */
.with-cart-add-to-bag-button svg,
.with-cart-add-to-bag-button svg path {
  fill: var(--ab-gold) !important;
}

/* Quantity number */
.with-cart-add-to-bag-button .product-qty {
  color: var(--ab-gold) !important;
  font-family: var(--ab-font) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  min-width: 40px !important;
}

/* ================================================================
   §34  PRODUCT CARD SPLIDE ARROWS — HIDE OR STYLE
   The black arrows on product card image hover look ugly.
   Hide them on cards, only show on main carousels.
   ================================================================ */

/* NUCLEAR: Hide the entire Splide carousel inside product cards.
   The card shows a static image in .image-wrapper — the splide
   section is only used for multi-image swiping which creates
   ugly black arrow/UI elements on hover. Kill it entirely. */
.product-card-image-container .splide,
.product-card-image-container .dkn-product-card-image-carousel-wrapper,
.cards_item .dkn-product-card-image-carousel-wrapper,
.product-item .splide {
  display: none !important;
}

/* Also hide all splide arrows + progress bars globally */
.splide__arrow,
.splide__arrows,
.splide-progress-bar,
.dkn-product-card-image-carousel-progress-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Re-enable Splide ONLY on these specific carousels */
#dkn-homepage-splide-banners,
#dkn-homepage-splide-banners-mobile,
#splide-categories,
#splide-products,
#main-carousel,
#thumbnail-carousel,
#splide-product-modal-images {
  display: block !important;
}

/* Re-enable arrows ONLY on product detail page */
#main-carousel .splide__arrow,
#splide-product-modal-images .splide__arrow {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.6 !important;
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  overflow: visible !important;
}

/* ================================================================
   §35  HERO / BANNER SECTION — PREMIUM UPGRADE
   ================================================================ */

/* Banner container — premium framing */
.dukaan-banners .container {
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .dukaan-banners .container {
    padding: 0 24px !important;
  }
}

/* Banner images — cinematic rounded corners + shadow */
.dukaan-banners .splide__slide img {
  border-radius: var(--ab-r-lg) !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.03) !important;
}

@media (max-width: 1024px) {
  .dukaan-banners .splide__slide img {
    border-radius: 0 !important;
  }
}

/* Banner section spacing */
.dukaan-banners {
  padding-top: 16px !important;
  padding-bottom: 24px !important;
}

/* Splide pagination for banners — position better */
#dkn-homepage-splide-banners .splide__pagination,
#dkn-homepage-splide-banners-mobile .splide__pagination {
  bottom: -20px !important;
}

/* ================================================================
   §36  WISHLIST HEART ICON ON CARDS — STYLE IT
   ================================================================ */
wishlist-button-load-point {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
}

wishlist-button-load-point button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  padding: 0 !important;
  min-height: unset !important;
}

wishlist-button-load-point button:hover {
  background: rgba(212,175,55,0.15) !important;
  border-color: rgba(212,175,55,0.3) !important;
  transform: scale(1.1) !important;
}

wishlist-button-load-point .wishlist-svg-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

wishlist-button-load-point svg {
  width: 18px !important;
  height: 18px !important;
}

wishlist-button-load-point svg path {
  fill: #999 !important;
}

wishlist-button-load-point button[data-wishlist-button-state="selected"] svg path {
  fill: var(--ab-red) !important;
}