/*
  ZooMag product gallery CLEAN v6 — 2026-05-01

  Единый рабочий файл вместо цепочки временных фиксов:
  - бывший zm-product-gallery-fix-v1.css
  - бывший zm-product-gallery-variant-fill.css
  - бывший zm-product-gallery-final-fit-v5.css

  Задача:
  - карточка товара не ломается при пустой левой колонке;
  - рамка фото стабильная и одинаковая;
  - все изображения помещаются внутри рамки без обрезки;
  - миниатюры также не режут товар.
*/

/* ===== consolidated from zm-product-gallery-fix-v1.css ===== */
/*
  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));
  }
}

/* ===== consolidated from zm-product-gallery-variant-fill.css ===== */
/* ZooMag Product Gallery Fill v2 — 2026-04-29
   Makes the product photo/card use the extra vertical space created by variant buttons,
   while keeping the image uncropped and responsive. */

@media (min-width: 992px){
  body.zoomag-2026.product-product .zoohub-product-jungle,
  body.zoomag-2026 #product-product .zoohub-product-jungle,
  .zoohub-product-showcase .zoohub-product-jungle{
    grid-template-columns:minmax(500px,1.04fr) minmax(420px,.96fr) !important;
    align-items:stretch !important;
    gap:24px !important;
  }

  body.zoomag-2026.product-product .zoohub-gallery-den,
  body.zoomag-2026 #product-product .zoohub-gallery-den,
  .zoohub-product-showcase .zoohub-gallery-den{
    min-height:100% !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body.zoomag-2026.product-product .zoohub-gallery-habitat,
  body.zoomag-2026 #product-product .zoohub-gallery-habitat,
  .zoohub-product-showcase .zoohub-gallery-habitat,
  body.zoomag-2026.product-product .zoohub-gallery-main,
  body.zoomag-2026 #product-product .zoohub-gallery-main,
  .zoohub-product-showcase .zoohub-gallery-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body.zoomag-2026.product-product .zoohub-gallery-featured,
  body.zoomag-2026 #product-product .zoohub-gallery-featured,
  .zoohub-product-showcase .zoohub-gallery-featured,
  body.zoomag-2026.product-product .zoohub-image-petting-zone,
  body.zoomag-2026 #product-product .zoohub-image-petting-zone,
  .zoohub-product-showcase .zoohub-image-petting-zone{
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    display:flex !important;
  }

  body.zoomag-2026.product-product .zoohub-image-frame,
  body.zoomag-2026 #product-product .zoohub-image-frame,
  .zoohub-product-showcase .zoohub-image-frame{
    width:100% !important;
    flex:1 1 auto !important;
    min-height:clamp(540px,52vw,740px) !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

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

  body.zoomag-2026.product-product .zoohub-gallery-thumbnails,
  body.zoomag-2026 #product-product .zoohub-gallery-thumbnails,
  .zoohub-product-showcase .zoohub-gallery-thumbnails{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-top:14px !important;
  }

  body.zoomag-2026.product-product .zoohub-thumb-frame,
  body.zoomag-2026 #product-product .zoohub-thumb-frame,
  .zoohub-product-showcase .zoohub-thumb-frame{
    min-height:104px !important;
  }
}

@media (min-width: 1400px){
  body.zoomag-2026.product-product .zoohub-image-frame,
  body.zoomag-2026 #product-product .zoohub-image-frame,
  .zoohub-product-showcase .zoohub-image-frame{
    min-height:clamp(620px,48vw,800px) !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px){
  body.zoomag-2026.product-product .zoohub-product-jungle,
  body.zoomag-2026 #product-product .zoohub-product-jungle,
  .zoohub-product-showcase .zoohub-product-jungle{
    grid-template-columns:1fr !important;
  }

  body.zoomag-2026.product-product .zoohub-image-frame,
  body.zoomag-2026 #product-product .zoohub-image-frame,
  .zoohub-product-showcase .zoohub-image-frame{
    min-height:clamp(420px,68vw,620px) !important;
    max-height:none !important;
  }
}

@media (max-width: 767.98px){
  body.zoomag-2026.product-product .zoohub-image-frame,
  body.zoomag-2026 #product-product .zoohub-image-frame,
  .zoohub-product-showcase .zoohub-image-frame{
    min-height:clamp(320px,92vw,480px) !important;
    max-height:none !important;
  }
}

/* ===== consolidated from zm-product-gallery-final-fit-v5.css ===== */
/*
  ZooMag product gallery final fit v5 — 2026-05-01

  Fixes:
  - removes visual chaos from old compact/scale patches;
  - all product-gallery frames use one stable square geometry;
  - main image and all extra images fit inside the frame without cropping;
  - thumbnails also fit instead of cover-cropping.
*/

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-den,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-den,
.zoohub-product-showcase .zoohub-gallery-den,
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-habitat,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-habitat,
.zoohub-product-showcase .zoohub-gallery-habitat,
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-main,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-main,
.zoohub-product-showcase .zoohub-gallery-main,
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-featured,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-featured,
.zoohub-product-showcase .zoohub-gallery-featured,
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-image-petting-zone,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-image-petting-zone,
.zoohub-product-showcase .zoohub-image-petting-zone{
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  height:auto !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-den,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-den,
.zoohub-product-showcase .zoohub-gallery-den,
body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-habitat,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-habitat,
.zoohub-product-showcase .zoohub-gallery-habitat{
  display:block !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-main,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-main,
.zoohub-product-showcase .zoohub-gallery-main{
  display:grid !important;
  gap:14px !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-image-frame,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-image-frame,
.zoohub-product-showcase .zoohub-image-frame{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:1 / 1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
  background:#fff !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-image,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-image,
.zoohub-product-showcase .zoohub-gallery-image,
body.zoomag-2026.product-product .zoohub-product-showcase #zoohub-main-image,
body.zoomag-2026 #product-product .zoohub-product-showcase #zoohub-main-image,
.zoohub-product-showcase #zoohub-main-image,
body.zoomag-2026.product-product .zoohub-product-showcase #zoohub-main-image[data-index],
body.zoomag-2026 #product-product .zoohub-product-showcase #zoohub-main-image[data-index],
.zoohub-product-showcase #zoohub-main-image[data-index]{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  transform-origin:center center !important;
  transition:opacity .16s ease !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-gallery-thumbnails,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-gallery-thumbnails,
.zoohub-product-showcase .zoohub-gallery-thumbnails{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  margin:12px 0 0 !important;
}

body.zoomag-2026.product-product .zoohub-product-showcase .zoohub-thumb-frame,
body.zoomag-2026 #product-product .zoohub-product-showcase .zoohub-thumb-frame,
.zoohub-product-showcase .zoohub-thumb-frame{
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#fff !important;
}

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

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

/* ===== end ZooMag product gallery CLEAN v6 ===== */