/* ==========================================================================
   TI ZILL DIGITAL — NEO-HOLOGRAPHIC THEME · PATCH v3
   Fixes observed after installing tzd_neoholographic.css on the live site.
   Load this file AFTER tzd_neoholographic.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 1 — Nav bar: force full width, dark background, flex layout
   Problem: LiteCart's app.css constrains #site-menu to a centered pill
   -------------------------------------------------------------------------- */
#site-menu {
  background: rgba(15, 20, 23, 0.85) !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#site-menu > .fourteen-forty,
#site-menu .fourteen-forty {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background: transparent !important;
}

/* Nested menu rows that LiteCart may render */
#site-menu > div,
#site-menu > nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* Dropdowns in the menu */
#site-menu ul ul,
#site-menu .dropdown,
#site-menu [class*="dropdown"] {
  background: rgba(15, 20, 23, 0.98) !important;
  border: 1px solid rgba(83, 230, 212, 0.2) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(96,69,244,0.15) !important;
}
#site-menu ul ul a,
#site-menu .dropdown a {
  color: var(--tzd-gray-2) !important;
}
#site-menu ul ul a:hover,
#site-menu .dropdown a:hover {
  color: var(--tzd-mint) !important;
  background: rgba(96, 69, 244, 0.1) !important;
}

/* Search bar in nav */
#site-menu input[type="search"],
#site-menu input[type="text"],
#site-menu form input {
  background: rgba(21, 27, 31, 0.9) !important;
  border: 1px solid rgba(83, 230, 212, 0.18) !important;
  color: var(--tzd-gray) !important;
  min-width: 240px;
}

/* --------------------------------------------------------------------------
   FIX 2 — Kill white backgrounds on ALL LiteCart box containers
   Targets every known box ID + generic .box + content sections
   -------------------------------------------------------------------------- */
.box,
section.box,
div.box,
#box-popular,
#box-latest-products,
#box-campaigns,
#box-categories,
#box-manufacturers,
#box-popular-products,
#box-information,
#box-newsletter,
#box-most-viewed,
#box-bestsellers,
#box-featured,
#box-special,
#box-new-products,
#box-upcoming-products,
[id^="box-"],
[class*="box-"] {
  background: rgba(21, 27, 31, 0.6) !important;
  border: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--tzd-gray) !important;
}

/* Box headings */
[id^="box-"] > h1,
[id^="box-"] > h2,
[id^="box-"] > h3,
[id^="box-"] .box-heading,
.box > h1, .box > h2, .box > h3 {
  background: transparent !important;
  color: var(--tzd-mint) !important;
}

/* Main content wrapper + sections */
#content-wrapper,
#content-wrapper > div,
#content-wrapper > section,
#content-wrapper .fourteen-forty {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   FIX 3 — Product cards in listings (force dark, glass-morphism)
   -------------------------------------------------------------------------- */
.listing-wrapper,
ul.listing-wrapper,
.listing-wrapper ul,
[id^="box-"] .listing-wrapper {
  background: transparent !important;
  padding: 0 !important;
}

.listing-wrapper > li,
.listing-wrapper li,
.listing-wrapper .product,
.listing-wrapper .product-card,
ul.listing > li,
.products-list > li {
  background: rgba(21, 27, 31, 0.75) !important;
  border: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.listing-wrapper > li:hover,
.listing-wrapper li:hover,
.listing-wrapper .product:hover,
.products-list > li:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(96, 69, 244, 0.15) !important;
  border-color: rgba(83, 230, 212, 0.4) !important;
}

/* Product name inside card */
.listing-wrapper .name,
.listing-wrapper h1,
.listing-wrapper h2,
.listing-wrapper h3,
.listing-wrapper h4,
.listing-wrapper .title,
.listing-wrapper a[title] {
  color: #fff !important;
  background: transparent !important;
}

/* Manufacturer label under product name */
.listing-wrapper .manufacturer,
.listing-wrapper .brand,
.listing-wrapper small {
  color: var(--tzd-gray-d) !important;
  font-family: var(--tzd-font-mono) !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
}

/* Product image wrapper */
.listing-wrapper .image,
.listing-wrapper figure {
  background: var(--tzd-black-2) !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.08) !important;
}

/* --------------------------------------------------------------------------
   FIX 4 — Category listing cards (different from product cards)
   -------------------------------------------------------------------------- */
#box-categories .listing-wrapper > li,
#box-categories li,
.categories-listing > li,
.category-listing > li,
ul.categories > li,
[class*="categor"] .listing-wrapper > li {
  background: rgba(21, 27, 31, 0.75) !important;
  border: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 4px !important;
}

#box-categories .name,
#box-categories a,
.categories-listing .name {
  color: #fff !important;
  font-family: var(--tzd-font-display) !important;
}

/* --------------------------------------------------------------------------
   FIX 5 — Manufacturers strip (bottom of homepage)
   -------------------------------------------------------------------------- */
#box-manufacturers li,
#box-manufacturers img {
  background: transparent !important;
  filter: brightness(0.95) contrast(1.1);
  transition: all 0.3s ease;
}
#box-manufacturers li:hover img {
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 12px rgba(83, 230, 212, 0.4));
}

/* --------------------------------------------------------------------------
   FIX 6 — Slideshow / hero slider
   -------------------------------------------------------------------------- */
#box-slideshow,
.slideshow,
[class*="slideshow"] {
  background: transparent !important;
  border: 1px solid rgba(83, 230, 212, 0.15) !important;
  border-radius: 4px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(96, 69, 244, 0.1) !important;
}

/* --------------------------------------------------------------------------
   FIX 7 — Newsletter box
   -------------------------------------------------------------------------- */
#box-newsletter {
  background: linear-gradient(135deg, rgba(96, 69, 244, 0.08), rgba(83, 230, 212, 0.06)) !important;
  border: 1px solid rgba(83, 230, 212, 0.2) !important;
}

/* --------------------------------------------------------------------------
   FIX 8 — Footer sections (if they have white backgrounds)
   -------------------------------------------------------------------------- */
#site-footer,
#site-footer > div,
#site-footer section,
#site-footer .fourteen-forty {
  background: transparent !important;
  color: var(--tzd-gray-2) !important;
}

#site-footer::before {
  background: linear-gradient(180deg, transparent, rgba(15, 20, 23, 0.8) 40%, var(--tzd-black)) !important;
}

/* --------------------------------------------------------------------------
   FIX 9 — Any remaining white containers
   Nuclear option: force any direct child of content-wrapper that's using
   a white/light background to go transparent
   -------------------------------------------------------------------------- */
#content-wrapper [style*="background: #fff"],
#content-wrapper [style*="background:#fff"],
#content-wrapper [style*="background-color: #fff"],
#content-wrapper [style*="background-color:#fff"] {
  background: rgba(21, 27, 31, 0.6) !important;
}

/* Remove any light borders leaking through */
#content-wrapper hr {
  border: none !important;
  border-top: 1px solid rgba(83, 230, 212, 0.15) !important;
}