/* ============================================================
   MF Livros e Cursos — Responsividade
   Desktop First + Mobile Optimization
   ============================================================ */

/* ---------- <= 1200px ---------- */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-coupon { display: none; }
}

/* ---------- <= 1024px (tablet) ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .track-link span { display: none; }
  .track-link { padding: 10px; }
  .hero-content { max-width: 560px; }
  .hero-overlay { background: linear-gradient(180deg, rgba(23,22,20,0.50) 0%, rgba(23,22,20,0.60) 50%, rgba(23,22,20,0.85) 100%); }

  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .mf-grid { grid-template-columns: 1fr; gap: 40px; }
  .mf-media { max-width: 420px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pd-layout { grid-template-columns: 1fr; gap: 34px; }
  .pd-media { position: static; }

  .modal { max-width: 720px; }
  .hero { min-height: min(72vh, 620px); }
}

/* ---------- <= 900px ---------- */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .pay-methods { grid-template-columns: 1fr 1fr 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-content { padding: 76px 0; }
}

/* ---------- <= 640px (mobile) ---------- */
@media (max-width: 640px) {
  :root { --header-h: 62px; }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .header-inner { gap: 12px; }
  .logo img { height: 38px; }
  .logo-name { font-size: 18px; margin-left: 8px; }
  .track-link { display: none; }
  .header-actions { gap: 2px; }
  .user-dropdown-btn span { display: none; }
  .user-dropdown-menu { min-width: 160px; }

  .hero { min-height: 76vh; align-items: flex-end; }
  .hero-slide img { object-position: 40% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(23,22,20,0.35) 0%, rgba(23,22,20,0.55) 45%, rgba(23,22,20,0.92) 100%); }
  .hero-content { padding: 54px 0 40px; max-width: 100%; }
  .hero h1 { font-size: clamp(26px, 8.6vw, 38px); }
  .hero p.lead { font-size: 15.5px; }
  .hero-actions { gap: 10px; }
  .hero-scroll { display: none; }
  .hero-coupon { display: none; }

  .coupon-strip .container { gap: 10px; flex-direction: column; text-align: center; }
  .cats-row { grid-auto-columns: 132px; gap: 12px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-body { padding: 13px 13px 16px; }
  .product-title { font-size: 16px; }
  .product-desc { display: none; }
  .product-quick { display: none; }
  .product-price .now { font-size: 16.5px; }
  .product-price .old { font-size: 11.5px; }
  .add-btn { width: 40px; height: 40px; }
  .product-badge { font-size: 10px; padding: 5px 9px; top: 10px; left: 10px; }

  .modal { grid-template-columns: 1fr; max-height: 92vh; }
  .modal-media img { min-height: 0; aspect-ratio: 1; object-fit: cover; object-position: top center; }
  .modal-body { padding: 26px 22px; }
  .modal-body h3 { font-size: 24px; }

  .mobile-cart-bar { display: block; }
  body.cart-bar-active { padding-bottom: 76px; }

  .cart-drawer { width: 100vw; }
  .floating-cart-fab { right: 16px; bottom: 92px; width: 50px; height: 50px; }
  .floating-cart-fab svg { width: 22px; height: 22px; }
  .whatsapp-float { right: 14px; bottom: 150px; width: 52px; height: 52px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .site-footer { padding-top: 56px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .steps { gap: 0; }
  .step-label { display: none; }
  .step-line { width: 28px; margin: 0 6px; }

  .checkout-card { padding: 24px 20px; }
  .checkout-layout { flex-direction: column; }
  .checkout-sidebar { width: 100%; position: static; }
  .checkout-sidebar-inner { padding: 16px; }
  .field-grid { grid-template-columns: 1fr; }
  .pay-methods { grid-template-columns: 1fr; }
  .pay-card-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  .mf-educ { padding: 64px 0; }
  .mf-media img { aspect-ratio: 4/4.8; }
  .strip { padding: 34px 26px; flex-direction: column; align-items: flex-start; }
  .strip .btn { width: 100%; justify-content: center; }

  .contact-cards { grid-template-columns: 1fr; }
  .page-hero { padding: 60px 0 48px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .filter-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; width: 100%; min-width: 0; }
  .pill { white-space: nowrap; }
  .sort-select { width: 100%; }

  .pd-layout { gap: 26px; }
  .pd-info h1 { font-size: 28px; }
  .pd-price .now { font-size: 28px; }

  .track-form { flex-direction: column; }
  .track-form .btn { width: 100%; }
  .track-card { padding: 24px 20px; }

  .toast-wrap { bottom: 96px; width: 100%; padding: 0 16px; }
  .toast { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- <= 380px (small phones) ---------- */
@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-title { font-size: 14.5px; }
  .product-price .now { font-size: 15px; }
  .add-btn { width: 36px; height: 36px; }
  .modal-cta { flex-direction: column; }
  .modal-cta .btn { width: 100%; }
  .qty-row { flex-wrap: wrap; }
}

/* ---------- Tall + narrow landscape safety ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 90px 0; }
  .mobile-nav { overflow-y: auto; }
}

/* ---------- Print (checkout receipt feel) ---------- */
@media print {
  .site-header, .site-footer, .whatsapp-float, .mobile-cart-bar, .form-actions, .toast-wrap { display: none !important; }
  body { background: #fff; }
}

/* ---------- Search Panel mobile ---------- */
@media (max-width: 640px) {
  .search-panel { padding-top: 60px; }
  .search-panel-head { max-width: 100%; padding: 0 12px; }
  .search-panel-results { max-width: 100%; padding: 8px 12px; }
  .search-panel-item img { width: 40px; height: 54px; }
  .search-panel-item-title { font-size: 13px; }
}

/* ---------- Lightbox mobile ---------- */
@media (max-width: 640px) {
  .lightbox-img-wrap {
    width: calc(100vw - 40px);
    height: calc(100vw - 40px);
    max-width: 600px;
    max-height: 600px;
    padding: 10px;
  }
  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
  }
  .lightbox-prev svg,
  .lightbox-next svg {
    width: 22px;
    height: 22px;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }
  .lightbox-close svg {
    width: 20px;
    height: 20px;
  }
}