/**
 * Product Card Styles
 * 
 * Reusable product card component.
 * Used in: Similar Products, Bestsellers, recommendations.
 * 
 * @package Owleys
 * @since 1.0.0
 */

/* ========================================
   Reset inherited .product-item styles from AliDropship
   ======================================== */
.product-card.product-item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: auto !important;
    float: none !important;
    position: relative !important;
}

.product-card.product-item * {
    box-sizing: border-box;
}

/* ========================================
   Base Card Styles
   ======================================== */
.product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Lift effect only on desktop (with mouse) */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover {
        transform: translateY(-3px);
    }
}

/* Link - flex container for content */
.product-card__link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 12px;
    color: inherit;
    text-decoration: none;
}

.product-card__link:hover {
    text-decoration: none;
    color: inherit;
}

/* ========================================
   Thumbnail
   ======================================== */
.product-card__thumb {
    position: relative;
    background: #f0f0f0;
    overflow: hidden;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    /* No border-radius here - card's overflow:hidden clips top corners */
}

.product-card__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Quick View button on thumbnail - Glassmorphism (Liquid Glass) */
.product-card__quickview {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
}

.product-card__quickview svg {
    width: 18px;
    height: 18px;
    color: #333;
    transition: color 0.2s ease;
}

.product-card:hover .product-card__quickview {
    opacity: 1;
    transform: translateY(0);
}

.product-card__quickview:hover {
    background: linear-gradient(
        135deg,
        #ff8338 0%,
        #f57528 100%
    );
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 
        0 6px 20px rgba(255, 131, 56, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.product-card__quickview:hover svg {
    color: #fff;
}

/* Mobile: always show quickview button */
@media (max-width: 767px) {
    .product-card__quickview {
        opacity: 1;
        transform: translateY(0);
        width: 32px;
        height: 32px;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.3) 100%
        );
        border: 1.5px solid rgba(0, 0, 0, 0.2);
        box-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.3),
            0 1px 4px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
    }
    
    .product-card__quickview svg {
        width: 16px;
        height: 16px;
    }
}

/* Promo badge on thumbnail */
.product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    max-width: calc(100% - 20px);
    z-index: 1;
}

@media (max-width: 767px) {
    .product-card__badge {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* ========================================
   Content
   ======================================== */
.product-card__content {
    margin: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ========================================
   Price
   ======================================== */
.product-card__price {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-align: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.product-card__price-current {
    color: #008541;
}

/* No discount - black price */
.product-card__price:not(:has(.product-card__price-old-wrap)) .product-card__price-current {
    color: #333;
}

.product-card__price-old-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.product-card__price-old {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

.product-card__discount {
    font-size: 11px;
    color: #fff;
    background: #ff8338;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* ========================================
   Title - fixed height for 2 lines
   ======================================== */
.product-card__title {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin: 8px 0 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: calc(16px * 1.4 * 2); /* 2 lines height */
    flex-shrink: 0;
}

/* ========================================
   Rating - pushed to bottom
   ======================================== */
.product-card__rating {
    font-size: 13px;
    color: #333;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px; /* row-gap, column-gap between stat groups */
    margin-top: auto;
    padding-top: 8px;
}

/* Stat group: icon + text with tight spacing */
.product-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* tight gap inside group */
}

/* Star icon as CSS mask */
.product-card__star {
    width: 12px;
    height: 12px;
    background-color: #FF8338;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M5.78304 0L7.65259 2.99144L11.283 3.72412L8.80804 6.30561L9.18223 9.74987L5.78304 8.35387L2.38386 9.74987L2.75804 6.30561L0.283042 3.72412L3.91349 2.99144L5.78304 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M5.78304 0L7.65259 2.99144L11.283 3.72412L8.80804 6.30561L9.18223 9.74987L5.78304 8.35387L2.38386 9.74987L2.75804 6.30561L0.283042 3.72412L3.91349 2.99144L5.78304 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    flex-shrink: 0;
}

/* Reviews icon (speech bubble) - cropped viewBox for tighter fit */
.product-card__reviews-icon {
    width: 12px;
    height: 12px;
    background-color: #999;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.5 2.5 12 11'%3E%3Cpath d='M8.545 13C11.93 13 14 11.102 14 8s-2.07-5-5.455-5C5.161 3 3.091 4.897 3.091 8c0 1.202.31 2.223.889 3.023-.2.335-.42.643-.656.899-.494.539-.494 1.077.494 1.077.89 0 1.652-.15 2.308-.394.703.259 1.514.394 2.42.394'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.5 2.5 12 11'%3E%3Cpath d='M8.545 13C11.93 13 14 11.102 14 8s-2.07-5-5.455-5C5.161 3 3.091 4.897 3.091 8c0 1.202.31 2.223.889 3.023-.2.335-.42.643-.656.899-.494.539-.494 1.077.494 1.077.89 0 1.652-.15 2.308-.394.703.259 1.514.394 2.42.394'/%3E%3C/svg%3E") center / contain no-repeat;
    flex-shrink: 0;
}

/* Sales icon (cart) - cropped viewBox for tighter fit */
.product-card__sales-icon {
    width: 12px;
    height: 12px;
    background-color: #999;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 4 20 17'%3E%3Cpath d='M9.925 5.371a1 1 0 1 0-1.858-.742L6.317 9h-1.2c-1.076 0-1.614 0-1.913.346-.3.346-.222.878-.067 1.942l.271 1.864c.475 3.265.902 4.898 2.03 5.873s2.778.975 6.08.975h.96c3.302 0 4.953 0 6.08-.975 1.128-.975 1.559-2.608 2.034-5.873l.271-1.864c.155-1.064.233-1.596-.067-1.942S19.96 9 18.883 9h-1.205l-1.75-4.371a1 1 0 0 0-1.857.742L15.523 9h-7.05zM10.997 14v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 2 0M14 13a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 4 20 17'%3E%3Cpath d='M9.925 5.371a1 1 0 1 0-1.858-.742L6.317 9h-1.2c-1.076 0-1.614 0-1.913.346-.3.346-.222.878-.067 1.942l.271 1.864c.475 3.265.902 4.898 2.03 5.873s2.778.975 6.08.975h.96c3.302 0 4.953 0 6.08-.975 1.128-.975 1.559-2.608 2.034-5.873l.271-1.864c.155-1.064.233-1.596-.067-1.942S19.96 9 18.883 9h-1.205l-1.75-4.371a1 1 0 0 0-1.857.742L15.523 9h-7.05zM10.997 14v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 2 0M14 13a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1'/%3E%3C/svg%3E") center / contain no-repeat;
    flex-shrink: 0;
}

/* Rating separator */
.product-card__rating-sep {
    color: #ccc;
    margin: 0 2px;
}


/* ========================================
   Delivery date
   ======================================== */
.product-card__delivery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #008541;
    margin-top: 6px;
}

.product-card__delivery-icon {
    width: 1.4em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.2 16.7'%3E%3Cpath d='M32.5,10.6L32.5,10.6c0.1-0.7,0.2-1.4,0.3-2.2c0.3-1.8-1.5-1.9-1.5-1.9l-1.2,0c-0.4-0.8-0.8-1.8-1.2-2.7C28.2,2.2,27,2.3,27,2.3h-4.1l0.3-1.5C23.3,0.4,22.9,0,22.5,0H2.9h0l0,0C2.5,0,0.8,0,0.5,0S0,0.4,0,0.7s0.2,1.6,3,1.6l0,0l0,0h13.3c0.4,0,0.7,0.4,0.6,0.8c-0.1,0.4-0.5,0.8-0.9,0.8H4.9c0,0,0,0-0.1,0v0c-0.4,0-2.1,0-2.4,0c-0.3,0-0.5,0.4-0.5,0.7S2.1,6,4.9,6v0h8.8c0.4,0,0.7,0.4,0.6,0.8c-0.1,0.4-0.5,0.8-0.9,0.8H7.2c0,0-0.1,0-0.1,0l0,0c-0.4,0-2.1,0-2.4,0c-0.3,0-0.5,0.4-0.5,0.7c0,0.3,0.2,1.6,3,1.6v0c0,0,0,0,0,0h2.2l-0.7,3.9c-0.1,0.5,0.2,0.8,0.7,0.8h1.5c0.2,1.3,1.3,2.2,2.7,2.2c1.4,0,2.8-0.9,3.5-2.2h7.2c0.2,1.3,1.3,2.2,2.7,2.2c1.4,0,2.8-0.9,3.5-2.2h1.3c0.5,0,0.9-0.4,1-0.8l0.4-2.2C33.2,11,32.9,10.6,32.5,10.6z M15.7,13.5c-0.2,0.9-1,1.6-1.9,1.6c-0.9,0-1.5-0.7-1.3-1.6c0.2-0.9,1-1.6,1.9-1.6C15.3,11.9,15.9,12.6,15.7,13.5z M22.9,6.7c-0.4,0-0.7-0.4-0.6-0.8l0.3-1.5c0.1-0.5,0.5-0.8,0.9-0.8h3.1c0.7,0,1,0.9,1,0.9s0.4,1,0.6,1.4c0.2,0.5,0.1,0.8-0.9,0.8H22.9z M29.1,13.5c-0.2,0.9-1,1.6-1.9,1.6c-0.9,0-1.4-0.7-1.3-1.6c0.2-0.9,1-1.6,1.9-1.6C28.7,11.9,29.3,12.6,29.1,13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.2 16.7'%3E%3Cpath d='M32.5,10.6L32.5,10.6c0.1-0.7,0.2-1.4,0.3-2.2c0.3-1.8-1.5-1.9-1.5-1.9l-1.2,0c-0.4-0.8-0.8-1.8-1.2-2.7C28.2,2.2,27,2.3,27,2.3h-4.1l0.3-1.5C23.3,0.4,22.9,0,22.5,0H2.9h0l0,0C2.5,0,0.8,0,0.5,0S0,0.4,0,0.7s0.2,1.6,3,1.6l0,0l0,0h13.3c0.4,0,0.7,0.4,0.6,0.8c-0.1,0.4-0.5,0.8-0.9,0.8H4.9c0,0,0,0-0.1,0v0c-0.4,0-2.1,0-2.4,0c-0.3,0-0.5,0.4-0.5,0.7S2.1,6,4.9,6v0h8.8c0.4,0,0.7,0.4,0.6,0.8c-0.1,0.4-0.5,0.8-0.9,0.8H7.2c0,0-0.1,0-0.1,0l0,0c-0.4,0-2.1,0-2.4,0c-0.3,0-0.5,0.4-0.5,0.7c0,0.3,0.2,1.6,3,1.6v0c0,0,0,0,0,0h2.2l-0.7,3.9c-0.1,0.5,0.2,0.8,0.7,0.8h1.5c0.2,1.3,1.3,2.2,2.7,2.2c1.4,0,2.8-0.9,3.5-2.2h7.2c0.2,1.3,1.3,2.2,2.7,2.2c1.4,0,2.8-0.9,3.5-2.2h1.3c0.5,0,0.9-0.4,1-0.8l0.4-2.2C33.2,11,32.9,10.6,32.5,10.6z M15.7,13.5c-0.2,0.9-1,1.6-1.9,1.6c-0.9,0-1.5-0.7-1.3-1.6c0.2-0.9,1-1.6,1.9-1.6C15.3,11.9,15.9,12.6,15.7,13.5z M22.9,6.7c-0.4,0-0.7-0.4-0.6-0.8l0.3-1.5c0.1-0.5,0.5-0.8,0.9-0.8h3.1c0.7,0,1,0.9,1,0.9s0.4,1,0.6,1.4c0.2,0.5,0.1,0.8-0.9,0.8H22.9z M29.1,13.5c-0.2,0.9-1,1.6-1.9,1.6c-0.9,0-1.4-0.7-1.3-1.6c0.2-0.9,1-1.6,1.9-1.6C28.7,11.9,29.3,12.6,29.1,13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    flex-shrink: 0;
}

/* ========================================
   Add to Cart Button (matches cross-sell-btn)
   ======================================== */
.product-card__atc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 10px 12px;
    background: #fff;
    color: #ff8338;
    border: 1px solid #ff8338;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-family: inherit;
}

/* Cart icon via CSS mask */
.product-card__atc::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.925 5.371a1 1 0 1 0-1.858-.742L6.317 9h-1.2c-1.076 0-1.614 0-1.913.346-.3.346-.222.878-.067 1.942l.271 1.864c.475 3.265.902 4.898 2.03 5.873s2.778.975 6.08.975h.96c3.302 0 4.953 0 6.08-.975 1.128-.975 1.559-2.608 2.034-5.873l.271-1.864c.155-1.064.233-1.596-.067-1.942S19.96 9 18.883 9h-1.205l-1.75-4.371a1 1 0 0 0-1.857.742L15.523 9h-7.05zM10.997 14v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 2 0M14 13a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.925 5.371a1 1 0 1 0-1.858-.742L6.317 9h-1.2c-1.076 0-1.614 0-1.913.346-.3.346-.222.878-.067 1.942l.271 1.864c.475 3.265.902 4.898 2.03 5.873s2.778.975 6.08.975h.96c3.302 0 4.953 0 6.08-.975 1.128-.975 1.559-2.608 2.034-5.873l.271-1.864c.155-1.064.233-1.596-.067-1.942S19.96 9 18.883 9h-1.205l-1.75-4.371a1 1 0 0 0-1.857.742L15.523 9h-7.05zM10.997 14v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 2 0M14 13a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-right: 6px;
    flex-shrink: 0;
}

.product-card__atc:hover {
    background: #ff8338;
    color: #fff;
    border-color: #ff8338;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 767px) {
    .product-card__link {
        padding: 10px;
    }
    
    .product-card__content {
        margin: 10px;
    }
    
    .product-card__price {
        font-size: 16px;
    }
    
    .product-card__title {
        font-size: 14px;
        min-height: calc(14px * 1.4 * 2);
    }
    
    .product-card__price-old {
        font-size: 12px;
    }
    
    .product-card__discount {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .product-card__rating {
        font-size: 12px;
        flex-wrap: nowrap; /* Force 1 line on mobile */
    }
    
    .product-card__rating .stat-label {
        display: none; /* Hide "reviews" and "sold" text on mobile */
    }
    
    .product-card__delivery {
        font-size: 11px;
    }
    
    .product-card__atc {
        font-size: 12px;
        padding: 8px 10px;
        margin: 0 10px 10px;
        width: calc(100% - 20px);
    }
    
    .product-card__atc::before {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   Grid Context (Similar Products, Categories, Archives)
   ======================================== */
.product-cards-grid,
.products_cont {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .product-cards-grid,
    .products_cont {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .product-cards-grid,
    .products_cont {
        gap: 12px;
    }
}

/* ==========================================================================
   SOLD OUT STATE
   ========================================================================== */

/* Card modifier for sold out products */
.product-card--sold-out {
    opacity: 0.85;
}

.product-card--sold-out .product-card__thumb img {
    filter: grayscale(40%) brightness(0.95);
    transition: filter 0.3s ease;
}

.product-card--sold-out:hover .product-card__thumb img {
    filter: grayscale(20%) brightness(1);
}

/* Sold out overlay on image */
.product-card__sold-out-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    /* No border-radius - inherits from parent's overflow */
}

.product-card__sold-out-overlay span {
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Out of stock text (replaces delivery date) */
.product-card__stock {
    font-size: 13px;
    margin-top: 6px;
}

.product-card__stock--out {
    color: #b91c1c;
    font-weight: 500;
}

/* Notify Me button (for sold out) - subtle secondary style */
.product-card__atc--notify {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}

.product-card__atc--notify:hover {
    background: #eee;
    border-color: #ccc;
    color: #333;
}

/* Bell icon instead of cart */
.product-card__atc--notify::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}