/* ============================================================
   AURIXAUTO — COLOR THEME OVERRIDE
   Paste this at the VERY TOP of your public/css/style.css
   REPLACING the existing :root { } block and logo styles
   ============================================================ */

/* ── AURIXAUTO COLOR VARIABLES ── */
:root {
  /* Core */
  --black:   #0A0A0A;
  --black-2: #141414;
  --black-3: #1E1E1E;
  --grey-1:  #2E2E2E;
  --grey-2:  #5A5A5A;
  --grey-3:  #8A8A8A;
  --grey-4:  #B8B8B8;
  --grey-5:  #E0E0E0;
  --grey-6:  #F4F4F4;
  --white:   #FFFFFF;

  /* Brand accent — platinum/silver instead of red */
  --accent:    #C8C8C8;      /* Silver/platinum — primary accent */
  --accent-dk: #9A9A9A;     /* Darker silver for hover */
  --accent-lt: rgba(200,200,200,.12);  /* Light silver tint */

  /* Keep --red for backward compat but point to accent */
  --red:    #1A1A1A;         /* Was red — now dark charcoal for CTAs */
  --red-dk: #0A0A0A;
  --red-lt: rgba(0,0,0,.06);

  /* Typography */
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --trans: all .2s ease;
}

/* ============================================================
   DYNAMIC LOGO STYLES
   ============================================================ */

/* Logo link wrapper */
.site-logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  text-decoration: none !important;
  line-height: 1;
}

/* Logo image (uploaded PNG/SVG) */
.site-logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
  /* White logo on dark header — keep as-is */
  filter: brightness(1);
  transition: opacity .2s;
}
.site-logo-link:hover .site-logo-img { opacity: .85; }

/* Fallback text logo (when no image uploaded) */
.site-logo-text {
  font-family: var(--font-head) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: var(--white) !important;
  white-space: nowrap;
}

/* Override old .site-logo (text-only class) */
.site-logo {
  font-family: var(--font-head) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.05em !important;
  color: var(--white) !important;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1;
  display: inline-block;
}
.logo-accent { color: var(--accent) !important; }

/* ============================================================
   HEADER COLOR OVERRIDES
   ============================================================ */

/* Topbar */
.header-topbar { background: var(--black-2) !important; }
.header-topbar i { color: var(--accent) !important; }

/* Main header */
.site-header { background: var(--black) !important; }
.header-main { background: var(--black) !important; }

/* Search button */
.header-search-wrap { border-color: var(--white) !important; }
.header-search-wrap:focus-within { border-color: var(--accent) !important; }
.header-search button,
.header-search-wrap button {
  background: var(--white) !important;
  color: var(--black) !important;
  font-weight: 800 !important;
}
.header-search button:hover,
.header-search-wrap button:hover {
  background: var(--grey-5) !important;
  color: var(--black) !important;
}

/* Cart icon — white background instead of red */
.hact-cart .hact-icon-wrap {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--black) !important;
}
.hact-cart:hover .hact-icon-wrap {
  background: var(--grey-5) !important;
  border-color: var(--grey-5) !important;
}
.hact-cart .hact-badge-cart {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}
.hact-cart-total { color: var(--accent) !important; }

/* Account button on mid-size screens */
.hact-account { background: transparent !important; }
@media (max-width: 900px) {
  .hact-account {
    background: var(--white) !important;
    border-color: var(--white) !important;
  }
  .hact-account .hact-label-bottom { color: var(--black) !important; }
  .hact-account:hover { background: var(--grey-5) !important; }
}

/* Dropdown accent */
.hact-dropdown-links a:hover { border-left-color: var(--accent) !important; }
.hact-dropdown-links a:hover i { color: var(--accent) !important; }
.hact-login-btn {
  background: var(--white) !important;
  color: var(--black) !important;
}
.hact-login-btn:hover { background: var(--grey-5) !important; }
.hact-user-avatar,
.hact-dd-avatar { background: var(--grey-2) !important; }
.hact-logout-btn:hover { background: var(--grey-1) !important; border-color: var(--grey-1) !important; }
.hact-badge { background: var(--white) !important; color: var(--black) !important; border-color: var(--black) !important; }

/* Category nav */
.cat-nav { background: var(--black-3) !important; }
.cat-nav-item { color: rgba(255,255,255,.55) !important; }
.cat-nav-item:hover { color: var(--white) !important; border-bottom-color: var(--accent) !important; }
.cat-nav-item.active { color: var(--white) !important; border-bottom-color: var(--white) !important; }
.cat-nav-sale { color: var(--accent) !important; }
.cat-nav-sale:hover { border-bottom-color: var(--accent) !important; }

/* ============================================================
   BUTTON COLOR OVERRIDES
   ============================================================ */

/* Primary button — black with white text (instead of red) */
.btn-red {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.btn-red:hover {
  background: var(--grey-1) !important;
  border-color: var(--grey-1) !important;
  color: var(--white) !important;
}

/* Outline button */
.btn-outline {
  color: var(--black) !important;
  border-color: var(--black) !important;
}
.btn-outline:hover { background: var(--black) !important; color: var(--white) !important; }

/* Add to cart */
.btn-atc {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: var(--white) !important;
}
.btn-atc:hover { background: var(--grey-1) !important; border-color: var(--grey-1) !important; }

/* Wishlist button on cards */
.wishlist-btn:hover, .wishlist-btn.wishlisted {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero { background: var(--black) !important; }
.hero-bg::after {
  background: linear-gradient(105deg, rgba(10,10,10,.94) 40%, rgba(10,10,10,.3) 100%) !important;
}
.hero-eyebrow { color: var(--accent) !important; }
.hero-eyebrow::before { background: var(--accent) !important; }
.hero-accent { color: var(--accent) !important; }
.hero-stat-num span { color: var(--accent) !important; }
.hero-stripe {
  background: linear-gradient(90deg, var(--white) 60%, transparent 100%) !important;
}
.hero-stats { border-top-color: rgba(255,255,255,.1) !important; }

/* ============================================================
   SECTION EYEBROW
   ============================================================ */
.section-eyebrow { color: var(--grey-2) !important; }
.section-eyebrow::before { background: var(--black) !important; }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.cat-card:hover {
  background: var(--black) !important;
  border-bottom-color: var(--white) !important;
}
.cat-card:hover .cat-card-icon,
.cat-card:hover .cat-icon { color: var(--white) !important; }

/* ============================================================
   PRODUCT BADGES
   ============================================================ */
.badge-hot  { background: var(--grey-1) !important; }
.badge-sale { background: var(--black) !important; }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-icon {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--accent) !important;
}

/* ============================================================
   TRUST BAR & FOOTER
   ============================================================ */
.trust-item i { color: var(--accent) !important; }
.speed-stripe {
  background: linear-gradient(90deg, var(--white) 0%, var(--white) 65%, transparent 100%) !important;
}
.footer-socials a:hover {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--black) !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-control:focus { border-color: var(--black) !important; }
.filter-check:hover { color: var(--black) !important; }
.filter-price-inputs input:focus { border-color: var(--black) !important; }

/* ============================================================
   ACCOUNT / ORDER PAGES
   ============================================================ */
.account-user-card { background: var(--black) !important; }
.account-avatar { background: var(--grey-2) !important; }
.account-nav a.active {
  color: var(--black) !important;
  background: var(--grey-6) !important;
  border-left-color: var(--black) !important;
}
.order-success-icon { background: var(--black) !important; }

/* ============================================================
   CMS
   ============================================================ */
.cms-page h1 { border-bottom-color: var(--black) !important; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(--white) !important; }

/* ============================================================
   AUTH CARD
   ============================================================ */
.auth-card-header { background: var(--black) !important; }
.auth-toggle a { color: var(--black) !important; }

/* ============================================================
   ADMIN — Keep existing red but update accent
   ============================================================ */
:root {
  --ar: #1A1A1A;       /* admin accent — dark charcoal */
  --ark: #0A0A0A;
}
.admin-btn-red { background: var(--ab) !important; color: var(--aw) !important; border: 2px solid var(--ab) !important; }
.admin-btn-red:hover { background: #333 !important; border-color: #333 !important; }
.sidebar-item a.active { color: var(--aw) !important; border-left-color: var(--aw) !important; }

/* ============================================================
   DRAWER
   ============================================================ */
.drawer-login-btn {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
}
.drawer-login-btn:hover { background: var(--grey-5) !important; color: var(--black) !important; }
.drawer-avatar { background: var(--grey-2) !important; }
.drawer-logout:hover { background: var(--grey-1) !important; border-color: var(--grey-1) !important; color: var(--white) !important; }