/* ============================================================
   Bookland — Custom CSS v2
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ─── Warm cream page background ─── */
.page-bg {
  position: relative;
  background-color: #FDF8F3;
  background-image:
    radial-gradient(ellipse 60% 50% at 12% 0%,   rgba(251,146,60,0.10), transparent 60%),
    radial-gradient(ellipse 55% 45% at 95% 12%,  rgba(244,63,94,0.07),  transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(168,85,247,0.06), transparent 60%);
  background-attachment: fixed;
}

/* Soft translucent surface to replace stark white blocks */
.surface-soft {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ─── Navigation underline animation ─── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #F97316, #FB923C);
  transition: width 0.25s ease;
  border-radius: 2px;
}
.nav-link:hover::after { width: 100%; }

/* ─── Card: compact layout на мобильных ─── */
@media (max-width: 640px) {
  .card-body   { padding: 0.75rem; }
  .card-foot   { gap: 0.25rem; }
  .card-price  { font-size: 0.75rem; letter-spacing: -0.03em; }
  .card-qty    { gap: 0.375rem; }
  .card-qty-btn { width: 1.375rem; height: 1.375rem; font-size: 0.7rem; border-radius: 0.375rem; }
  .card-qty-num { min-width: 0.875rem; font-size: 0.75rem; }
}

/* ─── Product card ─── */
@keyframes card-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-4px); }
}

.product-card {
  border-left: 3px solid transparent;
  animation: card-float 5.5s ease-in-out infinite;
  will-change: transform;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow:
    0 2px 4px  rgba(0,0,0,0.05),
    0 6px 20px rgba(0,0,0,0.09),
    0 14px 40px rgba(0,0,0,0.06);
}

/* Staggered phase offsets — плавные разные фазы */
.product-card:nth-child(1)  { animation-delay:  0s;    animation-duration: 5.4s; }
.product-card:nth-child(2)  { animation-delay: -1.4s;  animation-duration: 6.0s; }
.product-card:nth-child(3)  { animation-delay: -2.9s;  animation-duration: 5.2s; }
.product-card:nth-child(4)  { animation-delay: -4.5s;  animation-duration: 6.3s; }
.product-card:nth-child(5)  { animation-delay: -0.8s;  animation-duration: 5.7s; }
.product-card:nth-child(6)  { animation-delay: -2.5s;  animation-duration: 5.3s; }
.product-card:nth-child(7)  { animation-delay: -4.0s;  animation-duration: 6.1s; }
.product-card:nth-child(8)  { animation-delay: -1.9s;  animation-duration: 5.6s; }
.product-card:nth-child(9)  { animation-delay: -0.5s;  animation-duration: 5.9s; }
.product-card:nth-child(10) { animation-delay: -3.4s;  animation-duration: 5.1s; }
.product-card:nth-child(11) { animation-delay: -2.3s;  animation-duration: 6.4s; }
.product-card:nth-child(12) { animation-delay: -4.8s;  animation-duration: 5.5s; }
.product-card:nth-child(13) { animation-delay: -1.1s;  animation-duration: 5.8s; }
.product-card:nth-child(14) { animation-delay: -2.7s;  animation-duration: 6.0s; }
.product-card:nth-child(15) { animation-delay: -4.3s;  animation-duration: 5.3s; }
.product-card:nth-child(16) { animation-delay: -1.6s;  animation-duration: 6.2s; }
.product-card:nth-child(17) { animation-delay: -3.2s;  animation-duration: 5.6s; }
.product-card:nth-child(18) { animation-delay: -0.7s;  animation-duration: 6.3s; }
.product-card:nth-child(19) { animation-delay: -3.8s;  animation-duration: 5.4s; }
.product-card:nth-child(20) { animation-delay: -2.1s;  animation-duration: 5.9s; }
.product-card:nth-child(21) { animation-delay: -3.6s;  animation-duration: 5.5s; }
.product-card:nth-child(22) { animation-delay: -0.4s;  animation-duration: 6.1s; }

/* При наведении — пауза и чуть приподнять */
.product-card:hover {
  animation-play-state: paused;
  transform: translateY(-8px);
  box-shadow:
    0 6px 12px  rgba(0,0,0,0.08),
    0 20px 48px rgba(0,0,0,0.16),
    0 40px 80px rgba(0,0,0,0.08);
}

/* Category-matched left border accents */
.accent-malyshi        { border-left-color: #FB923C; }
.accent-skazki         { border-left-color: #A855F7; }
.accent-razvivayuschie { border-left-color: #10B981; }
.accent-raskraski      { border-left-color: #F43F5E; }
.accent-entsiklopedii  { border-left-color: #0EA5E9; }
.accent-nastolnye      { border-left-color: #F59E0B; }
.accent-igrushki       { border-left-color: #34D399; }
.accent-pazly          { border-left-color: #6EE7B7; }
.accent-tvorchestvo    { border-left-color: #F97316; }
.accent-melochovka     { border-left-color: #C084FC; }

/* ─── Category card ─── */
.category-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 2px 4px  rgba(0,0,0,0.05),
    0 6px 20px rgba(0,0,0,0.08),
    0 14px 36px rgba(0,0,0,0.05);
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 6px 10px  rgba(0,0,0,0.08),
    0 16px 40px rgba(0,0,0,0.14),
    0 32px 64px rgba(0,0,0,0.07);
}

/* Category icon gradients */
.cat-icon-1  { background: linear-gradient(135deg, #FFEDD5, #FED7AA); }
.cat-icon-2  { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); }
.cat-icon-3  { background: linear-gradient(135deg, #F3E8FF, #E9D5FF); }
.cat-icon-4  { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
.cat-icon-5  { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.cat-icon-6  { background: linear-gradient(135deg, #FFE4E6, #FECDD3); }
.cat-icon-7  { background: linear-gradient(135deg, #E0E7FF, #C7D2FE); }
.cat-icon-8  { background: linear-gradient(135deg, #CCFBF1, #99F6E4); }
.cat-icon-9  { background: linear-gradient(135deg, #FFF7ED, #FDBA74); }
.cat-icon-10 { background: linear-gradient(135deg, #FFF1F2, #FECDD3); }

/* ─── Benefit card ─── */
.benefit-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 2px 4px  rgba(0,0,0,0.05),
    0 6px 18px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.05);
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 5px 10px  rgba(0,0,0,0.08),
    0 14px 36px rgba(0,0,0,0.13),
    0 28px 56px rgba(0,0,0,0.07);
}

/* Benefit icon gradients */
.benefit-icon-1 { background: linear-gradient(135deg, #FFEDD5, #FED7AA); }
.benefit-icon-2 { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); }
.benefit-icon-3 { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); }
.benefit-icon-4 { background: linear-gradient(135deg, #F3E8FF, #DDD6FE); }
.benefit-icon-5 { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.benefit-icon-6 { background: linear-gradient(135deg, #FFE4E6, #FECDD3); }

/* ─── FAQ accordion ─── */
.faq-item summary { list-style: none; cursor: pointer; user-select: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { transition: transform 0.25s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-body {
  overflow: hidden;
  animation: faq-in 0.25s ease forwards;
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-item {
  box-shadow:
    0 1px 3px  rgba(0,0,0,0.04),
    0 4px 14px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s ease;
}
.faq-item[open] {
  box-shadow:
    0 4px 8px  rgba(0,0,0,0.07),
    0 12px 32px rgba(0,0,0,0.11);
}

/* ─── Order steps connector ─── */
.steps-connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #F97316, #FDBA74);
  margin: 0 8px;
  margin-top: 31px;
  flex-shrink: 0;
}
@media (max-width: 767px) { .steps-connector { display: none; } }

.step-circle {
  background: linear-gradient(135deg, #F97316, #FB923C) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
}

/* ─── Buttons ─── */
.btn-primary-gradient {
  background: linear-gradient(135deg, #F97316, #FB923C);
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary-gradient:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(249,115,22,0.4);
}
.btn-primary-gradient:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}
.btn-pulse { animation: soft-pulse 2.5s ease-in-out infinite; }

/* ─── Hero floating cards — каждая карточка независима ─── */

/* Используем CSS-свойство translate (отдельно от transform),
   чтобы не конфликтовать с rotate из Tailwind */

@keyframes hero-f1 {
  0%   { translate:  0px   0px; }
  20%  { translate: -5px  -7px; }
  45%  { translate:  4px  -9px; }
  70%  { translate:  6px  -3px; }
  100% { translate:  0px   0px; }
}
@keyframes hero-f2 {
  0%   { translate:  0px   0px; }
  25%  { translate:  6px  -8px; }
  55%  { translate:  2px -11px; }
  75%  { translate: -4px  -5px; }
  100% { translate:  0px   0px; }
}
@keyframes hero-f3 {
  0%   { translate:  0px   0px; }
  30%  { translate: -6px  -6px; }
  50%  { translate:  3px -10px; }
  75%  { translate:  5px  -4px; }
  100% { translate:  0px   0px; }
}
@keyframes hero-f4 {
  0%   { translate:  0px   0px; }
  20%  { translate:  5px  -5px; }
  50%  { translate: -3px  -9px; }
  80%  { translate: -5px  -3px; }
  100% { translate:  0px   0px; }
}

.hero-cards-float { /* убираем групповую анимацию */ }

.hero-card-1 { animation: hero-f1 6.0s ease-in-out infinite; }
.hero-card-2 { animation: hero-f2 7.5s ease-in-out infinite 1.1s; }
.hero-card-3 { animation: hero-f3 5.5s ease-in-out infinite 0.5s; }
.hero-card-4 { animation: hero-f4 8.0s ease-in-out infinite 1.8s; }

/* ─── Placeholder backgrounds ─── */
.placeholder-malyshi        { background: linear-gradient(135deg, #FDE8D8, #FBBF8A); }
.placeholder-skazki         { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); }
.placeholder-razvivayuschie { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); }
.placeholder-raskraski      { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); }
.placeholder-entsiklopedii  { background: linear-gradient(135deg, #DBEAFE, #93C5FD); }
.placeholder-nastolnye      { background: linear-gradient(135deg, #FEF9C3, #FDE047); }
.placeholder-igrushki       { background: linear-gradient(135deg, #DCFCE7, #86EFAC); }
.placeholder-pazly          { background: linear-gradient(135deg, #F0FDF4, #4ADE80); }
.placeholder-tvorchestvo    { background: linear-gradient(135deg, #FFF7ED, #FDBA74); }
.placeholder-melochovka     { background: linear-gradient(135deg, #F5F3FF, #C4B5FD); }

/* ─── Review & stat cards ─── */
.review-card-1 { border-top: 3px solid #F97316; }
.review-card-2 { border-top: 3px solid #0EA5E9; }
.review-card-3 { border-top: 3px solid #A855F7; }

.stat-card-1 { background: linear-gradient(135deg, #FFF7ED, #FFEDD5); border-radius: 1rem; padding: 1.5rem; }
.stat-card-2 { background: linear-gradient(135deg, #EEF6FF, #E0F2FE); border-radius: 1rem; padding: 1.5rem; }
.stat-card-3 { background: linear-gradient(135deg, #FFF0F6, #FFE4E6); border-radius: 1rem; padding: 1.5rem; }
.stat-card-4 { background: linear-gradient(135deg, #F0FDF4, #D1FAE5); border-radius: 1rem; padding: 1.5rem; }

/* ─── Text gradients ─── */
.price-gradient {
  background: linear-gradient(135deg, #F97316, #EA580C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-gradient {
  background: linear-gradient(135deg, #F97316 0%, #A855F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.star-filled { color: #F59E0B; }

/* ─── Mobile menu ─── */
#mobile-menu {
  transition: max-height 0.35s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 520px;
  opacity: 1;
}

/* ─── Fade-in on scroll ─── */
.js-ready .fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-ready .fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Filter pills ─── */
.active-filter {
  background-color: #F97316;
  color: #fff;
  border-color: #F97316;
}
.product-card.filtered-out { display: none; }

/* ─── Filter selects ─── */
.filter-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}
.filter-select-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: 0.25rem;
}
.filter-select-container {
  position: relative;
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.65rem 2.75rem 0.65rem 1rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 0.875rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.06);
}
.filter-select:hover {
  border-color: #FDBA74;
}
.filter-select:focus {
  outline: none;
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15), 0 1px 3px rgba(0,0,0,0.05);
}
.filter-select-arrow {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #F97316;
  display: flex;
  align-items: center;
}

/* Dark mode selects */
html.dark .filter-select {
  background-color: #1E293B;
  border-color: #475569;
  color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
}
html.dark .filter-select:hover  { border-color: #F97316; }
html.dark .filter-select:focus  { border-color: #F97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.2); }
html.dark .filter-select option { background-color: #1E293B; color: #E2E8F0; }
html.dark .filter-select-arrow  { color: #FB923C; }
html.dark .filter-select-label  { color: #475569; }

/* ─── Filter search input ─── */
.filter-search {
  appearance: none;
  width: 100%;
  padding: 0.65rem 2.25rem 0.65rem 2.5rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 0.875rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.06);
}
.filter-search::-webkit-search-decoration,
.filter-search::-webkit-search-cancel-button { display: none; }
.filter-search::placeholder { color: #9CA3AF; font-weight: 400; }
.filter-search:hover { border-color: #FDBA74; }
.filter-search:focus {
  outline: none;
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15), 0 1px 3px rgba(0,0,0,0.05);
}
.filter-search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.filter-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  background: none;
  border: none;
  transition: color 0.15s ease;
}
.filter-search-clear:hover { color: #F97316; }

/* Dark mode search */
html.dark .filter-search {
  background-color: #1E293B;
  border-color: #475569;
  color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
}
html.dark .filter-search:hover { border-color: #F97316; }
html.dark .filter-search:focus { border-color: #F97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.2); }
html.dark .filter-search::placeholder { color: #64748B; }
html.dark .filter-search-icon { color: #64748B; }
html.dark .filter-search-clear { color: #64748B; }
html.dark .filter-search-clear:hover { color: #FB923C; }

/* ─── Hide scrollbar (category chips) ─── */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }


/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ─── Cart icon states ─── */
@keyframes cart-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35) rotate(-8deg); }
  55%  { transform: scale(1.2) rotate(6deg); }
  75%  { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes cart-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.0); }
  50%       { box-shadow: 0 0 0 6px rgba(249,115,22,0.18); }
}

.cart-bounce svg {
  animation: cart-bounce 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.cart-has-items {
  animation: cart-glow-pulse 2s ease-in-out infinite;
  color: #F97316 !important;
}
.cart-has-items:hover {
  animation: none;
}

/* Footer border */
.footer-border-top {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #F97316, #FB923C, #F43F5E, #0EA5E9) 1;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — активируется классом `dark` на <html>
   ═══════════════════════════════════════════════════════════ */

/* Плавный переход при переключении темы */
html.dark-transitioning *,
html.dark-transitioning *::before,
html.dark-transitioning *::after {
  transition:
    background-color 0.28s ease,
    border-color     0.28s ease,
    color            0.18s ease,
    box-shadow       0.28s ease !important;
  animation-play-state: paused !important;
}

/* ── Page background ── */
html.dark .page-bg {
  background-color: #0F172A;
  background-image:
    radial-gradient(ellipse 60% 50% at 12% 0%,   rgba(249,115,22,0.08), transparent 60%),
    radial-gradient(ellipse 55% 45% at 95% 12%,  rgba(168,85,247,0.06), transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(249,115,22,0.04), transparent 60%);
}

/* ── Header ── */
html.dark header {
  background: rgba(15,23,42,0.96) !important;
  border-bottom-color: rgba(51,65,85,0.5) !important;
}
html.dark #mobile-menu {
  background-color: #1E293B !important;
  border-top-color: #334155 !important;
}
html.dark #mobile-menu a            { color: #CBD5E1 !important; }
html.dark #mobile-menu a:hover      { background-color: rgba(249,115,22,0.12) !important; color: #FB923C !important; }
html.dark #mobile-menu .border-t    { border-top-color: #334155 !important; }

/* ── White / gray surfaces → dark ── */
html.dark .bg-white    { background-color: #1E293B !important; }
html.dark .bg-gray-50  { background-color: #0F172A !important; }
html.dark .bg-gray-100 { background-color: #273344 !important; }
html.dark .bg-gray-200 { background-color: #334155 !important; }
html.dark .bg-warm-50  { background-color: #1E293B !important; }
html.dark .bg-warm-100 { background-color: #1A2538 !important; }

/* ── Цветные light-bg (иконки шагов, FAQ и т.д.) ── */
html.dark .bg-sky-50    { background-color: rgba(14,165,233,0.12) !important; }
html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; }
html.dark .bg-rose-50   { background-color: rgba(244,63,94,0.12)  !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; }

/* ── surface-soft (мобильные карточки шагов заказа) ── */
html.dark .surface-soft {
  background: rgba(30,41,59,0.9) !important;
  border-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px);
}

/* ── Text ── */
html.dark .text-gray-900 { color: #F1F5F9 !important; }
html.dark .text-gray-800 { color: #E2E8F0 !important; }
html.dark .text-gray-700 { color: #CBD5E1 !important; }
html.dark .text-gray-600 { color: #94A3B8 !important; }
html.dark .text-gray-500 { color: #64748B !important; }
html.dark .text-gray-400 { color: #94A3B8 !important; } /* описания карточек — светлее */

/* ── Статусные бейджи — В наличии / Уточнить ── */
html.dark .text-emerald-700 { color: #34D399 !important; }
html.dark .text-emerald-600 { color: #34D399 !important; }
html.dark .text-amber-700   { color: #FBBF24 !important; }

/* ── Borders ── */
html.dark .border-gray-100 { border-color: #334155 !important; }
html.dark .border-gray-200 { border-color: #475569 !important; }
html.dark [class*="border-warm"] { border-color: #334155 !important; }

/* ── Hover states ── */
html.dark .hover\:bg-gray-50:hover  { background-color: #273344 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
html.dark .hover\:text-gray-900:hover { color: #F1F5F9 !important; }

/* ── Brand tints ── */
html.dark .bg-brand-50  { background-color: rgba(249,115,22,0.12) !important; }
html.dark .bg-brand-100 { background-color: rgba(249,115,22,0.18) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.14) !important; }
html.dark .bg-amber-100   { background-color: rgba(245,158,11,0.14) !important; }
html.dark .bg-red-50      { background-color: rgba(239,68,68,0.1) !important; }

/* ── Product cards ── */
html.dark .product-card {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  /* объёмная тень через разные слои */
  box-shadow:
    0 4px 16px rgba(0,0,0,0.55),
    0 1px 3px  rgba(0,0,0,0.4),
    0 0 0 1px  rgba(255,255,255,0.04) !important;
}
html.dark .product-card:hover {
  box-shadow:
    0 20px 48px rgba(0,0,0,0.75),
    0 4px  12px rgba(0,0,0,0.5),
    0 0 0  1px  rgba(249,115,22,0.25) !important;
}

/* ── Кнопка − (убрать количество) — контрастнее ── */
html.dark #products-grid .bg-gray-100 {
  background-color: #334155 !important;
  color: #E2E8F0 !important;
}
html.dark #products-grid .bg-gray-100:hover {
  background-color: rgba(239,68,68,0.2) !important;
  color: #F87171 !important;
}

/* ── Hero cards ── */
html.dark .hero-card-1,
html.dark .hero-card-2,
html.dark .hero-card-3,
html.dark .hero-card-4 {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

/* ── Category cards ── */
html.dark .category-card {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}
html.dark .category-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}

/* ── Category icon gradients (dark) ── */
html.dark .cat-icon-1  { background: linear-gradient(135deg, #451a03, #7c2d12); }
html.dark .cat-icon-2  { background: linear-gradient(135deg, #0c2340, #1e3a5f); }
html.dark .cat-icon-3  { background: linear-gradient(135deg, #2d1b69, #4c1d95); }
html.dark .cat-icon-4  { background: linear-gradient(135deg, #064e3b, #065f46); }
html.dark .cat-icon-5  { background: linear-gradient(135deg, #451a03, #78350f); }
html.dark .cat-icon-6  { background: linear-gradient(135deg, #4c0519, #881337); }
html.dark .cat-icon-7  { background: linear-gradient(135deg, #1e1b4b, #312e81); }
html.dark .cat-icon-8  { background: linear-gradient(135deg, #042f2e, #134e4a); }
html.dark .cat-icon-9  { background: linear-gradient(135deg, #431407, #7c2d12); }
html.dark .cat-icon-10 { background: linear-gradient(135deg, #4a044e, #701a75); }

/* ── Benefit icon gradients (dark) ── */
html.dark .benefit-icon-1 { background: linear-gradient(135deg, #451a03, #7c2d12); }
html.dark .benefit-icon-2 { background: linear-gradient(135deg, #0c2340, #1e3a5f); }
html.dark .benefit-icon-3 { background: linear-gradient(135deg, #064e3b, #065f46); }
html.dark .benefit-icon-4 { background: linear-gradient(135deg, #2d1b69, #4c1d95); }
html.dark .benefit-icon-5 { background: linear-gradient(135deg, #451a03, #78350f); }
html.dark .benefit-icon-6 { background: linear-gradient(135deg, #4c0519, #881337); }

/* ── Stat cards (dark) ── */
html.dark .stat-card-1 { background: linear-gradient(135deg, #2c1810, #431407) !important; }
html.dark .stat-card-2 { background: linear-gradient(135deg, #0c1f35, #0f2b47) !important; }
html.dark .stat-card-3 { background: linear-gradient(135deg, #2c0b14, #4c0519) !important; }
html.dark .stat-card-4 { background: linear-gradient(135deg, #062210, #064e3b) !important; }

/* ── Бейджи секций («Хиты продаж», «Просто и быстро» и т.д.) ── */
/* Orange variant (bg-brand-50 border-brand-100) */
html.dark .bg-brand-50.border-brand-100 {
  background-color: rgba(249,115,22,0.18) !important;
  border-color:     rgba(249,115,22,0.4)  !important;
  color: #FB923C !important;
}
/* Neutral variant (bg-white border-gray-200 text-gray-500) */
html.dark .rounded-full.border.bg-white {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #94A3B8 !important;
}

/* ── Декоративные блобы hero — скрыть в тёмной теме ── */
html.dark .hero-blob { opacity: 0 !important; pointer-events: none; }

/* ── Mobile categories chips ── */
html.dark #cats-scroll a {
  background-color: #1E293B !important;
  border-color: #475569 !important;
  color: #CBD5E1 !important;
}

/* ── Filter buttons ── */
html.dark .filter-btn-cat:not(.active-filter),
html.dark .filter-btn-age:not(.active-filter) {
  background-color: #1E293B !important;
  border-color: #475569 !important;
  color: #94A3B8 !important;
}
html.dark .filter-btn-cat:not(.active-filter):hover,
html.dark .filter-btn-age:not(.active-filter):hover {
  border-color: #F97316 !important;
  color: #FB923C !important;
}

/* ── FAQ ── */
html.dark .faq-item {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

/* ── Trust / review cards ── */
html.dark .review-card-1,
html.dark .review-card-2,
html.dark .review-card-3 {
  background-color: #1E293B !important;
}

/* ── Pagination buttons ── */
html.dark #pagination button:not([class*="btn-primary"]) {
  background-color: #1E293B !important;
  border-color: #475569 !important;
  color: #94A3B8 !important;
}

/* ── Cart panel ── */
html.dark #cart-panel              { background-color: #1E293B !important; }
html.dark #cart-panel .border-b    { border-bottom-color: #334155 !important; }
html.dark #cart-panel .border-t    { border-top-color: #334155 !important; }
html.dark #cart-items > div        { background-color: #0F172A !important; }

/* ── Cart overlay (product modal) ── */
html.dark #pm-inner                { background-color: #1E293B !important; }
html.dark #pm-inner .bg-gray-50   { background-color: #0F172A !important; }
html.dark #pm-inner .border-t     { border-top-color: #334155 !important; }
html.dark #pm-inner .bg-gray-100  { background-color: #273344 !important; }


/* ── Scrollbar ── */
html.dark ::-webkit-scrollbar-track { background: #1E293B; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748B; }

/* ── Theme toggle button ── */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6B7280;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
#theme-toggle:hover         { background-color: rgba(249,115,22,0.08); color: #F97316; }
html.dark #theme-toggle     { color: #94A3B8; }
html.dark #theme-toggle:hover { background-color: rgba(249,115,22,0.14); color: #FB923C; }

/* moon = shown in light mode (hint: click for dark) */
/* sun  = shown in dark mode  (hint: click for light) */
.theme-icon-moon { display: block; }
.theme-icon-sun  { display: none;  }
html.dark .theme-icon-moon { display: none;  }
html.dark .theme-icon-sun  { display: block; }