/* ── Body: padding for mobile bottom nav ── */
@media (max-width: 991px) {
  body { padding-bottom: 60px; }
}

/* ── Hero ── */
/* Mobile: height 65vw min 280px */
/* Desktop: height 90vh max 820px */

/* ── Font sizes: clamp() on all headings ── */
h1 { font-size: clamp(1.6rem, 5vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.6rem); }

/* ── Product card: compact on mobile ── */
@media (max-width: 575px) {
  .product-card .card-body { padding: 0.75rem; }
  .product-card h6 { font-size: 0.82rem; }
}

/* ── Shop sidebar ── */
/* Hidden on mobile, shown as offcanvas */
/* Fixed 260px on lg+ */

/* ── Checkout ── */
/* 1-col on mobile, 2-col on lg+ */
/* Sticky order summary only on lg+ */

/* ── Cart: table on desktop, cards on mobile ── */
@media (max-width: 767px) {
  .woocommerce-cart-form { display: none; }
  .cart-mobile-items { display: block; }
}
@media (min-width: 768px) {
  .cart-mobile-items { display: none; }
}

/* ── Footer: 1-col mobile, 2-col tablet, 4-col desktop ── */
/* Already handled by Bootstrap row-cols classes */

/* ── Form inputs: 16px min on mobile (no iOS zoom) ── */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Touch targets ── */
.btn-large, .btn-primary { min-height: 44px; }

/* ── Horizontal product rows: scroll snap ── */
.product-row-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-row-scroll > * { scroll-snap-align: start; }