@CHARSET "UTF-8";

/* CombinationsInCatalog - PrestaShop 9.0.2 + Classic 3.0.2 - V6 */
.addToCartForm {
    margin-top: 0;
}

.addToCartButtonBox {
    margin: 0 auto 30px !important;
    height: 2.75rem;
    display: block;
    font-weight: 600 !important;
    font-size: 1rem !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: "Open Sans", sans-serif !important;
    box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1) !important;
    border: none;
}

.preLoading {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6) !important;
    background-image: url(../../img/spinner.gif) !important;
    z-index: 999;
    border: none !important;
    background-size: 40px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hide the native Classic swatches and native product-list cart.
 * The module provides the only combination-aware purchase controls. */
.product-miniature .variant-links,
.product-miniature .product-add-to-cart {
    display: none !important;
}

/* Price centered; module below the price (this module is injected by displayProductPriceBlock). */
.product-miniature .product-price-and-shipping {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}

.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping .regular-price {
    display: inline-block !important;
    float: none !important;
    text-align: center !important;
}

/* The module is inserted inside product-price-and-shipping. Force its own
 * block below the price instead of allowing Classic flex/float rules to
 * place it beside the price. */
.product-miniature .product-price-and-shipping > .addToCartFormWrapper {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide Classic's native miniature purchase controls. The module has its own
 * combination-aware quantity and add-to-cart controls. */
.product-miniature .product-add-to-cart,
.product-miniature .js-product-add-to-cart,
.product-miniature .product-actions:not(.addToCartFormWrapper .product-actions) {
    display: none !important;
}

/* Module card */
.product-miniature .addToCartFormWrapper {
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0 !important;
    padding: 8px 8px 10px;
    background-color: #fff;
    box-shadow: 3px 10px 8px -2px rgba(0,0,0,.20);
}

.product-miniature .addToCartFormWrapper .variantsProductWrapper {
    width: 100%;
}

.addToCartFormWrapper .product-variants-item {
    margin-top: 7px;
}

.addToCartFormWrapper .control-label {
    display: block;
    margin-bottom: 4px;
    position: static;
    text-align: center;
}

.addToCartFormWrapper .form-control-select {
    width: 100%;
    margin-bottom: 6px;
    text-align: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    text-align-last: center;
}

.addToCartFormWrapper .groupUl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.addToCartFormWrapper .groupUl li {
    float: none !important;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.addToCartFormWrapper .groupLi {
    margin-right: 0 !important;
}

/* Color names: radios only, no colored squares/swatches. */
.addToCartFormWrapper .color-labels-list .color-label-item label,
.addToCartFormWrapper .groupLi label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
}

.addToCartFormWrapper .color-labels-list .input-color,
.addToCartFormWrapper .groupLi .input-radio {
    position: static;
    opacity: 1;
    width: auto;
    height: auto;
    margin: 0;
}

.addToCartFormWrapper .color-labels-list .radio-label,
.addToCartFormWrapper .groupLi .radio-label {
    display: inline;
}

/* Quantity + Add to cart on one line. */
.addToCartControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.addToCartControls .addToCartButtonNumber {
    box-sizing: border-box;
    flex: 0 0 54px;
    width: 54px;
    height: 2.75rem;
    min-width: 54px;
    padding: 6px 4px;
    margin: 0 !important;
    text-align: center;
}

.addToCartControls .add-to-cart {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none;
    min-width: 0;
    height: 2.75rem;
    padding: 0 8px !important;
    margin: 0 !important;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .addToCartControls {
        gap: 6px;
    }
    .addToCartControls .addToCartButtonNumber {
        flex-basis: 52px;
        width: 52px;
        min-width: 52px;
    }
}

/* Never show the old colored span if an older cached template is served. */
.addToCartFormWrapper .input-color + span.color,
.addToCartFormWrapper .input-color + span.texture {
    display: none !important;
}


/* V3 - PrestaShop 9.0.2 / Classic 3.0.2
 * The second quantity/cart row visible on some Classic/custom installations
 * is not always marked with .product-add-to-cart. Hide any native form
 * inside a product miniature, while keeping the module's .addToCartForm.
 */
.product-miniature form:not(.addToCartForm) {
    display: none !important;
}

/* Also cover native/custom cart controls that are rendered without a form
 * or without the standard Classic classes. */
.product-miniature .add-to-cart:not(.addToCartFormWrapper .add-to-cart),
.product-miniature button[data-button-action="add-to-cart"]:not(.addToCartFormWrapper button[data-button-action="add-to-cart"]) {
    display: none !important;
}

/* Strong price centering for Classic 3.0.2. */
.product-miniature .product-description .product-price-and-shipping {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

.product-miniature .product-description .product-price-and-shipping .price {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* V5 - Classic 3.0.2 layout fix:
 * the hook may initially be rendered inside a narrow price/flex container.
 * JS moves .addToCartFormWrapper into .product-description after the price. */
.product-miniature .product-description > .addToCartFormWrapper {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Price is a full-width centered block, independent of the module. */
.product-miniature .product-description > .product-price-and-shipping {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.product-miniature .product-description > .product-price-and-shipping .price,
.product-miniature .product-description > .product-price-and-shipping .regular-price {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
\n\n/* V6 - Fix for the actual Classic 3.0.2/custom card structure\n * seen on the store: .product-miniature__infos > .product-miniature__prices.\n * The module must not participate in the price area's grid/flex columns.\n */\n.product-miniature .product-miniature__infos {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n}\n\n.product-miniature .product-miniature__prices {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    text-align: center !important;\n    float: none !important;\n    clear: both !important;\n    box-sizing: border-box !important;\n}\n\n.product-miniature .product-miniature__prices .product-miniature__price,\n.product-miniature .product-miniature__prices > .price,\n.product-miniature .product-miniature__prices span.price {\n    display: block !important;\n    width: 100% !important;\n    margin: 0 auto !important;\n    text-align: center !important;\n    float: none !important;\n}\n\n.product-miniature .product-miniature__infos > .addToCartFormWrapper {\n    display: block !important;\n    position: static !important;\n    box-sizing: border-box !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 8px 0 0 !important;\n    padding: 8px 8px 10px !important;\n    float: none !important;\n    clear: both !important;\n    transform: none !important;\n}\n\n.product-miniature .product-miniature__infos > .addToCartFormWrapper .variantsProductWrapper,\n.product-miniature .product-miniature__infos > .addToCartFormWrapper .variants-product,\n.product-miniature .product-miniature__infos > .addToCartFormWrapper .groupUl {\n    width: 100% !important;\n    max-width: 100% !important;\n}\n\n/* Never let the native card actions occupy a grid/flex column. */\n.product-miniature .product-miniature__actions {\n    display: none !important;\n}\n