/* SOYMOD #105XXX (21-08-2026) - Carrusel de productos (soycarouselproduct) */

.soy_pc {
    --pc-accent: #e07d1a;
    --pc-gap: 16px;
    --pc-visible: 4;          /* visibles en PC */

    max-width: 1680px;
    margin: 2.5rem auto;
    padding: 0 20px;
    font-family: inherit;
}

.soy_pc_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    margin-bottom: 20px;
}
.soy_pc_title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.25;
}
.soy_pc_desc {
    color: #666;
    margin: 0;
    max-width: 820px;
    line-height: 1.5;
}
.soy_pc_topbtn {
    flex: 0 0 auto;
    border: 1px solid #FFD46E;
    color: #000;
    border-radius: 999px;
    padding: 8px 18px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.soy_pc_topbtn:hover { background: #FFD46E; color: #000; }

.soy_pc .soy_pc_track {
    display: flex !important;
    flex-wrap: nowrap !important;   /* gana a .products del tema (que suele ser wrap) */
    gap: var(--pc-gap);
    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 4px;
    margin: 0;                      /* anula márgenes negativos de .products */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.soy_pc .soy_pc_track::-webkit-scrollbar { display: none; }
.soy_pc .soy_pc_track.soy_dragging { cursor: grabbing; user-select: none; }

.soy_pc .soy_pc_item {
    flex: 0 0 calc((100% - (var(--pc-visible) - 1) * var(--pc-gap)) / var(--pc-visible)) !important;
    max-width: calc((100% - (var(--pc-visible) - 1) * var(--pc-gap)) / var(--pc-visible));
    width: auto;
}
/* que la miniatura del tema ocupe el ancho del item del carrusel */
.soy_pc .soy_pc_item .product-miniature,
.soy_pc .soy_pc_item .thumbnail-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Móvil: 2 visibles */
@media (max-width: 767px) {
    .soy_pc { --pc-visible: 2; }
    .soy_pc_head { flex-direction: column; }
    .soy_pc_topbtn { align-self: flex-start; }
}

.soy_pc_footer {
    text-align: center;
    margin-top: 24px;
}
.soy_pc_bottombtn {
    display: inline-block;
    background: #FFD46E;
    color: #000;
    border-radius: 999px;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
}
.soy_pc_bottombtn:hover { opacity: .92; color: #fff; }