/* ==========================================
   OZGALORE ALL-IN-ONE CORE WEB VITALS SCRIPT
   Targets: FCP, LCP, CLS (0.581), and TBT
   ========================================== */

/* 1. CRUSH FCP & TBT (Font & Text Render Priority) */
* {
  /* Forces system to show standard text immediately while custom fonts load in parallel */
  font-display: swap !important;
}

body {
  /* Minimizes processor parsing time during initial main-thread paint */
  text-rendering: optimizeSpeed !important;
  -webkit-font-smoothing: antialiased;
}

/* 2. FLATTEN CLS (The 0.581 Killer - Global Image Aspect Ratios) */
img, video, iframe {
  /* Tells the browser to look at the HTML width/height attributes and lock the ratio before downloading */
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}

/* Direct targeted override for your exact 1900x432 Homepage Banner */
img[src*="banner"], 
.hero-banner-optimized,
.main-banner img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1900 / 432 !important;
  /* Reserves structural space instantly using the GPU instead of the CPU main thread */
  contain-intrinsic-size: 1900px 432px;
  content-visibility: auto;
}

/* 3. OPTIMIZE LCP & SPEED INDEX (Mobile Viewport Structural Reservation) */
@media (max-width: 767px) {
  /* Enforces a minimum structural boundary for the top content box on mobile screens */
  header, 
  .top-navigation, 
  .hero-container {
    contain: layout size style;
    /* Keeps a hard minimum block height so text doesn't slam into the header link area */
    min-height: 120px; 
  }
}

/* 4. REDUCE TOTAL BLOCKING TIME (Defer Below-The-Fold Rendering) */
footer, 
.footer-container, 
.related-products, 
.bottom-content-section {
  /* Content-visibility tells the browser: "If the user can't see this yet, do NOT calculate its layout." */
  content-visibility: lazy;
  contain-intrinsic-size: auto 500px;
}
CSS
/* Universal override: Force transparency on all tab panel elements */
.woocommerce-tabs .panel, 
.woocommerce-tabs .panel *, 
.woocommerce-tabs .wc-tab, 
.woocommerce-tabs .wc-tab * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Specifically target the container that often holds the grey background */
#tab-description, #tab-reviews, .woocommerce-Tabs-panel {
    background-color: transparent !important;
}
CSS
/* Force a uniform card frame without cropping any product details */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 400px !important; 
    object-fit: contain !important; /* Forces the whole image to fit without cutting */
    object-position: center center !important;
    background-color: #ffffff; /* Optional: adds a clean background fill for non-square images */
}
CSS
/* --- ROUNDED CORNERS FOR PRODUCT IMAGES --- */

/* 1. Category, Archive, & New Arrivals Pages */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
    border-radius: 16px !important; /* Adjust this number to make it more or less round */
}

/* 2. Single Product Pages (Main image and gallery) */
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img {
    border-radius: 12px !important;
}