/* ==========================================================================
 * Single Product Gallery
 * File: /assets/css/woocommerce-single/20-gallery.css
 * Goal (Mobile): main image LEFT, thumbs RIGHT in 3 columns (no JS, no hacks)
 * ========================================================================== */

body.single-product.woocommerce .mj-product__media{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  min-width:0 !important;
}

/* Ensure gallery container is not shrinked by theme layout */
body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  min-width:0 !important;
}

/* Wrapper base */
body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__wrapper{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
}

/* Main image frame (first image) */
body.single-product.woocommerce .mj-product__media
.woocommerce-product-gallery__wrapper
.woocommerce-product-gallery__image:first-child{
  aspect-ratio: 1 / 1;
  width:100% !important;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}

body.single-product.woocommerce .mj-product__media
.woocommerce-product-gallery__wrapper
.woocommerce-product-gallery__image:first-child a{
  display:block;
  width:100%;
  height:100%;
}

body.single-product.woocommerce .mj-product__media
.woocommerce-product-gallery__wrapper
.woocommerce-product-gallery__image:first-child img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:50% 42%;
  display:block;
}

/* ==========================================================================
 * Thumb sizing tokens
 * ========================================================================== */

body.single-product.woocommerce{
  --mj-sp-thumb: 72px;
  --mj-sp-thumb-gap: 10px;
  --mj-sp-right-cols: 3;
}

@media (max-width: 860px){
  body.single-product.woocommerce{
    --mj-sp-thumb: 56px;
    --mj-sp-thumb-gap: 10px;
    --mj-sp-right-cols: 3;
  }
}

@media (max-width: 380px){
  body.single-product.woocommerce{
    --mj-sp-thumb: 52px;
    --mj-sp-thumb-gap: 8px;
    --mj-sp-right-cols: 3;
  }
}

/* ==========================================================================
 * Preferred thumbs list (Woo flex-control-thumbs / flex-control-nav)
 * Desktop: thumbs below main (4 cols)
 * Mobile: main LEFT + thumbs RIGHT (3 cols)
 * ========================================================================== */

body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-thumbs,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-thumbs,
body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-nav,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-nav{
  list-style:none !important;
  margin:12px 0 0 !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns: repeat(4, var(--mj-sp-thumb)) !important;
  gap: var(--mj-sp-thumb-gap) !important;

  align-items:start !important;
  justify-content:flex-start !important;

  position:static !important;
  transform:none !important;
  height:auto !important;
}

body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-thumbs li,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-thumbs li,
body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-nav li,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-nav li{
  margin:0 !important;
  padding:0 !important;

  width: var(--mj-sp-thumb) !important;
  height: var(--mj-sp-thumb) !important;

  border-radius:14px !important;
  overflow:hidden !important;

  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.03) !important;

  cursor:pointer !important;
}

body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-thumbs li img,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-thumbs li img,
body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-nav li img,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-nav li img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  opacity:0.92;
  transition:opacity 120ms ease, transform 120ms ease;
}

body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-thumbs li:hover img,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-thumbs li:hover img,
body.single-product.woocommerce .woocommerce-product-gallery ol.flex-control-nav li:hover img,
body.single-product.woocommerce .woocommerce-product-gallery ul.flex-control-nav li:hover img{
  opacity:1;
  transform:translateY(-1px);
}

/* ==========================================================================
 * MOBILE LAYOUT (key fix):
 * - Force gallery to full width
 * - Right panel width fixed by 3 thumbs
 * - Left (main) column has MIN width to avoid being squeezed to thumb size
 * ========================================================================== */

@media (max-width: 860px){

  /* Make sure the gallery uses the full available width */
  body.single-product.woocommerce .mj-product__media,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__wrapper{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  /* Preferred structure: wrapper + thumbs list */
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery{
    display:grid !important;

    /* RIGHT fixed, LEFT must not collapse */
    grid-template-columns:
      minmax(220px, 1fr)
      calc(
        (var(--mj-sp-right-cols) * var(--mj-sp-thumb)) +
        ((var(--mj-sp-right-cols) - 1) * var(--mj-sp-thumb-gap))
      ) !important;

    gap: 12px !important;
    align-items:start !important;
  }

  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__wrapper{
    grid-column:1 / 2 !important;
    min-width:0 !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper
  .woocommerce-product-gallery__image:first-child{
    width:100% !important;
  }

  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery ol.flex-control-thumbs,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery ul.flex-control-thumbs,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery ol.flex-control-nav,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery ul.flex-control-nav{
    grid-column:2 / 3 !important;

    margin:0 !important;
    display:grid !important;
    grid-template-columns: repeat(var(--mj-sp-right-cols), var(--mj-sp-thumb)) !important;
    gap: var(--mj-sp-thumb-gap) !important;

    align-content:start !important;
    justify-content:start !important;
  }
}

/* Smaller phones: slightly reduce left min-width to prevent overflow */
@media (max-width: 390px){
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery{
    grid-template-columns:
      minmax(200px, 1fr)
      calc(
        (var(--mj-sp-right-cols) * var(--mj-sp-thumb)) +
        ((var(--mj-sp-right-cols) - 1) * var(--mj-sp-thumb-gap))
      ) !important;
  }
}

/* ==========================================================================
 * Fallback DOM (if no flex-control-thumbs):
 * Wrapper contains all images (1st main, rest thumbs)
 * Desktop: 4 cols thumbs below main
 * Mobile: main LEFT + thumbs RIGHT in 3 columns
 * ========================================================================== */

body.single-product.woocommerce .woocommerce-product-gallery__wrapper{
  display: grid !important;
  grid-template-columns: repeat(4, var(--mj-sp-thumb)) !important;
  gap: var(--mj-sp-thumb-gap) !important;
  align-items: start !important;
  justify-content: start !important;
}

body.single-product.woocommerce .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{
  grid-column: 1 / -1 !important;
}

body.single-product.woocommerce .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.single-product.woocommerce .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child){
  width: var(--mj-sp-thumb) !important;
  height: var(--mj-sp-thumb) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.03) !important;
  cursor: pointer !important;
}

body.single-product.woocommerce .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 860px){

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper{
    display:grid !important;

    grid-template-columns:
      minmax(220px, 1fr)
      var(--mj-sp-thumb)
      var(--mj-sp-thumb)
      var(--mj-sp-thumb) !important;

    column-gap: var(--mj-sp-thumb-gap) !important;
    row-gap: var(--mj-sp-thumb-gap) !important;

    align-items:start !important;
    justify-content:start !important;

    height:auto !important;
    min-height:0 !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child{
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(3n+2){
    grid-column: 2 / 3 !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(3n+3){
    grid-column: 3 / 4 !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(3n+4){
    grid-column: 4 / 5 !important;
  }
}

@media (max-width: 390px){
  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper{
    grid-template-columns:
      minmax(200px, 1fr)
      var(--mj-sp-thumb)
      var(--mj-sp-thumb)
      var(--mj-sp-thumb) !important;
  }
}

/* =========================================================
 * FIX: Mobile right thumbs spacing too large
 * Force thumbs grid to pack to top with fixed row height
 * ========================================================= */

@media (max-width: 860px){

  /* Right thumbs list (flex-control-thumbs/nav) */
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ol.flex-control-thumbs,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ul.flex-control-thumbs,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ol.flex-control-nav,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ul.flex-control-nav{

    /* pack to top */
    align-content: start !important;
    align-items: start !important;
    justify-content: start !important;

    /* prevent rows from stretching */
    grid-auto-rows: var(--mj-sp-thumb) !important;
    grid-auto-flow: row dense !important;

    /* never be stretched by parent */
    height: auto !important;
    min-height: 0 !important;
  }

  /* Each thumb cell must be fixed-size; avoid stretching */
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ol.flex-control-thumbs li,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ul.flex-control-thumbs li,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ol.flex-control-nav li,
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery
  ul.flex-control-nav li{
    width: var(--mj-sp-thumb) !important;
    height: var(--mj-sp-thumb) !important;
    align-self: start !important;
    justify-self: start !important;
  }

  /* Fallback DOM: wrapper contains thumbs */
  body.single-product.woocommerce .mj-product__media .woocommerce-product-gallery__wrapper{
    align-content: start !important;
    align-items: start !important;
    justify-content: start !important;

    grid-auto-rows: var(--mj-sp-thumb) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child){
    align-self: start !important;
    justify-self: start !important;
  }
}

@media (max-width: 860px){
  body.single-product.woocommerce .mj-product__media{
    padding-bottom: 2px !important; /* tiny spacer to avoid visual collision */
  }
}

/* =========================================================
   FIX: Mobile thumbs keep 3-row height WITHOUT pushing layout
   Goal: when thumbs < 7, media area height stays stable
   ========================================================= */
@media (max-width: 860px){

  /* 0) Safety: media container must allow inner grid to define height */
  body.single-product.woocommerce .mj-product__media{
    min-height: 0 !important;
  }

  /* 1) Preferred Woo thumbs structure */
  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery{
    /* Ensure the gallery stays as a 2-column grid (main + thumbs) */
    align-items: start !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery ol.flex-control-thumbs,
  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery ul.flex-control-thumbs{
    /* Keep thumbs on the right, never drop below */
    align-self: start !important;

    /* Reserve exactly 3 rows height (no fake thumbs, no extra items) */
    min-height: calc((var(--mj-sp-thumb) * 3) + (var(--mj-sp-thumb-gap) * 2)) !important;

    /* Make sure remaining space (if any) stays as empty container, not pushing items */
    align-content: start !important;
    justify-content: start !important;
  }

  /* 2) Fallback structure (wrapper-grid) */
  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper{
    align-items: start !important;
  }

  body.single-product.woocommerce .mj-product__media
  .woocommerce-product-gallery__wrapper{
    min-height: calc((var(--mj-sp-thumb) * 3) + (var(--mj-sp-thumb-gap) * 2)) !important;
  }
}