/* microsoft brand styles — loaded on demand by BrandCssLoader. */

/* ═══════════════════════════════════════════════════════════
   Microsoft — Dark Fluent (#0A0A0A) with four-square accents
   Primary accent #00A4EF, with red/green/yellow used sparingly
   ═══════════════════════════════════════════════════════════ */

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

/* Product cards — dark Fluent panel, four-color top strip on hover */

.dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .group\/card {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(242,80,34,0.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(127,186,0,0.09), transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(0,164,239,0.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(255,185,0,0.10), transparent 55%),
    #0D0D0D !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  clip-path: none !important;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, border-color 0.3s, background 0.4s !important;
  position: relative !important;
  overflow: hidden !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .group\/card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #F25022 0%, #7FBA00 33%, #00A4EF 66%, #FFB900 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1) !important;
}

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

@media (min-width: 992px) {
  .dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .group\/card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0,164,239,0.25) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.4) !important;
    background:
      radial-gradient(ellipse 80% 60% at 0% 0%, rgba(242,80,34,0.16), transparent 55%),
      radial-gradient(ellipse 80% 60% at 100% 0%, rgba(127,186,0,0.14), transparent 55%),
      radial-gradient(ellipse 80% 60% at 0% 100%, rgba(0,164,239,0.16), transparent 55%),
      radial-gradient(ellipse 80% 60% at 100% 100%, rgba(255,185,0,0.15), transparent 55%),
      #0D0D0D !important;
  }
  .dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .group\/card:hover::before {
    transform: scaleX(1) !important;
  }
}

/* Product title accent — Microsoft blue */

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

/* Price separator */

.dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card [data-price-separator] {
  background: linear-gradient(to right, transparent, rgba(0,164,239,0.2), transparent) !important;
}

/* Badges */

.dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .badge-tag {
  background: rgba(0,164,239,0.12) !important;
  border: 1px solid rgba(0,164,239,0.2) !important;
  border-radius: 4px !important;
}

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

.dark .brand-themed[data-brand="microsoft"] [data-brand-grid] .product-card .badge-tag span {
  color: #00A4EF !important;
}

/* In-stock dot — Xbox green */

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

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

/* Sort bar — dark Fluent */

.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] {
  background: #101010 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  clip-path: none !important;
  backdrop-filter: none !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

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

.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] [data-sort-search],
.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] [data-sort-search].border {
  background: #0A0A0A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] [data-sort-search]:focus-within {
  border-color: #00A4EF !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-sort-bar] select {
  background: #0A0A0A !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
}

/* Filter column — dark Fluent, NO clip-path */

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] > div {
  clip-path: none !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: #101010 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] > div::before {
  display: none !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] .sticky {
  background: #101010 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] h2 {
  color: #ffffff !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] input[type="text"],
.dark .brand-themed[data-brand="microsoft"] [data-filter-column] input[type="search"] {
  background: #0A0A0A !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] input[type="checkbox"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 2px !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] input[type="checkbox"]:checked {
  background-color: #00A4EF !important;
  border-color: #00A4EF !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] [role="slider"] {
  border-color: #00A4EF !important;
  background: #00A4EF !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] [role="slider"]:hover {
  background: #0078D4 !important;
}

.dark .brand-themed[data-brand="microsoft"] [data-filter-column] span.grow > span {
  background: #00A4EF !important;
}