/* =========================================================
   GOCCE RELATED PRODUCTS PRO MAX
   SCOPE: ONLY single product > related products
   ========================================================= */

body.gocce-related-pro-max section.related.products,
body.gocce-related-pro-max .related.products{
  --grp-img-h: clamp(320px, 31vw, 500px);
  --grp-gap: clamp(22px, 2.4vw, 42px);
  position:relative!important;
}

/* Section title */
body.gocce-related-pro-max section.related.products > h2,
body.gocce-related-pro-max .related.products > h2{
  margin:0 0 clamp(22px,2.4vw,36px)!important;
  font-size:clamp(26px,2vw,38px)!important;
  line-height:1.05!important;
  font-weight:750!important;
  letter-spacing:-.035em!important;
  color:#111!important;
}

/* Clean equal grid */
body.gocce-related-pro-max section.related.products ul.products,
body.gocce-related-pro-max .related.products ul.products{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:var(--grp-gap)!important;
  margin:0!important;
  padding:0!important;
}

/* Equal-height cards */
body.gocce-related-pro-max section.related.products ul.products li.product,
body.gocce-related-pro-max .related.products ul.products li.product{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0 0 10px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:visible!important;
  transform:none!important;
}

/* Product link becomes a predictable vertical layout */
body.gocce-related-pro-max section.related.products li.product > a.woocommerce-LoopProduct-link,
body.gocce-related-pro-max .related.products li.product > a.woocommerce-LoopProduct-link,
body.gocce-related-pro-max section.related.products li.product .woocommerce-LoopProduct-link,
body.gocce-related-pro-max .related.products li.product .woocommerce-LoopProduct-link{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  text-decoration:none!important;
  color:inherit!important;
  border:0!important;
  box-shadow:none!important;
}

/* ---------------------------------------------------------
   IMAGE ZONE: this is what fixes one product being up/down
   --------------------------------------------------------- */
body.gocce-related-pro-max section.related.products li.product img,
body.gocce-related-pro-max .related.products li.product img,
body.gocce-related-pro-max section.related.products li.product .woocommerce-loop-product__link img,
body.gocce-related-pro-max .related.products li.product .woocommerce-loop-product__link img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:var(--grp-img-h)!important;
  max-height:var(--grp-img-h)!important;
  min-height:var(--grp-img-h)!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto 18px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  transform:none!important;
  filter:none!important;
}

/* If the theme has image wrapper, normalize that too */
body.gocce-related-pro-max section.related.products li.product [class*="image"],
body.gocce-related-pro-max .related.products li.product [class*="image"],
body.gocce-related-pro-max section.related.products li.product [class*="thumb"],
body.gocce-related-pro-max .related.products li.product [class*="thumb"],
body.gocce-related-pro-max section.related.products li.product figure,
body.gocce-related-pro-max .related.products li.product figure{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* Sale / discount badges stay at the same top level */
body.gocce-related-pro-max section.related.products li.product .onsale,
body.gocce-related-pro-max .related.products li.product .onsale,
body.gocce-related-pro-max section.related.products li.product [class*="badge"],
body.gocce-related-pro-max .related.products li.product [class*="badge"]{
  z-index:8!important;
}

/* Rating sits at a predictable position */
body.gocce-related-pro-max section.related.products li.product .star-rating,
body.gocce-related-pro-max .related.products li.product .star-rating,
body.gocce-related-pro-max section.related.products li.product [class*="rating"],
body.gocce-related-pro-max .related.products li.product [class*="rating"]{
  margin-top:0!important;
}

/* Brand/eyebrow */
body.gocce-related-pro-max section.related.products li.product .gocce-related-brand,
body.gocce-related-pro-max .related.products li.product .gocce-related-brand{
  min-height:18px!important;
  margin:0 0 8px!important;
  text-align:center!important;
  color:#7a6a5f!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
}

/* Product title — equal block height */
body.gocce-related-pro-max section.related.products li.product .woocommerce-loop-product__title,
body.gocce-related-pro-max .related.products li.product .woocommerce-loop-product__title,
body.gocce-related-pro-max section.related.products li.product .wc-block-grid__product-title,
body.gocce-related-pro-max .related.products li.product .wc-block-grid__product-title{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:2.65em!important;
  margin:0 0 8px!important;
  padding:0 10px!important;
  color:#111!important;
  text-align:center!important;
  font-size:clamp(16px,1.12vw,22px)!important;
  line-height:1.30!important;
  font-weight:650!important;
  letter-spacing:-.025em!important;
}

/* Price at same vertical baseline */
body.gocce-related-pro-max section.related.products li.product .price,
body.gocce-related-pro-max .related.products li.product .price{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  min-height:30px!important;
  margin:auto 0 0!important;
  padding:0 8px!important;
  color:#111!important;
  text-align:center!important;
  font-size:clamp(16px,1.08vw,21px)!important;
  line-height:1.2!important;
  font-weight:800!important;
}

body.gocce-related-pro-max section.related.products li.product .price del,
body.gocce-related-pro-max .related.products li.product .price del{
  opacity:.42!important;
  font-size:.76em!important;
  font-weight:500!important;
}

body.gocce-related-pro-max section.related.products li.product .price ins,
body.gocce-related-pro-max .related.products li.product .price ins{
  text-decoration:none!important;
}

/* Subtle, light hover only */
@media (hover:hover) and (pointer:fine){
  body.gocce-related-pro-max section.related.products li.product,
  body.gocce-related-pro-max .related.products li.product{
    transition:transform .32s cubic-bezier(.22,1,.36,1)!important;
  }

  body.gocce-related-pro-max section.related.products li.product:hover,
  body.gocce-related-pro-max .related.products li.product:hover{
    transform:translate3d(0,-4px,0)!important;
  }

  body.gocce-related-pro-max section.related.products li.product img,
  body.gocce-related-pro-max .related.products li.product img{
    transition:transform .38s cubic-bezier(.22,1,.36,1)!important;
  }

  body.gocce-related-pro-max section.related.products li.product:hover img,
  body.gocce-related-pro-max .related.products li.product:hover img{
    transform:scale(1.018)!important;
  }
}

/* Tablet */
@media(max-width:900px){
  body.gocce-related-pro-max section.related.products,
  body.gocce-related-pro-max .related.products{
    --grp-img-h:clamp(250px,42vw,360px);
  }
}

/* Mobile: related products remain 2 columns and aligned */
@media(max-width:767px){
  body.gocce-related-pro-max section.related.products,
  body.gocce-related-pro-max .related.products{
    --grp-img-h:clamp(165px,44vw,230px);
    --grp-gap:12px;
  }

  body.gocce-related-pro-max section.related.products ul.products,
  body.gocce-related-pro-max .related.products ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.gocce-related-pro-max section.related.products > h2,
  body.gocce-related-pro-max .related.products > h2{
    font-size:24px!important;
    margin-bottom:18px!important;
  }

  body.gocce-related-pro-max section.related.products li.product img,
  body.gocce-related-pro-max .related.products li.product img{
    margin-bottom:11px!important;
  }

  body.gocce-related-pro-max section.related.products li.product .gocce-related-brand,
  body.gocce-related-pro-max .related.products li.product .gocce-related-brand{
    min-height:14px!important;
    margin-bottom:5px!important;
    font-size:8px!important;
    letter-spacing:.15em!important;
  }

  body.gocce-related-pro-max section.related.products li.product .woocommerce-loop-product__title,
  body.gocce-related-pro-max .related.products li.product .woocommerce-loop-product__title{
    min-height:2.8em!important;
    padding:0 4px!important;
    font-size:13px!important;
    line-height:1.36!important;
  }

  body.gocce-related-pro-max section.related.products li.product .price,
  body.gocce-related-pro-max .related.products li.product .price{
    min-height:24px!important;
    gap:5px!important;
    padding:0 3px!important;
    font-size:13px!important;
  }
}

/* Very small phones: still 2 columns, keep readable */
@media(max-width:380px){
  body.gocce-related-pro-max section.related.products,
  body.gocce-related-pro-max .related.products{
    --grp-img-h:155px;
    --grp-gap:9px;
  }

  body.gocce-related-pro-max section.related.products li.product .woocommerce-loop-product__title,
  body.gocce-related-pro-max .related.products li.product .woocommerce-loop-product__title{
    font-size:12px!important;
  }
}