/* Modern Minimalist Product Card Styles - Ideaverde v3 */

/* Reset any framework outlines */
.product-layout,
.product-layout *,
.product-layout *::before,
.product-layout *::after {
    outline: none !important;
}

.product-layout .product-thumb {
    background-color: #ffffff;
    border: none !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 767px) {
    .main-products .product-layout {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .main-products .row,
    .main-products .products-row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }
    .product-layout .product-thumb {
        margin-bottom: 5px;
    }
    .product-layout .product-thumb .caption {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .product-layout .product-thumb .image img {
        max-height: 150px;
        object-fit: contain;
    }
}

.product-layout .product-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* Remove any default borders/outlines from framework */
.product-layout .product-thumb::before,
.product-layout .product-thumb::after {
    display: none !important;
    content: none !important;
}

/* Image Area */
.product-layout .product-thumb .image {
    background-color: #ffffff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding-top: 0;
    width: 100%;
    border: none !important;
}

.product-layout .product-thumb .image img {
    transition: transform 0.5s ease;
    margin: 0 auto;
}

/* Desktop: make the product photo fill the full card width so square images
   (including the second/hover image) don't leave white bars on the sides.
   Mobile keeps its own max-height/object-fit rule above. */
@media (min-width: 768px) {
    .product-layout .product-thumb .image img {
        width: 100%;
        height: auto;
    }
}

.product-layout .product-thumb:hover .image img {
    transform: scale(1.2);
}

/* Caption Area */
.product-layout .product-thumb .caption {
    padding: 20px 8px 20px;
    background: #fff;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: none !important;
}

/* Stats (Brand) - Centered & Clean */
.product-layout .product-thumb .stats {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    background: transparent !important;
    border: none !important;
    font-size: 11px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    order: -1;
}

.product-layout .product-thumb .stat-1 {
    display: block;
    text-align: center;
    width: 100%;
}
.product-layout .product-thumb .stat-1 .stats-label {
    display: none;
}
.product-layout .product-thumb .stat-2 {
    display: none !important;
}
.product-layout .product-thumb .stat-1 .stat-model {
    font-size: 12px;
}

/* Product Name */
.product-layout .product-thumb .name a {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #2d3748;
    text-decoration: none;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    margin-bottom: 4px;
    min-height: 40px !important;
    max-height: 40px !important; /* Hard cut - slightly under 2 lines to kill any overflow */
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease;
    white-space: normal !important;
    text-overflow: ellipsis;
}

.product-layout .product-thumb .name a:hover {
    color: #e63946;
}

/* Mobile: show 3 lines instead of 2 */
@media (max-width: 767px) {
    .product-layout .product-thumb .name a {
        -webkit-line-clamp: 3 !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    .product-layout {
        content-visibility: auto;
        contain-intrinsic-size: 250px;
    }

    .product-layout .product-thumb,
    .product-layout .product-thumb:hover {
        transform: none;
    }

    .product-layout .product-thumb .button-group.button-group-mobile,
    .product-layout .product-thumb .cart-group-mobile,
    .product-layout .product-thumb .button-group.button-group-mobile .btn-cart {
        width: 100%;
        max-width: none;
    }
    .product-layout .product-thumb .buttons-wrapper {
        padding-bottom: 5px;
    }
}

.product-layout .product-thumb .description {
    display: none;
}

/* Price Section - Pushed down closer to button */
.product-layout .product-thumb .price {
    margin: auto 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.product-layout .product-thumb .price-new,
.product-layout .product-thumb .price-normal {
    color: #e63946;
    font-weight: 700;
    font-size: 18px;
}

.product-layout .product-thumb .price-old {
    color: #cbd5e0;
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 500;
}

.product-layout .product-thumb .price-tax { display: none; }

/* Rating - Hide or minimize */
.product-layout .product-thumb .rating {
    display: none;
}

/* Buttons Wrapper */
.product-layout .product-thumb .button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none !important;
    background: transparent !important;
    margin-top: auto;
}

/* Cart Button */
.product-layout .product-thumb .btn-cart {
    background: #e63946 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    height: 38px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
    flex: 1;
    max-width: 140px;
}

.product-layout .product-thumb .btn-cart:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(230, 57, 70, 0.3);
}

.product-layout .product-thumb .btn-cart .fa {
    margin-right: 6px;
}

/* Stepper */
.product-layout .product-thumb .stepper {
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    height: 38px;
    display: flex;
    align-items: center;
}

.product-layout .product-thumb .stepper input {
    background: transparent;
    border: none;
    height: 100%;
    font-weight: 600;
    color: #4a5568;
    text-align: center;
    width: 32px;
    font-size: 13px;
}

.product-layout .product-thumb .stepper span {
    border-left: 1px solid #edf2f7;
    background: transparent;
    width: 22px;
    color: #718096;
}

/* Labels Container - Full width to allow positioning on both sides */
.product-layout .product-thumb .product-labels {
    position: absolute;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    height: 100%;
    display: block; /* Changed from flex to block to allow absolute children freely */
    pointer-events: none; /* click-through */
    z-index: 20;
}

.product-layout .product-thumb .product-label {
    border-radius: 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1;
    display: inline-block;
    margin: 0 !important;
    letter-spacing: 0.3px;
    pointer-events: auto; /* restore clicks */
}

/* Remove any pseudo-element outlines on labels */
.product-layout .product-thumb .product-label::before,
.product-layout .product-thumb .product-label::after {
    display: none !important;
    content: none !important;
}

.product-layout .product-thumb .product-label b {
    color: #ffffff !important;
}

/* Sale/Discount/Percentage label - TOP RIGHT of image */
.product-layout .product-thumb .product-label-sale,
.product-layout .product-thumb .product-label-percent,
.product-layout .product-thumb .product-label-percentage,
.product-layout .product-thumb .product-label-discount,
.product-layout .product-thumb .product-label[class*="percent"],
.product-layout .product-thumb .product-label[class*="sale"],
.product-layout .product-thumb .product-label[class*="discount"] {
    background-color: #e63946 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    border-radius: 0 !important;
}

/* Stock/New/Available label - stays TOP LEFT */
.product-layout .product-thumb .product-label-new,
.product-layout .product-thumb .product-label-stock,
.product-layout .product-thumb .product-label[class*="stock"],
.product-layout .product-thumb .product-label[class*="available"] {
    background-color: #38a169 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* HENDI custom leadtime label color */
.product-layout .product-thumb .product-label.hendi-leadtime-label {
    background-color: transparent !important;
}
.product-layout .product-thumb .product-label.hendi-leadtime-label b {
    background-color: rgba(80, 173, 85, 1) !important;
    color: #ffffff !important;
}

/* Secondary Buttons - No gray background */
.product-layout .product-thumb .btn-wishlist,
.product-layout .product-thumb .btn-compare {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: transparent !important;
    color: #a0aec0 !important;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.product-layout .product-thumb .btn-wishlist:hover,
.product-layout .product-thumb .btn-compare:hover {
    background: transparent !important;
    color: #e63946 !important;
}

/* Hide extra clutter */
.product-layout .product-thumb .extra-group {
    display: none;
}

/* Remove any wrapper outlines */
.product-layout .product-thumb .buttons-wrapper {
    border: none !important;
    background: transparent !important;
    padding: 0;
    margin: 0;
}

/* Mobile Add button with quantity */
.cart-group-mobile {
    display: flex;
    justify-content: center;
    margin-top: 3px;
}
.mobile-cart-row {
    display: inline-flex;
    align-items: stretch;
}
.mobile-qty-input {
    width: 28px;
    text-align: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    background: #fff;
    color: #333;
}
.mobile-qty-input::-webkit-inner-spin-button,
.mobile-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.btn-add-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 5px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #e63946;
    border: none;
    border-radius: 0 4px 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
}
.btn-add-mobile:active {
    background: #c62828;
}

/* Mobile in-stock badges - above image */
.mobile-stock-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    padding-top: 5px;
}
.mobile-stock-badge {
    font-family: inherit;
    font-size: 13.2px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 10px 1px;
    line-height: 1.1;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
}

/* === Phone product-card tweaks: centered promo price + discount badge === */
@media (max-width: 767px) {
    /* Discounted price: old (struck) price on TOP, current price BELOW, centered.
       The skin sets `.price > div{display:inline-flex;flex-wrap:wrap}` which glitched
       the stack, so we force a clean centered column here (!important + nowrap).
       The price block is bottom-anchored, so the current price still lines up with
       the non-discounted cards' prices. */
    .product-layout .product-thumb .caption .price,
    .product-layout .product-thumb .caption .price > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 1px;
    }
    .product-layout .product-thumb .caption .price .price-old {
        order: -1 !important; /* old price on top, current price below it */
    }
    /* The product name centers via text-align; the price + add-to-cart row center
       via flexbox, which optically lands a few px to the right — and the cart row
       leans further right because the qty box sits to the LEFT of the red button.
       Nudge both left so they read as centered (tweak the px to taste). */
    .product-layout .product-thumb .caption .price {
        transform: translateX(-14px);
    }
    .product-layout .product-thumb .cart-group-mobile {
        transform: translateX(-5px);
    }
    /* Top sticker shows AVAILABILITY only (the % is moved onto the photo below).
       Keep just the last availability badge so the look stays single-badge. */
    .product-layout .product-thumb .mobile-stock-badges .mobile-stock-badge:not(:last-child) {
        display: none;
    }
}

/* Discount % badge — top-right corner of the product photo (phone only; the
   element is only rendered for phone listings). */
.product-layout .product-thumb .image .mobile-discount-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #e63946;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 0 0 0 8px;
    z-index: 6;
    white-space: nowrap;
    pointer-events: none;
}

/* Availability badge — top-LEFT corner of the product photo (phone),
   mirroring the % badge on the right. Black by default, green via
   .mobile-stock-badge--green. Only the last availability label shows. */
.product-layout .product-thumb .image .mobile-stock-badge-photo {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 0 0 8px 0;
    z-index: 6;
    white-space: nowrap;
    pointer-events: none;
}
.product-layout .product-thumb .image .mobile-stock-badge-photo:not(:last-of-type) {
    display: none;
}

/* Phone: products without a price (price_value 0) render "0.00" — show no
   price at all for them instead. */
@media (max-width: 767px) {
    .product-layout.has-zero-price .product-thumb .price {
        display: none !important;
    }
}

/* Availability sticker (phone): green for in-stock (НАЛИЧНО) and HENDI lead-time,
   black for everything else. */
.product-layout .product-thumb .mobile-stock-badge--green {
    background: #38a169 !important;
}