/**
 * WooCommerce Technical Fixes
 * 
 * This file contains technical fixes for WooCommerce functionality
 * All translations are handled via Customizer, not hardcoded here
 */

/* ================================================
   FIX 4: Category Archive Grid - 4 Columns with Square 1:1 Images  
   ================================================ */

/* Desktop: 4 columns on archive pages (shop, category, tag archives) */
@media (min-width: 1024px) {
    .woocommerce.archive ul.products,
    .woocommerce-page.archive ul.products,
    .post-type-archive-product ul.products,
    .tax-product_cat ul.products,
    .tax-product_tag ul.products {
        display: grid;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
    }
    
    /* Square 1:1 aspect ratio images on archive pages */
    .woocommerce.archive .product-image,
    .woocommerce-page.archive .product-image,
    .post-type-archive-product .product-image,
    .tax-product_cat .product-image,
    .tax-product_tag .product-image {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 aspect ratio */
        height: 0;
        overflow: hidden;
        margin-bottom: 15px;
    }
    
    .woocommerce.archive .product-image img,
    .woocommerce-page.archive .product-image img,
    .post-type-archive-product .product-image img,
    .tax-product_cat .product-image img,
    .tax-product_tag .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* Reduce spacing between products */
    .woocommerce.archive .product-card,
    .woocommerce-page.archive .product-card,
    .post-type-archive-product .product-card,
    .tax-product_cat .product-card,
    .tax-product_tag .product-card {
        padding: 10px;
    }
}

/* ================================================
   FIX 6: Homepage Popular Categories - 6 Items in Single Row
   ================================================ */

/* Force 6 categories in a single row on desktop */
.featured-categories-section {
    width: 100%;
    padding: 60px 4.5rem;
    background: #fff;
    overflow: visible; /* Allow proper display */
}

.featured-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Ensure exactly 6 items per row, no wrapping */
.featured-category-item {
    text-align: center;
    min-width: 0; 
    max-width: 100%;
}

/* Circular images with perfect aspect ratio - no stretching */
.featured-category-item .category-circle-img {
    width: 183px;
    height: 183px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

/* Ensure images are perfectly circular and centered - no distortion */
.featured-category-item .category-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

/* Category name styling */
.featured-category-item .category-circle-name {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
}

/* Even spacing between items */
.featured-categories-grid > * {
    flex: 0 0 auto;
}

/* ================================================
   FIX 5: Homepage Popular Products - 4 in Single Row, Square Images
   ================================================ */

/* Homepage product sliders - 4 products per row */
.bracelet-section .bracelet-product-slider,
.category-tabs-section .product-slider,
.product-slider {
    width: 100%;
}

/* Force 4 products in one row on desktop */
@media (min-width: 1024px) {
    .bracelet-section .swiper-wrapper,
    .category-tabs-section .swiper-wrapper,
    .product-slider .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    .bracelet-section .swiper-slide,
    .category-tabs-section .swiper-slide,
    .product-slider .swiper-slide {
        flex: 0 0 25% !important; /* 4 products = 25% each */
        max-width: 25% !important;
    }
}

/* Square 1:1 product images - no vertical stretching */
.bracelet-section .product-image,
.category-tabs-section .product-image,
.product-slider .product-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 square aspect ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

.bracelet-section .product-image img,
.category-tabs-section .product-image img,
.product-slider .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Prevent image distortion */
.bracelet-section .product-card:hover .product-image img,
.category-tabs-section .product-card:hover .product-image img,
.product-slider .product-card:hover .product-image img {
    transform: scale(1.05);
}

/* Ensure consistent product card heights */
.bracelet-section .product-card,
.category-tabs-section .product-card,
.product-slider .product-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 350px;
}

.bracelet-section .product-content,
.category-tabs-section .product-content,
.product-slider .product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Fix content layout */
.bracelet-section .product-title,
.category-tabs-section .product-title,
.product-slider .product-title {
    flex: 1;
    margin-bottom: 8px;
}

.bracelet-section .product-price,
.category-tabs-section .product-price,
.product-slider .product-price {
    margin-top: auto;
}

/* Responsive - maintain proper grid */
@media (max-width: 1200px) {
    .featured-categories-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 20px;
    }
    .featured-categories-section {
        padding: 50px 2rem;
    }
}

@media (max-width: 900px) {
    .featured-categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .featured-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
    .featured-categories-section {
        padding: 40px 1rem;
    }
    
    /* Homepage products responsive */
    .bracelet-section .swiper-slide,
    .category-tabs-section .swiper-slide,
    .product-slider .swiper-slide {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .featured-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    
    /* Homepage products responsive */
    .bracelet-section .swiper-slide,
    .category-tabs-section .swiper-slide,
    .product-slider .swiper-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Category thumbnails on desktop archives - make square */
@media (min-width: 769px) {
    .woocommerce ul.products li.product .product-image,
    .woocommerce ul.products li.product .product-image a,
    .woocommerce ul.products li.product .product-image-link,
    .woocommerce .product-card .product-image,
    .woocommerce .product-card .product-image a,
    .woocommerce .product-card .product-image-link,
    .woocommerce .product-card-item .product-image,
    .woocommerce .product-card-item .product-image a,
    .woocommerce .product-card-item .product-image-link,
    .product-categories .category-item .category-image,
    .product-categories .category-item .category-image a {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        position: relative;
        display: block;
    }
    
    /* Fallback for browsers without aspect-ratio support (IE, older Safari) */
    @supports not (aspect-ratio: 1 / 1) {
        .woocommerce ul.products li.product .product-image,
        .woocommerce ul.products li.product .product-image a,
        .woocommerce .product-card .product-image,
        .woocommerce .product-card .product-image a,
        .woocommerce .product-card-item .product-image,
        .woocommerce .product-card-item .product-image a,
        .product-categories .category-item .category-image,
        .product-categories .category-item .category-image a {
            position: relative;
            padding-bottom: 100%; /* 1:1 aspect ratio */
            height: 0;
        }
        
        .woocommerce ul.products li.product .product-image img,
        .woocommerce .product-card .product-image img,
        .woocommerce .product-card-item .product-image img,
        .product-categories .category-item .category-image img {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    
    /* Ensure images fill the square container with proper cropping */
    .woocommerce ul.products li.product .product-image img,
    .woocommerce .product-card .product-image img,
    .woocommerce .product-card-item .product-image img,
    .product-categories .category-item .category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* Product grid layout - ensure proper spacing */
    .woocommerce ul.products,
    .woocommerce .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

/* Mobile - keep existing behavior (no changes) */
@media (max-width: 768px) {
    /* Mobile layout remains unchanged - natural image ratios */
    .woocommerce ul.products li.product .product-image img,
    .woocommerce .product-card .product-image img,
    .woocommerce .product-card-item .product-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ================================================
   Additional fixes for better image display
   ================================================ */

/* Prevent image distortion on all devices */
.woocommerce img,
.woocommerce-product-gallery img {
    max-width: 100%;
    height: auto;
}

/* Product badge positioning on square images */
.woocommerce ul.products li.product .onsale-badge,
.woocommerce ul.products li.product .outofstock-badge,
.woocommerce .product-card .onsale-badge,
.woocommerce .product-card .outofstock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
}

/* Outofstock badge specific styling */
.woocommerce ul.products li.product .outofstock-badge,
.woocommerce .product-card .outofstock-badge {
    background: #95a5a6;
}

/* ================================================
   FIX 3: Homepage Popular Products Images - Restore Previous Size
   ================================================ */

/* Restore product images to reasonable size (not too large) */
.bracelet-section .product-image {
    position: relative;
    width: 100%;
    height: 250px; /* Reduced from 320px to restore previous size */
    overflow: hidden;
    margin-bottom: 15px;
}

.bracelet-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s;
}

.bracelet-section .product-card:hover .product-image img {
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bracelet-section .product-image {
        height: 220px; /* Slightly smaller on tablets */
    }
}

@media (max-width: 480px) {
    .bracelet-section .product-image {
        height: 180px; /* Smaller on mobile */
    }
}

/* Fix price and content positioning in bracelet carousel */
.bracelet-section .product-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.bracelet-section .product-price {
    margin-top: auto;
    font-weight: 600;
    color: #333;
}

.bracelet-section .product-categories {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bracelet-section .product-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* ================================================
   FIX 3: Checkout Coupon AJAX - Loading States
   ================================================ */

/* Coupon form loading state */
.checkout_coupon.processing,
.woocommerce-form-coupon.processing {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

/* Coupon apply button loading state */
.checkout_coupon button[name="apply_coupon"].loading,
.woocommerce-form-coupon button[name="apply_coupon"].loading,
.woocommerce-cart-form button[name="apply_coupon"].loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.checkout_coupon button[name="apply_coupon"].loading::after,
.woocommerce-form-coupon button[name="apply_coupon"].loading::after,
.woocommerce-cart-form button[name="apply_coupon"].loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cart totals update animation */
.woocommerce-checkout-review-order-table.updating,
.cart_totals.updating {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    position: relative;
}

/* Loading overlay for checkout totals */
.woocommerce-checkout-review-order-table.updating::before,
.cart_totals.updating::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

/* Ensure coupon messages are visible */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    margin: 15px 0;
    padding: 12px 20px;
    border-radius: 4px;
}

.woocommerce-message {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    color: #2e7d32;
}

.woocommerce-error {
    background: #ffebee;
    border-left: 4px solid #f44336;
    color: #c62828;
}

/* Smooth transitions for AJAX updates */
.woocommerce-cart-form,
.woocommerce-checkout,
.cart_totals,
.woocommerce-checkout-review-order {
    transition: opacity 0.3s ease;
}

/* ================================================
   FIX 2: Price Display - Ensure Visibility
   ================================================ */

/* Ensure price is always visible on single product pages */
.single-product .product-summary .price,
.single-product .woocommerce-variation-price,
.single-product .variation-price {
    display: block !important;
    font-size: 24px;
    font-weight: 600;
    margin: 15px 0;
    color: #333;
}

/* Hide duplicate prices if any */
.single-product .product-summary > .price + .price {
    display: none !important;
}

/* Clean price formatting */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    opacity: 0.7;
    text-decoration: line-through;
    margin-right: 8px;
    font-size: 0.9em;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none;
    font-weight: 600;
}

/* Ensure variation price is visible */
.woocommerce-variation-price .price,
.variation-price .price {
    display: block !important;
}

/* ================================================
   FIX 7: Hide Category Names on Archive Pages
   ================================================ */

/* Hide category names from product loops on archive pages */
.woocommerce.archive .product-categories,
.woocommerce-page.archive .product-categories,
.post-type-archive-product .product-categories,
.tax-product_cat .product-categories,
.tax-product_tag .product-categories,
.woocommerce ul.products .product-categories {
    display: none !important;
}

/* Keep categories visible on single product pages */
.single-product .product-categories {
    display: block !important;
}