/* ===== OVERLAY ===== */
.promo-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 0, 0, 0.027), #000 60%);
  backdrop-filter: blur(0.2vw);
  display: none; /* KLUCZOWE – nie jest widoczny domyślnie */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* klasa aktywna */
.promo-overlay.active {
  display: flex;
  animation: fadeIn 0.4s ease;
}
.promo-content{

    margin-top: -1vw;
}

/* ===== BOX ===== */
.promo-box {
  width: 30vw;
  background: #0f0f0f;
  border-radius: 1.2vw;
  padding: 3vw 2vw 2.5vw 2vw;
  position: relative;
  text-align: center;
  border: 0.08vw solid rgba(255, 0, 0, 0.3);
  box-shadow: 0 0 3vw rgba(255, 0, 0, 0.25);
  animation: slideUp 0.4s ease;
}

/* ===== LOGO ===== */
.promo-logo {
  font-size: 2.8vw;
  font-weight: 800;
  letter-spacing: 0.4vw;
  margin-bottom: 2vw;
  margin-left: 0.5vw;
  color: #fff;
  transform: perspective(20vw) rotateX(15deg);
}

.promo-logo span {
  color: red;
  text-shadow: 0 0 1vw rgba(255,0,0,0.8);
}

/* ===== CLOSE BUTTON ===== */
.promo-close {
  position: absolute;
  top: 1vw;
  right: 1.2vw;
  background: none;
  border: none;
  color: #777;
  font-size: 1.6vw;
  cursor: pointer;
  transition: 0.3s ease;
}

.promo-close:hover {
  color: red;
  transform: scale(1.15);
}

/* ===== TEKST ===== */
.promo-discount {
  color: #aaa;
  font-size: 1.2vw;
  margin-bottom: 0.8vw;
}

.promo-discount span {
  color: red;
  font-weight: 700;
  font-size: 1.4vw;
}

.promo-info {
  color: #777;
  font-size: 0.95vw;
  margin-bottom: 1.8vw;
}

/* ===== BUTTON ===== */
.promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6vw;
  background: red;
  color: #fff;
  padding: 1vw 2.2vw;
  border-radius: 0.8vw;
  font-size: 1vw;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 0 1vw rgba(255, 0, 0, 0.5);
}

.promo-btn i {
  font-size: 0.9vw;
  transition: 0.3s ease;
}

.promo-btn:hover {
  background: #ff1a1a;
  transform: translateY(-0.2vw);
  box-shadow: 0 0 2vw rgba(255, 0, 0, 0.7);
}

.promo-btn:hover i {
  transform: translateX(0.3vw);
}

/* ===== ANIMACJE ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(2vw); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - SPREADSHEET & POPUP
   ========================================== */

/* 1. DUŻE EKRANY I TABLETY (do 1800px / 1400px / 1024px) */
@media screen and (max-width: 1800px) {
    .products-grid-6 { grid-template-columns: repeat(5, 1fr); } 
}
@media screen and (max-width: 1400px) {
    .products-grid-6 { grid-template-columns: repeat(4, 1fr); } 
    .mega-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } 
}
@media screen and (max-width: 1024px) {
    .products-grid-6 { grid-template-columns: repeat(3, 1fr); } 
    
    .filter-bar-inner { flex-direction: column; gap: 15px; align-items: stretch; padding: 15px 20px; }
    .quick-filters { flex-direction: column; width: 100%; }
    .quick-search { width: 100%; }
    .quick-sort { display: flex; width: 100%; gap: 10px; align-items: center; }
    .quick-sort select { width: 100%; flex: 1; }
    .mega-filter-toggle { justify-content: center; }
}

/* 2. TELEFONY (do 768px) */
@media screen and (max-width: 768px) {
    /* Poprawki Layoutu Głównego */
    .catalog-main.full-width-mode { padding: 100px 15px 60px 15px; } 
    .header-info h1 { font-size: 28px; line-height: 1.2; margin-bottom: 5px; }
    .header-info p { font-size: 14px; }
    
    /* Siatka produktów - 2 kolumny na telefonach to złoty standard */
    .products-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 12px; } 
    .catalog-content { padding: 0; }
    
    /* Mega Panel - 1 kolumna i przewijanie */
    .mega-grid { grid-template-columns: 1fr; gap: 25px; } 
    .mega-filter-panel { padding: 20px 15px; max-height: 75vh; overflow-y: auto; }
    .category-grid { grid-template-columns: 1fr; max-height: unset; overflow-y: visible; }
    
    /* Stopka mega panelu z przyciskami na 100% szerokości */
    .mega-panel-footer { flex-direction: column; gap: 15px; }
    .clear-all-btn, .apply-mega-btn { width: 100%; text-align: center; padding: 15px; font-size: 15px; }

    /* Wnętrze karty produktu na małym ekranie */
    .card-body { padding: 12px; }
    .product-category { font-size: 10px; margin-bottom: 4px; }
    .product-title { font-size: 13px; margin-bottom: 8px; }
    .badges { top: 6px; left: 6px; gap: 3px; }
    .badge { font-size: 9px; padding: 3px 6px; }
    
    /* Logo platformy i serce */
    .platform-logo-top { width: 26px; height: 26px; top: 6px; right: 6px; padding: 3px; }
    .heart-action-btn { width: 36px; height: 36px; font-size: 16px; }
    
    /* Dół karty - Zobacz button + Cena */
    .current-price { font-size: 16px; }
    .card-footer { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 10px; }
    .footer-actions { justify-content: space-between; width: 100%; }
    
    /* Przycisk Zobacz zajmuje całą pozostałą przestrzeń */
    .view-btn { flex: 1; justify-content: center; font-size: 13px; padding: 8px; }
    .view-btn span { display: inline; } /* Zostawiamy tekst "Zobacz" bo teraz ma miejsce */

    /* Aktywne Filtry (Pigułki) */
    .active-filters-row { padding: 0; gap: 8px; }
    .active-tag { font-size: 12px; padding: 6px 10px; }
    
    /* ================= FIX DLA PROMO POPUP ================= */
    .promo-box { 
        width: 85vw; /* Zajmuje prawię całą szerokość telefonu */
        padding: 30px 20px; 
        border-radius: 20px; 
    }
    .promo-logo { font-size: 32px; letter-spacing: 2px; margin-bottom: 15px; transform: none; }
    .promo-logo span { text-shadow: 0 0 10px rgba(255,0,0,0.8); }
    .promo-close { font-size: 24px; top: 10px; right: 15px; }
    
    .promo-discount { font-size: 16px; margin-bottom: 10px; }
    .promo-discount span { font-size: 22px; }
    .promo-info { font-size: 13px; margin-bottom: 25px; }
    
    .promo-btn { 
        width: 100%; 
        font-size: 15px; 
        padding: 15px; 
        border-radius: 12px; 
    }
    .promo-btn i { font-size: 15px; }
}

/* 3. BARDZO MAŁE TELEFONY (do 480px) */
@media screen and (max-width: 480px) {
    .products-grid-6 { gap: 8px; }
    .card-body { padding: 10px; }
    .product-title { font-size: 12px; }
    .current-price { font-size: 15px; }
    .view-btn { font-size: 12px; }
    .quick-search input { font-size: 14px; }
    .promo-box { width: 92vw; padding: 25px 15px; }
}