/* --- 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: #B8862A !important;
    color: #1E1D20 !important;
    border: none !important;
}
ul.products li.product .button:hover,
.woocommerce div.product .summary .button:hover,
.woocommerce a.button.quote-button:hover {
    background-color: #7A5C1E !important;
    color: #1E1D20 !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: retinal image with white overlay to lighten it to a soft texture.
   Adjust the 0.78 value: higher = lighter, lower = more visible image. */
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: semi-transparent white panel */
.woocommerce ul.products li.product {
    background-color: rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(207, 160, 59, 0.40) !important;
    border-radius: 6px !important;
}
/* Product card titles: keep dark */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
    color: #1E1D20 !important;
}
/* Single product page wrapper */
.woocommerce div.product {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
/* Single product text — scoped tightly to product page only */
.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 --- */
/* Prevents Elementor flex/grid containers from collapsing to display:inline
   on initial page load before lazy-loaded per-element CSS is injected.
   This fixes the Meridian Medical page (and any other Elementor page)
   showing stacked/collapsed layouts on first render. */
.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: MATCH TOP & BOTTOM PADDING TO LEFT & RIGHT MARGIN --- */
/* Left/right spacing is 7.6923% (~93px). This adds equal spacing top and bottom. */
#main.site-main {
    padding-top: 0.5% !important;
    padding-bottom: 0.5% !important;
}

/* --- 10. PRODUCT CARD PADDING (TOP & BOTTOM) --- */
.woocommerce ul.products li.product {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* --- 10. PRODUCT CARD PADDING (TOP, BOTTOM, LEFT, RIGHT) --- */
.woocommerce ul.products li.product {
    padding: 20px !important;
}

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

/* --- 12. FOOTER COPYRIGHT BAR — WHITE BACKGROUND --- */
.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 - Enhanced Visibility */
.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; }