/* BRIONILUX category hero final v7 */

.brx-category-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(214, 176, 106, 0.06), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(0, 0, 0, 0.035), transparent 30%),
    #f7f7f5 !important;
}

@media (min-width: 1024px) {
  .brx-category-page select,
  .brx-category-main > select,
  select.brx-category-mobile-sort {
    display: none !important;
  }
}

.brx-category-main {
  padding-top: 100px !important;
}

.brx-category-hero {
  position: relative !important;
  width: calc(100% - 56px) !important;
  max-width: 1168px !important;
  height: 340px !important;
  min-height: 340px !important;
  margin: 0 auto 30px auto !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background-size: cover !important;
  background-position: center right !important;
  box-shadow:
    0 28px 74px rgba(0, 0, 0, 0.115),
    0 8px 22px rgba(0, 0, 0, 0.07) !important;
}

.brx-category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.76) 0%,
      rgba(0, 0, 0, 0.58) 31%,
      rgba(0, 0, 0, 0.23) 58%,
      rgba(0, 0, 0, 0.04) 100%
    ),
    radial-gradient(circle at 20% 52%, rgba(214, 176, 106, 0.11), transparent 34%) !important;
}

.brx-category-hero::after {
  display: none !important;
}

.brx-category-hero > div.relative.z-10 {
  position: relative !important;
  z-index: 3 !important;
  min-height: 340px !important;
  padding: 30px 38px 36px 38px !important;
  display: flex !important;
  align-items: stretch !important;
}

.brx-category-hero > div.relative.z-10 > div.w-full {
  width: 100% !important;
  max-width: 1080px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.brx-category-hero nav {
  position: relative !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px) !important;
}

.brx-category-hero > div.relative.z-10 > div.w-full > div:last-child {
  max-width: 575px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.brx-category-hero > div.relative.z-10 > div.w-full > div:last-child::before {
  content: "● КАТЕГОРИЯ BRIONILUX";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.115);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.brx-category-title {
  max-width: 575px !important;
  margin: 0 !important;
  font-size: clamp(36px, 3.25vw, 50px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  color: #fff !important;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important;
}

.brx-category-description {
  max-width: 515px !important;
  margin-top: 13px !important;
  font-size: 15.5px !important;
  line-height: 1.48 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important;
}

.brx-category-toolbar {
  width: calc(100% - 56px) !important;
  max-width: 1168px !important;
  margin: 0 auto 30px auto !important;
}

.brx-category-toolbar-inner {
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.055) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) !important;
}