/* rc-cart.css — Cart + Checkout, style-guide pass (CSS only).
   Loads on is_cart() || is_checkout() behind the rebrand gate; depends on rc-styles-buttons.
   Scoped to .woocommerce-cart / .woocommerce-checkout rather than .rc-rebrand: checkout does
   NOT render the rebrand header, so it has no rc-rebrand body class. */

/* Empty cart: no glyph before RETURN TO SHOP. shopkeeper-theme-01.css hangs a FontAwesome
   character off `.wc-backward::before`, and the rebrand shell does not load FontAwesome -- so
   it rendered as a tofu box rather than as an arrow. */
body.woocommerce-cart .return-to-shop .wc-backward::before { content: none; }

/* ---- Type: one sweep to Jost, icon fonts preserved ---- */
body.woocommerce-cart .cart_container,
body.woocommerce-cart .cart_container *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]),
body.woocommerce-checkout .checkout_right_wrapper,
body.woocommerce-checkout .checkout_right_wrapper *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]) {
	font-family: var(--rc-font) !important;
}

body.woocommerce-cart h2.RO56--sidebar-title,
body.woocommerce-checkout .checkout_right_wrapper h2 {
	color: var(--rc-navy);
	font-weight: var(--rc-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---- Square corners ---- */
.woocommerce-cart .cart_container a.continue-shopping,
.woocommerce-cart .cart_container .RO56--after-right a,
.woocommerce-cart .RO190-reserve-timer,
.woocommerce-cart .cart_container .custom_border,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .checkout_right_wrapper,
.woocommerce-checkout .RO84--guarantee-container {
	border-radius: 0 !important;
}

/* ---- The two top links: navy, square ---- */
body.woocommerce-cart .cart_container a.continue-shopping.continue-shopping {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 0 !important;
	font-family: var(--rc-font) !important;
	font-weight: var(--rc-weight-semibold);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--rc-white) !important;
	color: var(--rc-navy) !important;
	border: 1px solid var(--rc-navy) !important;
	box-shadow: none !important;
}
body.woocommerce-cart .cart_container a.continue-shopping.continue-shopping:hover,
body.woocommerce-cart .cart_container a.continue-shopping.continue-shopping:focus {
	background: var(--rc-navy) !important;
	color: var(--rc-white) !important;
}
body.woocommerce-cart .cart_container .RO56--after-right a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--rc-navy) !important;
	font-family: var(--rc-font) !important;
	font-weight: var(--rc-weight-semibold);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}
body.woocommerce-cart .cart_container .RO56--after-right a:hover,
body.woocommerce-cart .cart_container .RO56--after-right a:focus {
	background: none !important;
	color: var(--rc-navy) !important;
	text-decoration: underline;
}

/* ---- Content column matches the shell (same expression as the nav + shop) ---- */
@media (min-width: 1200px) {
	:root body.woocommerce-cart .cart_container > .row > [class*="xxlarge-"],
	:root body.woocommerce-cart .cart_container > .row > [class*="xlarge-"] {
		width: 100%;
		max-width: calc(912px * var(--rc-scale));
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
}

/* Reserved space for the absolutely-positioned header, not stray padding — zeroing it
   slides the title band under the nav. Out-specifies snippet 9071313 at (2,3,2). */
@media only screen and (min-width: 63.9375em) {
	html body.woocommerce-checkout #page_wrapper.sticky_header #primary.content-area {
		padding-top: 68px !important;
	}
}

/* ---- Page-title band: cart matches checkout ---- */
/* The cart used to fake its band with a ::before on the title, bled ±24px past the frame's
   padding, because the title lived inside the content measure. The shell draws a real
   full-bleed band now (.rc-page-header in rc-shell.css) and the cart just recolors it —
   #f7f7f7 rather than the #f5f5f5 default, so the reviewed cart keeps the grey it shipped
   with. Checkout is recolored with it: it renders through the same rebrand template part,
   and "cart matches checkout" is the whole point of this block. */
body.woocommerce-cart,
body.woocommerce-checkout {
	--rc-page-header-bg: #f7f7f7;
	--rc-page-title-bg: #f7f7f7;
}
/* Legacy entry-header — kept for any checkout render that still comes out of page.php's
   un-gated branch rather than the rebrand shell. */
body.woocommerce-checkout header.entry-header {
	background: var(--rc-page-title-bg);
}

/* … and no gap under it on mobile (9/19 sheet Round 7, "eliminate space below CHECKOUT
   header and above timer"). Same decision as the cart's `.rc-page-content { padding-top: 0 }`
   below: the countdown banner is full-bleed light blue and reads as part of the header block.

   Measured on /checkout/ at 390px: the header ends at 152.1 and the banner starts at 172.1 —
   the gap is exactly this element's own margin-bottom, showing the page background through as
   a white strip between two coloured bands. DESKTOP ALREADY COMPUTES 0, so this is a
   mobile-only leak and zeroing it restores parity rather than changing the design.

   The owner is `body.RO84-mixed header.entry-header, div.entry-header` under
   `@media (max-width: 767px)`, `margin-bottom: 20px!important`, in one of the page's inline
   <style> blocks — found with CDP `CSS.getMatchedStylesForNode`, NOT by enumerating
   document.styleSheets: that rule is authored without a space before `!important` and the
   CSSOM hands back an empty `margin-bottom`, so a getPropertyValue() walk reports no owner at
   all. Hence `!important` here, and the extra `.RO84-mixed` class — the owner is (0,2,1) like
   ours and prints inline, so matching its specificity would leave the winner up to document
   order. RO84-mixed is also exactly the condition under which the 20px is applied. */
@media (max-width: 768px) {
	body.woocommerce-checkout.RO84-mixed header.entry-header {
		margin-bottom: 0 !important;
	}
}
/* No gap under the band: the countdown banner is full-bleed light blue and reads as part of
   the header block, so it butts straight up against the grey (Daniel 09.22). The 38/28px that
   used to sit here was breathing room for the old faked band, which needed the title's own
   margin to draw itself; the real band has its own 120/72px height and needs none. */
body.woocommerce-cart .rc-page-content {
	padding-top: 0;
}
@media (max-width: 768px) {
	body.woocommerce-cart .rc-page-content {
		padding-left: 5px;
		padding-right: 5px;
	}
}

body.woocommerce-cart .cart_container table.shop_table.cart tr td.RO56--td {
	padding-left: 24px !important;
}
/* Phones need that 24px back as content. Measured on a 500px viewport: the row is 470 wide,
   the thumbnail cell ends at x=99, and the content does not begin until x=157 -- 58px of dead
   space against a title that wraps to two lines. 24 of those 58 are the rule above; this gives
   16 of them back.

   The other 34px are structural and NOT addressed here: the theme's responsive-table CSS makes
   td.product-thumbnail `display: block` on mobile, so it stops being a table cell and the
   browser lays the rest of the row out around anonymous cells. Recovering that means deciding
   whether the RO56 row should be a table at all on mobile, which is not a launch-week change. */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container table.shop_table.cart tr td.RO56--td {
		padding-left: 8px !important;
	}
}
body.woocommerce-cart .woocommerce table.cart tr.RO56--cart-item .RO56--td--bottom,
body.woocommerce-cart .cart_container table.cart tr.RO56--cart-item .RO56--td--bottom {
	margin-left: 0 !important;
}

/* ---- Totals panel + gift toggle ---- */
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .checkout_right_wrapper {
	background: rgba(125, 125, 125, 0.05);
}
body.woocommerce-cart .gift-toggle-text,
body.woocommerce-cart .gift-toggle-label {
	color: #7d7d7d !important;
	text-transform: none;
}

body.woocommerce-cart .cart_container p.shipsfrom,
body.woocommerce-checkout p.shipsfrom {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
body.woocommerce-cart .cart_container p.shipsfrom::after,
body.woocommerce-checkout p.shipsfrom::after {
	content: "Ships within 24 Hours";
	display: block;
	font-family: var(--rc-font);
	font-size: 14px;
	line-height: 1.4;
	font-weight: var(--rc-weight-regular);
	color: var(--rc-navy);
}

body.woocommerce-cart .revive-eo-wrapper-cart-subscription,
body.woocommerce-cart .revive-eo-wrapper-cart-subscription *,
body.woocommerce-cart .nav-edit-revive-eo-shop-actions-wrapper,
body.woocommerce-cart .nav-edit-revive-eo-shop-actions-wrapper *,
body.woocommerce-cart .RO56--td--bottom .revive-eo.revive-eo-wrapper.revive-eo-wrapper-cart-subscription {
	border-radius: 0 !important;
}
body.woocommerce-cart .revive-eo-wrapper-cart-subscription,
body.woocommerce-cart .nav-edit-revive-eo-shop-actions-wrapper {
	margin-top: 12px;
}

body.woocommerce-cart .RO190-reserve-banner {
	padding-top: 12px;
	padding-bottom: 12px;
	min-height: 0;
}
body.woocommerce-cart .RO190-reserve-banner p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---- Reservation banner: the headline holds one line on mobile ---- */
@media (max-width: 767px) {
	body.woocommerce-cart .RO190-reserve-copy strong {
		white-space: nowrap;
		font-size: min(16px, calc((100vw - 162px) / 16.4));
	}
}

/* ---- Free-shipping bar and coupon toggle: one line each on mobile ---- */
@media (max-width: 767px) {
	body.woocommerce-cart .RO56-free-shipping .text {
		white-space: nowrap;
		font-size: min(14px, calc((100vw - 120px) / 19.6));
	}
	body.woocommerce-cart .woocommerce-info-have-a-coupon .woocommerce-info {
		font-size: 14px;
	}
}

/* ---- Footer: the cart drops the marketing block ---- */
.woocommerce-cart #rc-footer .rc-footer__signup,
.woocommerce-cart #rc-footer .rc-footer__socials,
.woocommerce-cart #rc-footer .rc-footer__consent,
.woocommerce-cart #rc-footer .rc-footer__disclaimer {
	display: none !important;
}

@media (max-width: 768px) {
	body.woocommerce-cart .cart_container table.shop_table.cart tr td.product-thumbnail {
		width: 84px !important;
		min-width: 84px !important;
	}
	body.woocommerce-cart .woocommerce table.cart tr.RO56--cart-item .RO56--td--bottom,
	body.woocommerce-cart .cart_container table.cart tr.RO56--cart-item .RO56--td--bottom {
		margin-top: 0 !important;
		width: auto !important;
	}
}

@media (max-width: 768px) {
	body.woocommerce-cart .cart_container .row .large-5.columns {
		width: calc(100% + 30px) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -15px !important;
		margin-right: -15px !important;
	}
	body.woocommerce-cart .cart_container .cart_right_wrapper {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
	}
}

body.woocommerce-cart .cart_container a.continue-shopping svg {
	position: static;
	top: auto;
	flex: none;
}
body.woocommerce-cart .cart_container a.continue-shopping svg path,
body.woocommerce-cart .cart_container a.continue-shopping svg g path {
	fill: currentColor !important;
	stroke: none !important;
}

body.woocommerce-cart .cart_container button.RO56--dropdown-toggle {
	padding-left: 22px !important;
	padding-right: 22px !important;
}
body.woocommerce-cart .cart_container button.RO56--dropdown-toggle .RO56--dropdown-selected {
	font-size: 13px !important;
	min-width: 0;
}
body.woocommerce-cart .cart_container td.RO56--td--price,
body.woocommerce-cart .cart_container .RO56--td--price {
	min-width: 118px;
	white-space: normal;
}
body.woocommerce-cart .cart_container .RO56--td--price .subscription-price,
body.woocommerce-cart .cart_container .RO56--td--price .woocommerce-Price-amount,
body.woocommerce-cart .cart_container .RO56--td--price .subscription-data {
	display: block;
	text-align: right;
}
body.woocommerce-cart .cart_container .RO56--td--price span.subscription-data.deployro27 {
	display: block;
	position: static;
	margin: 0;
	text-align: right;
	font-size: 13px;
	line-height: 1.3;
	color: #7d7d7d;
}

/* Cart line price: pull the struck list price and the discounted price together.

   RO56.css forces every amount span inside this cell to `display: block !important`, which
   is what stacks the two prices — production stacks them the same way. So the difference
   against production is not the layout, it is the leading: the two prices are separate line
   boxes, and the gap between them is whatever line-height they inherit. The rebrand body
   sets that looser than the legacy cart did, which is why the pair drifted apart.

   Set on the cell rather than on the spans so it applies whatever RO56 does to them, and
   left at the specificity of the block above — nothing here fights RO56's !important,
   because display is not being changed. */
body.woocommerce-cart .product-subtotal.cart-item-subtotal {
	line-height: 1.2;
}
body.woocommerce-cart .product-subtotal.cart-item-subtotal del,
body.woocommerce-cart .product-subtotal.cart-item-subtotal ins {
	margin: 0;
	line-height: 1.2;
}

/* ---- Cart line: quantity keeps the price company on one line ---- */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container .cart-item-qty-wrapper {
		margin-right: 0;
	}
	body.woocommerce-cart .cart_container .RO56--td--price {
		min-width: 100px;
	}
}
@media (max-width: 375px) {
	body.woocommerce-cart .cart_container [data-is-sale="isOnSale"] .RO56--td--price {
		margin-right: 0;
	}
}

/* ---- Subscribe & Save: the frequency row fits inside the box ---- */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container table.shop_table.cart tr.RO56--subscribe--item--mobile td.RO56--td {
		padding-left: 0 !important;
	}
	body.woocommerce-cart .cart_container .RO56--sub-label {
		font-size: 14px !important;
	}
	body.woocommerce-cart .cart_container .RO56--dropdown {
		width: 188px;
	}
	body.woocommerce-cart .cart_container button.RO56--dropdown-toggle {
		padding-left: 24px !important;
		padding-right: 18px !important;
	}
}

/* ---- Free gift: scent picker under the name, price beside it ---- */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: 8px;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--top {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--bottom {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
		margin-bottom: 0;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--middle {
		grid-column: 2;
		grid-row: 2;
		width: auto;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--middle2-mobile {
		grid-column: 1 / -1;
		grid-row: 3;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--price {
		min-width: 0;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--price .oldprice,
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .RO56--td--price .newprice {
		font-size: 14px;
	}
	body.woocommerce-cart .cart_container tr.cart_item.free-gift .RO56--td--bottom .nav-edit-revive-eo-shop-actions-wrapper,
	body.woocommerce-cart .cart_container tr.cart_item.free-gift .RO56--td--bottom ul.nav-edit-revive-eo-shop-actions,
	body.woocommerce-cart .cart_container tr.cart_item.free-gift .RO56--td--bottom .custom-scent-label {
		width: 100% !important;
		max-width: 190px !important;
	}
	body.woocommerce-cart .cart_container tr.cart_item.free-gift .RO56--td--bottom .nav-edit-revive-eo-shop-actions-wrapper {
		margin-top: 0;
	}
	body.woocommerce-cart .cart_container .RO56--td--content:has(.custom-scent-label) .product-quantity-subtotal-wrapper {
		display: none;
	}
}

/* ---- Free-gift scent dropdown: let the row size to its contents ----
   custom-css-js snippets 9683399 and 9731863 hardcode the gift row's height --
   `height: 185px` at desktop, and 200px/170px inside their own mobile query. Two options
   with thumbnails need about 219px, so the last one is cut off right where the coupon box
   begins. It reads as the menu sitting behind the coupon, but nothing paints over it: with
   the menu open the row computes to z-index 9999, the coupon wrapper is static/z-auto with
   no stacking context anywhere in its chain, and no ancestor clips. The fixed height is the
   whole bug.

   Overridden here rather than in the snippets for two reasons: those snippets are shared
   with production, so editing them lands on both sites; and editing a custom-css-js post
   through wp-cli deactivates it and drops it from the plugin's tree option site-wide.

   min-height preserves the closed row's designed footprint at each breakpoint, so this only
   ever lets the row grow. */
body.woocommerce-cart .cart_container tr.cart_item.free-gift.cart-item-has-variations {
	height: auto;
	min-height: 185px;
}
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container tr.cart_item.free-gift.cart-item-has-variations {
		min-height: 170px;
	}
}

/* ---- Stray 203px rule between cart rows ----
   Round 7 #1d, "weird line break between products". custom-css-js snippet 9808101
   ("subscription styles") sets `.product-quantity-subtotal-wrapper { width: 203px }` inside its
   own max-width:768px query, unscoped. On rows where that wrapper has no content it still lays
   out as a 203px-wide, ~1px-tall box — measured at x=25–228 between two products, which is the
   short left-hand segment in the report. The other segment sits at a different y because the
   row's two cells end 61px apart (td.product-thumbnail is display:block on mobile), so the two
   never line up and it reads as a broken rule.

   Neutralise the fixed width and drop the box entirely when it is empty, which is the case that
   draws the artefact. Rows where it carries a quantity/subtotal are untouched.

   Overridden here rather than in 9808101: that snippet is shared with production. */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container .product-quantity-subtotal-wrapper {
		width: auto;
	}
	body.woocommerce-cart .cart_container .product-quantity-subtotal-wrapper:empty {
		display: none;
	}
}

/* ---- Empty bottom box below rows with no Subscribe & Save ----
   Round 7 #1e/#1f, "remove extra room below Discovery Set" / "sometimes happens to other
   products too".

   On mobile RO56.js moves .RO56--td--bottom out into its own <tr> — but only for rows that
   have a Subscribe & Save widget:

       if (!row.querySelector(".revive-eo-field-subscribe-and-save")) { return; }

   Rows without one (the Discovery Set is excluded from promos, hence no S&S) keep the box
   inline, where its one child — `product-quantity-subtotal-wrapper` — is itself `display:none`.
   The 12px it still occupies is the box's own flex gap with nothing to separate, and the
   parent's 10px row-gap sits on top of it.

   ⚠️ 2026-09-25 REGRESSION FIX. This first shipped keyed on the JS guard —
   `:not(:has(.revive-eo-field-subscribe-and-save))` — which reads as "the box RO56.js left
   behind". That is not the same thing as "the box is empty", and a FREE GIFT row is where the
   two part company: a gift is never subscribable, so it has no S&S widget, but its bottom box
   carries the scent chooser. Applying TRAVEL therefore added the Travel Kit with its scent
   selector display:none — measured 0x0 on rebrand at 390px, against 190x83 once shown.

   Keyed on the emptiness directly instead: hide the box only when it holds nothing BUT the
   hidden quantity wrapper. Verified against both rows in one cart — the Discovery Set's box has
   that single child and stays hidden, the gift's box has five (the `.variation` dl, the chooser,
   the subscription stubs and the wrapper) and renders. Anything that lands in this box in future
   keeps it visible by default, which is the safer way round for a rule whose whole job is to
   hide something. */
@media (max-width: 768px) {
	body.woocommerce-cart .cart_container .RO56--td--content > .RO56--td--bottom:not(:has(> :not(.product-quantity-subtotal-wrapper))) {
		display: none;
	}
}

/* ---- Empty-cart graphic must clear the header band ----
   The parent theme pulls it up with `.cart-wishlist-empty-banner { margin-top: -20px }`
   (shopkeeper-theme-01.css) and only cancels that at larger widths, where responsive.css sets
   67px. On mobile the negative margin survives, so the crossed-out cart overlaps the grey band
   and sits on top of the "During our packaging transition…" line the rebrand adds there.
   Measured: band ends y=202, graphic started y=182 — exactly the 20px.

   Positive margin rather than 0 so the graphic reads as its own block under the band. */
@media (max-width: 768px) {
	body.woocommerce-cart .cart-empty-banner,
	body.woocommerce-cart .cart-wishlist-empty-banner {
		margin-top: 24px;
	}
}

/* ===================== ROUND 3 #2 — THANK YOU PAGE =====================
 * The order-received page (2026-09-26). It is is_checkout(), so this sheet already loads there;
 * every rule is scoped to body.woocommerce-order-received so the checkout page itself — which
 * still needs its title and its cart link — is untouched.
 *
 * This is the last surface on the LEGACY shell (get_header(), not header-rebrand.php), which is
 * why the chrome being removed here is the old theme's and not #rc-header's
 * ([[checkout-two-legacy-headers]]).
 */

/* "REMOVE EMPTY BOX" — the grey band under the logo. It is the theme's page header, and it
   holds `<h1 class="page-title">Checkout</h1>`: verified in the served markup, not guessed.
   That is why it "sometimes says CHECKOUT and sometimes just has a dash" — the band always
   renders; only whether the title string survives varies. Hidden whole, since a receipt has no
   use for a page title that names the previous step. */
body.woocommerce-order-received .site-content > header.entry-header {
	display: none;
}

/* "Remove cart logo" — the cart icon top-right. The order is placed; the link invites the
   shopper back into a cart that is now empty. The <li> goes rather than the icon, so the
   .site-tools row does not keep its slot. */
body.woocommerce-order-received .site-tools li.shopping-bag-button {
	display: none;
}

/* "I think everything is still in brandon grotesque? Update to Jost."
   Correct — the sweep at the top of this sheet names .cart_container and
   .checkout_right_wrapper, and the receipt is neither: its content is .entry-content > .woocommerce.
   Same shape as that rule, including the icon-font exclusions — FontAwesome and Glyphicon
   resolve their glyphs THROUGH font-family, so sweeping them to Jost renders tofu, not an icon. */
body.woocommerce-order-received .entry-content,
body.woocommerce-order-received .entry-content *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]) {
	font-family: var(--rc-font) !important;
}

/* "Remove free travel size bar in red" — the campaign countdown bar, which sits directly under
   the navy shipping bar at the top of the receipt. Its copy rotates with the campaign (TRAVEL,
   SELF20, TURKEY), so it is matched by element, not by text. `.cx-countdown-row` is the whole
   bar in both the topbarsticky (desktop) and topbarmobile widgets; the navy
   `.topbar-sticky-routinecos` is a SIBLING of it, not a child, and is staying.
   !important because the bar is revealed by a JS-added `.cx-countdown-active`. */
body.woocommerce-order-received .cx-countdown-row {
	display: none !important;
}

/* ===================== ROUND 3 #1 — CART, NARROW + MID WIDTHS =====================
 * Measured on the live rebrand cart under puppeteer (a real 360px viewport, which the
 * headless-Chrome CLI path could not give -- it floors the layout viewport near 500px and
 * reports PASS on a broken page).
 */

/* "PROCEED TO CHECKOUT runs off screen at 360."
   Not `.RO56--after-table`: that row is DESKTOP-ONLY and is not rendered at all below 1024.
   The mobile row is the theme's `.btn-wrap`, a flex row with no flex-wrap, so its two buttons
   cannot break. Measured at 360: content box 300px, children 159 + 10 gap + 171 = 340, so the
   checkout button's right edge lands at 370 -- 10px past the viewport. The arithmetic makes the
   threshold exact: the pair needs viewport >= 400 to fit, which is why 390 and 360 both clip
   and 414 does not.
   Allowing the row to wrap fixes every width at once and needs no breakpoint: the buttons stay
   side by side wherever they fit and break to two lines where they do not. Left at their natural
   widths (flex default 0 1 auto) so the 400-767 range renders exactly as it does today. */
@media (max-width: 767px) {
	body.woocommerce-cart .btn-wrap {
		flex-wrap: wrap;
	}
}

/* P2-06 — the free travel kit's struck-through $20.00 sitting behind the scent dropdown.
   Real, and the range in the report is exact: the scent picker is a hard 290px
   (`.nav-product-select-button`) with z-index 1000, while `.RO56--td--price` is pinned right at
   118px. Between 1024 and 1195 the cell is too narrow to seat both, so the picker paints over
   the price -- which is why the line reads "20.00" and not "$20.00": the dollar sign is covered,
   not missing. Measured overlap 66px at 1024, 29px at 1100, none at 1195 or 1023.
   Capping rather than re-stacking, per the recommendation in the tracker: pin the price column,
   let the dropdown shrink. The cap is relative, so it stops applying on its own where the cell
   is wide enough. The `ul` needs its own rule because it overhangs the wrapper's 20px padding. */
@media (min-width: 1024px) and (max-width: 1195px) {
	body.woocommerce-cart .free-gift .nav-edit-revive-eo-shop-actions-wrapper {
		max-width: calc(100% - 130px);
	}

	body.woocommerce-cart .free-gift ul.nav-edit-revive-eo-shop-actions,
	body.woocommerce-cart .free-gift .nav-product-select-button,
	body.woocommerce-cart .free-gift .input-group.tm-label-reviveeo-radio,
	body.woocommerce-cart .free-gift .custom-scent-label {
		width: 100%;
		max-width: 100%;
	}
}

/* ===================== ROUND 4 — CART TOP BLOCKS, MOBILE =====================
 * The stacked layout only exists at <= 640px: at 641 the two buttons go back side by side at
 * their natural widths, so every rule here is scoped to the stacked range and 641+ and desktop
 * are untouched. Measured before/after at 360/390/414/600 (changed) and 641/767/1100 (identical).
 */
@media (max-width: 640px) {
	/* Same width for all three blocks. The buttons sat 5px inside the free-shipping box on each
	   side — `.btn-wrap` is 320px at 360 with `padding: 0 10px`, giving a 300px content box,
	   while `.RO56-free-shipping` is 310px at x25. Halving the padding lands the buttons on x25
	   at 310 too, which is also where the cart item rows start. */
	body.woocommerce-cart .btn-wrap {
		padding-left: 5px;
		padding-right: 5px;
		/* Row gap, not the whole gap: each button adds its own 4px top margin below. */
		gap: 16px;
	}

	/* Equal 20px above each block. The three gaps were 26/20/10, each built differently:
	     blue bar -> Continue   = the banner's 16px margin-bottom + this margin
	     Continue -> Checkout   = the flex row gap + this margin
	     Checkout -> Free ship  = `.RO56-free-shipping`'s own margin-top, below
	   4px here is what turns the banner's fixed 16px into 20. !important because the theme
	   sets margin-top:10px on `a.checkout-button.button.alt.wc-forward.cart-checkout-added-button`,
	   which outranks this selector. */
	body.woocommerce-cart .btn-wrap > a {
		margin-top: 4px !important;
	}

	/* Set on the free-shipping box rather than as a margin-bottom on `.btn-wrap`: the two are in
	   different subtrees (`.cart_left_wrapper` vs the `.row` under `.cart_container`), so this
	   cannot collapse against anything and lands as a true 20px. */
	body.woocommerce-cart .RO56-free-shipping {
		margin-top: 20px;
	}
}

/* Duplicate PROCEED TO CHECKOUT after a tablet rotation.
 *
 * `.btn-wrap` is the MOBILE button row and `.RO56--after-table` the desktop one. RO56.js does not
 * hide the mobile row on desktop — it REMOVES it from the DOM at build time (measured: a fresh
 * 1100px load has no `.btn-wrap` at all). So the removal cannot re-run on resize, and a tablet
 * loaded at 768 then turned landscape ends up showing BOTH rows: two Proceed to Checkout buttons.
 *
 * Same root cause as P2-07 — RO56 builds once and does not re-run — but this half needs no JS.
 * A media query re-evaluates on resize by itself, which is exactly the property the JS lacks.
 * No-op on a fresh desktop load, where the element is already gone.
 */
@media (min-width: 769px) {
	body.woocommerce-cart .btn-wrap {
		display: none;
	}
}