/*
 * Sumario del pedido de Croster (/order.php): cada producto en su tarjeta.
 *
 * El marcado sale de includes/viewcart/spc.tpl de croster_default y de
 * croster_defaultv1 (clases hw-sum-). Croster pinta todo el sumario sobre --gray-lighter; la
 * tarjeta usa el fondo de la pagina para separar el producto de los totales.
 * Tipografia, colores, bordes y radios son las variables de Croster
 * (adminpanel > Custom colors). Solo se carga en order.php (ver hooks.php).
 */

.onepage_cart .ajaxcart_cont .summary_products.hw-sum-item {
    margin: 10px;
    padding: 10px 12px;
    background: var(--bg-body, #fff);
    border: 1px solid var(--border-color, #d5dce5);
    border-radius: var(--border-radius, 0.375rem);
}

.onepage_cart .ajaxcart_cont .summary_products.hw-sum-item ul {
    margin-bottom: 0;
    align-items: flex-start;
    gap: 10px;
}

.hw-sum-item .hw-sum-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.hw-sum-item .hw-sum-amount {
    color: var(--headings-color, #2a2e36);
    font-size: var(--font-size-small, 0.875rem);
    font-weight: 500;
}

.hw-sum-item .hw-sum-cycle {
    color: var(--gray-muted, #6c757d);
    font-size: var(--font-size-xsm, 0.75rem);
}

.hw-sum-item .hw-sum-qty {
    color: var(--primary-darker, #005ff7);
}

.hw-sum-item .hw-sum-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, #d5dce5);
}

/* Si todas las opciones se filtraron (cantidad 0, sin valor) no queda una raya suelta. */
.hw-sum-item .hw-sum-details:not(:has(.list-item)) {
    display: none;
}

.hw-sum-item .hw-sum-details .list-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    color: var(--body-color, #2a2e36);
}

.hw-sum-item .hw-sum-details .item-value {
    white-space: nowrap;
    font-weight: 500;
}

.hw-sum-item .hw-sum-renewal {
    color: var(--gray-muted, #6c757d);
}

/*
 * Movil: Croster pliega el desglose en #CartContents y lo abre con el boton de
 * la flecha (slideToggle de jQuery, que deja display:block en el style, no una
 * clase). El detalle de la tarjeta se abre y se cierra con el, para que el
 * sumario plegado no crezca con cada opcion.
 */
@media (max-width: 991px) {
    .hw-sum-item .hw-sum-details {
        display: none;
    }

    .cartsummary_cont:has(#CartContents[style*="block"]) .hw-sum-item .hw-sum-details:has(.list-item) {
        display: block;
    }
}