/**
 * Homepage — mobile, tablet, and desktop (real viewports).
 * Mirrors builder preview rules in store-builder-device-preview.css for live site.
 */

.home-page {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

/* ── Mobile (≤767px) ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-page {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .home-page #live-order-popup {
    bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .home-page .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #hero-section .lg\:flex-row {
    flex-direction: column;
    align-items: stretch;
  }

  #hero-section .hidden.lg\:block {
    display: none !important;
  }

  #hero-section .lg\:hidden {
    display: block !important;
  }

  #hero-section h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }

  #hero-section .lg\:text-right {
    text-align: center;
  }

  #hero-section .lg\:justify-start,
  #hero-section .sm\:justify-start {
    justify-content: center;
  }

  #hero-section .sm\:flex-row {
    flex-direction: column;
    width: 100%;
  }

  #hero-section .sm\:w-auto {
    width: 100%;
  }

  #hero-section .lg\:mr-0 {
    margin-inline: auto;
  }

  #trust .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #featured {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  #featured .store-section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  }

  #featured .mb-5.md\:mb-6 {
    text-align: center;
  }

  #featured .featured-view-all--desktop {
    display: none !important;
  }

  #featured .featured-carousel-track {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #flash-deals .flash-deals-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  #flash-deals .flash-deals-countdown-wrap {
    width: 100%;
    justify-content: center;
  }

  #flash-deals .flash-deals-unit {
    height: 2.75rem;
    width: 2.75rem;
    font-size: 1.125rem;
  }

  #flash-deals .flash-deals-grid {
    gap: 0.75rem;
  }

  #flash-deals .flash-deals-grid .product-card-premium h3 {
    font-size: 0.8rem;
  }

  #flash-deals .flash-deals-grid .store-sb-card-price-sale {
    font-size: 1rem;
  }

  .home-page section .grid.grid-cols-1.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .home-page .overflow-hidden.bg-canvas section .lg\:flex-row,
  .home-page .overflow-hidden.bg-canvas section .lg\:flex-row-reverse {
    flex-direction: column;
    gap: 1.5rem;
  }

  .home-page .overflow-hidden.bg-canvas section .lg\:text-right {
    text-align: center;
  }

  .home-page section .lg\:flex-row,
  .home-page section .lg\:flex-row-reverse {
    flex-direction: column;
    gap: 1.5rem;
  }

  .home-page section .lg\:text-right {
    text-align: center;
  }

  .home-page .md\:grid-cols-3,
  .home-page .md\:grid-cols-2:not(.flash-deals-grid) {
    grid-template-columns: 1fr;
  }

  .home-page .lg\:grid-cols-4:not(.flash-deals-grid),
  .home-page .md\:grid-cols-4:not(.flash-deals-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .home-page .store-benefits-track {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    gap: 1rem;
  }

  .home-page .store-benefits-track .bento-item {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .home-page .sm\:columns-2,
  .home-page .lg\:columns-3 {
    columns: 1;
  }

  .home-page section .md\:flex-row {
    flex-direction: column;
    align-items: stretch;
  }

  .home-page section .md\:flex-row > .shrink-0 {
    width: 100%;
    justify-content: center;
  }

  #promotions .md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  #promotions .order-1,
  #promotions .order-2 {
    order: unset;
  }

  #promotions .aspect-square {
    max-width: 100%;
  }

  #promotions h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  #promotions .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .home-page .product-card-premium,
  .home-page .store-sb-cat-card {
    min-width: 0;
  }

  .home-page .store-final-cta-title,
  .home-page .md\:text-7xl {
    font-size: 1.65rem;
    line-height: 1.2;
  }

  .home-page .store-final-cta-btn {
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
  }

  .home-page .md\:text-5xl {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .home-page .md\:text-4xl,
  .home-page .lg\:text-5xl {
    font-size: 1.5rem;
  }

  .home-page .rounded-\[3rem\] {
    border-radius: 1.5rem;
    padding: 1.25rem;
  }
}

/* ── Tablet (768px–1023px) ───────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-section .lg\:flex-row {
    flex-direction: column;
  }

  #hero-section .hidden.lg\:block {
    display: none !important;
  }

  #hero-section .lg\:hidden {
    display: block !important;
  }

  #flash-deals .flash-deals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .lg\:grid-cols-4:not(.flash-deals-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .sm\:columns-2,
  .home-page .lg\:columns-3 {
    columns: 2;
  }

  .home-page .store-benefits-track {
    display: flex;
    overflow-x: auto;
  }
}

/* ── Desktop (≥1024px) ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .home-page .container {
    max-width: 80rem;
  }

  #featured .featured-view-all--mobile {
    display: none !important;
  }

  #featured .featured-carousel-track {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #flash-deals .flash-deals-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #hero-section .lg\:hidden {
    display: none !important;
  }

  #hero-section .hidden.lg\:block {
    display: block !important;
  }

  #promotions .order-2.md\:order-1 {
    order: 1;
  }

  #promotions .order-1.md\:order-2 {
    order: 2;
  }

  #promotions .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .home-page .product-card-premium .mobile-cta-bar {
    display: flex;
  }

  .home-page .product-card-premium .desktop-hover-bar {
    display: none;
  }

  .home-page .product-card-premium:hover {
    transform: none;
  }
}