/*
Theme Name: Firma Marketi
Theme URI: https://firmamarketi.com
Author: Fatih
Author URI: https://firmamarketi.com
Description: WordPress theme with Tailwind CSS and WooCommerce integration for Firma Marketi.
Version: 1.0.0
Text Domain: firma-marketi
*/

/* WooCommerce Archive & Loop Layout Grid */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
    list-style: none !important;
}

@media (min-width: 768px) {
    ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.75rem !important;
    }
}

@media (min-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
}

/* Remove default float-based styles that WooCommerce adds to columns */
ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

/* Clearfixes or floats that WooCommerce default themes include */
ul.products::before,
ul.products::after {
    display: none !important;
}

/* WooCommerce Result Count & Ordering Forms */
.woocommerce-products-header__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.875rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.025em !important;
    color: #111827 !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-result-count {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    float: none !important;
    margin-bottom: 1rem !important;
}

.woocommerce-ordering {
    float: none !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-ordering select {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    padding: 8px 12px !important;
    outline: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background-color: #fff !important;
}

@media (min-width: 768px) {
    .woocommerce-ordering {
        float: right !important;
    }
    .woocommerce-result-count {
        float: left !important;
        line-height: 40px !important;
        margin: 0 !important;
    }
}

/* WooCommerce Pagination */
nav.woocommerce-pagination {
    margin-top: 3rem !important;
    text-align: center !important;
    clear: both !important;
}

nav.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li span.current {
    background: #F4AC2D !important;
    color: #ffffff !important;
}

/* Logo Sizing Overrides */
.logo-container img.custom-logo {
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
}

@media (min-width: 768px) {
    .logo-container img.custom-logo {
        max-height: 64px !important;
    }
}

.footer-logo-container img.custom-logo {
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
}

@media (min-width: 768px) {
    .footer-logo-container img.custom-logo {
        max-height: 80px !important;
    }
}

/* Force product card images to fill the area on mobile */
@media (max-width: 767px) {
    .aspect-\[713\/913\] img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }
}