/* ASUS TUF Gaming brand styles — loaded on demand by BrandCssLoader. */

/* ════════════════════════════════════════════════════════════════════════════
   ASUS TUF — Military/tactical gaming, TUF yellow accent, hex-badge motif
   ════════════════════════════════════════════════════════════════════════════ */

/* Remove TopJsonFullContentv2 wrapper padding so hero sections go edge-to-edge */
.brand-themed[data-brand="asustuf"] .mx-0.rounded-lg > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide default brand-themed background patterns */
.brand-themed[data-brand="asustuf"]::before,
.brand-themed[data-brand="asustuf"]::after {
  display: none !important;
}

/* ── Product card styling — matte dark panel with TUF yellow top accent ── */
.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .group\/card {
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(255,158,27,0.08) 0%, transparent 55%),
    linear-gradient(145deg, #151412 0%, #0F0E0C 45%, #0a0a09 100%) !important;
  border: 1px solid #252525 !important;
  clip-path: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .group\/card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,158,27,0.5) 30%, rgba(255,158,27,0.8) 50%, rgba(255,158,27,0.5) 70%, transparent 100%) !important;
  z-index: 1 !important;
  border: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  width: auto !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .group\/card::after {
  display: none !important;
}

@media (min-width: 992px) {
  .dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .group\/card:hover {
    transform: translateY(-4px) !important;
    background:
      radial-gradient(ellipse 90% 60% at 15% 0%, rgba(255,158,27,0.22) 0%, transparent 55%),
      radial-gradient(ellipse 80% 70% at 100% 100%, rgba(255,158,27,0.10) 0%, transparent 60%),
      linear-gradient(145deg, #1a1610 0%, #14120d 35%, #0b0b09 100%) !important;
    border-color: rgba(255,158,27,0.5) !important;
    box-shadow: 0 18px 52px rgba(255,158,27,0.18), 0 0 0 1px rgba(255,158,27,0.08) inset !important;
  }
}

/* Badge / spec tag */
.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .badge-tag {
  background: rgba(255,158,27,0.10) !important;
  border: 1px solid rgba(255,158,27,0.28) !important;
  clip-path: none !important;
  border-radius: 4px !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .badge-tag > div:first-child {
  background: transparent !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card .badge-tag span {
  color: #FFB24D !important;
  font-weight: 600 !important;
}

/* Price separator */
.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card [data-price-separator] {
  background: linear-gradient(to right, transparent, rgba(255,158,27,0.25), transparent) !important;
}

/* Title accent (last-word highlight) */
.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card h3 [data-title-accent] {
  color: #FF9E1B !important;
}

/* In-stock dot — TUF yellow */
.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card [class*="bg-green"] {
  background-color: #FF9E1B !important;
}

.dark.dark .brand-themed[data-brand="asustuf"] [data-brand-grid] .product-card span[class*="green"] {
  color: #FFB24D !important;
}

/* ── Sort bar ── */
.dark .brand-themed[data-brand="asustuf"] [data-sort-bar] {
  background: #161616 !important;
  border-color: #252525 !important;
  clip-path: none !important;
  border-radius: 8px !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-sort-bar]::before {
  display: none !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-sort-search] {
  background: #0a0a09 !important;
  border-color: #252525 !important;
  border-radius: 6px !important;
}

/* ── Filter column ── */
.dark .brand-themed[data-brand="asustuf"] [data-filter-column] > div {
  clip-path: none !important;
  border-radius: 10px !important;
  border: 1px solid #252525 !important;
  background: #161616 !important;
  overflow: hidden !important;
  position: relative !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,158,27,0.5) 30%, rgba(255,158,27,0.8) 50%, rgba(255,158,27,0.5) 70%, transparent 100%) !important;
  z-index: 1 !important;
  border: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  width: auto !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] label.group {
  border-color: transparent !important;
  border-radius: 6px !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] label.group:hover {
  background: rgba(255,158,27,0.08) !important;
  border-color: rgba(255,158,27,0.28) !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] button[class*="rounded"] {
  border-color: #252525 !important;
}

.dark .brand-themed[data-brand="asustuf"] [data-filter-column] input[type="range"]::-webkit-slider-thumb {
  background: #FF9E1B !important;
}

/* ── Breadcrumbs ── */
.dark .brand-themed[data-brand="asustuf"] [class*="breadcrumb"] a {
  color: rgba(153,153,153,0.9) !important;
}

.dark .brand-themed[data-brand="asustuf"] [class*="breadcrumb"] a:hover {
  color: #FF9E1B !important;
}

.dark .brand-themed[data-brand="asustuf"] [class*="breadcrumb"] span {
  color: rgba(255,255,255,0.35) !important;
}

.dark .brand-themed[data-brand="asustuf"] [class*="breadcrumb"] li:last-child span {
  color: rgba(255,255,255,0.75) !important;
}