/**
 * WooCommerce Catalog Styles
 * Grid layout and product card styling for shop archives
 */

/* Container and Grid */
.woocommerce-products-header,
.la-shop-products,
.woocommerce-pagination {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Force Flexbox Grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    width: calc(100% + 30px) !important;
    margin: 0 -15px !important;
    padding: 0 !important;
    list-style: none !important;
    clear: both !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    padding: 0 15px !important;
    margin: 0 0 50px 0 !important;
    float: none !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Responsive Widths */
@media (min-width: 1200px) {
    .woocommerce ul.products li.product {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (min-width: 991px) and (max-width: 1199px) {
    .woocommerce ul.products li.product {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

@media (min-width: 768px) and (max-width: 990px) {
    .woocommerce ul.products li.product {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .woocommerce ul.products li.product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Inner card structure */
.product_item--inner {
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* Critical: children must stretch to full width */
    width: 100% !important;
}

.product_item--thumbnail {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    display: block !important;
}

.product_item--thumbnail-holder {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* Image Container - Perfect Square */
.product-images-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    /* 1:1 Aspect Ratio Hack */
    background: #fdfdfd !important;
    display: block !important;
    overflow: hidden !important;
    /* Clip images and hover effects */
}

/* Fallback for modern browsers */
@supports (aspect-ratio: 1/1) {
    .product-images-container {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        padding-bottom: 0 !important;
    }
}

.product-images-container .woocommerce-loop-product__link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 1 !important;
}

.product-images-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* Ensure product is fully visible */
    box-sizing: border-box !important;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hover-image-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
    z-index: 2 !important;
}

/* Hover effect - Swap Images */
li.product:hover .hover-image-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Add to Cart Button moved inside .product-images-container via PHP */
.product-images-container .add_to_cart_button,
.product-images-container .button {
    position: absolute !important;
    top: 15px !important;
    right: -60px !important;
    /* Hide further to the right */
    opacity: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    font-size: 0 !important;
    color: transparent !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: none !important;
    overflow: hidden !important;
}

/* Show button on hover over the PRODUCT item */
li.product:hover .product-images-container .add_to_cart_button,
li.product:hover .product-images-container .button {
    opacity: 1 !important;
    right: 15px !important;
}

/* SVG Icon for the button */
.product .add_to_cart_button::before,
.product .button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Icon for products with variations */
.product .product_type_variable::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.product .button:hover,
.product .add_to_cart_button:hover {
    background: #262626 !important;
}

.product .button:hover::before,
.product .add_to_cart_button:hover::before {
    filter: invert(1) brightness(2) !important;
}

/* Info Section (Title/Price) */
.product_item--info {
    width: 100%;
    margin-top: 0px;
}

.woocommerce-loop-product__title {
    font-size: 16px !important;
    margin: 0 0 8px !important;
    font-weight: 400 !important;
    color: #262626 !important;
    font-family: var(--font-heading) !important;
    line-height: 1.3 !important;
}

.woocommerce-loop-product__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.price {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.7) !important;
    font-family: inherit !important;
    display: block !important;
}