/* Thành Phát EV Theme v0.0.55 — consistent 16:9 content imagery.
 * Only photo/media frames; never logos, icons, Hero workshops, checkout previews,
 * or the original uploaded files. The WooCommerce zoom lightbox stays natural-size.
 */

/* Cards used across homepage, shop, vehicle pages, search, and related products. */
body .tpa-product-card .tpa-product-media,
body .tpa-post-card .tpa-post-media,
body .tpa-shop-results .tpa-product-media,
body .dxh-product-grid .tpa-product-media,
body .dxh-shop-grid .tpa-product-media,
body .tpa-blog-card-media {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
body .tpa-product-card .tpa-product-media img,
body .tpa-post-card .tpa-post-media img,
body .tpa-shop-results .tpa-product-media img,
body .dxh-product-grid .tpa-product-media img,
body .dxh-shop-grid .tpa-product-media img,
body .tpa-blog-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* WooCommerce single-product gallery: main image 16:9, always the same slide size.
 * FlexSlider sets inline heights on .flex-viewport. Let aspect-ratio own that height,
 * leaving Woo's sliding/zoom code and dynamic image switching intact.
 */
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery,
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
  min-width:0;
}
body.single-product.woocommerce div.product div.images .flex-viewport,
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image{
  box-sizing:border-box;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
body.single-product.woocommerce div.product div.images .flex-viewport{
  height:auto!important;
}
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image>a{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg){
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none;
  max-height:none;
  aspect-ratio:16 / 9!important;
  object-fit:cover!important;
  object-position:center!important;
}
/* The zoom overlay should retain its full-resolution dimensions. */
body.single-product.woocommerce div.product div.images .woocommerce-product-gallery__image .zoomImg{
  aspect-ratio:auto!important;
  max-width:none;
  max-height:none;
  object-fit:initial!important;
}

/* Five thumbnails on wide screens; scroll row on narrow screens — all landscape. */
body.single-product.woocommerce div.product div.images .flex-control-thumbs li{
  box-sizing:border-box;
  aspect-ratio:16 / 9;
  min-width:0;
  height:auto;
  overflow:hidden;
}
body.single-product.woocommerce div.product div.images .flex-control-thumbs li img{
  display:block;
  width:100%!important;
  height:100%!important;
  aspect-ratio:16 / 9!important;
  object-fit:cover!important;
  object-position:center!important;
}
/* Compact accessory recommendations — the source image is also a 16:9 photo. */
body.single-product.woocommerce div.product .tpa-ev-product-mini-combo-photo{
  width:57px;
  height:auto;
  aspect-ratio:16 / 9;
  align-self:start;
}
body.single-product.woocommerce div.product .tpa-ev-product-mini-combo-photo img{
  width:100%;height:100%;aspect-ratio:16 / 9;object-fit:cover;
}

/* Image albums on each VinFast line: public preview + navigation thumbnails. */
.tpa-evv-vehicle .tpa-evx-gallery-hero,
.tpa-evv-vehicle .tpa-evx-gallery-mini,
.tpa-evv-vehicle .tpa-evx-gallery-thumb{
  aspect-ratio:16 / 9;
}
.tpa-evv-vehicle .tpa-evx-gallery-hero{
  min-height:0;
}
.tpa-evv-vehicle .tpa-evx-gallery-hero>img,
.tpa-evv-vehicle .tpa-evx-gallery-mini img,
.tpa-evv-vehicle .tpa-evx-gallery-thumb>img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.tpa-evv-vehicle .tpa-evx-gallery-thumb{
  height:auto;
}

/* Editorial cover photos and inline photos, not inline SVG, badges, maps, video.
 * Image files in media library remain untouched. */
.tpa-article .tpa-article-hero,
.tpa-article .tpa-article-hero img{
  aspect-ratio:16 / 9;
}
.tpa-article .tpa-article-hero img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.tpa-article-panel .tpa-prose figure.wp-block-image img,
.tpa-article-panel .tpa-prose figure.wp-block-gallery img,
.tpa-article-panel .tpa-prose > p > img,
.tpa-article-panel .tpa-prose > p > a > img,
body.single-product .woocommerce-Tabs-panel figure.wp-block-image img,
body.single-product .woocommerce-Tabs-panel figure.wp-block-gallery img,
body.single-product .woocommerce-Tabs-panel > p > img,
body.single-product .woocommerce-Tabs-panel > p > a > img,
.tpa-article-panel .tpa-prose .gallery-item img,
body.single-product .woocommerce-Tabs-panel .gallery-item img,
.entry-content figure.wp-block-image img,
.entry-content .wp-block-gallery img{
  display:block;
  max-width:100%;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
}

@media (max-width:620px){
  /* Keep five square-ish-ish *slots* out: use landscape thumbnails, four visible. */
  body.single-product.woocommerce div.product div.images .flex-control-thumbs{
    gap:8px;
  }
  body.single-product.woocommerce div.product div.images .flex-control-thumbs li{
    flex:0 0 clamp(78px,28%,118px);
    aspect-ratio:16 / 9;
  }
}

/* Supporting content photos in the blog/sidebar and cart — small, but still 16:9. */
.tpa-sidebar-mini-media,
.dxh-cart-thumb{
  aspect-ratio:16 / 9;
  height:auto;
}
.tpa-sidebar-mini-media img,
.dxh-cart-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
}