/**
 * 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;
}
/* Three scents stay on ONE row.
   The scent row is 341px wide inside the copy column, so at the 132px card above only two cards fit
   per row: 132*3 + 24px of gaps = 420px. A third scent therefore wraps to a second row, which adds
   ~150px to the popup and pushes the offer buttons past the bottom of the window on a 1280x860
   desktop: the popup grows from 770px to 942px and the buttons end 22px below the fold.
   Narrowing the cards only when a third one is present keeps the two-scent layout exactly as it was.
   100px holds all three on one row with room to spare and stays well above the ~72px width at which
   the scent label starts wrapping awkwardly. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-product-leave-in ul.tabs-variation-categories.nav.nav-pills:has(> li.tab-variation-category:nth-child(3)) li.tab-variation-category > a.rc-upsell-swatch {
		width: 100px !important;
		max-width: 100px !important;
	}
	/* Equal-height name boxes.
	   A two-word scent name wraps to two lines while the others sit on one, so the names used to
	   start at different heights across the row. Reserving two lines for every name and centring
	   the text inside that space keeps the boxes identical and lines the one-line names up with
	   the two-line one. */
	#upsellPopup.upsell-atc-product-leave-in li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-label {
		min-height: 32px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}
#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;
	}
	/* Three scents on one line, in the column beside the artwork.
	   The phone layout has its OWN <ul>, separate from the desktop one, so it is sized on its own
	   selector here — the desktop card width must not decide the phone layout, and vice versa.
	   That column is only 148-257px wide depending on the phone, so rather than a fixed card width
	   the three cards share whatever width the column has and never wrap onto a second line. */
	#upsellPopup.upsell-atc-product-leave-in .upsell-scent-row.popup-info-mobile ul.tabs-variation-categories {
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 6px !important;
	}
	#upsellPopup.upsell-atc-product-leave-in .upsell-scent-row.popup-info-mobile li.tab-variation-category {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}
	#upsellPopup.upsell-atc-product-leave-in .upsell-scent-row.popup-info-mobile li.tab-variation-category > a.rc-upsell-swatch {
		width: 100% !important;
		max-width: 100% !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 popup is placed by a script that writes a margin onto the dialog, without forcing it, so this
	   rule decides where it sits on a phone. This is the value for a SHORT phone, where the screen cannot
	   give up more room: at 68px on a 360x740 screen both buttons are still visible with 26px to spare.
	   Taller phones get more space above — see the min-height block below. */
	#upsellPopup.upsell-atc-product-leave-in .modal-dialog { margin-top: 68px !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:is(.rc-mobile-v2, .rc-mobile-v3) #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:is(.rc-mobile-v2, .rc-mobile-v3) #upsell_images > .upsell-atc-image {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) #upsell_images > .popup-info-mobile-200 {
		grid-column: 2;
		grid-row: 1;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .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:is(.rc-mobile-v2, .rc-mobile-v3) .popup-info-mobile > .popup-spacer:first-of-type {
		height: 14px !important;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .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:is(.rc-mobile-v2, .rc-mobile-v3) .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:is(.rc-mobile-v2, .rc-mobile-v3) .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:is(.rc-mobile-v2, .rc-mobile-v3) .rc-upsell-fragrance {
		margin-bottom: 30px;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .rc-upsell-fragrance .rc-fragrance-strength {
		margin-top: 6px;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .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:is(.rc-mobile-v2, .rc-mobile-v3) #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:is(.rc-mobile-v2, .rc-mobile-v3) .upsell-scent-row {
		display: contents;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .upsell-scent-row > ul.tabs-variation-categories {
		grid-column: 2;
		grid-row: 2;
	}
	#upsellPopup.upsell-atc-product-leave-in:is(.rc-mobile-v2, .rc-mobile-v3) .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 19 — DESKTOP: move the copy column clear of the popup edge. The column sat 16px from the
   right edge of the dialog while a wide unused band ran down its left, so the scent cards, the price
   and both calls to action all finished flush against the frame. Trading 40px of that left band for
   the right edge moves the column clear without making the popup wider: right edge 1097 -> 1057 at
   1440x950, column width unchanged at 341px, so nothing re-wraps and the popup does not grow.
   Asked for in review.
   Desktop only (>=768px) — the phone layouts are unaffected and still measure a 187px copy column
   at 390x844. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-product-leave-in #upsell_images > .rc-atc-copy-col {
		margin-left: 40px;
		margin-right: 40px;
	}
}

/* Item 20 — DESKTOP: hold the image column's width, so the break in the social-proof line cannot
   shrink the column it sits in. Both columns size themselves from their content, so a line break
   does not simply wrap the text — it makes the column only as wide as the longer half of the line.
   Breaking "972 Customers Have Purchased A Leave-In Conditioner This Month" after "Purchased A"
   took the column from 347px to 189px, handed the freed space to the copy column, and left the
   social-proof line wrapping onto FOUR lines inside a 170px box — the opposite of the room the
   break was asked for.
   Holding the column at the width it had before the break restores every measurement: a 347px
   image column, a 312px social-proof box, and the line reading over the two intended lines.
   Desktop only (>=768px) — the phone layouts are unaffected. */
@media (min-width: 768px) {
	#upsellPopup.upsell-atc-product-leave-in #upsell_images > .upsell-atc-image {
		min-width: 347px;
	}
}

/* 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;
	}
}

/* Phones with room to spare: sit the popup lower still (180px further down the screen than it
   originally opened). Held to screens at least 800px tall because that is what keeps BOTH buttons
   on screen — at this offset on a 360x740 screen the GET LEAVE-IN button itself would fall below
   the bottom of the screen, so short phones keep the smaller offset above. */
@media (max-width: 767px) and (min-height: 800px) {
	#upsellPopup.upsell-atc-product-leave-in .modal-dialog { margin-top: 188px !important; }
}

/* ------------------------------------------------------------------ *
 * Desktop: sit the popup higher on the screen.
 *
 * The popup is placed by a script that centres it the moment add-to-cart is clicked,
 * using the height it has AT THAT MOMENT. The product artwork has not loaded yet, so the
 * popup is measured 186px shorter than it ends up being, and the position it is given is
 * 93px too low — the same 93px at every window height, since both halves of the
 * calculation move together. The bottom button then sits close to the fold on a laptop.
 *
 * The script writes that position straight onto the element, which no stylesheet can
 * outrank, so the correction is applied as a shift instead. Only above 800px of window
 * height, where there is room to move up; shorter windows keep the script's position.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (min-height: 800px) {
	#upsellPopup.upsell-atc-product-leave-in .modal-dialog {
		transform: translateY(-93px) !important;
	}
}

/* Item 18 — rc-mobile-v3: the phone refinements from the design review.
   v3 inherits every placement rule from v2 above (the shared selectors match both), and adds only
   what the review asked for, so v1 and v2 render exactly as before and the store can move between
   the three with one setting:

     wp option update rc_upsell_atc_mobile_layout rc-mobile-v3

   a. the subtitle moves out of the full-width header and sits beside the bottle, in sentence case
   b. the scent names fit on one line, so the three cards are the same height
   c. fragrance description and strength sit side by side across the full width of the popup, with
      the strength word under its meter

   DESKTOP IS UNTOUCHED: everything here is inside max-width:767px. */
@media (max-width: 767px) {
	/* a. the header keeps the offer line only; the subtitle beside the bottle takes over. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .upsell-body-header .popup-info-mobile .logo-header-medium {
		display: none !important;
	}
	#upsellPopup.upsell-atc-product-leave-in .rc-atc-subtitle-beside {
		display: none;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-subtitle-beside {
		display: block;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-subtitle-beside .logo-header-medium {
		margin: 0 0 8px !important;
		text-align: center;
		text-transform: none !important;
		font-size: 17px !important;
		line-height: 21px !important;
		font-weight: 700 !important;
		color: #1b2a63 !important;
	}

	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .upsell-scent-row.popup-info-mobile li.tab-variation-category > a.rc-upsell-swatch {
		padding: 4px !important;
	}
	/* b. the short names fit on one line at this size, and every name box is two lines tall with the
	   name centred in it, so the three cards match each other whatever the name length. Forcing one
	   line is deliberately NOT done: the longest name needs about twice the card width, so it would
	   spill out of the card on a 351px phone. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .upsell-scent-row.popup-info-mobile li.tab-variation-category > a.rc-upsell-swatch .rc-upsell-swatch-label {
		font-size: 11px !important;
		line-height: 14px !important;
		min-height: 28px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		/* the card centres its children, which lets a child size to its own text and spill past the
		   card edge — stretching the name box to the card width is what makes a long name wrap. */
		align-self: stretch !important;
		width: 100% !important;
	}

	/* c. description and strength, side by side across the whole popup.
	   The block is mounted into .rc-atc-fragrance-wide by the fragrance script in this layout; the
	   container is placed on its own grid row because the artwork spans rows 1-2 and an explicitly
	   placed item is not moved out of an occupied cell. */
	#upsellPopup.upsell-atc-product-leave-in .rc-atc-fragrance-wide {
		display: none;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide {
		display: block;
		grid-column: 1 / -1;
		grid-row: 3;
		width: 100%;
		margin-top: 4px;
		/* the offer buttons follow immediately after this row, so the breathing room before them is
		   set here rather than on the footer, which is shared with the other layouts. */
		margin-bottom: 16px;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-upsell-fragrance {
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto;
		column-gap: 16px;
		align-items: start;
		align-content: start;
		text-align: left !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-fragrance-desc {
		grid-column: 1;
		/* the description is taller than the strength label, and while it sat on row 1 only it set
		   that row's height and pushed the meter ~40px below its own label. Spanning the three rows
		   lets each strength line sit directly under the one above it. */
		grid-row: 1 / span 3;
		margin: 0 !important;
	}
	/* the label, meter and word are laid out as one column: the <p> steps out of the way so its
	   label and word can be ordered around the meter, which is a sibling of the <p>. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-fragrance-strength {
		display: contents !important;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-fragrance-strength .rc-fragrance-label {
		grid-column: 2;
		grid-row: 1;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-fragrance-dots {
		grid-column: 2;
		grid-row: 2;
		margin: 6px 0 0 !important;
		text-align: left !important;
	}
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 .rc-atc-fragrance-wide .rc-fragrance-strength .rc-fragrance-value {
		grid-column: 2;
		grid-row: 3;
		margin-top: 2px;
	}
	/* The copy under the scent cards is hidden so the text is not shown twice — but ONLY once the
	   full-width copy actually exists. Hiding it unconditionally means that if the script that fills
	   the full-width container is an older cached copy, the description and strength disappear from
	   the popup altogether. Tying the hide to the presence of the full-width block keeps this layout
	   safe against a stale script: worst case the text shows in its old place. */
	#upsellPopup.upsell-atc-product-leave-in.rc-mobile-v3 #upsell_images:has(.rc-atc-fragrance-wide .rc-upsell-fragrance) .upsell-scent-row.popup-info-mobile .rc-upsell-fragrance {
		display: none !important;
	}
}

/* Item 21 — MOBILE: breathing room above "SPECIAL ONE TIME OFFER!". The heading was sitting hard
   against the top of the popup: measured at 390x844 and 360x740, its top edge was 3px ABOVE the
   modal body's own top (margin-top -3.25px), while the DESKTOP copy of the same heading carries
   30px of margin plus a 2px spacer above it. The template prints the heading twice, in separate
   wrappers (.popup-info-desktop / .popup-info-mobile), so the phone one can be padded on its own
   without a layout class and without touching the desktop one.
   10px on the mobile wrapper: the gap goes -3 -> +7 and the popup grows 632 -> 642 at 390x844
   (699 -> 709 at 360x740), with both buttons still above the fold (clearance 106 -> 96, and
   55 -> 45 on the narrow phone). Phones only (max-width 767px); desktop measured identical before
   and after (dialog 757, heading gap 32). */
@media (max-width: 767px) {
	#upsellPopup.upsell-atc-product-leave-in .upsell-body-header .popup-info-mobile {
		padding-top: 10px;
	}
}