/* ==========================================================================
   HOC Related Products — standalone styles.
   Every selector is scoped to .hocrp or to this widget's own Elementor
   wrapper, so nothing here can reach HOC Product Grid or the theme.
   ========================================================================== */

/* The widget always takes the full row. Inside an Elementor flex container a
   widget otherwise sizes to its content, which is what squashes grids. */
.elementor-widget-hoc_related_products{ width: 100%; max-width: 100%; }

.hocrp{
  --hocrp-cols: 4;
  --hocrp-gap: 16px;
  --hocrp-accent: #3a2fd0;
  --hocrp-accent-hover: #2c23a8;
  --hocrp-accent-ink: #fff;
  --hocrp-img-bg: #f7f6f2;
  --hocrp-border: #e4e4e4;
  --hocrp-radius: 8px;
  --hocrp-btn-radius: 4px;
  --hocrp-list-img: 110px;
  width: 100%;
  min-width: 0;
}

.hocrp,
.hocrp *,
.hocrp *::before,
.hocrp *::after{ box-sizing: border-box; }

:where(.hocrp) .hocrp-heading{
  margin: 0 0 var(--hocrp-heading-gap, 16px);
  padding: 0;
  font-size: clamp(18px, 1rem + .8vw, 26px);
  line-height: 1.25;
}

/* ---------- grid ---------- */

.hocrp .hocrp-grid{
  display: grid;
  grid-template-columns: repeat(var(--hocrp-cols), minmax(0, 1fr));
  gap: var(--hocrp-gap);
  width: 100%;
}

/* ---------- card ---------- */

.hocrp .hocrp-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid var(--hocrp-border);
  border-radius: var(--hocrp-radius);
  overflow: hidden;
  padding-bottom: 14px;
}

.hocrp .hocrp-media{ position: relative; background: var(--hocrp-img-bg); }

.hocrp .hocrp-img{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--hocrp-ratio, 3 / 2);
  padding: 14px;
  overflow: hidden;
}

.hocrp .hocrp-img img{
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
}

.hocrp .hocrp-sale{
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e0201b;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  padding: 2px 7px;
  border-radius: 3px;
}

.hocrp .hocrp-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 10px 12px 0;
  min-width: 0;
}

.hocrp .hocrp-rating{ display: flex; justify-content: center; }
.hocrp .hocrp-rating .star-rating{ font-size: 12px; margin: 0; float: none; }

.hocrp .hocrp-title{ margin: 2px 0 0; padding: 0; font-size: 14px; line-height: 1.4; }
.hocrp .hocrp-title a{
  display: -webkit-box;
  -webkit-line-clamp: var(--hocrp-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hocrp .hocrp-specs{ text-align: left; font-size: 12px; line-height: 1.45; }
.hocrp .hocrp-specs ul,
.hocrp .hocrp-specs ol{ margin: 4px 0 0; padding-left: 16px; }
.hocrp .hocrp-specs li,
.hocrp .hocrp-specs p{ margin: 0 0 3px; }

.hocrp .hocrp-stock{ font-size: 12px; }
.hocrp .hocrp-stock.is-in{ color: #1d9e75; }
.hocrp .hocrp-stock.is-out{ color: #a32d2d; }

.hocrp .hocrp-foot{ margin-top: auto; padding-top: 8px; }

.hocrp .hocrp-price{ display: block; font-size: 20px; font-weight: 600; line-height: 1.3; }
.hocrp .hocrp-price .woocommerce-Price-amount,
.hocrp .hocrp-price bdi{ color: inherit; font: inherit; }

.hocrp .hocrp-was{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
  font-size: 11px;
}
.hocrp .hocrp-was s{ color: #8a8a8a; }
.hocrp .hocrp-save{ color: #d0021b; font-weight: 600; white-space: nowrap; }

.hocrp .hocrp-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.hocrp .hocrp-btn{
  flex: 1 1 110px;
  min-width: 0;
  display: block;
  height: 38px;
  line-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--hocrp-accent);
  border-radius: var(--hocrp-btn-radius);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hocrp .hocrp-btn-info{ background: transparent; color: var(--hocrp-accent); }
.hocrp .hocrp-btn-info:hover{ background: var(--hocrp-accent); color: var(--hocrp-accent-ink); }

.hocrp .hocrp-btn-cart{ background: var(--hocrp-accent); color: var(--hocrp-accent-ink); }
.hocrp .hocrp-btn-cart:hover{
  background: var(--hocrp-accent-hover);
  border-color: var(--hocrp-accent-hover);
  color: var(--hocrp-accent-ink);
}
.hocrp .hocrp-btn-cart.loading{ opacity: .6; pointer-events: none; }
.hocrp .hocrp-btn-cart.added::after{ content: none; }
.hocrp .added_to_cart{ display: none; }

/* ---------- carousel ---------- */

.hocrp .hocrp-carousel{ position: relative; }
.hocrp .hocrp-swiper{ overflow: hidden; }
.hocrp .hocrp-swiper .swiper-slide{ height: auto; }

.hocrp .hocrp-prev,
.hocrp .hocrp-next{
  color: var(--hocrp-accent);
  --swiper-navigation-size: 22px;
}

.hocrp .hocrp-dots{ position: static; margin-top: 12px; text-align: center; }
.hocrp .hocrp-dots .swiper-pagination-bullet-active{ background: var(--hocrp-accent); }

/* ---------- tablet ---------- */

@media (max-width: 1024px){
  .hocrp .hocrp-body{ padding: 10px 10px 0; }
  .hocrp .hocrp-title{ font-size: 13px; }
  .hocrp .hocrp-price{ font-size: 18px; }
  .hocrp .hocrp-btn{ font-size: 12px; padding: 0 6px; }
}

/* ---------- mobile ---------- */

@media (max-width: 767px){

  .hocrp .hocrp-price{ font-size: 17px; }
  .hocrp.hocrp-m-grid .hocrp-btn{ flex-basis: 100%; }

  .hocrp.hocrp-m-hide-specs .hocrp-specs,
  .hocrp.hocrp-m-hide-info  .hocrp-btn-info{ display: none; }

  /* List rows: image left, details right. */
  .hocrp.hocrp-m-list .hocrp-grid{ grid-template-columns: 1fr; }

  .hocrp.hocrp-m-list .hocrp-card{
    display: grid;
    grid-template-columns: var(--hocrp-list-img) minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    text-align: left;
    padding: 10px;
  }

  .hocrp.hocrp-m-list .hocrp-media{ border-radius: 6px; overflow: hidden; }
  .hocrp.hocrp-m-list .hocrp-img{ aspect-ratio: 1 / 1; padding: 6px; }
  .hocrp.hocrp-m-list .hocrp-sale{ top: 4px; left: 4px; font-size: 9px; padding: 1px 5px; }
  .hocrp.hocrp-m-list .hocrp-body{ padding: 0; }
  .hocrp.hocrp-m-list .hocrp-rating{ justify-content: flex-start; }
  .hocrp.hocrp-m-list .hocrp-was{ justify-content: flex-start; }
  .hocrp.hocrp-m-list .hocrp-btn{ height: 36px; line-height: 34px; }
}

@media (max-width: 380px){
  .hocrp{ --hocrp-list-img: 90px; }
}