/*!
 * YB Related Products — frontend styles
 * Mobile-first. Theme-isolated. Modern & silky smooth.
 */

/* ------------------------------------------------------------------ */
/* ROOT — tokens + theme isolation                                     */
/* ------------------------------------------------------------------ */
.yb-rp-root {
	/* colour + surface tokens */
	--yb-rp-accent: #0f172a;
	--yb-rp-bg: #ffffff;
	--yb-rp-surface: #ffffff;
	--yb-rp-text: #0f172a;
	--yb-rp-text-muted: #64748b;
	--yb-rp-text-soft: #94a3b8;
	--yb-rp-border: rgba(15, 23, 42, 0.08);
	--yb-rp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
	--yb-rp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.08);
	--yb-rp-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.15);
	--yb-rp-sale-bg: #ef4444;
	--yb-rp-sale-text: #ffffff;

	/* geometry */
	--yb-rp-card-radius: 14px;
	--yb-rp-btn-size: 44px;
	--yb-rp-gap: 14px;
	--yb-rp-gap-lg: 20px;

	/* motion */
	--yb-rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--yb-rp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--yb-rp-dur-fast: 180ms;
	--yb-rp-dur-med: 340ms;
	--yb-rp-dur-slow: 520ms;

	/* typography */
	--yb-rp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

	display: block;
	width: 100%;
	margin: 3rem 0;
	box-sizing: border-box;
	color: var(--yb-rp-text);
	font-family: var(--yb-rp-font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	contain: layout style paint;
}

/* isolate from themes — reset inherited quirks inside */
.yb-rp-root *,
.yb-rp-root *::before,
.yb-rp-root *::after {
	box-sizing: border-box;
}

.yb-rp-root a {
	text-decoration: none !important;
	color: inherit;
	background: none;
	box-shadow: none;
}

.yb-rp-root ul,
.yb-rp-root ol,
.yb-rp-root li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.yb-rp-root img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: middle;
}

.yb-rp-root h2,
.yb-rp-root h3 {
	margin: 0;
	padding: 0;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: inherit;
}

.yb-rp-root button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* ------------------------------------------------------------------ */
/* THEMES                                                              */
/* ------------------------------------------------------------------ */
.yb-rp-theme-dark {
	--yb-rp-bg: #0b0f17;
	--yb-rp-surface: #111827;
	--yb-rp-text: #f8fafc;
	--yb-rp-text-muted: #94a3b8;
	--yb-rp-text-soft: #64748b;
	--yb-rp-border: rgba(255, 255, 255, 0.08);
	--yb-rp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--yb-rp-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
	--yb-rp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
	.yb-rp-theme-auto {
		--yb-rp-bg: #0b0f17;
		--yb-rp-surface: #111827;
		--yb-rp-text: #f8fafc;
		--yb-rp-text-muted: #94a3b8;
		--yb-rp-text-soft: #64748b;
		--yb-rp-border: rgba(255, 255, 255, 0.08);
		--yb-rp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--yb-rp-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
		--yb-rp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
	}
}

/* ------------------------------------------------------------------ */
/* WRAP + HEADER                                                       */
/* ------------------------------------------------------------------ */
.yb-rp-root .yb-rp-wrap {
	position: relative;
	width: 100%;
}

.yb-rp-root .yb-rp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px 0;
}

.yb-rp-root .yb-rp-title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	color: var(--yb-rp-text);
}

.yb-rp-root .yb-rp-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* nav buttons — also used inside slider positioned absolute at desktop */
.yb-rp-root .yb-rp-btn {
	width: var(--yb-rp-btn-size);
	height: var(--yb-rp-btn-size);
	border-radius: 999px;
	background: var(--yb-rp-surface);
	color: var(--yb-rp-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--yb-rp-shadow-md);
	transition:
		transform var(--yb-rp-dur-fast) var(--yb-rp-ease),
		box-shadow var(--yb-rp-dur-fast) var(--yb-rp-ease),
		background-color var(--yb-rp-dur-fast) var(--yb-rp-ease),
		color var(--yb-rp-dur-fast) var(--yb-rp-ease),
		opacity var(--yb-rp-dur-fast) var(--yb-rp-ease);
	will-change: transform, box-shadow;
	-webkit-tap-highlight-color: transparent;
}

.yb-rp-root .yb-rp-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.yb-rp-root .yb-rp-btn:hover {
	transform: translateY(-1px) scale(1.05);
	background: var(--yb-rp-accent);
	color: #fff;
	box-shadow: var(--yb-rp-shadow-lg);
}

.yb-rp-root .yb-rp-btn:active {
	transform: translateY(0) scale(0.96);
}

.yb-rp-root .yb-rp-btn.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
	transform: none;
}

/* ------------------------------------------------------------------ */
/* SWIPER                                                              */
/* ------------------------------------------------------------------ */
.yb-rp-root .yb-rp-swiper {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	/* negative margin trick so the outer glow of card shadows isn't clipped */
	margin: 0 -6px;
	padding: 6px 6px 8px;
}

.yb-rp-root .yb-rp-swiper .swiper-wrapper {
	/* ensure Swiper transform stays GPU-accelerated */
	will-change: transform;
}

.yb-rp-root .yb-rp-slide {
	height: auto;
	display: flex;
}

/* ------------------------------------------------------------------ */
/* CARD                                                                */
/* ------------------------------------------------------------------ */
.yb-rp-root .yb-rp-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--yb-rp-surface);
	border: 1px solid var(--yb-rp-border);
	border-radius: var(--yb-rp-card-radius);
	overflow: hidden;
	box-shadow: var(--yb-rp-shadow-sm);
	color: var(--yb-rp-text) !important;
	transform: translate3d(0, 0, 0);
	transition:
		transform var(--yb-rp-dur-med) var(--yb-rp-ease-out),
		box-shadow var(--yb-rp-dur-med) var(--yb-rp-ease-out),
		border-color var(--yb-rp-dur-med) var(--yb-rp-ease-out);
	will-change: transform, box-shadow;
	-webkit-tap-highlight-color: transparent;
}

.yb-rp-root .yb-rp-card:hover {
	transform: translate3d(0, -4px, 0);
	box-shadow: var(--yb-rp-shadow-md);
	border-color: color-mix(in oklab, var(--yb-rp-accent) 14%, transparent);
}

.yb-rp-root .yb-rp-card:focus-visible {
	outline: 2px solid var(--yb-rp-accent);
	outline-offset: 3px;
}

/* Media (image) */
.yb-rp-root .yb-rp-media {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.06));
	overflow: hidden;
}

.yb-rp-root .yb-rp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform var(--yb-rp-dur-slow) var(--yb-rp-ease-out),
		opacity var(--yb-rp-dur-med) var(--yb-rp-ease-out);
	backface-visibility: hidden;
}

.yb-rp-root .yb-rp-img-main {
	z-index: 1;
	opacity: 1;
}

.yb-rp-root .yb-rp-img-hover {
	z-index: 2;
	opacity: 0;
}

.yb-rp-root .yb-rp-card:hover .yb-rp-img-main {
	transform: scale(1.06);
}

.yb-rp-root .yb-rp-card:hover .yb-rp-img-hover {
	opacity: 1;
	transform: scale(1.06);
}

/* Sale badge */
.yb-rp-root .yb-rp-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: var(--yb-rp-sale-bg);
	color: var(--yb-rp-sale-text);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

/* Info block */
.yb-rp-root .yb-rp-info {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

.yb-rp-root .yb-rp-cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yb-rp-text-soft);
	line-height: 1;
}

.yb-rp-root .yb-rp-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--yb-rp-text);
	margin: 0;
	/* clamp to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 2.7em;
}

.yb-rp-root .yb-rp-price {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--yb-rp-text);
	line-height: 1.2;
}

.yb-rp-root .yb-rp-price del {
	color: var(--yb-rp-text-soft);
	font-weight: 500;
	text-decoration: line-through;
	margin-right: 6px;
}

.yb-rp-root .yb-rp-price ins {
	background: none;
	text-decoration: none;
	color: var(--yb-rp-accent);
}

.yb-rp-root .yb-rp-price .woocommerce-Price-amount {
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* PAGINATION                                                          */
/* ------------------------------------------------------------------ */
.yb-rp-root .yb-rp-pagination {
	position: static !important;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	padding: 0;
}

.yb-rp-root .yb-rp-pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	background: var(--yb-rp-text-soft);
	opacity: 0.4;
	border-radius: 999px;
	transition:
		width var(--yb-rp-dur-med) var(--yb-rp-ease),
		opacity var(--yb-rp-dur-med) var(--yb-rp-ease),
		background-color var(--yb-rp-dur-med) var(--yb-rp-ease);
	margin: 0 !important;
}

.yb-rp-root .yb-rp-pagination .swiper-pagination-bullet-active {
	width: 22px;
	opacity: 1;
	background: var(--yb-rp-accent);
}

/* ------------------------------------------------------------------ */
/* PROGRESSIVE LOADING — fade cards in on init                         */
/* ------------------------------------------------------------------ */
.yb-rp-root:not(.is-ready) .yb-rp-slide {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}

.yb-rp-root.is-ready .yb-rp-slide {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--yb-rp-dur-slow) var(--yb-rp-ease-out),
		transform var(--yb-rp-dur-slow) var(--yb-rp-ease-out);
}

/* cascading reveal */
.yb-rp-root.is-ready .yb-rp-slide:nth-child(1) { transition-delay: 0ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(2) { transition-delay: 60ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(3) { transition-delay: 120ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(4) { transition-delay: 180ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(5) { transition-delay: 240ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(6) { transition-delay: 300ms; }
.yb-rp-root.is-ready .yb-rp-slide:nth-child(n+7) { transition-delay: 360ms; }

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */

/* mobile default (≤ 640) inherits everything above. */

@media (min-width: 640px) {
	.yb-rp-root {
		margin: 3.5rem 0;
	}
	.yb-rp-root .yb-rp-info {
		padding: 16px 16px 18px;
	}
	.yb-rp-root .yb-rp-name {
		font-size: 15px;
	}
	.yb-rp-root .yb-rp-price {
		font-size: 16px;
	}
}

@media (min-width: 1024px) {
	.yb-rp-root {
		margin: 4rem 0;
		--yb-rp-btn-size: 48px;
	}
	.yb-rp-root .yb-rp-head {
		margin-bottom: 22px;
	}
}

/* ------------------------------------------------------------------ */
/* REDUCED MOTION                                                      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.yb-rp-root,
	.yb-rp-root * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.yb-rp-root .yb-rp-card:hover {
		transform: none;
	}
	.yb-rp-root .yb-rp-card:hover .yb-rp-img-main,
	.yb-rp-root .yb-rp-card:hover .yb-rp-img-hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* PRINT                                                               */
/* ------------------------------------------------------------------ */
@media print {
	.yb-rp-root { display: none; }
}