/**
 * PneuPro — WooCommerce Archive Card Styles
 * woocommerce-custom.css — consolidated single-source file
 * Place in: child-theme or load via wp_enqueue_styles in plugin
 * ============================================================
 */


/* ============================================================
   1. GRID LAYOUT
   Override WooCommerce's float/column system completely.
   Target every columns-X variant to win the specificity war.
   ============================================================ */

.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    float: none !important;
    clear: both !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px !important;
    align-items: stretch !important; /* prevents rows from stretching unevenly */
}


/* ============================================================
   2. CARD — base styles
   Single block for li.product — no duplicate rules anywhere.
   ============================================================ */

.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products li.product.outofstock {
    /* Layout reset — kill WooCommerce float system */
    float: none !important;
    width: 100% !important;   /* fill the grid cell */
    max-width: none !important;
    min-width: 0 !important;  /* prevents grid cell blowout on long text */
    clear: none !important;
    margin: 0 !important;

    /* Card appearance */
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f4f8 !important;
    padding: 0 !important;     /* image bleeds to edges — padding handled inside */
    box-sizing: border-box !important;

    /* Floating effect — layered shadows */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 16px -4px rgba(0, 0, 0, 0.08),
        0 16px 32px -8px rgba(0, 0, 0, 0.06) !important;

    /* Card internals */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important; /* keeps image radius clean */

    /* Smooth transition */
    transition:
        transform 0.4s cubic-bezier(0.2, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.2s ease !important;
}

/* ── Hover: lift + blue border + deeper shadow ─────── */
.woocommerce ul.products li.product:hover {
    transform: translateY(-7px) !important;
    z-index: 10 !important;
    border-color: #2b70ff !important;
    box-shadow:
        0 2px 4px rgba(43, 112, 255, 0.06),
        0 12px 28px -4px rgba(43, 112, 255, 0.14),
        0 24px 48px -8px rgba(43, 112, 255, 0.10) !important;
}


/* ============================================================
   3. IMAGE AREA
   Bleeds to card edges with rounded top corners.
   Consistent 200px height across all cards.
   ============================================================ */

.woocommerce ul.products li.product a img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    background-color: #f8fafc !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;       /* no negative margins — overflow:hidden on card handles it */
    padding: 16px !important;   /* breathing room around the tire */
    box-sizing: border-box !important;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04) !important;
}


/* ============================================================
   4. CARD INNER PADDING
   Applied to the link wrapper and everything below the image.
   ============================================================ */

/* The main product link (wraps image + title + price) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Everything below the image gets padding */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .pneu-specs {
    padding-left: 16px !important;
    padding-right: 16px !important;
}


/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1e293b !important;
    text-align: center !important;
    padding-top: 14px !important;
    padding-bottom: 4px !important;

    /* Clamp to 2 lines — keeps all cards same height */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: calc(15px * 1.4 * 2) !important; /* 2 lines worth */
}


/* ============================================================
   6. SPEC TAG (model name tag below title)
   ============================================================ */

.pneu-specs {
    display: block !important;
    text-align: center !important;
    margin: 8px 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.pneu-specs a:not(.woocommerce-loop-product__link) {
    display: inline-block !important;
    color: #475569 !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: 1px dashed #cbd5e1 !important;
    margin: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    transition: all 0.2s ease !important;
}

.pneu-specs a:not(.woocommerce-loop-product__link):hover {
    border-style: solid !important;
    border-color: #2b70ff !important;
    color: #2b70ff !important;
    background: #eff6ff !important;
}

/* Ghost link WooCommerce adds next to the tag — hidden */
.pneu-specs a.woocommerce-loop-product__link {
    display: none !important;
}


/* ============================================================
   7. PRICE
   ============================================================ */

.woocommerce ul.products li.product .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #2b70ff !important;
    text-align: center !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    /* Height fix — merged here, not a separate rule */
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Sale: old price on its own line, muted */
.woocommerce ul.products li.product .price del {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-bottom: 2px !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    display: block !important;
}


/* ============================================================
   8. SALE BADGE
   ============================================================ */

.woocommerce ul.products li.product .onsale {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    background: #ff2d2d !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 5px 12px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    z-index: 5 !important;
}


/* ============================================================
   9. BRAND BADGE
   ============================================================ */

.pneu-brand-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 5 !important;
    pointer-events: none !important;

    /* Text fallback (when no logo image) */
    background: #2b70ff !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* When badge contains a logo image — hide the bg */
.pneu-brand-badge:has(img) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pneu-brand-logo {
    display: block !important;
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 110px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2)) !important;
}


/* ============================================================
   10. ADD TO CART BUTTON
   ============================================================ */

.woocommerce ul.products li.product .button {
    display: block !important;
    background: #2b70ff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 12px 16px 16px !important; /* inner padding from card edges */
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.woocommerce ul.products li.product .button:hover {
    background: #1a56cc !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Loading / added states */
.woocommerce ul.products li.product .button.loading,
.woocommerce ul.products li.product .button.added {
    background: #1a56cc !important;
    opacity: 0.8 !important;
}

/* "View cart" link that appears after adding */
.woocommerce ul.products li.product a.added_to_cart {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    margin: -8px 16px 12px !important;
    transition: color 0.2s ease !important;
}

.woocommerce ul.products li.product a.added_to_cart:hover {
    color: #2b70ff !important;
}


/* ============================================================
   11. CATALOG HEADER ("N modèles trouvés")
   ============================================================ */

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    grid-column: 1 / -1; /* spans full grid width if accidentally inside grid */
}

.catalog-title {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.catalog-count { color: #2b70ff; }


/* ============================================================
   12. HIDE SHORT DESCRIPTION FROM LOOP
   ============================================================ */

.woocommerce ul.products li.product .woocommerce-product-details__short-description,
.woocommerce-loop-product__summary,
.archive.woocommerce ul.products li.product p:not(.price) {
    display: none !important;
}


/* ============================================================
   13. PAGINATION
   ============================================================ */

.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    justify-content: center !important;
    margin-top: 40px !important;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #64748b !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    border-color: #2b70ff !important;
    color: #2b70ff !important;
}

.woocommerce-pagination ul.page-numbers li span.current {
    background: #2b70ff !important;
    color: #ffffff !important;
    border-color: #2b70ff !important;
}

/* Remove float clearfix pseudo-elements — they become ghost grid cells */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .woocommerce ul.products.columns-1,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 540px) {
    .woocommerce ul.products.columns-1,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .woocommerce ul.products li.product a img {
        height: 170px !important;
    }
}