/* hhgears brand styles — diamond-stitched leather, red racing heritage
   Loaded on demand by BrandCssLoader. */

/* Let full-bleed sections break out of container */

.brand-themed[data-brand="hhgears"],
.brand-themed[data-brand="hhgears"] .mx-0.rounded-lg,
.brand-themed[data-brand="hhgears"] .mx-0.rounded-lg > * {
  overflow: visible !important;
}

/* Hide default background patterns */

.brand-themed[data-brand="hhgears"]::before,
.brand-themed[data-brand="hhgears"]::after {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Product card — leather slab with dashed red inner stitch + red corner accents
   ──────────────────────────────────────────────────────────────────────────── */

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .group\/card {
  background: #12121A !important;
  border: 1px solid #2A2A36 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, box-shadow 0.5s ease !important;
}

/* Dashed red stitch inner frame */

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .group\/card::before {
  content: '' !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px dashed rgba(215,0,15,0.4) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: transparent !important;
  clip-path: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
}

/* Top red stitch bar */

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .group\/card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: 2px !important;
  width: auto !important;
  background-image: repeating-linear-gradient(90deg, rgba(215,0,15,0.85) 0, rgba(215,0,15,0.85) 6px, transparent 6px, transparent 14px) !important;
  background-color: transparent !important;
  z-index: 1 !important;
  border: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  display: block !important;
}

@media (min-width: 992px) {
  .dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .group\/card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(215,0,15,0.55) !important;
    box-shadow: 0 20px 50px -20px rgba(215,0,15,0.5), inset 0 0 0 1px rgba(215,0,15,0.25), inset 0 0 40px rgba(215,0,15,0.06) !important;
  }
  .dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .group\/card:hover::before {
    border-color: rgba(215,0,15,0.7) !important;
  }
}

/* Product card typography + badge overrides */

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #F0EDE6 !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card h3 [data-title-accent] {
  color: #D7000F !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card [data-price-separator] {
  background: #D7000F !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .badge-tag {
  background: rgba(215,0,15,0.15) !important;
  border: 1px solid rgba(215,0,15,0.45) !important;
  color: #F0EDE6 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .bg-green-500 {
  background: #D7000F !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-brand-grid] .product-card .text-green-300 {
  color: #FF1A27 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Filter column — override MSI clip-path, use diamond-stitched leather theme
   ──────────────────────────────────────────────────────────────────────────── */

.dark .brand-themed[data-brand="hhgears"] [data-filter-column] > div {
  clip-path: none !important;
  border-radius: 8px !important;
  background: #0E0E15 !important;
  border: 1px solid #2A2A36 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Top red stitch bar */

.dark .brand-themed[data-brand="hhgears"] [data-filter-column] > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: 2px !important;
  background-image: repeating-linear-gradient(90deg, rgba(215,0,15,0.85) 0, rgba(215,0,15,0.85) 6px, transparent 6px, transparent 14px) !important;
  background-color: transparent !important;
  z-index: 1 !important;
  border: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

/* Left red vertical accent */

.dark .brand-themed[data-brand="hhgears"] [data-filter-column] > div::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 2px !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(215,0,15,0.6) 0%, rgba(215,0,15,0.1) 50%, transparent 100%) !important;
  z-index: 1 !important;
  border: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-filter-column] h2 {
  color: #F0EDE6 !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

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

.dark .brand-themed[data-brand="hhgears"] [data-filter-column] label.group:hover {
  background: rgba(215,0,15,0.05) !important;
  border-color: rgba(215,0,15,0.18) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Sort bar — no clip-path, red stitch top
   ──────────────────────────────────────────────────────────────────────────── */

.dark .brand-themed[data-brand="hhgears"] [data-sort-bar] {
  background: #0E0E15 !important;
  border-color: #2A2A36 !important;
  clip-path: none !important;
  border-radius: 8px !important;
  position: relative !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-sort-bar]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-image: repeating-linear-gradient(90deg, rgba(215,0,15,0.85) 0, rgba(215,0,15,0.85) 6px, transparent 6px, transparent 14px) !important;
  display: block !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-sort-search] {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-sort-bar] h2 {
  color: #F0EDE6 !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.dark .brand-themed[data-brand="hhgears"] [data-sort-bar] h2 [data-sort-count] {
  color: #D7000F !important;
  font-weight: 700 !important;
}