/* responsive.css — split from the storefront stylesheet, same rules and order */
/* Compact product cards on phones so more of the shop fits on screen */
@media (max-width: 767.98px) {
  .product-grid.row {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
  }

  .product-grid > .col,
  .nm-product-slot {
    min-width: 0;
  }

  .product-grid.row-cols-1 > .col,
  .product-grid.row-cols-sm-2 > .col {
    flex: 0 0 auto;
    width: 50%;
  }

  .nm-products-grid,
  .nm-products-five .nm-products-grid,
  .nm-products-four .nm-products-grid,
  .nm-products-three .nm-products-grid,
  .nm-products-two .nm-products-grid,
  .nm-products-rail .nm-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .product-item {
    padding: 8px 8px 10px;
    border-radius: 8px;
  }

  .product-item.nm-shelf-product,
  .nm-shelf-product {
    padding: 6px 6px 8px;
  }

  .product-item figure,
  .product-item.nm-shelf-product figure {
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #f7f8f6;
  }

  .product-item figure a {
    inset: 2px;
  }

  .product-item h3,
  .nm-shelf-product h3 {
    min-height: 2.5em;
    margin-bottom: 2px;
    font-size: .74rem !important;
    line-height: 1.25;
  }

  .product-item .rating svg {
    width: 11px;
    height: 11px;
  }

  .product-item .rating + span,
  .product-item del,
  .product-item .badge {
    font-size: .72rem;
  }

  .product-item .fw-semibold,
  .nm-cat-meta {
    font-size: .92rem;
  }

  .container,
  .container-lg,
  .container-fluid,
  .container-md,
  .container-sm {
    padding-right: 12px;
    padding-left: 12px;
  }

  .row {
    --bs-gutter-x: 1.5rem;
  }

  .product-item .btn-cart,
  .nm-shelf-product .btn-cart {
    gap: 4px;
    padding: 6px 4px !important;
    font-size: .68rem;
  }

  .product-item .btn-cart svg,
  .nm-shelf-product .btn-cart svg {
    width: 14px;
    height: 14px;
  }

  .category-carousel img.rounded-circle {
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  .category-carousel .category-title {
    margin-top: 8px !important;
    font-size: .75rem !important;
  }

  .nm-product-shelf {
    padding: 18px 0;
  }

  .nm-product-shelf .section-title,
  .section-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .nm-hero-swiper img {
    height: 148px;
  }

  .category-carousel img.rounded-circle {
    width: 68px;
    height: 68px;
  }
}

.product-item .text-center {
  min-width: 0;
  max-width: 100%;
}

.product-item .text-center > .d-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  gap: 2px 6px !important;
}

.product-item .text-center > .d-flex > del,
.product-item .text-center > .d-flex > .badge {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-item .text-center > .d-flex > del {
  color: #8d8d8d;
}

.product-item .text-center > .d-flex > .fw-semibold {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-item .text-center > .d-flex > .badge {
  padding: 2px 5px !important;
  font-size: 0.68rem !important;
  line-height: 1.2;
}

.nm-delivery {
  overflow: hidden;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.nm-delivery video {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 35%;
}

@media (min-width: 768px) {
  .nm-delivery video {
    height: 280px;
  }
}

.nm-site-footer .footer-menu img {
  max-width: 100%;
  height: auto;
}

.nm-features {
  display: block;
  width: 100%;
  height: auto;
}

.nm-promo {
  padding: 6px 0 18px;
}

.nm-promo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .nm-site-footer {
    padding-top: 1.5rem !important;
    padding-bottom: 1.25rem !important;
  }

  .nm-site-footer .row > div {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .nm-site-footer .row > div:first-child,
  .nm-site-footer .row > div:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .nm-site-footer .footer-menu {
    margin-bottom: 1rem;
  }

  .nm-site-footer .footer-menu img {
    width: 150px;
    height: auto;
  }

  .nm-site-footer .social-links .btn {
    padding: 6px 8px;
  }

  section.py-5 .card {
    padding: 10px !important;
  }

  section.py-5 .card svg {
    width: 24px;
    height: 24px;
  }

  section.py-5 .card h5 {
    font-size: .9rem;
  }

  section.py-5 .card .card-text {
    font-size: .78rem;
    line-height: 1.35;
  }
}