/* ============================================================
   Любощі — "З цим товаром також купують" (cross-sells block)
   v3: compact editorial design. Overrides the plugin's purple style.
   All rules scoped to .lyu-rec-v3 to win specificity over plugin CSS.
   ============================================================ */

.lyu-rec-v3 {
  --r-red:        #f2053c;
  --r-red-dark:   #cb003d;
  --r-grad:       linear-gradient(135deg, #f2053c 0%, #cb003d 100%);
  --r-ink:        #14171f;
  --r-ink-2:      #4a4d58;
  --r-muted:      #6b6e78;
  --r-surface:    #f4f4f8;
  --r-card:       #ffffff;
  --r-line:       #e6e8ee;
  --r-shadow-sm:  0 2px 6px rgba(20,23,31,.06);
  --r-shadow-md:  0 8px 24px rgba(20,23,31,.10);
  --r-ease:       cubic-bezier(.2,.65,.3,1);
  --r-serif:      "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", Times, serif;
  --r-sans:       "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  width: 100% !important;
  max-width: 100% !important;
  margin: 48px 0 16px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  clear: both !important;
  font-family: var(--r-sans);
}

.lyu-rec-v3 *,
.lyu-rec-v3 *::before,
.lyu-rec-v3 *::after {
  box-sizing: border-box !important;
}

.lyu-rec-v3 .lyuboshchi-recommendations__wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.lyu-rec-v3 .lyuboshchi-recommendations__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 20px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--r-line) !important;
  background: transparent !important;
}

.lyu-rec-v3 .lyuboshchi-recommendations__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--r-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  color: var(--r-ink) !important;
  text-transform: none !important;
  text-align: left !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__title em {
  font-style: italic !important;
  font-weight: 400 !important;
  background: var(--r-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Navigation arrows */
.lyu-rec-v3 .lyuboshchi-recommendations__navigation {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__nav-button {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--r-line) !important;
  background: var(--r-card) !important;
  color: var(--r-ink-2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .22s var(--r-ease), background .22s var(--r-ease), color .22s var(--r-ease) !important;
  box-shadow: none !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__nav-button:hover {
  border-color: var(--r-red) !important;
  background: var(--r-red) !important;
  color: #ffffff !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__nav-button:disabled,
.lyu-rec-v3 .lyuboshchi-recommendations__nav-button.swiper-button-disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__nav-button svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
}

/* ============================================================
   CAROUSEL + CARDS
   ============================================================ */
.lyu-rec-v3 .lyuboshchi-recommendations__carousel {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.lyu-rec-v3 .swiper {
  width: 100% !important;
  padding: 4px 0 !important;
  overflow: visible !important;
}
.lyu-rec-v3 .swiper-wrapper {
  align-items: stretch !important;
}
.lyu-rec-v3 .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.lyu-rec-v3 .lyuboshchi-recommendations__item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: var(--r-card) !important;
  border: 1px solid var(--r-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--r-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform .35s var(--r-ease), box-shadow .35s var(--r-ease), border-color .35s var(--r-ease) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__item:hover {
  transform: translateY(-3px) !important;
  border-color: transparent !important;
  box-shadow: var(--r-shadow-md) !important;
}

.lyu-rec-v3 .lyuboshchi-recommendations__link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0 !important;
  flex: 1 !important;
}

/* Image — tighter than the old big version */
.lyu-rec-v3 .lyuboshchi-recommendations__image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: var(--r-surface) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .45s var(--r-ease) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__item:hover .lyuboshchi-recommendations__image img {
  transform: scale(1.05) !important;
}

/* Content (title + price) */
.lyu-rec-v3 .lyuboshchi-recommendations__content {
  padding: 12px 14px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__product-title {
  margin: 0 !important;
  font-family: var(--r-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em !important;
  color: var(--r-ink) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__price {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--r-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--r-red) !important;
  line-height: 1.3 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__price del {
  color: var(--r-muted) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  margin-right: 6px !important;
  text-decoration: line-through !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__price ins {
  text-decoration: none !important;
  background: transparent !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__price .amount,
.lyu-rec-v3 .lyuboshchi-recommendations__price bdi {
  font: inherit !important;
  color: inherit !important;
}

/* Add to cart button — compact, full-width at bottom of card */
.lyu-rec-v3 .lyuboshchi-recommendations__add-to-cart {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin: 10px 0 0 !important;
  background: var(--r-ink) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--r-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .22s var(--r-ease), color .22s var(--r-ease) !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__add-to-cart:hover {
  background: var(--r-grad) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.lyu-rec-v3 .lyuboshchi-recommendations__add-to-cart.added,
.lyu-rec-v3 .lyuboshchi-recommendations__add-to-cart.adding {
  background: var(--r-red) !important;
  opacity: .85 !important;
}

/* ============================================================
   RESPONSIVE — wider cards on small screens (Swiper handles slidesPerView,
   we just style the slide width via Swiper config + these fallbacks)
   ============================================================ */

/* Swiper's slidesPerView controls how many cards fit. The plugin's JS sets
   this. If Swiper isn't running for some reason, fall back to grid. */
.lyu-rec-v3 .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  transform: none !important;
}
.lyu-rec-v3 .swiper:not(.swiper-initialized) .swiper-slide {
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 1080px) {
  .lyu-rec-v3 {
    margin-top: 40px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__title {
    font-size: 22px !important;
  }
  .lyu-rec-v3 .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .lyu-rec-v3 {
    margin: 32px 0 16px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__header {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__title {
    font-size: 20px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__nav-button {
    width: 32px !important;
    height: 32px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__content {
    padding: 10px 12px 4px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__product-title {
    font-size: 12px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__price {
    font-size: 13px !important;
  }
  .lyu-rec-v3 .lyuboshchi-recommendations__add-to-cart {
    padding: 9px 12px !important;
    font-size: 10px !important;
  }
  .lyu-rec-v3 .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ============================================================
   "СХОЖІ ТОВАРИ" — WC native related products on single product
   Quieter visual treatment so it doesn't compete with the v3 block above.
   No carousel (JS skips it on single-product), no add-to-cart, just a
   clean grid for "browse alternatives" + SEO internal linking.
   ============================================================ */

body.single-product .related.products {
  width: 100% !important;
  max-width: 100% !important;
  margin: 56px 0 16px !important;
  padding: 32px 0 0 !important;
  border-top: 1px solid #e6e8ee !important;
  background: transparent !important;
  clear: both !important;
  font-family: "Open Sans", system-ui, -apple-system, sans-serif !important;
}

body.single-product .related.products > h2 {
  font-family: "Iowan Old Style", "Apple Garamond", Baskerville, Times, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: #6b6e78 !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

body.single-product .related.products ul.products,
body.single-product .related.products ul.products::before {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
body.single-product .related.products ul.products::before {
  display: none !important;
}
body.single-product .related.products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
  border: none !important;
  list-style: none !important;
}
body.single-product .related.products ul.products li.product::before {
  display: none !important;
}

/* Card link wrapper */
body.single-product .related.products ul.products li.product a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  background: #ffffff !important;
  border: 1px solid #f0f1f4 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color .22s cubic-bezier(.2,.65,.3,1), transform .22s cubic-bezier(.2,.65,.3,1) !important;
}
body.single-product .related.products ul.products li.product a:hover {
  border-color: #f2053c !important;
  transform: translateY(-2px) !important;
}

/* Image */
body.single-product .related.products ul.products li.product a img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f4f4f8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Title — much smaller than v3 block */
body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .related.products ul.products li.product h2.woocommerce-loop-product__title {
  font-family: "Open Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #14171f !important;
  padding: 10px 10px 4px !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  background: transparent !important;
}

/* Price */
body.single-product .related.products ul.products li.product .price {
  font-family: "Open Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #14171f !important;
  padding: 0 10px 10px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
body.single-product .related.products ul.products li.product .price del {
  font-size: 10px !important;
  color: #8c8f9a !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}
body.single-product .related.products ul.products li.product .price ins {
  text-decoration: none !important;
  background: transparent !important;
  color: #f2053c !important;
}

/* Hide the "Add to cart" button + rating + star — keep block clean */
body.single-product .related.products ul.products li.product .button,
body.single-product .related.products ul.products li.product .added_to_cart,
body.single-product .related.products ul.products li.product .star-rating,
body.single-product .related.products ul.products li.product .product_meta,
body.single-product .related.products ul.products li.product .onsale {
  display: none !important;
}

/* Hide any leftover Swiper navigation just in case */
body.single-product .wsps-rel-prev,
body.single-product .wsps-rel-next {
  display: none !important;
}

/* Responsive: collapse the grid */
@media (max-width: 1080px) {
  body.single-product .related.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body.single-product .related.products {
    margin-top: 40px !important;
    padding-top: 24px !important;
  }
  body.single-product .related.products > h2 {
    font-size: 17px !important;
    margin-bottom: 16px !important;
  }
  body.single-product .related.products ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 480px) {
  body.single-product .related.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}