/* === Sticky add-to-cart bar on mobile product pages === */
@media (max-width: 768px) {
  body.single-product { padding-bottom: 72px; } /* room for the sticky bar */

  .tm-mobile-buybar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid #ddd;
    padding: 10px 12px;
    display: flex; gap: 10px; align-items: center;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    z-index: 9998;
  }
  .tm-mobile-buybar .tm-bb-price {
    flex: 1; font-weight: 700; font-size: 18px; color: #c0392b; line-height: 1.1;
  }
  .tm-mobile-buybar .tm-bb-price s { color: #888; font-weight: 400; font-size: 13px; display: block; }
  .tm-mobile-buybar .tm-bb-cta {
    background: #c0392b; color: #fff; font-weight: 700; font-size: 15px;
    padding: 14px 22px; border-radius: 4px; text-transform: uppercase; text-decoration: none;
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* Hide the original add-to-cart visually when the sticky one is showing (keep it clickable for fallback) */
  .single-product .single_add_to_cart_button { /* keep visible too -- redundancy is fine on the in-page form */ }
}

/* === Tap targets: enforce 44x44 on key actions site-wide === */
.search-field, input[name="s"] {
  min-height: 44px;
  font-size: 16px !important; /* iOS Safari avoids zoom-on-focus when font-size >= 16px */
}
.cart-link, .header-icon, .top-bar a, .menu-link {
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* === Mobile menu smoothness === */
@media (max-width: 768px) {
  .off-canvas-wrap, .offcanvas-mobile-menu {
    will-change: transform;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important;
  }
  /* Disable expensive box-shadows during slide */
  .offcanvas-sliding .off-canvas-wrap { box-shadow: none !important; }
}

/* === Mobile search input full-width on focus === */
@media (max-width: 768px) {
  .search-field:focus { font-size: 16px !important; }
}

/* === Reduce CLS: reserve space for product image === */
.product .wp-post-image, .product img.attachment-woocommerce_thumbnail {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fafafa;
}