/**
 * Shoptimizer Product Layout Extension
 * Custom product card styles
 */

/* ==========================================================================
   Sale Badge - Rectangular Style
   ========================================================================== */
.sple-sale-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    background-color: #f63a5d;
    /* Default red for sale */
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 0 0 4px 0;
    /* Matches the top-left corner look */
    line-height: 1;
    letter-spacing: 0.5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Out of Stock Variation */
.sple-sale-badge.out-of-stock {
    background-color: #55585b;
    border-radius: 0 0 4px 0;
}

/* Hide original Shoptimizer sale badges if they still appear */
.sale-item.product-label,
.onsale,
.product-out-of-stock {
    display: none !important;
}

/* ==========================================================================
   Product Card Header (Content Area)
   ========================================================================== */
.woocommerce-card__header {
    text-align: center;
    padding: 4px 10px 10px !important;
    /* Eliminated top space to pull swatches close to image */
    background: #fff;
    min-height: 0 !important;
}

/* ==========================================================================
   Product Title
   ========================================================================== */
.sple-title {
    margin-bottom: 0;
}

.sple-title a {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    display: block;
}

.sple-title a:hover {
    color: #00c7b1;
}

/* ==========================================================================
   Product Category
   ========================================================================== */
.sple-category {
    font-size: 13px;
    color: #888;
    margin: 0;
    text-transform: none;
    font-weight: 400;
    line-height: 1.4;
}

.sple-category a {
    color: #55585b;
    text-decoration: none;
}

.sple-category a:hover {
    color: #00c7b1;
}

/* ==========================================================================
   Price Styling
   ========================================================================== */
.woocommerce-card__header .price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 0 !important;
    font-size: 16px;
    line-height: 1;
}

/* Sale Price (Current) */
.woocommerce-card__header .price ins {
    color: #f63a5d;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    background: none;
    order: 1;
}

/* Regular Price (Struck through) */
.woocommerce-card__header .price del {
    color: #888;
    font-size: 15px;
    opacity: 0.9;
    order: 2;
}

/* Single (non-sale) price */
.woocommerce-card__header .price>.woocommerce-Price-amount {
    color: #1a1a1a;
    font-weight: 600;
}

/* ==========================================================================
   Product Image Wrapper
   ========================================================================== */
.woocommerce-image__wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
}

/* Smooth image transitions */
.woocommerce-image__wrapper img {
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
    margin-bottom: 0 !important;
}

/* Hover zoom effect - subtle premium feel */
ul.products li.product:hover .woocommerce-image__wrapper img:first-child {
    transform: scale(1.02);
}

/* Premium card shadow on hover (desktop only) */
@media (min-width: 993px) {
    ul.products li.product:not(.product-category) {
        transition: box-shadow 0.2s ease;
        border-radius: 4px;
        overflow: hidden;
    }

    ul.products li.product:not(.product-category):hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================================
   Add to Cart Button - REMOVED
   ========================================================================== */
/* We hide them globally in the loop to ensure they never appear on hover */
ul.products li.product .button,
ul.products li.product .added_to_cart,
.woocommerce-card__header .button {
    display: none !important;
}

/* Ensure the header container has some bottom padding */
.woocommerce-card__header {
    padding-bottom: 20px !important;
}

/* ==========================================================================
   Dynamic Grid Button (Personnaliser / Panier)
   ========================================================================== */
.sple-grid-button-wrapper {
    margin-top: 12px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
}

.sple-grid-button {
    display: inline-block;
    background-color: #1e88e5;
    /* Professional Deep Blue */
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    line-height: 1;
    border: none;
    box-shadow: 0 2px 4px rgba(30, 136, 229, 0.2);
    width: 100%;
    max-width: 200px;
    text-align: center;
}

.sple-grid-button:hover {
    background-color: #1565c0;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
    transform: translateY(-1px);
}

.sple-grid-button:active {
    transform: translateY(0);
}

/* KILL THE HOVER SPACE RESERVED BY THE THEME */
@media (min-width: 993px) {

    /* Reset the hover shadow box height to match the actual card */
    ul.products li.product:not(.product-category):before {
        height: 100% !important;
        margin-top: 0 !important;
        top: 0 !important;
    }

    /* Disable the 'Slide Content' effect if enabled in theme options */
    ul.products li.product:not(.product-category):hover .woocommerce-card__header {
        transform: translateY(0) !important;
    }
}

/* Ensure the product card itself doesn't have extra bottom padding */
ul.products li.product:not(.product-category) {
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Color Swatches Area
   ========================================================================== */
.sple-swatches {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 0 0 6px !important;
}

.sple-swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: default;
}

/* Light color swatch border */
.sple-swatch[style*="background-color: #ffffff"],
.sple-swatch[style*="background-color: #fff"],
.sple-swatch[title="White"],
.sple-swatch[title="white"] {
    border: 1px solid #ccc;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .sple-sale-badge {
        font-size: 14px;
        padding: 5px 10px;
    }

    .sple-title a {
        font-size: 15px;
    }

    .woocommerce-card__header .price {
        font-size: 16px;
    }
}