/**
 * SD Design – Produktkort "Navy Header"
 * Version: 2.1.5
 * Target: Jupiter theme + WooCommerce
 *
 * Changelog:
 * v2.1.5 — Förenklad hover-selector (matchar samma bilder som initial-regel) + tagit bort
 *          will-change/backface-visibility som krockade på Chrome Windows. Tagit bort
 *          Firefox-only override (alla browsers använder nu samma CSS).
 */

:root {
    --sd-navy:       #1a2744;
    --sd-navy-light: #2a3a5c;
    --sd-white:      #ffffff;
    --sd-gray-bg:    #f4f4f6;
    --sd-gray-border:#e4e6eb;
    --sd-gray-text:  #999999;
    --sd-radius:     12px;
}

/* Kortcontainer */
ul.products li.product,
.woocommerce ul.products li.product,
.mk-product-loop .product {
    background: var(--sd-white) !important;
    border-radius: var(--sd-radius) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    padding: 0 !important;
}

/* Bild — täcker hela rutan, ingen padding, smidig zoom-transition */
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product .wp-post-image,
ul.products li.product a img,
.woocommerce ul.products li.product a img,
.mk-product-loop .product img {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 250px !important;
    display: block !important;
    transition: transform .3s ease !important;
    box-sizing: border-box !important;
}

/* Hover-zoom — matchar SAMMA bilder som initial-regel (bredd selector så Chrome Windows funkar) */
ul.products li.product:hover .attachment-woocommerce_thumbnail,
ul.products li.product:hover .wp-post-image,
ul.products li.product:hover a img,
.woocommerce ul.products li.product:hover a img,
.mk-product-loop .product:hover img {
    transform: scale(1.1) !important;
}

/* Förhindra att text/pris/knapp rör sig */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product .price,
ul.products li.product .button,
ul.products li.product a.add_to_cart_button {
    transform: none !important;
    transition: none !important;
}

/* Bildwrap om Jupiter har en */
ul.products li.product .mk-shop-item-detail,
ul.products li.product .product-internal,
ul.products li.product .product-loop-image,
.mk-product-loop .product .product-loop-image {
    background: var(--sd-navy) !important;
    border-radius: var(--sd-radius) var(--sd-radius) 0 0 !important;
    overflow: hidden !important;
    display: block !important;
}

/* Bildlänk – klippa zoom utan att påverka text */
ul.products li.product > a:first-child,
.woocommerce ul.products li.product > a:first-child {
    overflow: hidden !important;
    display: block !important;
}

/* Titel — max 2 rader, radbrytning mitt i ord vid behov */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.mk-product-loop .product h2 {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #1a1e2e !important;
    padding: 0 18px !important;
    margin: 14px 0 6px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: calc(14px * 1.45 * 2) !important;
}

/* Pris */
ul.products li.product .price,
.woocommerce ul.products li.product .price,
.mk-product-loop .product .price {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--sd-navy) !important;
    padding: 0 18px !important;
    margin: 0 0 4px !important;
}

ul.products li.product .price .woocommerce-Price-currencySuffix,
ul.products li.product .price .tax_label {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--sd-gray-text) !important;
}

/* Lägg-till-knapp */
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.ajax_add_to_cart,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart,
body ul.products li.product a.button,
body .woocommerce ul.products li.product a.button,
.mk-product-loop .product .button,
.mk-product-loop .product a.add_to_cart_button,
.jupiter .woocommerce ul.products li.product a.button,
.mk-main-wrapper-holder ul.products li.product a.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 14px 18px 18px !important;
    padding: 10px 0 !important;
    border: 1px solid var(--sd-navy) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--sd-navy) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all .15s ease !important;
    width: calc(100% - 36px) !important;
    box-sizing: border-box !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.ajax_add_to_cart:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.ajax_add_to_cart:hover,
body ul.products li.product a.button:hover,
body .woocommerce ul.products li.product a.button:hover,
.mk-product-loop .product .button:hover,
.mk-product-loop .product a.add_to_cart_button:hover,
.jupiter .woocommerce ul.products li.product a.button:hover,
.mk-main-wrapper-holder ul.products li.product a.button:hover {
    background: var(--sd-navy) !important;
    color: var(--sd-white) !important;
}

/* Rea-badge */
ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale {
    background: var(--sd-navy) !important;
    color: var(--sd-white) !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    line-height: 1 !important;
}

/* Reset Jupiter padding */
ul.products li.product .mk-shop-item-detail {
    padding: 0 !important;
}