/* =========================================================================
   SERAPHELLÈ — Product carousel
   Native scroll-snap, no Swiper. Loaded on both the cart and wishlist pages.
   A CDN dependency was the wrong trade for a horizontal scroller: if jsdelivr
   is blocked the slides spill across the page with no clipping, which is
   exactly the failure this replaces.
   ========================================================================= */

#srph-crosssells .srph-crosssells__carousel {
	position: relative;
	padding-inline: 4px;
}

#srph-crosssells .srph-crosssells__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 2px 6px;
	margin: 0;
	list-style: none;
}

#srph-crosssells .srph-crosssells__track::-webkit-scrollbar { display: none; }

#srph-crosssells .srph-crosssells__track > .srph-card {
	flex: 0 0 calc((100% - 100px) / 6);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1180px) {
	#srph-crosssells .srph-crosssells__track > .srph-card { flex-basis: calc((100% - 60px) / 4); }
}

@media (max-width: 860px) {
	#srph-crosssells .srph-crosssells__track > .srph-card { flex-basis: calc((100% - 40px) / 3); }
}

@media (max-width: 560px) {
	#srph-crosssells .srph-crosssells__track { gap: 14px; }
	#srph-crosssells .srph-crosssells__track > .srph-card { flex-basis: calc((100% - 14px) / 2); }
}

/* Arrows hide entirely when nothing overflows, and dim at either end. */
#srph-crosssells .srph-crosssells__nav[hidden] { display: none !important; }
#srph-crosssells .srph-crosssells__nav.is-disabled { opacity: .35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
	#srph-crosssells .srph-crosssells__track { scroll-behavior: auto; }
}

/* =========================================================================
   Cross-sell / recommendation section
   Shared by the cart and the wishlist. Previously this lived in srph-cart.css,
   which never loads on the wishlist page — so the section had no container
   width and the arrows were unstyled. It belongs here.
   ========================================================================= */

/* Reset layer: the cart stylesheet covers #srph-crosssells, the wishlist one
   doesn't, so this file has to stand on its own. */
#srph-crosssells {
	font-family: var(--srph-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--srph-ink);
	box-sizing: border-box;
}

#srph-crosssells * { box-sizing: border-box; }

#srph-crosssells h2,
#srph-crosssells h3,
#srph-crosssells p,
#srph-crosssells span {
	margin: 0;
	padding: 0;
	font-family: var(--srph-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.45;
	color: inherit;
}

#srph-crosssells button,
#srph-crosssells a.srph-btn {
	font-family: var(--srph-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	background: transparent;
	background-image: none;
	color: inherit;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

#srph-crosssells {
	max-width: 1240px;
	margin-inline: auto;
	padding: 56px 24px 0;
}

#srph-crosssells .srph-crosssells__title {
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: var(--srph-body) !important;
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-bottom: 26px;
	color: var(--srph-ink);
}

#srph-crosssells .srph-crosssells__title::before,
#srph-crosssells .srph-crosssells__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--srph-line);
}

#srph-crosssells .srph-crosssells__carousel { position: relative; padding-inline: 4px; }

#srph-crosssells .srph-card__media {
	position: relative;
	border-radius: var(--srph-radius);
	overflow: hidden;
	background: var(--srph-surface-warm);
	aspect-ratio: 1 / 1;
}

#srph-crosssells .srph-card__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

#srph-crosssells .srph-card:hover .srph-card__media img { transform: scale(1.04); }

#srph-crosssells .srph-card__media .yith-wcwl-add-to-wishlist,
#srph-crosssells .srph-card__media .tinv-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	z-index: 2;
}

#srph-crosssells .srph-card__name,
#srph-crosssells .srph-card__name a {
	font-family: var(--srph-body) !important;
	font-size: 14px !important;
	font-weight: 400;
	text-align: center;
	line-height: 1.4;
	color: var(--srph-ink) !important;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

#srph-crosssells .srph-card__name { margin: 14px 0 4px; }

#srph-crosssells .srph-card__price {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--srph-ink);
}

#srph-crosssells .srph-card__price del { color: var(--srph-ink-faint); font-weight: 400; margin-right: 6px; }

#srph-crosssells button.srph-crosssells__nav {
	position: absolute;
	top: 38%;
	z-index: 3;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	border: 1px solid var(--srph-line) !important;
	background: var(--srph-surface) !important;
	color: var(--srph-ink) !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--srph-shadow);
	transition: background .15s ease;
}

#srph-crosssells button.srph-crosssells__nav:hover { background: var(--srph-surface-warm) !important; }
#srph-crosssells .srph-crosssells__nav--prev { left: -18px; }
#srph-crosssells .srph-crosssells__nav--next { right: -18px; }
#srph-crosssells .srph-crosssells__nav.is-disabled { opacity: .35; cursor: default; }



@media (max-width: 980px) {
	#srph-crosssells .srph-crosssells__nav--prev { left: 2px; }
	#srph-crosssells .srph-crosssells__nav--next { right: 2px; }
}

@media (max-width: 640px) {
	#srph-crosssells { padding-inline: 16px; }
}

/* =========================================================================
   Third-party wishlist plugins
   This plugin provides its own wishlist. If YITH or TI is still active their
   buttons are suppressed so customers don't see two hearts on one card.
   ========================================================================= */

.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-button,
.tinvwl-loop-button-wrapper,
.tinv-wishlist.tinvwl-loop-button-wrapper,
.tinvwl_add_to_wishlist_button {
	display: none !important;
}