/* Product Card Style 4 (Inspired by Vineta Template) */
.card-product.style-4 {
    position: relative;
    border: 1px solid var(--line, #ebebeb);
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease-in-out;
    background-color: var(--white, #fff);
}

.card-product.style-4:hover {
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
}

.card-product-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0; /* Keep top radius consistent */
}

/* asp-ratio-0 and line-2 might be specific to template, 
   we'll focus on making it look good with current content */
.card-product-wrapper.radius-16 {
    border-radius: 16px;
}

.card-product-wrapper .product-img {
    display: block;
    position: relative;
    /* Control aspect ratio via padding-bottom if images vary a lot,
       or set a fixed height for uniformity */
    /* padding-bottom: 125%; For a 4:5 aspect ratio */
    height: 250px; /* Example fixed height, adjust as needed */
    background-color: #f5f5f5; /* Placeholder background for images */
}

.card-product-wrapper .product-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or contain, depending on desired look */
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.card-product-wrapper .product-img img.img-hover {
    opacity: 0;
}

.card-product.style-4:hover .card-product-wrapper .product-img img.img-product {
    opacity: 0;
}

.card-product.style-4:hover .card-product-wrapper .product-img img.img-hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Discount Badge */
.on-sale-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.on-sale-item {
    background-color: var(--template-secondary-color, #4b4ded); /* Use CSS variable, fallback */
    color: var(--white, #fff);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* Hover Buttons */
.list-product-btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, bottom .3s ease-in-out;
}

.card-product.style-4:hover .list-product-btn {
    opacity: 1;
    visibility: visible;
    bottom: 20px;
}

.list-product-btn li .box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white, #fff);
    color: var(--dark-3, #282828);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    transition: all .3s ease-in-out;
    position: relative; /* For tooltip positioning */
}

.list-product-btn li .box-icon:hover {
    background-color: var(--template-primary-color, #ff6f61); /* Use CSS variable, fallback */
    color: var(--white, #fff);
}

.list-product-btn li .box-icon .icon {
    font-size: 18px; /* TIO icons might inherit this, or adjust if needed */
    /* The actual icon character is handled by TIO CSS */
}

/* Tooltip (Simple CSS Tooltip) */
.hover-tooltip .tooltip {
    visibility: hidden;
    width: max-content;
    background-color: var(--dark-3, #282828);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px 10px;
    position: absolute;
    z-index: 10;
    bottom: 125%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

.hover-tooltip .tooltip::after { /* Tooltip arrow */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark-3, #282828) transparent transparent transparent;
}

.hover-tooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Out of Stock Badge */
.out_of_stock_badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    z-index: 2;
}

/* Product Info */
.card-product-info {
    padding: 15px;
}

.card-product-info .name-product {
    display: block;
    color: var(--dark-2, #101828);
    font-size: 15px; /* text-md equivalent */
    font-weight: 600; /* fw-medium equivalent */
    margin-bottom: 8px;
    line-height: 1.3;
    height: 39px; /* Approx 2 lines with 1.3 line-height */
    overflow: hidden;
    text-decoration: none;
}

.card-product-info .name-product:hover {
    color: var(--template-primary-color, #ff6f61); /* Use CSS variable, fallback */
}

.card-product-info .price-wrap {
    font-weight: 600; /* fw-medium */
    font-size: 16px;
    margin-bottom: 10px;
}

.card-product-info .price-wrap .price-old {
    color: var(--text-3, #667085);
    font-size: 13px;
    margin-right: 5px;
}

.card-product-info .price-wrap .price-new {
    color: var(--template-primary-color, #ff6f61); /* Use CSS variable, fallback */
}

.card-product-info .rating-show {
    margin-bottom: 8px;
}
.card-product-info .rating-show .text-warning {
    color: var(--template-primary-color, #ff6f61) !important; /* Use CSS variable, fallback */
}

/* Bottom Pills/Swatches Placeholder */
.list-color-product {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    justify-content: center; /* Added to center the pills */
}

.list-color-product .list-color-item {
    /* Basic styling for pills, customize as needed */
    border: 1px solid var(--line, #ebebeb);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all .2s ease;
}
.list-color-product .list-color-item:hover {
    border-color: var(--template-primary-color, #ff6f61); /* Use CSS variable, fallback */
    background-color: var(--template-primary-color-alpha, rgba(255,111,97,0.1)); /* Use CSS variable, fallback */
}

.list-color-product .list-color-item img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

/* Removed placeholder icon ::before rules as TIO classes handle this */