/*
 * Poupou Comprou — Responsive Overrides
 *
 * Additional media queries for components that need
 * specific breakpoint handling beyond Tailwind utilities.
 */

/* ── Mobile: Bottom Nav Padding ── */
@media (max-width: 767px) {
  body {
    padding-bottom: 5rem; /* Space for bottom nav bar */
  }

  .site-main {
    padding-bottom: 1rem;
  }
}

/* ── Mobile: Hero adjustments ── */
@media (max-width: 640px) {
  .hero-section h1 {
    font-size: 2rem;
  }
}

/* ── Tablet: Grid adjustments ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Desktop: Full footer grid ── */
@media (min-width: 1024px) {
  footer .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Print ── */
@media print {
  header,
  footer,
  .bottom-nav,
  .search-form,
  .newsletter-section {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}