/* =========================================================
   PGP v118 critical layout lock
   Prevents product/garage/parts images from flashing huge before JS finishes.
   Loaded early in head on index, IQ Garages, Parts, Liked, Following.
   ========================================================= */
:root{
  --pgp-critical-card-w: 214px;
  --pgp-critical-card-w-mobile: 44vw;
  --pgp-critical-media-ratio: 1 / 1;
  --pgp-critical-radius: 18px;
}

/* While the page is booting, stop image zoom/scale transitions that cause the flash. */
html:not(.pgp-ui-ready) :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products,.pgp-view-shell) *,
html.pgp-critical-booting :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products,.pgp-view-shell) *{
  transition:none!important;
  animation:none!important;
}

/* Give the rows a stable initial shape before pgp-layout-toggle.js adds grid/carousel classes. */
html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products):not(.pgp-view-grid):not(.pgp-view-list):not(.pgp-critical-ignore){
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:14px!important;
  max-width:100%!important;
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  box-sizing:border-box!important;
}

html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products):not(.pgp-view-grid):not(.pgp-view-list):not(.pgp-critical-ignore) > *{
  flex:0 0 var(--pgp-critical-card-w)!important;
  width:var(--pgp-critical-card-w)!important;
  max-width:var(--pgp-critical-card-w)!important;
  min-width:var(--pgp-critical-card-w)!important;
  box-sizing:border-box!important;
  scroll-snap-align:start!important;
}

/* Product/part media boxes get a fixed ratio immediately so images never start full-size then shrink. */
html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products,.pgp-view-shell) :is(.product-media,.pgp-product-media,.product-image,.pgp-img,.card-image,.garage-product-image,.part-image,.item-image,.media,.thumb,figure,.image-wrap,.product-thumb,.pgp-card-media,.pgp-most-media){
  aspect-ratio:var(--pgp-critical-media-ratio)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  border-radius:var(--pgp-critical-radius)!important;
  box-sizing:border-box!important;
  flex:none!important;
  position:relative!important;
}

html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products,.pgp-view-shell) :is(.product-media,.pgp-product-media,.product-image,.pgp-img,.card-image,.garage-product-image,.part-image,.item-image,.media,.thumb,figure,.image-wrap,.product-thumb,.pgp-card-media,.pgp-most-media) > img,
html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products,.pgp-view-shell) :is(img.product-image,img.pgp-product-image,img.card-image,img.part-image,img.garage-product-image,img.pgp-img){
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:var(--pgp-critical-media-ratio)!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  scale:1!important;
  box-sizing:border-box!important;
}

/* Specific most-viewed cards on the index page. */
html body :is(.pgp-most-product,.pgp-most-card,.pgp-most-item){
  min-width:0!important;
  box-sizing:border-box!important;
}
html body :is(.pgp-most-product,.pgp-most-card,.pgp-most-item) :is(.pgp-most-media,.product-media,.pgp-product-media){
  aspect-ratio:1 / 1!important;
  overflow:hidden!important;
}
html body :is(.pgp-most-product,.pgp-most-card,.pgp-most-item) :is(.pgp-most-media,.product-media,.pgp-product-media) img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:none!important;
}

/* Keep garage identity/logo images out of this product-card lock. */
html body :is(.garage-top,.products-head,.pgp-part-top,.pgp-v73-identity-row,.pgp-v71-mobile-identity-row,.pgp-mobile-actionbar-root) :is(img,.garage-logo,.garage-avatar,.store-logo,.store-avatar,.pgp-owner-avatar,.pgp-garage-follow-ring-target){
  aspect-ratio:auto!important;
  max-width:none;
}

@media (max-width:768px){
  :root{ --pgp-critical-card-w: var(--pgp-critical-card-w-mobile); --pgp-critical-radius:16px; }
  html body :is(.product-row,.pgp-product-row,.products-grid,.pgp-products,.garage-products,.saved-products-grid,.saved-grid,.wishlist-products,.following-grid,.related-products,.similar-products,.pgp-related-products,.pgp-similar-products):not(.pgp-view-grid):not(.pgp-view-list):not(.pgp-critical-ignore) > *{
    flex-basis:var(--pgp-critical-card-w-mobile)!important;
    width:var(--pgp-critical-card-w-mobile)!important;
    max-width:var(--pgp-critical-card-w-mobile)!important;
    min-width:var(--pgp-critical-card-w-mobile)!important;
  }
}