/*
 * Single product page.
 *
 * Everything is scoped to the .dsp-single-product body class added in
 * product-page.php, because the shop grid uses the same .product and .ds-card
 * class names. Colours and sizes are taken from the site tokens in site.css.
 */

/* ---------------------------------------------------------------- *
 * Layout
 * ---------------------------------------------------------------- */

/*
 * Kadence wraps the whole single product body in .entry-content-wrap with
 * display:flex / flex-wrap:nowrap, so the gallery, summary, tabs and any
 * injected section all become flex children of one row. We switch that wrap
 * to wrap, pin the gallery and summary as the only side-by-side pair, and give
 * the full-width blocks their own row.
 */
.dsp-single-product .entry-content-wrap {
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: 0;
}

.dsp-single-product .woocommerce-product-gallery {
	flex: 0 0 calc(50% - 22px);
	max-width: calc(50% - 22px);
	width: auto;
}

.dsp-single-product .summary,
.dsp-single-product .entry-summary {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * Kadence forces .entry-content-wrap to display:block, so the sections are
 * normal block level boxes rather than flex items. Gallery and summary stay a
 * side-by-side pair via float-free inline-block, and the rest are full width.
 */
.dsp-single-product .woocommerce-product-gallery,
.dsp-single-product .summary {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 22px);
}

.dsp-single-product .woocommerce-tabs,
.dsp-single-product .dsp-rel {
	display: block;
	width: 100%;
	clear: both;
}

/* The services bar is already a grid; it only needs the full width box. */
.dsp-single-product .dsp-pp-services {
	width: 100%;
	clear: both;
}

@media (max-width: 981px) {
	.dsp-single-product .woocommerce-product-gallery {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
/* ---------------------------------------------------------------- *
 * Breadcrumb, category
 * ---------------------------------------------------------------- */

.dsp-pp-category {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ds-ink-muted);
}

.dsp-pp-category a {
	color: inherit;
	text-decoration: none;
}

.dsp-pp-category a:hover {
	color: var(--ds-accent);
}

.dsp-pp-category .dsp-sep {
	color: #c9ced8;
}

/* ---------------------------------------------------------------- *
 * Title, rating, price
 * ---------------------------------------------------------------- */

.dsp-single-product .summary > .product_title {
	margin: 0 0 8px;
	font-size: 27px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ds-ink);
}

.dsp-single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
}

.dsp-single-product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--ds-ink-muted);
	font-size: 13px;
	text-decoration: none;
}

.dsp-single-product .summary > .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--ds-ink);
}

.dsp-single-product .summary > .price > .amount {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.dsp-single-product .summary > .price del .amount {
	font-size: 17px;
	font-weight: 500;
	color: #9aa1af;
}

.dsp-single-product .summary > .price ins .amount {
	text-decoration: none;
	color: var(--ds-accent);
}

.dsp-single-product .summary > .price .onsale,
.dsp-single-product .woocommerce-product-gallery .onsale {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: #fff2ec;
	color: #d1491b;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dsp-single-product .summary .woocommerce-product-details__short-description {
	margin: 0 0 20px;
	color: var(--ds-ink-muted);
	font-size: 14.5px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- *
 * Stock
 * ---------------------------------------------------------------- */

.dsp-single-product .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.dsp-single-product .stock.instock {
	background: #e9f7ef;
	color: #177245;
}

.dsp-single-product .stock.outofstock {
	background: #fdeceb;
	color: #b3261e;
}

/* ---------------------------------------------------------------- *
 * Swatches
 * ---------------------------------------------------------------- */

.dsp-swatches {
	margin: 0 0 18px;
}

.dsp-sw-row + .dsp-sw-row {
	margin-top: 14px;
}

.dsp-sw-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-ink-muted);
}

.dsp-sw-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.dsp-swatch {
	appearance: none;
	margin: 0;
	cursor: pointer;
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dsp-swatch--pill {
	padding: 8px 17px;
	border: 1px solid var(--ds-border);
	border-radius: 999px;
	background: var(--ds-surface);
	color: var(--ds-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.dsp-swatch--pill:hover {
	border-color: #c3cad6;
}

.dsp-swatch--color {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ds-border);
	background: var(--dsp-swatch, #ccc);
	box-shadow: inset 0 0 0 2px #fff;
}

.dsp-swatch.is-active {
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.16);
}

.dsp-swatch--color.is-active {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(24, 119, 242, 0.16);
}

.dsp-sw-clear {
	margin-top: 12px;
	font-size: 13px;
	color: var(--ds-ink-muted);
}

/* The native selects stay in the DOM for WooCommerce's own variation script,
   but our swatches are the visible control. */
.dsp-single-product .variations {
	display: none;
}

.dsp-single-product .variations.cart,
.dsp-single-product .variations + .woocommerce-variation {
	display: block;
}

/* ---------------------------------------------------------------- *
 * Quantity and purchase
 *
 * The two purchase buttons reuse the homepage product card button
 * language from home.css, so they read as the same control everywhere:
 * 9px radius, 1.5px border, 700 weight, blue for Add to Cart and deep
 * navy for Buy Now. Kadence and WooCommerce both ship their own
 * .button rules, hence the deliberately high specificity below.
 * ---------------------------------------------------------------- */

.dsp-single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 6px;
}

.dsp-single-product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	background: var(--ds-surface);
	overflow: hidden;
	flex: 0 0 auto;
	height: 46px;
}

.dsp-single-product .quantity .qty {
	flex: 0 0 42px;
	width: 42px;
	max-width: 42px;
	height: 44px;
	min-height: 0;
	box-sizing: border-box;
	line-height: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ds-ink);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.dsp-single-product .quantity .qty::-webkit-outer-spin-button,
.dsp-single-product .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dsp-qty-btn {
	flex: 0 0 38px;
	width: 38px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ds-ink);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.dsp-qty-btn:hover {
	background: #f2f4f8;
	color: var(--ds-accent);
}

/* Shared button frame. */
.dsp-single-product form.cart button[type="submit"],
.dsp-single-product form.cart .single_add_to_cart_button,
.dsp-single-product .single_add_to_cart_button.button,
.dsp-single-product .single_add_to_cart_button.button.alt,
.dsp-single-product form.cart .dsp-buy-now,
.dsp-single-product .dsp-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	/* flex:1 1 0 makes both buttons share the row evenly instead of one
	   stretching to full width while the other collapses. */
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: 46px;
	min-height: 46px;
	padding: 0 16px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Add to Cart, same blue as the homepage card. */
.dsp-single-product form.cart button[type="submit"],
.dsp-single-product form.cart .single_add_to_cart_button,
.dsp-single-product .single_add_to_cart_button.button,
.dsp-single-product .single_add_to_cart_button.button.alt {
	background: #1E7BF0;
	border-color: #1E7BF0;
	color: #fff;
}

.dsp-single-product form.cart button[type="submit"]:hover,
.dsp-single-product form.cart .single_add_to_cart_button:hover,
.dsp-single-product .single_add_to_cart_button.button.alt:hover {
	background: #0F66D6;
	border-color: #0F66D6;
	color: #fff;
}

/* Buy Now, same deep navy as the homepage card. */
.dsp-single-product form.cart .dsp-buy-now,
.dsp-single-product .dsp-buy-now {
	background: #0B1E45;
	border-color: #0B1E45;
	color: #fff;
}

.dsp-single-product form.cart .dsp-buy-now:hover,
.dsp-single-product .dsp-buy-now:hover {
	background: #123B7C;
	border-color: #123B7C;
	color: #fff;
}

/*
 * Kadence restyles input[type=number] with its own padding, border and height,
 * and those selectors outrank the rule above. That left the number input 2px
 * taller than the stepper box around it. Scoped !important is the only reliable
 * way to win here.
 */
.dsp-single-product .quantity input.qty,
.dsp-single-product .quantity input.qty.text {
	flex: 0 0 42px;
	width: 42px;
	max-width: 42px;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-sizing: border-box;
	background: transparent;
	color: var(--ds-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
}
/*
 * Layout of the purchase row: the stepper and Add to Cart sit together, and
 * Buy Now spans the full width underneath. Splitting the Buy Now onto its own
 * row is what stops the longer label winning the free space and squeezing
 * Add to Cart to about 84px on tablet.
 */
.dsp-single-product form.cart .dsp-buy-now,
.dsp-single-product .dsp-buy-now {
	flex: 1 0 100%;
}
.dsp-single-product .dsp-buy-now .dsp-ico {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.dsp-single-product button[type="submit"].disabled,
.dsp-single-product button[type="submit"]:disabled,
.dsp-single-product .single_add_to_cart_button.disabled,
.dsp-single-product .single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.dsp-buy-now.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.dsp-single-product .ds-buy-now {
	display: none;
}

.dsp-delivery-note {
	flex: 1 0 100%;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ds-ink-muted);
}

.dsp-single-product .ds-delivery-note {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--ds-ink-muted);
}

/*
 * Below the phone breakpoint the row is too narrow for three controls, so the
 * stepper takes its own line and both buttons go full width. This is what the
 * flex:1 1 0 above is protecting against: with a basis in pixels the wider
 * label would win all the space and the other button would squash.
 */
@media (max-width: 560px) {
	.dsp-single-product form.cart {
		gap: 10px;
	}

	.dsp-single-product form.cart .quantity {
		flex: 1 0 100%;
		height: 48px;
		justify-content: center;
	}

	.dsp-single-product form.cart .quantity .qty,
	.dsp-single-product form.cart .quantity input.qty,
	.dsp-single-product form.cart .quantity input.qty.text {
		flex: 0 0 56px;
		width: 56px;
		max-width: 56px;
		height: 46px !important;
	}

	.dsp-single-product form.cart button[type="submit"],
	.dsp-single-product form.cart .single_add_to_cart_button,
	.dsp-single-product .single_add_to_cart_button.button,
	.dsp-single-product .single_add_to_cart_button.button.alt,
	.dsp-single-product form.cart .dsp-buy-now,
	.dsp-single-product .dsp-buy-now {
		flex: 1 0 100%;
		height: 48px;
		min-height: 48px;
		padding: 0 16px;
		font-size: 15px;
	}
}
/* ---------------------------------------------------------------- *
 * Secondary actions
 * ---------------------------------------------------------------- */

.dsp-pp-secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ds-border);
}

.dsp-pp-act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--ds-border);
	border-radius: 999px;
	background: var(--ds-surface);
	color: var(--ds-ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dsp-pp-act:hover {
	border-color: #c3cad6;
	color: var(--ds-accent);
}

.dsp-pp-act .dsp-ico {
	flex: 0 0 auto;
}

.dsp-pp-secondary a.dsp-pp-act-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ds-ink);
	text-decoration: none;
}

.dsp-pp-secondary .dsp-pp-act a {
	color: inherit;
	text-decoration: none;
}

.dsp-pp-secondary img,
.dsp-pp-secondary svg {
	width: 18px;
	height: 18px;
}

/* YITH and compare plugins ship their own wrappers; flatten them. */
.dsp-pp-secondary .yith_wcwl_add_to_wishlist,
.dsp-pp-secondary .yith_wcwl_icon,
.dsp-pp-secondary .yitcmp_ajax_add_to_compare,
.dsp-pp-secondary .yitcmp_button {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/* ---------------------------------------------------------------- *
 * Services bar
 * ---------------------------------------------------------------- */

.dsp-pp-services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 28px 0 0;
	padding: 0;
	background: var(--ds-border);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	overflow: hidden;
}

.dsp-pp-service {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px 20px;
	background: var(--ds-surface);
}

.dsp-pp-service-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(24, 119, 242, 0.09);
	color: var(--ds-accent);
}

.dsp-pp-service-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dsp-pp-service-txt strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--ds-ink);
}

.dsp-pp-service-txt em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--ds-ink-muted);
}

@media (max-width: 981px) {
	.dsp-pp-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.dsp-pp-services {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------- *
 * Gallery
 * ---------------------------------------------------------------- */

.dsp-single-product .woocommerce-product-gallery {
	position: relative;
}

.dsp-single-product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ds-radius);
}

.dsp-single-product .woocommerce-product-gallery__wrapper {
	border-radius: var(--ds-radius);
	overflow: hidden;
}

.dsp-gallery-heart {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 22;
	max-width: 46px;
	overflow: hidden;
	white-space: nowrap;
}

.dsp-gallery-heart .dsp-gallery-heart__link,
.dsp-gallery-heart a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 46px;
	padding: 9px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px -4px rgba(22, 24, 29, 0.4);
	color: var(--ds-ink);
	text-decoration: none;
	overflow: hidden;
}

.dsp-gallery-heart .dsp-gallery-heart__link span,
.dsp-gallery-heart a span {
	display: none;
}

.dsp-single-product .dsp-gallery-heart {
	position: absolute;
	top: 14px;
	right: 14px;
}

.dsp-gallery-heart .dsp-ico {
	width: 20px;
	height: 20px;
}

/* Vertical thumbnail rail. Only useful with more than one image, which the
   store has on a single product, so it simply stays empty otherwise. */
.dsp-single-product .woocommerce-product-gallery__wrapper {
	display: block;
}

.dsp-single-product .woocommerce-product-gallery__wrapper:has(.thumbnails),
.dsp-single-product .woocommerce-product-gallery__wrapper.dsp-has-thumbs {
	display: flex;
	flex-direction: row-reverse;
	gap: 12px;
}

.dsp-single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	flex: 1 1 auto;
	min-width: 0;
}

.dsp-single-product .thumbnails {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 74px;
	width: 74px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsp-single-product .thumbnails li {
	width: 74px;
	margin: 0;
	padding: 0;
	border-radius: var(--ds-radius-sm);
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.dsp-single-product .thumbnails li img {
	border-radius: 0;
	opacity: 0.68;
	transition: opacity 0.15s ease;
}

.dsp-single-product .thumbnails li:hover img,
.dsp-single-product .thumbnails li.flex-active img {
	opacity: 1;
}

.dsp-single-product .thumbnails li.flex-active {
	border-color: var(--ds-accent);
}

.dsp-single-product .flex-viewport {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
	.dsp-single-product .woocommerce-product-gallery__wrapper:has(.thumbnails),
.dsp-single-product .woocommerce-product-gallery__wrapper.dsp-has-thumbs {
		flex-direction: column;
	}

	.dsp-single-product .thumbnails {
		flex-direction: row;
		flex: 0 0 auto;
		width: 100%;
		order: 2;
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------- *
 * Tabs
 * ---------------------------------------------------------------- */

.dsp-single-product .woocommerce-tabs {
	margin: 44px 0 0;
}

.dsp-single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 1px solid var(--ds-border);
}

.dsp-single-product .woocommerce-tabs ul.tabs::before,
.dsp-single-product .woocommerce-tabs ul.tabs::after {
	display: none;
}

.dsp-single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.dsp-single-product .woocommerce-tabs ul.tabs li::before,
.dsp-single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.dsp-single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 4px;
	margin-right: 22px;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--ds-ink-muted);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.dsp-single-product .woocommerce-tabs ul.tabs li.active a,
.dsp-single-product .woocommerce-tabs ul.tabs li.active {
	color: var(--ds-ink);
	border-bottom-color: var(--ds-accent);
}

.dsp-single-product .woocommerce-tabs .panel {
	padding: 4px 0 0;
	color: var(--ds-ink-muted);
	font-size: 15px;
	line-height: 1.75;
}

.dsp-single-product .woocommerce-tabs .panel h2 {
	margin: 0 0 12px;
	color: var(--ds-ink);
	font-size: 20px;
}

/* ---------------------------------------------------------------- *
 * Related products carousel
 * ---------------------------------------------------------------- */

.dsp-rel {
	margin: 56px 0 0;
	padding: 0;
}

.dsp-rel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.dsp-rel__kicker {
	margin: 0 0 4px;
	color: var(--ds-accent);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dsp-rel__title {
	margin: 0;
	color: var(--ds-ink);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.dsp-rel__nav {
	display: flex;
	gap: 8px;
}

.dsp-rel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ds-border);
	border-radius: 50%;
	background: var(--ds-surface);
	color: var(--ds-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.dsp-rel__arrow:hover:not(:disabled) {
	border-color: var(--ds-accent);
	color: var(--ds-accent);
}

.dsp-rel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.dsp-rel__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 4px 4px 12px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dsp-rel__track::-webkit-scrollbar {
	display: none;
}

.dsp-rel__card {
	flex: 0 0 calc((100% - 60px) / 4);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.dsp-rel__card .ds-card__media {
	flex: 0 0 auto;
}

.dsp-rel__card .ds-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.dsp-rel__card .ds-card__price {
	margin-top: auto;
	padding-top: 6px;
}

.dsp-rel__card .ds-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.dsp-rel__card .ds-card__title {
	font-size: 14.5px;
}

.dsp-rel__card .ds-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 14px 16px;
}

/*
 * The related rail reuses the shop card buttons, which shop.css styles through
 * .ds-card__actions and Kadence styles through .button. Keeping
 * .ds-card__actions in the selector here outranks both, so these match the
 * homepage card buttons rather than the archive card buttons.
 */
.dsp-rel__card .ds-card__actions .ds-card__cart,
.dsp-rel__card .ds-card__actions a.button.ds-card__cart,
.dsp-rel__card .ds-card__actions .ds-card__buynow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: auto;
	min-height: 38px;
	margin: 0;
	padding: 9px 10px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dsp-rel__card .ds-card__actions .ds-card__cart,
.dsp-rel__card .ds-card__actions a.button.ds-card__cart {
	border-color: #1E7BF0;
	background: #1E7BF0;
	background-image: none;
	box-shadow: none;
	color: #fff;
}

.dsp-rel__card .ds-card__actions .ds-card__cart:hover,
.dsp-rel__card .ds-card__actions a.button.ds-card__cart:hover {
	border-color: #0F66D6;
	background: #0F66D6;
	color: #fff;
}

.dsp-rel__card .ds-card__actions .ds-card__buynow {
	border-color: #0B1E45;
	background: #0B1E45;
	background-image: none;
	color: #fff;
}

.dsp-rel__card .ds-card__actions .ds-card__buynow:hover {
	border-color: #123B7C;
	background: #123B7C;
	color: #fff;
}
.dsp-rel__card .ds-card__cart.disabled {
	opacity: 0.45;
	pointer-events: none;
}

@media (max-width: 1200px) {
	.dsp-rel__card {
		flex-basis: calc((100% - 40px) / 3);
	}
}

@media (max-width: 860px) {
	.dsp-rel__card {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (max-width: 480px) {
	.dsp-rel__card {
		flex-basis: 78%;
	}
}

/* ---------------------------------------------------------------- *
 * Small screens
 * ---------------------------------------------------------------- */

@media (max-width: 540px) {
	.dsp-single-product .summary > .product_title {
		font-size: 23px;
	}

	.dsp-single-product .summary > .price > .amount {
		font-size: 22px;
	}

}