/* ============================================== */
/* --- MOTYWY: JASNY (domyślny) + CIEMNY       --- */
/* ============================================== */
:root {
  --bg-base: #FBF9F4;
  --bg-soft: #FBF9F4;
  --bg-wash: rgba(251, 249, 244, 0.5);
  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.92);
  --border: #E7E3D8;
  --border-soft: rgba(231, 227, 216, 0.6);
  --muted-btn: #E7E3D8;
  --ink: #1A1A2E;
  --ink-hover: #12121F;
  --text-primary: #1A1A2E;
  --text-muted: #6B6B7A;
  --text-faint: rgba(107, 107, 122, 0.7);

  --accent-pink: #EC1C8D;
  --accent-pink-dark: #C7136F;
  --accent-teal: #00D6FF;
  --accent-blue: #29B6F6;
  --accent-purple: #B47CFF;
  --accent-green: #4CAF50;

  --accent-wash: rgba(0, 214, 255, 0.10);
  --pink-wash: rgba(236, 28, 141, 0.08);
  --tint-green: #E8F5E9;
  --tint-purple: #F3E8FF;
  --tint-blue: #E3F2FD;
  --tint-yellow: #FFF8E1;
  --tint-red: #FFEBEE;
  --tint-red-border: #FFCDD2;
  --danger-text: #C62828;
  --danger-text-soft: #5C2525;

  --hard-shadow: rgba(26, 26, 46, 0.9);
  --grid-dot: #1A1A2E;
  --grid-opacity: 0.04;
  --ambient-alpha: 0.35;
}

html[data-theme="dark"] {
  --bg-base: #0F1222;
  --bg-soft: #151932;
  --bg-wash: rgba(255, 255, 255, 0.03);
  --surface: #1A1F38;
  --surface-glass: rgba(18, 22, 42, 0.88);
  --border: #2A3052;
  --border-soft: rgba(80, 88, 140, 0.35);
  --muted-btn: #262C4A;
  --ink: #232946;
  --ink-hover: #2C3358;
  --text-primary: #EEF1FF;
  --text-muted: #9AA2C7;
  --text-faint: rgba(154, 162, 199, 0.75);

  --accent-wash: rgba(0, 214, 255, 0.14);
  --pink-wash: rgba(236, 28, 141, 0.14);
  --tint-green: rgba(76, 175, 80, 0.14);
  --tint-purple: rgba(180, 124, 255, 0.14);
  --tint-blue: rgba(41, 182, 246, 0.14);
  --tint-yellow: rgba(255, 199, 0, 0.13);
  --tint-red: rgba(229, 57, 53, 0.13);
  --tint-red-border: rgba(229, 57, 53, 0.35);
  --danger-text: #FF8A80;
  --danger-text-soft: #F3B3AE;

  --hard-shadow: rgba(0, 0, 0, 0.55);
  --grid-dot: #8B93C9;
  --grid-opacity: 0.05;
  --ambient-alpha: 0.55;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
  font-feature-settings: "ss01", "cv05";
}

/* Płynna zmiana motywu na panelach */
header, footer, section, .page-section {
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* --- TYPOGRAFIA ---
   Klasa .font-pixel została zachowana w HTML, ale mapuje teraz
   na Inter (jak nagłówki kategorii) — mocny, jednolity display. */
.font-pixel {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0.045em;
}

h1.font-pixel { letter-spacing: -0.01em; }

/* --- SIATKA W TLE (statyczna, zależna od motywu) --- */
.pixel-bg {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px),
                    radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: var(--grid-opacity);
  transition: opacity 0.35s ease;
}

/* --- NOWE AMBIENTOWE TŁO (canvas z dryfującymi blokami) --- */
#ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Przyciski w stylu retro (checkout / upsell) --- */
.btn-pixel-pink {
  background-color: var(--accent-pink);
  border-bottom: 4px solid var(--accent-pink-dark);
  transition: all 0.1s ease;
}
.btn-pixel-pink:hover { transform: translateY(2px); border-bottom-width: 2px; }

.btn-pixel-green {
  background-color: #4CAF50;
  border-bottom: 4px solid #388E3C;
  transition: all 0.1s ease;
}
.btn-pixel-green:hover { transform: translateY(2px); border-bottom-width: 2px; }

.btn-pixel-blue {
  background-color: #5865F2;
  border-bottom: 4px solid #3f4bb8;
  transition: all 0.1s ease;
}
.btn-pixel-blue:hover { transform: translateY(2px); border-bottom-width: 2px; }

/* --- Banery szachownicowe --- */
.checker-yellow {
  background-color: #00D6FF;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 48, 255, 0.15) 0px,
    rgba(0, 48, 255, 0.15) 12px,
    transparent 12px,
    transparent 32px
  );
}
.checker-green {
  background-color: var(--accent-green);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(27, 94, 32, 0.15) 0px,
    rgba(27, 94, 32, 0.15) 12px,
    transparent 12px,
    transparent 32px
  );
}

/* --- KARTY TRYBÓW (ekran wyboru w sklepie) --- */
.shop-mode-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.shop-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(340px 180px at 50% -20%, var(--mode-glow, rgba(0,214,255,0.22)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.shop-mode-card:hover::before { opacity: 1; }
.shop-mode-card::after {
  /* przesuwający się połysk przy najechaniu */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.shop-mode-card:hover::after { left: 130%; }

/* --- ANIMACJA POJAWIANIA KART (kaskadowo) --- */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stagger-grid > * {
  animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.stagger-grid > *:nth-child(1) { animation-delay: 0.02s; }
.stagger-grid > *:nth-child(2) { animation-delay: 0.09s; }
.stagger-grid > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-grid > *:nth-child(4) { animation-delay: 0.23s; }
.stagger-grid > *:nth-child(5) { animation-delay: 0.30s; }
.stagger-grid > *:nth-child(6) { animation-delay: 0.37s; }
.stagger-grid > *:nth-child(7) { animation-delay: 0.44s; }
.stagger-grid > *:nth-child(8) { animation-delay: 0.51s; }
.stagger-grid > *:nth-child(9) { animation-delay: 0.58s; }
.stagger-grid > *:nth-child(10) { animation-delay: 0.65s; }

/* Delikatne unoszenie ikony w kafelku produktu przy najechaniu */
.tilt-card [class*="aspect-"] > svg,
.group [class*="aspect-"] > svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tilt-card:hover [class*="aspect-"] > svg,
.group:hover [class*="aspect-"] > svg {
  transform: translateY(-4px) scale(1.1);
}

/* --- Efekt tilt --- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}
.tilt-card-tooltip {
  pointer-events: none;
  position: fixed;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.15s ease;
  box-shadow: 2px 2px 0px var(--hard-shadow);
  white-space: nowrap;
}

/* --- Scrollbary --- */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

.cart-list-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-teal) var(--border);
}
.cart-list-scroll::-webkit-scrollbar { width: 6px; }
.cart-list-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 999px; }
.cart-list-scroll::-webkit-scrollbar-thumb { background-color: var(--accent-teal); border-radius: 999px; }
.cart-list-scroll::-webkit-scrollbar-thumb:hover { background-color: #00B8DE; }

/* ============================================== */
/* --- SUBTELNE ANIMACJE I PŁYNNE PRZEJŚCIA   --- */
/* ============================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.45s ease backwards; }

#cart-panel { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
#cart-backdrop { transition: opacity 0.3s ease; }

/* --- Przełącznik motywu --- */
#theme-toggle svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#theme-toggle:hover svg { transform: rotate(30deg) scale(1.1); }

/* ============================================== */
/* --- CART PARTICLE ANIMATION SYSTEM         --- */
/* ============================================== */
.cart-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 1px;
  will-change: transform, opacity, left, top;
  image-rendering: pixelated;
}

@keyframes cart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.cart-pop-animate { animation: cart-pop 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* Poszanowanie ustawień systemowych ograniczających animacje */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- FAQ: płynne rozwijanie odpowiedzi --- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer-inner { overflow: hidden; min-height: 0; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-arrow { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.faq-item.open .faq-arrow { transform: rotate(90deg); }

/* --- Modal upsell ("Może coś jeszcze?") --- */
#upsell-backdrop { transition: opacity 0.3s ease; }
#upsell-panel { transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }