/**
 * Cart drawer.
 *
 * Styling only, on the drawer Flatsome builds. Two changes, both to things the
 * native drawer genuinely gets wrong, and nothing else, the layout, the
 * quantity control, the upsells and the progress bar are all left alone.
 *
 * Scoped to #cart-popup and the off-canvas cart so it cannot reach the cart
 * page, the checkout or anywhere else.
 */

/**
 * One obvious action.
 *
 * Both buttons were full width and filled: View cart in the brand teal, Checkout
 * in near-black. The teal one is the louder of the two, which points people away
 * from the thing they came to do. Checkout keeps its fill; View cart becomes a
 * quiet link under it.
 */
#cart-popup .woocommerce-mini-cart__buttons a.button:not(.checkout),
.off-canvas-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	background: none;
	border: 0;
	color: #6b6b6b;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 6px 0 0;
	min-height: 0;
	box-shadow: none;
}

#cart-popup .woocommerce-mini-cart__buttons a.button:not(.checkout):hover,
.off-canvas-cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
	background: none;
	color: #1a1a1a;
}

/* Checkout, ordered after View cart in the markup, is pulled above it. */
#cart-popup .woocommerce-mini-cart__buttons,
.off-canvas-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0;
	margin-bottom: 0;
}

#cart-popup .woocommerce-mini-cart__buttons a.button.checkout,
.off-canvas-cart .woocommerce-mini-cart__buttons a.button.checkout {
	width: 100%;
	margin: 0;
}

/**
 * The remove control.
 *
 * A 24px grey cross sits directly beside the price, which is a small target next
 * to something you would not want to hit by accident. Bigger hit area, and it
 * only turns red on hover so it does not shout in the resting state.
 */
#cart-popup .woocommerce-mini-cart .remove_from_cart_button,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button {
	/*
	 * position is deliberately not set here. The theme places this control with
	 * position:absolute, and declaring relative pulled it back into flow: it
	 * jumped from the right of the row to above the product title. An absolutely
	 * positioned element is already a containing block for its own pseudo
	 * elements, so the mark below needs nothing from this rule.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	/*
	 * The circle is the theme's: a 2px ring around a 15px multiplication sign,
	 * which made a heavier control than anything else in the row. The ring goes
	 * and the mark is drawn as two rotated bars instead, which stay crisp at
	 * small sizes where the glyph renders thin and slightly off centre.
	 *
	 * The 26px box is kept as the hit area even though the mark inside is 11px,
	 * so the target stays comfortable next to the price.
	 */
	border: 0;
	border-radius: 0;
	color: transparent;
	text-decoration: none;
	opacity: 1;
}

#cart-popup .woocommerce-mini-cart .remove_from_cart_button::before,
#cart-popup .woocommerce-mini-cart .remove_from_cart_button::after,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button::before,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	border-radius: 2px;
	background-color: #9a9a9a;
	transform: translate(-50%, -50%) rotate(45deg);
}

#cart-popup .woocommerce-mini-cart .remove_from_cart_button::after,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

#cart-popup .woocommerce-mini-cart .remove_from_cart_button:hover,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button:hover {
	color: transparent;
	background: none;
}

#cart-popup .woocommerce-mini-cart .remove_from_cart_button:hover::before,
#cart-popup .woocommerce-mini-cart .remove_from_cart_button:hover::after,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button:hover::before,
.off-canvas-cart .woocommerce-mini-cart .remove_from_cart_button:hover::after {
	background-color: #b3261e;
}

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

/**
 * "Cart" occupied a 67px block: 21.6px type, 30px of padding and a divider rule
 * under it, for one word. Tightened, and the divider goes, the first item's own
 * border already separates the header from the list.
 */
#cart-popup .cart-popup-title {
	padding-bottom: 0;
	margin-bottom: 6px;
}

#cart-popup .cart-popup-title .is-divider {
	display: none;
}

#cart-popup .cart-popup-title span {
	font-size: 18px;
	letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------- the line */

/**
 * The saving on the line comes from the discount plugin with an inline
 * style="color: green", pure #008000, which is the loudest thing in the drawer
 * and sits right beside the price. Toned to the brand colour and to the size of
 * supporting text.
 *
 * MANUAL DEVIATION: !important is needed. The colour is an inline style
 * attribute, and nothing but !important outranks that.
 */
#cart-popup .mini_cart_item .awdr-you-saved-text,
.off-canvas-cart .mini_cart_item .awdr-you-saved-text {
	color: var(--fs-color-primary, #009b9b) !important;
	font-size: 12px;
	font-weight: 600;
	margin-top: 2px;
	display: block;
}

/* The stepper and the price share a row; give them a little breathing room. */
#cart-popup .ux-mini-cart-qty {
	margin-top: 8px;
	align-items: center;
}

#cart-popup .mini_cart_item .product-subtotal {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- the upsells */

/**
 * The upsell row was 375px wide inside a 335px column, so the third card was
 * cut off by the drawer edge rather than being scrollable to. Constrained to the
 * column and given a real horizontal scroll with snap points.
 */
#cart-popup .side-cart__upsells-items,
.off-canvas-cart .side-cart__upsells-items {
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

#cart-popup .side-cart__upsells-items .upsell-item,
.off-canvas-cart .side-cart__upsells-items .upsell-item {
	scroll-snap-align: start;
}

/*
 * The heading was doing a lot: uppercase, bold, an emoji and a wide gap.
 *
 * margin-bottom lives here rather than in a later rule: this selector carries
 * a :first-child pseudo-class, so at (1,3,0) it outranks anything written as
 * "> div" further down the file, and a second rule would silently lose.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell > *:first-child,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell > *:first-child {
	letter-spacing: 0.02em;
	margin-bottom: 0;
}

/*
 * The heading rendered at 10.8px in weight 400, which made it smaller than the
 * reassurance text under the checkout button and the quietest thing in a panel
 * that is meant to sell. It needs to read as a section title.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .expand-one h5,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .expand-one h5 {
	/*
	 * Uppercase in CSS rather than in the setting, so the field can be typed in
	 * normal sentence case and still render as a section label. Wider tracking,
	 * because caps set tight are harder to read than lowercase set tight.
	 */
	font-size: 12px;
	font-weight: 600;
	color: #2b2b2b;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- the progress strip */

/* Labels were crammed against the bar; the bar itself is 3px and fine. */
#cart-popup .pearls-info-text,
.off-canvas-cart .pearls-info-text {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

/* ============================================================ appearance */

/**
 * The announcement strip.
 *
 * It was mustard #f7f0a8 across the full width, which read as a warning and was
 * the loudest thing in a drawer whose job is to look calm and expensive. Same
 * message, brand tint, and sized as a note rather than an alert.
 */
/*
 * The banner and the upsell panel share the class .mini-cart-upsell, so they
 * have to be told apart by where they sit: the banner is a direct child of the
 * cart list, the upsell panel lives in the footer. An earlier version of this
 * rule targeted .mini_cart_info > *:first-child, which is the progress bar
 * container, and tinted that instead, its milestone labels sit above it, so
 * they collided with the text.
 *
 * MANUAL DEVIATION: !important. The yellow is an inline style attribute on the
 * banner div, and only !important outranks that.
 */
#cart-popup .woocommerce-mini-cart > .mini-cart-upsell,
.off-canvas-cart .woocommerce-mini-cart > .mini-cart-upsell {
	background-color: #f6f4ef !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0;
	color: #6a6255;
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.45;
	text-transform: uppercase;
	padding: 8px 16px !important;
	margin: 0 -30px 18px !important;
	text-align: center;
}

/**
 * The progress strip.
 *
 * The two milestone labels were bold black competing with the bar itself, and
 * the message under it was bold teal. Labels recede, the message reads as a
 * sentence, and the bar keeps the accent to itself.
 */
/* Base label treatment. The strip below sets size, weight and the two tone
   colouring, so only the casing is decided here. */
#cart-popup .label_mini,
.off-canvas-cart .label_mini {
	text-transform: uppercase;
}

#cart-popup .pearls-info-text,
.off-canvas-cart .pearls-info-text {
	color: #4a4a4a;
	font-weight: 500;
	text-align: center;
}

#cart-popup .pearls-info-text b,
.off-canvas-cart .pearls-info-text b {
	color: #1a1a1a;
}

/* ------------------------------------------------------------ the line item */

/* A rule between lines rather than none, so two products do not run together. */
#cart-popup .woocommerce-mini-cart .mini_cart_item,
.off-canvas-cart .woocommerce-mini-cart .mini_cart_item {
	border-bottom: 1px solid #f0f2f1;
	padding-top: 14px;
	padding-bottom: 14px;
}

#cart-popup .woocommerce-mini-cart .mini_cart_item:last-child,
.off-canvas-cart .woocommerce-mini-cart .mini_cart_item:last-child {
	border-bottom: 0;
}

/* The thumbnail was a bare square; rounded with a hairline, like the checkout. */
#cart-popup .woocommerce-mini-cart .mini_cart_item img,
.off-canvas-cart .woocommerce-mini-cart .mini_cart_item img {
	border-radius: 8px;
	border: 1px solid #eef1f0;
	background: #f7f9f8;
}

/* The product name rendered as a default link, navy and underlined on hover. */
#cart-popup .woocommerce-mini-cart .mini_cart_item > a:not(.remove),
.off-canvas-cart .woocommerce-mini-cart .mini_cart_item > a:not(.remove) {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

/**
 * The stepper.
 *
 * Flatsome's native control is three loose inputs with no shared edge, so it
 * read as "minus, a number, plus" rather than as one control. Given a single
 * border and equal cells, which is what it is.
 */
#cart-popup .ux-mini-cart-qty .ux-quantity,
.off-canvas-cart .ux-mini-cart-qty .ux-quantity {
	border: 1px solid #d5d9d8;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	max-width: 96px;
}

#cart-popup .ux-mini-cart-qty .ux-quantity input,
.off-canvas-cart .ux-mini-cart-qty .ux-quantity input {
	background: none;
	border: 0;
	box-shadow: none;
	height: 30px;
	min-height: 0;
	font-size: 13px;
	color: #1a1a1a;
}

#cart-popup .ux-mini-cart-qty .ux-quantity__button,
.off-canvas-cart .ux-mini-cart-qty .ux-quantity__button {
	width: 28px;
	color: #4a4a4a;
}

#cart-popup .ux-mini-cart-qty .ux-quantity__button:hover,
.off-canvas-cart .ux-mini-cart-qty .ux-quantity__button:hover {
	background: #f2f5f4;
	color: #1a1a1a;
}

/* --------------------------------------------------------------- upsells */

/* The block was a grey slab edge to edge; softened to a panel that belongs. */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell {
	background: #fafbfb;
	border-top: 1px solid #f0f2f1;
	border-bottom: 1px solid #f0f2f1;
}

#cart-popup .upsell-item .btn,
#cart-popup .upsell-item .add_to_cart_button,
.off-canvas-cart .upsell-item .btn,
.off-canvas-cart .upsell-item .add_to_cart_button {
	border-radius: 6px;
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 8px 12px;
	min-height: 0;
}

#cart-popup .upsell-image img,
.off-canvas-cart .upsell-image img {
	border-radius: 6px;
}

/* ------------------------------------------------------------- the button */

/*
 * Full width, squarer, and the only filled thing in the footer.
 *
 * font-weight is the one that was wrong. Measured: this button rendered at
 * weight 100, a hairline, while the Add to cart in the upsell row rendered at
 * 700. The secondary action was the boldest text in the drawer and the primary
 * one the thinnest. Checkout now carries the most weight of anything here, and
 * Add to cart steps back to 600 so the order of importance is unambiguous.
 */
#cart-popup .woocommerce-mini-cart__buttons a.button.checkout,
.off-canvas-cart .woocommerce-mini-cart__buttons a.button.checkout {
	border-radius: 8px;
	padding: 15px 20px;
	/*
	 * 14px, chosen on how it looks. 19px was tried to satisfy the contrast
	 * guideline on the brand teal, where white measures 3.41:1 against the 4.5:1
	 * wanted below 18.66px, and it read as oversized in the panel.
	 *
	 * So this is a deliberate trade: exact brand colour and the right visual
	 * weight, slightly under the guideline. Darkening the teal to #007d7d would
	 * reach 4.97:1 at this size if that ever needs revisiting.
	 */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/*
 * Medium, not semibold. The label used to read ADD TO CART in caps, where the
 * extra weight held it together; as a single lowercase word beside a price it
 * only needs to be legible, and the reference it is modelled on sets it regular.
 * Checkout keeps the weight in this panel.
 */
#cart-popup .upsell-item .add_to_cart_button,
.off-canvas-cart .upsell-item .add_to_cart_button {
	font-weight: 500;
}

/*
 * The drawer's checkout button takes the theme PRIMARY, not the secondary that
 * every other button on the site uses.
 *
 * That is deliberate and follows Atolea: the product page keeps a black add to
 * cart, and the cart drawer's checkout carries the brand colour instead. The
 * two buttons then never compete, since the one in the drawer is the only place
 * that colour appears as an action.
 *
 * Taken from the variable rather than a literal, so it tracks the Customizer
 * along with the progress bar it now matches.
 */
#cart-popup .woocommerce-mini-cart__buttons a.button.checkout,
.off-canvas-cart .woocommerce-mini-cart__buttons a.button.checkout {
	background-color: var(--fs-color-primary, #009b9b);
	border-color: var(--fs-color-primary, #009b9b);
	color: #fff;
}

/* a touch darker on hover, so the press has feedback without a colour change */
#cart-popup .woocommerce-mini-cart__buttons a.button.checkout:hover,
.off-canvas-cart .woocommerce-mini-cart__buttons a.button.checkout:hover {
	background-color: color-mix(in srgb, var(--fs-color-primary, #009b9b) 88%, #000);
	border-color: color-mix(in srgb, var(--fs-color-primary, #009b9b) 88%, #000);
	color: #fff;
}

/* The progress bar's milestone labels sit above the bar, so the block needs
   headroom of its own or they ride up into whatever is above it. */
#cart-popup .mini_cart_info,
.off-canvas-cart .mini_cart_info {
	display: block;
	margin: 22px 0 6px;
}

/* --------------------------------------------------- reassurance under the CTA
 *
 * A compact strip under the button, in place of the mustard banner that used to
 * open the drawer. It wraps rather than stacking, so three items cost two lines
 * instead of four and the button, the totals and the reassurance stay on screen
 * together on a short phone.
 */
#cart-popup .pearlory-mc-trust,
.off-canvas-cart .pearlory-mc-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 14px;
	row-gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

#cart-popup .pearlory-mc-trust li,
.off-canvas-cart .pearlory-mc-trust li {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	color: #6b6b6b;
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	list-style: none;
}

/* width and height together: Flatsome sets a min-width on inline svg in places,
   which stretched the checkout tooltip icon to 24x39 before it was pinned. */
#cart-popup .pearlory-mc-trust .pearlory-mc-tick,
.off-canvas-cart .pearlory-mc-trust .pearlory-mc-tick {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	min-width: 11px;
	min-height: 11px;
}

/* ------------------------------------------------------- the upsell carousel
 *
 * Measured: 414px of visible track holding 260px cards, so it rested at one and
 * a half cards, with the second one cut through the middle of a word and its
 * Add button sliced off. That reads as broken rather than as something to swipe.
 *
 * Snap points, plus a card sized to leave a deliberate peek: every rest position
 * is a whole card now, and the sliver of the next one is what says there is
 * more. Nothing here depends on how many upsells are configured.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell ul.list-none,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell ul.list-none {
	scroll-snap-type: x mandatory;
	gap: 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell ul.list-none::-webkit-scrollbar,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell ul.list-none::-webkit-scrollbar {
	display: none;
}

/*
 * Sized to their content, not to a share of the track.
 *
 * flex: 0 0 88% gave a 312px card holding 249px of content: a 115px thumbnail
 * plus a 134px detail column. That left 63px of dead width inside every card,
 * so the space between one card's content and the next measured 72px while the
 * gap between the boxes was only 9px. It read as the items being far apart when
 * the gap was never the problem.
 *
 * At their natural width the peek of the next card comes for free: a 249px card
 * in a 355px track leaves about 96px of the next one showing, which is the cue
 * that the row scrolls. No fixed percentage to re-tune if the card layout
 * changes.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .upsell-item,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .upsell-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* ------------------------------------------------------------- the heading
 *
 * Measured: a 16px centred uppercase "Cart" with a divider rule under it. Three
 * elements to say one word, and the divider repeats a boundary the drawer edge
 * already draws. Left aligned, sentence case, with the item count beside it.
 */
#cart-popup .cart-popup-title,
.off-canvas-cart .off-canvas-cart-title {
	display: flex;
	align-items: baseline;
	gap: 7px;
	text-align: left;
	padding: 0 0 14px;
	margin: 0;
}

#cart-popup .cart-popup-title > span,
.off-canvas-cart .off-canvas-cart-title > span {
	text-transform: none;
	letter-spacing: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

/* The divider is a theme element, not content, so it goes rather than being
   restyled: the border above draws the same line in one declaration. */
#cart-popup .cart-popup-title .is-divider,
.off-canvas-cart .off-canvas-cart-title .is-divider {
	display: none;
}

#cart-popup .cart-popup-title .pearlory-mc-count,
.off-canvas-cart .off-canvas-cart-title .pearlory-mc-count {
	font-size: 12.5px;
	font-weight: 400;
	color: #7a7a7a;
	letter-spacing: 0.01em;
}

/* the separating dot, in CSS so the count string stays translatable on its own */
#cart-popup .cart-popup-title .pearlory-mc-count:not(:empty)::before,
.off-canvas-cart .off-canvas-cart-title .pearlory-mc-count:not(:empty)::before {
	content: "\00b7";
	margin-right: 7px;
}

/* -------------------------------------------------- price, was and is
 *
 * The struck original is the quieter of the two. Sizing it down as well as
 * greying it keeps the price the eye lands on the one being charged.
 */
#cart-popup .pearlory-mc-was,
.off-canvas-cart .pearlory-mc-was {
	color: #9a9a9a;
	font-size: 0.85em;
	font-weight: 400;
	text-decoration-thickness: 1px;
	margin-right: 4px;
}

/* --------------------------------------------------- add to cart, no shift
 *
 * WooCommerce styles .loading with padding-right: 2.618em to make room for its
 * spinner. Measured: that widened the upsell button enough to wrap onto the next
 * line, which is the 15px jump down and back. Holding the padding and centring
 * the spinner over the hidden label keeps the box identical in both states.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading {
	padding-right: 12px;
}

/*
 * The plus and the label are hidden by name, not by colouring the text
 * transparent. color:transparent was tried and lost on specificity to the rule
 * that sets the button's own colour, so the label stayed visible underneath the
 * spinner. Hiding the two children directly cannot be outranked by a colour
 * declaration, and visibility is used rather than display so the button keeps
 * exactly the same size while it works.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading > svg,
#cart-popup .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading > span,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading > svg,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .add_to_cart_button.loading > span {
	visibility: hidden;
}

/*
 * The jump this used to fix is gone: the button is no longer absolutely
 * positioned, so Flatsome's .button.loading { position: relative } has nothing
 * to yank it out of. Nothing needed here now.
 */

#cart-popup .upsell-item .add_to_cart_button.loading::after,
.off-canvas-cart .upsell-item .add_to_cart_button.loading::after {
	top: 50%;
	right: 50%;
	/*
	 * Centred with negative margins, not a transform. The spinner's own keyframes
	 * animate transform to rotate it, and an animated property beats a static
	 * declaration of the same property outright, so translate(-50%) was being
	 * discarded every frame. Half of the 16px spinner in each direction does the
	 * same job and leaves the rotation alone.
	 */
	margin: -8px -8px 0 0;
	color: #fff;
}

/* WooCommerce appends a "View cart" link after a successful add, which would
   shift the card a second time. The drawer is already the cart. */
#cart-popup .upsell-item .added_to_cart,
.off-canvas-cart .upsell-item .added_to_cart {
	display: none;
}

/* --------------------------------------------------------- full width on phones
 *
 * Measured at a 375px viewport: the drawer was 338px, leaving a 37px strip of
 * dimmed page down one side that does nothing except make the panel narrower.
 * A cart is the whole task on a phone, so it gets the whole screen.
 */
@media screen and (max-width: 549px) {
	/*
	 * .mfp-content and .off-canvas-cart are the same element, not nested, so the
	 * width has to be set on the pair.
	 *
	 * !important here only because the child theme's style.css already uses it:
	 * .off-canvas-cart { width: 90% !important } is what produced the 337.5px
	 * measured at a 375px viewport. Same importance, so specificity decides, and
	 * .mfp-content.off-canvas-cart (0,2,0) beats .off-canvas-cart (0,1,0) without
	 * needing to escalate further.
	 */
	.off-canvas.off-canvas-right .mfp-content.off-canvas-cart,
	.mfp-content.off-canvas-cart {
		width: 100% !important;
		max-width: 100% !important;
	}

	#cart-popup {
		width: 100%;
		max-width: 100%;
	}

	/*
	 * The popup container carries 30px of padding, which would keep a grey strip
	 * down both sides however wide the panel is. Scoped with :has() so only the
	 * container holding the cart loses it, leaving every other off-canvas panel
	 * and popup alone. Browsers without :has() simply keep the current inset.
	 */
	.mfp-container:has(.off-canvas-cart) {
		padding: 0;
	}
}

/* ---------------------------------------------------- no sideways drag
 *
 * Measured at 375px: the drawer reported a 423px scroll width, so the whole
 * panel could be dragged 48px sideways. The overflow is the free-shipping
 * milestone label, a 150px box centred on a dot near the right end with
 * left:-40px, whose text ends well inside the panel. Clipping the panel loses
 * none of that text, and a cart drawer should never scroll horizontally.
 *
 * overflow-x: clip rather than hidden, because hidden on one axis forces the
 * other axis to become a scroll container and the drawer scrolls vertically.
 * The hidden declaration above it is the fallback for browsers without clip.
 */
#cart-popup {
	overflow-x: hidden;
	overflow-x: clip;
}

/* ============================================================ progress strip
 *
 * Rebuilt from the theme's markup, which is left untouched. What was measured
 * and what each change answers:
 *
 *   message    sat under the bar, so the one line that says what to do next was
 *              the last thing read. It leads now, via flex order, with no
 *              markup change
 *   track      3px with a transparent background and a 3px grey bottom border,
 *              so the unfilled journey was invisible and the bar read as two
 *              stacked lines. One 6px background track now, warm grey so it
 *              belongs with the banner above it rather than fighting it
 *   fill       inline width:145% overshooting its own track. Clipped, and given
 *              a slight gradient so the leading edge reads as motion
 *   dots       20px flat circles on a 3px line. 14px now, ringed in the panel
 *              colour so they sit on the bar rather than across it, and the
 *              reached ones are filled while the next one stays hollow
 *   last dot   sat 21px from the drawer edge, which looked clipped. The strip
 *              is inset so it lands inside the gutter
 *   labels     150px boxes at left:-40px, overlapping each other and running
 *              48px past the panel. Sized to their text, under their own dot,
 *              and the reached one is darker than the one still to come
 */

/* the message leads, then the bar, then the labels under it */
#cart-popup .mini_cart_info,
.off-canvas-cart .mini_cart_info {
	display: flex;
	flex-direction: column;
	margin: 14px 0 2px;
}

#cart-popup .mini_cart_info .pearls-info-text .pearlory-mc-amount,
.off-canvas-cart .mini_cart_info .pearls-info-text .pearlory-mc-amount {
	font-weight: 700;
	color: #1c1c1c;
}

#cart-popup .mini_cart_info .pearls-info-text,
.off-canvas-cart .mini_cart_info .pearls-info-text {
	order: -1;
	margin: 0 0 11px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	color: #3f3f3f;
	text-align: center;
	letter-spacing: 0;
}

/*
 * padding-right keeps the final milestone inside the gutter: the theme places
 * that dot at 99.8% of this container, so shrinking the container is what moves
 * the dot, not any offset on the dot itself.
 */
#cart-popup .mini_cart_info .minicart_container,
.off-canvas-cart .mini_cart_info .minicart_container {
	width: 100%;
	margin: 0;
	padding: 0 0 32px;
}

#cart-popup .mini_cart_info .progress,
.off-canvas-cart .mini_cart_info .progress {
	position: relative;
	width: 100%;
	height: 6px;
	background-color: #ebe7e0;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
}

/* both edges pinned rather than height:100%, which computed to 3px inside the
   4px track and left a grey line under the fill */
#cart-popup .mini_cart_info .progress .percent,
.off-canvas-cart .mini_cart_info .progress .percent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	height: auto;
	max-width: 100%;
	/*
	 * The theme's own primary, not a hardcoded teal. This was #00959a, which is
	 * a near miss of the real value and would drift the moment the brand colour
	 * was retuned in the Customizer. The fallback is the current value, for the
	 * case where the variable is not defined on the page.
	 */
	background-color: var(--fs-color-primary, #009b9b);
	border-radius: 999px;
}

#cart-popup .mini_cart_info .steps,
.off-canvas-cart .mini_cart_info .steps {
	position: relative;
	width: 100%;
	height: 0;
}

/*
 * 14px dot on a 6px track: top is minus half of each, so minus 10. The theme
 * positions each dot by margin-left, which sets its left edge, so the translate
 * puts the centre back where the percentage intended it after the size change.
 */
/*
 * translateX(-50%) is the fix for the dot that sat past the end of the bar.
 *
 * The theme positions each milestone with margin-left as a percentage, which
 * places the dot's LEFT EDGE at that point. At 99.8% the whole 14px dot
 * therefore hung 9px beyond the end of the track. Pulling each dot back by half
 * its own width centres it on its percentage, so the last one lands exactly on
 * the end of the bar and the track can go back to a symmetric 30px each side.
 *
 * A milestone not yet reached is smaller and flat, so the ladder reads at a
 * glance: small and grey ahead of you, larger and filled behind you. top is
 * minus half the track minus half the dot, which is why the two states carry
 * different values.
 */
#cart-popup .mini_cart_info .steps .step,
.off-canvas-cart .mini_cart_info .steps .step {
	width: 10px;
	height: 10px;
	top: -8px;
	transform: translateX(-50%);
	border: 0;
	background-color: #d9d4cb;
	box-shadow: 0 0 0 3px #fff;
}

/* reached: filled, ringed in the panel colour so the bar passes behind it */
#cart-popup .mini_cart_info .steps .step.completed,
.off-canvas-cart .mini_cart_info .steps .step.completed {
	width: 14px;
	height: 14px;
	top: -10px;
	background-color: var(--fs-color-primary, #009b9b);
	box-shadow: 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, 0.18);
}

#cart-popup .mini_cart_info .steps .step .label_mini,
.off-canvas-cart .mini_cart_info .steps .step .label_mini {
	position: absolute;
	/*
	 * 20px, not 13px. At 13 the text sat 1px under the dot and 5px under the
	 * track, so the labels read as stuck to the bar. The container's
	 * padding-bottom above reserves the room this needs, since an absolutely
	 * positioned label cannot push it open itself.
	 */
	top: 20px;
	left: 50%;
	/*
	 * right:auto is the one that matters. The theme pins left AND right, and a
	 * box with both edges pinned stretches instead of shrinking to its text.
	 * Against a 14px dot that resolved to zero width, so translateX(-50%) moved
	 * it by half of nothing and every label sat with its left edge on the dot.
	 */
	right: auto;
	width: auto;
	max-width: 150px;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #b0aaa1;
}

/* the milestone already earned reads stronger than the one still to come */
#cart-popup .mini_cart_info .steps .step.completed .label_mini,
.off-canvas-cart .mini_cart_info .steps .step.completed .label_mini {
	color: #5f5a52;
}

/* the last milestone sits at 99.8% of the track, so a centred label would hang
   off the end: anchor this one to its dot's right edge instead */
#cart-popup .mini_cart_info .steps .step:last-child .label_mini,
.off-canvas-cart .mini_cart_info .steps .step:last-child .label_mini {
	left: auto;
	right: -3px;
	transform: none;
	text-align: right;
}

/* -------------------------------------------------- upsell panel, breathing
 *
 * Measured, after reverting the pass that made this worse: 5px between the
 * heading and the card, and a 41px dead band under it. Exactly backwards. The
 * space belongs above the card, where it separates the heading from the row,
 * not below it where nothing follows.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .expand-one h5,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .expand-one h5 {
	margin-bottom: 12px;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items,
#cart-popup .ux-mini-cart-footer .mini-cart-upsell ul.list-none,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell ul.list-none {
	padding-bottom: 0;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell {
	padding-bottom: 0;
}

/*
 * The track stood 122px tall around a 99px card, from the line box under the
 * row it holds.
 *
 * NOT display:flex on this element. It is the scroll container, and its only
 * child is the ul that holds the cards, so making it a flex parent shrank that
 * ul to 355px, removed the overflow, and the carousel stopped scrolling
 * altogether. The row itself is the ul, styled further down. Here it is enough
 * to stop the row's line box from reserving descender space.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items {
	line-height: 0;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items > ul,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items > ul {
	display: flex;
	gap: 10px;
	margin-bottom: 0;
	line-height: normal;
	vertical-align: top;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell .upsell-item,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .upsell-item {
	margin-right: 0;
	margin-bottom: 0;
}

/*
 * The row scrolls sideways only.
 *
 * overflow-x: scroll on this element makes the browser compute overflow-y as
 * auto, and its scroll height measured 105px against a 99px client height, so
 * the wheel dragged the row 6px up and down inside the panel. Nothing actually
 * overhangs the box, so hiding the vertical axis clips nothing.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell ul.list-none,
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell ul.list-none,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .side-cart__upsells-items {
	/*
	 * The 6px came from an absolutely positioned image in each card sitting at
	 * bottom:-6px, which counts towards scroll height. Hiding the axis alone
	 * would have clipped those images, so the row is given exactly the 6px they
	 * hang into: nothing is cut, and there is no longer anything to scroll.
	 */
	padding-bottom: 6px;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

/* --------------------------------------------- the strike on the was-price
 *
 * The line sat above the middle of the digits rather than through them.
 *
 * Cause: the del is 12px and the price span inside it is 13px. A line-through
 * is drawn by the element that carries the decoration, positioned from that
 * element's own font metrics, so a 12px strikeout was being drawn across 13px
 * glyphs and landed high. Nothing to nudge by hand: once both use the same font
 * size the browser puts the line where the font says it belongs.
 */
#cart-popup .mini-cart-upsell .upsell-item del .woocommerce-Price-amount,
#cart-popup .mini-cart-upsell .upsell-item del bdi,
.off-canvas-cart .mini-cart-upsell .upsell-item del .woocommerce-Price-amount,
.off-canvas-cart .mini-cart-upsell .upsell-item del bdi {
	font-size: inherit;
}

/* ------------------------------------------------- upsell block, same gutter
 *
 * Measured against every other block in the drawer: heading, item rows,
 * progress strip, checkout button and reassurance row all sit at 30px from both
 * edges. The upsell heading sat at 20px and its first card at 10px, so this one
 * block hung to the left of everything above it, which is what made the rest of
 * the drawer look pushed right.
 *
 * The panel keeps its full-bleed background: the negative margin stays and only
 * the inner padding changes, so the tint still runs edge to edge.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell {
	padding-left: 30px;
	padding-right: 30px;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell .expand-one,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .expand-one {
	padding-left: 0;
}

/* -------------------------------------------------- upsell card, inside
 *
 * Measured: the text block began at exactly the image's right edge, a 0px gap,
 * and the product name ran at 12px type on a 12px line height, so a two line
 * name closed up on itself and its first line sat flush with the top of the
 * image. Both are why the card read as unaligned and crowded.
 */
#cart-popup .ux-mini-cart-footer .upsell-item,
.off-canvas-cart .ux-mini-cart-footer .upsell-item {
	gap: 10px;
	/*
	 * align-items is deliberately left alone. Centring the row looked like the
	 * tidy thing to do and broke the card: the thumbnail is taller than the text
	 * column, and the Add to cart button is absolutely positioned at
	 * bottom:-10px, so centring pushed the image down past the panel where the
	 * overflow rule clipped it. The theme's default stretch is what keeps the
	 * image and the text starting on the same line.
	 */
}

#cart-popup .ux-mini-cart-footer .upsell-item .upsell-title,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-title {
	display: block;
	line-height: 1.3;
	margin-bottom: 1px;
}

/* the name and price column, given its own breathing room top and bottom */
#cart-popup .ux-mini-cart-footer .upsell-item .upsell-details,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-details {
	padding: 4px 0;
}

/* the thumbnail box holds its size even before the file arrives, so a card can
   never render as text with a gap where the image belongs */
#cart-popup .ux-mini-cart-footer .upsell-image img,
.off-canvas-cart .ux-mini-cart-footer .upsell-image img {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------- upsell card, long names
 *
 * The price and the Add to cart button touched whenever a product name wrapped
 * to a second line.
 *
 * Cause: the theme pins that button with position:absolute and bottom:-10px, so
 * it sits at a fixed distance from the bottom of the card while the text above
 * it flows downward. A one line name cleared it; a two line name pushed the
 * price into it.
 *
 * The button joins the normal flow instead, with the detail column as a flex
 * column, so the gap below the price is the same whatever the name does. The
 * card grows a little for a two line name rather than overlapping itself.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .upsell-details,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/*
	 * height:auto is the fix for the clipped buttons.
	 *
	 * The child theme's style.css pins this column at a fixed height:94px. That
	 * held while the Add to cart button was absolutely positioned and therefore
	 * outside the flow. With the button back in the flow the content needs more
	 * than 94px, so it spilled past the row, which clipped it: 16px lost with a
	 * one line name and 89px once the image stopped stretching.
	 *
	 * Sizing to content lets the card grow for a two line name, and the row grows
	 * with it, so the button always sits fully inside the panel.
	 */
	height: auto;
}

#cart-popup .ux-mini-cart-footer .upsell-item .upsell-item__add-to-bag--mobile,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-item__add-to-bag--mobile {
	/*
	 * relative, not static, and bottom:auto to undo the theme's offset.
	 *
	 * relative does not move an element that is already in the flow, so the
	 * layout is identical either way, but it does make this button the
	 * positioning context for its own loading spinner. With static, that spinner
	 * is absolutely positioned and anchored to the nearest positioned ancestor
	 * instead, which put it above the button rather than on it.
	 */
	position: relative;
	bottom: auto;
	/* margin is set in the compact button rule further down, which is the last
	   word on it: declaring it here as well was silently overridden. */
	flex: 0 0 auto;
}



/*
 * The thumbnail anchor is left to stretch, deliberately.
 *
 * align-self:flex-start looked like the way to stop the image dictating the card
 * height, and collapsed the anchor to 0 instead: the img inside it is absolutely
 * positioned by the theme, so the anchor has no content height of its own and
 * only the stretch gives it a box. The real fix was height:auto on the detail
 * column below, not touching the image.
 */

/*
 * NOT display:block on this span. It wraps WooCommerce's del and ins price
 * markup along with the currency switcher's own wrapper, and blocking it made
 * those children stack: the span measured 89px instead of 14px and drove the
 * card to 214px tall. line-height alone is enough.
 */


/*
 * Two lines is the ceiling for a name, so one very long title cannot make a card
 * far taller than the rest of the row. The clamp needs the -webkit- prefixed
 * box, which every current browser still implements for this.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .upsell-title,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------ upsell card, two rows
 *
 * Title across the top, price and its button sharing the row below. The card
 * height then barely moves between a one and two line product name, which is
 * what used to push the button past the panel edge.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1.25;
	font-size: 12.5px;
	/* the was and now prices belong on one line whatever the column width */
	white-space: nowrap;
}

/* the struck price steps back so the pair reads as one price, not two */
#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price del,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price del {
	font-size: 0.88em;
	color: #9a9a9a;
	margin-right: 3px;
}

#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price ins,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price ins {
	text-decoration: none;
	font-weight: 700;
}

/* a compact button now the label is one short word, with the tap target kept
   comfortable through padding rather than width */
#cart-popup .ux-mini-cart-footer .upsell-item .add_to_cart_button,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	/*
	 * auto on top pins the button to the foot of the column, so a one line name
	 * and a two line name still put their Add buttons on the same line across the
	 * row. This is the only place the button's margin is set: an earlier rule
	 * tried to pin it too and this one reset it to 0.
	 */
	margin: auto 0 0;
	/*
	 * Full width of the column and shallower: a wide thin bar reads as one clear
	 * action and hands the vertical space back to the card, where the old 78 by
	 * 34 block left the price and the title crowded above it.
	 */
	align-self: stretch;
	justify-content: center;
	padding: 7px 12px;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	border-radius: 7px;
}

/* width and height together: Flatsome sets a min-width on inline svg in places,
   which stretched the checkout tooltip icon to 24x39 before it was pinned */
#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-bag,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-bag {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	stroke-width: 1.8;
}

/* --------------------------------------------- upsell thumbnail, contained
 *
 * With the card down to 86px the thumbnail became the tallest thing in it: the
 * image is absolutely positioned by the theme at bottom:-6px with its own
 * intrinsic height, so 23px of it hung below the row and was clipped.
 *
 * A fixed square with the image cropped inside it means the thumbnail can
 * neither overflow the card nor dictate its height. align-self:center rather
 * than the default stretch, which is safe here only because the box now has an
 * explicit height of its own: without one it collapsed to zero.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .upsell-image,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-image {
	position: relative;
	/*
	 * 115px, the width the thumbnail had before it was shrunk to fit. It only
	 * needed shrinking because it was overflowing; with the image cropped inside
	 * a contained box it can be the original size without hanging past the card.
	 *
	 * stretch, not center: this box gets its height from the card, and the image
	 * inside is absolutely positioned so it contributes none of its own. Taking
	 * it out of the stretch collapsed it to zero once before.
	 */
	flex: 0 0 84px;
	width: 84px;
	/*
	 * Square, held by an explicit height rather than by stretching.
	 *
	 * align-self:stretch took its height from the card, which is driven by the
	 * text column, so the box came out 115 by 105: a rectangle that changed shape
	 * whenever the card did. A fixed square is the same whatever the name length.
	 *
	 * The explicit height is also what makes align-self:center safe here. Without
	 * one this box collapsed to zero, because the image inside is absolutely
	 * positioned and contributes no height of its own.
	 */
	height: 84px;
	aspect-ratio: 1;
	align-self: center;
	overflow: hidden;
	border-radius: 8px;
}

#cart-popup .ux-mini-cart-footer .upsell-item .upsell-image img,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .upsell-image img {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Everything in the price runs inline, and the line break is removed.
 *
 * The real cause of the two line price was a literal <br>, inserted by the
 * currency switcher inside its woocs_price_code wrapper between the old and new
 * price. A br breaks the line whatever white-space or display say, which is why
 * nowrap and inline both looked like they had no effect. Products without that
 * wrapper were already fine, which is why only two of the three broke.
 */
#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price br,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price br {
	display: none;
}

#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price,
#cart-popup .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price *,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price,
.off-canvas-cart .ux-mini-cart-footer .upsell-item .pearlory-mc-buy__price * {
	display: inline;
}

/*
 * A vertical card was tried here: image on top, name, price, then a full width
 * button, copied from a product carousel on a full width page.
 *
 * It was wrong for this context and is not coming back. In the drawer the cards
 * grew past 380px tall and the panel took the whole panel height, pushing the
 * cart items themselves out of view. A cart drawer is 375px wide and its job is
 * to show what is being bought and get to checkout; a suggestion row that
 * outsizes the cart inverts that. The horizontal card, thumbnail beside the
 * text, is what keeps this section to around 160px, and that is why cart
 * drawers use it and product grids do not.
 */

/* --------------------------------------------- a peek worth calling a peek
 *
 * Only a sliver of the second card showed, so the row did not look scrollable.
 *
 * Sizing the card to a share of the visible track rather than to its content is
 * what makes that reliable: at 62% the next card is always about half visible,
 * whatever width the drawer happens to be, instead of depending on how long the
 * product names are. The thumbnail comes down to 84px and the gap to 10px to buy
 * the width back, so the text column keeps enough room for the price on one line.
 */
#cart-popup .ux-mini-cart-footer .mini-cart-upsell .upsell-item,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .upsell-item {
	flex: 0 0 62%;
	/*
	 * min-width:0 is what makes the 62% real. A flex item defaults to
	 * min-width:auto, which refuses to go below its content's minimum size, so
	 * the card stayed 260px wide on a 315px track and only 18% of the next card
	 * showed. The detail column below needs the same release, since its own
	 * minimum was part of that floor.
	 */
	min-width: 0;
}

#cart-popup .ux-mini-cart-footer .mini-cart-upsell .upsell-details,
.off-canvas-cart .ux-mini-cart-footer .mini-cart-upsell .upsell-details {
	min-width: 0;
}