/* Responsive overrides — desktop > tablet > mobile */

@media (max-width: 1080px) {
  .container { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .footer-grid .col-legal { grid-column: 2 / 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-art { max-width: 520px; margin: 0 auto; overflow: hidden; }
  .how-grid { grid-template-columns: 1fr; }
  .how-grid::before { display: none; }
  .seller-banner { grid-template-columns: 1fr; padding: 40px; }
  .phone-mock { width: 220px; }
  .pdp { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .col-legal { grid-column: auto; display: contents; }
}

@media (max-width: 720px) {
  .container { padding: 0 18px; }
  .header-row { flex-wrap: wrap; gap: 12px; }
  /* Compact mobile header: small "E" mark + search bar sharing one row,
     "Vendors Live Here" and "Become a Vendor" dropped entirely so there's
     room for both without wrapping. */
  .brand-logo-full { display: none; }
  .brand .brand-logo-compact { display: block; }
  .vendors-online, .become-vendor-btn { display: none; }
  .header-search {
    order: 0; width: auto; flex: 1;
    padding: 5px 5px 5px 12px; gap: 6px;
  }
  .header-search .icon { width: 15px; height: 15px; }
  .header-search input { font-size: 13px; }
  .header-search .search-btn { width: 30px; height: 30px; }
  .header-search .country { padding: 4px 7px; font-size: 12px; }
  /* Country code text hidden on mobile — flag alone is enough, and the
     bar is already tight on room. */
  .header-search .country-code { display: none; }
  /* Report Product hidden from the Posted/Views row on mobile — full-
     width there read as centered (buttons default to centered text) and
     too prominent, like the report action was being encouraged rather
     than just available. Small link near Share instead (see
     .pdp-report-mobile in components.css / item.handlebars). */
  .pdp-item-stats .report-link { display: none; }
  .pdp-report-mobile { display: inline-block; }
  .pdp-wa-note-full { display: none; }
  .pdp-wa-note-short { display: inline; }
  /* WhatsApp CTA ~30% taller on mobile. */
  .wa-big { padding-top: 11px; padding-bottom: 11px; }
  /* Seller card moves to the top of the page on mobile, matching the old
     site's layout — swap which of the two renders. */
  #pdpSellerCardDesktop { display: none; }
  .pdp-seller-card-mobile { display: block; }
  /* Verified vendor pill green on mobile instead of the web view's blue. */
  .shop-verified { background: rgba(37, 211, 102, 0.14); color: var(--accent-green-deep); }
  .shop-verified-mark { background: var(--accent-green-deep); }
  /* /shop hero: swap the desktop fused-map card for the mobile stacked
     version (info on top, map below) — the desktop card's right-anchored
     map doesn't have room to fade at phone widths and renders straight
     over the text otherwise. */
  #shopIdentityDesktop { display: none; }
  .shop-identity-mobile { display: block; }
  /* /shop product grid — 2 per row, matching the PDP related-products
     treatment. Scoped to .shop-products .product-grid (specificity 0,2,0)
     so it beats the 460px breakpoint's bare .product-grid rule below
     regardless of source order, without needing a duplicate override
     there (unlike .related-stack, which ties on specificity). */
  .shop-products .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* /shop mobile hero actions: only Visit Website + Chat on WhatsApp are
     useful one-tap actions on a phone — Call Shop drops out, and the
     remaining two stack full-width (~30% shorter than the desktop
     buttons), WhatsApp last since it's the primary action. */
  .shop-identity-mobile .shop-actions { flex-direction: column; }
  .shop-identity-mobile .shop-actions .btn { padding: 8px 20px; width: 100%; justify-content: center; }
  .shop-identity-mobile .shop-actions .btn-outline { display: none; }
  /* /shop "Browse by Category" dropped on mobile — the compact stacked
     hero + 2-up product grid already fill the page well without it. */
  #shopCategoriesSection { display: none; }
  /* PDP gallery: swap the thumbnail strip for swipeable dots — there's no
     room for a separate preview column on a phone-width screen. */
  .gallery { grid-template-columns: 1fr; }
  .thumbs { display: none; }
  .gallery-dots { display: flex; }
  .pdp-gallery-foot { grid-column: 1; }
  /* PDP "Browse other products" — 2 cards per row, wrapping down the
     page (vertical scroll, no swipe), scoped to .related-stack so
     marketplace/category/etc. keep .product-grid's own behavior. */
  .related-stack { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero { padding: 20px 0 48px; }
  .hero-art { overflow: hidden; }
  .hero h1 { font-size: 34px; }
  section.block { padding: 56px 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-card .body { padding: 12px; }
  .product-card .price { font-size: 15px; }
  .product-card .wa-cta { padding: 6px 10px; font-size: 11px; }
  .float-card { padding: 8px; }
  .float-card .thumb { width: 36px; height: 36px; }
  .float-card.fc-1 { top: 2%; left: 0%; }
  .float-card.fc-2 { top: 14%; right: 0%; }
  .float-card.fc-3 { bottom: 14%; left: 0%; }
  .float-card.fc-4 { bottom: 0%; right: 0%; }
  .chat-bubble { width: 160px; left: 0%; top: 24%; }
  .float-pill { font-size: 11px; padding: 6px 10px; }
  .float-pill.verified { top: 0%; right: 6%; }
  .float-pill.wa { right: 0%; bottom: 28%; }
  .float-pill.reply { left: 6%; bottom: 0%; }

  .seller-banner { padding: 28px; border-radius: 28px; }
  .sellar-banner .ctas{ padding: 12px 20px; font-size: 14px;}
  .cta-phone{ display: none;}
  .qr-bundle { flex-direction: column; align-items: center; padding-bottom: 20px; }
  .app-badges{ flex-direction: row;
  }
  .phone-mock { width: 200px; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-bottom { flex-direction: column; gap: 8px; }

  .gallery { grid-template-columns: 1fr; }
  .thumbs { flex-direction: row; overflow-x: auto; }
  .thumbs button { flex: 0 0 80px; width: 80px; }

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

@media (max-width: 460px) {
  .product-grid { grid-template-columns: 1fr; }
  .safety { grid-template-columns: 1fr; }
  /* .related-stack also carries the .product-grid class, so without this
     override, the single-column rule above wins the specificity tie at
     the very widths (<460px) covering most phones — precisely where the
     "one product filling the screen" bug was showing up. */
  .related-stack { grid-template-columns: repeat(2, 1fr); }
}