/**
 * SnusFather Cart Upsell — popup styles.
 *
 * Colours and fonts are taken from Elementor's own global custom properties
 * with hard fallbacks, so the popup follows the site's palette and keeps
 * working if Elementor is not present. On this store those resolve to
 * #080808 on #FFFFFF, Syncopate headings and Poppins body text.
 *
 * The product cards themselves are NOT styled here — they are rendered from
 * the store's Elementor loop-item template and arrive with their own CSS. Only
 * the surrounding chrome and the add button belong to this file.
 */

.sfcu-overlay {
	/*
	 * The store's product cards are white with no border, so they only read as
	 * cards against a dark ground — that is how the site's own "You might also
	 * like" carousel looks. A white modal makes them vanish, so the modal takes
	 * the site's dark colour and the cards keep theirs.
	 */
	--sfcu-ink: var( --e-global-color-secondary, #080808 );
	--sfcu-paper: var( --e-global-color-primary, #ffffff );
	--sfcu-surface: var( --e-global-color-secondary, #080808 );
	--sfcu-on-surface: var( --e-global-color-primary, #ffffff );
	--sfcu-heading-font: var( --e-global-typography-primary-font-family, "Syncopate" ), sans-serif;
	--sfcu-body-font: var( --e-global-typography-text-font-family, "Poppins" ), sans-serif;
	--sfcu-radius: 20px;
	--sfcu-pill: 40px;
	--sfcu-gap: 14px;

	/* Overridden inline from the Cards-visible-at-once setting. */
	--sfcu-per-view: 4;
	--sfcu-per-view-mobile: 1;

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 8, 8, 8, 0.55 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
	animation: sfcu-fade 0.18s ease-out;
	font-family: var( --sfcu-body-font );
}

.sfcu-overlay[hidden] {
	display: none !important;
}

body.sfcu-open {
	overflow: hidden;
}

.sfcu-modal {
	position: relative;
	width: 100%;
	max-width: 900px;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	padding: 26px 28px 22px;
	color: var( --sfcu-on-surface );
	background: var( --sfcu-surface );
	border-radius: var( --sfcu-radius );
	box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.5 );
	animation: sfcu-rise 0.22s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.sfcu-modal:focus {
	outline: none;
}

@keyframes sfcu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sfcu-rise {
	from { opacity: 0; transform: translateY( 16px ) scale( 0.98 ); }
	to { opacity: 1; transform: none; }
}

/* Respect a reduced-motion preference: the popup still appears, just without
   the entrance animation or smooth carousel scrolling. */
@media ( prefers-reduced-motion: reduce ) {
	.sfcu-overlay,
	.sfcu-modal {
		animation: none;
	}
	.sfcu-track {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------- header */

.sfcu-modal__head {
	margin: 0 0 18px;
	text-align: center;
}

/* Tick and confirmation sit on one line, centred as a pair. */
.sfcu-modal__confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.sfcu-modal__check {
	display: inline-flex;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
}

.sfcu-modal__check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sfcu-modal__title {
	margin: 0;
	font-family: var( --sfcu-heading-font );
	font-size: clamp( 19px, 2.6vw, 26px );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --sfcu-on-surface );
	text-transform: uppercase;
}

/* What was added, and the running basket total. */
.sfcu-modal__meta {
	margin: 8px 0 0;
	font-family: var( --sfcu-body-font );
	font-size: 16px;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.6 );
}

.sfcu-modal__meta[hidden] {
	display: none !important;
}

/* Heading over the carousel — smaller than the confirmation, so the
   confirmation stays the thing the eye lands on first. */
.sfcu-modal__upsell {
	margin: 18px 0 0;
	font-family: var( --sfcu-heading-font );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --sfcu-on-surface );
	text-transform: uppercase;
}

.sfcu-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var( --sfcu-ink );
	background: var( --sfcu-paper );
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sfcu-close:hover,
.sfcu-close:focus-visible {
	background: rgba( 255, 255, 255, 0.14 );
}

/* ------------------------------------------------------------- carousel */

.sfcu-carousel {
	position: relative;
}

.sfcu-track {
	display: flex;
	gap: var( --sfcu-gap );
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* The scrollbar would sit under the cards and shift the snap points. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sfcu-track::-webkit-scrollbar {
	display: none;
}

.sfcu-card {
	flex: 0 0 calc(
		( 100% - var( --sfcu-gap ) * ( var( --sfcu-per-view ) - 1 ) ) / var( --sfcu-per-view )
	);
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	min-width: 0;
}

/*
 * Equal-height cards with the price at the foot of each, matching the site's
 * carousel. The loop template's own container justifies its content with
 * space-between, which without a height cap lets the tallest card (a bundle,
 * whose short description lists every item) stretch every other card and push
 * the prices far down.
 */
.sfcu-card > .sfcu-card__inner,
.sfcu-card__inner > .elementor,
.sfcu-card__inner > .elementor > .e-con {
	height: 100%;
}

/* Clamp the short description so all cards agree on height. */
.sfcu-card .elementor-widget-woocommerce-product-short-description .elementor-widget-container,
.sfcu-card .woocommerce-product-details__short-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	max-height: 4.6em;
	overflow: hidden;
}

.sfcu-card .woocommerce-product-details__short-description p {
	margin: 0;
}

/* The product title is the one thing that must never be cut off mid-word,
   but four wrapped lines breaks the grid, so cap it at three. */
.sfcu-card .elementor-widget-woocommerce-product-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The Elementor loop template renders a full-height card; let it fill the
   slot and keep the add button pinned underneath it. */
.sfcu-card__inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.sfcu-card__inner > .elementor {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.sfcu-card__inner img {
	max-width: 100%;
	height: auto;
}

/* Fallback card, used only when no Elementor template is available. */
.sfcu-card__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: var( --sfcu-ink );
	background: var( --sfcu-paper );
	border: 1px solid rgba( 8, 8, 8, 0.1 );
	border-radius: var( --sfcu-radius );
}

.sfcu-card__title {
	margin: 0;
	font-family: var( --sfcu-heading-font );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.sfcu-card__price {
	font-weight: 600;
}

/* ----------------------------------------------------------- add button */

.sfcu-card__add {
	/* Sits outside the white card, on the dark surface. Reset hard: the theme
	   paints .button and bare buttons with its own grey fill. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 9px;
	padding: 10px 12px;
	font-family: var( --sfcu-body-font );
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	color: var( --sfcu-on-surface );
	background: transparent;
	border: 1.5px solid rgba( 255, 255, 255, 0.55 );
	border-radius: var( --sfcu-pill );
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sfcu-card__add:hover:not( :disabled ),
.sfcu-card__add:focus-visible:not( :disabled ) {
	color: var( --sfcu-ink );
	background: var( --sfcu-on-surface );
	border-color: var( --sfcu-on-surface );
}

.sfcu-card__add-icon {
	position: relative;
	font-size: 16px;
	line-height: 1;
}

.sfcu-card__add.sfcu-loading {
	opacity: 0.6;
	cursor: wait;
}

.sfcu-card__add.is-added {
	color: var( --sfcu-ink );
	background: var( --sfcu-on-surface );
	border-color: var( --sfcu-on-surface );
}

.sfcu-card__add.is-added .sfcu-card__add-icon {
	/* Hides the "+" without hiding the tick below, which would inherit a
	   zero font-size and render as nothing. */
	color: transparent;
}

.sfcu-card__add.is-added .sfcu-card__add-icon::before {
	content: "\2713";
	position: absolute;
	color: var( --sfcu-ink );
	font-size: 13px;
	line-height: 1;
}

.sfcu-card__unavailable {
	display: block;
	margin-top: 12px;
	padding: 13px 16px;
	font-size: 13px;
	text-align: center;
	color: rgba( 255, 255, 255, 0.4 );
	border: 1.5px solid rgba( 255, 255, 255, 0.18 );
	border-radius: var( --sfcu-pill );
}

/* ---------------------------------------------------------- navigation */

.sfcu-nav {
	/* Overlaid on the track rather than sitting in flow beside it, so the
	   cards keep their full width. */
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 19px;
	line-height: 1;
	color: var( --sfcu-ink );
	background: var( --sfcu-paper );
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 );
	cursor: pointer;
	transform: translateY( -50% );
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sfcu-nav--prev {
	left: -17px;
}

.sfcu-nav--next {
	right: -17px;
}

.sfcu-nav:hover:not( :disabled ) {
	transform: translateY( -50% ) scale( 1.08 );
}

.sfcu-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.sfcu--single-page .sfcu-nav,
.sfcu--single-page .sfcu-dots {
	display: none;
}

.sfcu-dots {
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 14px;
}

.sfcu-dot {
	/* The theme styles bare <button> elements, which turned these into wide
	   rectangles. Reset explicitly rather than relying on inheritance. */
	box-sizing: border-box;
	width: 9px;
	min-width: 0;
	height: 9px;
	min-height: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	background: rgba( 255, 255, 255, 0.3 );
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sfcu-dot.is-active {
	background: var( --sfcu-on-surface );
	transform: scale( 1.3 );
}

/* -------------------------------------------------------------- actions */

.sfcu-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.sfcu-btn {
	box-sizing: border-box;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	font-family: var( --sfcu-body-font );
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	border-radius: var( --sfcu-pill );
	border: 1.5px solid var( --sfcu-on-surface );
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sfcu-btn--ghost {
	color: var( --sfcu-on-surface );
	background: transparent;
}

.sfcu-btn--ghost:hover,
.sfcu-btn--ghost:focus-visible {
	color: var( --sfcu-ink );
	background: var( --sfcu-on-surface );
}

.sfcu-btn--solid,
.sfcu-btn--solid:visited {
	color: var( --sfcu-ink );
	background: var( --sfcu-on-surface );
}

.sfcu-btn--solid:hover,
.sfcu-btn--solid:focus-visible {
	color: var( --sfcu-on-surface );
	background: transparent;
}

.sfcu-error {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	color: #8a1c1c;
	background: #fdecec;
	border-radius: 10px;
}

.sfcu-error[hidden] {
	display: none !important;
}

/* Visible focus everywhere, since the dialog is keyboard navigable. */
.sfcu-overlay :focus-visible {
	outline: 2px solid var( --sfcu-on-surface );
	outline-offset: 2px;
}

/* ----------------------------------------------------------- responsive */

@media ( max-width: 1024px ) {
	.sfcu-card {
		flex-basis: calc( ( 100% - var( --sfcu-gap ) ) / 2 );
	}
}

@media ( max-width: 767px ) {
	.sfcu-modal {
		padding: 34px 18px 22px;
		max-height: calc( 100vh - 24px );
	}

	.sfcu-card .elementor-widget-woocommerce-product-short-description .elementor-widget-container,
	.sfcu-card .woocommerce-product-details__short-description {
		-webkit-line-clamp: 2;
		max-height: 3.1em;
	}

	.sfcu-card {
		flex-basis: 100%;
	}

	/* Arrows are redundant next to a swipeable track on touch, and they eat
	   width that the single visible card needs. */
	.sfcu-nav {
		display: none;
	}

	.sfcu-actions {
		flex-direction: column-reverse;
		margin-top: 22px;
	}

}

/* Shown only while visibility is limited to shop managers, so a tester can
   never mistake the popup for something customers are seeing. */
.sfcu-testing-badge {
	display: inline-block;
	margin: 0 0 9px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b4b00;
	background: #ffe9a8;
	border-radius: var( --sfcu-pill );
}

/* ==========================================================================
   Hardened overrides
   ==========================================================================
   Hello Elementor and WooCommerce both style bare <button>/<a> elements with
   their own radius, fill and padding, and those rules load after this file.
   Specificity alone does not settle it, so the properties the theme actually
   fights over are forced here. Kept in one block rather than sprinkled through
   the file, so it is obvious what is defensive and what is design.
   ========================================================================== */

/* --- footer buttons ---------------------------------------------------- */

.sfcu-overlay .sfcu-btn {
	border-radius: var( --sfcu-pill ) !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	padding: 13px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sfcu-overlay .sfcu-btn--ghost,
.sfcu-overlay .sfcu-btn--ghost:visited {
	color: var( --sfcu-on-surface ) !important;
	background: transparent !important;
	border-color: var( --sfcu-on-surface ) !important;
}

.sfcu-overlay .sfcu-btn--ghost:hover,
.sfcu-overlay .sfcu-btn--ghost:focus-visible {
	color: var( --sfcu-ink ) !important;
	background: var( --sfcu-on-surface ) !important;
}

.sfcu-overlay .sfcu-btn--solid,
.sfcu-overlay .sfcu-btn--solid:visited {
	color: var( --sfcu-ink ) !important;
	background: var( --sfcu-on-surface ) !important;
	border-color: var( --sfcu-on-surface ) !important;
}

.sfcu-overlay .sfcu-btn--solid:hover,
.sfcu-overlay .sfcu-btn--solid:focus-visible {
	color: var( --sfcu-on-surface ) !important;
	background: transparent !important;
}

/* --- the + Add button on each card ------------------------------------- */

.sfcu-overlay .sfcu-card__add {
	width: 100% !important;
	border-radius: var( --sfcu-pill ) !important;
	border: 1.5px solid rgba( 255, 255, 255, 0.55 ) !important;
	padding: 10px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	color: var( --sfcu-on-surface ) !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sfcu-overlay .sfcu-card__add:hover:not( :disabled ),
.sfcu-overlay .sfcu-card__add:focus-visible:not( :disabled ),
.sfcu-overlay .sfcu-card__add.is-added {
	color: var( --sfcu-ink ) !important;
	background: var( --sfcu-on-surface ) !important;
	border-color: var( --sfcu-on-surface ) !important;
}

/* --- close button and arrows ------------------------------------------- */

.sfcu-overlay .sfcu-close,
.sfcu-overlay .sfcu-nav {
	border-radius: 50% !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sfcu-overlay .sfcu-close {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	color: var( --sfcu-ink ) !important;
	background: var( --sfcu-paper ) !important;
	border: 0 !important;
	border-radius: 50% !important;
}

.sfcu-overlay .sfcu-close:hover,
.sfcu-overlay .sfcu-close:focus-visible {
	color: var( --sfcu-ink ) !important;
	background: rgba( 255, 255, 255, 0.78 ) !important;
}

.sfcu-overlay .sfcu-nav {
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	color: var( --sfcu-ink ) !important;
	background: var( --sfcu-paper ) !important;
	border: 0 !important;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 ) !important;
}

/* --- carousel dots ----------------------------------------------------- */

.sfcu-overlay .sfcu-dot {
	width: 9px !important;
	min-width: 0 !important;
	height: 9px !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.3 ) !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sfcu-overlay .sfcu-dot.is-active {
	background: var( --sfcu-on-surface ) !important;
}

/* ==========================================================================
   Equal-height cards
   ==========================================================================
   Every product photo has a different aspect ratio, so the image block ends at
   a different height and everything below it — title, divider, description,
   price — starts at a different y on each card. Clamping the text alone does
   not fix that. So each region gets a fixed height and the price is pushed to
   the foot, which makes the cards line up row by row the way the site's own
   carousel does.
   ========================================================================== */

.sfcu-track {
	align-items: stretch;
}

.sfcu-card__inner,
.sfcu-card__inner > .elementor {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.sfcu-card__inner > .elementor > .e-con {
	flex: 1 1 auto !important;
	height: auto !important;
}

/* Fixed image area, image centred and contained within it. */
.sfcu-card .elementor-widget-theme-post-featured-image > .elementor-widget-container {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 168px;
	padding: 22px 0 14px !important;
}

.sfcu-card .elementor-widget-theme-post-featured-image img {
	width: auto !important;
	max-width: 68%;
	max-height: 100%;
	object-fit: contain;
}

/* Two lines of title on every card, so the divider under it always aligns. */
.sfcu-card .elementor-widget-woocommerce-product-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.4em;
	overflow: hidden;
}

/* Three lines of description on every card. */
.sfcu-card .elementor-widget-woocommerce-product-short-description > .elementor-widget-container,
.sfcu-card .woocommerce-product-details__short-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	height: 4.5em;
	max-height: 4.5em;
	overflow: hidden;
}

/* Price sits at the foot of the card whatever the content above it. */
.sfcu-card .elementor-widget-woocommerce-product-price {
	margin-top: auto !important;
}

@media ( max-width: 767px ) {
	.sfcu-card .elementor-widget-theme-post-featured-image > .elementor-widget-container {
		height: 148px;
	}

	.sfcu-card .elementor-widget-woocommerce-product-short-description > .elementor-widget-container,
	.sfcu-card .woocommerce-product-details__short-description {
		-webkit-line-clamp: 2;
		height: 3em;
		max-height: 3em;
	}
}

/* ==========================================================================
   Compact card typography
   ==========================================================================
   The loop template is designed for ~300px cards in a full-width carousel. In
   the popup at four across they are nearer 200px, so the template's own type
   scale and 25px side padding are far too large. Scaled down here rather than
   by editing the template, which would change the site's own carousel too.
   ========================================================================== */

.sfcu-card .elementor-widget-woocommerce-product-title .elementor-heading-title {
	font-size: 16px !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
}

.sfcu-card .woocommerce-product-details__short-description,
.sfcu-card .woocommerce-product-details__short-description p {
	font-size: 11.5px !important;
	line-height: 1.42 !important;
}

.sfcu-card .elementor-widget-woocommerce-product-price .price,
.sfcu-card .elementor-widget-woocommerce-product-price .amount {
	font-size: 14px !important;
	line-height: 1.2 !important;
}

/*
 * Trim the template's side padding on the card's text block only.
 * :has() picks out the one container that actually carries the padding, so
 * nested containers (which set their own padding to zero) are untouched. If
 * the template is ever restructured this rule simply stops matching and the
 * template's own padding applies again.
 */
.sfcu-card .e-con:has( > .e-con > .elementor-widget-woocommerce-product-title ) {
	--padding-top: 12px !important;
	--padding-bottom: 16px !important;
	--padding-left: 14px !important;
	--padding-right: 14px !important;
}

.sfcu-card .e-con:has( > .elementor-widget-woocommerce-product-title ) {
	--padding-bottom: 10px !important;
}

/* Smaller image well to match. */
.sfcu-card .elementor-widget-theme-post-featured-image > .elementor-widget-container {
	height: 112px;
	padding: 14px 0 8px !important;
}

.sfcu-card .elementor-widget-theme-post-featured-image img {
	max-width: 74%;
}

.sfcu-card .elementor-widget-woocommerce-product-title .elementor-heading-title {
	min-height: 2.5em;
}

.sfcu-card .elementor-widget-woocommerce-product-short-description > .elementor-widget-container,
.sfcu-card .woocommerce-product-details__short-description {
	height: 4.26em;
	max-height: 4.26em;
}

@media ( max-width: 767px ) {
	.sfcu-card .elementor-widget-woocommerce-product-title .elementor-heading-title {
		font-size: 16px !important;
	}

	.sfcu-card .woocommerce-product-details__short-description,
	.sfcu-card .woocommerce-product-details__short-description p {
		font-size: 12.5px !important;
	}

	.sfcu-card .elementor-widget-theme-post-featured-image > .elementor-widget-container {
		height: 130px;
	}

	.sfcu-card .elementor-widget-woocommerce-product-short-description > .elementor-widget-container,
	.sfcu-card .woocommerce-product-details__short-description {
		height: 2.9em;
		max-height: 2.9em;
	}
}

/* ==========================================================================
   Scrollbars
   ==========================================================================
   The modal can still scroll on a short viewport, and the browser default is a
   wide light bar that looks broken against the dark surface.
   ========================================================================== */

.sfcu-modal {
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, 0.28 ) transparent;
}

.sfcu-modal::-webkit-scrollbar {
	width: 8px;
}

.sfcu-modal::-webkit-scrollbar-track {
	background: transparent;
}

.sfcu-modal::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, 0.24 );
	border-radius: 99px;
	/* Insets the thumb from the modal's rounded corner. */
	border: 2px solid transparent;
	background-clip: content-box;
}

.sfcu-modal::-webkit-scrollbar-thumb:hover {
	background: rgba( 255, 255, 255, 0.4 );
	background-clip: content-box;
}

/* The theme adds bottom margin to list items, which showed up as a gap under
   each card and threw the alignment out. */
.sfcu-overlay .sfcu-card {
	margin: 0 !important;
}

/* The "+" and the "Add" label must occupy identical boxes, or the taller of
   the two sets the row height and the pair reads as off-centre. Both are
   pinned to the label's own line box (13px x 1.2), so neither can inflate it.
   The glyph is then centred inside that box rather than sitting on the text
   baseline. */
.sfcu-overlay .sfcu-card__add-icon,
.sfcu-overlay .sfcu-card__add-text {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 16px !important;
	line-height: 1 !important;
}

.sfcu-overlay .sfcu-card__add-icon {
	font-size: 16px !important;
	margin-right: 4px;
	/* A "+" is drawn centred on the maths axis, which sits a shade above the
	   optical centre of lowercase text. Nudge it back down to match. */
	padding-top: 1px;
}

/* ==========================================================================
   Mobile header + arrows
   ========================================================================== */

@media ( max-width: 767px ) {
	/* Redundant beside a swipeable track, and at one card per view they
	   overlap the card itself. !important because the hardened block above
	   sets the arrows' box at the same specificity. */
	.sfcu-overlay .sfcu-nav {
		display: none !important;
	}

	.sfcu-modal__confirm {
		gap: 9px;
	}

	.sfcu-modal__check {
		width: 26px;
		height: 26px;
	}

	.sfcu-modal__meta {
		font-size: 14px;
	}

	.sfcu-modal__upsell {
		margin-top: 14px;
		font-size: 13px;
	}
}