/* ===========================================
   IS-923: Design System Override
   Modern palette, Inter font, 8px grid, updated buttons
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary */
  --color-primary: #6366F1;
  --color-primary-light: #818CF8;
  --color-primary-dark: #4F46E5;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
  --gradient-primary-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #8B5CF6 100%);
  --gradient-dark: linear-gradient(135deg, #0B0F1A 0%, #1F2937 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);

  /* Glow */
  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
  --glow-primary-strong: 0 0 30px rgba(99, 102, 241, 0.5);

  /* Accent */
  --color-accent: #F97316;
  --color-accent-light: #FB923C;
  --color-accent-dark: #EA580C;

  /* Neutrals */
  --color-black: #0A0A0B;
  --color-white: #fff;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F4F4F5;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D1D1D6;
  --color-gray-400: #A0A0AB;
  --color-gray-500: #6E6E7A;
  --color-gray-600: #52525E;
  --color-gray-700: #3F3F46;
  --color-gray-800: #27272A;
  --color-gray-900: #18181B;

  /* Semantic */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #EAB308;
  --color-info: #3B82F6;

  /* Spacing — 8px grid */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Typography --- */
body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-gray-50);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 { font-size: 3.6rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

small, .text-sm { font-size: 1.4rem; color: var(--color-gray-500); }
.text-xs { font-size: 1.2rem; color: var(--color-gray-400); }

/* --- Links --- */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* --- Buttons --- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-weight: 600;
  transition: all var(--transition-base);
  letter-spacing: -0.01em;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--main,
.btn--orange {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.btn--main:hover,
.btn--orange:hover {
  background: var(--gradient-primary-hover);
  color: #fff;
  box-shadow: var(--glow-primary);
  transform: translateY(-2px);
}
.btn--main:focus,
.btn--orange:focus {
  background: var(--gradient-primary-hover);
  color: #fff;
  box-shadow: var(--glow-primary-strong);
}
.btn--main:active,
.btn--orange:active {
  background: var(--gradient-primary-hover);
  color: #fff;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn--black,
.btn--rblack {
  background-color: var(--color-black);
  color: #fff;
  border-radius: var(--radius-sm);
}
.btn--black:hover,
.btn--rblack:hover {
  background-color: var(--color-gray-800);
  color: #fff;
}
.btn--black:active,
.btn--rblack:active {
  background-color: var(--color-gray-700);
  color: #fff;
}

.btn--o-main,
.btn--o-black {
  border-radius: var(--radius-sm);
  border-color: var(--color-gray-300);
}

.btn--rounded {
  border-radius: var(--radius-sm);
}

.btn--ellipse {
  border-radius: var(--radius-full);
}

/* ===========================================
   IS-924: Layout Improvements
   max-width 1200px, centered content, improved spacing
   =========================================== */

:root {
  --site-max-width: 1200px;
  --content-padding-x: var(--space-lg);
}

/* --- Global Container --- */
.header__wrapper,
.footer__wrapper,
.footer__line {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

.wrapper {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

/* --- Header --- */
.header {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header__wrapper {
  height: 7.2rem;
  gap: var(--space-md);
}

.nav__link {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.4rem;
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-primary);
}

.nav__item {
  margin-right: var(--space-lg);
}

.logo {
  margin-right: var(--space-xl);
}

.header__search {
  margin-right: var(--space-md);
  min-width: 320px;
  position: relative;
  flex-shrink: 1;
}

.header__mid .nav {
  white-space: nowrap;
  flex-shrink: 0;
  gap: var(--space-md);
}

.logo {
  margin-right: var(--space-md) !important;
}

.header__search .input {
  border-radius: var(--radius-md);
  background-color: var(--color-gray-200);
  border: 1px solid transparent;
  transition: all var(--transition-base);
  width: 250px;
  height: 42px;
  padding-left: 40px;
  font-size: 1.4rem;
}

.header__search .header__search-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.header__search .header__search-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

.header__search .input:focus {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), var(--glow-primary);
}

.header__actions {
  align-items: center;
}

.header__action {
  margin-right: var(--space-md);
}

.wish,
.header__mode {
  display: flex;
  align-items: center;
}

.wish svg {
  color: var(--color-gray-500);
  transition: all var(--transition-base);
}

.wish:hover svg,
.wish.active svg {
  color: var(--color-primary);
  fill: var(--color-primary);
}

.header__actions .btn {
  border-radius: var(--radius-sm);
  height: 4.4rem;
}

.header__profile-link {
  height: 4.4rem;
  border-radius: var(--radius-sm);
  padding: 0 1.6rem;
  white-space: nowrap;
}

.header__cart {
  height: auto;
}

.header__cart-link {
  display: flex;
  align-items: center;
}

.header__cart-menu {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

body.darkmode .header__cart-menu {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-800);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.checkout__more {
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 400;
}

.checkout__more a {
  color: var(--color-gray-500);
  text-decoration: underline;
}

.checkout__more a:hover {
  color: var(--color-primary);
}

/* --- Intro / Hero --- */
.intro {
  margin-bottom: var(--space-3xl);
  border-radius: 0;
  position: relative;
}

.intro:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.intro__block {
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.intro__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  z-index: 2;
}

.intro__title {
  font-family: var(--font-family);
  letter-spacing: -0.03em;
}

.intro__subtitle {
  font-size: 1.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-xs);
  letter-spacing: -0.01em;
}

.intro__arrows {
  border-radius: var(--radius-full);
  overflow: hidden;
}

.intro__arrows .slick-arrow {
  background: var(--gradient-primary);
  transition: all var(--transition-base);
}

.intro__arrows .slick-arrow:hover {
  box-shadow: var(--glow-primary);
}

/* --- Sections & Blocks --- */
.section {
  padding-bottom: var(--space-3xl);
}

.block__title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.block__title--with-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block__view-all {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.block__view-all:hover {
  opacity: 0.7;
}

/* Hide slick arrows on product sliders */
.products__slider .slick-prev,
.products__slider .slick-next {
  display: none !important;
}

.block__subtitle {
  margin-bottom: var(--space-lg);
  font-size: 1.4rem;
  color: var(--color-gray-500);
  letter-spacing: 0.05em;
}

.block__text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin-bottom: var(--space-md);
}

/* Override inline font-family from WYSIWYG-pasted content on policy/text pages */
.text__page,
.text__page *,
.block__text,
.block__text * {
  font-family: var(--font-family) !important;
}

/* Tables inside WYSIWYG content (privacy policy, terms, etc.) */
.text__page table,
.block__text table {
  width: calc(100% - 8rem);
  max-width: calc(100% - 8rem);
  margin: var(--space-md) 0 var(--space-md) 8rem;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent;
}

.text__page table th,
.text__page table td,
.block__text table th,
.block__text table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-300);
  text-align: left;
  vertical-align: top;
  background: transparent;
}

.text__page table th,
.block__text table th {
  font-weight: 600;
}

/* --- Product detail image --- */
.product__image img {
  max-width: 100%;
  max-height: 50rem;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* --- Product Cards (IS-925 redesign) --- */
.products__item {
  border-radius: var(--radius-lg);
  transition: all var(--transition-slow);
  overflow: hidden;
  display: block;
  padding: 1rem;
}

.products__item:hover {
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.12);
  transform: translateY(-4px);
}

.products__content {
  font-family: var(--font-family);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition: border-color var(--transition-slow);
  padding: var(--space-md);
  min-height: 36rem;
}

.products__item:hover .products__content {
  border-color: rgba(99, 102, 241, 0.3);
}

.products__img {
  overflow: hidden;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18rem;
}

.products__img img {
  height: 16rem !important;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.products__item:hover .products__img img {
  transform: scale(1.04);
}

.products__label {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--color-gray-500);
  margin-bottom: 2px;
}

.products__name,
.products__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color-black);
  margin-bottom: 2px;
  min-height: calc(1.4rem * 1.3 * 3);
}

.products__type {
  color: var(--color-gray-500) !important;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: var(--space-sm);
}

.products__footer {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.products__footer .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1.2;
}

.products__footer .buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.products__footer .buy:hover {
  background: var(--color-primary-dark, #4f46e5);
  transform: scale(1.05);
}

.products__footer .buy img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

body.darkmode .products__content {
  background: var(--color-gray-900);
  border-color: var(--color-gray-800);
}

body.darkmode .products__name,
body.darkmode .products__title,
body.darkmode .products__footer .price {
  color: var(--color-white);
}

/* Rarity bar — full-width tier color */
.products__rarity {
  display: block;
  position: relative;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: #e5e7eb;
  margin-top: var(--space-xs);
}

.products__rarity--empty {
  background: transparent;
}

.products__rarity .rarity__item {
  display: none;
}

.products__rarity .rarity__item.active {
  display: block;
  width: 100%;
  height: 100%;
}

body.darkmode .products__rarity {
  background: #334155;
}

body.darkmode .products__rarity--empty {
  background: transparent;
}

.products {
  margin-bottom: var(--space-2xl);
}

.products__slider {
  margin-bottom: var(--space-3xl);
}

.products__wrapper {
  gap: 12px;
  margin: 0 !important;
}

.products__wrapper .products__block {
  padding: 0 !important;
  margin: 0 !important;
  width: calc(25% - 9px) !important;
}

/* --- Categories --- */
.category__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.category__content {
  border-radius: var(--radius-lg);
}

.category__wrapper {
  gap: var(--space-xs);
}

.category__block {
  padding: 0 4px;
  margin-bottom: var(--space-xs);
}

/* --- Explore / Promo Blocks --- */
.explore {
  border-radius: var(--radius-xl);
  margin: 0;
  padding: var(--space-3xl) var(--space-2xl);
}

.explore__title {
  font-family: var(--font-family);
}

.explore__subtitle {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* --- About Section (centered redesign) --- */
.about--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) 0 var(--space-3xl);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.about--centered .about__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-2xl);
  display: block;
}

.about__content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-family);
}

.about__heading {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  color: var(--color-black);
}

.about__subtitle {
  font-size: 1.8rem;
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.about__body {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-gray-600);
}

body.darkmode .about__heading {
  color: var(--color-white);
}

body.darkmode .about__subtitle,
body.darkmode .about__body {
  color: var(--color-gray-300);
}

/* --- Footer --- */
.footer {
  font-family: var(--font-family);
  background: var(--gradient-dark);
  color: var(--color-gray-300);
  border-top: none;
  margin-top: var(--space-3xl);
  padding: var(--space-3xl) 0 var(--space-lg);
}

.footer a {
  color: var(--color-gray-300);
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-white);
}

/* Top row */
.footer__top {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer__brand,
.footer__payments {
  width: 18rem;
  flex-shrink: 0;
}

.footer__logo img {
  width: 18rem;
  height: auto;
}

.footer__logo {
  display: block;
  margin-bottom: var(--space-sm);
}

.footer__tagline {
  font-size: 1.4rem;
  color: var(--color-gray-500);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  flex: 1;
}

.footer__col,
.footer__support {
  min-width: 0;
}

.footer__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer .nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer .nav__item {
  margin-right: 0;
  margin-bottom: var(--space-xs);
}

.footer .nav__link {
  font-size: 1.4rem;
  color: var(--color-gray-300);
}

.footer .nav__link:hover {
  color: var(--color-white);
}

/* Middle row */
.footer__mid {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__contact-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  align-items: flex-start;
  flex: 1;
}

.footer__label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.footer__cards img {
  height: 32px;
  width: auto;
  max-width: 100%;
  opacity: 0.9;
}

.footer__payments {
  overflow: hidden;
}

.footer__email {
  font-size: 1.4rem;
  color: var(--color-gray-300) !important;
}

.footer__address {
  font-size: 1.4rem;
  color: var(--color-gray-300);
  max-width: 280px;
  line-height: 1.5;
}

/* Bottom row */
.footer__bottom {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.3rem;
  color: var(--color-gray-500);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-md);
}

.footer__legal-links a {
  color: var(--color-gray-500);
  font-size: 1.3rem;
}

.footer__legal-links a:hover {
  color: var(--color-gray-300);
}

@media (max-width: 768px) {
  .footer__top {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .footer__nav {
    flex-wrap: wrap;
    gap: var(--space-xl);
  }

  .footer__mid {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* --- Catalog page --- */
.catalog__wrapper {
  gap: var(--space-md);
}

/* Filter on top layout */
.catalog__wrapper {
  flex-direction: column;
}

.catalog__wrapper .products__wrapper .products__block {
  width: 25%;
}

.filter__item {
  border-radius: 0;
  width: 100%;
  position: relative;
  margin-bottom: var(--space-sm);
  background: transparent !important;
  padding: 0 !important;
}

.filter__item .filter__head {
  display: none;
}

.filter__item .filter__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0;
}

.filter__item .filter__content-item {
  position: relative;
  padding: 0.4rem 0.6rem;
  border-bottom: 0;
}

.filter__item .filter__content-item > .filter__block-title {
  padding: 0.8rem 1.2rem 0.8rem 1.4rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  font-size: 1.3rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
}

.filter__item .filter__content-item > .filter__block-title:after {
  content: '';
  position: static;
  border: solid #666;
  border-width: 0 1.5px 1.5px 0;
  padding: 2.5px;
  transform: rotate(45deg);
  margin-top: -2px;
  flex-shrink: 0;
}

.filter__item .filter__content-item > .filter__block-title.active {
  border-color: #6366F1;
  color: #6366F1;
}

.filter__item .filter__content-item > .filter__block-title.active:after {
  position: static;
  border-color: #6366F1;
  transform: rotate(-135deg);
  margin-top: 2px;
}

.filter__item .filter__content-item > .filter__block-content,
.filter__item .filter__content-item > .filter__block-title + .filter__block-content {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: var(--space-sm);
  min-width: 22rem;
  max-height: 30rem;
  overflow-y: auto;
}

/* Price filter — compact slider dropdown */
.filter__item .filter__content-item:has(.filter__range) > .filter__block-content {
  min-width: 24rem;
  width: 24rem;
  padding: 2rem var(--space-md) 4rem;
  overflow: visible;
}

.filter__item .filter__range {
  padding: 0;
}

.filter__item .filter__range #keypress {
  margin: 0;
}

.filter__item .filter__range .noUi-target {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border: 0;
  box-shadow: none;
}

.filter__item .filter__range .noUi-connects {
  border-radius: 999px;
}

.filter__item .filter__range .noUi-connect {
  background: #6366F1;
}

.filter__item .filter__range .noUi-horizontal .noUi-handle {
  width: 14px;
  height: 14px;
  top: -5px;
  right: -7px;
  border-radius: 50%;
  background: #6366F1;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

.filter__item .filter__range .noUi-handle:before,
.filter__item .filter__range .noUi-handle:after {
  display: none;
}

.filter__item .filter__range .noUi-tooltip {
  font-size: 1.2rem;
  color: var(--color-gray-700, #374151);
  background: transparent;
  border: 0;
  padding: 0;
  bottom: auto;
  top: 14px;
  white-space: nowrap;
}

.filter__item .filter__content-item .select,
.filter__item .filter__content-item select {
  width: 100%;
  min-width: 18rem;
}

.filter__item .filter__content-item .select {
  padding: 0;
  border: none;
  background: transparent;
}

.filter__item .filter__content-footer {
  padding: 0.4rem 0.6rem;
}

.filter__item .filter__content-footer .btn {
  display: none;
}

.filter__item .filter__content-footer .filter__link {
  display: inline-block;
  padding: 0.8rem 1.2rem 0.8rem 1.4rem;
  font-size: 1.3rem;
}

/* Active filter tags */
.filter__active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-xs);
}

.filter__active-tags:empty {
  margin-bottom: 0;
}

.filter__active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: #EEF2FF;
  color: #6366F1;
  border-radius: 2rem;
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
}

.filter__active-tag:hover {
  background: #E0E7FF;
}

.filter__active-tag:after {
  content: '\00d7';
  font-size: 1.4rem;
  line-height: 1;
}

/* Filter dark mode */
body.darkmode .filter__item .filter__content-item > .filter__block-title {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
}

body.darkmode .filter__item .filter__content-item > .filter__block-title:after {
  border-color: var(--color-gray-400, #a1a1aa);
}

body.darkmode .filter__item .filter__content-item > .filter__block-content,
body.darkmode .filter__item .filter__content-item > .filter__block-title + .filter__block-content {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

body.darkmode .filter__item .filter__content-item .select select,
body.darkmode .filter__item .filter__content-item .select option {
  background: var(--color-gray-800);
  color: var(--color-gray-100);
  color-scheme: dark;
}

body.darkmode .filter__active-tag {
  background: var(--color-gray-800);
  color: var(--color-gray-100);
  border-color: var(--color-gray-700);
}

body.darkmode .filter__active-tag:hover {
  background: var(--color-gray-700);
}


@media (max-width: 992px) {
  .catalog__wrapper .products__wrapper .products__block {
    width: 33.333%;
  }
}

@media (max-width: 768px) {
  .catalog__wrapper .products__wrapper .products__block {
    width: 50%;
  }
}

/* Products grid (non-slider) */
.products__wrapper .products__block {
  width: 25%;
}

@media (max-width: 992px) {
  .products__wrapper .products__block {
    width: 33.333%;
  }
}

@media (max-width: 768px) {
  .products__wrapper .products__block {
    width: 50%;
  }
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  padding: var(--space-sm) 0;
  font-size: 1.3rem;
  color: var(--color-gray-400);
}

/* --- Pagination (IS-925 redesign) --- */
.pagination {
  gap: 4px;
  padding: var(--space-md) 0;
  background-color: transparent !important;
  border-top: none !important;
}

.pagination .pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-gray-600);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: none !important;
}

.pagination .pagination__item:hover {
  background: var(--color-gray-100) !important;
  color: var(--color-black);
}

.pagination .pagination__item--current,
.pagination .pagination__item.active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25) !important;
}

.pagination .pagination__item--current:hover,
.pagination .pagination__item.active:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.pagination .pagination__item--disabled,
.pagination .pagination__item.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  background: transparent !important;
}

.pagination .pagination__item--prev,
.pagination .pagination__item--next {
  font-weight: 500;
  padding: 0 12px;
}

body.darkmode .pagination .pagination__item {
  color: var(--color-gray-300);
}

body.darkmode .pagination .pagination__item:hover {
  background: var(--color-gray-800) !important;
  color: var(--color-white);
}

/* --- Forms --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: var(--font-family);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: var(--radius-full);
}

/* --- Mask / Overlay --- */
.mask.active {
  opacity: 0.7;
}

/* ===========================================
   IS-923 addendum: Replace all old orange (#FF6600) with primary
   =========================================== */

/* Slider dots */
.slick-dots li.slick-active button {
  background-color: var(--color-primary);
}

/* Remodal */
.remodal__footer-link {
  color: var(--color-primary);
}

/* Mobile menu active */
.menu__btn.active {
  background-color: var(--color-primary);
}

/* Event badge */
.event {
  background-color: var(--color-primary);
  color: #fff;
}

/* Checkbox checkmark */
.checkbox__label:after {
  border-color: var(--color-primary);
}

.checkbox__label a {
  color: var(--color-primary);
}

/* Outline main buttons */
.btn--o-main {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--o-main:focus {
  color: var(--color-primary);
  border-color: var(--color-primary-dark);
}

.btn--o-main:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

.btn--o-main:active {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark);
  color: #fff;
}

/* Inverted main buttons */
.btn--i-main:focus {
  color: var(--color-primary);
  border-color: var(--color-primary-dark);
}

.btn--i-main:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--i-main:active {
  border-color: var(--color-primary-dark);
}

/* Product label */
.products__label {
  color: var(--color-primary);
}

/* Product buy link */
.products__footer .buy {
  color: var(--color-primary);
}

/* About section accent line */
.about__container hr {
  background-color: var(--color-primary);
}

/* Contacts links */
.contact__block .block__text a {
  color: var(--color-primary);
}

/* Category hover */
.category__item-wrapper:hover .category__title {
  background-color: var(--color-primary);
}

.category__arrows .slick-prev:hover,
.category__arrows .slick-next:hover {
  background-color: var(--color-primary);
}

/* Category products */
.category-products__item-wrapper:hover .category-products__title {
  text-decoration-color: var(--color-primary);
}

/* Messages scrollbar */
.messages__content::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

/* Message close */
.message__info-close {
  background-color: var(--color-primary);
}

/* Utility class */
.bg-main {
  background-color: var(--color-primary);
}

/* Language active */
.lng__link.active {
  color: var(--color-primary);
}

/* Form links */
.form a,
.form__link {
  color: var(--color-primary);
}

/* Intro slider dots active */
.intro .slick-dots li.slick-active button {
  background-color: var(--color-primary);
}

/* Intro arrows hover */
.intro__arrows .slick-arrow:hover {
  background-color: var(--color-primary);
}

/* Coupon highlight */
.coupon {
  color: var(--color-primary);
}

/* Cart count buttons */
.shop-cart__minus,
.shop-cart__plus {
  background-color: var(--color-primary);
}

.shop-cart__minus:hover,
.shop-cart__plus:hover {
  background-color: var(--color-primary-dark);
}

/* Tab active border */
.tabs__link.active,
.tabs__item.active .tabs__link {
  border-bottom-color: var(--color-primary);
}

/* Accordion active icon */
.accordion__item.active .accordion__icon {
  background-color: var(--color-primary);
}

/* ===========================================
   IS-926: Unified Components
   Consistent radius, transitions, focus states
   =========================================== */

/* --- Inputs (text, email, password, etc.) --- */
.input,
input.input,
.input--rounded,
.input--ellipse {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.8rem 1.6rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--color-black);
}

.input::placeholder {
  color: var(--color-gray-400);
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

.input.error,
.input--error {
  border-color: var(--color-error);
}

.input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.profile__form .form__group {
  margin-top: 2rem;
}

.js-input-error-msg {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding-bottom: 0.3rem;
  font-size: 1.2rem;
  white-space: nowrap;
  z-index: 1;
}

.input__error {
  position: static;
  transform: none;
  color: var(--color-error);
  font-weight: 500;
}

/* --- Textarea --- */
.textarea,
textarea.textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: 1.4rem;
  padding: 1.2rem 1.6rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
}

.textarea:focus,
textarea.textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

/* --- Select --- */
.select,
select.select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: 1.4rem;
  padding: 0.8rem 2rem;
  transition: border-color var(--transition-fast);
  cursor: pointer;
}

.select:focus,
select.select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}

/* --- Checkbox --- */
.checkbox__box {
  border-radius: 6px;
  border-color: var(--color-gray-300);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox__input:checked + .checkbox__box {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.checkbox__label {
  font-size: 1.4rem;
  color: var(--color-gray-600);
}

/* --- Tabs --- */
.tabs__link {
  font-family: var(--font-family);
  font-weight: 600;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  border-bottom: 2px solid transparent;
  padding-bottom: 1.2rem;
}

.tabs__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.tabs__link.active,
.tabs__item.active .tabs__link {
  color: var(--color-black);
  border-bottom-color: var(--color-primary);
}

/* --- Accordion --- */
.accordion__item {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  overflow: hidden;
}

.accordion__title a {
  font-family: var(--font-family);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.accordion__title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- Alerts --- */
.alert {
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 1.4rem;
  padding: 1.2rem 1.6rem;
}

.alert--red {
  background-color: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.alert--green {
  background-color: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.alert--yellow {
  background-color: #FEFCE8;
  color: #854D0E;
  border: 1px solid #FEF08A;
}

.alert--blue {
  background-color: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  font-family: var(--font-family);
  font-size: 1.3rem;
  color: var(--color-gray-400);
}

.breadcrumbs a {
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- Tables --- */
table,
.table {
  font-family: var(--font-family);
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-200);
}

.table th,
table th {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gray-500);
  background-color: var(--color-gray-50);
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-gray-200);
  text-align: left;
}

.table td,
table td {
  font-size: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-gray-200);
  vertical-align: top;
}

/* --- Cabinet blocks --- */
.cabinet__block {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cabinet__label {
  font-size: 1.3rem;
  color: var(--color-gray-500);
  font-weight: 500;
}

/* --- Cart count buttons --- */
.cart-count .btn,
.shop-cart__count .btn {
  border-radius: var(--radius-sm);
}

/* --- Modals --- */
.remodal {
  border-radius: var(--radius-xl);
  font-family: var(--font-family);
  padding: var(--space-lg);
}

.modal__content {
  border-radius: var(--radius-xl);
  font-family: var(--font-family);
}

/* --- Cookie block --- */
.cookie {
  font-family: var(--font-family);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- Labels & badges --- */
.products__label {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* --- Dark Mode Override --- */
body.darkmode {
  background: var(--color-gray-900);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
  color: var(--color-gray-100);
}

body.darkmode .header {
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.darkmode .products__content {
  background-color: var(--color-gray-800);
}

body.darkmode .products__item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.darkmode .about__block {
  background-color: var(--color-gray-800);
}

body.darkmode .footer {
  background: var(--gradient-dark);
}

.footer__line {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: var(--color-gray-500);
}

body.darkmode .header__search .input {
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
}

body.darkmode .input,
body.darkmode .textarea,
body.darkmode .select,
body.darkmode select.select {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
}

body.darkmode .accordion__item,
body.darkmode .cabinet__block {
  background-color: var(--color-gray-800);
}

body.darkmode .table th,
body.darkmode table th {
  background-color: var(--color-gray-800);
  color: var(--color-gray-400);
}

body.darkmode .table td,
body.darkmode table td {
  border-color: var(--color-gray-700);
}

body.darkmode table,
body.darkmode .table {
  border-color: var(--color-gray-700);
}

body.darkmode table th,
body.darkmode .table th {
  border-color: var(--color-gray-700);
}

body.darkmode .tabs__link.active,
body.darkmode .tabs__item.active .tabs__link {
  color: var(--color-gray-100);
  border-bottom-color: var(--color-primary-light);
}

body.darkmode .remodal,
body.darkmode .modal__content {
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
}

body.darkmode input[type="text"],
body.darkmode input[type="email"],
body.darkmode input[type="password"],
body.darkmode textarea,
body.darkmode select {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
}

.profile__menu {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

body.darkmode a:not(.btn):not(.profile__link):not(.nav__link):not(.footer__link) {
  color: var(--color-primary-light);
}