/**
 * Ira Wear — Responsive Breakpoints (v3.0 — Elementor Build)
 *
 * Elementor handles its own responsive layout via its built-in breakpoints.
 * This file only covers:
 *   1. WooCommerce product grid responsive overrides
 *   2. Announcement bar mobile sizing
 *   3. Touch target minimums
 *   4. Print styles
 */

/* ══════════════════════════════════════════════════════════
   MOBILE (max-width: 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .ira-announcement-bar {
    font-size: 11px;
    padding: 8px 12px;
  }

  /* WooCommerce: 1 column on small screens */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }

  .woocommerce ul.products li.product {
    width: 100% !important;
  }

  /* Single product: stack image and details */
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float: none;
    width: 100%;
  }

  .site-footer .widget-area {
    flex-direction: column;
  }

  /* Home page: hero section */
  .ira-hero h1 {
    font-size: 28px !important;
  }

  .ira-hero p {
    font-size: 14px !important;
  }

  /* Home page: section headings */
  .ira-page-section h2,
  .elementor-widget-heading .elementor-heading-title {
    font-size: 24px !important;
  }

  /* Contact page: stack layout */
  .ira-page-section > div[style*="display:flex"] {
    flex-direction: column !important;
  }

  .ira-page-section > div[style*="display:flex"] > div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* Single product: quantity + add to cart */
  .woocommerce div.product form.cart {
    flex-wrap: wrap;
  }

  .woocommerce div.product form.cart .quantity {
    margin-bottom: 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   TABLET (max-width: 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* WooCommerce: 2 columns */
  .woocommerce ul.products[class*="columns-"],
  .woocommerce-page ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .woocommerce ul.products li.product {
    width: 48% !important;
  }

  /* Footer: stack to 2 columns */
  .footer-widget-area.footer-three-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Checkout: full-width form */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  /* Home page: hero buttons stack */
  .ira-hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* Home page: occasion cards 2-col */
  .ira-page-section div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Testimonials: stack */
  .ira-testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   TABLET LANDSCAPE (max-width: 1024px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Cart layout */
  .woocommerce-cart .cart-collaterals {
    width: 100%;
    float: none;
  }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP (min-width: 1200px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  .ast-container,
  .site-content .ast-container {
    max-width: 1200px;
  }
}

/* ══════════════════════════════════════════════════════════
   TOUCH TARGETS — minimum 44x44px for interactive elements
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  button,
  .button,
  a.button,
  input[type="submit"],
  .woocommerce ul.products li.product .button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Mobile hamburger menu */
  .ast-mobile-menu-trigger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════════════════ */
@media print {
  .ira-announcement-bar,
  .ast-desktop-header,
  .site-footer,
  .woocommerce-tabs,
  .ira-whatsapp-float {
    display: none;
  }
}