/*
 * Rebrand ATC popups. Figma yaalFsG2VY659Xgcuy35Qa.
 *
 * Scoped to our own two dialogs: #rc-atc-popup (the add-to-cart offer, inc/atc-dialog.php) and
 * #rc-pp-popup (the post-purchase offer, inc/post-purchase.php). They share this sheet because
 * they are the same card, and they never appear on the same page. `:is()` takes the specificity
 * of its most specific argument, so each rule keeps the exact id-level weight it had -- a plain
 * class selector would have dropped below the theme sheet that loads after this one, which is
 * also why the buttons carry doubled selectors (see [[rebrand-buttons-need-doubled-class]]).
 *
 * The legacy popups keep #upsellPopup and css/upsell-atc-popup.css, so the two sets cannot reach
 * each other.
 *
 * Desktop measurements come straight from the 610px frames: 57px header band, a 250px media
 * column, a 325px copy column at x=265, 44px CTAs. Mobile keeps the image/copy split and moves
 * the scent grid to full width, per frame 1026:1599.
 */

/* The dialog itself ------------------------------------------------------ *
 * showModal() puts this in the top layer, so it needs none of the modal plumbing the legacy popup
 * carries -- no z-index, no scroll lock, no backdrop div. The UA styles for <dialog> are the only
 * thing in the way: a border, padding, and a max-width/height that would crop the card. */

:is(#rc-atc-popup, #rc-pp-popup).rc-atc,
dialog:is(#rc-atc-popup, #rc-pp-popup).rc-atc {
	width: auto;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: transparent;
	max-height: 100vh;
	overflow-y: auto;    /* a scaled card on a short laptop scrolls rather than being clipped */
	overscroll-behavior: contain;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc::backdrop {
	background: rgba(5, 38, 79, .5);
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc:not([open]) {
	display: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc {
	--rc-atc-navy: #05264f;
	--rc-atc-red: #ef4036;
	--rc-atc-band: #d7f9fb;
	--rc-atc-rule: #cecece;
	--rc-atc-was: #868787;
	font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/*
 * The 125% desktop dial. Every measurement in this sheet is a raw px off the 610px frame, so
 * without this the popup renders at 1.0 while the page it covers is at 1.25 and reads small
 * against it -- rc-brand.css: "per-surface fixed-px overrides that must move with the dial live
 * in each surface's own sheet". `zoom` rather than 40 calc()s: one dial for the whole card, and
 * it scales hit areas with the layout, which transform does not.
 *
 * On the INNER box, not the dialog: the dialog owns the 100vh scroll clamp, and vh inside a
 * zoomed element resolves against a zoomed viewport. --rc-scale is 1 below 1200px, so phones are
 * untouched either way.
 */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__dialog {
	width: 610px;
	max-width: 94vw;
	margin: 40px auto;
	zoom: var(--rc-scale, 1);
}

/* One offer is shown; the page's others sit hidden beside it. */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__offer[hidden] {
	display: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__content {
	position: relative;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 10px 40px rgba(5, 38, 79, .18);
}

/* Header band ------------------------------------------------------------ */

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	padding: 14px 32px;
	background: var(--rc-atc-band);
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__title {
	margin: 0;
	color: var(--rc-atc-navy);
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: .96px;
	text-align: center;
	text-transform: uppercase;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__close,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc button.rc-atc__close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 24px;
	height: 24px;
	margin: 0;              /* the theme sets margin-bottom on every <button> */
	padding: 0;
	border: 0;
	background: none;
	color: var(--rc-atc-navy);
	font-size: 20px;
	line-height: 1;
	opacity: .55;
	cursor: pointer;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__close:hover {
	opacity: 1;
}

/* Body ------------------------------------------------------------------- */

/*
 * 20 + 235 + 10 + 325 + 20 = 610, straight off the frame. The media column SPANS EVERY ROW: with
 * the image in row 1 only, the row was as tall as the image (235px) while the copy beside it was
 * 133px, so the scent grid started ~118px below the blurb and the card ran 106px taller than the
 * 570px frame. That empty block under the bottle was the "spacing" in the 09.16 review.
 */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__body {
	display: grid;
	grid-template-columns: 235px 325px;
	grid-template-rows: auto auto 1fr;
	column-gap: 10px;
	align-items: start;
	justify-content: center;
	padding: 20px 20px 18px;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__media {
	display: flex;
	grid-row: 1 / -1;
	align-items: flex-start;   /* frame: image top aligns with the headline at y=77 */
	justify-content: center;
	height: 100%;
	min-height: 336px;   /* the frame's image box; the bottle reads at the size it was drawn */
}

/*
 * The frame crops the bottle to a 235x336 portrait; the stored photo is a 2000x2000 square with
 * the bottle centred, so `cover` reproduces the crop instead of letterboxing a small square into
 * a tall box. Cropping the sides is safe -- the subject is centred in every scent's photo.
 */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__hero {
	display: block;
	width: 235px;
	height: 100%;
	max-height: 336px;
	object-fit: cover;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__copy {
	grid-column: 2;
	padding-top: 0;
	text-align: center;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__headline {
	margin: 0 0 14px;
	color: var(--rc-atc-navy);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__price {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 15px;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__was {
	color: var(--rc-atc-was);
	font-weight: 400;
	text-decoration: line-through;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__now {
	margin-left: 10px;
	background: none;
	color: var(--rc-atc-red);
	font-weight: 600;
	text-decoration: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__blurb {
	margin: 0;
	color: var(--rc-atc-navy);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
}

/* Vitamins is not a bottle ------------------------------------------------ *
 * The rule above crops the hero to a 235x336 portrait with object-fit:cover, which is right for
 * the scent bottles -- a tall subject centred in a square photo, where trimming the sides costs
 * nothing. The supplement render is a WIDE composition: the jar, a detached cap to its left, and
 * capsules and fronds to its right. Cover chops the cap and the fronds off.
 *
 * Its own desktop frame agrees -- 1019:1167 places `ROUTINE_Hair_Supplement_Band 2` as a 235x235
 * SQUARE at y=77, not the 235x336 the shampoo art uses. So this squares the box and stops the
 * crop rather than nudging object-position, which would only trade one clipped edge for another.
 *
 * min-width guard, not an unscoped rule: this selector carries an extra class and would otherwise
 * outrank the phone blocks at the end of the file, which deliberately let the hero size itself.
 */

@media (min-width: 641px) {
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__offer--vitamins .rc-atc__hero {
		height: auto;
		max-height: none;
		object-fit: contain;
	}

	/* The media column is floored at the bottle art's 336px; the square leaves that as dead space
	   under the jar, and the copy column is shorter than it too. */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__offer--vitamins .rc-atc__media {
		min-height: 235px;
	}
}

/* Clinical stats (Scalp Serum) ------------------------------------------- */

/* Column count DERIVES from how many stats the offer config carries. It was a hardcoded
   `repeat(3, 1fr)`, and Scalp Serum -- the only offer with stats at all -- declares two, so the
   pair sat in the left two thirds with an empty third column beside them. That is what Round 2
   #1.3.4 ("center stats in the middle of this block", 2026-09-26) is looking at; the stats were
   not off-centre, the grid was one track too wide.
   auto-flow:column + auto-columns:1fr makes exactly as many equal tracks as there are children,
   so two stats span the block and the divider lands in the middle -- and a future three-stat
   offer still lays out correctly with no change here. The mobile Scalp Serum block below stacks
   them and has to say `grid-auto-flow: row` explicitly now; see the note there. */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stat {
	padding: 0 6px;
	text-align: center;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stat + .rc-atc__stat {
	border-left: 1px solid var(--rc-atc-rule);
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stat-value {
	display: block;
	color: var(--rc-atc-navy);
	font-size: 28px;
	font-weight: 400;
	line-height: 32px;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stat-label {
	display: block;
	margin-top: 4px;
	color: var(--rc-atc-navy);
	font-size: 9px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: .36px;
	text-transform: uppercase;
}

/* Scent grid ------------------------------------------------------------- */

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scents {
	display: grid;
	grid-column: 2;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 12px;      /* frame: chips at x 265/377/489, rows 48px apart */
	margin: 23px 0 0;    /* frame: 23px below the blurb */
	padding: 0;
	list-style: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scent {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The chip is a <button>, and it fills its grid cell. Both matter: the old chip was an
 * <a href="#"> whose height came from its own content, so a row sized by a two-line neighbour
 * left a dead strip along the bottom of every shorter chip -- a click there selected nothing and
 * said nothing. Doubled class + explicit margin because the theme puts margin-bottom on every
 * <button> ([[theme-button-margin-bottom-20px-trap]]).
 */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scent-link.rc-atc__scent-link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 40px;
	margin: 0;
	padding: 4px 5px;
	border: 1px solid var(--rc-atc-rule);
	border-radius: 0;
	background: #fff;
	color: var(--rc-atc-scent, var(--rc-atc-navy));
	font-family: inherit;
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	letter-spacing: .3px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scent-link.rc-atc__scent-link:hover,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scent-link.rc-atc__scent-link:focus-visible {
	border-color: var(--rc-atc-scent, var(--rc-atc-navy));
	background: #fff;
}

/* Selected: the scent's own tint, no border -- Lavender & Cedar in the frame. */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scent.is-selected > .rc-atc__scent-link.rc-atc__scent-link {
	border-color: transparent;
	background: var(--rc-atc-scent-bg, #f2f2f2);
}

/* Actions ---------------------------------------------------------------- */

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__actions {
	grid-column: 2;
	margin-top: 18px;   /* frame: chips end 412, CTA starts 430 */
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta.rc-atc__cta,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline.rc-atc__decline {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;              /* the theme's blanket button margin-bottom */
	padding: 0 12px;
	border-radius: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: .39px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta.rc-atc__cta {
	border: 1px solid var(--rc-atc-red);
	background: var(--rc-atc-red);
	color: #fff;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta.rc-atc__cta:hover,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta.rc-atc__cta:focus,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta.rc-atc__cta:active {
	border-color: #d92f24;
	background: #d92f24;
	color: #fff;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline.rc-atc__decline {
	margin-top: 7px;
	border: 1px solid var(--rc-atc-rule);
	background: #fff;
	color: var(--rc-atc-navy);
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline.rc-atc__decline:hover,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline.rc-atc__decline:focus,
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline.rc-atc__decline:active {
	border-color: var(--rc-atc-navy);
	background: #fff;
	color: var(--rc-atc-navy);
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__cta[aria-busy="true"],
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__decline[aria-busy="true"] {
	opacity: .6;
	pointer-events: none;
}

:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__proof {
	margin: 16px 0 0;   /* frame: decline ends 525, proof at 541 */
	color: var(--rc-atc-navy);
	font-size: 9px;
	font-weight: 600;
	line-height: 10px;
	letter-spacing: .2px;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Claims footnote -- the line the asterisks on the stat labels point at. Optional: printed only
 * when an offer config carries `footnote`, so the offers without clinical claims are unchanged.
 * Sentence case and regular weight, against the proof line's uppercase 600 directly above it
 * (frame 1026:1812: proof text ends 590, footnote at 605).
 */
:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__footnote {
	margin: 15px 0 0;
	color: var(--rc-atc-navy);
	font-size: 8px;
	font-weight: 400;
	line-height: 10px;
	text-align: center;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 640px) {
	/* Wider card (2026-09-24 round 6 #3, "Can the modal be larger in the mobile view").
	   364px left ~29px of gutter on a 393px phone; 420/98vw lands at 385px there, so the
	   card grows and the gutter closes to 4px a side. The vw cap still governs on anything
	   narrower, so this cannot overflow. */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__dialog {
		width: 420px;
		max-width: 98vw;
		margin: 20px auto;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__title {
		font-size: 19px;
		line-height: 23px;
	}

	/* Bigger bottle (round 6 #2, "Increase size of shampoo image"). The hero is width:100% of
	   its grid column on phones, so the column IS the image size -- 45% -> 52%. Taken with the
	   wider dialog above, the artwork goes from ~164px to ~200px on a 393px phone. */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__body {
		grid-template-columns: 52% 1fr;
		grid-template-rows: auto;
		column-gap: 10px;
		padding: 14px 14px 16px;
	}

	/* Phones keep the image/copy split at the top with the grid full width beneath, so the media
	   column does NOT span the rows and the artwork is not cropped to the desktop portrait. */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__media {
		grid-row: auto;
		align-items: flex-start;
		min-height: 0;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__hero {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__copy {
		padding-top: 4px;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__headline {
		margin-bottom: 10px;
		font-size: 17px;
		line-height: 21px;
	}

	/* Grid, stats and buttons span both columns below the image/copy split. */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__scents,
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__actions {
		grid-column: 1 / -1;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stats {
		margin-top: 14px;
	}

	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__stat-value {
		font-size: 22px;
		line-height: 26px;
	}
}

/* Post-purchase on phones ------------------------------------------------ *
 * The post-purchase offer has its own mobile frames -- 1019:1082 vitamins, 1019:1207 hair oil,
 * and the matching Scalp Serum frame -- and they are a SINGLE COLUMN: copy, then the artwork
 * centred beneath it, then the buttons. The shared block above keeps the image/copy split, which
 * belongs to the ATC popup and its own frame (1026:1599, now named "OLD-Mobile-ATC Shampoo
 * Pop-Up" on the canvas). So this narrows to #rc-pp-popup rather than editing the block above.
 *
 * Same specificity as the `:is()` rules it overrides -- `:is()` takes its most specific argument,
 * so both sides are one id plus two classes -- which is why it has to come after them. Keep it
 * last in the file.
 *
 * `order` is what puts the copy first: the markup prints media, copy, actions, and the frames
 * read copy, media, actions. Each item is pinned to grid-column 1 because the desktop rules put
 * .rc-atc__copy and .rc-atc__actions in column 2, and against a one-column grid that would open
 * an implicit second column.
 */

@media (max-width: 640px) {
	#rc-pp-popup.rc-atc .rc-atc__body {
		grid-template-columns: 1fr;
		column-gap: 0;
		padding: 20px 19px 16px;
	}

	#rc-pp-popup.rc-atc .rc-atc__copy {
		order: 1;
		grid-column: 1;
		padding-top: 0;
	}

	#rc-pp-popup.rc-atc .rc-atc__media {
		order: 2;
		grid-column: 1;
		margin-top: 12px;   /* frame: blurb ends 211, artwork at 223 */
		justify-content: center;
	}

	/* 235px of a 364px frame, measured against the content box the padding above leaves. */
	#rc-pp-popup.rc-atc .rc-atc__hero {
		width: 72%;
		height: auto;
		max-height: none;
	}

	#rc-pp-popup.rc-atc .rc-atc__actions {
		order: 3;
		grid-column: 1;
		margin-top: 14px;   /* frame: artwork ends 458, CTA at 472 */
	}
}

/* Scalp Serum is the exception --------------------------------------------- *
 * Frame 1026:1812 does NOT stack like the other two: under the copy it sets the artwork and the
 * clinical stats side by side, artwork left at 198 and the stats stacked at 98, optically centred
 * against each other (artwork 214-449, stats 264-402) and with no dividers between them.
 *
 * .rc-atc__stats sits INSIDE .rc-atc__copy in the markup, so the copy box is flattened with
 * display:contents and its children are placed on the body grid directly. The alternative is
 * moving the stats out of the copy block in rc_atc_render_offer(), which would rearrange the
 * desktop DOM to serve one breakpoint. Inherited properties still pass through a
 * display:contents box, so the copy's text-align:center still reaches the headline and blurb.
 */

@media (max-width: 640px) {
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__body {
		grid-template-columns: 61% 1fr;   /* 198 of the frame's 324 content box */
		column-gap: 0;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__copy {
		display: contents;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__headline,
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__price,
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__blurb {
		order: 1;
		grid-column: 1 / -1;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__media {
		order: 2;
		grid-column: 1;
		align-self: center;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__hero {
		width: 100%;
	}

	/* grid-auto-flow is reset to `row` because the base rule now sets `column` to derive the
	   track count (see the note there). Without it the single explicit 1fr track would still
	   flow the stats sideways and this stacked phone layout would silently revert. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__stats {
		order: 2;
		grid-column: 2;
		align-self: center;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		row-gap: 34px;
		margin: 0;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__stat + .rc-atc__stat {
		border-left: 0;
	}

	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__actions {
		order: 3;
		grid-column: 1 / -1;
	}
}

/* ===================== ROUND 1 #8 — ATC shampoo popup type =====================
 * Business ask 2026-09-26. SCOPED TO THE SHAMPOO OFFER, confirmed with Daniel ("just to the
 * shampoo popup"). Everything above is written `:is(#rc-atc-popup, #rc-pp-popup) .rc-atc__…`, so
 * an unscoped bump here would have resized all five ATC offers AND both post-purchase popups —
 * the ones Round 2 gives its own, different numbers to.
 *
 * `--shampoo` is rc_atc_render_offer()'s `rc-atc__offer--<id>` for template-upsell-rebrand-
 * shampoo.php. post-purchase.php routes only serum / vitamins / hair-oil, so this offer never
 * renders inside #rc-pp-popup; the id is kept in the selector anyway so the intent is legible.
 *
 * Specificity: one id + three classes beats the blocks above at one id + two, and the two
 * selectors that are already doubled up there (.rc-atc__scent-link, .rc-atc__cta) are doubled
 * here too so they win on weight rather than on being last in the file.
 *
 * LINE-HEIGHTS ARE DERIVED, not asked for. Only the sizes were specified; a line-height left
 * BELOW its new font-size clips descenders, so the three that would have (price 15<16, mobile
 * chips 12<13, mobile CTA 14<15) are carried up at their existing ratio. The mobile headline's
 * 21px still clears 18px and is left alone.
 */

/* Price: 13 -> 16px. One rule, no breakpoint — 16px is the ask on desktop AND mobile, and the
   mobile block above never overrode this element, so both widths were showing the same 13px. */
#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__price {
	font-size: 16px;
	line-height: 18px;
}

/* Desktop: scent chips 10 -> 12px, line-height 12 -> 13px (both given). */
@media (min-width: 641px) {
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__scent-link.rc-atc__scent-link {
		font-size: 12px;
		line-height: 13px;
	}
}

@media (max-width: 640px) {
	/* "We need to increase font size. Not sure why font size 12 fits here easier than it does on
	   desktop" — the phone card is 420px wide against the desktop column's 325px, so the copy
	   column is genuinely wider here and takes the larger type. */
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__headline {
		font-size: 18px;
	}
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__scent-link.rc-atc__scent-link {
		font-size: 13px;
		line-height: 14px;
	}
	/* GET EXTRA SHAMPOO and NO – JUST CONTINUE TO CART. */
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__cta.rc-atc__cta,
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__decline.rc-atc__decline {
		font-size: 15px;
		line-height: 16px;
	}
}

/* ===================== ROUND 2 — post-purchase popups =====================
 * Business ask 2026-09-26, two offers with DIFFERENT numbers for the same elements (mobile price
 * 19px on Scalp Serum, 20px on Vitamins), so every rule here is scoped to one offer inside
 * #rc-pp-popup. Nothing in this block may reach #rc-atc-popup — Round 1 #8 just gave the ATC
 * shampoo popup its own scale, and these two surfaces are now tuned independently.
 *
 * The headline COPY changes (GET 50% OFF SCALP SERUM / SAVE 25% ON OUR HAIR GROWTH VITAMINS)
 * are in the offer configs, not here. Both percentages were checked against what the popup
 * actually charges before being asserted in copy — see the notes in those files.
 *
 * Line-heights again derived where the ask gave only a size and the inherited value would have
 * fallen below it; the two Vitamins mobile ones (31px) and its margin-bottom (15px) WERE given.
 */

/* ---- Scalp Serum ---- */

@media (min-width: 641px) {
	/* #1.3.3 "Change font-size of prices to 18px" — both the struck regular and the offer price
	   live in .rc-atc__price. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__price {
		font-size: 18px;
		line-height: 21px;
	}

	/* #1.3.1 "Image is cut off. We need to use a smaller size and vertically center".
	   CAUSE: the shared desktop rule crops the hero to the 235x336 portrait the scent bottles
	   are drawn in (object-fit: cover on a 2000x2000 square source ⇒ scaled to 336 tall and
	   trimmed to 235 wide, so the sides are cut). Right for a tall bottle in a tall box; the
	   serum art is not that. Vitamins already carries the same exception a few blocks up, for
	   the same reason.
	   `contain` is what makes it "smaller" — the art fits the box instead of filling it, so a
	   square source renders 235x235 inside 336 — and align-items:center is the vertical centring;
	   the shared rule pins it to flex-start to line the bottle up with the headline. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__media {
		align-items: center;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__hero {
		height: auto;
		max-height: 100%;
		object-fit: contain;
	}
}

@media (max-width: 640px) {
	/* #1.2, every size given. Sitting after the Scalp Serum mobile block above, which declares
	   .rc-atc__headline at the same weight — these win on order, the rest on specificity. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__headline {
		font-size: 24px;
		line-height: 30px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__price {
		font-size: 19px;
		line-height: 22px;
	}
	/* "Our nourishing Scalp Serum boosts shine…" */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__blurb {
		font-size: 14px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__stat-value {
		font-size: 24px;
	}
	/* "REPORTED FULLER-LOOKING HAIR" */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__stat-label {
		font-size: 10px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__cta.rc-atc__cta,
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__decline.rc-atc__decline {
		font-size: 15px;
		line-height: 16px;
	}
}

/* ---- Hair Growth Vitamins ---- */

@media (min-width: 641px) {
	/* #2.1.2 "Change font size here to 23px" (the headline) and #2.1.3 price 18px. */
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__headline {
		font-size: 23px;
		line-height: 28px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__price {
		font-size: 18px;
		line-height: 21px;
	}

	/* #2.1.4 "Can we make width and height of pop up larger and increase size of supplement
	 * image?" — no numbers given; 720px / +36% chosen with Daniel against a sketch of the options.
	 *
	 * The dialog is an ANCESTOR of the offer, so it cannot be reached by a descendant selector
	 * from .rc-atc__offer--vitamins. :has() is how this is scoped — and it is exact here rather
	 * than merely clever, because rc_pp_render() renders exactly ONE offer into this dialog
	 * (unlike the ATC popup, which prints every eligible offer and hides all but one). So no
	 * :not([hidden]) guard is needed: if the vitamins offer is in this dialog, it is the offer.
	 *
	 * The three numbers are one arithmetic, kept in step the way the 610px frame's were:
	 *   20 + 320 + 10 + 350 + 20 = 720
	 * The media column takes the 85px the image needs (235 -> 320, +36%) and the copy column
	 * takes the remaining 25, which is what keeps the padding even — the body grid is
	 * justify-content:center, so columns summing to less than the dialog would have floated in
	 * the middle with uneven slack instead of filling it.
	 *
	 * HEIGHT comes from the media box: vitamins pins min-height to 235 (its square frame, a few
	 * blocks up) and the image is width-driven with height:auto, so raising both to 320 grows the
	 * card as well as the artwork. That is the "and height" half of the ask.
	 */
	#rc-pp-popup.rc-atc .rc-atc__dialog:has(.rc-atc__offer--vitamins) {
		width: 720px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__body {
		grid-template-columns: 320px 350px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__media {
		min-height: 320px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__hero {
		width: 320px;
	}
}

@media (max-width: 640px) {
	/* #2.3: 23px / 31px / 15px all specified outright, so nothing is derived here. */
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__headline {
		font-size: 23px;
		line-height: 31px;
		margin-bottom: 15px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__price {
		font-size: 20px;
		line-height: 23px;
	}
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__cta.rc-atc__cta,
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__decline.rc-atc__decline {
		font-size: 15px;
		line-height: 16px;
	}
}

/* ===================== ROUND 5 — 2026-09-27 =====================
 * Business ask. Numbers are Daniel's, read off his DevTools captures rather than inferred:
 * every "add Npx margin above the button" was `element.style { margin-top: Npx }` on the
 * `.rc-atc__cta` button itself, which computes to 0 today — so these ADD to the 18px (desktop)
 * / 14px (mobile) that `.rc-atc__actions` already carries, they do not replace it.
 */

@media (max-width: 640px) {
	/* #1.2 + #2.2.1 — "We can make SPECIAL ONE TIME OFFER header smaller", asked once for the
	   ATC popup and once for the post-purchase Scalp Serum, with the same two numbers both
	   times. The band is shared chrome rather than offer content, so it is set once here.
	   NOTE: that also reaches the Vitamins post-purchase popup, which was not asked for —
	   deliberate, because Scalp Serum and Vitamins are siblings in the same flow and a 30px
	   band on one with a 57px band on the other is the inconsistency, not the fix.
	   85px -> 44px (min-height 30 + 7px padding top and bottom). */
	:is(#rc-atc-popup, #rc-pp-popup).rc-atc .rc-atc__head {
		min-height: 30px;
		padding: 7px;
	}

	/* #1.1 — scent chips 13/14 -> 15/16. */
	#rc-atc-popup.rc-atc .rc-atc__offer--shampoo .rc-atc__scent-link.rc-atc__scent-link {
		font-size: 15px;
		line-height: 16px;
	}

	/* #1.3 "Change bottle size to take up space." Daniel tried `width: 125%` on the hero. That
	   does enlarge it, but measured at 390 it puts the image box at x-5 -> 225 against a copy
	   column starting at 212: 13px of an OPAQUE JPEG under the copy text, and 23px of it outside
	   the dialog's left padding. It only reads correctly because the copy's text paints over the
	   image, which is luck, not layout.
	   Filling the row and cropping instead gets a bigger bottle with neither problem. The stored
	   photo is a square with the bottle centred and dead space either side (the desktop block
	   above already crops it to a 235x336 portrait for the same reason), so `cover` spends the
	   extra height on the bottle rather than on margin. The media column already stretches to the
	   row the copy sets, so this costs no dialog height: 390px dialog stays 715px either way,
	   against 728 for the 125% version.
	   Vitamins excluded — it is a tub, not a tall bottle, and cropping its sides cuts the subject
	   (see "Vitamins is not a bottle" above). */
	#rc-atc-popup.rc-atc .rc-atc__offer:not(.rc-atc__offer--vitamins) .rc-atc__media {
		align-self: stretch;
	}

	#rc-atc-popup.rc-atc .rc-atc__offer:not(.rc-atc__offer--vitamins) .rc-atc__hero {
		height: 100%;
		max-height: none;
		object-fit: cover;
	}

	/* #2.2.2 — 30px above GET SCALP SERUM. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__cta.rc-atc__cta {
		margin-top: 30px;
	}

	/* #3.3.1 — "Can we do a line break after OUR so HAIR GROWTH VITAMINS is on next line?"
	   The break is a real newline in the offer config's headline string, not a <br>: the headline
	   is printed through esc_html() and is also reused as the hero's alt text, so markup in the
	   config would be escaped into the copy and read aloud. `pre-line` honours the newline here
	   and collapses it back to a single space everywhere else, which is why desktop is unchanged
	   and why the copy still degrades to one line if this rule ever fails to load. */
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__headline {
		white-space: pre-line;
	}
}

@media (min-width: 641px) {
	/* #2.1.1 — 20px above Get Scalp Serum. */
	#rc-pp-popup.rc-atc .rc-atc__offer--scalp-serum .rc-atc__cta.rc-atc__cta {
		margin-top: 20px;
	}

	/* #3.2.1 — 40px above GET HAIR GROWTH VITAMINS. */
	#rc-pp-popup.rc-atc .rc-atc__offer--vitamins .rc-atc__cta.rc-atc__cta {
		margin-top: 40px;
	}
}