/* =========================================================
   PREMIUM COMPACT GLOW OVERRIDES
   Qara + sari Mirpanel stili saxlanilir, yalniz zeif cyan detal elave olunur.
   ========================================================= */

:root {
  --blue-glow: rgba(47,128,255,0.16);
  --yellow-glow: rgba(255,212,0,0.18);
  --cyan-line: rgba(47,128,255,0.28);
}

body {
  background:
    radial-gradient(760px 420px at 88% 4%, rgba(47,128,255,0.13), transparent 62%),
    radial-gradient(680px 420px at 8% 82%, rgba(255,212,0,0.11), transparent 64%),
    linear-gradient(180deg, #05070b 0%, #070707 42%, #050505 100%) !important;
}

.wrap {
  padding-top: 10px;
  padding-bottom: 10px;
}

.top {
  background:
    radial-gradient(520px 120px at 82% 0%, rgba(47,128,255,0.10), transparent 68%),
    rgba(5,7,10,.82) !important;
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border-bottom: 1px solid rgba(255,212,0,.14) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.34),
    0 1px 0 rgba(47,128,255,.16),
    0 0 28px rgba(47,128,255,.08);
}

.nav {
  gap: 10px;
}

.logo {
  box-shadow:
    0 0 24px rgba(255,212,0,.12),
    0 0 26px rgba(47,128,255,.08);
}

.desktopNav {
  gap: clamp(20px, 2.7vw, 38px) !important;
}

.desktopNavLink {
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 0 16px rgba(47,128,255,.07);
}

.desktopNavLink:hover,
.desktopNavLink.active {
  color: #ffd400 !important;
  text-shadow:
    0 0 16px rgba(255,212,0,.24),
    0 0 20px rgba(47,128,255,.16) !important;
}

.desktopNavLink::after {
  background: linear-gradient(90deg, transparent, rgba(47,128,255,.55), #ffd400, transparent) !important;
  box-shadow: 0 0 14px rgba(47,128,255,.22);
}

.headActions > div,
.side-menu-search input,
.side-search {
  background: rgba(6,9,14,.68) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(47,128,255,.05),
    0 10px 26px rgba(0,0,0,.22);
}

.headActions input[type="text"],
.side-menu-search input,
.side-search {
  color: #fff !important;
}

.headActions input[type="text"]::placeholder,
.side-menu-search input::placeholder,
.side-search::placeholder {
  color: rgba(255,255,255,.58) !important;
}

.headActions > div:focus-within,
.side-menu-search input:focus,
.side-search:focus {
  border-color: rgba(255,212,0,.42) !important;
  box-shadow:
    0 0 0 3px rgba(47,128,255,.10),
    0 0 24px rgba(47,128,255,.16),
    0 0 18px rgba(255,212,0,.12) !important;
}

.banner-wrap {
  margin-top: 5px;
}

.banner-box {
  border-color: rgba(255,212,0,.22);
  background:
    linear-gradient(90deg, rgba(255,212,0,.055), rgba(47,128,255,.045), rgba(255,255,255,.025));
  box-shadow:
    0 8px 26px rgba(0,0,0,.24),
    0 0 24px rgba(47,128,255,.08);
}

.hero-section {
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hero-slider-box,
.side-box {
  border: 1px solid rgba(255,212,0,.13);
  box-shadow:
    0 15px 44px rgba(0,0,0,.38),
    0 0 0 1px rgba(47,128,255,.055),
    0 0 32px rgba(47,128,255,.10);
}

.hero-slider-box::after,
.side-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(47,128,255,.08), transparent 38%, rgba(255,212,0,.045));
  opacity: .75;
}

.hero-side-boxes {
  gap: 10px;
}

.side-box {
  background:
    radial-gradient(460px 180px at 90% 0%, rgba(47,128,255,.10), transparent 62%),
    linear-gradient(145deg, #101010, #171717);
}

#products-section .wrap {
  padding-top: 6px;
  padding-bottom: 6px;
}

.tabs,
.glass-sort-container {
  margin-top: 8px !important;
}

.glass-sort-select {
  min-height: 46px;
  padding: 11px 18px !important;
  border-color: rgba(255,212,0,.25) !important;
  background-color: rgba(7,10,15,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 28px rgba(0,0,0,.24),
    0 0 22px rgba(47,128,255,.08);
  font-weight: 700;
}

.glass-sort-select:hover,
.glass-sort-select:focus {
  border-color: rgba(255,212,0,.48) !important;
  box-shadow:
    0 0 0 3px rgba(47,128,255,.10),
    0 0 24px rgba(47,128,255,.16),
    0 0 18px rgba(255,212,0,.12);
}

.grid {
  gap: 14px;
  margin-top: 12px;
}

.card {
  border-color: rgba(255,255,255,.095);
  background:
    radial-gradient(320px 160px at 92% 0%, rgba(47,128,255,.08), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
  box-shadow:
    0 12px 38px rgba(0,0,0,.44),
    0 0 0 1px rgba(47,128,255,.045);
}

.card:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(255,212,0,.24);
  box-shadow:
    0 20px 56px rgba(0,0,0,.58),
    0 0 28px rgba(47,128,255,.14),
    0 0 20px rgba(255,212,0,.10);
}

.cornerPrice {
  background: linear-gradient(135deg, #fff08a 0%, #ffd400 48%, #d6aa00 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.34),
    0 0 20px rgba(255,212,0,.24),
    0 0 12px rgba(47,128,255,.08);
}

.btn.primary,
.pp-btn-solid {
  box-shadow:
    0 8px 18px rgba(255,212,0,.18),
    0 0 18px rgba(47,128,255,.08);
}

.footer {
  background: rgba(5,7,10,.86);
  border-top-color: rgba(255,212,0,.12);
  box-shadow: 0 -10px 28px rgba(47,128,255,.06);
}

@media (min-width: 981px) {
  .hero-slider-box {
    min-height: 320px;
  }

  .side-box {
    padding: 14px;
  }

  .grid {
    margin-bottom: 86px;
  }
}

@media (max-width: 980px) {
  .wrap {
    padding: 10px;
  }

  .hero-section {
    gap: 9px;
  }

  .hero-side-boxes {
    gap: 9px;
  }

  .grid {
    gap: 12px;
    margin-top: 10px;
  }
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(440px 260px at 92% 0%, rgba(47,128,255,0.10), transparent 64%),
      radial-gradient(420px 260px at 0% 76%, rgba(255,212,0,0.08), transparent 66%),
      #070707 !important;
  }

  .top {
    box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 18px rgba(47,128,255,.07);
  }

  .banner-wrap {
    margin-top: 4px;
  }

  .hero-section {
    margin-top: 4px;
    gap: 7px;
  }

  .hero-side-boxes {
    gap: 7px;
  }

  .glass-sort-select {
    min-height: 42px;
    padding: 9px 14px !important;
  }

  .grid {
    gap: 9px;
    margin-top: 8px;
  }

  .card:hover {
    transform: translateY(-3px);
  }
}