/* ============ ДИЗАЙН-СИСТЕМА ВИТРИН CreatorStore v3 (MODERN) ============ */
body[style*="--accent"]{--accent-dark:color-mix(in srgb,var(--accent) 78%,#000);--accent-soft:color-mix(in srgb,var(--accent) 12%,#fff)}

/* Акцентный цвет ТОЛЬКО для кнопок "В корзину" */
body[style*="--accent"] .cart-add-btn{background-color:var(--accent)!important}
body[style*="--accent"] .cart-add-btn:hover{background-color:var(--accent-dark)!important}

/* Кнопки "В корзину" в модалке корзины */
body[style*="--accent"] #checkout-submit-btn{background-color:var(--accent)!important}
body[style*="--accent"] #checkout-submit-btn:hover{background-color:var(--accent-dark)!important}

/* Кнопка "Оформить заказ" в модалке корзины */
body[style*="--accent"] #checkout-open-btn{background-color:var(--accent)!important}
body[style*="--accent"] #checkout-open-btn:hover{background-color:var(--accent-dark)!important}

/* --- Скругление с плавными переходами --- */
body {
  --rad: 0.75rem;
  --rad-lg: 1rem;
  --rad-xl: 1.25rem;
}

body.cards-square {
  --rad: 0rem;
  --rad-lg: 0rem;
  --rad-xl: 0rem;
}

body.cards-flat {
  --rad: 0.375rem;
  --rad-lg: 0.5rem;
  --rad-xl: 0.75rem;
}

body .rounded {
  border-radius: max(0rem, calc(var(--rad) - 0.5rem)) !important;
  transition: border-radius 0.3s ease;
}

body .rounded-md {
  border-radius: max(0rem, calc(var(--rad) - 0.25rem)) !important;
  transition: border-radius 0.3s ease;
}

body .rounded-lg {
  border-radius: var(--rad) !important;
  transition: border-radius 0.3s ease;
}

body .rounded-xl {
  border-radius: var(--rad-lg) !important;
  transition: border-radius 0.3s ease;
}

body .rounded-2xl {
  border-radius: var(--rad-xl) !important;
  transition: border-radius 0.3s ease;
}

body.cards-square .p-card {
  border-radius: 0 !important;
}

body.cards-flat .p-card {
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.3s ease;
}

body.cards-flat .p-card:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body:is(.is-dark, .theme-dark, .theme-space).cards-flat .p-card {
  border-color: #1f2937 !important;
}

/* --- Шрифты с современной типографикой --- */
body.font-round,
body.font-round button,
body.font-round input,
body.font-round select,
body.font-round textarea {
  font-family: 'Nunito', 'Segoe UI Rounded', ui-rounded, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

body.font-serif,
body.font-serif button,
body.font-serif input {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

/* ============ ОБЛОЖКИ ВИТРИН (COVER PRESETS) ============ */
/* Все градиенты/паттерны теперь в CSS-классах.
   Для пресетов с динамическим цветом используется CSS-переменная --cover-color,
   которую Blade устанавливает инлайн на контейнер. */

/* --- Простые градиенты (не зависят от --cover-color) --- */
.bg-preset-sunset {
  background: linear-gradient(120deg,#f97316 0%,#ec4899 55%,#8b5cf6 100%);
}
.bg-preset-ocean {
  background: linear-gradient(120deg,#22d3ee 0%,#2563eb 55%,#0f172a 100%);
}
.bg-preset-violet {
  background: linear-gradient(120deg,#7c3aed 0%,#db2777 100%);
}
.bg-preset-emerald {
  background: linear-gradient(120deg,#34d399 0%,#0f766e 60%,#0a1424 100%);
}
.bg-preset-fire {
  background: linear-gradient(120deg,#dc2626 0%,#f59e0b 100%);
}
.bg-preset-neon {
  background: linear-gradient(120deg,#22d3ee 0%,#e879f9 100%);
}
.bg-preset-rose {
  background: linear-gradient(120deg,#f43f5e 0%,#be123c 60%,#0a1424 100%);
}
.bg-preset-gold {
  background: linear-gradient(120deg,#f59e0b 0%,#b45309 60%,#0a1424 100%);
}

/* --- Дефолтный градиент (preset = 'gradient') --- */
.bg-preset-gradient {
  background:
    radial-gradient(120% 90% at 85% -10%,rgba(37,99,235,.5) 0%,rgba(37,99,235,0) 55%),
    radial-gradient(90% 70% at 10% 115%,rgba(250,204,21,.28) 0%,rgba(250,204,21,0) 55%),
    linear-gradient(120deg,#0a1424 0%,#12263f 50%,#0a1424 100%);
}

/* --- Пресеты с динамическим цветом (используют var(--cover-color)) --- */
.bg-preset-solid {
  background-color: var(--cover-color, #12263f);
}

.bg-preset-custom {
  background: linear-gradient(120deg, var(--cover-color, #12263f) 0%, #0a1424 100%);
}

.bg-preset-pattern {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, rgba(255,255,255,0) 2px 70px),
    linear-gradient(120deg, var(--cover-color, #12263f) 0%, #0a1424 100%);
}

.bg-preset-dots {
  background:
    radial-gradient(rgba(255,255,255,.22) 2.5px, transparent 3px) 0 0 / 26px 26px,
    linear-gradient(120deg, var(--cover-color, #12263f), var(--cover-color, #12263f));
}

.bg-preset-circles {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.16) 0 55px, transparent 56px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,.12) 0 85px, transparent 86px),
    radial-gradient(circle at 55% 15%, rgba(255,255,255,.10) 0 35px, transparent 36px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.14) 0 24px, transparent 25px),
    linear-gradient(120deg, var(--cover-color, #12263f) 0%, #0a1424 100%);
}

.bg-preset-rings {
  background:
    repeating-radial-gradient(circle at 80% 50%, rgba(255,255,255,.14) 0 2px, transparent 2px 28px),
    repeating-radial-gradient(circle at 15% 60%, rgba(255,255,255,.10) 0 2px, transparent 2px 34px),
    linear-gradient(120deg, var(--cover-color, #12263f), #0a1424);
}

.bg-preset-squares {
  background:
    conic-gradient(rgba(255,255,255,.10) 0 25%, transparent 0 50%, rgba(255,255,255,.10) 0 75%, transparent 0) 0 0 / 48px 48px,
    linear-gradient(120deg, var(--cover-color, #12263f), #0a1424);
}

.bg-preset-grid {
  background:
    linear-gradient(rgba(255,255,255,.12) 1.5px, transparent 1.5px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.12) 1.5px, transparent 1.5px) 0 0 / 28px 100%,
    linear-gradient(120deg, var(--cover-color, #12263f), #0a1424);
}

.bg-preset-memphis {
  background:
    radial-gradient(rgba(255,255,255,.20) 2px, transparent 2.6px) 0 0 / 34px 34px,
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.14) 0 46px, transparent 47px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 3px, transparent 3px 56px),
    linear-gradient(120deg, var(--cover-color, #12263f), #0a1424);
}

/* --- Сложные паттерны (без --cover-color) --- */
.bg-preset-aurora {
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(52,211,153,.45) 0%, transparent 60%),
    radial-gradient(50% 70% at 70% 30%, rgba(139,92,246,.5) 0%, transparent 60%),
    radial-gradient(60% 80% at 50% 90%, rgba(14,165,233,.4) 0%, transparent 60%),
    linear-gradient(120deg, #0a1424, #12263f);
}

.bg-preset-neon-pat {
  background:
    radial-gradient(40% 60% at 25% 50%, rgba(34,211,238,.5) 0%, transparent 70%),
    radial-gradient(40% 60% at 75% 50%, rgba(232,121,249,.5) 0%, transparent 70%),
    radial-gradient(rgba(255,255,255,.15) 1.5px, transparent 2px) 0 0 / 26px 26px,
    linear-gradient(120deg, #0a1424, #0a1424);
}

/* --- ТЕМЫ: БАЗОВЫЕ --- */

/* Кремовая: теплые тона с мягким градиентом */
body.theme-cream {
  background: linear-gradient(135deg, #faf6ef 0%, #f5ede0 100%) !important;
  background-attachment: fixed;
}

body.theme-cream .bg-gray-50 {
  background-color: #faf6ef !important;
}

body.theme-cream .bg-white {
  background-color: #fffdf8 !important;
  box-shadow: 0 4px 20px rgba(139, 90, 43, 0.08);
}

/* --- ТЕМЫ С РИСУНКАМИ --- */

/* Детская: яркие пятна с анимацией */
body.theme-kids {
  background-color: #fff8e6 !important;
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(255, 171, 64, 0.20) 0 70px, transparent 71px),
    radial-gradient(circle at 85% 40%, rgba(240, 98, 146, 0.16) 0 90px, transparent 91px),
    radial-gradient(circle at 45% 85%, rgba(77, 208, 225, 0.18) 0 80px, transparent 81px),
    radial-gradient(rgba(66, 165, 245, 0.28) 3px, transparent 4px),
    radial-gradient(rgba(255, 167, 38, 0.32) 2.5px, transparent 3.5px);
  background-size: auto, auto, auto, 64px 64px, 88px 88px;
  background-position: 0 0, 0 0, 0 0, 0 0, 32px 44px;
  background-attachment: fixed;
  animation: kidsFloat 20s ease-in-out infinite;
}

@keyframes kidsFloat {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 32px 44px; }
  50% { background-position: 10px 10px, -10px 5px, 5px -10px, 5px 5px, 37px 49px; }
}

/* Стройка: техническая сетка с динамичными полосами */
body.theme-construct {
  background-color: #eef3f9 !important;
  background-image: 
    linear-gradient(rgba(30, 64, 175, 0.10) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(30, 64, 175, 0.10) 1.5px, transparent 1.5px),
    repeating-linear-gradient(-45deg, rgba(245, 158, 11, 0.14) 0 14px, transparent 14px 28px);
  background-size: 28px 28px, 28px 28px, auto;
  background-attachment: fixed;
}

/* Геометрия: современные градиентные фигуры */
body.theme-geo {
  background-color: #f4f2ff !important;
  background-image: 
    conic-gradient(from 45deg at 72% 28%, rgba(124, 58, 237, 0.12) 0 25%, transparent 0 50%, rgba(99, 102, 241, 0.10) 0 75%, transparent 0),
    conic-gradient(from 220deg at 28% 72%, rgba(236, 72, 153, 0.10) 0 25%, transparent 0 50%, rgba(34, 211, 238, 0.12) 0 75%, transparent 0);
  background-size: 150px 150px, 190px 190px;
  background-attachment: fixed;
  animation: geoRotate 30s linear infinite;
}

@keyframes geoRotate {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 150px 150px, 190px 190px; }
}

/* Природа: органические паттерны с плавностью */
body.theme-nature {
  background-color: #f0f8f2 !important;
  background-image: 
    radial-gradient(rgba(22, 163, 74, 0.16) 2.5px, transparent 3.5px),
    radial-gradient(rgba(134, 239, 172, 0.4) 2px, transparent 3px),
    linear-gradient(rgba(22, 163, 74, 0.06) 2px, transparent 2px);
  background-size: 64px 64px, 48px 48px, 100% 34px;
  background-position: 0 0, 24px 28px, 0 0;
  background-attachment: fixed;
}

/* Ретро: винтажная сетка с теплыми акцентами */
body.theme-retro {
  background-color: #fdf2e3 !important;
  background-image: 
    repeating-linear-gradient(0deg, rgba(234, 88, 12, 0.09) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(234, 88, 12, 0.09) 0 2px, transparent 2px 26px),
    radial-gradient(circle at 88% 12%, rgba(240, 171, 60, 0.28) 0 80px, transparent 81px),
    radial-gradient(circle at 8% 90%, rgba(192, 64, 180, 0.14) 0 70px, transparent 71px);
  background-attachment: fixed;
}

/* Космос: глубокий космос с мерцающими звездами */
body.theme-space {
  background-color: #0b1026 !important;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.6px),
    radial-gradient(55% 45% at 72% 18%, rgba(99, 102, 241, 0.28) 0, transparent 60%),
    radial-gradient(45% 40% at 18% 62%, rgba(168, 85, 247, 0.2) 0, transparent 60%);
  background-size: 130px 130px, 80px 80px, auto, auto;
  background-position: 0 0, 40px 55px, 0 0, 0 0;
  background-attachment: fixed;
  animation: spaceTwinkle 8s ease-in-out infinite;
}

@keyframes spaceTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* --- ТЁМНЫЙ РЕЖИМ (для Тёмная и Космос) --- */
body:is(.is-dark, .theme-dark, .theme-space) {
  color: #e5e7eb;
}

body:is(.is-dark, .theme-dark, .theme-space) .bg-gray-50 {
  background-color: #0f172a !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .bg-white,
body:is(.is-dark, .theme-dark, .theme-space) .bg-white\/95,
body:is(.is-dark, .theme-dark, .theme-space) .bg-white\/90 {
  background-color: #111827 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body:is(.is-dark, .theme-dark, .theme-space) .bg-gray-100 {
  background-color: #1f2937 !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .bg-gray-200 {
  background-color: #374151 !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .hover\:bg-gray-100:hover,
body:is(.is-dark, .theme-dark, .theme-space) .hover\:bg-gray-200:hover,
body:is(.is-dark, .theme-dark, .theme-space) .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
  transition: background-color 0.2s ease;
}

body:is(.is-dark, .theme-dark, .theme-space) .text-gray-900 {
  color: #f9fafb !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .text-gray-800,
body:is(.is-dark, .theme-dark, .theme-space) .text-gray-700 {
  color: #e5e7eb !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .text-gray-600,
body:is(.is-dark, .theme-dark, .theme-space) .text-gray-500,
body:is(.is-dark, .theme-dark, .theme-space) .text-gray-400 {
  color: #9ca3af !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .text-gray-300 {
  color: #d1d5db !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .border-gray-200,
body:is(.is-dark, .theme-dark, .theme-space) .border-gray-100 {
  border-color: #1f2937 !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .border-white {
  border-color: #111827 !important;
}

body:is(.is-dark, .theme-dark, .theme-space) .p-card {
  background-color: #111827 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

body:is(.is-dark, .theme-dark, .theme-space) .p-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

body:is(.is-dark, .theme-dark, .theme-space) input,
body:is(.is-dark, .theme-dark, .theme-space) .sb-suggest {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  transition: all 0.2s ease;
}

body:is(.is-dark, .theme-dark, .theme-space) .sb-suggest a {
  color: #f9fafb;
}

body:is(.is-dark, .theme-dark, .theme-space) .sb-suggest a:hover {
  background: #374151;
}

body.theme-dark {
  background: linear-gradient(135deg, #0b1220 0%, #1a1f35 100%) !important;
  background-attachment: fixed;
}

/* --- СОВРЕМЕННЫЕ ЭФФЕКТЫ ДЛЯ КАРТОЧЕК --- */
.p-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.p-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Glassmorphism для модальных окон */
body:is(.theme-dark, .theme-space) .fixed {
  backdrop-filter: blur(20px);
}

/* Плавные переходы для всех интерактивных элементов */
button, a, input {
  transition: all 0.2s ease;
}

/* Современные тени */
.shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.shadow-xl {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
/* ===== НИЖНЯЯ НАВИГАЦИЯ (МОБИЛЬНОЕ ПРИЛОЖЕНИЕ) ===== */
.has-app-nav main {
    padding-bottom: 70px !important;
}

.has-app-nav .app-bottom-nav {
    display: block;
}

/* Скрываем нижнюю навигацию на десктопе */
@media (min-width: 768px) {
    .app-bottom-nav {
        display: none !important;
    }
    .has-app-nav main {
        padding-bottom: 0 !important;
    }
}

/* Адаптация шапки для режима приложения */
.has-app-nav .store-header {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* Safe area для iPhone с челкой */
@supports (padding: max(0px)) {
    .safe-area-pb {
        padding-bottom: max(env(safe-area-inset-bottom), 0);
    }
}