/* public/css/responsive.css */

/* ============================================================
   TABLETS (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .product-detail { gap: 2rem; }
  .cart-layout { grid-template-columns: 1fr 300px; }
}

/* ============================================================
   SMALL TABLETS (≤ 900px)
============================================================ */
@media (max-width: 900px) {
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
  .about-snippet__inner { grid-template-columns: 1fr; text-align: center; }
  .about-snippet__badges { justify-content: center; }
  .contact-layout { grid-template-columns: 1fr; }
  .slider { height: 380px; }
  .slider__title { font-size: 2rem; }
}

/* ============================================================
   MOBILE (≤ 768px)
============================================================ */
@media (max-width: 768px) {
  .navbar__hamburger { display: flex; }
  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 1rem;
    z-index: 99;
    border-top: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .navbar__menu.open { display: flex; }
  .navbar__menu > li { width: 100%; }
  .navbar__menu > li > a { display: block; padding: .75rem .5rem; border-radius: 4px; width: 100%; }
  .navbar__search-form { width: 100%; }
  .navbar__search-input { width: 100%; }
  .navbar__cart { padding: .75rem .5rem; }

  .slider { height: 300px; }
  .slider__title { font-size: 1.6rem; }
  .slider__subtitle { font-size: 1rem; }

  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-detail__actions { flex-direction: column; }
  .product-detail__actions .btn { width: 100%; }

  .cart-layout { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 70px 1fr; grid-template-rows: auto auto auto; }
  .cart-row__img { grid-row: 1 / 3; }
  .cart-row__name { grid-column: 2; }
  .cart-row__price, .qty-stepper, .cart-row__remove { grid-column: 2; }

  .section { padding: 2.5rem 0; }
  .section__title { font-size: 1.6rem; }

  .about-snippet__badges { grid-template-columns: 1fr 1fr; }

  .newsletter-split { flex-direction: column; gap: 2rem; }
  .newsletter-split__divider { width: 80%; height: 2px; min-height: unset; align-self: center; }
  .newsletter-split__col { padding: 0 !important; }
  .newsletter__form { flex-direction: column; }
  .newsletter__input { border-radius: var(--radius); }

  .form-row { grid-template-columns: 1fr; }
  .page-title { font-size: 1.5rem; }
  .category-desc-inline { white-space: normal; }

  .search-form-large { flex-direction: column; }
  .search-form-large .btn { width: 100%; }

  .finder-wrap { grid-template-columns: 1fr; }
  .finder-filters { position: static; }
  .finder-hero__title { font-size: 1.7rem; }

  .product-title { font-size: 24px; }
  .product-price { font-size: 28px; }
  .about-fgf-heading { font-size: 22px; }

  .product-disclaimer, .product-disclaimer::before { font-size: 10px; }

  /* Sticky ATC bar — bottom on mobile */
  .sticky-atc {
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    padding: 12px 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  }
  .sticky-atc.visible { transform: translateY(0); }
  .sticky-atc__name { display: none; }
  .sticky-atc__price { font-size: 16px; }
  .sticky-atc__btn { flex: 1; justify-content: center; padding: 11px 16px; font-size: 15px; }
  .product-page { padding-bottom: 80px; }
}

/* ============================================================
   SMALL MOBILE (≤ 480px)
============================================================ */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .product-card__footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .product-card__footer .btn { width: 100%; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .slider__title { font-size: 1.3rem; }
  .slider { height: 260px; }
  .about-snippet__badges { grid-template-columns: 1fr 1fr; }
  .error-page__code { font-size: 4rem; }
}

/* ============================================================
   VERY SMALL (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER GRID — SMALL BREAKPOINTS
============================================================ */
@media (max-width: 600px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .footer__inner { grid-template-columns: 1fr; }
}