/*
 * v27.12 - Approved Master gallery standard
 * Loaded only on the 17 audited product-detail templates listed in functions.php.
 * Goal: identical thumbnail geometry, stable main-image stage and no layout shift
 * between products with different source-image aspect ratios.
 */

/* Desktop / large tablet: thumbnails at the upper-left, stable image stage at right. */
@media (min-width: 901px) {
  body.product-detail-page .product-gallery {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 42px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #F4F8FC !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.product-detail-page .gallery-thumbs {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 86px !important;
    max-width: 86px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #F4F8FC !important;
  }

  body.product-detail-page .thumb-btn,
  body.product-detail-page .thumb-btn.active,
  body.product-detail-page .video-thumb {
    flex: 0 0 74px !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    background: #F4F8FC !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.product-detail-page .thumb-btn img,
  body.product-detail-page .video-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #F4F8FC !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  body.product-detail-page .main-product-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #F4F8FC !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.product-detail-page .main-product-image picture {
    display: contents !important;
  }

  body.product-detail-page .main-product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #F4F8FC !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }
}

/* Mobile: one stable image stage first, equal thumbnails in a horizontal rail below. */
@media (max-width: 900px) {
  body.product-detail-page .product-gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #F4F8FC !important;
  }

  body.product-detail-page .main-product-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #F4F8FC !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.product-detail-page .main-product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #F4F8FC !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  body.product-detail-page .gallery-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 2px 0 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: #F4F8FC !important;
  }

  body.product-detail-page .gallery-thumbs::-webkit-scrollbar {
    display: none !important;
  }

  body.product-detail-page .thumb-btn,
  body.product-detail-page .thumb-btn.active,
  body.product-detail-page .video-thumb {
    flex: 0 0 66px !important;
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    background: #F4F8FC !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.product-detail-page .thumb-btn img,
  body.product-detail-page .video-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #F4F8FC !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}