/* --- 1. PRODUCT PAGE: IMAGE & TEXT ALIGNMENT --- */
@media (min-width: 768px) {
    .woocommerce div.product div.images.woocommerce-product-gallery {
        width: 35% !important;
        max-width: 400px !important;
        float: left !important;
        margin-right: 30px !important;
    }

    .woocommerce div.product div.summary {
        width: 58% !important;
        float: left !important;
        clear: none !important;
    }

    .woocommerce-tabs,
    .related.products,
    .upsells.products,
    #reviews {
        clear: both !important;
        display: block !important;
        width: 100% !important;
        padding-top: 40px !important;
    }
}

.woocommerce div.product div.images img {
    width: 100% !important;
    height: auto !important;
    max-width: 400px !important;
    object-fit: contain !important;
}

/* --- 2. DISABLE IMAGE CLICK & ZOOM --- */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper {
    pointer-events: none !important;
    cursor: default !important;
}

/* --- 3. BUTTON DEFAULT & HOVER COLORS --- */
ul.products li.product .button,
.woocommerce div.product .summary .button,
.woocommerce a.button.quote-button {
    background-color: #D4AF16 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

ul.products li.product .button:hover,
.woocommerce div.product .summary .button:hover,
.woocommerce a.button.quote-button:hover {
    background-color: #B99610 !important;
    color: #ffffff !important;
}

/* --- 4. REMOVE JETPACK & META --- */
.jp-relatedposts,
#jp-relatedposts,
.jp-relatedposts-headline,
.woocommerce div.product .product_meta > span.posted_in,
.woocommerce div.product .product_meta > span.tagged_as {
    display: none !important;
}

/* --- 5. SHOP PAGE: CENTER GRID ITEMS --- */
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 0 !important;
}

ul.products li.product .button {
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
}

/* --- 6. MOBILE RESPONSIVENESS (STACKING) --- */
@media (max-width: 767px) {
    .woocommerce div.product div.images.woocommerce-product-gallery,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        display: block !important;
    }
}

/* --- 7. RETINAL IMAGE BACKGROUND (SUBTLE) --- */
body {
    background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url("https://eyecaretechnologies.com/wp-content/uploads/2025/12/etc-eye-fa.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-color: #E8E8E8 !important;
}

/* Strip opaque white backgrounds from WooCommerce content wrappers only */
#primary.content-area,
#main.site-main,
body.woocommerce #primary,
body.woocommerce-page #primary {
    background-color: transparent !important;
}

/* Product listing grid: transparent so body image shows through */
.woocommerce ul.products {
    background-color: transparent !important;
}

/* --- PRODUCT CARDS --- */
.woocommerce ul.products li.product {
    background-color: rgba(255,255,253,0.98) !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: 0 6px 22px rgba(90,72,35,0.14) !important;
    padding: 35px !important;
    text-align: center !important;
}

/* Product card images */
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 340px !important;
	border-radius: 8px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin-bottom: 24px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

/* Product card titles */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
    color: #1E1D20 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
	padding: 0 2% 0 2% !important;
}

/* Showing results text */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
p.woocommerce-result-count {
    color: #ffffff !important;
	font-size: 18px !important;
}

/* Product card hover effect */
.woocommerce ul.products li.product {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 24px rgba(90,72,35,0.12) !important;
    background-color: rgba(255,255,252,0.99) !important;
}

/* Single product page wrapper */
.woocommerce div.product {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px !important;
    padding: 0px !important;
}

/* Single product text */
.woocommerce div.product h1,
.woocommerce div.product h2,
.woocommerce div.product p,
.woocommerce div.product li,
.woocommerce div.product .summary h1,
.woocommerce div.product .summary p,
.woocommerce div.product .summary li {
    color: #1E1D20 !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
    background-color: transparent !important;
    color: #7A5C1E !important;
}

/* Page titles on product listing pages */
.woocommerce-products-header,
.woocommerce-products-header__title,
.page-title {
    background-color: transparent !important;
    color: #1E1D20 !important;
}

/* WooCommerce tabs */
.woocommerce-tabs ul.tabs,
.woocommerce-Tabs-panel,
.woocommerce-tabs .panel {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: #1E1D20 !important;
    border-color: rgba(207, 160, 59, 0.30) !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #B8862A !important;
}

/* Related / upsell product headings */
.related.products h2,
.upsells.products h2,
.cross-sells h2 {
    color: #1E1D20 !important;
}

/* Showing results count and sorting dropdown area */
.woocommerce-result-count,
.woocommerce-ordering {
    color: #1E1D20 !important;
}

/* Forms on service/promo pages */
.wpcf7,
.elementor-form,
form.checkout {
    background-color: rgba(255, 255, 255, 0.85) !important;
    padding: 20px !important;
    border-radius: 8px !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1E1D20 !important;
    border: 1px solid rgba(184, 134, 42, 0.60) !important;
}

/* --- 8. ELEMENTOR CONTAINER DISPLAY FIX --- */
.e-con {
    display: flex !important;
}

.e-con.e-grid,
.e-grid.e-con-full {
    display: grid !important;
}

.e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.e-con.e-flex > .e-con-inner,
.e-con-boxed.e-flex > .e-con-inner {
    display: flex !important;
}

/* --- 9. PRODUCT AREA PADDING --- */
#main.site-main {
    padding-top: 0.5% !important;
    padding-bottom: 0.5% !important;
}

/* --- 10. PRODUCT CARD PADDING --- */
.woocommerce ul.products li.product {
    padding: 20px !important;
}

/* --- 11. HIDE DESCRIPTION TAB SECTION --- */
.woocommerce-tabs {
    display: none !important;
}

/* --- 12. FOOTER COPYRIGHT BAR --- */
.site-info,
.site-footer .site-info,
footer .site-info,
#colophon .site-info,
.footer-copyright,
#colophon,
.site-footer {
    background-color: #ffffff !important;
    color: #1E1D20 !important;
}

/* WooCommerce Pagination */
.woocommerce-pagination {
    margin: 30px 0 20px;
    text-align: center;
}

.woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
    display: block;
    margin: 0;
    padding: 0;
}

.woocommerce-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border-radius: 4px;
    border: 2px solid #b8862a;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}

.woocommerce-pagination a.page-numbers {
    background-color: #ffffff;
    color: #b8862a;
    border-color: #b8862a;
}

.woocommerce-pagination a.page-numbers:hover {
    background-color: #b8862a;
    color: #ffffff;
}

.woocommerce-pagination .page-numbers.current {
    background-color: #b8862a;
    color: #ffffff;
    border-color: #b8862a;
}

.woocommerce-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: #555;
}