/* Trijal Mart PDP v14: proportional gallery column fix.
   Scope: product.php only. Fixes portrait-product blank gap by sizing the gallery
   column from image orientation instead of using one fixed desktop width. */

.tm-product-page{
  --tm-gallery-portrait-w: 392px;
  --tm-gallery-square-w: 470px;
  --tm-gallery-wide-w: 560px;
  --tm-cart-w: 278px;
  --tm-pdp-gap: 20px;
}

/* Default proportional grid, overridden by orientation classes added by JS. */
.tm-product-page .tm-product-layout{
  gap: var(--tm-pdp-gap)!important;
  align-items:start!important;
}

/* Portrait products such as phone cases/watches should not reserve a 560px gallery lane. */
.tm-product-page.tm-pdp-portrait .tm-product-layout{
  grid-template-columns: minmax(340px, var(--tm-gallery-portrait-w)) minmax(560px, 1fr) var(--tm-cart-w)!important;
}
.tm-product-page.tm-pdp-portrait .tm-product-gallery-col,
.tm-product-page.tm-pdp-portrait .tm-gallery-inner{
  width:100%!important;
  max-width:var(--tm-gallery-portrait-w)!important;
}
.tm-product-page.tm-pdp-portrait .tm-product-main-media{
  width:100%!important;
  max-width:var(--tm-gallery-portrait-w)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--tm-main-img-ratio, 864 / 1184)!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:0!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Square products get a medium media lane. */
.tm-product-page.tm-pdp-square .tm-product-layout{
  grid-template-columns: minmax(420px, var(--tm-gallery-square-w)) minmax(520px, 1fr) var(--tm-cart-w)!important;
}
.tm-product-page.tm-pdp-square .tm-product-gallery-col,
.tm-product-page.tm-pdp-square .tm-gallery-inner{
  max-width:var(--tm-gallery-square-w)!important;
}
.tm-product-page.tm-pdp-square .tm-product-main-media{
  width:100%!important;
  max-width:var(--tm-gallery-square-w)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--tm-main-img-ratio, 1 / 1)!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:0!important;
  box-shadow:none!important;
}

/* Wide images can use more horizontal space without creating empty side canvas. */
.tm-product-page.tm-pdp-wide .tm-product-layout{
  grid-template-columns: minmax(500px, var(--tm-gallery-wide-w)) minmax(460px, 1fr) var(--tm-cart-w)!important;
}
.tm-product-page.tm-pdp-wide .tm-product-gallery-col,
.tm-product-page.tm-pdp-wide .tm-gallery-inner{
  max-width:var(--tm-gallery-wide-w)!important;
}
.tm-product-page.tm-pdp-wide .tm-product-main-media{
  width:100%!important;
  max-width:var(--tm-gallery-wide-w)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--tm-main-img-ratio, 4 / 3)!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:0!important;
  box-shadow:none!important;
}

/* Actual image only — no artificial card/canvas around it. */
.tm-product-page .tm-product-main-media img#mainProductImage,
.tm-product-page img#mainProductImage{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Keep zoom icon without making a boxy frame. */
.tm-product-page .tm-image-zoom-icon{
  top:10px!important;
  right:10px!important;
}

/* Arrows should sit beside the real image, not beside a fake wide stage. */
.tm-product-page .gallery-nav-prev{left:-22px!important;}
.tm-product-page .gallery-nav-next{right:-22px!important;}

.tm-product-page .tm-product-gallery-hint{
  margin-top:10px!important;
  text-align:left!important;
}
.tm-product-page .tm-product-thumbs{
  margin-top:8px!important;
  width:100%!important;
  max-width:100%!important;
}

/* Make title/description column breathe after gallery lane is fixed. */
.tm-product-page .tm-product-title{
  max-width:760px!important;
}
.tm-product-page .tm-about-item-panel{
  margin-top:10px!important;
}

@media (max-width:1360px){
  .tm-product-page{
    --tm-gallery-portrait-w: 374px;
    --tm-gallery-square-w: 440px;
    --tm-gallery-wide-w: 520px;
    --tm-cart-w: 268px;
    --tm-pdp-gap: 18px;
  }
  .tm-product-page.tm-pdp-portrait .tm-product-layout{
    grid-template-columns:minmax(330px, var(--tm-gallery-portrait-w)) minmax(470px, 1fr) var(--tm-cart-w)!important;
  }
  .tm-product-page.tm-pdp-square .tm-product-layout{
    grid-template-columns:minmax(390px, var(--tm-gallery-square-w)) minmax(430px, 1fr) var(--tm-cart-w)!important;
  }
  .tm-product-page.tm-pdp-wide .tm-product-layout{
    grid-template-columns:minmax(460px, var(--tm-gallery-wide-w)) minmax(400px, 1fr) var(--tm-cart-w)!important;
  }
}

@media (max-width:1180px){
  .tm-product-page .tm-product-layout,
  .tm-product-page.tm-pdp-portrait .tm-product-layout,
  .tm-product-page.tm-pdp-square .tm-product-layout,
  .tm-product-page.tm-pdp-wide .tm-product-layout{
    grid-template-columns:minmax(0, 460px) minmax(0, 1fr)!important;
    grid-template-areas:"gallery info" "cart cart"!important;
  }
  .tm-product-page .tm-product-gallery-col,
  .tm-product-page .tm-gallery-inner{
    max-width:460px!important;
  }
}

@media (max-width:760px){
  .tm-product-page .tm-product-layout,
  .tm-product-page.tm-pdp-portrait .tm-product-layout,
  .tm-product-page.tm-pdp-square .tm-product-layout,
  .tm-product-page.tm-pdp-wide .tm-product-layout{
    grid-template-columns:1fr!important;
    grid-template-areas:"gallery" "info" "cart"!important;
  }
  .tm-product-page .tm-product-gallery-col,
  .tm-product-page .tm-gallery-inner,
  .tm-product-page .tm-product-main-media{
    max-width:100%!important;
    width:100%!important;
  }
  .tm-product-page .gallery-nav-prev{left:8px!important;}
  .tm-product-page .gallery-nav-next{right:8px!important;}
}