/* ═══════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════ */
  @media (max-width: 1200px) {
      .product-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 900px) {
      .product-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .detail-hero,
      .detail-lower {
          grid-template-columns: 1fr;
      }

      .detail-title {
          font-size: 26px;
      }

      .carousel-wrap {
          aspect-ratio: 16/11;
      }

      .detail-lower {
          gap: 28px;
      }

      .usp-stack {
          flex-direction: row;
          flex-wrap: wrap;
      }

      .usp-card {
          flex: 1;
          min-width: 140px;
      }
  }

  @media (max-width: 640px) {

      /* hide desktop, show mobile */
      .site-header {
          display: none;
      }

      .site-footer .footer-inner {
          display: none;
      }

      .site-footer .footer-bottom {
          display: none;
      }

      .mobile-header {
          display: flex;
      }

      .mobile-filter-strip {
          display: flex;
      }

      .mobile-fab {
          display: flex;
      }

      .mobile-nav-drawer {
          display: block;
      }

      .mobile-footer {
          display: block;
      }

      .scroll-top {
          bottom: 90px;
          right: 21px;
          width: 50px;
          height: 50px;
      }

      .home-main {
          padding: 16px 12px;
      }

      .controls-row {
          display: none;
      }

      .product-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
      }

      .detail-main {
          padding: 16px 14px;
      }

      .back-btn {
          margin-bottom: 18px;
      }

      .detail-hero {
          gap: 20px;
          margin-bottom: 28px;
      }

      .carousel-wrap {
          aspect-ratio: 4/3;
          border-radius: var(--radius-sm);
      }

      .carousel-btn {
          width: 32px;
          height: 32px;
      }

      .detail-title {
          font-size: 22px;
      }

      .detail-price {
          font-size: 22px;
      }

      .detail-lower {
          gap: 20px;
          margin-bottom: 28px;
      }

      .usp-stack {
          flex-direction: column;
      }

      .purchase-section {
          padding: 22px 16px;
          margin-bottom: 28px;
      }

      .purchase-buttons {
          flex-direction: column;
      }

      .buy-btn {
          justify-content: center;
      }

      .footer-inner {
          grid-template-columns: 1fr;
          gap: 28px;
          padding: 40px 20px;
      }

      .footer-bottom {
          padding: 16px 20px;
          flex-direction: column;
          gap: 4px;
          text-align: center;
      }

  }