/**
 * Velatida – PrestaShop 9 Layout Fix
 *
 * PS9 Classic theme uses Flexbox in product-miniature cards.
 * The hook displayProductListReviews renders inside:
 *   <div class="product-list-review">
 *
 * Without these overrides, the widget either doesn't appear or gets
 * pushed inline next to the price. This CSS ensures full-width,
 * block-level display above the price.
 */

/* ─── Primary Target: .product-list-review (PS9 Hook Container) ─── */

/**
 * The PS9 Classic theme renders the displayProductListReviews hook
 * inside a <div class="product-list-review">. Force it to be visible,
 * full-width, and block-level so the stars occupy their own line.
 */
.product-list-review {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px;
}

/**
 * Ensure the custom element inside the hook container is also block-level.
 */
.product-list-review div-velatida {
    display: block !important;
    width: 100% !important;
}

/* ─── Product Listing Cards: Price + Shipping Wrapper ─── */

/**
 * In PS9 Classic, .product-price-and-shipping is a flex container.
 * Enable wrapping so the review block can break onto its own row.
 */
.product-miniature .product-price-and-shipping {
    display: flex;
    flex-wrap: wrap;
}

/**
 * When the widget is injected via displayProductPriceBlock,
 * it appears below the price. Add margin for PS 1.7/8 aesthetics.
 */
.product-miniature .product-price-and-shipping div-velatida {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 10px;
    clear: both;
}

/**
 * Ensure the actual price element retains its natural position.
 */
.product-miniature .product-price-and-shipping .product-price {
    order: 0;
}

/* ─── Fallback: Direct Miniature Child ─── */

/**
 * Some PS9 theme variants inject the hook output directly as a child
 * of .product-miniature or .product-description.
 */
.product-miniature > div-velatida,
.product-miniature .product-description > div-velatida {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px;
}

/**
 * If .product-description uses flex-column, push stars to top.
 */
.product-miniature .product-description {
    display: flex;
    flex-direction: column;
}

.product-miniature .product-description > .product-list-review {
    order: -1;
}

/* ─── Product Detail Page (Ficha) ─── */

/**
 * On the product detail page, prevent the widget from being squeezed
 * by flex siblings in the price area.
 */
.product-prices div-velatida {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px;
}