/* ========== ESCRITORIO (se queda como columna izquierda) ========== */

/* Wrapper con recomendaciones + productos */
.wcpqi-sc-wrap{
  display:flex;
  gap:16px;
}

/* Columna de productos recomendados */
.wcpqi-sc{
  width: 280px;
  flex: 0 0 280px;
  padding: 8px 8px 8px 16px;
  border-right: 1px solid rgba(0,0,0,.06);
  order:0; /* izquierda en desktop */
}

/* Contenedor de productos del side cart: ocupar el resto del espacio */
.wcpqi-sc-wrap .xoo-wsc-products{
  flex: 1 1 auto;
  order:1;
}

.wcpqi-sc-title{
  font-weight: 600;
  margin: 4px 0 12px;
}

.wcpqi-sc-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;      /* lista vertical en desktop */
  gap:12px;
}

.wcpqi-sc-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.wcpqi-sc-thumbwrap{
  display:block;
  width:64px;
  height:64px;
  border-radius:8px;
  overflow:hidden;
  flex:0 0 64px;
}

.wcpqi-sc-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wcpqi-sc-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.wcpqi-sc-titleline{
  font-size:.92rem;
  line-height:1.2;
}

.wcpqi-sc-attrs{
  font-size:.8rem;
  opacity:.7;
}

.wcpqi-sc-price{
  font-weight:600;
}

.wcpqi-sc-add{
  display:inline-block;
  font-size:.85rem;
  text-decoration:underline;
  cursor:pointer;
}


/* ========== MÓVIL: productos arriba, recomendados ABAJO como carrusel ========== */

@media (max-width: 768px){

  /* Wrapper apilado verticalmente */
  .wcpqi-sc-wrap{
    flex-direction:column;
  }

  /* Primero el listado del carrito (lo maneja el plugin) */
  .wcpqi-sc-wrap .xoo-wsc-products{
    order:1;
  }

  /* Después recomendaciones, ocupando 100% de ancho, justo encima de los botones */
  .wcpqi-sc{
    order:2;
    width:100%;
    flex: 0 0 auto;
    border-right:none;
    border-top:1px solid rgba(0,0,0,.06);
    padding:10px 16px 14px;
  }

  /* Carrusel horizontal */
  .wcpqi-sc-list{
    display:flex;
    flex-direction:row;       /* en fila */
    overflow-x:auto;          /* scroll horizontal */
    overflow-y:hidden;
    gap:12px;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    scrollbar-width:none;     /* Firefox: oculta barra */
  }

  .wcpqi-sc-list::-webkit-scrollbar{
    display:none;             /* Chrome/Safari: oculta barra */
  }

  /* Cada ítem como tarjetita vertical dentro del carrusel */
  .wcpqi-sc-item{
    flex:0 0 140px;           /* ancho de cada tarjeta */
    max-width:160px;
    flex-direction:column;
    align-items:flex-start;
  }

  .wcpqi-sc-thumbwrap{
    width:100%;
    height:auto;
    flex:0 0 auto;
    margin-bottom:4px;
  }

  .wcpqi-sc-thumb{
    width:100%;
    height:auto;
    object-fit:cover;
  }

  .wcpqi-sc-info{
    width:100%;
  }

  .wcpqi-sc-titleline{
    font-size:.9rem;
  }

  .wcpqi-sc-attrs{
    font-size:.78rem;
  }

  .wcpqi-sc-price{
    font-size:.85rem;
  }

  .wcpqi-sc-add{
    margin-top:2px;
    font-size:.8rem;
  }
}