/*
  ZM Product Gallery Fix v1 (2026-03-02)

  Symptoms (as in your screenshot):
  - huge empty space to the right;
  - product content squeezed to the left;
  - gallery appears "missing" or collapses.

  Root cause:
  - a legacy hotfix in Products.css forces .zoohub-layout to a 2-column grid
    even when column_left is NOT rendered (empty string => no #column-left node).
    With only one child (<main>), it lands in column 1 and column 2 stays empty.

  Fix strategy:
  - Make <main.zoohub-main> span all columns by default (grid-column: 1 / -1).
  - If #column-left exists, place main into the second column.
  - Lock gallery block back to a stable square frame with contain-fit image.
*/

/* --- Layout: prevent empty right column when column_left is not present --- */
/* Match product page in two possible ways:
   - OpenCart often puts route as a BODY class: body.product-product
   - Some themes use a wrapper id: #product-product
*/
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-layout,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-layout{
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 992px){
  body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-layout,
  body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-layout{
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    align-items: start;
  }
}

/* Default: main spans full width (so no empty column appears) */
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-layout > .zoohub-main,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-layout > .zoohub-main{
  grid-column: 1 / -1;
  min-width: 0;
}

/* If column-left exists, main goes to column 2 */
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-layout > #column-left,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-layout > #column-left{
  grid-column: 1;
  width: auto !important;
  max-width: none !important;
}
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-layout > #column-left + .zoohub-main,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-layout > #column-left + .zoohub-main{
  grid-column: 2 / -1;
}

/* Bootstrap columns sometimes leak width rules into grid items */
body.zoomag-2026.product-product .zoohub-product-showcase #column-left[class*="col"],
body.zoomag-2026.product-product .zoohub-product-showcase #column-left[class*="col-"],
body.zoomag-2026 #product-product .zoohub-product-showcase #column-left[class*="col"],
body.zoomag-2026 #product-product .zoohub-product-showcase #column-left[class*="col-"]{
  flex: initial !important;
  width: auto !important;
}

/* --- Product grid: keep gallery + info readable on desktop, stack on mobile --- */
@media (min-width: 992px){
  body.zoomag-2026.product-product .zoohub-product-jungle,
  body.zoomag-2026 #product-product .zoohub-product-jungle{
    grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr) !important;
    gap: 22px !important;
  }
}
@media (max-width: 991.98px){
  body.zoomag-2026.product-product .zoohub-product-jungle,
  body.zoomag-2026 #product-product .zoohub-product-jungle{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --- Gallery: force it to exist and render a stable square frame --- */
body.zoomag-2026.product-product .zoohub-gallery-den,
body.zoomag-2026.product-product .zoohub-gallery-habitat,
body.zoomag-2026.product-product .zoohub-gallery-featured,
body.zoomag-2026 #product-product .zoohub-gallery-den,
body.zoomag-2026 #product-product .zoohub-gallery-habitat,
body.zoomag-2026 #product-product .zoohub-gallery-featured{
  display: block !important;
}

body.zoomag-2026.product-product .zoohub-image-petting-zone,
body.zoomag-2026 #product-product .zoohub-image-petting-zone{
  width: 100% !important;
  max-width: none !important;
}

body.zoomag-2026.product-product .zoohub-image-frame,
body.zoomag-2026 #product-product .zoohub-image-frame{
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 720px !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.zoomag-2026.product-product .zoohub-gallery-image,
body.zoomag-2026 #product-product .zoohub-gallery-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 12px !important;
  transform: none !important;
}

/* Thumbnails stay in grid, never collapse into a strip */
body.zoomag-2026.product-product .zoohub-gallery-thumbnails,
body.zoomag-2026 #product-product .zoohub-gallery-thumbnails{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px){
  body.zoomag-2026.product-product .zoohub-gallery-thumbnails,
  body.zoomag-2026 #product-product .zoohub-gallery-thumbnails{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}