/* Phone layout fixes. The same file is used by every storefront copy: it only
   uses the colour tokens from style.css, so each site keeps its own palette. */

@media (max-width: 720px) {
  /* Product rows: one comfortable card plus a peek of the next, instead of
     every card shrinking to its 200px minimum. */
  .product-row { grid-auto-columns: min(78%, 300px); gap: 12px; }
  .row-head { align-items: flex-end; gap: 12px; }
  .row-head .section-title { font-size: 1.3rem; }
  .show-more { white-space: nowrap; font-size: 0.92rem; }

  /* Tighter vertical rhythm so sections don't feel stretched. */
  .section { padding-block: 44px; }
  .section-tight { padding-block: 24px; }
  .section-head { margin-bottom: 22px; }
  .section-title { font-size: 1.45rem; }
  .section-subtitle { font-size: 0.98rem; }
  .hero { padding-block: 36px 44px; }
  .hero h1 { font-size: 1.85rem; margin: 14px 0 10px; }
  .hero-subtitle { font-size: 1rem; margin-bottom: 22px; }
  .trust-list { margin-top: 22px; gap: 8px 16px; font-size: 0.88rem; }
  .page-hero { padding-block: 32px; }
  .page-title { font-size: 1.7rem; }

  /* Cards: readable text, buttons that don't wrap awkwardly. */
  .card-body { padding: 14px; }
  .card-title { font-size: 1.02rem; }
  .duration-pill { font-size: 0.85rem; padding: 6px 12px; }
  .product-card .btn { font-size: 0.95rem; padding-block: 11px; white-space: nowrap; }
  .bf-big-discount { font-size: 0.9rem; }

  /* Product page */
  .detail-media { max-width: none; }
  .detail-title { font-size: 1.5rem; }
  .detail-actions .btn { width: 100%; }
  .detail-note { padding: 14px; }

  /* Shop toolbar: search on its own line, sort below it. */
  .shop-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .shop-toolbar select { width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* FAQ and steps */
  .faq-item summary { font-size: 0.98rem; padding-block: 14px; }
  .step { padding: 20px; }

  /* Footer: centred, comfortable tap targets. */
  .site-footer { text-align: start; }
  .footer-links li a { display: inline-block; padding-block: 4px; }
  .contact-block .btn { width: 100%; justify-content: center; }

  /* Black Friday block */
  .bf-section { padding-block: 32px 40px; }
  .bf-title { font-size: 1.45rem; margin-bottom: 14px; }
  .bf-flip { gap: 10px; }
  .bf-flip-card { width: 84px; height: 108px; font-size: 4.6rem; border-radius: 14px; }
  .bf-days { font-size: 1.6rem; margin-top: 14px; }
  .bf-subtitle { font-size: 0.98rem; margin-bottom: 20px; }
  .bf-plan { padding: 14px 12px; }
  .bf-plan-price { font-size: 1.65rem; }
  .bf-plan.is-featured .bf-plan-price { font-size: 2rem; }
  .bf-gifts { font-size: 0.92rem; line-height: 1.7; }
  .bf-cta { width: 100%; max-width: 360px; justify-content: center; }
}

@media (max-width: 480px) {
  /* Countdown strip on one line: drop the sentence, keep tag + timer. */
  #bf-bar-title { display: none; }
  .bf-bar-inner { flex-wrap: nowrap; padding-block: 6px; font-size: 0.85rem; }

  .header-inner { min-height: 60px; }
  .whatsapp-float { inset-block-end: 14px; inset-inline-end: 14px; }
}

@media (max-width: 360px) {
  .container { padding-inline: 12px; }
  .bf-flip-card { width: 74px; height: 96px; font-size: 4rem; }
  .bf-plan-price { font-size: 1.5rem; }
  .hero h1 { font-size: 1.6rem; }
}