/* =====================================================
   WOOCOMMERCE GRID FIX - HIGH PRIORITY
   Added: 2025-12-13
   This file loads LAST to override all conflicting styles
   ===================================================== */

/* Pidepaya Brand Colors */
:root {
    --pidepaya-yellow: #FFD700;
    --pidepaya-black: #1a1a1a;
    --pidepaya-yellow-hover: #FFC000;
}

/* =====================================================
   SHOP PAGE PRODUCT GRID - FORCE OVERRIDE
   ===================================================== */

/* Product Grid Container */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-4,
.woocommerce-page ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-3,
ul.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Product Cards */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-3 li.product,
ul.products.columns-4 li.product,
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    list-style: none !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

body.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -5px rgba(0,0,0,0.15);
    border-color: var(--pidepaya-yellow);
}

/* Product Link - Flex Container */
body.woocommerce ul.products li.product > a,
body.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    text-decoration: none !important;
    color: inherit !important;
}

/* Product Images */
body.woocommerce ul.products li.product a img,
body.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
body.woocommerce ul.products li.product img.wp-post-image,
ul.products li.product a img,
ul.products li.product img {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    float: none !important;
}

/* Product Title */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    padding: 16px 16px 8px 16px !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--pidepaya-black) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 180px !important;
    max-height: 3.2em !important;
}

/* Star Rating */
body.woocommerce ul.products li.product .star-rating,
ul.products li.product .star-rating {
    margin: 0 16px 8px 16px !important;
    font-size: 0.85rem !important;
    float: none !important;
}

body.woocommerce ul.products li.product .star-rating span::before,
ul.products li.product .star-rating span::before {
    color: var(--pidepaya-yellow) !important;
}

/* HIDE short descriptions, blockquotes, paragraphs in loop */
body.woocommerce ul.products li.product > a p,
body.woocommerce ul.products li.product > a > p,
body.woocommerce ul.products li.product blockquote,
body.woocommerce ul.products li.product .woocommerce-product-details__short-description,
ul.products li.product > a p,
ul.products li.product > a > p,
ul.products li.product blockquote,
ul.products li.product .short-description {
    display: none !important;
}

/* Product Price */
body.woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product span.price,
ul.products li.product .price {
    padding: 0 16px 12px 16px !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--pidepaya-black) !important;
    display: block !important;
    float: none !important;
}

body.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}

body.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
    text-decoration: none !important;
    color: #ef4444 !important;
}

/* Add to Cart Button - Pidepaya Yellow */
body.woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .add_to_cart_button,
body.woocommerce ul.products li.product a.button,
body.woocommerce ul.products li.product button.button,
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product a.button {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: auto 16px 16px 16px !important;
    padding: 12px 16px !important;
    background: var(--pidepaya-yellow) !important;
    color: var(--pidepaya-black) !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    float: none !important;
    line-height: 1.4 !important;
}

body.woocommerce ul.products li.product .button:hover,
body.woocommerce ul.products li.product .add_to_cart_button:hover,
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
    background: var(--pidepaya-yellow-hover) !important;
    color: var(--pidepaya-black) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4) !important;
}

/* View Details / Added to Cart Link */
body.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px 16px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    color: var(--pidepaya-black) !important;
    border: 2px solid var(--pidepaya-yellow) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* Sale Badge */
body.woocommerce span.onsale,
body.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
ul.products li.product .onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    background: var(--pidepaya-black) !important;
    color: var(--pidepaya-yellow) !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    min-width: auto !important;
    min-height: 180px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* =====================================================
   RESPONSIVE: TABLET (768px+) - 2 Columns
   ===================================================== */
@media (min-width: 768px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-3,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* =====================================================
   RESPONSIVE: DESKTOP (1024px+) - 3 Columns
   ===================================================== */
@media (min-width: 1024px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-3,
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =====================================================
   RESPONSIVE: LARGE DESKTOP (1280px+) - 4 Columns
   ===================================================== */
@media (min-width: 1280px) {
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    .woocommerce ul.products.columns-4,
    ul.products.columns-4,
    ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* =====================================================
   RELATED PRODUCTS
   ===================================================== */
.woocommerce .related.products,
.woocommerce section.related.products,
section.related.products,
.related.products {
    margin-top: 60px !important;
    padding: 40px 0 !important;
    border-top: 2px solid var(--pidepaya-yellow) !important;
    clear: both !important;
    width: 100% !important;
}

.woocommerce .related.products > h2,
section.related.products > h2,
.related.products > h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--pidepaya-black) !important;
    margin-bottom: 24px !important;
}

/* Related Products Grid inherits from main grid styles */
.woocommerce .related.products ul.products,
section.related.products ul.products,
.related.products ul.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

@media (min-width: 768px) {
    .woocommerce .related.products ul.products,
    section.related.products ul.products,
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce .related.products ul.products,
    section.related.products ul.products,
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* =====================================================
   SINGLE PRODUCT PAGE
   ===================================================== */
.woocommerce div.product .product_title {
    color: var(--pidepaya-black) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--pidepaya-black) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

/* Single Product Add to Cart */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
    background: var(--pidepaya-yellow) !important;
    color: var(--pidepaya-black) !important;
    border: none !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
    background: var(--pidepaya-yellow-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4) !important;
}

/* Quantity Input */
.woocommerce div.product form.cart .quantity input {
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

.woocommerce div.product form.cart .quantity input:focus {
    border-color: var(--pidepaya-yellow) !important;
    outline: none !important;
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--pidepaya-black) !important;
    border-bottom: 3px solid var(--pidepaya-yellow) !important;
}

/* =====================================================
   PAGINATION
   ===================================================== */
.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 10px 16px !important;
    background: #f1f5f9 !important;
    color: var(--pidepaya-black) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--pidepaya-yellow) !important;
    color: var(--pidepaya-black) !important;
}

/* Hide custom "Ver detalles" button - only show main CTA */
body.woocommerce ul.products li.product .custom-button,
body.woocommerce ul.products li.product a.custom-button,
ul.products li.product .custom-button,
ul.products li.product > div[style*="inline-block"] {
    display: none !important;
}