/* ═══════════════════════════════════════════════
   Breakpoint: Tablet  ≤ 1024px
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --page-pad: var(--sp-8); }

  /* Header */
  .main-nav       { display: none; }
  .hamburger-btn  { display: flex; }

  /* Mobile overlay — visible en DOM para la transición, pero inerte hasta .active */
  .mobile-overlay { display: block; visibility: hidden; pointer-events: none; }

  /* Hero */
  .catalog-hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px;
    grid-auto-rows: 240px;
  }
  .bento-item.large {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
  .bento-item.large .bento-bg {
    width: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
    opacity: 0.3;
  }

  /* Product layout — stack */
  .product-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: 0 var(--page-pad) var(--sp-8);
  }
  .product-image-container {
    position: static;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .product-title { font-size: var(--text-3xl); }

  /* Cross-sell */
  .cross-sell-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sticky CTA — visible en tablet/móvil */
  .sticky-cta { display: flex; }

  /* Imagen del producto: no cortada en tablet */
  .product-image-container { overflow: visible; }

  /* Cart sidebar — full width */
  .cart-sidebar { width: 100%; right: -100%; }
}

/* ═══════════════════════════════════════════════
   Breakpoint: Mobile large  ≤ 768px
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --page-pad: var(--sp-5); }

  /* Hero — single column */
  .catalog-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--page-pad) var(--sp-4);
  }
  .bento-item       { padding: var(--sp-6); }
  .bento-item.large { min-height: 280px; }
  .bento-item.small { min-height: 160px; }
  .bento-title      { font-size: var(--text-xl); }
  .bento-sub        { display: none; }

  /* Filter bar */
  .filter-bar { padding: var(--sp-4) var(--page-pad); }

  /* Grid — 2 columns */
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-5) var(--page-pad) var(--sp-16);
  }
  .catalog-card-img-wrapper { height: 220px; }

  /* Mobile grid — 1 column mode */
  .catalog-grid--single { grid-template-columns: 1fr !important; }
  .catalog-grid--single .catalog-card-img-wrapper { height: 300px; }

  /* Product detail */
  .product-image-container { max-width: 100%; }
  .slider-arrow { display: none; } /* en móvil se desliza con swipe */
  .product-title { font-size: var(--text-2xl); }
  .product-desc  { max-width: 100%; font-size: var(--text-sm); }

  /* Back button */
  .btn-back { margin-left: var(--page-pad); }

  /* Cross-sell */
  .cross-sell-section { padding: var(--sp-8) var(--page-pad); }
  .cross-sell-grid    { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .cs-card { padding: var(--sp-4); }
}

/* ═══════════════════════════════════════════════
   Breakpoint: Mobile small  ≤ 480px
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --page-pad: var(--sp-4); }

  /* Logo */
  .logo-img { height: 34px; }

  /* Hero — single column, smaller */
  .bento-item.large { min-height: 220px; }
  .bento-item.small { min-height: 130px; }
  .bento-badge      { font-size: 0.6rem; padding: 0.25rem 0.75rem; }

  /* Grid — 1 column */
  .catalog-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .catalog-card-img-wrapper { height: 300px; }

  /* Product */
  .product-title  { font-size: var(--text-xl); }
  .product-price  { font-size: var(--text-xl); }
  .size-btn       { width: 46px; height: 46px; }

  /* Hotspot tooltips — force left-aligned on small screens */
  .hotspot-tooltip {
    left: 0;
    transform: none;
    width: 190px;
  }

  /* Cross-sell — 1 column */
  .cross-sell-grid { grid-template-columns: 1fr; }

  /* Sticky CTA compacta en pantallas muy pequeñas */
  .sticky-cta { padding: var(--sp-3) var(--sp-4); }
  .sticky-cta-name  { font-size: var(--text-xs); }
  .sticky-cta-price { font-size: var(--text-xs); }
}