/* rc-shell.css — rebrand header/teaser/nav/footer re-skin (M5 foundation).
   Source: Figma Desktop-Homepage comp 3:1150 (HEADER 3:1129, PRIMARY/SECONDARY NAV
   3:1121/3:1112, FOOTER 3:950). Colors sampled at native res 2026-08-04.
   GATED with rc-brand (see routinecos_styles_rebrand_gate).

   Scope: M5 = colors/type/heights on EXISTING markup. Deliberately NOT here (M6 home ship):
   - the comp's 2nd teaser bar (light-blue "FREE TRAVEL KIT…") — content/widget change;
   - centered-logo split-menu layout — likely a header template change (charter escape hatch);
   - LOVE YOUR ROUTINE sign-off lockup in footer — content addition.

   !important notes: the theme inlines font-family 'brandon-grotesque' with !important on a
   grab-bag selector list (header.php:201), and the teaser widget carries inline
   background/color styles — shell overrides below must out-rank both. Each !important names
   its target. */

/* ===================== NEW SHELL — #rc-page (M6) ===================== */
/* Rules for the rebuilt shell markup (header-rebrand.php / footer-rebrand.php). These
   coexist with the legacy re-skin rules below, which still serve gated NON-home surfaces
   that render the old header.php until they migrate to the new shell. Clean markup means
   NO !important is needed here. */

/* Top teaser bands — Figma HEADER 1:196: two stacked 24px full-bleed strips. */
#rc-header .rc-teaser__bar {
	margin: 0;
	min-height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 16px;
	text-align: center;
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	line-height: var(--rc-text-teaser-lh);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
}
#rc-header .rc-teaser__bar--primary {
	background: var(--rc-navy);
	color: var(--rc-white);
}
#rc-header .rc-teaser__bar--secondary {
	background: var(--rc-light-blue);
	color: var(--rc-navy);
}
/* The promo bar ships two strings -- the settings_orders red-bar option authors a desktop and
   a shorter mobile variant per campaign -- so both are rendered and one is revealed. */
#rc-header .rc-teaser__narrow { display: none; }
@media screen and (max-width: 768px) {
	#rc-header .rc-teaser__wide { display: none; }
	#rc-header .rc-teaser__narrow { display: inline; }
}

/* ---- Primary nav — Figma PRIMARY NAV 1:188: 3-zone row, centered logo ---- */
#rc-header .rc-primary-nav {
	position: relative;          /* anchor for the centered mega-dropdown */
	background: var(--rc-white);
}

/* ---- Sticky primary nav (2026-09-08 review) --------------------------------
   "Keep top nav sticky (not sub nav)", reference mycarpe.com/products/underarm: the two
   teaser bands and the category sub-nav scroll away and only this row stays pinned. Once
   pinned it stays pinned — this is not the upward-sticky pattern.

   The `is-stuck` class and the --rc-navh custom property are both set by the controller in
   footer-rebrand.php; see the comment there for why `position: sticky` cannot express this
   (its containing block, #rc-header, ends just below the sub-nav).

   z-index sits under the mobile drawer (see its rule below) so the drawer still covers the nav when open,
   and above the mega-dropdown's own stacking so the dropdown keeps working while pinned. */
#rc-header .rc-primary-nav__spacer { height: 0; }
#rc-header.is-stuck .rc-primary-nav__spacer { height: var(--rc-navh, 0px); }
/* Handover to the review filter chips (2026-09-09): while <html> carries .rc-nav-yielded the
   nav gives up the pinned slot so the chips are the only sticky bar. Desktop only — the chips
   are static below 769px, so the class is never set there (see rc-reviews.js).
   Collapsing the spacer in the same breath is what makes the swap invisible: the spacer sits
   immediately after the nav, so nav-leaves-flow + spacer-shrinks and nav-returns-to-flow +
   spacer-grows cancel out exactly. Document height and every offset below are unchanged. */
html.rc-nav-yielded #rc-header.is-stuck .rc-primary-nav__spacer { height: 0; }
#rc-header.is-stuck .rc-primary-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* 9000, not 1200: the cart's Subscribe & Save wrapper carries z-index 8887 (from the
	   free-gift dropdown snippets, where a `z-index: 99999` is immediately overridden by
	   `z-index: 8887` in the same block), so at 1200 the pinned row was scrolled OVER by the
	   S&S box instead of under it. Sits above 8887 and still below the mobile drawer's 20050,
	   which is the one thing that should cover the nav. */
	z-index: 9000;
	/* The row is transparent-over-page once it leaves the flow — restate the white and add a
	   hairline so it separates from whatever scrolls under it. */
	background: var(--rc-white);
	box-shadow: 0 1px 0 rgba(5, 38, 79, 0.10), 0 2px 8px rgba(5, 38, 79, 0.06);
}
/* `relative`, NOT `static`: the centred SHOP ALL mega-dropdown is absolutely positioned against
   this element, so dropping it out of the positioning context would fling the dropdown up to
   the page box. relative is also the nav's own resting value, so this is a true revert. */
html.rc-nav-yielded #rc-header.is-stuck .rc-primary-nav {
	position: relative;
	box-shadow: none;
}
#rc-header .rc-primary-nav__inner {
	max-width: 900px;            /* Figma nav content frame 1:188 = 884px; aligns w/ 900px mega-dropdown */
	margin: 0 auto;
	padding: 13px 24px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}
#rc-header .rc-primary-nav__group {
	display: flex;
	align-items: center;
	/* V5 feedback 2026-08-27: gap between the nav tabs (Shop All / Reviews, FAQs / Account / cart)
	   28 -> 50px. Literal px like the rest of the nav so it matches the reviewed size and does not
	   track --rc-scale. No mobile effect: below 768px each group holds a single visible item. */
	gap: 50px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#rc-header .rc-primary-nav__group--left  { justify-self: start; }
#rc-header .rc-primary-nav__group--right { justify-self: end; }
/* V5 feedback 2026-08-27: 2px of breathing room above and below the wordmark so it pops off the
   nav row. Declared on the anchor (the grid item) rather than the <img> — grid items establish an
   independent formatting context, so the margin can't collapse out through the anchor. The row is
   `align-items: center`, so it grows by 4px symmetrically. */
#rc-header .rc-primary-nav__logo { justify-self: center; display: block; line-height: 0; margin: 2px 0; }
#rc-header .rc-primary-nav__logo img { height: 40px; width: auto; display: block; } /* V4 2026-08-26: 30 -> 40px */

#rc-header .rc-navlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	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);
	text-decoration: none;
	white-space: nowrap;
}
#rc-header .rc-navlink:hover,
#rc-header .rc-has-dropdown:hover > .rc-navlink { color: var(--rc-red); }
/* Reviews link is permanently red (business ask 2026-08-14) — desktop primary nav + the
   mobile secondary-nav Reviews item. Same 1-class specificity as the base navlink colour but
   declared later, so it wins. */
#rc-header .rc-navlink--reviews { color: var(--rc-red); }
#rc-header .rc-navlink__caret { transition: transform .18s ease; }
#rc-header .rc-has-dropdown:hover .rc-navlink__caret,
#rc-header .rc-has-dropdown:focus-within .rc-navlink__caret { transform: rotate(180deg); }
#rc-header .rc-navlink--cart { color: var(--rc-navy); position: relative; display: inline-block; }
/* Cart icon — the Figma raster asset (already #05264F). */
#rc-header .rc-cart-icon { display: block; height: 24px; width: auto; }

/* Cart item counter — rebrand review 2026-09-08 ("Cart quantity is not appearing" /
   "Add counter to the top nav cart icon"). Colour + shape follow the LIVE site's existing
   badge (`.shopping_bag_items_number`: #ef4036 on white, pill radius) so the rebrand reads as
   the same brand element rather than a new invention. Size is the deliberate difference — the
   live badge is 18px bold against a larger legacy icon; against this 24px icon that overwhelms
   it, so the badge steps down to 11px on a 16px pill.
   Literal px, not --rc-scale: the rest of the nav is literal px on purpose (see the nav gap
   note above) so the reviewed size is what ships at every breakpoint.
   Empty state is a class, not :empty — the count text is rewritten by legacy JS that writes a
   bare "0"; the observer in header-rebrand.php keeps .is-empty in step. */
#rc-header .rc-cart-count {
	position: absolute;
	top: -5px;
	right: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--rc-red);
	color: var(--rc-white);
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}
#rc-header .rc-cart-count.is-empty { display: none; }

/* ---- SHOP ALL mega-dropdown — Figma 5:157: 4 columns × 3 rows, column-major ---- */
#rc-header .rc-shop-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: 900px;
	max-width: 96vw;
	background: var(--rc-white);
	box-shadow: 0 12px 28px rgba(5, 38, 79, 0.16);
	padding: 23px 20px 18px;                /* Figma 5:157 panel insets */
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Transparent hover bridge: the panel is centered while "Shop All" sits left, and
   there's a gap (nav padding) between them. This pseudo — part of the dropdown, which
   is a descendant of .rc-has-dropdown — fills that gap so the cursor never leaves the
   hovered subtree while travelling from the link to the panel. */
#rc-header .rc-shop-dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}
#rc-header .rc-has-dropdown:hover .rc-shop-dropdown,
#rc-header .rc-has-dropdown:focus-within .rc-shop-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity .18s ease, transform .18s ease;
}
/* SHOP mega-dropdown internals are pinned to Figma's literal px (comp 5:157 — a fixed 900px
   panel at 1.0×) so they don't inherit the homepage's 1.25 --rc-scale zoom: the panel is a
   fixed-size overlay and must match the comp 1:1. */
#rc-header .rc-shop-dropdown__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	gap: 8px 40px;                          /* Figma: 8px row / 40px column → 185px columns in the 900px panel */
}
/* Tablet (769–1199px): the panel is capped to min(900px, 96vw), and 4 columns can't fit the
   enlarged 72px tiles + non-wrapping review counts, so the 4th column spilled past the white
   panel edge. Drop to 3 columns × 4 rows (still column-major → 4/4/3) so every tile has room.
   Originally scoped to ≤899px (2026-08-25) on the assumption that a 900px panel fits 4 columns;
   V5 feedback 2026-08-27 ("Need more spacing between columns" + "Copy bleed" on Purple Toning)
   shows it does not — at 900px the panel leaves ~185px columns / ~107px of text, and V4's
   13 → 14px title bump pushed the longest names past the edge. Three columns gives ~260px
   columns (~182px of text), which fits "Purple Toning Shampoo & Conditioner" in two lines.
   ≥1200px keeps the scaled 1140px desktop panel and its 4 columns. */
@media (min-width: 769px) and (max-width: 1199px) {
	#rc-header .rc-shop-dropdown__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, auto);
	}
}
/* min-width:0 lets the grid tiles shrink below their min-content: grid items default to
   min-width:auto, so at tablet widths (dropdown capped to 96vw ≈ 787px) the 4×1fr tracks
   can't compress and the grid overflows the page to ~850px — which also stretches the
   fixed drawer's inset:0/right:0 to the widened scroll area. Letting tiles shrink fixes both.
   No effect at desktop where the 1140px dropdown leaves the tracks far above content min. */
#rc-header .rc-shop-tile { display: flex; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
/* Enlarged tiles (colleague ask 2026-08-25): bumped from the Figma 5:157 1.0× sizes
   (60px img / 11px name / 8px reviews) ~20% for a bolder desktop dropdown. Still literal px
   (the panel intentionally ignores --rc-scale); the 4-col 1140px grid has ~245px columns so
   72px img + 13px text fits comfortably without a layout change. */
#rc-header .rc-shop-tile__img {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	object-fit: contain;
}
#rc-header .rc-shop-tile__body { min-width: 0; }
#rc-header .rc-shop-tile__img--ph { background: var(--rc-lilac); }
#rc-header .rc-shop-tile__body { display: flex; flex-direction: column; gap: 4px; }
/* Name: Jost Medium navy in a fixed 2-line box so the review rows line up across a row
   regardless of 1- vs 2-line names.
   V5 feedback 2026-08-27 ("these should be vertically centered in the space? They feel a bit low
   right now"): the box was bottom-anchored (`justify-content: flex-end`), which pushed 1-line
   names — Shampoo, Bundles, Travel Size — to the bottom of the 32px box and left them sitting
   low against the 72px image. Centre instead; the review row still lines up because the box
   height is fixed either way. */
#rc-header .rc-shop-tile__name {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: 14px;   /* V4 feedback 2026-08-26: mega-menu tile title 13 -> 14px */
	line-height: 16px;
	color: var(--rc-navy);
	min-height: 32px;  /* 2 lines @ 16px lh — fixed box keeps the review rows aligned across a row */
	display: flex;
	flex-direction: column;
	justify-content: center; /* V5 2026-08-27: was flex-end (names sat low) */
}
#rc-header .rc-shop-tile:hover .rc-shop-tile__name { color: var(--rc-red); }
#rc-header .rc-shop-tile__reviews { display: inline-flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
#rc-header .rc-stars { color: var(--rc-red); font-size: 11px; letter-spacing: .5px; } /* V4 feedback 2026-08-26: 10 -> 11px */
#rc-header .rc-shop-tile__count {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: 11px;   /* V4 feedback 2026-08-26: review count 10 -> 11px */
	line-height: 15px;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--rc-red);
}
/* V5 feedback 2026-08-27 ("Increase gap here"): more air between the last tile row and the
   SHOP ALL button — 12 -> 28px. */
#rc-header .rc-shop-dropdown__cta { margin-top: 28px; text-align: center; }
/* SHOP ALL button: teaser-size label pinned to absolute px so it isn't inflated by the homepage
   1.25 zoom like the rest of the panel. V4 feedback 2026-08-26 (#30 "make wider"): widen 116 -> 220px. */
#rc-header .rc-shop-dropdown__cta .rc-btn {
	min-width: 220px;
	/* V5 feedback 2026-08-27 ("make this vertically taller"): 32 -> 44px. The V4 pass already
	   covered the "wider" half of this ask (116 -> 220px). */
	min-height: 44px;
	padding: 0 16px;
	font-size: 11px;
	letter-spacing: .03em;
}

/* ---- Secondary category row — Figma SECONDARY NAV 1:179 ----
   Desktop: centered under a hairline divider. Small screens: single row that
   slides left/right (Harry's-style) instead of wrapping. */
#rc-header .rc-catnav {
	background: var(--rc-white);
	border-top: 1px solid var(--rc-light-blue);  /* Figma mobile NAV `Vector 10` stroke = #D7F9FB (light blue), not the navy-15% hairline */ /* comp divider vector 1:187 */
}
#rc-header .rc-catnav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;  /* comp: 1st item aligns w/ SHOP ALL, last w/ cart */
	gap: 32px;
	margin: 0 auto;
	padding: 10px 24px;          /* V4 feedback 2026-08-26: sub-nav top/bottom 12 -> 10px */
	max-width: 900px;            /* match primary nav content width */
	list-style: none;
}
#rc-header .rc-catnav__item { flex: 0 0 auto; }
#rc-header .rc-navlink--cat { font-weight: var(--rc-weight-regular); }
/* V4 feedback 2026-08-26: sub-nav (secondary category) links to 14px. Scoped to the desktop row
   so the slim mobile cat row (12px) is unaffected. Absolute px (not --rc-scale) to match the
   reviewed pixel size on the scaled desktop. Michelle owns further "clearly secondary" styling. */
#rc-header .rc-catnav__item--desktop .rc-navlink { font-size: 14px; }
/* Desktop shows the product categories; the slim mobile row is hidden until the 768px bp. */
#rc-header .rc-catnav__item--mobile { display: none; }

/* Menu-bar alignment (business ask 2026-08-14): on the scaled desktop homepage the body
   sections render at 912px × 1.25 = 1140px while the nav stayed at 900px, so the menu bar
   sat narrower than the page content. Widen the primary nav + category rows to the same
   scaled column. Applied site-wide at the 1200px scale breakpoint (2026-08-18: the --rc-scale
   1.25 dial went site-wide, so every rebrand shell surface — PDP / 404 / content — scales, and
   the nav must widen to match the scaled column on all of them, not just the homepage). */
@media (min-width: 1200px) {
	:root #rc-header .rc-primary-nav__inner,
	:root #rc-header .rc-catnav__list {
		max-width: calc(912px * var(--rc-scale));
	}
	/* SHOP dropdown spans the same content column as the nav/body (business ask 2026-08-14):
	   widen it from the fixed 900px to the scaled column width so its edges line up with the
	   menu bar. It's centered under the nav, so matching the width aligns it to the column. */
	:root #rc-header .rc-shop-dropdown {
		width: calc(912px * var(--rc-scale));
	}
}

@media (max-width: 768px) {
	/* Swap the category row for the slim 3-item mobile row (Reviews / Shampoo & Conditioner /
	   Shop All, business ask 2026-08-14). Three short items → distribute across the row, no
	   horizontal scroll. */
	#rc-header .rc-catnav__item--desktop { display: none; }
	#rc-header .rc-catnav__item--mobile { display: block; }
	#rc-header .rc-catnav__list {
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: hidden;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---- Mobile hamburger + drawer (Figma 91:209 / 91:248 / 91:1026) ---- */
/* Hamburger button — hidden on desktop, shown on mobile in place of the link groups. */
#rc-header .rc-primary-nav__item--mobile { display: none; }
#rc-header .rc-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rc-navy);
	cursor: pointer;
}
#rc-header .rc-nav-toggle__bars,
#rc-header .rc-nav-toggle__bars::before,
#rc-header .rc-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
#rc-header .rc-nav-toggle__bars { position: relative; }
#rc-header .rc-nav-toggle__bars::before,
#rc-header .rc-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
#rc-header .rc-nav-toggle__bars::before { top: -7px; }
#rc-header .rc-nav-toggle__bars::after  { top: 7px; }

@media (max-width: 768px) {
	#rc-header .rc-nav-desktop { display: none; }
	#rc-header .rc-primary-nav__item--mobile { display: flex; }
	#rc-header .rc-primary-nav__inner { padding-left: 16px; padding-right: 16px; }
	/* The cart STAYS in the mobile top bar. It was hidden here from 2026-08-20 to 2026-09-08
	   ("the drawer still carries a cart link"); the 2026-09-08 rebrand review reversed that —
	   Figma "Missing CART" on MOBILE-PDP, and the meeting asked for a cart icon top-right on
	   mobile plus an item counter on it. Confirmed a deliberate reversal, not a regression
	   report (Daniel, 2026-09-08). Do not re-add a display:none here without new feedback. */
	/* Mobile logo. Figma MOBILE-PDP NAV `588:4377` draws the wordmark at 78x22; the 40px
	   height is the V4 DESKTOP size (2026-08-26) and was never re-scoped, so mobile inherited
	   it and rendered the logo at 138x40 — nearly twice the comp. Height only; width stays
	   auto, which lands at ~76px on the same artwork. */
	/* 2026-09-08 review: "Logo size to 30px" (mobile). This DEVIATES from the comp on purpose:
	   Figma MOBILE-PDP NAV `588:4377` draws the wordmark at 78x22, and 22px is what that
	   measurement produced. The meeting asked for 30 with the rendered page in front of them,
	   and the newer decision wins — noted here so the 22px is not "restored" as a comp fix. */
	#rc-header .rc-primary-nav__logo img { height: 30px; }

	/* Logo row height. The toggle is a <button>, so the theme's `button { margin-bottom: 20px }`
	   applied to it — MEASURED: a 28px control in a 48px <li> (28 + 20 of margin), which forced
	   the row to 74px AND pushed the hamburger 10px above the wordmark's centre line, since the
	   row centres on the margin box. Comp `588:4369` is a 45px row with hamburger and wordmark
	   on one centre. Zeroing the margin fixes the height and the alignment together.
	   Third instance of this trap after .rc-scent and .rc-offer__ddbtn — assume it on every
	   <button> we style. */
	#rc-header .rc-nav-toggle { margin-bottom: 0; }
	#rc-header .rc-primary-nav__inner { padding-top: 9px; padding-bottom: 9px; }

	/* Sub-nav row. Comp runs the divider at y93 to the nav bottom at y120 = 27px; ours was 48.
	   Two parts: the <li> is a block box around an inline-flex link, so it inherited a ~27px
	   LINE BOX for a 14px link (MEASURED: li 27px, link 14px, zero padding on both) — making
	   the li a flex container removes the line box entirely. Then 6px of list padding lands
	   the row at exactly the comp's 27px. */
	#rc-header .rc-catnav__item--mobile { display: flex; align-items: center; }
	#rc-header .rc-catnav__list { padding-top: 6px; padding-bottom: 6px; }

	/* Header drop shadow, MOBILE ONLY (Round 5 #1, Figma `588:4370`). The comp's shadow sits
	   on one "Background White Block" spanning the whole NAV frame `588:4369` — 72px = the
	   45px logo row plus the 27px sub-nav — so it casts off the BOTTOM OF THE SUB-NAV, not
	   off the logo row, and .rc-catnav is the element whose bottom edge is that line.
	   The value is measured off the Figma render, not read off the node: the layer carries
	   `0 4px 4px rgba(0,0,0,0.5)` at 10% LAYER opacity, and Figma multiplies the two, so the
	   shadow lands at 5% — the rendered peak is #F2F2F2 on white, alpha 0.051, fading out 7px
	   down. Taking the node's 0.5 at face value would have been ten times too dark.
	   Left off #rc-header on purpose: that element also wraps the teaser bars and the drawer,
	   so its box is not the comp's block. On the shop page the pinned state
	   (`.is-stuck.is-catnav-up`, rc-shop.css) sets its own shadow and still wins on
	   specificity, which is the behaviour we want while the row is floating.
	   !important beats the global `*{box-shadow:none!important}` — MEASURED via
	   CSS.getMatchedStylesForNode, which showed that rule winning and the computed value
	   coming back `none` with the plain declaration in place. Same trick, and the same
	   reason, as .rc-btn--primary:active in rc-buttons.css. */
	#rc-header .rc-catnav { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05) !important; }
}

/* Drawer — slides from the left. `hidden` attr is the no-JS fallback; once JS removes it,
   these visibility/transform rules govern. */
/* 20050, not 2000: the cart's subscription dropdown is raised to 19999 by custom-css-js
   snippet 703271880 (body.woocommerce-cart.shop-dropdown-opened tr.shop-dropdown-row-opened,
   and the .revive-eo-wrapper-cart-subscription inside it). At 2000 the Subscribe & Save box
   painted straight through the open mobile menu on /cart/. The drawer is a modal overlay --
   whatever the page has raised, it belongs on top. Raised here rather than lowering 19999
   because that snippet is shared with production. */
#rc-header .rc-drawer {
	position: fixed;
	inset: 0;
	z-index: 20050;
	visibility: hidden;
	transition: visibility 0s linear .28s;
}
#rc-header .rc-drawer.rc-drawer--open { visibility: visible; transition: visibility 0s; }
#rc-header .rc-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 38, 79, 0.45);
	opacity: 0;
	transition: opacity .28s ease;
}
#rc-header .rc-drawer--open .rc-drawer__backdrop { opacity: 1; }
#rc-header .rc-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: min(340px, 86vw);
	background: var(--rc-white);
	box-shadow: 0 0 40px rgba(5, 38, 79, 0.2);
	transform: translateX(-100%);
	transition: transform .28s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 18px 34px;               /* comp: 18px side gutter, SHOP row ~top */
}
#rc-header .rc-drawer--open .rc-drawer__panel { transform: translateX(0); }
#rc-header .rc-drawer__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;                           /* keep the X above the SHOP toggle row */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;                          /* full 44px tap target: taps near the X used to fall on the
	                                         full-width SHOP toggle underneath and expand the accordion */
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #6E6B6B;                       /* darker grey X — same hue, slightly darker (homepage feedback 2026-08-20; was #B4B1B1) */
	cursor: pointer;
}
/* SHOP sits on the same line as the close X (design ask 2026-08-25): no top reserve, so the
   first nav row (SHOP toggle) aligns with the X. The X is an absolutely-positioned 44px button
   with z-index above the row, so taps on it still hit Close rather than the full-width toggle. */
#rc-header .rc-drawer__nav { margin-top: 0; }
#rc-header .rc-drawer__shop-toggle,
#rc-header .rc-drawer__link {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	/* Uniform row height (mobile menu polish 2026-08-25): the old asymmetric 6/14 padding made
	   the SHOP block read taller than the rest and the 24px cart icon taller again, so the
	   light-blue dividers were unevenly spaced. A fixed min-height with centered content makes
	   every row — text and the cart icon alike — the same height, so the dividers are uniform. */
	min-height: 48px;
	padding: 0;
	margin: 0;                            /* reset the parent theme's global button{margin-bottom:20px}
	                                         — it leaked onto the SHOP <button> (not the <a> links),
	                                         adding a phantom 20px gap above Reviews (mobile menu 2026-08-25) */
	border: 0;
	border-bottom: 1px solid var(--rc-light-blue);  /* comp: light-blue divider, not grey */
	background: none;
	color: var(--rc-navy);
	text-decoration: none;
	cursor: pointer;
	font-family: var(--rc-font);
	/* Bold + uniform: the SHOP <button> rendered lighter than the <a> links at medium weight,
	   so SHOP read "not bold". Semibold on the shared selector makes them match and reads bold. */
	font-weight: var(--rc-weight-semibold);
	font-size: 16px;                      /* base menu item size bumped to 16px (business ask) */
	line-height: 1.25;
	letter-spacing: var(--rc-text-menu-track);
	text-transform: uppercase;
}
/* Make the UA [hidden] collapse explicit so the closed SHOP accordion never adds a stray gap
   between the SHOP row and Reviews. */
#rc-header .rc-drawer__shop-panel[hidden] { display: none; }
#rc-header .rc-drawer__shop-caret {
	transform: rotate(-90deg);            /* collapsed: points right (›) */
	transition: transform .18s ease;
}
#rc-header .rc-drawer__shop-toggle[aria-expanded="true"] .rc-drawer__shop-caret {
	transform: rotate(0deg);              /* expanded: points down (⌄) */
}
#rc-header .rc-drawer__tiles {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 0;
}
#rc-header .rc-drawer__cta {
	display: flex;
	width: 100%;
	justify-content: center;
	margin: 6px 0 14px;
}
body.rc-drawer-open { overflow: hidden; }

/* ---- Rebrand footer (Figma FOOTER 1:17) — navy, centered column ---- */
#rc-footer {
	background: var(--rc-navy);
	color: var(--rc-white);
	padding: 48px 20px 40px;
}
#rc-footer .rc-footer__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
#rc-footer .rc-footer__heading {
	font-family: var(--rc-font) !important; /* beats theme brandon-grotesque `h2{...!important}` */
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h2-size);
	line-height: var(--rc-text-h2-lh);
	text-transform: uppercase;
	color: var(--rc-white);
	margin: 0 0 8px;
}
#rc-footer .rc-footer__sub {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-sub-size);
	line-height: var(--rc-text-sub-lh);
	color: var(--rc-white);
	margin: 0 0 24px;
}
/* signup form — white input above a full-width red button (comp: 445px column) */
#rc-footer .rc-footer__form { max-width: 445px; margin: 0 auto; }
#rc-footer .rc-footer__email {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: var(--rc-white);
	color: var(--rc-navy);
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 12px;
}
#rc-footer .rc-footer__email::placeholder { color: var(--rc-navy); opacity: 1; }
#rc-footer .rc-footer__submit { width: 100%; }
#rc-footer .rc-footer__consent {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-signoff-size);
	line-height: var(--rc-text-signoff-lh);
	letter-spacing: var(--rc-text-signoff-track);
	color: var(--rc-white);
	margin: 0;  /* business ask 2026-08-14: drop the top margin */
}
#rc-footer .rc-footer__consent a { color: var(--rc-white); text-decoration: underline; }
/* social icons — Figma social SVGs, masked to white (source color varies) */
#rc-footer .rc-footer__socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
}
#rc-footer .rc-social {
	display: block;
	height: 26px;
	background-color: var(--rc-white);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-position: center;  mask-position: center;
}
#rc-footer .rc-social:hover { background-color: #92d5eb; } /* comp hover blue */
#rc-footer .rc-social--tiktok    { width: 23px; -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-tiktok.svg');    mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-tiktok.svg'); }
#rc-footer .rc-social--instagram { width: 26px; -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-instagram.svg'); mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-instagram.svg'); }
#rc-footer .rc-social--facebook  { width: 14px; -webkit-mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-facebook.svg');  mask-image: url('../../../themes/shopkeeper-child/images/rebrand/icon-social-facebook.svg'); }
/* footer menu */
#rc-footer .rc-footer__menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}
#rc-footer .rc-footer__menu a {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	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-white);
	text-decoration: none;
}
#rc-footer .rc-footer__menu a:hover { color: #92d5eb; } /* Figma footer-link hover overlay */
/* LOVE YOUR ROUTINE sign-off lockup — centered text with a rule on each side */
#rc-footer .rc-footer__signoff {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 36px 0 20px;
}
#rc-footer .rc-footer__signoff::before,
#rc-footer .rc-footer__signoff::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
}
#rc-footer .rc-footer__signoff span {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-signoff-size);
	line-height: var(--rc-text-signoff-lh);
	letter-spacing: var(--rc-text-signoff-track);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--rc-white);
}
#rc-footer .rc-footer__disclaimer {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-footnote-size);
	line-height: var(--rc-text-footnote-lh);
	color: var(--rc-white);
	max-width: min(640px, 100%);   /* business ask 2026-08-14: wider block, ~5 lines tall (was 326px); min() so it still fits the mobile viewport instead of overflowing */
	margin: 0 auto;
}
/* Copyright line beneath the disclaimer (business ask 2026-08-14) — see the meeting screenshot. */
#rc-footer .rc-footer__copyright {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-signoff-size);
	line-height: var(--rc-text-signoff-lh);
	letter-spacing: var(--rc-text-signoff-track);
	color: var(--rc-white);
	margin: 20px 0 0;
}

/* ===================== LEGACY RE-SKIN (M5) — old header.php markup ===================== */
/* TEASER BAR — fights: inline style on .topbar-sticky-routinecos widget markup (#000237 bg) */
.topbar-sticky {
	background-color: var(--rc-navy) !important;   /* inline widget style */
	color: var(--rc-white) !important;             /* inline widget style */
	font-family: var(--rc-font) !important;        /* header.php:201 brandon-grotesque */
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	line-height: var(--rc-text-teaser-lh);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
	padding: 5px 0 !important;                     /* inline widget style (3px) */
}
.topbar-sticky a {
	color: var(--rc-white) !important;
}

/* ===================== MAIN HEADER / NAV ===================== */
#masthead.site-header {
	background: var(--rc-white);
	border-bottom: 1px solid rgba(5, 38, 79, 0.15); /* comp divider vector 3:1120 */
}
/* New logo. content:url() swap is the gated-preview shortcut — the M6 home ship replaces
   the JPG in the template/customizer properly. */
#masthead .site-branding img.site-logo,
#masthead .site-branding img.sticky-logo {
	content: url('../../../themes/shopkeeper-child/images/rebrand/logo-navy.svg');
	height: 30px;
	width: auto;
}
#masthead .main-navigation > ul > li > a,
#masthead .main-navigation .mega-menu > ul > li > a {
	font-family: var(--rc-font) !important;        /* header.php:201 brandon-grotesque */
	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);
}
#masthead .main-navigation > ul > li > a:hover {
	color: var(--rc-red);
}
#masthead .site-tools,
#masthead .site-tools a {
	color: var(--rc-navy);
}
/* Guests get no LOG IN on checkout. Hidden rather than unset from the menu: the header menu
   HTML is baked into one site-wide transient (header-default.php `yith_revive_eo_header_default_menu`),
   so a per-request wp_nav_menu filter would either miss or poison every other page.
   !important fights an inline <style> `.main-navigation ul li { display: inline-flex !important }`. */
body.woocommerce-checkout:not(.logged-in) #masthead .menu-item-myaccount,
body.woocommerce-checkout:not(.logged-in) .mobile-navigation .menu-item-myaccount {
	display: none !important;
}

body.woocommerce-checkout #masthead .site-header-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 30px;
}
body.woocommerce-checkout #masthead .site-branding {
	position: absolute;
	left: 50%;
	float: none;
	transform: translateX(-50%);
}
/* Cart sits to the RIGHT of MY ACCOUNT, as it did before the flex swap and as it does in the
   rebrand nav. .site-tools is printed FIRST in header-default.php, so the order has to be undone
   here. justify-content on the wrapper rather than an auto margin on either one: below 1024px
   .main-navigation (.show-for-large-up) drops out and .site-tools carries the hamburger, and an
   auto margin on the hidden item would strand it at the left. */
body.woocommerce-checkout #masthead .main-navigation {
	order: 1;
	width: auto;
}
body.woocommerce-checkout #masthead .site-tools {
	order: 2;
	float: none;
}

/* --- Mobile (.native-headroom widget) --- */
/* The widget markup uses .site-branding-mobile, which the M5 logo swap above does not match
   (it targets .site-branding), so the mobile band still served the pre-rebrand MOBILE-LOGO.jpg.
   width/max-height are reset because the snippet sizes the anchor for a 9:1 wordmark and the
   rebrand lockup is 3.44:1; height drives the box and width follows. */
body.woocommerce-checkout .site-branding-mobile img.site-logo,
body.woocommerce-checkout .site-branding-mobile img.sticky-logo {
	content: url('../../../themes/shopkeeper-child/images/rebrand/logo-navy.svg');
	height: 28px;
	width: auto;
	max-height: none;
	margin: 0 auto;
}
body.woocommerce-checkout .native-headroom .site-branding-mobile.hide-for-large-up {
	margin-top: 10px !important;
}

/* --- Cart icon, both headers --- */
/* Checkout served the FontAwesome trolley on desktop and a grey bag PNG-in-a-data-URI on mobile,
   neither of which is the rebrand mark, and the two did not match each other. Both are repointed
   at the nav's own Cart_Blue asset so checkout reads like the rest of the shell.
   Desktop is a font glyph, not an image, so it is killed at the pseudo and the <i> carries the
   art as a background -- `content:url()` on a non-replaced element is a late addition in Safari,
   and the header is not the place to find out. The mobile one is already an <img>, so it takes
   the same content:url() swap the logo above uses. */
body.woocommerce-checkout #masthead .site-tools .shopping-bag-button .tools_button_icon i.fa-shopping-cart::before {
	content: none;
}
body.woocommerce-checkout #masthead .site-tools .shopping-bag-button .tools_button_icon i.fa-shopping-cart {
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url('../../../themes/shopkeeper-child/images/rebrand/icon-cart.png') center / contain no-repeat;
	vertical-align: middle;
}

/* Size is left alone: a snippet caps every icon in this row at 15px with
   `.mobile-icon-wrapper img { max-width/max-height/height: 15px !important }`, and the mark reads
   fine there. Setting a size here would only look like it worked. */
body.woocommerce-checkout .native-headroom .shopping-bag-button img.boom-mobile-nav-icon {
	content: url('../../../themes/shopkeeper-child/images/rebrand/icon-cart.png');
}
/* Icon only. The widget prints a "Cart" caption under every icon in this row; the others are
   hidden on checkout anyway, and the cart mark speaks for itself. Dropping it also drops the
   cell from 38px to 15px, so the mark has to be re-centred against the logo (which sits 38-66
   in the band) rather than riding at the top of where the two-line lockup used to be. */
body.woocommerce-checkout .native-headroom .shopping-bag-button .mobile-nav-icon-title {
	display: none;
}
/* !important and the extra `li` both matter: a snippet pins this cell with
   `.is-customer.woocommerce-checkout li.shopping-bag-button.mobile-item-cart{margin-top:7px!important}`,
   which ties on specificity and loads after us. */
body.woocommerce-checkout .native-headroom li.shopping-bag-button.mobile-item-cart {
	margin-top: 19px !important;
}
body.woocommerce-order-received .native-headroom li.shopping-bag-button.mobile-item-cart {
	display: none;
}

/* .site-branding-mobile is a FULL-WIDTH transparent band that a snippet gives `z-index: 444`
   (`.is-customer.woocommerce-checkout .site-branding-mobile.hide-for-large-up`), so it sits over
   the absolutely-positioned .site-tools-headroom and swallows every click across the header --
   the cart included, which is under it but second in the hit chain. The band always did this;
   it only became total when dropping the "Cart" caption shrank that cell from 38px to 15px, so
   the icon no longer pokes out above and below the band.
   pointer-events rather than a bigger z-index: the band has nothing to hit except its own logo,
   and this fixes the whole strip instead of racing one arbitrary number with another. */
body.woocommerce-checkout .native-headroom .site-branding-mobile.hide-for-large-up {
	pointer-events: none;
}
body.woocommerce-checkout .native-headroom .site-branding-mobile.hide-for-large-up > a {
	pointer-events: auto;
}

/* ===================== FOOTER ===================== */
#site-footer,
#site-footer .site-footer-widget-area,
#site-footer .site-footer-copyright-area {
	/* !important fights: custom-css-js snippet rule `#site-footer{background:#7d7d7d}`
	   (snippets inject after plugin CSS). Drain target for the M6 footer/home ship. */
	background: var(--rc-navy) !important;
	color: var(--rc-white);
	font-family: var(--rc-font);
}
/* fights: inline style= on the footer headings (text-align/color/font-size) — color already
   white inline; font is ours */
#site-footer .signup-let-s-be-friends {
	font-family: var(--rc-font) !important;        /* header.php:201 brandon-grotesque */
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h2-size);
	line-height: var(--rc-text-h2-lh);
	text-transform: uppercase;
}
#site-footer .signup-get-exclusive-discounts {
	font-family: var(--rc-font) !important;
	font-weight: var(--rc-weight-regular);
	font-size: var(--rc-text-sub-size) !important; /* inline font-size:16px */
	line-height: var(--rc-text-sub-lh);
}
/* Email input — comp: white 445×44, navy placeholder/text, square */
#site-footer .klaviyo-signup input[type="email"] {
	background: var(--rc-white);
	color: var(--rc-navy);
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
	text-align: center;
	height: 44px;
	max-width: 445px;
	border: 0;
	border-radius: 0;
}
#site-footer .klaviyo-signup input[type="email"]::placeholder {
	color: var(--rc-navy);
	opacity: 1;
}
#site-footer .klaviyo_form_actions button,
#site-footer .klaviyo_form_actions input[type="submit"],
#site-footer .klaviyo_form_actions .klaviyo_submit_button {
	background: var(--rc-btn-red);
	color: var(--rc-white);
	font-family: var(--rc-font) !important;        /* header.php:201 brandon-grotesque */
	font-weight: var(--rc-weight-semibold);
	font-size: var(--rc-text-teaser-size);
	line-height: var(--rc-text-teaser-lh);
	letter-spacing: var(--rc-text-teaser-track);
	text-transform: uppercase;
	min-height: 44px;
	border: 0;
	border-radius: 0;
}
#site-footer .klaviyo_form_actions button:hover,
#site-footer .klaviyo_form_actions input[type="submit"]:hover {
	background: var(--rc-btn-red-hover);
}
#site-footer .footer-email-by-signup-you-agree {
	font-family: var(--rc-font) !important;
	font-size: var(--rc-text-signoff-size) !important; /* inline font-size:10px */
	line-height: var(--rc-text-signoff-lh);
	letter-spacing: var(--rc-text-signoff-track);
}
#site-footer .menu-footer a,
#site-footer .footer-navigation-wrapper a {
	font-family: var(--rc-font) !important;        /* header.php:201 brandon-grotesque */
	font-weight: var(--rc-weight-regular);
	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-white);
}
#site-footer .footer_socials_wrapper a {
	color: var(--rc-white);
}

/* ===================== 404 surface (M6b) ===================== */
/* Rendered by the theme 404.php inside the rebrand shell (#rc-main). Uses the shell
   tokens; loads site-wide with the gate so no extra topic/gate is needed.
   Block layout (not flex) so .rc-404__inner does not claim the buttons' unwrapped
   max-content width and overflow narrow viewports — the actions wrap instead. */
.rc-404 {
	padding: 96px 24px 120px;
	text-align: center;
}
.rc-404__inner {
	max-width: 640px;
	margin: 0 auto;
}
.rc-404__code {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-semibold);
	font-size: 96px;
	line-height: 1;
	color: var(--rc-light-blue);
	margin: 0 0 8px;
}
.rc-404__title {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	color: var(--rc-navy);
	margin: 0 0 16px;
}
.rc-404__text {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: 16px;
	line-height: 26px;
	color: var(--rc-navy);
	margin: 0 auto 32px;
	max-width: 480px;
}
.rc-404__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
@media (max-width: 768px) {
	.rc-404 {
		padding: 56px 20px 80px;
	}
	.rc-404__code {
		font-size: 72px;
	}
}

/* ===================== Content pages (M6b step 2) ===================== */
/* Simple pages (FAQ / contact / terms / privacy / order-tracking) rendered in the
   rebrand shell via template-parts/page-rebrand-content.php. The shell restyles the
   frame; the page BODY keeps its legacy CSS (VC / classic + custom-css-js). `.rc-prose`
   is a light readability layer only — a centered measure + brand type/link color — with
   low specificity so a Visual-Composer body's own rules still win where they exist. */
.rc-page-content {
	padding: 56px 24px 96px;
}
.rc-page-content__inner {
	max-width: 820px;
	margin: 0 auto;
}
/* WooCommerce pages are NOT prose. Cart, checkout and account still render their legacy
   Woo markup — a Foundation row of large-7 / large-5 columns around a table whose legacy
   CSS gives it a ~1060px min-content width. The 820px measure above squeezed that row to
   600px, so the table overflowed its 330px column and ran across the order summary: the
   reported "columns overlapping" (the boxes do not actually overlap — large-7 ends exactly
   where large-5 begins; it is the content spilling out of them).
   These surfaces are not rebuilt yet, so give them room rather than a reading measure. */
body.woocommerce-cart .rc-page-content__inner,
body.woocommerce-checkout .rc-page-content__inner,
body.woocommerce-account .rc-page-content__inner {
	max-width: none;
}

/* The band above already says "My Account", so the login form's own "Login" heading is the
   page title twice — and its box, margins and the legacy 60px the form wrapper sits on put a
   240px void between the two. Dropping both leaves the frame's own 56px, the same gap every
   other rebrand page opens with.

   The REGISTER panel keeps its heading: it is toggled into the same slot and would otherwise
   appear with nothing naming it. */
body.woocommerce-account .login-register-container { margin-top: 0; }
body.woocommerce-account form.login-form > h4.page-title { display: none; }
/* ── Page header band ─────────────────────────────────────────────────────────
   Figma "secondary page headers", PDP file yaalFsG2VY659Xgcuy35Qa: DESKTOP-FAQs Page
   1193:431 and its six siblings (My Account / Terms / Privacy Policy / Contact /
   Refer-A-Friend / Order Tracking), with MOBILE-PDP PAGE 1193:1024 and siblings for the
   narrow comp. One #F5F5F5 strip sitting directly under the sub-nav, edge to edge, with the
   page title centered in it — 120px tall at 1440, 72px at 360.

   The band is a SIBLING of .rc-page-content, not a child of its measure: full-bleed without
   having to undo the frame's padding with negative margins (which is what the cart's earlier
   ::before band had to do). Which pages get one, and what each is captioned, is decided in
   template-parts/page-rebrand-content.php — that map supersedes the per-page
   `page_title_meta_box_check` data flip of 2026-09-16 for the seven comped pages. */
:root {
	--rc-page-header-bg: #F5F5F5;
}
.rc-page-header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 16px 24px;             /* only load-bearing once a long title wraps */
	background: var(--rc-page-header-bg);
	text-align: center;
}
.rc-page-header__inner {
	max-width: 1200px;
	margin: 0 auto;
}
/* Double-scoped (≥2 classes) so the title holds the h1 ramp on VC pages too — a bare
   .rc-h1 (0,1,0) loses to VC/legacy heading rules (the home-build specificity lesson).
   Two legacy rules reach a bare <h1> and both had to be answered:
     • header.php:201 sets font-family brandon-grotesque with !important on a list that leads
       with `h1` — the only way past that is !important, same as everywhere else in this sheet;
     • the Woo sheet uppercases `.woocommerce-page h1`, which is why My Account and Cart (the
       two pages here that carry that body class) read MY ACCOUNT instead of the comp's
       "My Account". (0,2,0) beats its (0,1,1), so a plain declaration settles it. */
.rc-page-header .rc-page-header__title {
	font-family: var(--rc-font) !important; /* header.php:201 brandon-grotesque */
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h1-size);
	line-height: var(--rc-text-h1-lh);
	letter-spacing: normal;
	text-transform: none;
	color: var(--rc-navy);
	margin: 0;
}
.rc-page-header__excerpt {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: 16px;
	line-height: 26px;
	color: var(--rc-navy);
	margin: 12px 0 0;
}
/* The packaging-transition notice under the page title ("you may receive either our old or new
   look"). Deliberately quiet: it is a standing disclaimer, not a message, and it sits directly
   under the page heading on the cart where it competed with the title for attention.
   Sizes/colour/weight per Daniel 2026-09-23 — desktop 12px, mobile 10px, #7d7d7d, weight 100.

   Literal px and a literal hex rather than tokens: this is a one-off muted treatment that has no
   equivalent in the ramp, and --rc-scale is already 1 below 1200px. Weight 100 will render as the
   lightest face the brand family actually ships, which is the intent (as light as available). */
.rc-page-header__notice {
	font-family: var(--rc-font);
	font-weight: 100;
	font-size: 12px;
	line-height: 18px;
	color: #7d7d7d;
	margin: 10px 0 0;
}
@media (max-width: 768px) {
	/* Mobile comp: a 72px band carrying Mobile/H2 Section Headline (Jost Medium 23/26).
	   Literal px — the ramp has no mobile token, and --rc-scale is already 1 below 1200px. */
	.rc-page-header {
		min-height: 72px;
		padding: 12px 20px;
	}
	.rc-page-header .rc-page-header__title {
		font-size: 23px;
		line-height: 26px;
	}
	/* 10px on mobile (Daniel 2026-09-23). Line-height drops with it so two lines of a long
	   disclaimer do not open a gap under a 72px band. */
	.rc-page-header__notice {
		font-size: 10px;
		line-height: 15px;
	}
}

/* The legacy heading each page still carries in its Visual Composer body. The band draws the
   title now, so the body copy would read it twice — hidden by STRUCTURE, never by the
   generated `vc_custom_…` class, which VC regenerates whenever the page is re-saved. */
/* FAQ — a centered <h2> "Frequently Asked Questions", preceded by a 70px spacer. The sibling
   "or contact us at …" line in the same row is kept. */
body.faqs .rc-page-content .entry-content > .vc_row:first-child h2,
body.faqs .rc-page-content .entry-content > .vc_row:first-child .vc_empty_space:first-child {
	display: none;
}
/* That row's own fill is #f5f5f5 — the band's grey exactly, but painted only across the content
   measure, so left in place it steps in from the full-bleed band above it. The row's surviving
   "or contact us at …" line reads fine on white. */
body.faqs .rc-page-content .entry-content > .vc_row:first-child {
	background-color: transparent !important;
}
/* Terms and Privacy — a whole first row holding nothing but
   <p><strong><span style="font-size:55px;color:#171c8e">…</span></strong></p>. */
body.terms .rc-page-content .entry-content > .vc_row:first-child,
body.privacy .rc-page-content .entry-content > .vc_row:first-child {
	display: none;
}
/* ── FAQ ──────────────────────────────────────────────────────────────────────
   54 accordions laid out as two Visual Composer columns (nine pairs of vc_col-sm-6).
   At the content pages' 820px reading measure each column is only ~410px, so most
   questions wrap to three lines and the page runs enormously long (Moiz 09.15: "Can we
   expand this to full width").

   Widened to 1200px — the PDP's container, i.e. the widest the rebrand already uses —
   rather than edge-to-edge: a full-viewport accordion strands its title miles from its
   toggle on a large monitor. */
body.faqs .rc-page-content__inner {
	max-width: 1200px;
}

/* The right-hand column of each pair carries the same authored `padding-right: 5%` as the
   left, where it is the gutter — on the right it is just dead space at the page edge.
   Matched by adjacency, never by the `vc_custom_…` class VC regenerates on every re-save,
   and !important because the authored rule is itself !important. */
body.faqs .rc-page-content .vc_col-sm-6 + .vc_col-sm-6 {
	padding-right: 0 !important;
}

/* The page ends on a full-bleed grey "Got more questions?" band, so the frame's 96px bottom
   padding read as a white strip between it and the navy footer. Dropped here only: every other
   page routed through this template ends on prose, where that padding is what keeps the footer
   off the last line. */
body.faqs .rc-page-content { padding-bottom: 0; }

/* Tablet. VC keeps vc_col-sm-6 side by side all the way down to 768px, where the pair is
   ~350px each and the columns' authored `padding-right: 5%` is taking a real bite out of
   that. Drop the gutter before it hurts. */
@media (max-width: 1024px) {
	body.faqs .rc-page-content .vc_col-sm-6 {
		padding-right: 0 !important;
	}
}

/* Mobile. Below 768px VC collapses vc_col-sm-* to full width, so the columns stack on
   their own; what is left to reclaim is the frame's side padding. */
@media (max-width: 768px) {
	body.faqs .rc-page-content {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ── Contact ──────────────────────────────────────────────────────────────────
   A Visual Composer layout from the old design, and the vertical space is cumulative:
   the frame pads 56/96, the grey header band's column adds 60 top and bottom, the form
   row adds another 30, and the empty spacer column beside the form carries a further
   30px bottom margin. Stacked up, the heading and the form sit most of a screen apart
   (Moiz 09.16: "compact the header and form by reducing vertical white space and
   reducing all the padding of these nested divs").

   Every value below overrides a generated `vc_custom_…` rule, which is why `!important`
   is needed — VC writes its own with it. Keyed on STRUCTURE rather than those class
   names, because Visual Composer regenerates them whenever the page is re-saved. */
body.contact .rc-page-content {
	padding-top: 24px;
	padding-bottom: 48px;
}
/* Grey header band — was 60px top and bottom. Its fill now has to go: the shell draws its own
   full-bleed grey band above (see "Page header band"), and this one is painted only across the
   content measure, so the two stack as an inset rectangle under a full-width one and read as a
   rendering fault. Without the fill, "Can we help?" and the support address sit on white under
   the band. Three nested elements carry that same fill (row, column, inner column), so the
   whole subtree is cleared rather than each generated `vc_custom_…` class named in turn. */
body.contact .rc-page-content .entry-content > .vc_row:first-child,
body.contact .rc-page-content .entry-content > .vc_row:first-child * {
	background-color: transparent !important;
}
body.contact .rc-page-content .entry-content > .vc_row:first-child > .vc_column_container {
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}
/* The legacy 55px heading is a <p>, so it also carries the theme's paragraph margins. */
body.contact .rc-page-content .entry-content > .vc_row:first-child p {
	margin-top: 0;
	margin-bottom: 12px;
}
/* Form section — the row was padded 30px top and bottom on top of everything above. */
body.contact .rc-page-content .boxed-row > .vc_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* The empty 3-column spacers either side of the form each add 30px below themselves. */
body.contact .rc-page-content .boxed-row .vc_col-sm-3 {
	margin-bottom: 0 !important;
}

/* ── Order tracking ───────────────────────────────────────────────────────────
   The page body still carries the LEGACY heading: a Visual Composer row holding
   <p><strong><span style="font-size:55px;color:#171c8e">Order Tracking</span></strong></p>.
   Now that the rebrand frame draws its own <h1> (page_title_meta_box_check flipped to `on`,
   2026-09-16) that is a duplicate — and an expensive one. Its row is full-bleed
   (margin-left/right: -2000px) around a column padded 60px top and bottom, so the heading
   itself lands far outside the viewport and all that survives is a tall band of empty space
   under the title (Moiz 09.15: "Remove excessive white space under title").

   Hidden by position rather than by the generated `vc_custom_…` class, which is regenerated
   whenever the page is re-saved in Visual Composer. */
body.order-tracking .rc-page-content .entry-content > .vc_row:first-child {
	display: none;
}

/* The intro paragraph. The theme gives it a FIXED `width: 718px` (shopkeeper-theme-01.css),
   which is wider than the Foundation column that holds it once the rebrand frame caps the page
   at 820px — so the sentence ran outside its own column and read as misaligned against the form.
   Let it simply fill the column instead: no fixed width can then outgrow the container.

   It ends up marginally narrower than the grey form box below, because `.track_order_form`
   carries `margin: 0 -30px` and deliberately bleeds 30px past the column on each side.
   Body-scoped so it outranks the theme sheet, which loads after ours. */
body.order-tracking .rc-page-content .track-order-description {
	width: auto;
	max-width: 100%;
	margin: 0 auto 24px;
	text-align: center;
}

/* The order summary line ("Order #... was placed on ... and is currently ...") on Order Tracking
   after a lookup and on My Account > view order - both render `.order-info`. On
   desktop the theme turns `.order-info` into a full-bleed band with `margin: 0 -1000px` and
   `padding: 0 1000px` (responsive.css, min-width 63.9375em). The rebrand frame cancels the
   negative margin but not the padding, so under border-box the text is left 0px of width and
   breaks one word per line at the right edge of the grey box. Give it the padding the theme
   uses below that breakpoint, inside the column, centred. */
@media only screen and (min-width: 63.9375em) {
	body.order-tracking .rc-page-content .order-info,
	body.woocommerce-view-order .rc-page-content .order-info {
		margin: 16px 0 8px;
		padding: 32px 30px;
		text-align: center;
	}
}

.rc-prose {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-regular);
	font-size: 16px;
	line-height: 28px;
	color: var(--rc-navy);
}
.rc-prose a {
	color: var(--rc-red);
	text-decoration: underline;
}
.rc-prose p {
	margin: 0 0 1.15em;
}
.rc-prose ul,
.rc-prose ol {
	margin: 0 0 1.15em 1.25em;
}
.rc-prose li {
	margin: 0 0 0.4em;
}
.rc-prose h2 {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h3-size);
	line-height: var(--rc-text-h3-lh);
	color: var(--rc-navy);
	margin: 1.6em 0 0.5em;
}
.rc-prose h3 {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-sub-size);
	line-height: var(--rc-text-sub-lh);
	color: var(--rc-navy);
	margin: 1.4em 0 0.5em;
}
@media (max-width: 768px) {
	.rc-page-content {
		padding: 40px 20px 72px;
	}
}

/* ---- Promotional top banner: size by aspect, not by a placeholder floor ----
   The top-banners plugin floors the image at min-height:100px via
   .topbanner-image[loading="lazy"] -- meant as a pre-load placeholder, but it applies for the
   life of the page -- and sets object-fit:cover below 767px. Together they crop the banner on
   any phone: at 393px the 1500x300 (5:1) asset wants 78.6px of height, gets held at 100px, and
   cover eats the right-hand "USE CODE: TRAVEL" panel. It only looks correct at exactly 500px,
   where 500/100 happens to equal the asset's own 5:1 -- which is also the width headless
   Chrome clamps to, so it measures clean while every real phone crops.

   aspect-ratio keeps the pre-load space reservation the floor was there for, but proportional
   to the width instead of fixed, so the height is right at every viewport. object-fit:contain
   means a future asset at a different ratio letterboxes rather than silently losing its edges.

   Overridden here because revive-essential-oils-addons-top-banners has no git checkout and no
   deploy path -- it is a plain www-data directory on the server.

   One ratio cannot serve this element, which is what 09-24 got wrong. The <picture> serves TWO
   cuts -- 1500x300 (5:1) below 768px, 6000x500 (12:1) above it -- so an unscoped 5/1 was exactly
   right on mobile and 2.4x too tall on desktop, where contain letterboxed the artwork and the
   plugin's #f0f0f0 painted the gap grey. The letterbox grew with the viewport (90px at 768,
   163px at 1400, 224px at 1920), which is why it read as "a bunch of space" and not a fixed gap.

   The boundary is 767/768 because that is the plugin's own media="(max-width: 767px)" on the
   <source>. Using 768 here (as .rc-page-content does a few rules up) leaves a 1px band at 768
   where the desktop asset renders under the mobile ratio. */
.topbanner-image[loading="lazy"] { min-height: 0; }
.topbanner-image {
	object-fit: contain;
}
@media (max-width: 767px) {
	.topbanner-image { aspect-ratio: 5 / 1; }   /* 1500x300 mobile cut */
}
@media (min-width: 768px) {
	.topbanner-image { aspect-ratio: 12 / 1; }  /* 6000x500 desktop cut */
}