/**
 * Upsell ATC Popup — plugin presentation overrides.
 * SCOPE: #upsellPopup is SHARED by every template (leave-in, shampoo, …) — the only per-template
 * distinguisher is the wrapper class. So all rules are scoped to `#upsellPopup.upsell-atc-product-leave-in`
 * (the leave-in template's own wrapper) — they must NOT leak onto the shampoo (or any other) popup.
 * Phase-1 client feedback pass (2026-07-24): items 5/6/8 + mobile scent-selector centering.
 */

/* Item 6 — center the "SPECIAL ONE TIME OFFER!" heading + subtitle over its section. */
#upsellPopup.upsell-atc-product-leave-in .upsell-body-header,
#upsellPopup.upsell-atc-product-leave-in .upsell-body-header .popup-info-desktop,
#upsellPopup.upsell-atc-product-leave-in .upsell-body-header .popup-info-mobile {
	text-align: center;
}

/* Item 5 — make the product image larger (was width=124). Controlled bump, not auto/intrinsic
   (auto let it balloon to ~600px and blow out the popup; the theme sets max-width:none). */
#upsellPopup.upsell-atc-product-leave-in .upsell-atc-image img.upsell-img {
	width: 330px !important;
	height: auto !important;
	max-width: 100% !important;
	margin: 0 auto;
	display: block;
}
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .upsell-atc-image img.upsell-img {
		width: 220px !important;
	}
}

/* Mobile (a) — center the scent selector. The theme's max-device-width:390px rule pins the
   <ul> to width:380px (wider than the popup), so its margin:0 auto + text-align:center can't
   center it. Release the fixed width so centering takes effect. */
#upsellPopup.upsell-atc-product-leave-in ul.tabs-variation-categories.nav.nav-pills {
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	/* the <li> pills are block/floated, so text-align can't center them — use a centered
	   flex row (mirrors the 14oz PDP's own swatch <ul>). */
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	text-align: center !important;
}

/* Item 7 — reactive image-card scent swatches (rc-upsell-swatch module).
   Cards are built by js/upsell-atc-swatch.js from each tab's image + label.
   TWO LOOKS COEXIST, chosen by a variant class on the popup wrapper (emitted by the template /
   header config) so neither has to be deleted to ship the other:
     .rc-swatch-photo  product photo on a white card, scent-color selected border   (default)
     .rc-swatch-tint   white bottle svg on a scent-color card, white label bar
   Rules common to BOTH are scoped without a variant class; only what DIFFERS is variant-scoped.
   Adding a third look = one more variant block, not a fork of this section.
   Overrides the routinecos-styles modal-upsell active-bg rule (which fills the tab with --scent-color). */

/* ---- shared by every variant ---- */
#upsellPopup.upsell-atc-product-leave-in ul.tabs-variation-categories.nav.nav-pills {
	gap: 12px !important;
	align-items: stretch !important;
}
#upsellPopup.upsell-atc-product-leave-in li.tab-variation-category > a.rc-upsell-swatch {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	width: 132px !important;
	max-width: 132px !important;
	text-decoration: none;
}
#upsellPopup.upsell-atc-product-leave-in li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-img {
	display: block !important;
	width: auto !important;
	height: auto !important;
}
#upsellPopup.upsell-atc-product-leave-in li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-label {
	font-size: 14px;
	line-height: 16px;
	text-align: center;
}

/* ---- variant: rc-swatch-photo (DEFAULT) — product photo on a white card ---- */
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category > a.rc-upsell-swatch {
	align-items: center;
	gap: 4px;
	padding: 6px;
	background: #fff !important;
	border: 2px solid #e6e6e6 !important;
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-img {
	max-width: 96px !important;
	margin: 0 auto !important;
}
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-label {
	font-weight: 500;
	color: #373737 !important;
}
/* selected — scent-color border + label */
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category.active > a.rc-upsell-swatch {
	border-color: var(--scent-color) !important;
	box-shadow: 0 0 0 1px var(--scent-color);
}
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category.active > a.rc-upsell-swatch .rc-upsell-swatch-label {
	font-weight: 700;
	color: var(--scent-color) !important;
}

/* ---- variant: rc-swatch-tint — white bottle svg on a scent-colored card ---- */
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category > a.rc-upsell-swatch {
	align-items: stretch;
	gap: 0;
	padding: 0 !important;
	background: var(--scent-color, #fff) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .15s ease, transform .1s ease;
}
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-img {
	max-width: 100% !important;
	margin: 6px auto 0 !important;
}
/* white label bar at the bottom, scent-color text (matches the PDP swatch) */
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-label {
	display: block;
	width: 100%;
	background: #fff;
	color: var(--scent-color) !important;
	font-weight: 600;
	padding: 7px 4px;
}
/* selected — dark ring around the colored card */
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category.active > a.rc-upsell-swatch {
	box-shadow: 0 0 0 3px #2e3133;
}
#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category.active > a.rc-upsell-swatch .rc-upsell-swatch-label {
	font-weight: 700;
}

/* mobile — smaller card image (keep the desktop card frame). */
@media (max-width: 767px) {
	/* shared card footprint */
	#upsellPopup.upsell-atc-product-leave-in li.tab-variation-category > a.rc-upsell-swatch {
		width: 96px !important;
		max-width: 96px !important;
	}
	/* photo variant — small photo inside the padded white card */
	#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category > a.rc-upsell-swatch { padding: 5px !important; }
	#upsellPopup.upsell-atc-product-leave-in.rc-swatch-photo li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-img { max-width: 26px !important; }
	/* tint variant — the svg fills the colored card edge-to-edge */
	#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category > a.rc-upsell-swatch { padding: 0 !important; }
	#upsellPopup.upsell-atc-product-leave-in.rc-swatch-tint li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-img { max-width: 64px !important; }
	/* ---- variant-agnostic mobile polish (unchanged) ---- */
	/* remove the empty gaps/spacer elements below the content before the CTAs on mobile */
	#upsellPopup.upsell-atc-product-leave-in #upsell_images { margin-bottom: 0 !important; }
	#upsellPopup.upsell-atc-product-leave-in #upsellFooter { margin-top: 0 !important; }
	#upsellPopup.upsell-atc-product-leave-in #upsell_images .upsell-atc-image { align-self: flex-start; }
	/* collapse the stacked popup-spacer divs in the mobile price/scent column */
	#upsellPopup.upsell-atc-product-leave-in .popup-info-mobile .popup-spacer { height: 6px !important; }
	/* the framework sets an inline margin-top on the dialog — pin the popup near the top on mobile */
	#upsellPopup.upsell-atc-product-leave-in .modal-dialog { margin-top: 8px !important; }
}

/* Item 8 — social-proof line under the CTAs. */
#upsellPopup.upsell-atc-product-leave-in .upsell-social-proof {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #2e3133;
	margin: 14px auto 0;
	max-width: 90%;
}

/* Item 9 — ATC media SIZE TIERS (pick one on the popup wrapper: sm | md | lg).
   The popup artwork shares a 1200px source height but varies in WIDTH per product
   (leave-in 437x1200 vs shampoo 600x1200), so capping by width makes each product
   render a different height — the leave-in hero came out 891px tall and pushed the
   modal past the viewport. These tiers cap by HEIGHT instead, so any artwork lands
   in the same box whatever its aspect ratio, and the card footprint scales with it.
   Desktop only: below 768px the existing mobile rules already produce a compact card. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-media-sm { --atc-hero-h: 400px; --atc-swatch-h: 80px;  --atc-card-w: 104px; }
	#upsellPopup.upsell-atc-media-md { --atc-hero-h: 440px; --atc-swatch-h: 88px;  --atc-card-w: 111px; }
	#upsellPopup.upsell-atc-media-lg { --atc-hero-h: 560px; --atc-swatch-h: 110px; --atc-card-w: 132px; }
	#upsellPopup.upsell-atc-media-xl { --atc-hero-h: 640px; --atc-swatch-h: 130px; --atc-card-w: 152px; }
	/* release the fixed width the hero rule sets, or the height cap squashes the image */
	#upsellPopup[class*="upsell-atc-media-"] .upsell-atc-image img.upsell-img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: var(--atc-hero-h) !important;
	}
	#upsellPopup[class*="upsell-atc-media-"] li.tab-variation-category > a.rc-upsell-swatch {
		width: var(--atc-card-w) !important;
		max-width: var(--atc-card-w) !important;
	}
	#upsellPopup[class*="upsell-atc-media-"] .rc-upsell-swatch-img {
		width: auto !important;
		max-width: 100% !important;
		max-height: var(--atc-swatch-h) !important;
	}
}

/* Item 10 — social-proof line sits under the ARTWORK on desktop (matching the shampoo popup)
   rather than under the calls to action. The template now prints it inside the artwork column;
   the mobile layout keeps its own copy in the mobile block, so this one is hidden below 768px. */
#upsellPopup.upsell-atc-product-leave-in .upsell-atc-image .upsell-social-proof {
	margin-top: 14px;
}
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .upsell-atc-image .upsell-social-proof {
		display: none !important;
	}
}

/* Item 11 — the same size tiers on MOBILE, with their own scale.
   Phones need the artwork much smaller than desktop, so the tiers carry separate values below
   768px rather than inheriting the desktop ones. The card width has a floor of ~72px: below that
   the scent label wraps to two lines.

   TEMPLATE-AGNOSTIC BY DESIGN: the rules that APPLY the tiers match any popup carrying an
   upsell-atc-media-* class, so a second template opts in just by printing the class. A template
   that needs its own numbers overrides only the variables under its own wrapper class, which wins
   on specificity without touching these rules:

     #upsellPopup.upsell-atc-product-<name>.upsell-atc-media-md { --atc-hero-h: 260px; }
*/
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-media-sm { --atc-hero-h: 250px; --atc-swatch-h: 44px; --atc-card-w: 72px; }
	#upsellPopup.upsell-atc-media-md { --atc-hero-h: 293px; --atc-swatch-h: 50px; --atc-card-w: 72px; }
	#upsellPopup.upsell-atc-media-lg { --atc-hero-h: 340px; --atc-swatch-h: 56px; --atc-card-w: 78px; }
	#upsellPopup.upsell-atc-media-xl { --atc-hero-h: 400px; --atc-swatch-h: 64px; --atc-card-w: 86px; }
	/* release the fixed widths the per-template mobile rules set, or the height cap squashes the art */
	#upsellPopup[class*="upsell-atc-media-"] .upsell-atc-image img.upsell-img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: var(--atc-hero-h) !important;
	}
	#upsellPopup[class*="upsell-atc-media-"] li.tab-variation-category > a.rc-upsell-swatch {
		width: var(--atc-card-w) !important;
		max-width: var(--atc-card-w) !important;
	}
	#upsellPopup[class*="upsell-atc-media-"] .rc-upsell-swatch-img {
		width: auto !important;
		max-width: 100% !important;
		max-height: var(--atc-swatch-h) !important;
	}
}

/* Item 12 — on phones the scent cards sit on ONE centred row, below the artwork and copy.
   The list used to live inside the narrow right-hand column (150px), where two 72px cards plus
   the 12px gap needed 156px and wrapped onto two lines. It is now the last child of the image
   row, so it can take the full popup width. Phones only: the desktop list is a separate <ul>
   and is untouched. */
@media (max-width: 767px) {
	/* v1 ONLY: the scent row becomes a full-width third flex line. v2 re-places the same node into
	   the copy column with grid (see item 15), where these flex rules would fight the placement. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v1 #upsell_images {
		flex-wrap: wrap !important;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v1 .upsell-scent-row {
		flex: 0 0 100% !important;
		width: 100% !important;
		margin-top: 10px;
	}
	#upsellPopup.upsell-atc-product-leave-in .upsell-scent-row ul.tabs-variation-categories {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: center !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Item 13 — phone layout of the copy column.
   1) The column had a hardcoded 150px width from the legacy inline styles, so it left dead space
      on wider phones (105px unused at 414px) and squeezed the description into a very narrow
      measure. It now fills whatever the artwork leaves. NOTE the zero flex-basis: the image row
      is flex-wrap:wrap (for the scent row), so `flex: 1 1 auto` makes this column wrap onto its
      own line and the popup grows instead of tightening.
   2) Item 7 collapses every spacer in this column to 6px, which also flattened the gap between
      the description and the price. Only that first spacer is restored — the spacers are the one
      element type among these children that is a <div>, so :first-of-type isolates it. */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .popup-info-mobile-200 {
		width: auto !important;
		flex: 1 1 0% !important;
		min-width: 0 !important;
	}
	#upsellPopup.upsell-atc-product-leave-in .popup-info-mobile > .popup-spacer:first-of-type {
		height: 20px !important;
	}
}

/* Item 14 — per-scent FRAGRANCE DESCRIPTION + STRENGTH block (rc-upsell-fragrance module).
   Built by js/upsell-atc-fragrance.js after each scent list, from the tab's own data-scent-*
   attributes, on BOTH viewports (the template prints the list twice).
   Mirrors the PDP block (routinecos-experiments RO214.css) in type scale and dot size, but with
   our own class names and scoped to this template's wrapper — RO214's rules target the PDP's
   .tab-content-variation-category-wrapper, which does not exist in the popup, and its class names
   (.fragrance/.scent-label/.dots) are unscoped globals we deliberately do not join.
   COLOUR comes from --scent-color, resolved by the category-* class the module copies onto the
   block (routinecos-styles rc-tokens.css) — no colour table here. Note rose-hips is #AF1685 in
   the tokens; the older #922E97 is marked superseded there. */
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance {
	/* !important: the popup centres its copy (theme + the mobile scent-row rules), which centred the
	   description text while the dot meter — a flex row — stayed left. Left-align the whole block so
	   text and meter agree, matching the PDP block and the approved mockups. */
	text-align: left !important;
	margin: 14px 0 0;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-row {
	text-align: left !important;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-row {
	margin: 0 0 4px;
	line-height: 22px;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-label {
	color: #000;
	font-size: 16px;
	font-weight: 400;
}
/* the description sits on its own line under its label, in the scent colour (as on the PDP) */
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-text {
	display: block;
	color: var(--scent-color, #2e3133);
	font-size: 14px;
	line-height: 20px;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-strength {
	margin-top: 10px;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-value {
	color: var(--scent-color, #2e3133);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-dots {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d3d3d3;
}
#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-dot.is-on {
	background: var(--scent-color, #2e3133);
}
/* mobile — the block is the full-width last child of the scent row, under the centred cards.
   Slightly tighter type so two short lines of description do not push the CTAs below the fold
   (the modal measured 331x732 at 351px before this block existed). */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance {
		margin-top: 10px;
	}
	#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-label {
		font-size: 14px;
	}
	#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-text {
		font-size: 13px;
		line-height: 18px;
	}
	#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-strength {
		margin-top: 8px;
	}
	#upsellPopup.upsell-atc-product-leave-in .rc-upsell-fragrance .rc-fragrance-dot {
		width: 10px;
		height: 10px;
	}
}

/* Item 14b — recover the height the fragrance block costs, on DESKTOP, from the legacy dead
   spacers rather than from the block or the artwork. The baked copy column stacks fixed spacers of
   40 + 30 + 50px between the description, the price and the CTAs; the block added 117px, which
   pushed "NO - JUST CONTINUE TO CART" 4px below the fold at 1280x900 (modal 698 -> 815).
   Scoped to the spacers INSIDE #upsell_images so the header's own 2px spacer is untouched, and to
   >=768px because the mobile rules already collapse every spacer in this column to 6px. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-product-leave-in #upsell_images .popup-info-desktop .popup-spacer {
		height: 18px !important;
	}
}

/* Item 15 — TWO MOBILE LAYOUTS COEXIST, chosen by a class on the popup wrapper (emitted by the
   template from the rc_upsell_atc_mobile_layout option), so neither has to be deleted to ship the
   other and the client can flip between them with one wp-cli command:

     rc-mobile-v1   scent cards on their own full-width centred row under the artwork
     rc-mobile-v2   scent cards inside the copy column, directly under the price      (default)

   DESKTOP IS UNTOUCHED by both — every rule here lives under max-width:767px.
   NO MARKUP MOVES between the two. v2 switches the image row from flex to GRID and places the
   three existing children by area: the artwork spans both rows in column 1, the copy column takes
   row 1 of column 2, and the scent row (with the fragrance block that mounts inside it) takes row 2
   of column 2. Doing this in CSS is what keeps the swap instant — a DOM move would have to be
   re-applied on every framework re-render, and duplicating the list in the template would put the
   scent copy in a third place.
   Artwork size is deliberately NOT touched: the media tiers still own it in both layouts. */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 #upsell_images {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: start;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 #upsell_images > .upsell-atc-image {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 #upsell_images > .popup-info-mobile-200 {
		grid-column: 2;
		grid-row: 1;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .upsell-scent-row {
		grid-column: 2;
		grid-row: 2;
		width: auto !important;
		margin-top: 0 !important;
	}
	/* v2 spacer pass. The column now carries description + price + cards + fragrance block, so the
	   dead vertical space that read as "airy" in v1 reads as a gap here. 6px is the shared collapse
	   (item 7); v2 only needs the description/price gap opened enough to separate the two. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .popup-info-mobile > .popup-spacer:first-of-type {
		height: 14px !important;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .popup-info-mobile-200 .popup-spacer {
		height: 4px !important;
	}
	/* the cards centre within the column (which is ~230px at 390px — two 72px cards + the 12px gap
	   need 156px, so they stay on one row) */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .upsell-scent-row ul.tabs-variation-categories {
		justify-content: center !important;
	}
	/* the fragrance block now lives in the narrower column — keep it readable there */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .rc-upsell-fragrance {
		margin-top: 8px;
	}
}

/* Item 15b — v2 mobile vertical trim, from a measured stack at 390x844 (not by eye):
   the dot meter ended at y=576 and GET LEAVE-IN started at y=576 — ZERO gap, which read as the
   meter touching the button. The block needs its own bottom margin: the CTAs live in a different
   container (#upsellFooter), so no margin between them existed to collapse.
   The v2 spacers were already down to 14/4/4/4px at this point, so there was nothing left to win
   there — trimming the first one further only buys ~4px, and the real height is in the wrapped copy.
   NO 376px FLOOR: v2 was MEASURED shorter than the v1 placement on a narrow phone (360x740 -> 809
   vs 841), because the cards sit beside the artwork instead of adding a row. Falling back would have
   made small phones worse, so v2 applies at every phone width.
   Item 17 raised this margin from 18px to 30px, so the buttons sit a little lower - see the note at
   the end of this file, where the 12px is taken back below the buttons to keep the height identical. */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .rc-upsell-fragrance {
		margin-bottom: 30px;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .rc-upsell-fragrance .rc-fragrance-strength {
		margin-top: 6px;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .popup-info-mobile > .popup-spacer:first-of-type {
		height: 10px !important;
	}
}

/* Item 15c — OWN the copy column with our own class instead of fighting the legacy one.
   A page-level rule sets `.popup-info-mobile-200 { margin-top: 60px }` — dead space left from the
   pre-grid layout, which pushed the copy column 60px below the top of the bottle. It carries no
   !important, so a rule on OUR class under the popup id wins on specificity cleanly; the legacy
   class keeps doing its job for every other template that still relies on it, and we avoid an
   !important war over a shared class name.
   Measured on staging (360x740): 857 -> 797, and the "NO - JUST CONTINUE TO CART" button moves from
   31px BELOW the fold to 29px above it. At 390x844: 787 -> 727, copy now aligning with the bottle
   top. Mobile only — the desktop layout was measured healthy with the legacy spacing (800x749). */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 #upsell_images > .rc-atc-copy-col {
		margin-top: 0;
	}
}

/* Item 15d — on NARROW phones the fragrance panel spans the full popup width instead of sharing the
   copy column, because a 172px-wide column wrapped the description to 3-4 lines (the panel measured
   149px tall at 360, against 107px when full width). `display: contents` on the scent row promotes
   its children to grid items, so the CARDS stay in the copy column under the price — the approved
   design — while only the panel moves to its own full-width row. No markup change, no JS.
   The switch is at <=375px: measured, the panel fits the column acceptably from 376px up (390 -> 707,
   412 -> 674 with the panel in the column), while 375 and below read better full width (375 -> 721
   vs 787 in-column). So the approved in-column design holds on every mainstream phone width and only
   the genuinely narrow ones diverge.
   Measured at 360x740 together with item 15c: 857 -> 767 (27 over the fold, but BOTH calls to action
   visible with 59px clearance — only the trailing social-proof line falls below). */
@media (max-width: 375px) {
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .upsell-scent-row {
		display: contents;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .upsell-scent-row > ul.tabs-variation-categories {
		grid-column: 2;
		grid-row: 2;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v2 .rc-upsell-fragrance {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 12px;
	}
}

/* Item 16 — DESKTOP: restore the breathing room under the intro paragraph, so the fragrance panel
   ends level with the bottle. Item 14b had reduced the copy column's legacy spacers from 40/30/50px
   to 18px to make room for the fragrance panel, which left only 28px between the last line of the
   intro copy and the scent cards. 40px of padding under the intro paragraph restores that gap and
   lands the bottom of the fragrance panel at the bottle's base (panel bottom 636 against artwork
   bottom 638 at 1280x900) — the alignment asked for in review.
   Cost: the popup grows 729 -> 769. Both calls to action remain above the fold on a 1280-wide window
   down to about 745px tall (900 -> 102px clearance, 826 -> 83px, 768 -> 25px); a shorter window than
   that pushes the second button under, as it did before this change at around 705px.
   Desktop only (>=768px) — the phone layouts are unaffected and still measure 355x709 at 390x844. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-product-leave-in #upsell_images > .rc-atc-copy-col > .popup-info-desktop:first-child .text-block {
		padding-bottom: 40px;
	}
}

/* Item 17 — MOBILE: the buttons sit a little lower, at no cost to the popup's height. Asked for in
   review together with "do not make the popup larger", so the 12px is moved rather than added: the
   gap above GET LEAVE-IN goes 18px -> 30px (on the fragrance panel's bottom margin, item 15b above)
   and the gap between the second button and the social-proof line comes back 34px -> 22px.
   Measured at 390x844 before and after: popup 370x689 in BOTH cases, the buttons start 12px lower
   (510 -> 522) and the social-proof line still ends at the same point. Same result at 360x740
   (310x833 both ways). Phones only (max-width 767px); desktop untouched. */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in #upsellFooter .popup-info-mobile #go_to_paypal {
		margin-bottom: 8px;
	}
}

/* Item 18 — MOBILE: show the two prices on one line, as requested in review.
   The site-wide price styling stacks them on phones: it sets the price wrapper to `display: flex`
   below 768px and, for the vertical layout the popup asks the price shortcode for, adds
   `flex-direction: column`. Desktop already gets a single row (`inline-flex`, default direction),
   which is the look the review pointed at. This puts the phone layout back on one row inside the
   popup only - the price shortcode and every other page that relies on the stacked layout are
   untouched, and no shortcode arguments change.
   `flex-wrap: wrap` is deliberate: if a longer pair of prices ever cannot share a line, it falls back
   to today's stacked look rather than overflowing the column. The pair measures 148px against a 202px
   column at 390px wide, so there is room.
   Measured before -> after, same page load: 390x844 popup 355x709 -> 355x676; 360x740 325x749 ->
   325x727 (now within the screen); 412x915 377x674 -> 377x641. One line at all three, popup width
   unchanged, and it only ever gets SHORTER. Phones only (max-width 767px); desktop untouched. */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .popup-info-mobile span.qmidprice.entry-content {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: 10px;
	}
}