/* ==========================================================================
   GLOBAL CLEAN & CLEAR PRODUCT IMAGE UNIFORMITY
========================================================================== */
/* 1. Main Product Page Detail Images & Thumbnails */
.productView-images img,
.productView-thumbnail img {
  width: 100% !important;
  height: auto !important;
  max-width: 1280px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: auto !important; }

/* 2. Grid Category Tile Images (Fixed to prevent 0px flattening) */
.card-img-container img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important; }

/* Ensures the container gives the image maximum breathing room on large screens */
.productView-image,
.productView-images {
  width: 100% !important;
  max-width: 100% !important; }

/* ==========================================
    GLOBAL STORE-WIDE UNIFORMITY UPGRADE
========================================== */
/* 1. NORMALIZE GRID PRODUCT IMAGES */
/* Forces every single tile category card image into a consistent container without distortion */
.card-figure {
  background-color: #fcfcfc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 4 / 3 !important;
  /* Perfect architectural ratio for tile photography */
  overflow: hidden !important;
  border: 1px solid #ededed !important;
  border-radius: 4px !important;
  position: relative !important; }

/* Keeps grid child items responsive within the new flex container layout */
.card-figure img {
  max-height: 100% !important;
  width: auto !important;
  object-fit: contain !important; }

/* 2. UNIFY PRODUCT TITLES */
/* Cleans up long, messy tile descriptions in grids so boxes line up evenly */
.card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  line-height: 1.4 !important;
  min-height: 42px !important;
  /* Prevents text length from making card rows bumpy */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  /* Caps titles neatly at 2 lines with '...' if too long */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 8px !important; }

.card-title a {
  color: #222222 !important;
  text-decoration: none !important; }

.card-title a:hover {
  color: #007acd !important; }

/* 3. ALIGN PRICING AND ACTION ROW ELEMENT BLOCKS */
/* Forces price tags and buttons to line up horizontally across the row */
.card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 15px 10px !important; }

.card-text[data-product-price] {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  margin-top: auto !important;
  /* Pushes price to the exact same baseline everywhere */ }

/* 4. CLEAN UP "COMPARE" CHECKBOX ELEMENTS */
/* Makes the grid comparison layer look minimalist and integrated */
.card-body .form-field--compare {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #777777 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important; }

/* 5. ENHANCE MAIN PRODUCT VIEWS (DESKTOP GRID DIVIDER) */
/* Gives the master columns on individual product views clean, modern spacing */
@media (min-width: 801px) {
  .productView-details.product-data {
    padding-left: 40px !important;
    /* Keeps details cleanly separated from big photos */ } }

/* ==========================================
    GLOBAL CRITICAL PAGE LOAD SPEED UP
========================================== */
body {
  text-rendering: optimizeSpeed !important; }

/* Skips rendering calculations for your footer until a user scrolls down to it */
footer.footer {
  content-visibility: auto !important;
  contain-intrinsic-size: 0 400px !important; }

/* Optimizes the homepage carousel layer animations to use GPU hardware acceleration */
.heroCarousel,
.heroCarousel-slide,
.heroCarousel-image {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important; }