/* =============================================================
   VOLTIO GADGETS — Responsive / Media Queries
   ============================================================= */

/* ─────────────────────────────────────────────
   BREAKPOINTS
   xl:  1280px  (desktop wide)
   lg:  1024px  (desktop)
   md:   768px  (tablet)
   sm:   480px  (mobile)
───────────────────────────────────────────── */

/* ── xl — Large desktop (max 1440px) ── */
@media (max-width: 1440px) {
  .vg-hero {
    padding: var(--vg-space-16) var(--vg-space-12);
  }
}

/* ── lg — Desktop/Tablet landscape (max 1024px) ── */
@media (max-width: 1024px) {
  /* Hero */
  .vg-hero {
    grid-template-columns: 1fr 1fr;
    gap:     var(--vg-space-8);
    padding: var(--vg-space-12) var(--vg-space-8);
    min-height: 80vh;
  }

  /* Shop: 2 col productos */
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Shop layout: sidebar arriba */
  .woocommerce-page .woocommerce {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topbar"
      "sidebar"
      "products"
      "pagination" !important;
  }

  .woocommerce-page .woocommerce .widget_area {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--vg-space-4) !important;
  }

  /* Footer grid */
  .vg-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Categorías: 2 col */
  .vg-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Producto: stack */
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "gallery"
      "summary"
      "tabs"
      "related" !important;
  }

  .woocommerce div.product div.images {
    position: static !important;
  }
}

/* ── md — Tablet portrait (max 768px) ── */
@media (max-width: 768px) {
  /* Container */
  .vg-container {
    padding: 0 var(--vg-space-4);
  }

  /* Hero: stack vertical */
  .vg-hero {
    grid-template-columns: 1fr;
    padding:   var(--vg-space-10) var(--vg-space-5);
    min-height: auto;
    text-align: center;
    gap:       var(--vg-space-8);
  }

  .vg-hero::before,
  .vg-hero::after {
    display: none;
  }

  .vg-hero__content {
    align-items: center;
    order: 2;
  }

  .vg-hero__image {
    order: 1;
  }

  .vg-eyebrow {
    justify-content: center;
  }

  .vg-hero__subtitle {
    max-width: 100%;
  }

  .vg-hero__actions {
    justify-content: center;
  }

  /* Header */
  .site-header,
  #masthead {
    padding: 0 var(--vg-space-4) !important;
  }

  .site-branding img,
  .custom-logo {
    height: 38px !important;
  }

  /* Trust strip */
  .vg-trust-strip__list {
    gap:            var(--vg-space-5);
    justify-content: flex-start;
    overflow-x:     auto;
    padding:        0 var(--vg-space-4);
    scrollbar-width: none;
  }

  .vg-trust-strip__list::-webkit-scrollbar {
    display: none;
  }

  /* Categorías: 2 col mobile */
  .vg-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vg-space-4);
  }

  .vg-category-card {
    padding: var(--vg-space-5) var(--vg-space-4);
  }

  .vg-category-card__icon {
    width:  50px;
    height: 50px;
    font-size: 22px;
  }

  /* Shop */
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--vg-space-4) !important;
  }

  .woocommerce ul.products li.product img {
    height: 160px !important;
  }

  /* Footer */
  .vg-footer-grid {
    grid-template-columns: 1fr;
  }

  .vg-footer-bottom {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }

  /* Cart table: compacta */
  .woocommerce-cart table.shop_table td {
    padding: 10px 12px !important;
  }

  /* Checkout */
  #customer_details,
  .woocommerce-checkout-review-order {
    padding: var(--vg-space-5) !important;
  }

  /* Buttons */
  .vg-btn,
  .vg-btn-primary,
  .vg-btn-outline {
    padding:   12px 24px;
    font-size: var(--vg-text-xs);
  }

  /* Section titles */
  .vg-section-title {
    font-size: 1.4rem;
  }
}

/* ── sm — Mobile (max 480px) ── */
@media (max-width: 480px) {
  /* Hero */
  .vg-hero {
    padding: var(--vg-space-8) var(--vg-space-4);
  }

  .vg-hero__title {
    font-size: 1.9rem;
  }

  /* Una columna en shop mobile */
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }

  /* Categorías: 2 col pequeñas */
  .vg-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vg-space-3);
  }

  /* Producto */
  .woocommerce div.product form.cart {
    flex-direction: column;
    align-items:    stretch !important;
  }

  .woocommerce div.product form.cart .quantity {
    justify-content: center !important;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100% !important;
  }

  /* Tabs producto: scroll horizontal */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    overflow-x:    auto;
    flex-wrap:     nowrap !important;
    padding-bottom: 1px !important;
    scrollbar-width: none;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }

  /* Productos relacionados: 1 col */
  .woocommerce div.product .related ul.products {
    grid-template-columns: 1fr !important;
  }

  /* Countdown */
  .vg-countdown {
    gap: var(--vg-space-2);
  }

  .vg-countdown__unit {
    min-width: 50px;
    padding:   var(--vg-space-2) var(--vg-space-3);
  }

  .vg-countdown__number {
    font-size: var(--vg-text-xl);
  }

  /* Footer social */
  .vg-footer-social {
    justify-content: center;
  }

  /* Precio producto */
  .woocommerce div.product p.price .woocommerce-Price-amount {
    font-size: 2rem !important;
  }
}

/* ── Preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }

  .vg-hero__image-wrap img {
    animation: none !important;
  }
}

/* ── Print ── */
@media print {
  body::before,
  .site-header,
  .vg-hero,
  .site-footer,
  .woocommerce-cart,
  #place_order {
    display: none !important;
  }

  body {
    background: white !important;
    color:      black !important;
  }
}