/* ==========================================================================
   ZAVRYNE 16.21 — FINAL FIXED PRODUCT MERCHANDISING
   - No horizontal product rails
   - Mobile cards have real separation and no clipped content
   - 4 desktop / 3 tablet / 2 mobile
   ========================================================================== */

*,
*::before,
*::after{box-sizing:border-box}

/* ---------- HOME PRODUCT GRIDS ---------- */
.home .zv88-products ul.products,
.home .zv88-new ul.products,
.home .zv-infinite-catalog ul.products{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:20px!important;
  width:100%!important;
  max-width:100%!important;
  padding:4px 0 20px!important;
  margin:0!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.home .zv88-products ul.products>li.product,
.home .zv88-new ul.products>li.product,
.home .zv-infinite-catalog ul.products>li.product{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  margin:0!important;
  overflow:hidden!important;
}

/* ---------- PRODUCT PAGE: EVERY PRODUCT RECOMMENDATION = GRID ---------- */
.single-product .zv1617-recommendations{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}

.single-product .zavryne-catalog-more{
  width:min(1440px,calc(100% - 32px))!important;
  max-width:1440px!important;
  margin:34px auto 0!important;
  padding:32px!important;
  overflow:visible!important;
}

.single-product .zv1512-related-shell{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}

.single-product .zavryne-catalog-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:2px 0 12px!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}

.single-product .zavryne-catalog-card{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  flex:none!important;
  margin:0!important;
  padding:0 0 14px!important;
  overflow:hidden!important;
  border:1px solid #e7ded7!important;
  border-radius:14px!important;
  background:#fff!important;
}

/* image remains the original full square image */
.single-product .zavryne-catalog-card__image{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:#f7f4f1!important;
}
.single-product .zavryne-catalog-card__image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Text can wrap naturally; nothing may push outside the card. */
.single-product .zv1619-reco-category,
.single-product .zavryne-catalog-card__title,
.single-product .zv1488-card-rating,
.single-product .zavryne-catalog-card .price,
.single-product .zv1512-card-stock{
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  margin-left:12px!important;
  margin-right:12px!important;
  min-width:0!important;
}

.single-product .zv1619-reco-category{
  margin-top:12px!important;
  font-size:9px!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
}

.single-product .zavryne-catalog-card__title{
  min-height:0!important;
  margin-top:6px!important;
  font-size:14px!important;
  line-height:1.38!important;
  font-weight:650!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.single-product .zavryne-catalog-card__title a{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}

.single-product .zavryne-catalog-card .price{
  margin-top:8px!important;
  font-size:17px!important;
  line-height:1.2!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.single-product .zv1512-card-stock{
  margin-top:5px!important;
  font-size:10px!important;
}

.single-product .zavryne-catalog-card__cta{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  min-width:0!important;
  min-height:43px!important;
  margin:12px 12px 0!important;
  margin-top:auto!important;
  padding:0 8px!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-align:center!important;
  font-size:10.5px!important;
  line-height:1.15!important;
}

/* Old arrows/scripts have no visual fallback. */
.single-product .zv1512-rail-nav,
.single-product .zv1512-related-prev,
.single-product .zv1512-related-next{
  display:none!important;
}

/* Complete-the-look is also always a normal grid. */
.single-product .zv1520-look-grid,
.single-product .look-builder-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.single-product .zv1520-look-card,
.single-product .look-builder-card{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Safety: if any legacy Woo related/upsell/cross-sell markup appears,
   force it to the same non-scrolling grid. */
.single-product .related.products ul.products,
.single-product .upsells.products ul.products,
.single-product .cross-sells ul.products{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.single-product .related.products ul.products>li.product,
.single-product .upsells.products ul.products>li.product,
.single-product .cross-sells ul.products>li.product{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  margin:0!important;
}

/* No legacy Amazon-style recommendation rail can scroll sideways. */
.single-product .zv1520-rail__track,
.single-product .zv38-complements__rail{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.single-product .zv1520-card,
.single-product .zv38-complement-card{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  margin:0!important;
  scroll-snap-align:none!important;
}

/* ---------- TABLET ---------- */
@media(max-width:1100px){
  .home .zv88-products ul.products,
  .home .zv88-new ul.products,
  .home .zv-infinite-catalog ul.products,
  .single-product .zavryne-catalog-grid,
  .single-product .zv1520-look-grid,
  .single-product .look-builder-grid,
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products,
  .single-product .cross-sells ul.products,
  .single-product .zv1520-rail__track,
  .single-product .zv38-complements__rail{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
}

/* ---------- MOBILE: clean 2-column grid ---------- */
@media(max-width:800px){
  .home .zv88-products,
  .home .zv88-new,
  .home .zv-infinite-catalog{
    overflow:visible!important;
  }

  .home .zv88-products ul.products,
  .home .zv88-new ul.products,
  .home .zv-infinite-catalog ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 12px!important;
    padding:2px 0 16px!important;
  }

  .single-product .zavryne-catalog-more{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin:26px auto 0!important;
    padding:20px 12px 22px!important;
    border-radius:16px!important;
  }

  .single-product .zavryne-catalog-grid,
  .single-product .zv1520-look-grid,
  .single-product .look-builder-grid,
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products,
  .single-product .cross-sells ul.products,
  .single-product .zv1520-rail__track,
  .single-product .zv38-complements__rail{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 12px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  .single-product .zavryne-catalog-card{
    border-radius:12px!important;
    padding-bottom:11px!important;
  }

  .single-product .zavryne-catalog-card__title{
    margin-left:10px!important;
    margin-right:10px!important;
    max-width:calc(100% - 20px)!important;
    font-size:12.5px!important;
    line-height:1.35!important;
  }
  .single-product .zv1619-reco-category,
  .single-product .zv1488-card-rating,
  .single-product .zavryne-catalog-card .price,
  .single-product .zv1512-card-stock{
    margin-left:10px!important;
    margin-right:10px!important;
    max-width:calc(100% - 20px)!important;
  }
  .single-product .zavryne-catalog-card .price{
    font-size:16px!important;
  }

  .single-product .zavryne-catalog-card__cta{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    min-height:40px!important;
    margin:10px 10px 0!important;
    margin-top:auto!important;
    padding:0 6px!important;
    border-radius:7px!important;
    font-size:10px!important;
    white-space:normal!important;
  }

  /* Home cards: keep controls within each column. */
  .home li.product,
  .home li.product *{
    min-width:0;
  }
  .home .zv88-products li.product .woocommerce-loop-product__title,
  .home .zv88-new li.product .woocommerce-loop-product__title,
  .home .zv-infinite-catalog li.product .woocommerce-loop-product__title{
    padding:10px 10px 0!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .home .zv88-products li.product a.button,
  .home .zv88-new li.product a.button,
  .home .zv-infinite-catalog li.product a.button{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
    margin:10px 10px 0!important;
    padding:0 6px!important;
    font-size:9.5px!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-align:center!important;
  }
}

@media(max-width:390px){
  .home .zv88-products ul.products,
  .home .zv88-new ul.products,
  .home .zv-infinite-catalog ul.products,
  .single-product .zavryne-catalog-grid,
  .single-product .zv1520-look-grid,
  .single-product .look-builder-grid{
    gap:12px 10px!important;
  }
}