/* =========================================================
   PO HOME CAROUSEL (Kadence + Woo shortcode)
   Wrapper: .po-home-carousel
   Desktop: 4 | Tablet: 3 | Mobile: 1.5
   Arrows: Desktop only (JS) show on hover
   Dots: Mobile only (JS)
========================================================= */

.po-home-carousel{
  position:relative;
  --po-gap:14px;
  --po-edge:12px;
}

/* ---------- TRACK (UL) ---------- */
.po-home-carousel ul.products{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:var(--po-gap) !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;

  /* allow vertical page scroll + horizontal swipe */
  touch-action: pan-y pan-x !important;

  margin:0 !important;
  padding:0 var(--po-edge) 10px !important;
  list-style:none !important;

  /* disable theme grid */
  grid-template-columns:none !important;
  width:100% !important;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-left:var(--po-edge);
  scroll-padding-right:var(--po-edge);

  cursor:grab;
  user-select:none;

  /* hide scrollbar */
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.po-home-carousel ul.products::-webkit-scrollbar{ display:none !important; height:0 !important; }
.po-home-carousel ul.products.is-dragging{ cursor:grabbing; }

/* ---------- SLIDES (LI) ---------- */
.po-home-carousel ul.products > li.product,
.po-home-carousel ul.products > li.entry{
  flex:0 0 auto !important;
  max-width:none !important;
  scroll-snap-align:start !important;
  box-sizing:border-box;
}

/* widths */
@media (min-width:1025px){
  .po-home-carousel ul.products > li.product,
  .po-home-carousel ul.products > li.entry{
    width:calc((100% - (var(--po-gap) * 3))/4) !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  .po-home-carousel ul.products > li.product,
  .po-home-carousel ul.products > li.entry{
    width:calc((100% - (var(--po-gap) * 2))/3) !important;
  }
}
@media (max-width:768px){
  .po-home-carousel ul.products > li.product,
  .po-home-carousel ul.products > li.entry{
    width:78% !important; /* 1.5 hint */
  }
}

/* =========================================================
   CARD: fix half image + remove huge empty space
========================================================= */

/* Hide Kadence secondary hover image ONLY in carousel */
.po-home-carousel img.secondary-product-image,
.po-home-carousel .wp-post-image--secondary{
  display:none !important;
}

/* Image area: keep natural height (NO aspect-ratio) */
.po-home-carousel li.product .woocommerce-loop-image-link{
  display:block !important;
  width:100% !important;
  overflow:hidden !important;
}

/* Image: natural ratio (NO height:100%) */
.po-home-carousel li.product .woocommerce-loop-image-link img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover; /* safe; but height:auto is main fix */
}

/* Content: center align but DO NOT force height:100% (this caused big gaps) */
.po-home-carousel li.product .product-details,
.po-home-carousel li.product .entry-content-wrap{
  padding:12px 14px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  text-align:center !important;
}

/* Title: 2 line clean clamp */
.po-home-carousel .woocommerce-loop-product__title,
.po-home-carousel .woocommerce-loop-product__title a{
  font:inherit !important;
  text-transform:none !important;
  letter-spacing:inherit !important;

  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.35 !important;

  margin:10px 0 6px !important;
  padding:0 !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  white-space:normal !important;
}

/* Price */
.po-home-carousel .price,
.po-home-carousel .price *{
  font:inherit !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}
.po-home-carousel .price{ margin:0 0 10px !important; }

/* Button: full width + centered (no forced bottom push to avoid empty space) */
.po-home-carousel li.product .product-action-wrap{
  display:flex !important;
  justify-content:center !important;
  margin:0 !important;
}
.po-home-carousel li.product a.button{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

/* =========================================================
   DOTS (mobile only) - JS generates
========================================================= */
.po-home-carousel .po-dots{ display:none; justify-content:center; gap:8px; margin-top:10px; }
.po-home-carousel .po-dot{ display:none; width:8px; height:8px; border-radius:999px; border:0; background:rgba(0,0,0,.25); padding:0; cursor:pointer; }
.po-home-carousel .po-dot.is-active{ background:rgba(0,0,0,.75); }

@media (max-width:768px){
  .po-home-carousel .po-dots{ display:flex !important; }
  .po-home-carousel .po-dot{ display:inline-block !important; }
}
@media (min-width:769px){
  .po-home-carousel .po-dots,
  .po-home-carousel .po-dot{ display:none !important; }
}

/* =========================================================
   ARROWS (desktop only) - JS generates
========================================================= */
.po-home-carousel .po-nav{ display:none; }

@media (min-width:769px){
  .po-home-carousel .po-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:9;

    width:34px;height:34px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.16);
    background:#fff;
    color:#111;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 8px 22px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  .po-home-carousel:hover .po-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .po-home-carousel .po-prev{ left:-12px; }
  .po-home-carousel .po-next{ right:-12px; }

  .po-home-carousel .po-nav span{
    font-size:22px;
    line-height:1;
    font-weight:900;
    display:block;
    transform:translateY(-1px);
  }

  .po-home-carousel .po-nav:disabled{
    opacity:.35 !important;
    cursor:not-allowed;
  }
}
/* =========================================================
   FIX: Home carousel buttons aligned even with 2-line titles
   (covers Kadence + Woo variants)
========================================================= */

/* Make each product card a flex column */
.po-home-carousel ul.products > li.product{
  display:flex !important;
  flex-direction:column !important;
}

/* Ensure the content wrapper can stretch */
.po-home-carousel ul.products > li.product .product-details,
.po-home-carousel ul.products > li.product .entry-content-wrap{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

/* Push the action area to the bottom (multiple possible wrappers) */
.po-home-carousel ul.products > li.product .product-action-wrap,
.po-home-carousel ul.products > li.product .kt-product-action,
.po-home-carousel ul.products > li.product .kt-product-action-wrap,
.po-home-carousel ul.products > li.product .woocommerce-loop-product__link + .price,
.po-home-carousel ul.products > li.product .price{
  margin-top:auto !important;
}

/* If button is not inside an action wrapper, force it to sit after price */
.po-home-carousel ul.products > li.product a.button{
  margin-top:10px !important;
}