/* 6.14.22 — Related Products photos fill the 4:3 box in the real BigCommerce / Page Builder render.
   Local Stencil did not reproduce this. Server markup uses Cornerstone's card-img-container
   ::after padding-bottom hack (productgallery_size is 500x659, so padding-bottom: 131.8%)
   and .card-image { position:absolute; inset:0; margin:auto; max-height:100%; width:100%;
   object-fit:contain; height:auto }. width:100% + height:auto leaves a landscape photo as a
   short strip in the 4:3 figure, with white bands above/below.
   6.14.21 set height:100% and object-fit:cover on img.card-image only; it did not zero the
   ::after, max-height, or margin:auto, so the image still did not fill on the server render.
   Pairs (.cbp-w img) already filled because that markup has no ::after / max-height.
   Loaded after fix6210. */

html body.dtc-c .pdp-suggest-block .card-figure:not(#a):not(#b):not(#c){
  aspect-ratio:4/3!important;width:100%!important;height:auto!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  background:#fff!important;position:relative!important;box-sizing:border-box!important}

html body.dtc-c .pdp-suggest-block .card-figure>a:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure .card-img-container:not(#a):not(#b):not(#c){
  position:absolute!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;
  padding:0!important;padding-bottom:0!important;margin:0!important;display:block!important;
  box-sizing:border-box!important}

/* Kill the lazy-loaded-padding ::after (padding-bottom from productgallery_size 500x659). */
html body.dtc-c .pdp-suggest-block .card-img-container:not(#a):not(#b):not(#c)::after{
  content:none!important;display:none!important;padding:0!important;padding-bottom:0!important;height:0!important}

html body.dtc-c .pdp-suggest-block .card-figure img:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.card-image:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.lazyload:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure img.lazyloaded:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure picture:not(#a):not(#b):not(#c),
html body.dtc-c .pdp-suggest-block .card-figure picture img:not(#a):not(#b):not(#c){
  position:absolute!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;
  object-fit:cover!important;object-position:50% 50%!important;
  margin:0!important;padding:0!important;transform:none!important;transform-origin:50% 50%!important}