/* WEDO Related Products — scroll-snap carousel, fully relative sizing. */

.elementor-widget-wedo-related-products {
	width: 100%;
	max-width: 100%;
}

.wedo-rp {
	width: 100%;
}

.wedo-rp__separator {
	width: 100%;
	height: 1px;
}

.wedo-rp__separator--top {
	margin-bottom: 30px;
}

.wedo-rp__separator--bottom {
	margin-top: 50px;
}

.wedo-rp__heading {
	margin: 0 0 46px;
}

/* Stage: viewport + arrows in the side gutters */
.wedo-rp__stage {
	position: relative;
}

.wedo-rp__viewport {
	padding: 0 var(--wedo-rp-inset, 62px);
}

.wedo-rp__track {
	display: flex;
	gap: var(--wedo-rp-gap, 30px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain; /* edge of carousel never drags the page */
	-webkit-overflow-scrolling: touch;
}

.wedo-rp__track::-webkit-scrollbar {
	display: none;
}

.wedo-rp__track.is-draggable {
	cursor: grab;
}

.wedo-rp__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none; /* stop the browser fighting the drag */
	user-select: none;
}

/* Card width: fully relative — (100% − gaps) / slides-per-view */
.wedo-rp__card {
	flex: 0 0 calc( ( 100% - ( var(--wedo-rp-spv, 4) - 1 ) * var(--wedo-rp-gap, 30px) ) / var(--wedo-rp-spv, 4) );
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.wedo-rp__media {
	display: block;
	position: relative;
	/* Figma nodes 850:1671/850:1665: the image box is 92% of the FULL card on
	   both breakpoints (316.8/344 desktop, 196/213 mobile) — wider than the
	   padded content box, poking symmetrically into the card padding. So the
	   width is computed against the card itself: content box (100%) + the
	   padding vars the card Padding control emits. --wedo-rp-img-w is a bare
	   number (percent), set by the Image Width control. */
	width: calc( ( 100% + var(--wedo-rp-card-pl, 32px) + var(--wedo-rp-card-pr, 32px) ) * var(--wedo-rp-img-w, 92) / 100 );
	/* align-self, not margin:0 auto — auto margins can't center a child that
	   is wider than the content box (negative free space zeroes them out). */
	align-self: center;
	margin: 0;
	aspect-ratio: var(--wedo-rp-img-ratio, 316 / 197);
	overflow: hidden; /* the Image Zoom control scales the img inside */
}

/* Absolutely positioned so the image can never stretch the aspect-ratio box
   (height:100% on in-flow content makes the ratio circular and collapse).
   height needs !important: WordPress core ships
   `img:is([sizes="auto" i],[width][height]){height:auto}` at (0,1,1)
   specificity, which silently beat our (0,1,0) height:100% — the image
   rendered at its natural ratio and its bottom overhung the card title by
   ~25px on every product (user-reported "title overlaps the image"). */
.wedo-rp__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover; /* Figma 850:1671: the packshot fills the tile */
	display: block;
	transform: scale(var(--wedo-rp-img-zoom, 1));
	transform-origin: center;
	/* normal, not multiply: the new-gen transparent renders keep true whites
	   (Figma card 1). The Image Blend control still offers multiply for old
	   white-bg packshots. */
	mix-blend-mode: normal;
}

/* Smart image fit: render() tags tiles whose opaque content a cover-crop
   would cut — they contain instead. Only consumed while the Image Fit
   control emits object-fit: var(--wedo-rp-fit-auto, cover) (Smart mode);
   explicit cover/contain/fill choices ignore it. */
.wedo-rp__media--contain {
	--wedo-rp-fit-auto: contain;
}

.wedo-rp__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 1 auto;
}

.wedo-rp__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--wedo-rp-title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}

.wedo-rp__title:hover {
	text-decoration: none;
}

.wedo-rp__rating {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	line-height: 1;
	/* stars + "4,9 от 9 отзива" always on ONE row (user request) — the
	   count span used to word-wrap on narrow cards. */
	white-space: nowrap;
}

.wedo-rp__stars {
	/* 16, not Figma's ~21 asset (691:1190): at 21px the nowrap rating row
	   overflowed the card and the text no longer fit — user rejected R17's
	   bump, keep the original scale. */
	letter-spacing: 2px;
	font-size: 16px;
}

.wedo-rp__rating-text {
	font-size: 14px; /* kept (user choice) — Figma 691:1196 says 16 */
}

/* Figma shows a SINGLE line between features and this section (Line 30) at
   every breakpoint — the feature widget's divider. Our top separator would
   double it; the bottom one (= the reviews divider, Line 31) stays. */
.wedo-rp__separator--top {
	display: none;
}

.wedo-rp__star-empty {
	opacity: 0.25;
}

.wedo-rp__desc {
	display: -webkit-box;
	-webkit-line-clamp: var(--wedo-rp-desc-lines, 4);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wedo-rp__price {
	display: block;
	margin-top: auto; /* pins price+button to the card bottom for equal-height cards */
	padding-top: 10px;
}

.wedo-rp__price .amount-bgn {
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.8;
}

.wedo-rp__btn,
.wedo-rp__btn:hover,
.wedo-rp__btn:focus {
	text-decoration: none;
	border: 0;
}

.wedo-rp__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}

/*
 * BG's "ВИЖ ПРОДУКТА" fits this fixed-width (100% of card) button on one
 * line at the Figma-spec 16px. Every translation is longer and wraps to two
 * lines, ~1.6x the intended button height, inside the equal-height card
 * grid. Scoped to non-BG so BG stays pixel-exact to Figma; not per-language
 * so any language added later (this button's translation already flows
 * through the same html[lang]-scoped i18n pattern used elsewhere) is
 * covered automatically instead of needing its own rule.
 */
html:not([lang|="bg"]) .wedo-rp__btn {
	font-size: 14px !important;
}

/* Arrows: circles in the side gutters, vertically centered on the cards.
   Real <button>s — pinned against the theme's red button reset. */
.wedo-rp__arrow,
.wedo-rp__arrow:hover,
.wedo-rp__arrow:focus {
	border: 0;
	text-decoration: none;
}

.wedo-rp__arrow {
	display: var(--wedo-rp-arrows, flex);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--wedo-rp-arrow-size, 32px);
	height: var(--wedo-rp-arrow-size, 32px);
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 2;
	/* No shadow: Figma's nav circles are flat pale Panache (Group 113 / 76/77). */
	transition: opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-rp__arrow--prev {
	left: 0;
}

.wedo-rp__arrow--next {
	right: 0;
}

.wedo-rp__arrow svg {
	width: 55%;
	height: 55%;
}

.wedo-rp__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * ≤768 (mobile + tablet portrait), per Figma 698:1502 Group 113: the two
 * arrows sit small (23px) at the TOP-RIGHT beside the "ДОПЪЛВАЩА ГРИЖА"
 * heading, not vertically centered in side gutters (at ≤768 the widget is
 * full-bleed — gutter arrows hugged the screen edges). The stage drops
 * its positioning context so the arrows anchor to the widget root.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.wedo-rp {
		position: relative;
		/* 23px arrow size comes from the arrow_size control's mobile/tablet
		   defaults (a stylesheet var here loses to the control's wrapper
		   specificity). */
	}

	/* The "front" card stays centered in the viewport (peek both sides);
	   the JS aligns the initial loop position to the same snap point. */
	.wedo-rp__card {
		scroll-snap-align: center;
	}

	.wedo-rp__stage {
		position: static;
	}

	.wedo-rp__arrow {
		top: 4px; /* centered on the heading line */
		transform: none;
	}

	/* Heading + arrows on the 40-grid (Figma Group 113 ends at x=360),
	   cards keep the 20px inset. Arrow gap 19 per the group. */
	.wedo-rp__arrow--next {
		right: 40px;
		left: auto;
	}

	.wedo-rp__arrow--prev {
		right: 82px; /* 40 + 23 + 19 gap */
		left: auto;
	}

	/* The arrows are absolutely positioned OVER the widget root while the
	   heading is a full-width block underneath them, so a heading long
	   enough to reach x=285 runs straight under the prev arrow. Bulgarian
	   ("ДОПЪЛВАЩА ГРИЖА") clears it; Romanian ("ÎNGRIJIRE COMPLEMENTARĂ")
	   did not — it overlapped by 57px at 390.
	   Reserve the arrow column so no heading in any language can ever get
	   under it: the cluster spans 40..105px from the right edge (next at
	   right:40, prev at right:82, both 23 wide), +8 breathing room.
	   related-products.js re-measures this from the arrows' real geometry
	   and then scales the heading down to keep it on one line — this static
	   value is the no-JS floor, where a long heading wraps instead.
	   !important: the heading_inset control writes padding-left AND
	   padding-right on this same selector from the widget wrapper. */
	.wedo-rp__heading {
		padding-right: 113px !important;
	}

}

/* Card stars/rating text (no size controls — stylesheet values):
   Figma 698:1639 stars ~13px, 698:1645 rating text 10px. */
@media (max-width: 480px) {
	.wedo-rp__stars {
		font-size: 13px;
	}

	.wedo-rp__rating-text {
		font-size: 10px;
	}
}