/* ==========================================================================
   TI ZILL DIGITAL — NEO-HOLOGRAPHIC THEME · PATCH v4
   Fixes: nav dropdowns, menu pill backgrounds, sidebar category links,
          category card text strips, product page layout.
   Load this file AFTER tzd_neoholographic_fixes.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 1 — NUKE ALL WHITE BACKGROUNDS inside the nav menu
   Every li, a, and div inside #site-menu must be transparent
   -------------------------------------------------------------------------- */
#site-menu,
#site-menu *,
#site-menu li,
#site-menu ul,
#site-menu a,
#site-menu div,
#site-menu span {
  background-color: transparent !important;
}

/* Restore #site-menu's own background */
#site-menu {
  background: rgba(15, 20, 23, 0.9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Remove borders and box-shadows on menu items */
#site-menu li,
#site-menu a,
#site-menu ul > li,
#site-menu ul > li > a {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Menu link text color + spacing */
#site-menu ul > li > a,
#site-menu nav a,
#site-menu [class*="menu"] a {
  color: var(--tzd-gray) !important;
  text-decoration: none !important;
  padding: 10px 4px !important;
}
#site-menu ul > li > a:hover,
#site-menu nav a:hover {
  color: var(--tzd-mint) !important;
}

/* --------------------------------------------------------------------------
   FIX 2 — Dropdown menus (CATEGORIES, MANUFACTURERS, INFORMATION dropdowns)
   Aggressive targeting of every possible dropdown structure
   -------------------------------------------------------------------------- */
#site-menu ul ul,
#site-menu li > ul,
#site-menu li > div,
#site-menu .dropdown,
#site-menu [class*="dropdown"],
#site-menu [class*="submenu"],
#site-menu [class*="sub-menu"] {
  background: rgba(10, 14, 17, 0.98) !important;
  border: 1px solid rgba(83, 230, 212, 0.25) !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(96, 69, 244, 0.15) !important;
  padding: 8px 0 !important;
  min-width: 260px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dropdown list items */
#site-menu ul ul li,
#site-menu li > ul li,
#site-menu .dropdown li,
#site-menu [class*="dropdown"] li {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
#site-menu ul ul li:last-child,
#site-menu li > ul li:last-child { border-bottom: none !important; }

/* Dropdown links — the text must be VISIBLE */
#site-menu ul ul a,
#site-menu li > ul a,
#site-menu .dropdown a,
#site-menu [class*="dropdown"] a,
#site-menu [class*="submenu"] a {
  color: var(--tzd-gray-2) !important;
  background: transparent !important;
  display: block !important;
  padding: 10px 18px !important;
  font-family: var(--tzd-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}
#site-menu ul ul a:hover,
#site-menu li > ul a:hover,
#site-menu .dropdown a:hover {
  color: var(--tzd-mint) !important;
  background: rgba(96, 69, 244, 0.15) !important;
  padding-left: 24px !important;
}

/* Kill the underline hover effect inside dropdowns */
#site-menu ul ul a::after,
#site-menu li > ul a::after { display: none !important; }

/* --------------------------------------------------------------------------
   FIX 3 — Sidebar boxes (category box, recently viewed, etc.)
   Text must be visible
   -------------------------------------------------------------------------- */
aside,
aside *,
.sidebar,
.sidebar * {
  background-color: transparent;
}

aside .box,
.sidebar .box,
[id^="box-"].box {
  background: rgba(21, 27, 31, 0.6) !important;
  color: var(--tzd-gray) !important;
}

/* Sidebar list items — force visible text */
aside .box li,
aside .box a,
aside .box .name,
aside ul li a,
.sidebar .box li a,
#box-categories.box li a,
#box-categories.box .name,
.box > ul > li > a,
.box ul li > a {
  color: var(--tzd-gray-2) !important;
  background: transparent !important;
  text-decoration: none !important;
  display: block !important;
  padding: 8px 10px !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease;
}
aside .box li a:hover,
.sidebar .box a:hover,
.box > ul > li > a:hover {
  color: var(--tzd-mint) !important;
  background: rgba(96, 69, 244, 0.1) !important;
  padding-left: 14px !important;
}

/* Active / current category */
aside .box li.active > a,
aside .box a.active,
aside .box .current a,
.box li.selected a,
.box a.selected {
  color: var(--tzd-mint) !important;
  background: rgba(96, 69, 244, 0.15) !important;
  border-left: 2px solid var(--tzd-mint) !important;
}

/* --------------------------------------------------------------------------
   FIX 4 — Category listing cards (homepage grid)
   The image is fine but the text strip below is still white
   -------------------------------------------------------------------------- */
#box-categories .listing-wrapper > li,
#box-categories.box .listing-wrapper > li,
.listing-wrapper .category,
.listing-wrapper > li.category {
  background: rgba(21, 27, 31, 0.8) !important;
  overflow: hidden !important;
}

/* The inner container holding the category name (the white strip) */
#box-categories .listing-wrapper > li > *,
#box-categories .listing-wrapper > li a,
#box-categories .listing-wrapper > li > div,
#box-categories li .name,
#box-categories li figcaption {
  background: transparent !important;
  color: #fff !important;
}

/* Category name text block */
#box-categories .listing-wrapper .name,
#box-categories .name,
.listing-wrapper .category .name {
  color: #fff !important;
  background: rgba(15, 20, 23, 0.9) !important;
  padding: 14px 16px !important;
  font-family: var(--tzd-font-display) !important;
  font-weight: 600 !important;
  text-align: center !important;
  border-top: 1px solid rgba(83, 230, 212, 0.1) !important;
}

/* --------------------------------------------------------------------------
   FIX 5 — UNDO BROKEN PRODUCT PAGE GRID
   Remove the display: grid override that's causing overlapping elements.
   Let LiteCart's native layout work. We only style colors/borders.
   -------------------------------------------------------------------------- */
#box-product {
  display: block !important;
  grid-template-columns: none !important;
  grid-gap: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}

#box-product > *,
#box-product .images,
#box-product .info,
#box-product .description {
  background: transparent !important;
}

/* Product image gallery */
#box-product .product-images,
#box-product .images,
#box-product .gallery,
#box-product figure,
#box-product [class*="image"] {
  background: var(--tzd-black-2) !important;
  border: 1px solid rgba(83, 230, 212, 0.15) !important;
  border-radius: 4px !important;
  padding: 20px !important;
}

/* Reset broken h1 positioning */
#box-product h1,
#box-product .name {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #fff !important;
  display: block !important;
  position: static !important;
  margin: 20px 0 !important;
}

/* Product page price */
#box-product .price-wrapper,
#box-product .price {
  border-top: 1px solid rgba(83, 230, 212, 0.2) !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.2) !important;
  padding: 18px 0 !important;
  margin: 20px 0 !important;
  font-size: 1.8rem !important;
  color: var(--tzd-mint) !important;
}

/* Quantity input, add-to-cart area */
#box-product .quantity,
#box-product .add-to-cart,
#box-product .buy-now {
  background: transparent !important;
}

/* Stock status / delivery info */
#box-product .stock,
#box-product .stock-status,
#box-product .delivery-status {
  color: var(--tzd-mint) !important;
  background: rgba(83, 230, 212, 0.08) !important;
  padding: 10px 14px !important;
  border-left: 3px solid var(--tzd-mint) !important;
  border-radius: 2px !important;
  display: inline-block !important;
  margin: 10px 0 !important;
  font-family: var(--tzd-font-mono) !important;
  font-size: 0.78rem !important;
}

/* --------------------------------------------------------------------------
   FIX 6 — Product specification tables
   Colored cells (CARD INFORMATION, REGION & AVAILABILITY, etc.) need dark bg
   -------------------------------------------------------------------------- */
#box-product table,
.specifications,
.attributes,
[class*="spec"] table,
.product-info table {
  background: rgba(21, 27, 31, 0.6) !important;
  border: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  width: 100% !important;
}

#box-product table td,
.specifications td,
.attributes td {
  background: transparent !important;
  color: var(--tzd-gray-2) !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.06) !important;
  padding: 12px 16px !important;
}

#box-product table tr:nth-child(even) td {
  background: rgba(15, 20, 23, 0.5) !important;
}

/* Section header rows (CARD INFORMATION, REGION & AVAILABILITY, COMPATIBILITY, etc.) */
#box-product table th,
#box-product table td[colspan],
.specifications th,
.attributes th,
#box-product table .section-header {
  background: rgba(96, 69, 244, 0.18) !important;
  color: var(--tzd-mint) !important;
  font-family: var(--tzd-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.75rem !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(83, 230, 212, 0.2) !important;
}

/* --------------------------------------------------------------------------
   FIX 7 — Category listing page filter bar (image 3 - filter/sort toolbar)
   -------------------------------------------------------------------------- */
.listing-tools,
.catalog-tools,
.filter-bar,
[class*="filter"] {
  background: rgba(21, 27, 31, 0.7) !important;
  border: 1px solid rgba(83, 230, 212, 0.12) !important;
  border-radius: 4px !important;
  padding: 14px !important;
  margin-bottom: 20px !important;
}

/* View mode toggle buttons (grid/list) */
.listing-tools button,
.view-mode button,
[class*="view-"] button {
  padding: 8px 12px !important;
}

/* --------------------------------------------------------------------------
   FIX 8 — Recently Viewed box
   -------------------------------------------------------------------------- */
#box-recently-viewed {
  background: rgba(21, 27, 31, 0.6) !important;
}
#box-recently-viewed img {
  background: var(--tzd-black-2) !important;
  border: 1px solid rgba(83, 230, 212, 0.1) !important;
  padding: 6px !important;
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   FIX 9 — Logo container in nav
   Remove white card around logo
   -------------------------------------------------------------------------- */
#site-menu .logotype,
#site-menu [class*="logo"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#site-menu .logotype img,
#site-menu [class*="logo"] img {
  background: transparent !important;
  max-height: 44px;
  width: auto;
}