/*
 * Product imagery: let each source image determine its displayed height.
 * Scope these overrides to product cards and the product detail gallery.
 */

/* Home product slider. The common .img-box rule otherwise absolutely
   positions and crops its image inside a fixed 2:3 frame. */
.index-gate .gate-swiper {
  height: auto;
}

.index-gate .gate-swiper .swiper-slide .img-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding-bottom: 0;
  overflow: visible;
}

.index-gate .gate-swiper .swiper-slide .img-box img,
.index-gate .gate-swiper .swiper-slide .img-box:hover img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  transform: none;
}

/* Product category cards and product search results. */
.product-one .product__item__img {
  overflow: visible;
}

.product-one .product__item__img .product__item__img__item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: static;
  width: 100%;
  height: auto;
  padding-bottom: 0;
  overflow: visible;
}

.product-one .product__item__img .product__item__img__item img,
.product-one .product__item:hover .product__item__img .product__item__img__item img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  transform: none;
}

/* Product listings inside a category. */
.product-one.product-section .demos-one__image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: auto;
}

.product-one.product-section .demos-one__image > img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
}

/* Main gallery, thumbnails, and descriptive images on product pages. */
.product-details .product-details__img.real-image {
  height: auto;
}

.product-details .product-imgs .swiper-slide img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
}

.product-details .product-imgs .mySwiper .swiper-slide img {
  aspect-ratio: auto;
}

.product-details .details-description-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* Related product cards use a service template with tall, cropped portraits. */
.product-details + .service-one .service-one__item {
  height: auto;
  max-height: none;
  border-radius: 0;
}

.product-details + .service-one .service-one__item__thumb {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.product-details + .service-one .service-one__item__thumb img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  border-radius: 0;
  object-fit: contain;
}

.product-details + .service-one .service-one__item__thumb::before,
.product-details + .service-one .service-one__item__thumb::after {
  display: none;
}

.product-details + .service-one .service-one__item__content {
  position: static;
}

.product-details + .service-one .service-one__item:hover .service-one__item__title {
  color: var(--wallox-text-dark, #2E2A20);
}

/* Case archive covers preserve source proportions and do not zoom on hover. */
.case-section .service-three__thumb {
  height: auto;
  -webkit-mask: none;
  mask: none;
}

.case-section .service-three__thumb > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-section .service-three__thumb img,
.case-section .service-three__item:hover .service-three__thumb img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Solution detail galleries show the complete source images in a compact grid. */
.taoyuan-solution-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.taoyuan-solution-gallery figure {
  margin: 0;
  min-width: 0;
}

.taoyuan-solution-gallery img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 767px) {
  .taoyuan-solution-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Home project cases use their source aspect ratio, including on hover. */
.index-news .index-news-list ul li .pic .img-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding-bottom: 0;
  overflow: visible;
}

.index-news .index-news-list ul li .pic .img-box img,
.index-news .index-news-list ul li .pic .img-box:hover img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  transform: none;
}
/*
 * Consistent product presentation: source photography is kept intact.
 * 2:3 matches the vertical tree catalog and allows top/bottom AI outpainting without cropping.
 */
:root {
  --taoyuan-product-image-ratio: 2 / 3;
}

.index-gate .gate-swiper {
  padding-right: 100px;
}

.index-gate .gate-swiper .swiper-slide {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}

.index-gate .gate-swiper .swiper-slide .img-box,
.product-one .product__item__img .product__item__img__item,
.product-one.product-section .demos-one__image,
.product-details .product-imgs .mySwiper2 .swiper-slide,
.product-details .product-imgs .mySwiper .swiper-slide,
.product-details + .service-one .service-one__item__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: var(--taoyuan-product-image-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #e4e1de;
}

.index-gate .gate-swiper .swiper-slide .img-box img,
.index-gate .gate-swiper .swiper-slide .img-box:hover img,
.product-one .product__item__img .product__item__img__item img,
.product-one .product__item:hover .product__item__img .product__item__img__item img,
.product-one.product-section .demos-one__image > img,
.product-details .product-imgs .mySwiper2 .swiper-slide img,
.product-details .product-imgs .mySwiper .swiper-slide img,
.product-details + .service-one .service-one__item__thumb img {
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.index-gate .gate-swiper .swiper-slide .shop-more {
  align-self: center;
  margin-top: auto;
}

.product-details .product-imgs .mySwiper .swiper-slide {
  width: 25%;
}

/* The theme's reveal animation sets an inline transform on gallery photos. */
.product-details .product-imgs .swiper-slide img {
  transform: none !important;
}

@media (max-width: 767px) {
  .index-gate .gate-swiper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .index-gate .gate-swiper .swiper-button-prev,
  .index-gate .gate-swiper .swiper-button-next {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .index-gate .gate-swiper {
    padding-left: 60px;
    padding-right: 60px;
  }

  .index-gate .gate-swiper .swiper-button-prev {
    left: 16px;
  }

  .index-gate .gate-swiper .swiper-button-next {
    right: 16px;
  }
}

/* The desktop hero is taller than its former 1920:920 frame. */
.banner.index-banner {
  aspect-ratio: auto;
}

.banner.index-banner .swiper,
.banner.index-banner .swiper-wrapper,
.banner.index-banner .swiper-slide {
  height: auto;
}

.banner.index-banner .index-banner-img {
  position: static !important;
  display: block;
  min-height: 0 !important;
  height: auto !important;
  object-fit: contain !important;
}

/*
 * Taoyuan: consistent frames outside product cards.
 * Applied after the product image rules in taoyuan-products-natural.css.
 * Preserve every source pixel: frames use contain and never zoom on hover.
 * AI background extensions may later fill these frames without changing CSS.
 */

:root {
  --taoyuan-image-mat: #e4e1de;
  --taoyuan-banner-mat: #26302c;
}

/* Home and archive case covers: mixed 3:4 and 4:3 sources share 1:1. */
.index-news .index-news-list ul li .pic .img-box,
.case-section .service-three__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.case-section .service-three__thumb > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.index-news .index-news-list ul li .pic .img-box > img,
.index-news .index-news-list ul li .pic .img-box:hover > img,
.case-section .service-three__thumb img,
.case-section .service-three__item:hover .service-three__thumb img {
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Four existing news covers are close to square; remove absolute/cover crop. */
.index-stories .stories-list .img-box,
.blog-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.index-stories .stories-list .img-box > img,
.index-stories .stories-list .img-box:hover > img,
.blog-card__image > img,
.blog-card:hover .blog-card__image > img {
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Six service images already share 800:550. */
.index-service-list .pic,
.service-section .project-card__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.index-service-list .pic > img,
.service-section .project-card__thumb > img,
.service-section .project-card__thumb:hover > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Ten solution covers already share 800:600. */
.index-solution-list .pic,
.solution-section .service-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.index-solution-list .pic > img,
.solution-section .service-card__image > img,
.solution-section .service-card:hover .service-card__image > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* About factory carousel: full source visible inside consistent 4:3 cards. */
.gallery-one .gallery-one__card {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.gallery-one .gallery-one__card > img,
.gallery-one .gallery-one__card:hover > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  opacity: 1;
}

/* Certificates are all 600:850. Keep seals and text exactly intact. */
.certificate-section .project-card__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 17;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--taoyuan-image-mat);
}

.certificate-section .project-card__thumb > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Home About image is square. Videos and iframes keep their 16:9 layout. */
.index-designer .video-box:has(> img) {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--taoyuan-image-mat);
}

.index-designer .video-box > img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100% !important; /* The square frame remains fixed; contain shows the full image. */
  object-fit: contain !important; /* Overrides the inline cover. */
}

/* About main images have natural height already; guard future layout edits. */
.about-one__thumb img,
.about-one__video img {
  height: auto;
  object-fit: contain;
}

/* Detail galleries and article images retain their individual source ratios. */
.service-details__thumbnail img,
.service-details__text img,
.public-rich-text img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Inner banners use 3:1 source images. Desktop text overlays the full image.
 * On phones, the complete wide image sits above readable text on a dark mat.
 * This also handles the 404 banner's slightly different source ratio.
 */
.top-carousel .top-carousel-li {
  min-height: 0;
  aspect-ratio: 3 / 1;
  background-color: var(--taoyuan-banner-mat);
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  padding: clamp(32px, 3vw, 72px) 0;
}

.top-carousel .top-carousel-text {
  text-shadow: 0 1px 8px rgb(0 0 0 / 55%);
}

@media (max-width: 768px) {
  .top-carousel .top-carousel-li {
    min-height: 0;
    aspect-ratio: auto;
    justify-content: flex-start;
    background-size: contain;
    background-position: center top;
    padding: calc(33.333vw + 24px) 16px 36px;
  }

  .top-carousel .top-carousel-text {
    text-shadow: none;
  }

  .top-carousel .top-carousel-text h2 {
    font-size: clamp(28px, 7vw, 42px);
    line-height: 1.15;
  }
}


/* About's left photo is a content image; show it without animation zoom or crop. */
.about-one .about-one__thumb__item.real-image { height: auto; overflow: visible; }
.about-one .about-one__thumb__item.real-image img { display: block; position: static; width: 100%; height: auto; object-fit: contain; transform: none !important; }


/* Product detail tabs remain usable when delayed theme scripts are unavailable. */
.product-details .product-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-details .product-tab-input:checked[data-tab="desc"] ~ .product-details-tab label[data-tab="desc"],
.product-details .product-tab-input:checked[data-tab="download"] ~ .product-details-tab label[data-tab="download"],
.product-details .product-tab-input:checked[data-tab="content"] ~ .product-details-tab label[data-tab="content"] {
  color: var(--wallox-base, #46c79a);
}

.product-details .product-tab-input:checked[data-tab="desc"] ~ .product-details-tab label[data-tab="desc"]::after,
.product-details .product-tab-input:checked[data-tab="download"] ~ .product-details-tab label[data-tab="download"]::after,
.product-details .product-tab-input:checked[data-tab="content"] ~ .product-details-tab label[data-tab="content"]::after {
  width: 100%;
}

.product-details .product-tab-input:focus-visible[data-tab="desc"] ~ .product-details-tab label[data-tab="desc"],
.product-details .product-tab-input:focus-visible[data-tab="download"] ~ .product-details-tab label[data-tab="download"],
.product-details .product-tab-input:focus-visible[data-tab="content"] ~ .product-details-tab label[data-tab="content"] {
  outline: 2px solid var(--wallox-base, #46c79a);
  outline-offset: 5px;
}

.product-details .product-tab-input:checked ~ .product-details-lis > [data-product-tab-panel] {
  display: none !important;
}

.product-details .product-tab-input:checked[data-tab="desc"] ~ .product-details-lis > [data-product-tab-panel="desc"],
.product-details .product-tab-input:checked[data-tab="download"] ~ .product-details-lis > [data-product-tab-panel="download"],
.product-details .product-tab-input:checked[data-tab="content"] ~ .product-details-lis > [data-product-tab-panel="content"] {
  display: block !important;
}


/* Download rows show the uploaded file, not its image field. */
.details-download li {
  gap: 16px;
}

.details-download li > .download-file-type {
  display: flex;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid #d4e1dc;
  border-radius: 4px;
  background: #f2f7f5;
  color: #27634f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.details-download li > .download-file-name {
  min-width: 0;
  margin: 0 8px;
  color: #26332e;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.details-download li > .wallox-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .details-download li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .details-download li > .download-file-type {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
  }

  .details-download li > .download-file-name {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-top: 4px;
  }

  .details-download li > .wallox-btn {
    grid-column: 2;
    justify-self: start;
  }
}


/* Product detail gallery controls: compact thumbnails and resilient pre-init layout. */
.product-details .product-imgs .mySwiper {
  margin-top: 10px;
  padding: 6px 2px;
}

.product-details .product-imgs .mySwiper .swiper-slide {
  flex: 0 0 72px;
  width: 72px !important;
  height: 72px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(46, 42, 32, 0.14);
  border-radius: 10px;
  background-color: #f3f1ef;
  overflow: hidden;
}

.product-details .product-imgs .mySwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  object-fit: cover;
}

.product-details .product-imgs .mySwiper .swiper-slide-thumb-active {
  border-color: var(--wallox-base, #46c79a);
}

.product-details .product-imgs .mySwiper2:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

@media (max-width: 767px) {
  .product-details .product-imgs .mySwiper .swiper-slide {
    flex-basis: 58px;
    width: 58px !important;
    height: 58px;
  }
}