/* =====================================================================
   DONUTSMP SHOP — RESPONSIVE
   Breakpoints: 1100px (laptop/tablet-landscape), 860px (tablet),
   640px (mobile), 400px (small mobile)
   ===================================================================== */

/* ---------------------------------------------------------------------
   ≤ 1100px — laptop / tablet landscape
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --container-w: 960px;
  }

  .products__grid,
  .categories__grid,
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    row-gap: 36px;
  }

  .navbar__search {
    width: 170px;
  }

  .navbar__search:focus-within {
    width: 200px;
  }
}

/* ---------------------------------------------------------------------
   ≤ 860px — tablet
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  section {
    padding: 70px 0;
  }

  .navbar__links,
  .navbar__search {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .products__grid,
  .categories__grid,
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }

  .reviews__track-wrap::before,
  .reviews__track-wrap::after {
    width: 30px;
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }

  .discord__panel {
    flex-direction: column;
    text-align: center;
    padding: 40px 28px;
  }

  .discord__stats {
    justify-content: center;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    padding: 96px 0 70px;
  }

  .newsletter__panel {
    padding: 38px 26px;
  }
}

/* ---------------------------------------------------------------------
   ≤ 640px — mobile
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }

  section {
    padding: 56px 0;
  }

  .hero__title {
    font-size: clamp(32px, 9vw, 44px);
  }

  .hero__subtitle {
    font-size: 15.5px;
  }

  .hero__cta {
    width: 100%;
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__trust {
    gap: 12px 18px;
  }

  .products__grid,
  .categories__grid,
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    padding: 20px 14px;
  }

  .product-card__body {
    padding: 14px;
  }

  .product-card__actions {
    flex-direction: column;
  }

  .product-card__actions .btn-icon {
    width: 100%;
    height: 38px;
    border-radius: var(--r-sm);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 30px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-drawer,
  .mobile-menu__panel {
    width: 100vw;
  }

  .cookie-popup {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .back-to-top {
    bottom: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
  }

  .discord__stats {
    flex-wrap: wrap;
    gap: 14px 22px;
  }
}

/* ---------------------------------------------------------------------
   ≤ 400px — small mobile
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  .products__grid,
  .categories__grid,
  .features__grid,
  .stats__grid,
  .footer__top {
    grid-template-columns: 1fr;
  }

  .navbar__logo-text {
    font-size: 15px;
  }

  .newsletter__form {
    flex-direction: column;
  }
}