/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MASTER — Mobile & Tablet
   Cargado desde layout-portada.tpl y page.tpl via <link>
   Breakpoints: 1024px (tablet), 768px (móvil), 480px (móvil pequeño)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TABLET (≤1024px)
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* HEADER */
  #search_widget form input[type="text"] { padding: 12px 40px 12px 18px; font-size: 14px; }
  .grafs-header-container { gap: 12px 16px; padding: 14px 0; }
  .grafs-logo-wrapper img.logo { max-height: 60px; }

  /* PRODUCTO */
  body#product .product-left-col        { width: 48% !important; }
  body#product .grafs-product-right-col { width: 52% !important; }
  .grafs-product-tabs-row               { width: 90%; }

  /* CATEGORÍA */
  .grafs-cat-products-grid .product-miniature { width: calc(25% - 12px) !important; }

  /* CARRITO */
  .grafs-cart-grid { gap: 28px; }

  /* HOMEPAGE */
  .ea-landing-h1 { font-size: 26px; }
  .ea-landing-h2 { font-size: 14px; }
  .ea-home-section-title { font-size: 22px !important; }
}

/* ─────────────────────────────────────────────
   MÓVIL (≤768px)
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ══ GLOBAL ══ */
  .container { width: 92% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; }

  /* Bootstrap .row tiene margin: -15px por defecto. Con container padding:0
     ese margen negativo desborda el container 15px a la izquierda → scroll horizontal.
     Lo neutralizamos en móvil para todos los .row dentro del content. */
  #content-wrapper .row,
  .products-selection.row,
  #js-product-list .products.row { margin-left: 0 !important; margin-right: 0 !important; }

  /* Red de seguridad: evita scroll horizontal por cualquier desbordamiento residual */
  #wrapper { overflow-x: hidden; }

  /* ══ HEADER ══ */
  .grafs-header-container { padding: 10px 16px; }
  #search_widget form { width: 100% !important; }
  #search_widget form input[type="text"] {
    padding: 11px 44px 11px 16px;
    font-size: 15px;
    height: 44px;
  }
  #search_widget form button[type="submit"] { width: 44px; height: 44px; }

  /* ══ PÁGINA PRODUCTO ══ */
  body#product .product-left-col,
  body#product .grafs-product-right-col {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body#product .grafs-product-right-col { padding-left: 0 !important; margin-top: 20px; }
  .product-left-col .product-cover      { min-height: 220px !important; max-height: 300px !important; padding: 14px !important; }
  .product-left-col .product-cover img  { max-height: 260px !important; }
  .grafs-product-tabs-row               { width: 100%; margin-top: 0; }
  .grafs-tabs .nav-tabs .nav-link       { font-size: 14px; padding: 12px 16px 12px 0; }
  .grafs-product-title-big              { font-size: 20px !important; line-height: 1.3; }
  .btn-add-to-cart, .add-to-cart, #add-to-cart-or-refresh .btn-primary {
    min-height: 52px !important;
    font-size: 15px !important;
    width: 100% !important;
  }
  .grafs-qty-wrapper { width: 100% !important; max-width: 100% !important; }
  .grafs-qty-control { height: 48px !important; }
  .grafs-qty-btn     { width: 52px !important; height: 48px !important; }
  .grafs-qty-input   { height: 48px !important; font-size: 16px !important; }
  .product-accessories .product-miniature { width: calc(50% - 8px) !important; }

  /* ══ PÁGINA CATEGORÍA ══ */
  .grafs-cat-products-grid .product-miniature { width: calc(50% - 8px) !important; }
  .category-page-title { font-size: 20px !important; }
  .total-products, .products-sort-order .select-title { font-size: 13px; }

  /* ══ CARRITO ══ */
  .grafs-cart-grid      { flex-direction: column; gap: 20px; padding: 16px 0; }
  .grafs-cart-sidebar   { width: 100% !important; flex-shrink: 1; }
  .cart-columns-header  { display: none; }
  .cart-item-line       { flex-wrap: wrap; gap: 14px; padding: 16px 12px; }
  .cart-item-img-link img { width: 72px; height: 72px; }
  .cart-item-name       { font-size: 14px; }
  .cart-item-right      { width: 100%; justify-content: space-between; padding-left: 86px; }
  .cart-item-remove     { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .cart-item-remove .material-icons { font-size: 22px; }
  .cart-qty-control     { width: 108px; height: 40px; }
  .cart-item-total      { width: auto; }
  .grafs-cart-title     { font-size: 18px; }

  /* ══ CHECKOUT ══ */
  .grafs-order-grid    { flex-direction: column; gap: 20px; }
  .grafs-order-sidebar { width: 100% !important; }
  body#checkout .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .checkout-process .step-title { font-size: 15px; }

  /* ══ LOGIN / REGISTRO ══ */
  .grafs-auth-card, .grafs-register-card {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px !important;
  }
  .grafs-auth-benefits        { width: 100% !important; max-width: 100% !important; }
  body#authentication #wrapper { padding: 30px 16px 50px !important; }
  .grafs-register-wrapper     { width: 100%; padding: 0; }

  /* ══ HOMEPAGE — Secciones generales ══ */
  .ea-home-section-title { font-size: 20px !important; }

  /* Carrusel: 2 slides visibles */
  .ea-carousel-slide { width: calc(50% - 6px) !important; flex-shrink: 0; }
  .ea-carousel-arrow { width: 36px; height: 36px; }
  .ea-carousel-arrow .material-icons { font-size: 20px; }

  /* Ofertas Flash — botón full width */
  .ea-specials-btn {
    width: calc(100% - 32px);
    max-width: 400px;
    justify-content: center;
    margin: 0 auto;
    display: flex;
  }

  /* SEO Slider */
  .ea-seo-section  { padding: 36px 0; }
  .ea-landing-h1   { font-size: 20px; }
  .ea-landing-h2   { font-size: 12px; margin-bottom: 20px; }
  .ea-seo-slide    { flex-direction: column; gap: 20px; }
  .ea-seo-img-wrap { width: 100%; height: 160px; }
  .ea-seo-placeholder { height: 160px; font-size: 13px; }
  .ea-seo-placeholder span { font-size: 32px; }
  .ea-seo-text h3  { font-size: 17px; }
  .ea-seo-text p   { font-size: 13px; line-height: 1.55; }
  .ea-seo-arrow    { width: 34px; height: 34px; }
  .ea-seo-arrow .material-icons { font-size: 18px; }

  /* Reseñas */
  .ea-reviews-section { padding: 36px 0; }
  .ea-reviews-score   { font-size: 20px; }
  .ea-reviews-grid    { grid-template-columns: 1fr; gap: 14px; }
  .ea-review-card     { padding: 16px 18px; }

  /* Trust Badges */
  .ea-trust-section { padding: 32px 0; }
  .ea-trust-grid    { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .ea-trust-title   { font-size: 13px; }
  .ea-trust-desc    { font-size: 12px; }

  /* Perfiles de cliente */
  .ea-profiles-section { padding: 36px 0; }
  .ea-profiles-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ea-profile-card     { height: 170px; }
  .ea-profile-title    { font-size: 14px; }
  .ea-profile-desc     { font-size: 11px; }

  /* Marcas */
  .ea-brands-row { padding: 24px 0; }
}

/* ─────────────────────────────────────────────
   MÓVIL PEQUEÑO (≤480px)
   ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* HEADER */
  .header-nav .mobile { padding: 0 12px; }
  #menu-icon { font-size: 28px; margin-right: 8px; }

  /* PRODUCTO */
  .product-left-col .product-cover    { min-height: 180px !important; max-height: 240px !important; }
  .grafs-product-title-big            { font-size: 17px !important; }
  .product-price .current-price-value { font-size: 22px !important; }

  /* CARRITO */
  .cart-item-right    { padding-left: 0; justify-content: flex-end; gap: 10px; }
  .cart-item-img-link img { width: 60px; height: 60px; }
  .cart-item-name     { font-size: 13px; }

  /* CATEGORÍA */
  /* Nota: el ancho de .grafs-cat-products-grid .product-miniature se gestiona en custom-theme.css
     para evitar conflictos. Mantener aquí solo reglas que no se solapen. */
  .category-page-title { font-size: 17px !important; margin: 4px 0 12px !important; }

  /* HOMEPAGE */
  .ea-landing-h1    { font-size: 17px; }
  .ea-profiles-grid { grid-template-columns: 1fr; }
  .ea-profile-card  { height: 155px; }
  .ea-trust-grid    { grid-template-columns: repeat(2, 1fr); }
  .ea-carousel-slide { width: calc(100% - 0px) !important; }

  /* AUTH */
  .grafs-auth-card  { padding: 22px 14px !important; border-radius: 12px; }
  .grafs-auth-title { font-size: 19px !important; }
}

/* ─────────────────────────────────────────────
   TOUCH TARGETS — mínimo 44×44px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  #menu-icon {
    width: 44px; height: 44px;
    display: flex !important;
    align-items: center; justify-content: center;
    margin-right: 4px;
  }
  .grafs-mobile-right-icons a,
  .grafs-mobile-right-icons .header-wishlist {
    min-width: 44px; min-height: 44px;
    display: flex !important;
    align-items: center; justify-content: center;
  }
  .cart-qty-btn { min-width: 44px; min-height: 44px; }
  .pagination .page-link {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  #search_filters .facet-label { min-height: 40px; display: flex; align-items: center; }
  .grafs-continue-link { min-height: 40px; align-items: center; }
}