/* ==========================================================================
   Flavor Product Grid - Frontend Styles
   ========================================================================== */

/* Container */
.fpg-container {
    display: grid;
    grid-template-columns: repeat(var(--fpg-columns, 4), 1fr);
    gap: var(--fpg-gap, 0px);
    background-color: var(--fpg-container-bg, transparent);
    width: 100%;
    box-sizing: border-box;
}

/* Product Card */
.fpg-product-card {
    background-color: var(--fpg-card-bg, #FFFFFF);
    border: 1px solid var(--fpg-card-border, #E5E5E5);
    border-radius: var(--fpg-card-radius, 0px);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.fpg-product-card.fpg-has-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Hover Effects */
.fpg-product-card.fpg-hover-shadow:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fpg-product-card.fpg-hover-scale:hover {
    transform: scale(1.02);
    z-index: 2;
}

.fpg-product-card.fpg-hover-border:hover {
    border-color: #1A1A1A;
}

/* Card Link */
.fpg-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.fpg-card-link:hover,
.fpg-card-link:focus,
.fpg-card-link:visited {
    text-decoration: none;
    color: inherit;
}

/* Image Wrapper */
.fpg-card-image-wrapper {
    position: relative;
    background-color: var(--fpg-image-bg, #FFFFFF);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Aspect Ratio Classes */
.fpg-card-image-wrapper.fpg-ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.fpg-card-image-wrapper.fpg-ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.fpg-card-image-wrapper.fpg-ratio-3x4 {
    aspect-ratio: 3 / 4;
}

.fpg-card-image-wrapper.fpg-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.fpg-card-image-wrapper.fpg-ratio-auto {
    height: var(--fpg-image-height, 280px);
}

/* Product Image */
.fpg-product-image {
    width: 100%;
    height: 100%;
    object-fit: var(--fpg-image-fit, contain);
    display: block;
    transition: opacity 0.3s ease;
}

/* Second Image on Hover */
.fpg-product-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fpg-image-fit, contain);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fpg-product-card:hover .fpg-product-image.fpg-has-hover-img {
    opacity: 0;
}

.fpg-product-card:hover .fpg-product-image-hover {
    opacity: 1;
}

/* Wishlist Icon */
.fpg-wishlist-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--fpg-wishlist-color, #CCCCCC);
    cursor: pointer;
    z-index: 3;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fpg-wishlist-icon:hover {
    color: var(--fpg-wishlist-hover, #E53935);
    transform: scale(1.15);
}

.fpg-wishlist-icon.fpg-wishlisted {
    color: var(--fpg-wishlist-hover, #E53935);
}

.fpg-wishlist-icon.fpg-wishlisted svg {
    fill: currentColor;
}

.fpg-wishlist-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Badges */
.fpg-badge {
    position: absolute;
    left: 10px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 3px;
    z-index: 3;
}

.fpg-badge-discount {
    top: 10px;
    background-color: var(--fpg-discount-bg, #E53935);
    color: var(--fpg-discount-color, #FFFFFF);
}

.fpg-badge-new {
    top: 36px;
    background-color: var(--fpg-new-bg, #4CAF50);
    color: var(--fpg-new-color, #FFFFFF);
}

.fpg-badge-discount + .fpg-badge-new {
    top: 36px;
}

.fpg-badge-new:first-child {
    top: 10px;
}

/* Card Content */
.fpg-card-content {
    padding: var(--fpg-card-padding, 14px);
    text-align: var(--fpg-title-align, left);
}

/* Product Title */
.fpg-product-title {
    font-family: var(--fpg-title-font, inherit);
    font-size: var(--fpg-title-size, 14px);
    font-weight: var(--fpg-title-weight, 500);
    color: var(--fpg-title-color, #1A1A1A);
    line-height: var(--fpg-title-lh, 1.4);
    margin: 0 0 6px 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: var(--fpg-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Product Brand */
.fpg-product-brand {
    display: block;
    font-size: var(--fpg-brand-size, 13px);
    font-weight: var(--fpg-brand-weight, 400);
    color: var(--fpg-brand-color, #666666);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Product Collection */
.fpg-product-collection {
    display: block;
    font-size: var(--fpg-collection-size, 12px);
    color: var(--fpg-collection-color, #888888);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Product Rating */
.fpg-product-rating {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 1px;
}

.fpg-star {
    font-size: 14px;
    line-height: 1;
}

.fpg-star-filled {
    color: var(--fpg-star-color, #FFC107);
}

.fpg-star-empty {
    color: var(--fpg-star-empty, #E0E0E0);
}

.fpg-rating-count {
    font-size: 11px;
    color: #999;
    margin-left: 4px;
}

/* Product Stock */
.fpg-product-stock {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
}

.fpg-stock-in {
    color: var(--fpg-stock-in, #4CAF50);
}

.fpg-stock-out {
    color: var(--fpg-stock-out, #E53935);
}

/* Product Price */
.fpg-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fpg-price-current {
    font-size: var(--fpg-price-size, 15px);
    font-weight: var(--fpg-price-weight, 600);
    color: var(--fpg-price-color, #1A1A1A);
    line-height: 1.2;
}

.fpg-price-current.fpg-price-sale {
    color: var(--fpg-sale-price-color, #E53935);
}

.fpg-price-old {
    font-size: calc(var(--fpg-price-size, 15px) - 2px);
    font-weight: 400;
    color: var(--fpg-old-price-color, #999999);
    text-decoration: line-through;
    line-height: 1.2;
}

.fpg-price-plus {
    font-size: var(--fpg-price-size, 15px);
    font-weight: var(--fpg-price-weight, 600);
    color: var(--fpg-price-color, #1A1A1A);
    line-height: 1.2;
}

/* Add to Cart Button */
.fpg-card-actions {
    padding: 0 var(--fpg-card-padding, 14px) var(--fpg-card-padding, 14px);
}

.fpg-add-to-cart-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: center;
    background-color: var(--fpg-cart-btn-bg, #1A1A1A);
    color: var(--fpg-cart-btn-color, #FFFFFF);
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.fpg-add-to-cart-btn:hover {
    background-color: var(--fpg-cart-btn-hover, #333333);
    color: var(--fpg-cart-btn-color, #FFFFFF);
    text-decoration: none;
}

/* Pagination */
.fpg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 24px 0;
}

.fpg-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    color: var(--fpg-page-color, #999999);
    text-decoration: none;
    transition: all 0.2s ease;
    background: #fff;
}

.fpg-page:hover {
    border-color: #1A1A1A;
    color: #1A1A1A;
    text-decoration: none;
}

.fpg-page.active {
    background-color: var(--fpg-page-active, #1A1A1A);
    border-color: var(--fpg-page-active, #1A1A1A);
    color: #FFFFFF;
}

.fpg-ellipsis {
    border: none;
    background: none;
    cursor: default;
    color: #999;
}

.fpg-ellipsis:hover {
    border: none;
    color: #999;
}

/* No Products */
.fpg-no-products,
.fpg-error {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 15px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
    .fpg-container {
        grid-template-columns: repeat(var(--fpg-columns-tablet, 3), 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .fpg-container {
        grid-template-columns: repeat(var(--fpg-columns-mobile, 2), 1fr);
    }

    .fpg-product-title {
        font-size: var(--fpg-title-size-m, 12px);
    }

    .fpg-product-brand {
        font-size: var(--fpg-brand-size-m, 11px);
    }

    .fpg-price-current {
        font-size: var(--fpg-price-size-m, 13px);
    }

    .fpg-price-old {
        font-size: calc(var(--fpg-price-size-m, 13px) - 2px);
    }

    .fpg-price-plus {
        font-size: var(--fpg-price-size-m, 13px);
    }

    .fpg-card-content {
        padding: 10px 12px;
    }

    .fpg-wishlist-icon {
        top: 8px;
        right: 8px;
    }

    .fpg-wishlist-icon svg {
        width: 18px;
        height: 18px;
    }

    .fpg-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .fpg-page {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
}