/* ==============================================================
   1. CUSTOM SHORTCODE & BLOCK STYLES: Product Showcase
   This section styles the product showcase generated via Block, Widget, or Shortcode.
   It preserves the exact card layout, typography, and hover effects across any theme.
   ============================================================== */

/* --- 1.1 Grid Layout --- */
/* The main container for the product grid using CSS Grid for flexible columns */
.luvera-product-grid {
    display: grid;
    gap: 30px;
    margin: 20px 0;
}

/* Modifiers to control the number of columns per row */
.luvera-product-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.luvera-product-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.luvera-product-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Responsive breakpoints so grids adapt cleanly on tablets and phones */
@media (max-width: 991px) {
    .luvera-product-grid.columns-4,
    .luvera-product-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .luvera-product-grid.columns-4,
    .luvera-product-grid.columns-3,
    .luvera-product-grid.columns-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* --- 1.2 Card Container --- */
/* Core styling for individual product cards, including shadow and rounded corners */
.luvera-product-card {
    background: #fff;
    border-radius: 8px;
    padding: 0;
    /* Ensures the image touches the very edge of the card */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Important: masks elements sliding inside the card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover transition */
}

/* Wrapper linking the whole card (clickable area) */
.luvera-product-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

/* --- 1.3 Image Presentation & Hover Effects --- */
/* Wrapper containing the product image(s). Keeps images bounded properly. */
.luvera-product-image-wrap {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    /* Sits below the sliding info card */
}

/* Primary image setting: square aspect ratio to keep grid uniform */
.luvera-product-image-wrap img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease, opacity 0.5s ease;
    will-change: transform, opacity;
}

/* Secondary image shown on hover. Absolutely positioned over the main image. */
.luvera-product-image-wrap .luvera-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Hidden by default until hover */
    z-index: 2;
    /* Layered directly above the primary image */
}

/* On hover: zoom the main image slightly and fade in the secondary image */
.luvera-product-card:hover .luvera-product-image-wrap img {
    transform: scale(1.08);
}

.luvera-product-card:hover .luvera-product-image-wrap .luvera-hover-img {
    opacity: 1;
}

/* --- 1.4 Product Info Panel --- */
/* The white section at the bottom containing the title and price. */
.luvera-product-info-card {
    background: #fff;
    position: relative;
    z-index: 2;
    /* Ensure it stays above the zooming images */
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth sliding animation */
    transform: translateY(0);
}

/* On card hover, slide the info panel up to reveal action buttons underneath */
.luvera-product-card:hover .luvera-product-info-card {
    transform: translateY(-45px);
    /* Distance equal to button height */
}

/* Typography for Product Titles */
.luvera-product-title {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    line-height: 1.3;
    color: #1a1a1a;
}

/* Typography for Product Prices */
.luvera-product-price {
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 0;
    color: #444;
    display: flex;
    justify-content: center;
    gap: 5px;
}

/* Keep things tidy by hiding default WooCommerce screen reader texts on custom layout */
.luvera-product-price .screen-reader-text {
    display: none !important;
}

/* --- 1.5 Action Buttons (Add to Cart / View) --- */
/* Hidden by default below the card. Revealed when the info panel slides up. */
.luvera-action-buttons {
    position: absolute;
    bottom: -50px;
    /* Initially pushed outside the visible card area */
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Prevents clicks while hidden */
    transition: opacity 0.3s ease, bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.3s ease;
}

/* Slide into view and become active on hover */
.luvera-product-card:hover .luvera-action-buttons {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    bottom: 20px;
    /* Aligns within the padding of the card */
}

/* Base styles for all buttons (Add to cart, View, etc.) - works with any theme */
.luvera-button {
    background-color: var(--global-palette-btn-bg, var(--global-palette1, #000));
    color: var(--global-palette-btn, var(--global-palette9, #fff));
    padding: 10px 5px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--global-palette-btn-bg, var(--global-palette1, #000));
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Button Hover State */
.luvera-button:hover {
    background-color: var(--global-palette-btn-bg-hover, var(--global-palette2, #333));
    color: var(--global-palette-btn-hover, var(--global-palette9, #fff));
    border-color: var(--global-palette-btn-bg-hover, var(--global-palette2, #333));
}

/* Specific styling for the 'Order Now' / 'View Cart' secondary button */
.luvera-view-button {
    background-color: var(--global-palette9, #fff);
    color: var(--global-palette-btn-bg, var(--global-palette1, #000));
    border-color: var(--global-palette-btn-bg, var(--global-palette1, #000));
}

.luvera-view-button:hover {
    background-color: var(--global-palette-btn-bg-hover, var(--global-palette2, #333));
    color: var(--global-palette-btn-hover, var(--global-palette9, #fff));
    border-color: var(--global-palette-btn-bg-hover, var(--global-palette2, #333));
}

/* --- 1.6 Wishlist Button Overlay (Auto-detected Wishlist Plugins) --- */
/* Positions the Wishlist "Add to Wishlist" button as a heart icon 
   in the top-right corner of the product image */
.luvera-wishlist-btn-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show the wishlist button on product card hover */
.luvera-product-card:hover .luvera-wishlist-btn-wrap {
    opacity: 1;
}

/* Style the TI Wishlist / YITH / WPC Wishlist button to look like a clean icon overlay */
.luvera-wishlist-btn-wrap .tinvwl_add_to_wishlist_button,
.luvera-wishlist-btn-wrap .yith-wcwl-add-button a,
.luvera-wishlist-btn-wrap .woosw-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    display: block !important;
    position: relative !important;
    line-height: 36px !important;
    text-align: center !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Center the heart icon (::before pseudo-element) inside the circle */
.luvera-wishlist-btn-wrap .tinvwl_add_to_wishlist_button::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.luvera-wishlist-btn-wrap .tinvwl_add_to_wishlist_button:hover,
.luvera-wishlist-btn-wrap .yith-wcwl-add-button a:hover,
.luvera-wishlist-btn-wrap .woosw-btn:hover {
    background: #fff !important;
    transform: scale(1.1);
}

/* Hide the text label, keep only the icon */
.luvera-wishlist-btn-wrap .tinvwl_add_to_wishlist-text,
.luvera-wishlist-btn-wrap .tinvwl_already_on_wishlist-text,
.luvera-wishlist-btn-wrap .tinvwl_remove_from_wishlist-text,
.luvera-wishlist-btn-wrap .yith-wcwl-add-button span {
    display: none !important;
}

/* Ensure the TI Wishlist wrapper doesn't add extra spacing */
.luvera-wishlist-btn-wrap .tinv-wishlist {
    margin: 0 !important;
    padding: 0 !important;
}

.luvera-wishlist-btn-wrap .tinv-wishlist .tinv-wraper {
    margin: 0 !important;
    padding: 0 !important;
}

.luvera-wishlist-btn-wrap .tinv-wishlist-clear {
    display: none !important;
}

/* Hide custom uploaded images in icon-only mode */
.luvera-wishlist-btn-wrap .tinvwl_add_to_wishlist_button img {
    display: none !important;
}

/* --- 1.7 Single Product Order Now Button --- */
/* Replaces the Add to Cart button on single product pages.
   Add to Cart is hidden; Order Now becomes the primary action. */

/* Hide the default Add to Cart button on single product pages */
.single-product form.cart .single_add_to_cart_button {
    display: none !important;
}

/* Style Order Now as the primary button (matches the hidden Add to Cart) */
.single-product form.cart .luvera-single-order-now-btn {
    background-color: var(--global-palette-btn-bg, var(--global-palette1, #000)) !important;
    color: var(--global-palette-btn, var(--global-palette9, #fff)) !important;
    border: none !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    line-height: 40px !important;
    height: 40px !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    font-family: inherit;
    text-decoration: none !important;
    display: inline-block !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.single-product form.cart .luvera-single-order-now-btn:hover {
    background-color: var(--global-palette-btn-bg-hover, var(--global-palette2, #333)) !important;
    color: var(--global-palette-btn-hover, var(--global-palette9, #fff)) !important;
}

/* --- 1.8 Shop Archive Loop Dual Buttons Wrapper --- */
.luvera-shop-buttons-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* --- 1.9 Carousel / Slider & List Display Layouts --- */
.wcps-carousel-wrapper {
    position: relative;
    margin: 20px 0;
}

.wcps-carousel-viewport {
    overflow: hidden;
    padding: 10px 4px 18px;
    margin: -10px -4px -18px;
}

.luvera-product-grid.wcps-layout-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
}

.luvera-product-grid.wcps-layout-carousel::-webkit-scrollbar {
    display: none;
}

.luvera-product-grid.wcps-layout-carousel .luvera-product-card {
    scroll-snap-align: start;
    flex-shrink: 0;
}

.luvera-product-grid.wcps-layout-carousel.columns-4 .luvera-product-card {
    flex: 0 0 calc((100% - 90px) / 4);
    max-width: calc((100% - 90px) / 4);
}

.luvera-product-grid.wcps-layout-carousel.columns-3 .luvera-product-card {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
}

.luvera-product-grid.wcps-layout-carousel.columns-2 .luvera-product-card {
    flex: 0 0 calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
}

@media (max-width: 991px) {
    .luvera-product-grid.wcps-layout-carousel {
        gap: 20px;
    }
    .luvera-product-grid.wcps-layout-carousel.columns-4 .luvera-product-card,
    .luvera-product-grid.wcps-layout-carousel.columns-3 .luvera-product-card {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 575px) {
    .luvera-product-grid.wcps-layout-carousel {
        gap: 15px;
    }
    .luvera-product-grid.wcps-layout-carousel.columns-4 .luvera-product-card,
    .luvera-product-grid.wcps-layout-carousel.columns-3 .luvera-product-card,
    .luvera-product-grid.wcps-layout-carousel.columns-2 .luvera-product-card {
        flex: 0 0 calc((100% - 15px) / 2);
        max-width: calc((100% - 15px) / 2);
    }
}

/* Carousel Prev / Next Navigation Buttons */
.wcps-carousel-btn {
    position: absolute;
    top: calc(50% - 24px);
    transform: translateY(-50%);
    z-index: 15;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--global-palette-btn-bg, var(--global-palette1, #000));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.wcps-carousel-prev {
    left: -16px;
}

.wcps-carousel-next {
    right: -16px;
}

.wcps-carousel-btn:hover {
    background: var(--global-palette-btn-bg, var(--global-palette1, #000));
    color: var(--global-palette-btn, var(--global-palette9, #fff));
    transform: translateY(-50%) scale(1.06);
}

@media (max-width: 767px) {
    .wcps-carousel-prev {
        left: 6px;
    }
    .wcps-carousel-next {
        right: 6px;
    }
    .wcps-carousel-btn {
        width: 36px;
        height: 36px;
    }
}

/* Carousel Pagination Dots */
.wcps-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.wcps-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
}

.wcps-carousel-dot.is-active {
    width: 24px;
    border-radius: 10px;
    background: var(--global-palette-btn-bg, var(--global-palette1, #000));
}

/* List View Layout */
.luvera-product-grid.wcps-layout-list {
    grid-template-columns: 1fr !important;
    gap: 20px;
}

.luvera-product-grid.wcps-layout-list.columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.luvera-product-grid.wcps-layout-list .luvera-product-card {
    flex-direction: row;
    text-align: left;
    align-items: stretch;
}

.luvera-product-grid.wcps-layout-list .luvera-product-image-wrap {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
}

.luvera-product-grid.wcps-layout-list .luvera-product-info-card {
    justify-content: center;
    padding: 24px 24px 70px 24px;
    transform: none !important;
}

.luvera-product-grid.wcps-layout-list .luvera-product-price {
    justify-content: flex-start;
}

.luvera-product-grid.wcps-layout-list .luvera-action-buttons {
    left: 224px;
    right: auto;
    bottom: 20px;
    width: 280px;
    max-width: calc(100% - 244px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 767px) {
    .luvera-product-grid.wcps-layout-list.columns-2 {
        grid-template-columns: 1fr !important;
    }
    .luvera-product-grid.wcps-layout-list .luvera-product-image-wrap {
        width: 130px;
        min-width: 130px;
    }
    .luvera-product-grid.wcps-layout-list .luvera-product-info-card {
        padding: 15px 15px 60px 15px;
    }
    .luvera-product-grid.wcps-layout-list .luvera-action-buttons {
        left: 145px;
        max-width: calc(100% - 160px);
        bottom: 12px;
    }
}