/* rc-shop.css — Rebrand shop surface (/shop/, WP page 8786245).
 *
 * Styles template-parts/page-rebrand-shop.php in themes-shopkeeper-child. Loads only when
 * the rebrand gate is on AND we are on the shop page (see the rc-styles-shop-rebrand topic
 * in routinecos-styles.php). Plan: Routine/Projects/Rebrand Shop Page.md
 *
 * SPEC. There is no shop comp in the Website Style Guide — confirmed 2026-09-01. The card is
 * the style guide's Desktop Homepage "BESTSELLERS SECTION" (node 3:1078), which is the same
 * component: cards 216×312 at a 232px pitch (⇒ 16px gutter) inside a 912px content width,
 * CTA 2 Button White at 192×44, DESKTOP/PRODUCT TITLE Jost Medium 16/22. Mobile bestsellers
 * (57:993) are 2-up at 168px wide in a 360 canvas.
 *
 * WHY THIS DUPLICATES rc-home.css RATHER THAN SHARING IT
 * The bestsellers rules in rc-home.css are all scoped `.rc-home-bestsellers …`, and
 * rc-home.css is enqueued ONLY on the front page (the rc-styles-home gate is
 * is_front_page() || is_page('home-v2-rebrand')). So none of it — including
 * .rc-section-heading — reaches /shop/. Re-scoping the shared parts into rc-home.css would
 * make a front-page sheet load site-wide. Lifting the ~40 lines we need is the smaller
 * change. If a third surface needs this card, promote it to rc-brand.css then.
 *
 * SCALE: --rc-scale is the 125% desktop dial, declared on :root in rc-brand.css and applied
 * at ≥1200px site-wide. The type tokens already resolve through it; the fixed-px geometry
 * here has to multiply through it explicitly or the cards stay 1.0× while their text grows.
 */

/* ===================== SECTION ===================== */

/* One width for the whole surface: filters and grid both measure from it.
   Deliberately NOT multiplied by --rc-scale. The dial (1.25 at >=1200px) is a TYPE zoom;
   applying it to the container too made the grid 1250px on a 1440 desktop — wider than the
   shell's own nav (912 * 1.25 = 1140px), so the products ran past the header they sit under.
   A fixed cap keeps the grid inside the shell at any viewport while the type still scales. */
.rc-shop {
	--rc-shop-max: 900px;
	background: var(--rc-white);
	padding: 40px 20px 64px;
}

/* Lifted from rc-home.css's shared section heading (front-page-gated, so not available
   here). !important matches it: the theme's header.php carries a brandon font-family
   !important wall that otherwise wins on headings. */
.rc-shop__heading {
	font-family: var(--rc-font) !important;
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h2-size);
	line-height: var(--rc-text-h2-lh);
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--rc-navy);
	text-align: center;
	margin: 0 0 24px;
}

.rc-shop__empty {
	text-align: center;
	color: var(--rc-navy);
	font-family: var(--rc-font);
}

/* ===================== FILTER TABS ===================== */
/* Type is the style guide's DESKTOP / PRIMARY MENU BAR (Jost Medium 12/14, 4% tracking) —
   the same ramp as the nav, so the tabs read as navigation rather than as buttons. */

.rc-shop__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: var(--rc-shop-max);
	margin: 0 auto 40px;
	padding: 0;
	list-style: none;
}

/* Boxed, matching the PDP review-tag chips: 1px navy outline at rest, filled navy when
   active. box-shadow rather than border carries the outline so the box does not resize
   between states, and it needs !important to beat the global `*{box-shadow:none!important}`
   reset a theme/snippet applies. */
/* Selectors are doubled (0,2,0) throughout this file's <button> styling. The parent theme
   ships Foundation's defaults — `button,.button{background:#008CBA}` and
   `button:hover,button:focus{background:#007095}` — and shopkeeper-theme-01.css loads AFTER
   our sheet, so a single class ties on specificity and LOSES on source order. Doubling is
   the same guard rc-buttons.css uses for .rc-btn.rc-btn. Without it, any focused or hovered
   control here paints Foundation teal. */
.rc-shop__filter.rc-shop__filter {
	appearance: none;
	background: var(--rc-white);
	border: 0;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(5, 38, 79, 0.35) !important;
	cursor: pointer;
	padding: 10px 16px;
	margin: 0;                      /* the theme sets button{margin-bottom:20px} — see the
	                                   PDP frequency-dropdown gap, same trap */
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-menu-size);
	line-height: var(--rc-text-menu-lh);
	letter-spacing: var(--rc-text-menu-track);
	text-transform: uppercase;
	color: var(--rc-navy);
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
}

.rc-shop__filter.rc-shop__filter:hover,
.rc-shop__filter.rc-shop__filter:focus,
.rc-shop__filter.rc-shop__filter:focus-visible {
	opacity: 1;
	background: var(--rc-white);
	color: var(--rc-navy);
	box-shadow: inset 0 0 0 1px var(--rc-navy) !important;
}

.rc-shop__filter.rc-shop__filter[aria-pressed="true"] {
	opacity: 1;
	background: var(--rc-navy);
	color: var(--rc-white);
	box-shadow: inset 0 0 0 1px var(--rc-navy) !important;
}

/* ===================== GRID ===================== */
/* 2-up, matching the live shop rather than the Figma bestsellers row.
   The bestsellers card is 216px because four sit in a 912px homepage section; here the grid
   IS the page, and these cards carry a star line, up to two selects and two buttons. At
   216px that stack does not fit. Two columns in a 1000px track gives ~492px cards and the
   large product imagery Daniel asked for (2026-09-01), while keeping the card's internal
   proportions — type ramp, button metrics, 16px gutter — on the style guide. */

.rc-shop__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Column gap shares the same clamp as the >=1200px block so the two ranges meet without a
	   step at the breakpoint — below 1200 the 6vw term simply resolves smaller. Was a flat 16px,
	   which is the "too little" end Daniel flagged. */
	row-gap: 56px;
	column-gap: clamp(32px, 6vw, 96px);
	max-width: var(--rc-shop-max);
	margin: 0 auto;
}

.rc-shop__grid .rc-product-card {
	width: auto;
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative;   /* anchors the hover wash below */
}

/* Grey hover wash, ported from the live shop (2026-09-10 #52: "Can we add hover over impact
   that we have on current site here?"; meeting note: "Grey hover effect on grid like current
   site"). The value is the legacy one verbatim — `rgba(42, 49, 66, 0.04)` from custom-css-js
   snippet 703799301 "RO86 styles", `.archive .site-content .products > li:hover` — rather than
   a new grey invented to look similar.

   Drawn as a ::before rather than a background on the card because the legacy `li` carried
   padding and ours does not: the wash needs to extend past the content to read as a panel, and
   doing that with padding would resize every card and undo the 85% width measured for #2.
   `inset` negative + `z-index: -1` keeps it behind the card's own content and changes no
   geometry. The 20px it resolves to at the desktop dial sits well inside the 86px column gap
   and 70px row gap, so neighbouring washes cannot touch. */
.rc-shop__grid .rc-product-card::before {
	content: "";
	position: absolute;
	inset: calc(-16px * var(--rc-scale));
	background: rgba(42, 49, 66, 0.04);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}
/* No fade, deliberately. The legacy rule is a bare `background:` swap with no transition, so
   snapping IS the effect being ported. A `transition: opacity` was tried and is also pointless
   here: something later in the cascade forces `transition-property: none` on this pseudo — the
   duration survives but the property does not — so it would have to win a specificity fight to
   do nothing the original did. */
.rc-shop__grid .rc-product-card:hover::before,
.rc-shop__grid .rc-product-card:focus-within::before {
	opacity: 1;
}

/* Hidden by the filter script. Attribute-driven, so the markup stays declarative and the
   grid needs no inline styles.

   Scoped to .rc-shop__grid and placed AFTER the rule above on purpose: a bare
   `.rc-product-card[hidden]` has the same (0,2,0) specificity as
   `.rc-shop__grid .rc-product-card`, so that display:flex would win on source order and the
   filter would silently do nothing. The UA stylesheet's [hidden]{display:none} loses to any
   author display rule for the same reason. */
.rc-shop__grid .rc-product-card[hidden] {
	display: none;
}

/* Square, fluid to the column. aspect-ratio (not a fixed height) keeps the tile square at
   every breakpoint now that the card width is a grid fraction rather than a fixed 216px. */
.rc-shop__grid .rc-product-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* height:100% (not the flex item's) resolves reliably here because the parent is a plain
   block with a definite 216px height — the same fix rc-home.css needed for tall bottles. */
.rc-shop__grid .rc-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}

.rc-shop__grid .rc-product-card__title {
	font-family: var(--rc-font) !important;
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-product-size);
	line-height: var(--rc-text-product-lh);
	letter-spacing: 0;
	text-transform: none;
	color: var(--rc-navy);
	margin: 16px 0 8px;
	/* Bottom-align the name in a reserved 2-line box so prices share a baseline across
	   cards regardless of 1- vs 2-line names (same as home). */
	min-height: calc(44px * var(--rc-scale));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* The title is a link here (home's is plain text) — it must not inherit the theme's
   underlined-red anchor styling. */
.rc-shop__grid .rc-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.rc-shop__grid .rc-product-card__title a:hover,
.rc-shop__grid .rc-product-card__title a:focus-visible {
	text-decoration: underline;
}

.rc-shop__grid .rc-product-card__price {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);   /* comp "Desktop/Price" is 400; title is 500 */
	font-size: calc(14px * var(--rc-scale));
	line-height: 18px;
	color: var(--rc-navy);
	margin: 0 0 16px;
}

/* WooCommerce Subscriptions appends "/ month" in its own span. 13 of the 14 tiles are
   subscription variations, so this is the norm here, not an edge case — de-emphasise it so
   the amount still reads as the price. */
.rc-shop__grid .rc-product-card__price .subscription-details {
	font-size: calc(12px * var(--rc-scale));
	opacity: .75;
	white-space: nowrap;
}

/* ===================== SCALE (≥1200px) ===================== */
/* --rc-scale becomes 1.25 here (rc-brand.css, site-wide). The type tokens re-resolve on
   their own; the fixed-px geometry above does not, so it is restated through the dial. */

@media (min-width: 1200px) {
	/* Match the shell column (2026-09-09: "we want the column to be the full width of the top
	   nav"). MEASURED at 1440 before the change: the nav's inner box ran 150..1290 (1140 wide)
	   while the filters and grid ran 270..1170 (900) — 120px short on each side.
	   The note on --rc-shop-max above is still right that the dial is a TYPE zoom, but it drew
	   the wrong conclusion: the NAV scales too. `#rc-header .rc-primary-nav__inner` is
	   `calc(912px * var(--rc-scale))` from this same 1200px breakpoint (rc-shell.css:338), so a
	   flat 900px did not keep the grid inside the nav — it left it 240px narrower. Matching that
	   expression exactly means the two can never drift, at any dial value.
	   Below 1200px both are 900px already, so only this breakpoint was wrong; the 601-1199px
	   tablet cap of 760px is a deliberate card-fitting call and is left alone. */
	/* ⚠️ SUPERSEDED 2026-09-10 by #2 ("This feels very wide to me", with the reply "This is 85%
	   width"; meeting note: "Images are large - make the column at 85% of the width"). The
	   full-nav match described above shipped on 09-09 in response to the OPPOSITE ask — the v2
	   Figma thread #97 "Expand width to go as wide as header elements" — so this is a deliberate
	   partial revert, not a regression. Check the date before "restoring" the full width.
	   Kept as a factor of the same nav expression rather than a new fixed number, so the grid
	   still tracks the shell at any dial value; it now sits inside the nav instead of flush to
	   it. MEASURED at 1440: 1140 -> 969, cards 527 -> 441. */
	.rc-shop {
		--rc-shop-max: calc(912px * var(--rc-scale) * 0.85);
	}

	/* Centre channel. First attempt pinned the tracks to the cards' existing width and used
	   `space-between`, which made the channel whatever was left over — a FIXED 260px above
	   1200px, and the 16px base gap below it. Daniel saw both and called them too much and too
	   little (2026-09-09), which is the signature of a gap that is derived rather than chosen.
	   So the gap is now the thing being controlled, and the cards absorb the remainder:
	     floor  32px — below this the two columns start reading as one block
	     fluid  6vw  — the channel grows with the window, which is what "in the middle" means
	     ceiling 96px — above this the cards start looking marooned (260px was 2.7x this)
	   MEASURED consequence at 1440: channel 86px, cards 527 each (they were 440 with the fixed
	   tracks). The cards growing is the trade for a moderate channel — the row still spans the
	   full nav column either way. */
	.rc-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: normal;
		row-gap: calc(56px * var(--rc-scale));
		column-gap: clamp(32px, 6vw, 96px);
	}
}

/* ===================== TABLET ===================== */
/* Fixed-width cards in a 912px track fit 3-up at tablet widths, orphaning the last card of
   each row. Cap the track to 2 cards (2 × 216 + 16) so the grid reads as balanced pairs —
   the same call made for the home bestsellers (V5 feedback 2026-08-27). */

@media (min-width: 601px) and (max-width: 1199px) {
	.rc-shop {
		--rc-shop-max: 760px;
	}
}

/* ===================== MOBILE ===================== */
/* Figma mobile bestsellers (57:993) is 2-up. Cards go half-width and the media becomes a
   fluid square, so tiles no longer collapse to a single full-width column. */

@media (max-width: 768px) {
	.rc-shop {
		padding: 24px 16px 48px;
	}
	.rc-shop__filters {
		gap: 8px;
		margin-bottom: 24px;
	}
	.rc-shop__grid {
		gap: 32px 12px;
	}
}

/* ---- Phones: one card per row ----
   86% of orders are mobile, so this is the layout that matters most. Full-width cards,
   matching the live shop.

   Cutoff is 600px rather than the 768px used for the other mobile tweaks, so iPad portrait
   (exactly 768) keeps the two-up grid instead of rendering one ~730px card. */
@media (max-width: 600px) {
	.rc-shop__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ===================== STARS ===================== */
/* .rc-stars is the PDP's markup; its rules are in the is_product()-gated sheet, so they are
   restated here. The fill is a single clipped overlay driven by --rc-rating, which is how a
   fractional rating (4.6 → 92%) renders without half-star glyphs. */

.rc-product-card__stars {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* 2026-09-10 #3: "add 20px of padding below stars and before dropdown". Was 10px, and the
	   next element (.rc-cardsel) carries no margin-top, so this margin IS the measured gap —
	   MEASURED 10px before, 20px after. */
	margin: 0 0 20px;
	text-decoration: none;
	line-height: 1;
}
.rc-product-card__stars:hover {
	text-decoration: none;
}
.rc-product-card__stars .rc-stars__wrap {
	position: relative;
	display: inline-block;
	font-size: calc(15px * var(--rc-scale));
	letter-spacing: 1px;
}
.rc-product-card__stars .rc-stars__off {
	color: rgba(5, 38, 79, 0.18);
}
.rc-product-card__stars .rc-stars__on {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: var(--rc-rating, 0%);
	color: var(--rc-red);
	white-space: nowrap;
}
.rc-product-card__stars .rc-stars__count {
	font-family: var(--rc-font);
	font-size: calc(13px * var(--rc-scale));
	color: var(--rc-red);   /* matches the live shop's red review count (2026-09-01) */
}

/* ===================== SELECTS + ACTIONS ===================== */

.rc-product-card__form {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;   /* content-height: the card no longer stretches its form to pin CTAs */
	margin: 0;
}

.rc-card-field {
	display: block;
	margin: 0 0 8px;
}

/* Visually hidden but readable by assistive tech. Named rc-* on purpose: .screen-reader-text
   is NOT defined by this theme or its parent, so relying on it renders the label as visible
   text. */
.screen-reader-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The CTA row follows the last selector directly — it is NOT pinned to the card's bottom
   edge (2026-09-02). Cards carry a different number of dropdowns (matrix 2, flat 1, none 0),
   so `margin-top: auto` left a card like the Leave-In with ~130px of dead space between its
   one scent dropdown and its buttons, just to line the CTA rows up across the row. Buttons
   belong under the control they act on; ragged CTA baselines across a row are the accepted
   trade. */
.rc-product-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 2026-09-08 review: "Add spacing between the 2 columns ATC & Learn More from two products",
	   with the number in Moiz's Figma reply — "Add 20px between these two". Was 12px.
	   Not the same item as the grid's centre channel; this is the gap INSIDE one card. */
	gap: 20px;
	margin-top: 0;
}

/* rc-buttons.css sizes CTAs for standalone use (min-width 192px). In a two-up row inside a
   ~490px card that overflows the column, so the min-width is released and the buttons share
   the row evenly. Colors and states are untouched: --secondary is the style guide's CTA 2
   (white, 1px red outline, red label) for Learn More, --primary its CTA 1 (solid red) for
   Add to Cart. */
/* margin:0 is load-bearing, not tidying. The theme sets `button { margin-bottom: 20px }`,
   and a grid item's margin counts toward its row size — so the <button> made the row
   55 + 20 = 75px while the <a> (no such margin) stretched to fill all 75px. The result was a
   Learn More visibly taller than Add to Cart, with 20px of dead space under the button.
   Measured via CDP 2026-09-01: natural height of both is 55px. Same trap as the PDP
   frequency dropdown's phantom gap. align-self:stretch is then explicit because <button>
   does not reliably stretch as a grid item the way <a> does. */
.rc-product-card__actions .rc-btn.rc-btn {
	min-width: 0;
	width: 100%;
	margin: 0;
	align-self: stretch;
	padding-left: 8px;
	padding-right: 8px;
}

@media (max-width: 768px) {
	/* CTAs stay side by side. They were stacked when a mobile card was half the container;
	   with one card per row there is room for both, and stacking would push Add to Cart a
	   further row away from the product. */
	.rc-product-card__actions {
		gap: 10px;
	}
	.rc-cardsel__btn.rc-cardsel__btn,
	.rc-cardsel__opt {
		font-size: 14px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.rc-product-card__stars .rc-stars__wrap {
		font-size: 14px;
	}
	/* The card title steps up on mobile only: one card per row gives it the width, and at
	   16px it read small against the price beside it. --rc-text-product-size is shared with
	   the home page grids, so this overrides the size here rather than moving the token. */
	.rc-shop__grid .rc-product-card__title {
		font-size: calc(18px * var(--rc-scale));
	}
}

/* ===================== CUSTOM DROPDOWN (rc-cardsel) ===================== */
/* A native <select> cannot render a scent color dot or a right-aligned price — browsers
   strip markup inside <option> and largely ignore option styling. So this is a
   button + ul[role=listbox] + li[role=option], the same structure as the PDP's frequency
   dropdown (offer.php), so both surfaces share one interaction model.

   The menu is positioned absolutely and the card is the containing block, so an open menu
   overlays the card below instead of reflowing the grid. */

.rc-cardsel {
	position: relative;
	margin: 0 0 8px;
	text-align: left;
}

.rc-cardsel__btn.rc-cardsel__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;              /* the theme's button{margin-bottom:20px} would add phantom space */
	padding: 12px 14px;
	background: var(--rc-white);
	border: 1px solid rgba(5, 38, 79, 0.35);
	border-radius: 2px;
	box-shadow: none !important;
	cursor: pointer;
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: calc(15px * var(--rc-scale));
	line-height: 1.3;
	color: var(--rc-navy);
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}
/* Every interactive state repeated explicitly. :focus in particular has to be here — the
   control keeps focus while its menu is open, which is exactly when Foundation's
   button:focus rule painted it dark teal with white text (reported 2026-09-01). */
.rc-cardsel__btn.rc-cardsel__btn:hover,
.rc-cardsel__btn.rc-cardsel__btn:focus,
.rc-cardsel__btn.rc-cardsel__btn:focus-visible,
.rc-cardsel__btn.rc-cardsel__btn:active {
	background: var(--rc-white);
	color: var(--rc-navy);
	border-color: var(--rc-navy);
}
.rc-cardsel__btn.rc-cardsel__btn:focus-visible {
	outline: 2px solid var(--rc-navy);
	outline-offset: 1px;
}
/* Open control reads as one piece with its menu: square off the join and keep the border
   dark so the pair looks like a single bordered box, as on prod. */
.rc-cardsel.is-open .rc-cardsel__btn.rc-cardsel__btn {
	border-color: var(--rc-navy);
	border-bottom-color: rgba(5, 38, 79, 0.15);
	border-radius: 2px 2px 0 0;
}

.rc-cardsel__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Price sits inside the control, right-aligned before the caret. */
/* Regular, not medium (Round 1 #4, 2026-09-26, desktop + mobile: "Add font-weight: 400 for
   prices on Shop page. Currently price is heavier font weight than other stuff"). The standalone
   tiles' .rc-product-card__price was already 400; this control was the only 500 on the card, so
   the amount inside the dropdown read bolder than the label beside it. Changed here rather than
   appended at the end of the file because nothing later declares this property on the selector.
   One rule covers both the closed control and the open menu's options — page-rebrand-shop.php
   prints .rc-cardsel__price in both. */
.rc-cardsel__price {
	flex: 0 0 auto;
	font-weight: var(--rc-weight-regular);
	color: var(--rc-navy);
	white-space: nowrap;
}
.rc-cardsel__price .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}
/* Subscriptions' "/ month" suffix would double the control's width; the recurring term is
   shown on the PDP, which is one click away. */
.rc-cardsel__price .subscription-details {
	display: none;
}

.rc-cardsel__dot {
	flex: 0 0 auto;
	width: calc(14px * var(--rc-scale));
	height: calc(14px * var(--rc-scale));
	border-radius: 50%;
	background: transparent;
}

.rc-cardsel__caret {
	flex: 0 0 auto;
	width: 11px;
	height: 7px;
	background: currentColor;
	/* Masked chevron rather than a border triangle: it inherits currentColor and stays crisp
	   when the button color changes on hover. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .15s ease;
}
.rc-cardsel.is-open .rc-cardsel__caret {
	transform: rotate(180deg);
}

.rc-cardsel__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--rc-white);
	border: 1px solid rgba(5, 38, 79, 0.35);
	border-radius: 0 0 2px 2px;
	box-shadow: 0 8px 20px rgba(5, 38, 79, 0.12) !important;
}
.rc-cardsel__menu[hidden] {
	display: none;   /* [hidden] alone loses to any author display rule */
}

.rc-cardsel__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	cursor: pointer;
	font-family: var(--rc-font);
	font-size: calc(15px * var(--rc-scale));
	line-height: 1.3;
	color: var(--rc-navy);
}
.rc-cardsel__opt:hover,
.rc-cardsel__opt.is-selected {
	background: var(--rc-lilac);
}
.rc-cardsel__optlabel {
	flex: 1 1 auto;
}
/* A pack the selected scent is not made in. Kept in place rather than removed so the menu
   does not change length under the cursor when the scent changes. */
.rc-cardsel__opt.is-unavailable {
	opacity: .4;
	cursor: default;
}
.rc-cardsel__opt.is-unavailable:hover {
	background: none;
}

/* ===================== SUB-NAV: RETURN ON SCROLL UP ===================== */
/* 2026-09-10 #12 ("On scroll up, can we show this?") and the meeting note "Make sub nav sticky
   on scroll up only on the shop page" / mobile "Make sub nav sticky on the way up". Confirmed
   2026-09-11 as scroll-up-only; #4's "sticky whole time" was declined.

   Shop-only by construction: this sheet is enqueued on the shop template only, and the
   controller in footer-rebrand.php refuses to run unless `.rc-shop` is on the page. The PDP's
   nav behaviour (pin once, stay pinned) is untouched.

   Pinned UNDER the primary nav, at its measured height, and one step below it in z so the mega
   dropdown still covers the category row. Both customs are published by the controller:
   --rc-navh by the sticky-nav one, --rc-cath by this one. */
#rc-header.is-stuck.is-catnav-up .rc-catnav {
	position: fixed;
	top: var(--rc-navh, 0px);
	left: 0;
	right: 0;
	z-index: 1190;                       /* primary nav is 1200; drawer is 20050 */
	background: var(--rc-white);
	box-shadow: 0 2px 8px rgba(5, 38, 79, 0.06);
}

/* The spacer only takes up room while the row above is fixed. Without it the page jumps by the
   row's height the instant it leaves the flow — see the note on the markup in header-rebrand.php. */
#rc-header.is-stuck.is-catnav-up .rc-catnav__spacer {
	height: var(--rc-cath, 0px);
}

/* ===================== ROUND 4 #1 — shop card type scale (mobile) =====================
 * Business ask 2026-09-25, against a mobile screenshot: title 22px, review stars 14px, and both
 * dropdowns 18px. Measured before: title 18, stars 14 / count 13, dropdowns 15.
 *
 * APPENDED AT THE END ON PURPOSE. The `@media (max-width: 768px)` block higher up already tries
 * to set `.rc-cardsel__btn` and `.rc-cardsel__opt` to 14px and those lines are DEAD — the base
 * `.rc-cardsel__opt` / `__btn` rules are declared after it at equal specificity, so they win at
 * every width. Adding these there would have been just as inert.
 *
 * Mobile only: the base sizes are shared with the desktop grid, where cards sit several to a row
 * and are scaled by --rc-scale (1.25). Desktop currently renders 20 / 16.25 / 18.75.
 */
@media (max-width: 768px) {
	.rc-shop__grid .rc-product-card__title {
		font-size: 22px;
	}
	.rc-product-card__stars .rc-stars__wrap,
	.rc-product-card__stars .rc-stars__count {
		font-size: 14px;
	}
	/* Both the closed control and the open menu: the scent picker and the pack picker are the
	   same component, and a menu that does not match its button reads as a different control. */
	.rc-cardsel__btn.rc-cardsel__btn,
	.rc-cardsel__opt {
		font-size: 18px;
	}
}

/* ===================== ROUND 1 #2/#3 — shop card type scale (mobile) =====================
 * Business ask 2026-09-26. Same reason for living at the end of the file as the Round 4 block
 * above: the base declarations for both selectors are earlier in this sheet at equal or higher
 * specificity, so a mobile override has to come after them.
 *
 * #2 CTA labels 11px -> 12px. The 11 is --rc-text-teaser-size (rc-buttons.css), shared by every
 * .rc-btn on the site, and --rc-scale is 1 below 1200px so it renders literally. Scoped to the
 * card's action row and doubled (.rc-btn.rc-btn) to match the base rule's own specificity —
 * rc-buttons.css may enqueue after this sheet, and a single class would lose on source order.
 *
 * #3 Price 14px -> 18px, matching the 18px the Round 4 block gave the dropdowns. Only the tiles
 * with no dropdown show this element (Hair Oil, Scalp Serum); on the rest the price lives inside
 * .rc-cardsel__price, which is why the two were out of step. The nested `.subscription-details`
 * rule is left at 12px on purpose — it is more specific, and the "/ month" suffix is meant to
 * stay de-emphasised against the amount.
 */
@media (max-width: 768px) {
	.rc-product-card__actions .rc-btn.rc-btn {
		font-size: 12px;
	}
	.rc-shop__grid .rc-product-card__price {
		font-size: 18px;
	}
}