/* ============================================================================
   RR AudioCar — Mobile Premium 2026
   ----------------------------------------------------------------------------
   Rediseño MOBILE (estética ML / ProNotebooks / Nike / Apple).
   TODO va dentro de @media (max-width:767px) salvo donde se aclara, para
   NO afectar desktop. Carga DESPUÉS del resto de CSS del child theme
   (prioridad alta en wp_enqueue_scripts) para ganar en el cascade sin
   abusar de !important. Se usa !important solo donde el theme/CSS previo
   ya lo usa con la misma o mayor especificidad.
   Reversible: borrar este archivo + su enqueue en functions.php.
   ============================================================================ */

/* ===========================================================================
   1) GRILLA Y TARJETAS DE PRODUCTO — MOBILE (archive + ofertas)
   - 2 columnas firmes, cards más verticales y limpias.
   - Una sola caja (se neutraliza el doble borde del <li>).
   - Imagen más grande, contain, centrada, proporcional (sin recortes).
   - Título más chico para entrar más info, hasta 3 líneas, alturas parejas.
   - Precio protagonista. Botón "Agregar" siempre visible y alineado.
   =========================================================================== */
@media (max-width: 767px){

  /* Grilla 2 columnas (archive + ofertas) */
  .rr-ml-products ul.products,
  .rr-ofertas-tabs ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
  .rr-ofertas-tabs .rr-grid{ gap: 12px !important; }

  /* El <li> deja de ser "caja": la card real es .rr-ra-card__inner (evita doble borde) */
  .rr-ml-products ul.products li.product.rr-ra-card,
  .rr-ofertas-tabs ul.products li.product.rr-ra-card,
  .rr-ml-products ul.products li.rr-ra-card,
  .rr-ofertas-tabs ul.products li.rr-ra-card{
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card shell premium (única caja) */
  li.rr-ra-card .rr-ra-card__inner{
    height: 100% !important;
    border: 1px solid #eceff3 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(17,24,39,.06) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Imagen: cuadrada, más grande, contain, centrada (sin recortes) */
  li.rr-ra-card .rr-ra-card__media,
  .rr-ml-products li.rr-ra-card .rr-ra-card__media,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__media{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    padding: 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  li.rr-ra-card .rr-ra-card__media img,
  .rr-ml-products li.rr-ra-card .rr-ra-card__media img,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__media img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Cuerpo con aire prolijo */
  li.rr-ra-card .rr-ra-card__body{
    padding: 10px 11px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  /* Rating / vendidos compactos */
  li.rr-ra-card .rr-ra-card__rating{ margin: 0 0 4px !important; gap: 4px !important; }
  li.rr-ra-card .rr-ra-card__rating .rr-ra-card__rating-num,
  li.rr-ra-card .rr-ra-card__rating .rr-ra-card__sold{ font-size: 11px !important; }

  /* Marca (si existe) */
  li.rr-ra-card .rr-ra-card__brand{
    font-size: 10.5px !important;
    color: #9ca3af !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
  }

  /* Título: más chico, hasta 3 líneas, altura pareja entre cards */
  li.rr-ra-card .rr-ra-card__title,
  .rr-ml-products li.rr-ra-card .rr-ra-card__title,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__title{
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    color: #1f2937 !important;
    margin: 1px 0 8px !important;
    min-height: 46px !important;          /* 3 líneas → alturas consistentes */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Precio protagonista (oscuro y fuerte, estilo ML/ProNotebooks) */
  li.rr-ra-card .rr-ra-card__pricewrap{ margin-top: auto !important; }
  li.rr-ra-card .rr-ra-card__price,
  li.rr-ra-card .rr-ra-card__price span,
  li.rr-ra-card .rr-ra-card__price .amount{
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #111827 !important;
  }
  li.rr-ra-card .rr-ra-card__old{
    font-size: 11px !important;
    color: #9aa0a6 !important;
    margin: 0 0 2px !important;
  }
  li.rr-ra-card .rr-cuotas-loop{
    font-size: 11.5px !important;
    color: #00a650 !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }
  li.rr-ra-card .rr-ra-card__ship{
    font-size: 11px !important;
    color: #00a650 !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
  }

  /* Botón "Agregar": SIEMPRE visible y alineado (archive + ofertas) */
  li.rr-ra-card .rr-ra-card__actions,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__actions,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__inner:hover .rr-ra-card__actions{
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    padding: 0 11px 11px !important;
  }
  li.rr-ra-card .rr-ra-card__btn,
  li.rr-ra-card .rr-ra-card__actions a.button,
  li.rr-ra-card .rr-ra-card__actions a.add_to_cart_button,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__btn,
  .rr-ofertas-tabs li.rr-ra-card .rr-ra-card__actions a.button{
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    gap: 6px !important;
    box-shadow: 0 3px 10px rgba(230,57,70,.18) !important;
  }
  li.rr-ra-card .rr-ra-card__btn span{ font-size: 13px !important; line-height: 1.05 !important; }

  /* Sin stock: chip gris prolijo, mismo alto que el botón */
  li.rr-ra-card .rr-ra-card__nostock{
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
  }
}

/* ===========================================================================
   2) PÁGINA DE OFERTAS — CHIPS / CATEGORÍAS (MOBILE)
   - Pills suaves, modernas, primer chip activo premium (no pesado).
   - Sin scroll feo ni cortes: fade en bordes + scroll-snap + sin scrollbar.
   - Coherente con las cards nuevas (rojo de marca #E63946).
   =========================================================================== */
@media (max-width: 767px){
  .rr-ofertas-tabs{
    margin: 14px auto !important;
    padding: 0 10px !important;
  }
  .rr-ofertas-tabs .rr-tabs{
    display: flex !important;
    gap: 8px !important;
    padding: 10px 2px !important;
    top: 64px !important;
    border-bottom: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .rr-ofertas-tabs .rr-tabs::-webkit-scrollbar{ display: none !important; height: 0 !important; }

  .rr-ofertas-tabs .rr-tab{
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    border: 1px solid #e9ebef !important;
    background: #f6f7f9 !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  }
  .rr-ofertas-tabs .rr-tab:hover{
    background: #f1f2f4 !important;
    border-color: #e2e4e8 !important;
    color: #374151 !important;
  }
  /* Activo: tinte rojo suave, premium, no pesado */
  .rr-ofertas-tabs .rr-tab.is-active{
    background: #fff1f2 !important;
    border-color: rgba(230,57,70,.40) !important;
    color: #E63946 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(230,57,70,.12) !important;
  }
}

/* ===========================================================================
   3) SHORTCODE rr_ml_info_cards (rrac-ic-) — CARRUSEL MOBILE
   - Carrusel horizontal: 2 cards completas + un pedacito de la 3ra.
   - Cards más chicas, compactas, elegantes. Menos altura, mejor padding,
     botones más finos, tipografía limpia, scroll-snap táctil.
   =========================================================================== */
@media (max-width: 767px){
  .rrac-ic-cards{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding: 2px 2px 10px !important;
    scrollbar-width: none !important;
  }
  .rrac-ic-cards::-webkit-scrollbar{ display: none !important; }

  /* 2 completas + pedacito de la 3ra */
  .rrac-ic-card{
    flex: 0 0 42% !important;
    scroll-snap-align: start !important;
    padding: 14px 13px !important;
    border-radius: 15px !important;
  }

  .rrac-ic-card__head{ margin-bottom: 8px !important; }
  .rrac-ic-card__title{ font-size: 10.5px !important; letter-spacing: .08em !important; }
  .rrac-ic-card__desc{
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .rrac-ic-icon{ width: 42px !important; height: 42px !important; margin-bottom: 10px !important; }
  .rrac-ic-icon__circle{ width: 42px !important; height: 42px !important; border-radius: 12px !important; }
  .rrac-ic-icon__svg svg{ width: 20px !important; height: 20px !important; }

  /* Botón más fino */
  .rrac-ic-btn{
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    border-width: 1.5px !important;
  }

  /* "Visto recientemente": thumb compacto en fila (menos altura) */
  .rrac-ic-card--last .rrac-ic-lastview{
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .rrac-ic-lastview__thumb{
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }
  .rrac-ic-lastview__thumb img,
  .rrac-ic-lastview__img{ padding: 6px !important; }
  .rrac-ic-lastview__name{ font-size: 12px !important; -webkit-line-clamp: 2 !important; }
  .rrac-ic-lastview__price .amount{ font-size: 14px !important; }
}
@media (max-width: 480px){
  /* Mantener "2 + pedacito" también en pantallas chicas (override del 82% previo) */
  .rrac-ic-card{ flex: 0 0 44% !important; padding: 14px 13px !important; }
}

/* ===========================================================================
   4) PRODUCTO INDIVIDUAL — BLOQUE DE COMPRA (MOBILE)
   Fix: cuando queda 1 unidad (Woo oculta el selector de cantidad) el layout
   no debe saltar ni quedar desalineado; "Cargando…" no debe ocupar mal el
   espacio. Layout determinístico (flex column), alturas estables y spinner
   centrado que NO reflowa.
   =========================================================================== */
@media (max-width: 767px){
  /* Línea "Cantidad disponible" prolija */
  .rr-info .rr-stockline{
    margin: 4px 0 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .rr-info .rr-stockline span{ color: #6b7280 !important; font-weight: 600 !important; }

  /* Form estable: columna, sin grid (sirva o no haya selector de cantidad) */
  .rr-info .rr-wc-cart--horizons form.cart,
  .rr-wc-cart--horizons form.cart{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    margin: 0 !important;
  }

  /* Selector de cantidad: ancho fijo a la izquierda */
  .rr-info .rr-wc-cart--horizons .quantity{
    width: 132px !important;
    height: 48px !important;
    margin: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* Stock = 1: Woo oculta .quantity → no debe dejar hueco */
  .rr-info .rr-wc-cart--horizons .quantity.hidden{ display: none !important; }
  .rr-info .rr-wc-cart--horizons .quantity input.qty{
    width: 100% !important;
    height: 46px !important;
    border: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  /* Botón agregar: full width, alto estable, sin salto al cargar */
  .rr-info .rr-wc-cart--horizons button.single_add_to_cart_button,
  .rr-wc-cart--horizons button.single_add_to_cart_button{
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  /* Estado "Cargando…": ocultar texto sin cambiar tamaño + spinner centrado */
  .rr-info .rr-wc-cart--horizons button.single_add_to_cart_button.loading,
  .rr-wc-cart--horizons button.single_add_to_cart_button.loading{
    color: transparent !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  .rr-info .rr-wc-cart--horizons button.single_add_to_cart_button.loading::after,
  .rr-wc-cart--horizons button.single_add_to_cart_button.loading::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    border: 2px solid rgba(255,255,255,.5) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: rr-atc-spin .7s linear infinite !important;
  }

  /* "Comprar ahora" alineado al botón principal */
  .rr-info .rr-buy-now{
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 0 !important;
  }

  /* Mensajes dinámicos de Woo: debajo, prolijos */
  .rr-info .woocommerce-message,
  .rr-info .woocommerce-error,
  .rr-info .woocommerce-info{
    margin: 12px 0 0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

@keyframes rr-atc-spin{ to{ transform: rotate(360deg); } }