/* ==========================================================================
   Bookrik.bg — Адаптивен Дизайн (Responsive Styles)
   Mobile-First & Tablet Optimizations
   ========================================================================== */

/* --- Екрани до 1200px (Малък десктоп и лаптопи) --- */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 2.1rem;
  }
  
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* --- Екрани до 992px (Таблети) --- */
@media (max-width: 992px) {
  .topbar-left {
    display: none;
  }
  
  .topbar-content {
    justify-content: center;
  }
  
  .header-phone-widget {
    display: none;
  }
  
  .header-search {
    max-width: 360px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-side-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .catalog-layout {
    grid-template-columns: 1fr;
  }
  
  .catalog-sidebar {
    order: 2;
  }
  
  .product-main-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-gallery {
    position: static;
  }
  
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  
  .spotlight-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .spotlight-cover-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
  
  .spotlight-meta-top, .spotlight-footer {
    justify-content: center;
  }
}

/* --- Екрани до 768px (Мобилни телефони & малки таблети) --- */
@media (max-width: 768px) {
  .site-header {
    position: static;
  }
  
  .header-inner {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .mobile-nav-toggle {
    display: block;
  }
  
  .header-search {
    order: 3;
    max-width: 100%;
    width: 100%;
  }
  
  .search-select-category {
    display: none;
  }
  
  /* Мобилна навигация */
  .site-nav {
    display: none;
  }
  
  .site-nav.mobile-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--book-navy);
    z-index: 1002;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  
  .site-nav.mobile-open .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  
  .site-nav.mobile-open .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  
  .site-nav.mobile-open .nav-link {
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .hero-banner-main {
    flex-direction: column-reverse;
    padding: 2rem 1.5rem;
    text-align: center;
    gap: 1.5rem;
  }
  
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .hero-side-banners {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .book-card {
    padding: 0.85rem;
  }
  
  .book-card-cover {
    height: 190px;
  }
  
  .book-title {
    font-size: 0.95rem;
  }
  
  .price-current {
    font-size: 1.15rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .thank-you-steps {
    grid-template-columns: 1fr;
  }
  
  .policy-content-box {
    padding: 1.5rem;
  }
  
  .cookie-banner {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* --- Екрани до 480px (Малки мобилни телефони) --- */
@media (max-width: 480px) {
  .brand-name {
    font-size: 1.35rem;
  }
  
  .brand-icon {
    width: 38px;
    height: 38px;
  }
  
  .brand-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-add-cart, .btn-buy, .btn-fast-order-modal {
    width: 100%;
  }
  
  .book-actions {
    grid-template-columns: 1fr;
  }
  
  .btn-quick-view {
    display: none;
  }
  
  .checkout-card {
    padding: 1.5rem 1.15rem;
  }
}