/* Control Center 8.7.0 - Mobile catalog PRO
   Corrección fuerte para celular:
   - imagen más chica en el recuadro;
   - producto más grande dentro de la imagen;
   - texto nunca queda tapado;
   - botón alineado;
   - IA no tapa productos.
*/

@media (max-width: 860px){

  body{
    padding-bottom: 98px!important;
    overflow-x:hidden!important;
  }

  .container{
    width: calc(100% - 16px)!important;
  }

  .catalog.container{
    display:block!important;
    margin-top:10px!important;
  }

  .content{
    min-width:0!important;
    width:100%!important;
  }

  .result-meta{
    font-size:15px!important;
    padding:8px 4px 10px!important;
    font-weight:900!important;
  }

  /* Layout definitivo para cards mobile */
  body .catalog .grid,
  body #productGrid.grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  body .catalog .grid > article.card,
  body #productGrid.grid > article.card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:150px!important;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    column-gap:10px!important;
    align-items:stretch!important;
    overflow:hidden!important;
    position:relative!important;
    border-radius:22px!important;
    padding:0!important;
  }

  body .catalog .grid > article.card > a.thumb,
  body #productGrid.grid > article.card > a.thumb,
  body .catalog .grid > article.card .thumb,
  body #productGrid.grid > article.card .thumb{
    grid-column:1!important;
    grid-row:1 / span 3!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:122px!important;
    min-height:122px!important;
    max-height:122px!important;
    margin:14px 0 14px 10px!important;
    padding:0!important;
    border-radius:18px!important;
    aspect-ratio:auto!important;
    align-self:center!important;
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:linear-gradient(180deg,#f9fbff,#eaf0f6)!important;
    border:1px solid rgba(255,255,255,.82)!important;
    box-shadow:inset 0 0 0 1px rgba(5,25,45,.04), 0 12px 24px rgba(0,0,0,.18)!important;
    z-index:1!important;
  }

  body .catalog .grid > article.card .thumb .image-fit,
  body #productGrid.grid > article.card .thumb .image-fit{
    width:100%!important;
    height:100%!important;
    flex:0 0 auto!important;
    overflow:visible!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body .catalog .grid > article.card .thumb .image-fit > img,
  body #productGrid.grid > article.card .thumb .image-fit > img,
  body .catalog .grid > article.card .thumb img,
  body #productGrid.grid > article.card .thumb img{
    width:auto!important;
    height:auto!important;
    max-width:94%!important;
    max-height:94%!important;
    min-width:0!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:0!important;
    margin:auto!important;
    transform:none!important;
    display:block!important;
  }

  body .catalog .grid > article.card > .info,
  body #productGrid.grid > article.card > .info{
    grid-column:2!important;
    grid-row:1 / span 3!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:12px 12px 12px 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:6px!important;
    overflow:hidden!important;
    position:relative!important;
    z-index:2!important;
  }

  body .catalog .grid > article.card .title-box,
  body #productGrid.grid > article.card .title-box{
    width:100%!important;
    min-height:auto!important;
    max-height:none!important;
    padding:8px 9px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }

  body .catalog .grid > article.card .title,
  body #productGrid.grid > article.card .title{
    font-size:13.1px!important;
    line-height:1.22!important;
    letter-spacing:.01em!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  body .catalog .grid > article.card .badges,
  body #productGrid.grid > article.card .badges{
    margin:2px 0 0!important;
    gap:5px!important;
    max-height:28px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-wrap:nowrap!important;
  }

  body .catalog .grid > article.card .badge,
  body #productGrid.grid > article.card .badge{
    font-size:10px!important;
    line-height:1!important;
    padding:5px 7px!important;
    max-width:98px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    flex:0 1 auto!important;
  }

  body .catalog .grid > article.card .price-row,
  body #productGrid.grid > article.card .price-row{
    margin:2px 0 0!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
  }

  body .catalog .grid > article.card .price,
  body #productGrid.grid > article.card .price{
    font-size:20px!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
  }

  body .catalog .grid > article.card .add-btn,
  body #productGrid.grid > article.card .add-btn{
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    margin:4px 0 0!important;
    border-radius:14px!important;
    font-size:13px!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
  }

  body .catalog .grid > article.card .add-btn:hover,
  body #productGrid.grid > article.card .add-btn:hover{
    transform:none!important;
  }

  body .catalog .grid > article.card:hover,
  body #productGrid.grid > article.card:hover{
    transform:none!important;
  }

  /* Evita que favoritos/IA tapen contenido de la tarjeta */
  body .catalog .grid > article.card .fav-btn,
  body #productGrid.grid > article.card .fav-btn,
  body .favorite-btn,
  body [data-favorite]{
    top:8px!important;
    right:8px!important;
    width:38px!important;
    height:38px!important;
    z-index:5!important;
  }

  #ccAiWidget .cc-ai-button,
  .cc-ai-button{
    right:12px!important;
    bottom:106px!important;
    width:58px!important;
    height:58px!important;
    opacity:.92!important;
  }

  #ccAiWidget .cc-ai-panel,
  .cc-ai-panel{
    right:8px!important;
    bottom:172px!important;
    width:min(94vw,360px)!important;
    max-height:58vh!important;
  }

  .mobile-dock{
    z-index:120!important;
  }
}

@media (max-width: 390px){
  body .catalog .grid > article.card,
  body #productGrid.grid > article.card{
    grid-template-columns:104px minmax(0,1fr)!important;
    min-height:142px!important;
  }

  body .catalog .grid > article.card > a.thumb,
  body #productGrid.grid > article.card > a.thumb,
  body .catalog .grid > article.card .thumb,
  body #productGrid.grid > article.card .thumb{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    margin-left:9px!important;
  }

  body .catalog .grid > article.card .title,
  body #productGrid.grid > article.card .title{
    font-size:12.5px!important;
  }

  body .catalog .grid > article.card .price,
  body #productGrid.grid > article.card .price{
    font-size:18px!important;
  }

  body .catalog .grid > article.card .add-btn,
  body #productGrid.grid > article.card .add-btn{
    height:36px!important;
    min-height:36px!important;
    font-size:12.5px!important;
  }
}

@media (max-width: 340px){
  body .catalog .grid > article.card,
  body #productGrid.grid > article.card{
    grid-template-columns:92px minmax(0,1fr)!important;
  }

  body .catalog .grid > article.card > a.thumb,
  body #productGrid.grid > article.card > a.thumb,
  body .catalog .grid > article.card .thumb,
  body #productGrid.grid > article.card .thumb{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    height:100px!important;
    min-height:100px!important;
    max-height:100px!important;
  }
}
/* CONTROL_CENTER_SEARCH_TARGET_900 */
#catalogSearch{scroll-margin-top:110px!important;}