/* =========================================================================
   CASCADE FIXES — TEMPORARY

   Rules that have to load AFTER main.css in order to win. Nothing here is new
   design: every rule restores something that rendered correctly before the
   theme became a block theme in Phase 0, and stopped when the source order of
   the stylesheets changed.

   Renamed from woo-compat.css in Phase 1 — it is no longer WooCommerce-only.

   Enqueued as ms-cascade-fixes with a dependency on ms-main-style.
   Do NOT add general styling here.

   Section 1 — WooCommerce block notice   (Phase 0, removed in Phase 6/7)
   Section 2 — post 44 cascade restores   (Phase 1, see FINDINGS.md)
   Section 3 — Astra button declarations  (Phase 1, see FINDINGS.md)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. WooCommerce block-theme notice compatibility — removed in Phase 6/7

   Under a block theme WooCommerce renders notices with its block component
   (.wc-block-components-notice-banner) instead of the classic .woocommerce-info
   markup that main.css styles. Today this affects exactly one element: the
   "Have a coupon?" notice on checkout.

   Values mirror the EFFECTIVE .woocommerce-info treatment in main.css
   (the later rules at ~1786-1815 that override the earlier block at ~1143),
   verified against a live .woocommerce-info element's computed style.

   Two deliberate departures:
     - padding-left is 18px, not 50px. The classic rule reserves 50px for a
       ::before bootstrap-icon; the block component ships its own inline SVG
       and lays it out with flex + gap, so the reserve would double-indent.
     - Only the .is-info variant is styled. Error and success notices keep
       WooCommerce's own colours rather than silently inheriting a neutral
       surface with no severity cue. Neither variant renders anywhere today.

   Phase 6/7 replaces the WooCommerce bridge templates with real block markup,
   at which point this section is deleted.
   ------------------------------------------------------------------------- */

.wc-block-components-notice-banner.is-info {
	display: flex;
	align-items: center;
	gap: 12px;
	/* !important only here: wc-blocks-style sets padding:16px !important on the
	   component. main.css uses !important on this same property for the classic
	   .woocommerce-info selector, for the same reason. */
	padding: 14px 18px !important;
	margin: 0 0 12px;
	background: rgba( 4, 20, 86, 0.06 );
	border: 1px solid var(--ms-navy);
	border-left: 4px solid var(--ms-navy);
	border-radius: var(--ms-radius-md);
	color: var(--ms-navy);
	font-family: var(--ms-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.wc-block-components-notice-banner.is-info > svg {
	fill: var(--ms-navy);
}

.wc-block-components-notice-banner.is-info a {
	color: var(--ms-navy);
	font-weight: 700;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   2. post 44 cascade restores — Phase 1

   The client's Customizer Additional CSS (theme_mods_molecular-solutions,
   custom_css_post_id = 44) used to print AFTER main.css and win on source
   order. Under a block theme WordPress folds it into the end of
   global-styles-inline-css, which sits at head position 7 while main.css is
   at 17 — so for any rule at equal specificity, main.css now wins instead.

   Two of its declarations stopped applying as a result. Both are restored
   here rather than in post 44 itself: that post is client-authored and is
   not ours to edit.

   Audited rule by rule in FINDINGS.md — these were the only two that broke.

   SIX declarations were losing, across two selectors. The first pass caught
   only two of them because it compared rule-by-rule; the rest were found by
   comparing every post-44 declaration against its computed value.

   Restored, and what was beating each:
     .ms-auth-box   width       400px                   <- main.css:2387 width:100%   (was 480px)
     .ms-auth-box   padding     20px                    <- main.css:2387 36px 36px 32px
     .ms-auth-box   box-shadow  0 0 20px #00000017      <- main.css:2387 0 4px 24px rgba(4,20,86,.07)
     .ms-auth-tabs  border-radius 360px                 <- main.css:2398 999px
     .ms-auth-tabs  background  #e3ecff                 <- main.css:2398 #edf0f7
     .ms-auth-tabs  padding     5px                     <- main.css:2398 4px

   Deliberately NOT restored, because they were never losing:
     .ms-auth-box border-radius 20px  - main.css agrees, same value
     .ms-auth-tabs width fit-content  - main.css sets no width, so it applies
     line-height 100% / width 100%    - percentages that compute to px; they
                                        look mismatched but are winning

   No !important needed: this file loads after main.css, so equal specificity
   is enough. Delete this whole section if post 44 is ever folded into the theme.
   ------------------------------------------------------------------------- */

.ms-auth-box {
	width: 400px;
	padding: 20px;
	box-shadow: 0px 0px 20px #00000017;
}

.ms-auth-tabs {
	border-radius: 360px;
	background: #e3ecff;
	padding: 5px;
}

/* -------------------------------------------------------------------------
   3. Astra button-declaration restores — Phase 1

   Astra's global button rule set six declarations across a very broad selector
   list (bare `button`, `.button`, every WooCommerce button):

     padding: 10px 20px;  border-radius: 30px;  border-width: 0;
     color: #fff;         font-weight: 500;     font-size: 16px;

   Phase 0 concluded these were inert because main.css overrode them. That was
   a PRESENCE check — it looked for buttons left with user-agent appearance and
   found none. Re-auditing at DECLARATION level against the Astra-era snapshot
   showed main.css only wins where it actually declares a property. Buttons
   that do not carry .btn kept Astra's values for the rest, and lost them.

   Restored below are only the declarations verified to render differently.
   Deliberately NOT restored: font-weight 500 -> 400 on .ms-icon-btn,
   #ms-hamburger and .ms-search-close. Those contain SVG icons and no text, so
   the weight has no visual effect.

   Method and full comparison in FINDINGS.md (Phase 1).
   ------------------------------------------------------------------------- */

/* Astra zeroed borders on all buttons. Without it these two fall back to the
   UA default 2px outset, which renders as a visible box. */
button.show-password-input,
button.ms-nav-links__close {
	border-width: 0;
}

/* WooCommerce's inline checkout login form. Hidden until the customer expands
   "Click here to login", which is why a presence check never saw it. Astra gave
   it a 30px pill with 10px/20px padding; it was rendering square and unpadded. */
button.woocommerce-button.button.woocommerce-form-login__submit {
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   INTERIM: My Account form styling
   -------------------------------------------------------------------------
   REMOVE THIS ENTIRE SECTION when the My Account redesign ships. It styles
   markup this theme does not own and does not intend to keep.

   WHY IT EXISTS
   WooCommerce's own form-edit-account.php is NOT overridden by this theme, so
   the Account Details form renders WooCommerce's markup with WooCommerce's
   classes. This theme has no shared form treatment -- every input rule in
   main.css is scoped to a wrapper (.ms-rl__form, .ms-cart-actions .coupon,
   .ms-auth-field) -- so that form matched nothing and fell back to browser
   defaults: black borders, inline labels, inconsistent widths, no spacing.

   SCOPE: .ms-myaccount__content
   That wrapper is emitted by this theme's own woocommerce/myaccount/
   my-account.php, so it is stable in a way the WooCommerce classes inside it
   are not. Every account endpoint renders inside it, which is deliberate:
   edit-account, edit-address, lost-password and reset-password all share
   .form-row and .input-text, so all four are covered by one set of rules and a
   future account endpoint inherits the treatment rather than arriving
   unstyled.

   The values mirror .ms-auth-field in main.css so this form matches the
   login form. Nothing here is functional: no positioning, no pointer-events,
   no content, nothing touching the password fields or the submit button's
   name/value. Appearance only.

   WHERE !important IS USED, AND WHY -- so whoever removes this knows what they
   are undoing. It appears ONLY on the input/select/textarea appearance rules
   and their focus state. Those compete with WooCommerce's own form CSS and
   with the block theme's wp-element-button/core styles, which are more
   specific. This mirrors what .ms-auth-field already does in main.css for the
   same reason. No other rule here needs it, and none uses it.
   ------------------------------------------------------------------------- */

.ms-myaccount__content .form-row {
	display: block;
	margin: 0 0 18px;
}

.ms-myaccount__content .form-row label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--ms-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #041456;
}

.ms-myaccount__content .form-row .required {
	color: #e53e3e;
	margin-left: 2px;
}

.ms-myaccount__content .input-text,
.ms-myaccount__content input[type="text"],
.ms-myaccount__content input[type="email"],
.ms-myaccount__content input[type="tel"],
.ms-myaccount__content input[type="password"],
.ms-myaccount__content select,
.ms-myaccount__content textarea {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1.5px solid #dde3ef !important;
	border-radius: 10px !important;
	font-family: var(--ms-font-display) !important;
	font-size: 15px !important;
	color: #041456 !important;
	background: #f8fafc !important;
	box-sizing: border-box !important;
	height: auto !important;
	line-height: 1.5 !important;
	outline: none !important;
	transition: border-color .18s, box-shadow .18s;
}

.ms-myaccount__content .input-text:focus,
.ms-myaccount__content input:focus,
.ms-myaccount__content select:focus,
.ms-myaccount__content textarea:focus {
	border-color: #0eccee !important;
	box-shadow: 0 0 0 3px rgba(14, 204, 238, .18) !important;
	background: #fff !important;
}

/* "Password change" reads as a group rather than three loose fields. */
.ms-myaccount__content fieldset {
	margin: 28px 0 0;
	padding: 20px;
	border: 1px solid var(--ms-border);
	border-radius: 12px;
}

.ms-myaccount__content fieldset legend {
	padding: 0 8px;
	font-family: var(--ms-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #041456;
}

/* WooCommerce floats these two; .clear below is its own clearer. */
@media (min-width: 640px) {
	.ms-myaccount__content .form-row-first,
	.ms-myaccount__content .form-row-last {
		float: left;
		width: 48%;
	}
	.ms-myaccount__content .form-row-last {
		float: right;
	}
}

.ms-myaccount__content .clear {
	clear: both;
}

/* Match the theme's primary button. Appearance only -- the button keeps its
   name="save_account_details" and its value, which is what submits the form. */
.ms-myaccount__content .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--ms-cyan);
	color: var(--ms-navy);
	font-family: var(--ms-font-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: filter .18s;
}

.ms-myaccount__content .woocommerce-Button:hover {
	filter: brightness(.94);
}

/* -------------------------------------------------------------------------
   Checkout coupon form (post-v2.0.0)

   The coupon area on checkout is rendered by woocommerce_checkout_coupon_form()
   → the WooCommerce form-coupon.php template:
     .woocommerce-form-coupon-toggle (.woocommerce-info inside)
     form.woocommerce-form-coupon (.input-text + button.button)

   The form lives inside #ms-checkout-notices (.ms-container.ms-wc-notices-wrap)
   in form-checkout.php. main.css styles .woocommerce-info notices globally but
   the form's input and button inherit WooCommerce defaults. Post 44 has no rules
   on any of these selectors.

   Reference: the cart page's .ms-cart-actions .coupon treatment in main.css.
   ------------------------------------------------------------------------- */

/* Toggle bar — "Have a coupon? Click here to enter your code"
   Matches the is-info notice treatment so it visually reads as a tip,
   not a form error. The inner .woocommerce-info element is the anchor. */
.woocommerce-form-coupon-toggle {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 4px;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	background: rgba( 14, 204, 238, 0.07 ) !important;
	border: 1px solid rgba( 14, 204, 238, 0.35 ) !important;
	border-left: 4px solid var(--ms-cyan) !important;
	border-radius: var(--ms-radius-md) !important;
	color: var(--ms-navy) !important;
	font-family: var(--ms-font-display) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none !important; /* remove WC's own icon character */
}

.woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--ms-navy) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
	color: var(--ms-cyan) !important;
}

/* The form: matches .ms-cart-actions .coupon layout, full container width. */
.woocommerce-form-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-form-coupon .form-row {
	margin: 0;
	padding: 0;
	flex: 1 1 220px;
}

.woocommerce-form-coupon .input-text {
	width: 100% !important;
	border: 1.5px solid var(--ms-border) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	font-family: var(--ms-font-display) !important;
	color: var(--ms-navy) !important;
	background: #f8fafc !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-sizing: border-box !important;
}

.woocommerce-form-coupon .input-text:focus {
	border-color: var(--ms-cyan) !important;
	box-shadow: 0 0 0 3px rgba( 14, 204, 238, 0.15 ) !important;
	background: #fff !important;
}

/* Apply button — primary site-button style (cyan fill, navy text). */
.woocommerce-form-coupon .button {
	background: var(--ms-cyan) !important;
	border: none !important;
	border-radius: 10px !important;
	color: var(--ms-navy) !important;
	font-family: var(--ms-font-display) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 10px 20px !important;
	cursor: pointer !important;
	transition: filter 0.15s !important;
	flex-shrink: 0;
}

.woocommerce-form-coupon .button:hover {
	filter: brightness( 0.92 ) !important;
}

@media ( max-width: 640px ) {
	.woocommerce-form-coupon .form-row {
		flex: 1 1 100%;
	}
	.woocommerce-form-coupon .button {
		width: 100% !important;
	}
}

/* -------------------------------------------------------------------------
   FacetWP — shop sidebar and drawer styling (post-v2.0.0)

   These rules only take effect once the client adds facet shortcodes to the
   ms/shop-topbar "FacetWP Filters" panel in the Site Editor. Until then
   facetShortcodes is empty and none of FacetWP's markup appears, so no rule
   here fires. Safe to ship before configuration.

   What is and is not possible, stated before configuration rather than after:

   CHECKBOXES (.facetwp-type-checkboxes)
     — CSS can match the look of .ms-sa__row: row height, padding, border-
       radius, hover state, custom checkbox indicator, counter badge.
     — FacetWP emits <div class="facetwp-checkbox"> flat lists with no group
       wrapper, no toggle button, no collapsible body. facetwp-ui.js (loaded
       on shop/category pages) rebuilds the accordion structure on every
       facetwp:loaded event so the groups look and behave identically to the
       PHP-built ones.
     — The counter text arrives as "(4)" with parentheses. facetwp-ui.js
       strips them after each render.

   SLIDER (.facetwp-type-slider)
     — This is a range slider with two draggable handles on a horizontal track
       (noUiSlider library). It does NOT look like a list of checkboxes. The
       accordion JS puts it in a labelled group ("Price") so the drawer can
       collapse it, but the control itself is a range slider — that is its
       function and you cannot make it into a list. The brand colours are
       applied below (--ms-navy track, --ms-cyan handles). If a price range
       slider is not the right UX, the alternative is a checkboxes facet on
       pre-defined price bands instead of a continuous slider.

   PAGER (.facetwp-type-pager)
     — Styled to match the brand below. However, the pager shortcode must go
       BELOW the product grid, not inside facetShortcodes (which renders in
       the sidebar). A separate pagerShortcode slot on ms/shop-grid is needed
       before the client can wire [facetwp facet="pager"] in the right place.
       Until that slot exists, keep WooCommerce's own pagination (the fallback
       already in shop-grid.php).

   ACTIVE FILTER BADGE ([data-shop-active])
     — The mobile badge and the desktop "X ×" clear-button are updated by
       facetwp-ui.js on facetwp:loaded, based on FWP.facets. initShop()'s
       own badge tracking is effectively neutered once facetShortcodes is
       non-empty (no [data-filter] buttons exist to bind to). The [data-
       clear-filters] button is also wired to FWP.reset() by facetwp-ui.js.

   This section belongs here, not in main.css, because it must load after
   FacetWP's own front.css (which cascade-fixes.css does: it depends on
   ms-main-style, which loads after WooCommerce and FacetWP assets at
   priority 99).
   ------------------------------------------------------------------------- */

/* -- Facet wrapper -------------------------------------------------------- */

/* Reset FacetWP's own margin-bottom: 40px. Groups are separated by the
   border-bottom already on .ms-sa__grp. */
.ms-sa .facetwp-facet,
.ms-sa--in-drawer .facetwp-facet {
	margin-bottom: 0;
}

/* -- Checkboxes ----------------------------------------------------------- */

/* Override FacetWP's PNG-based checkbox indicator and match .ms-sa__row. */
.ms-sa .facetwp-checkbox,
.ms-sa--in-drawer .facetwp-checkbox {
	background: none;     /* kills the checkbox.png background */
	padding-left: 0;      /* kills the 20px PNG indent */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 130ms;
	width: 100%;
	box-sizing: border-box;
}

.ms-sa .facetwp-checkbox:hover,
.ms-sa--in-drawer .facetwp-checkbox:hover {
	background: var(--ms-navy-50);
}

.ms-sa .facetwp-checkbox.checked,
.ms-sa--in-drawer .facetwp-checkbox.checked {
	background: var(--ms-navy-50);
}

/* Custom checkbox box (replaces the PNG). Matches .ms-sa__box dimensions. */
.ms-sa .facetwp-checkbox::before,
.ms-sa--in-drawer .facetwp-checkbox::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid var(--ms-border-strong);
	background: #fff;
	transition: background 130ms, border-color 130ms;
}

/* Checked: fill with cyan, navy border, SVG checkmark. */
.ms-sa .facetwp-checkbox.checked::before,
.ms-sa--in-drawer .facetwp-checkbox.checked::before {
	background: var(--ms-cyan)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%23041456' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 10px no-repeat;
	border-color: var(--ms-navy);
}

/* Disabled (zero-count options). */
.ms-sa .facetwp-checkbox.disabled,
.ms-sa--in-drawer .facetwp-checkbox.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Label text — matches .ms-sa__row-label. */
.ms-sa .facetwp-display-value,
.ms-sa--in-drawer .facetwp-display-value {
	flex: 1;
	font-family: var(--ms-font-display);
	font-weight: 500;
	font-size: 13px;
	color: var(--ms-navy);
	line-height: 1.2;
	text-align: left;
}

/* Count badge — matches .ms-sa__row-n. facetwp-ui.js strips the () from the
   text; the badge is styled for bare digits. */
.ms-sa .facetwp-counter,
.ms-sa--in-drawer .facetwp-counter {
	font-family: var(--ms-font-display);
	font-weight: 600;
	font-size: 10px;
	color: var(--ms-text-soft);
	background: var(--ms-navy-50);
	padding: 2px 6px;
	border-radius: 999px;
	min-width: 20px;
	text-align: center;
	line-height: 1.4;
	flex-shrink: 0;
}

.ms-sa .facetwp-checkbox.checked .facetwp-counter,
.ms-sa--in-drawer .facetwp-checkbox.checked .facetwp-counter {
	background: var(--ms-cyan);
	color: var(--ms-navy);
}

/* -- Slider --------------------------------------------------------------- */

/* The slider is a range control with two draggable handles on a horizontal
   track (noUiSlider). It cannot look like a list of checkboxes. It is given
   a labelled accordion group by facetwp-ui.js so it can be collapsed in the
   mobile drawer. Brand colours are applied here. */

.ms-sa .noUi-target,
.ms-sa--in-drawer .noUi-target {
	background: var(--ms-border);
	border: none;
	box-shadow: none;
	border-radius: 999px;
	height: 6px;
	margin: 10px 8px 4px;
}

.ms-sa .noUi-connect,
.ms-sa--in-drawer .noUi-connect {
	background: var(--ms-navy);
}

.ms-sa .noUi-handle,
.ms-sa--in-drawer .noUi-handle {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ms-navy);
	border: 2.5px solid var(--ms-cyan);
	box-shadow: 0 2px 6px rgba( 4, 20, 86, 0.25 );
	cursor: grab;
	top: -7px;
	right: -9px;
}

.ms-sa .noUi-handle::before,
.ms-sa .noUi-handle::after,
.ms-sa--in-drawer .noUi-handle::before,
.ms-sa--in-drawer .noUi-handle::after {
	display: none;
}

.ms-sa .facetwp-slider-label,
.ms-sa--in-drawer .facetwp-slider-label {
	display: block;
	margin: 10px 8px 0;
	font-family: var(--ms-font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--ms-navy);
}

.ms-sa .facetwp-slider-reset,
.ms-sa--in-drawer .facetwp-slider-reset {
	margin: 8px 8px 0;
	padding: 4px 10px;
	border: 1px solid var(--ms-border);
	border-radius: 6px;
	background: transparent;
	font-family: var(--ms-font-display);
	font-size: 11px;
	font-weight: 600;
	color: var(--ms-text-soft);
	cursor: pointer;
	transition: background 130ms, border-color 130ms, color 130ms;
}

.ms-sa .facetwp-slider-reset:hover,
.ms-sa--in-drawer .facetwp-slider-reset:hover {
	background: var(--ms-navy-50);
	border-color: var(--ms-border-strong);
	color: var(--ms-navy);
}

/* -- Pager ---------------------------------------------------------------- */

/* Styles both FacetWP's .facetwp-pager and WooCommerce's .woocommerce-
   pagination (the fallback while FacetWP's pager facet is not yet wired).
   The pager shortcode must go below the product grid, not in facetShortcodes
   (sidebar). See the note above. */

.facetwp-pager,
.woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
	margin-top: 28px;
	padding: 4px 0;
}

.facetwp-pager .facetwp-page,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border-radius: 8px;
	border: 1px solid var(--ms-border);
	background: transparent;
	color: var(--ms-navy);
	font-family: var(--ms-font-display);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 130ms, border-color 130ms;
}

.facetwp-pager .facetwp-page:hover,
.woocommerce-pagination .page-numbers:hover {
	background: var(--ms-navy-50);
	border-color: var(--ms-border-strong);
}

.facetwp-pager .facetwp-page.active,
.woocommerce-pagination .page-numbers.current {
	background: var(--ms-navy);
	border-color: var(--ms-navy);
	color: #fff;
}

.facetwp-pager .facetwp-page.dots,
.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	pointer-events: none;
}

/* Prev / Next as text links. */
.facetwp-pager .facetwp-page.prev,
.facetwp-pager .facetwp-page.next,
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
	color: var(--ms-navy);
	font-size: 12px;
	letter-spacing: 0.03em;
}

/* -- Reset facet ---------------------------------------------------------- */

/* FacetWP's built-in [facetwp facet="filter_reset"] emits a single button
   (.facetwp-reset) inside a wrapper (.facetwp-facet.facetwp-type-reset).
   The wrapFacets() accordion skips type="reset" (same as type="pager"), so the
   button renders bare inside .ms-sa — no accordion group around it. Styled to
   match the existing slider reset button for consistency. */
.ms-sa .facetwp-type-reset,
.ms-sa--in-drawer .facetwp-type-reset {
	padding: 8px 8px 4px;
}

.ms-sa .facetwp-reset,
.ms-sa--in-drawer .facetwp-reset {
	display: block;
	width: 100%;
	padding: 7px 14px;
	font-family: var(--ms-font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--ms-navy);
	background: transparent;
	border: 1px solid var(--ms-border);
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
	transition: background 130ms, border-color 130ms, color 130ms;
}

.ms-sa .facetwp-reset:hover,
.ms-sa--in-drawer .facetwp-reset:hover {
	background: var(--ms-navy-50);
	border-color: var(--ms-border-strong);
}


/* ── Thank-you page addresses (post-v2.0.0, ported from live patch) ─────────

   The WooCommerce order-received template renders billing and shipping
   addresses in a two-column layout using float or flexbox. Under the block
   theme the floats collapse, leaving both columns stacked and full-width.
   These rules restore the intended side-by-side grid.

   Selector set is broad on purpose: WooCommerce uses at least three different
   wrapper class names across versions (.col2-set, .woocommerce-columns,
   section.woocommerce-columns--addresses), and the exact one rendered
   depends on whether the block or classic checkout path is active.

   REMOVE this section when the my-account + order-received redesign ships,
   if that work rebuilds the address markup with theme-owned classes.
   ------------------------------------------------------------------------- */

section.woocommerce-columns--addresses,
.woocommerce-customer-details .col2-set,
.woocommerce-customer-details .woocommerce-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 32px !important;
	margin-top: 24px;
	float: none !important;
}

.woocommerce-customer-details .woocommerce-column,
.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2 {
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

.woocommerce-customer-details .woocommerce-column__title {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
}

@media (max-width: 767px) {
	section.woocommerce-columns--addresses,
	.woocommerce-customer-details .col2-set,
	.woocommerce-customer-details .woocommerce-columns {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.woocommerce-customer-details .woocommerce-column__title {
		font-size: 18px;
	}
}

/* ── Shipping methods — cart order summary + checkout order review ───────────
   WooCommerce renders the same cart-shipping.php template in both contexts:
   - Cart:     inside .woocommerce-shipping-totals > td
   - Checkout: inside .woocommerce-checkout-review-order-table via wc_cart_totals_shipping_html()
   Four methods are configured: UPS 2nd Day Air, UPS Next Day Air,
   USPS Ground Advantage, USPS Priority Mail.
   Post 44 has no rules on these selectors.
   --------------------------------------------------------------------------- */

ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
}

ul.woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1.5px solid var(--ms-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 160ms, background 160ms;
}

/* Selected method — navy border + very light navy tint */
ul.woocommerce-shipping-methods li:has( > input:checked ) {
	border-color: var(--ms-navy);
	background: rgba( 4, 20, 86, 0.04 );
}

/* Custom radio — hides UA appearance, draws a circle */
ul.woocommerce-shipping-methods input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--ms-border-strong);
	border-radius: 50%;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 160ms, box-shadow 160ms;
	margin: 0;
}

ul.woocommerce-shipping-methods input[type="radio"]:checked {
	border-color: var(--ms-navy);
	box-shadow: inset 0 0 0 4px var(--ms-navy);
}

/* Label — full method name + price (rendered by wc_cart_totals_shipping_method_label()) */
ul.woocommerce-shipping-methods label {
	flex: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--ms-font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--ms-navy);
	cursor: pointer;
	margin: 0;
	line-height: 1.3;
}

/* "Shipping to City, ST. Change address" */
p.woocommerce-shipping-destination {
	margin: 10px 0 0;
	font-family: var(--ms-font-display);
	font-size: 12px;
	color: var(--ms-text-muted);
	line-height: 1.4;
}

p.woocommerce-shipping-destination a {
	color: var(--ms-cyan);
	font-weight: 600;
	text-decoration: none;
}

p.woocommerce-shipping-destination a:hover {
	text-decoration: underline;
}

/* ── Checkout error notices ──────────────────────────────────────────────────
   Two notice paths, same checkout page:

   Classic (form-checkout.php): <ul class="woocommerce-error">
     main.css line 1157 gives the outer ul a pink background + 3px red left
     border (the generic notice treatment). Lines 2266+ style individual li
     items with their own border + tinted background. The ul-level decoration
     creates a double-styled "strip behind a list" appearance. Strip it so the
     li items carry the treatment alone.

   Block path: <div class="wc-block-components-notice-banner is-error">
     cascade-fixes.css already styles is-info. Error follows the same layout
     with red/rose tones to maintain severity signalling.
   --------------------------------------------------------------------------- */

ul.woocommerce-error {
	background: none !important;
	border-left: none !important;
	border-radius: 0 !important;
}

.wc-block-components-notice-banner.is-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px !important;
	margin: 0 0 12px;
	background: rgba( 220, 53, 69, 0.06 );
	border: 1px solid #dc3545;
	border-left: 4px solid #dc3545;
	border-radius: var(--ms-radius-md);
	color: #7a0010;
	font-family: var(--ms-font-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

/* The error SVG is a single-color icon. Wrap it in a red pill so it reads as
   a coloured badge, then drive the icon content white via currentColor. */
.wc-block-components-notice-banner.is-error > svg {
	flex-shrink: 0;
	margin-top: 0;
	width: 26px;
	height: 26px;
	min-width: 26px;
	background: #dc3545;
	border-radius: 50%;
	padding: 5px;
	color: #fff;
	fill: #fff;
	box-sizing: border-box;
}

/* Same treatment for info and success icons wherever a solid background applies */
.wc-block-components-notice-banner.is-info > svg {
	flex-shrink: 0;
	margin-top: 0;
	width: 26px;
	height: 26px;
	min-width: 26px;
	background: var(--ms-cyan);
	border-radius: 50%;
	padding: 5px;
	color: var(--ms-navy);
	fill: var(--ms-navy);
	box-sizing: border-box;
}

.wc-block-components-notice-banner.is-success > svg {
	flex-shrink: 0;
	margin-top: 0;
	width: 26px;
	height: 26px;
	min-width: 26px;
	background: #198754;
	border-radius: 50%;
	padding: 5px;
	color: #fff;
	fill: #fff;
	box-sizing: border-box;
}

.wc-block-components-notice-banner.is-error a {
	color: #7a0010;
	font-weight: 700;
	text-decoration: underline;
}

/* ── State field — select2 / selectWoo ──────────────────────────────────────
   WooCommerce's classic checkout enhances the #billing_state and
   #shipping_state <select> elements with select2 (bundled as "selectWoo").
   select2 gives .select2-selection--single a fixed height of 28px and a
   line-height of 28px. The checkout form's own field container is taller
   (the theme's .ms-rl__form style block sets 48px fields). The mismatch
   causes the selected value ("Florida") to render outside the visible
   container border — it clips below the selection box and overlaps the
   next field's label.

   Fix: override the fixed height with auto + controlled padding, and reset
   the line-height so the rendered value sits inside the container.
   Post 44 has no rules on select2 selectors.
   --------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single {
	height: auto !important;
	min-height: 44px !important;
	display: flex !important;
	align-items: center !important;
	padding: 10px 40px 10px 14px !important;
	border: 1.5px solid var(--ms-border) !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
	box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.5 !important;
	color: var(--ms-navy) !important;
	font-family: var(--ms-font-display) !important;
	font-size: 15px !important;
	position: static !important;
	top: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--ms-text-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 10px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--ms-cyan) !important;
	box-shadow: 0 0 0 3px rgba( 14, 204, 238, 0.15 ) !important;
	outline: none !important;
}

/* Dropdown results */
.select2-dropdown {
	border: 1.5px solid var(--ms-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba( 4, 20, 86, 0.1 ) !important;
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--ms-navy) !important;
}

/* ── Checkout order summary — variable product attributes ────────────────────
   wc_get_formatted_cart_item_data() inserts a <dl class="variation"> after
   the product name in .product-name cells. WooCommerce's review-order.php
   leaves .product-total at its default vertical-align (middle), so the price
   aligns to the vertical midpoint of the stacked name + attributes, not to
   the product name row.
   Post 44 has no rules on these selectors.
   --------------------------------------------------------------------------- */

.woocommerce-checkout-review-order-table .product-total {
	vertical-align: top;
}

/* Inline attribute display: "Flavor: Mango · Count: 30" */
.woocommerce-checkout-review-order-table dl.variation {
	display: block;
	margin: 4px 0 0;
	font-family: var(--ms-font-display);
	font-size: 11px;
	color: var(--ms-text-muted);
	line-height: 1.5;
}

.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 500;
}

.woocommerce-checkout-review-order-table dl.variation dt::after {
	content: ': ';
}

.woocommerce-checkout-review-order-table dl.variation dd::after {
	content: ' · ';
}

.woocommerce-checkout-review-order-table dl.variation dd:last-of-type::after {
	content: '';
}

/* ==========================================================================
   Section 12 — My Account order action buttons + Thank You page card
   WooCommerce renders these with its own classes; main.css has no rule for them.
   ========================================================================== */

/* ── My Account: orders table action buttons (Pay / View / Cancel) ────────── */

.woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	font-family:     var(--ms-font-display);
	font-weight:     600;
	font-size:       13px;
	line-height:     1;
	padding:         9px 18px;
	border-radius:   999px;
	border:          1.5px solid transparent;
	cursor:          pointer;
	text-decoration: none;
	letter-spacing:  0.01em;
	transition:      background 0.18s, color 0.18s, border-color 0.18s;
	margin:          0 4px 4px 0;
}

/* Pay → primary (cyan fill) */
.woocommerce-orders-table__cell-order-actions .woocommerce-button.pay {
	background:   var(--ms-cyan);
	color:        var(--ms-navy);
	border-color: var(--ms-cyan);
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.pay:hover {
	background:   #00bfe6;
	border-color: #00bfe6;
	color:        var(--ms-navy);
}

/* View → navy outline */
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
	background:   transparent;
	color:        var(--ms-navy);
	border-color: var(--ms-navy);
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view:hover {
	background:   var(--ms-navy);
	color:        #fff;
}

/* Cancel → muted outline */
.woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel {
	background:   transparent;
	color:        var(--ms-text-muted);
	border-color: var(--ms-border);
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel:hover {
	background:   #f3f4f6;
	border-color: var(--ms-text-muted);
	color:        var(--ms-text);
}

/* ── Thank You page: order details card internals ─────────────────────────── */

/* "Order details" heading */
.ms-thankyou__card .woocommerce-order-details__title {
	font-family:    var(--ms-font-display);
	font-weight:    700;
	font-size:      1.1rem;
	color:          var(--ms-navy);
	margin:         0 0 16px;
	padding-bottom: 12px;
	border-bottom:  1.5px solid var(--ms-border);
}

/* "Billing address" / "Shipping address" headings (h2.woocommerce-column__title).
   main.css sets h2 { font-size: clamp(28px,3vw,40px) } which can reach ~36px.
   Force 22px — !important wins over the clamp regardless of cache state. */
.ms-thankyou__card h2.woocommerce-column__title {
	font-family:    var(--ms-font-display) !important;
	font-weight:    600 !important;
	font-size:      22px !important;
	color:          var(--ms-navy) !important;
	margin:         0 0 12px !important;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--ms-border);
}

/* Order details table inside the card */
.ms-thankyou__card table.woocommerce-table--order-details {
	width:       100%;
	border:      none;
	font-family: var(--ms-font-body);
	font-size:   14px;
	color:       var(--ms-text);
}

.ms-thankyou__card table.woocommerce-table--order-details thead th {
	font-family:  var(--ms-font-display);
	font-weight:  600;
	font-size:    12px;
	color:        var(--ms-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding:      8px 12px;
	border-bottom: 1.5px solid var(--ms-border);
	background:   transparent;
	text-align:   left !important;
}

/* Product name column — th browser-default is center; override explicitly */
.ms-thankyou__card table.woocommerce-table--order-details .product-name,
.ms-thankyou__card table.woocommerce-table--order-details tfoot th {
	text-align: left !important;
}

.ms-thankyou__card table.woocommerce-table--order-details tbody td {
	padding:      12px;
	border-bottom: 1px solid var(--ms-border);
	vertical-align: middle;
}

.ms-thankyou__card table.woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: none;
}

/* Product name link */
.ms-thankyou__card table.woocommerce-table--order-details .woocommerce-table__product-name a {
	color:           var(--ms-navy);
	font-weight:     600;
	text-decoration: none;
}
.ms-thankyou__card table.woocommerce-table--order-details .woocommerce-table__product-name a:hover {
	color: var(--ms-cyan);
}

/* Totals foot */
.ms-thankyou__card table.woocommerce-table--order-details tfoot th,
.ms-thankyou__card table.woocommerce-table--order-details tfoot td {
	font-family:  var(--ms-font-display);
	font-weight:  600;
	font-size:    14px;
	padding:      10px 12px;
	border-top:   1.5px solid var(--ms-border);
	color:        var(--ms-navy);
}

.ms-thankyou__card table.woocommerce-table--order-details tfoot tr.order-total th,
.ms-thankyou__card table.woocommerce-table--order-details tfoot tr.order-total td {
	font-size: 15px;
}

/* Strip WC's default <p> margin inside dd */
.woocommerce-checkout-review-order-table dl.variation dd p {
	display: inline;
	margin: 0;
}

/* ── Thank-you / order-received page — branding polish (post-v2.0.0) ─────────
   woocommerce/checkout/thankyou.php already emits ms-thankyou__* markup; this
   file only drives the visual treatment. Dynamic tokens come from theme.json.
   Post 44 has one rule: .woocommerce-order-received section.ms-page-hero { display:none }
   (no conflicts here).
   --------------------------------------------------------------------------- */

/* Page hero heading */
.ms-thankyou__hero-title {
	font-family: var(--ms-font-display);
	color: var(--ms-navy);
}

/* Card container */
.ms-thankyou__card {
	background: #fff;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-lg, 16px);
	box-shadow: 0 2px 12px rgba( 4, 20, 86, 0.07 );
	overflow: hidden;
}

/* Card header strip */
.ms-thankyou__card-header {
	background: var(--ms-navy);
	color: #fff;
	font-family: var(--ms-font-display);
	font-weight: 700;
}

/* Order meta grid — order number, date, email, payment */
.ms-thankyou__meta {
	font-family: var(--ms-font-display);
	color: var(--ms-text);
}

.ms-thankyou__meta dt {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ms-text-muted);
}

.ms-thankyou__meta dd {
	font-size: 15px;
	font-weight: 700;
	color: var(--ms-navy);
	margin: 0;
}

/* Address blocks — side by side on desktop */
.ms-thankyou__addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ms-thankyou__address-block {
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-md, 10px);
	padding: 16px 20px;
}

.ms-thankyou__address-block h3,
.ms-thankyou__address-block .ms-thankyou__address-heading {
	font-family: var(--ms-font-display);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ms-navy);
	margin: 0 0 10px;
}

.ms-thankyou__address-block address {
	font-family: var(--ms-font-display);
	font-size: 14px;
	color: var(--ms-text);
	line-height: 1.6;
	font-style: normal;
}

@media ( max-width: 640px ) {
	.ms-thankyou__addresses {
		grid-template-columns: 1fr;
	}
}

/* WooCommerce order-detail table inside the thank-you card */
.ms-thankyou__card .woocommerce-table--order-details,
.woocommerce-order-received .woocommerce-table--order-details {
	font-family: var(--ms-font-display);
	border-collapse: collapse;
	width: 100%;
}

.ms-thankyou__card .woocommerce-table--order-details th,
.ms-thankyou__card .woocommerce-table--order-details td,
.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
	border-bottom: 1px solid var(--ms-border);
	padding: 10px 12px;
	color: var(--ms-navy);
}

/* Trust strip below the CTAs */
.ms-thankyou__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 32px;
	padding: 20px 0 0;
}

.ms-thankyou__trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ms-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ms-text-muted);
}

.ms-thankyou__trust-item [data-lucide],
.ms-thankyou__trust-item i[data-lucide] {
	width: 18px;
	height: 18px;
	stroke: var(--ms-cyan);
	flex-shrink: 0;
}

/* btn-outline: mirror .btn.btn-outline from main.css if not defined globally */
.ms-thankyou__ctas .btn-outline,
.woocommerce-order-received .btn-outline {
	background: transparent;
	border: 2px solid var(--ms-navy);
	color: var(--ms-navy);
	font-family: var(--ms-font-display);
	font-weight: 700;
	border-radius: 10px;
	padding: 11px 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background 0.18s, color 0.18s;
}

.ms-thankyou__ctas .btn-outline:hover,
.woocommerce-order-received .btn-outline:hover {
	background: var(--ms-navy);
	color: #fff;
}

/* ── Product gallery — single image (no thumbnail rail) ─────────────────────
   When a product has only one image, product-gallery.php omits the
   .ms-gallery__thumbs-wrap and adds .ms-product-gallery--single to the grid
   container. Without this rule the 88px first column is still allocated by
   the grid, leaving an invisible empty rail on the left.
   --------------------------------------------------------------------------- */

.ms-product-gallery--single {
	grid-template-columns: 1fr;
}

.ms-product-gallery--single .ms-gallery__main-wrap {
	grid-column: 1;
}

/* ── Live search results — #ms-live-search-results inside #ms-search-sidebar ──
   The sidebar is 380px wide; results appear below the search form field.
   --------------------------------------------------------------------------- */

.ms-live-search__results {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: calc( 100vh - 200px );
	overflow-y: auto;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-md, 10px);
	background: #fff;
	box-shadow: 0 4px 16px rgba( 4, 20, 86, 0.1 );
}

.ms-live-search__results[hidden] {
	display: none;
}

.ms-live-search__loading {
	padding: 16px;
	font-family: var(--ms-font-display);
	font-size: 13px;
	color: var(--ms-text-muted);
	text-align: center;
}

.ms-live-search__empty {
	padding: 16px;
	font-family: var(--ms-font-display);
	font-size: 14px;
	color: var(--ms-text-muted);
	text-align: center;
}

.ms-live-search__group + .ms-live-search__group {
	border-top: 1px solid var(--ms-border);
}

.ms-live-search__label {
	padding: 10px 14px 4px;
	font-family: var(--ms-font-display);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ms-text-muted);
}

.ms-live-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	transition: background 0.15s;
}

.ms-live-search__item:hover {
	background: rgba( 4, 20, 86, 0.04 );
}

.ms-live-search__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: var(--ms-surface);
}

.ms-live-search__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ms-live-search__name {
	font-family: var(--ms-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ms-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-live-search__price {
	font-family: var(--ms-font-display);
	font-size: 12px;
	font-weight: 500;
	color: var(--ms-text-muted);
}

.ms-live-search__excerpt {
	font-family: var(--ms-font-display);
	font-size: 12px;
	color: var(--ms-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-live-search__item--post .ms-live-search__name {
	white-space: normal;
	overflow: visible;
}

/* ── Footer legal bar — link colour ─────────────────────────────────────────
   .ms-footer__legal wraps .ms-footer__copyright and .ms-footer__disclaimer.
   wp_kses allows <a> tags in the copyright/disclaimer text; colour them cyan
   so they read against the dark navy footer background.
   --------------------------------------------------------------------------- */

.ms-footer__legal a {
	color: var(--ms-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-footer__legal a:hover {
	opacity: 0.8;
}

/* ===========================================================================
   MOBILE QA FIXES — 2026-09-17
   Bugs 1, 2, 4, 5, 7 are scoped to @media (max-width: 767px); desktop is
   untouched. Bug 3 is intentionally all-viewport (requested).
   Remove any single block below to revert that one fix.
   =========================================================================== */

/* --- BUG 3: Newsletter signup hidden site-wide, ALL viewports. -------------
   Pending the newsletter signups-not-saving bug. TO RE-ENABLE: delete this
   rule. The block, its markup and its 3 template placements are untouched. */
.ms-estrip { display: none !important; }

@media (max-width: 767px) {

  /* --- BUG 1: header hamburger overflowed the viewport. -------------------
     .ms-nav__inner had gap:24px and the mobile-hidden desktop nav was still a
     flex item at width 0, consuming a gap. 153+0+162+48 = 363px needed vs
     343px available at 375px, pushing the hamburger's right edge to 379px. */
  .ms-nav__inner { gap: 10px; }
  .ms-nav__inner > .ms-nav__menu,
  .ms-nav__inner > nav.main-navigation:not(.open) { display: none; }
  .ms-nav__logo { min-width: 0; flex-shrink: 1; }
  .ms-nav__logo img { max-width: 100%; height: auto; }
  .ms-nav__right { flex: 0 0 auto; }

  /* --- BUG 2: hero image capped at 220px inside a 343px container, leaving
     empty .ms-hero__media background either side (main.css:2600, :2608). */
  .ms-hero__img { max-width: 100%; }

  /* --- BUG 4: shop grid forced to 1 column by main.css:789 (!important). */
  .ms-shop__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  /* --- BUG 5: PDP add-to-cart shared a line with the qty stepper. --------- */
  .woocommerce-variation-add-to-cart,
  form.cart { flex-wrap: wrap; }
  .woocommerce-variation-add-to-cart .quantity,
  form.cart .quantity { flex: 0 0 auto; }
  .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  form.cart .single_add_to_cart_button { flex: 1 0 100%; width: 100%; margin-top: 12px; }

  /* --- BUG 7: related / upsell grids forced to 1 column by main.css:310
     and :1210. Scoped to .ms-section so other .grid-4 uses are unaffected. */
  .ms-section .grid-4,
  .ms-section .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

}

/* --- BUG 8: PDP breadcrumb safety net (2026-09-17) -------------------------
   The crumb row is flex-wrap:nowrap, so a long product name cannot wrap to a
   second line - it compresses the last crumb and wraps inside a squeezed box.
   Short names (e.g. Blueberry) already render fine on one line and are
   unchanged by this; it only engages when the row would otherwise be squeezed. */
@media (max-width: 767px) {
  .ms-pd__crumbs { flex-wrap: wrap; row-gap: 4px; font-size: 12px; }
  .ms-pd__crumbs > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* --- BUG 12: coupon pill background (2026-09-18) --------------------------
   ALL viewports, by request. The input is already transparent; the white came
   from the .coupon wrapper (main.css:1903). #f8f9fc matches every other input
   on the site (cf. .search-field). */
.ms-cart-items .coupon { background: var(--ms-surface, #f8f9fc); }

/* --- BUG 10: horizontal scroll on mobile ---------------------------------
   The side-cart drawer is position:fixed but parked with left/right offsets
   (left:443.75px; right:-425px) rather than a transform, so its box runs to
   x=800 on a 375px viewport. iOS extends the pannable area for fixed elements
   outside the viewport, which pans the VISUAL viewport and drags genuinely
   fixed bars (.ms-sticky-cta) along with it.
   `overflow-x: clip` differs from `hidden`: it creates no scroll container,
   so it cannot be panned. The max-width cap addresses the source. */
@media (max-width: 767px) {
  html, body { overflow-x: clip !important; }
  .xoo-wsc-container { max-width: 100vw !important; }
}

/* --- BUG 10 (narrow, 2026-09-18): park the side cart with a transform ------
   inline-style.php:257 parks the drawer at `right: -425px` when closed, so its
   LAYOUT box sits 425px outside the viewport on every page (printed on
   wp_footer site-wide - why /cart/ and /checkout/ behave identically). iOS
   extends the pannable area for fixed elements offset outside the viewport,
   which pans the visual viewport and drags truly-fixed bars (.ms-sticky-cta).

   This pins the layout box inside the viewport and moves the drawer visually
   with a transform instead. Deliberately minimal: no visibility gate, no
   transition override - the plugin's own `transition: .5s ease-out`
   (xoo-wsc-style.css:15) continues to drive the slide.
   .ms-search-sidebar already uses right:0 + translateX(100%) (main.css:378)
   and needs no change. */
.xoo-wsc-container {
  right: 0 !important;
  transform: translateX(100%);
}
.xoo-wsc-cart-active .xoo-wsc-container {
  transform: translateX(0);
}

/* --- CHECKOUT horizontal overflow: grid track blowout (2026-09-23) --------
   .ms-checkout-layout collapses to `grid-template-columns: 1fr` at <=900px
   (main.css:1682, :2172, :2742). `1fr` is minmax(auto, 1fr), and the `auto`
   MINIMUM resolves to the content's min-content width - so if the checkout
   form/order-review is intrinsically wider than the container, the track
   cannot shrink and the page overflows horizontally.

   This is the same defect measured on .ms-cart-layout, where the track
   resolved to a fixed 349.17px inside a 343px container (6px over at 375px,
   21px over at 360px - it gets WORSE as the viewport narrows).

   Note .ms-checkout-main and .ms-checkout-form already carry `min-width: 0`
   (main.css:1677, :2066) - that fixes a FLEX/GRID ITEM blowout but NOT a
   TRACK blowout. The track minimum has to be set to 0 explicitly. */
@media (max-width: 900px) {
  .ms-checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- THANK YOU / order-received: strip stacked section padding on mobile ---
   WooCommerce renders the customer details and address columns as <section>
   elements. main.css:1294 applies a blanket
     @media (max-width:768px){ section, .ms-section {
       padding-top:48px !important; padding-bottom:48px !important; } }
   which lands on BOTH nested sections - 48+48 twice = 192px of stacked
   vertical padding, the large empty bands on the order-received page.
   Needs !important to beat that rule. A 16px margin is kept so the two
   address blocks still read as separate. Measured: card height 1441 -> 1145px
   (296px reclaimed) at 375px. Scoped to body.woocommerce-order-received, so
   no other page's section spacing changes. */
@media (max-width: 768px) {
  body.woocommerce-order-received .woocommerce-customer-details,
  body.woocommerce-order-received .woocommerce-columns--addresses,
  body.woocommerce-order-received section.woocommerce-order-details {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.woocommerce-order-received .woocommerce-columns--addresses { margin-top: 16px; }
}

/* =========================================================================
   FAQ ACCORDION  (ms/faq-accordion)                            2026-09-23
   Uses only existing design tokens — no new colours or spacing values.
   Tokens reused: --ms-navy, --ms-cyan, --ms-surface, --ms-border,
   --ms-text-muted, --ms-font-display. Radius 12px and the cyan focus ring
   rgba(14,204,238,…) match .ms-thankyou__card and the site's input focus
   styles respectively.
   ========================================================================= */

.ms-faq__heading {
  font-family: var(--ms-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ms-navy);
  margin: 0 0 24px;
}

.ms-faq__list { display: flex; flex-direction: column; gap: 12px; }

.ms-faq__item {
  background: #fff;
  border: 1px solid var(--ms-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ms-faq__item:has(.ms-faq__q[aria-expanded="true"]) {
  border-color: var(--ms-cyan);
  box-shadow: 0 6px 20px rgba(4, 20, 86, 0.06);
}

/* h3 wrapper keeps the heading outline for screen readers without adding
   any visual weight of its own. */
/* .ms-wysiwyg h3 (0,1,1) beats a bare .ms-faq__q-wrap (0,1,0) and was forcing
   40px top / 16px bottom onto every accordion header. .ms-faq prefix makes
   this (0,2,0) so the reset actually wins. */
.ms-faq .ms-faq__q-wrap { margin: 0; font-size: inherit; font-weight: inherit; }

.ms-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ms-navy);
  transition: background .18s ease;
}
.ms-faq__q:hover { background: var(--ms-navy-50); }
.ms-faq__q:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(14, 204, 238, 0.35);
}

.ms-faq__q-text { flex: 1 1 auto; min-width: 0; }

/* Chevron drawn in CSS so the block carries no icon-font dependency. */
.ms-faq__icon {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--ms-cyan);
  border-bottom: 2px solid var(--ms-cyan);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .28s ease;
}
.ms-faq__item.is-open .ms-faq__icon { transform: rotate(-135deg); }

.ms-faq__a[hidden] { display: none; }

@keyframes ms-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.ms-faq__a { animation: ms-faq-reveal .22s ease both; }

.ms-faq__a-inner {
  padding: 0 20px 18px;
  color: var(--ms-text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.ms-faq__a-inner p { margin: 0 0 10px; }
.ms-faq__a-inner p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .ms-faq__list { gap: 10px; }
  .ms-faq__q { padding: 15px 16px; font-size: 14px; gap: 12px; }
  .ms-faq__a-inner { padding: 0 16px 15px; font-size: 14px; }
  .ms-faq__heading { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-faq__a, .ms-faq__icon, .ms-faq__item, .ms-faq__q { transition: none; }
}

/* --- FAQ section: drop the block's own section padding --------------------
   The block renders inside .ms-page__body.ms-section, which already supplies
   the site's section rhythm (80px desktop / 48px mobile). Carrying .ms-section
   on the block too stacked a second 80px, giving the large empty band above
   the "Frequently Asked Questions" heading.
   !important is required: main.css:1294 sets
   `section, .ms-section { padding-top:48px !important; padding-bottom:48px !important }`
   at <=768px, which a normal declaration cannot beat.
   Scoped to .ms-faq, so only this block is affected. */
section.ms-faq {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================================
   CONTACT PAGE BLOCKS                                          2026-09-23
   ms/contact-info · ms/contact-split · ms/contact-map
   Only existing tokens are used: --ms-navy, --ms-cyan, --ms-border,
   --ms-surface, --ms-text-muted, --ms-font-display. Radius 12px and the
   card treatment match .ms-faq__item / .ms-thankyou__card. Spacing steps
   stay on the site's 12 / 16 / 20 / 24 / 32 scale.
   ========================================================================= */

/* ---- Section 2: info boxes ------------------------------------------- */
.ms-cinfo__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.ms-cinfo__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ms-border);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}
.ms-cinfo__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ms-navy);
  color: var(--ms-cyan);
}
.ms-cinfo__icon svg { width: 20px; height: 20px; }
.ms-cinfo__body { min-width: 0; }
.ms-cinfo__label {
  font-family: var(--ms-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
  margin-bottom: 4px;
}
.ms-cinfo__value {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ms-navy);
  overflow-wrap: anywhere;
  display: block;
  text-decoration: none;
}
.ms-cinfo__card a.ms-cinfo__value { color: var(--ms-navy); }
.ms-cinfo__card a.ms-cinfo__value:hover { color: var(--ms-cyan-600); text-decoration: underline; }

/* ---- Section 3: split copy + form ------------------------------------ */
.ms-csplit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.ms-csplit .ms-csplit__heading {
  font-family: var(--ms-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ms-navy);
  margin: 0 0 16px;
}
.ms-csplit__body { color: var(--ms-text-muted); font-size: 15px; line-height: 1.7; }
.ms-csplit__body p { margin: 0 0 14px; }
.ms-csplit__body p:last-child { margin-bottom: 0; }
.ms-csplit__form { min-width: 0; }
.ms-csplit__placeholder {
  border: 1px dashed var(--ms-border-strong);
  border-radius: 12px;
  padding: 20px;
  background: var(--ms-bg);
  color: var(--ms-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ms-csplit__placeholder strong { display: block; color: var(--ms-navy); margin-bottom: 6px; }
.ms-csplit__placeholder p { margin: 0; }

/* ---- Section 4: map --------------------------------------------------- */
.ms-cmap__frame {
  position: relative;
  width: 100%;
  height: var(--ms-cmap-h, 440px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ms-border);
}
.ms-cmap__iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 767px) {
  .ms-cinfo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ms-cinfo__card { padding: 14px; gap: 10px; flex-direction: column; }
  .ms-cinfo__icon { width: 34px; height: 34px; }
  .ms-cinfo__icon svg { width: 17px; height: 17px; }
  .ms-cinfo__value { font-size: 13px; }

  .ms-csplit__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ms-csplit__body { font-size: 14px; }

  .ms-cmap__frame { height: 320px; border-radius: 12px; }
}

/* --- Contact Us: full 1280px content width ------------------- 2026-09-23
   Generic pages are capped at 760px by .ms-page-content (main.css:1567) and
   840px by the .ms-container--narrow wrapper — a deliberate reading measure
   for text pages. Contact Us is a layout page, not prose, so it should match
   Home / Shop / Product instead.

   Scoped to body.page-id-8670 (WordPress emits this per page; FAQ is
   page-id-215, Privacy page-id-3, etc.) so no other page is touched. Body
   class scoping is the pattern already used in this file for the
   order-received overrides.

   The wrapper's own max-width AND padding are both cleared so the blocks'
   own .ms-container (1280px, 20px padding) positions content exactly as it
   does on Home/Shop — otherwise the two containers' padding would stack and
   land 40px narrower. */
body.page-id-8670 .ms-page-content { max-width: none; }

body.page-id-8670 .ms-page__body .ms-container--narrow {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- Contact split: card treatment ------------------------- 2026-09-23
   Both columns become cards. The backdrop is body #F4F6FB, so white reads
   as a card on the right, and the left needs a token one step DARKER than
   the backdrop. --ms-surface (#f8f9fc) is LIGHTER than #F4F6FB and would
   disappear, so --ms-navy-50 (#EEF1F9) is used instead.
   Radius 12px matches .ms-cmap__frame / .ms-csplit__placeholder. */
.ms-csplit .ms-csplit__grid {
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: stretch;
  background: var(--ms-white);
  border-radius: 12px;
  padding: 24px;
  gap: 24px;
}
.ms-csplit__copy,
.ms-csplit__form {
  padding: 40px;
  border-radius: 12px;
}
.ms-csplit__copy { background: var(--ms-navy-50); }
.ms-csplit__form { background: transparent; }

/* Badge - declarations copied from .ms-qs__eyebrow (main.css:573). */
.ms-csplit__badge {
  display: inline-block;
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ms-navy);
  background: var(--ms-yellow);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

/* Blue-tinted muted tone rather than the neutral grey (Flag B). */
.ms-csplit .ms-csplit__body { color: var(--ms-text-soft); }

/* Form: lift WPForms' `medium` 60% cap so fields fill the card. */
.ms-csplit__form .wpforms-field { padding: 0 0 20px; }
.ms-csplit__form .wpforms-field-row.wpforms-field-medium,
.ms-csplit__form input.wpforms-field-medium,
.ms-csplit__form textarea.wpforms-field-medium { max-width: 100%; width: 100%; }
/* gap:0 - WPForms already gutters this row via 10px padding on each block;
   adding a flex gap on top squeezed First/Last 16px in from the card edges. */
.ms-csplit__form .wpforms-field-row { display: flex; gap: 0; }
.ms-csplit__form .wpforms-field-row-block { flex: 1 1 0; min-width: 0; }

.ms-csplit__form .wpforms-field-label {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ms-navy);
  margin-bottom: 8px;
}
.ms-csplit__form .wpforms-field-sublabel {
  font-size: 12px;
  color: var(--ms-text-soft);
}
.ms-csplit__form input[type="text"],
.ms-csplit__form input[type="email"],
.ms-csplit__form textarea {
  width: 100%;
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--ms-text);
  background: var(--ms-white);
}
.ms-csplit__form input[type="text"]:focus,
.ms-csplit__form input[type="email"]:focus,
.ms-csplit__form textarea:focus {
  outline: none;
  border-color: var(--ms-cyan);
  box-shadow: var(--ms-shadow-glow);
}

/* Submit: navy, bold, sized to its label, left-aligned. */
.ms-csplit__form .wpforms-submit-container { padding: 0; text-align: left; }

/* Align the form's first field with the badge opposite it: WPForms ships
   .wpforms-container with margin: 24px auto, which pushed the whole form
   24px below the card's 40px padding edge. The div. prefix beats WPForms'
   own div.wpforms-container-full without needing !important. */
.ms-csplit__form div.wpforms-container { margin-top: 0; margin-bottom: 0; }

/* WPForms adds 10px here, making the gap before Submit 30px against the
   20px rhythm between fields. */
.ms-csplit__form form.wpforms-form .wpforms-submit-container { margin-top: 0; }
.ms-csplit__form form.wpforms-form button.wpforms-submit[type="submit"] {
  display: inline-block;
  width: auto;
  background: var(--ms-navy);
  color: var(--ms-white);
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms;
}
.ms-csplit__form form.wpforms-form button.wpforms-submit[type="submit"]:hover { background: var(--ms-navy-600); }

/* Re-declared after the desktop rules above so it wins on ordering. */
@media (max-width: 767px) {
  .ms-csplit .ms-csplit__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px; }
  .ms-csplit__copy,
  .ms-csplit__form { padding: 24px; }
}

/* --- Contact Us: drop the info strip's vertical padding ---- 2026-09-24
   .section/.ms-section sets 80px top+bottom (main.css), and the <=768px
   variant sets 48px !important -- hence !important here so the override
   holds at every breakpoint. Scoped to page-id-8670 so no other section
   or page loses its rhythm. */
body.page-id-8670 .ms-cinfo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Product card: out-of-stock badge ---------------------- 2026-09-24
   Sits top-RIGHT so it can never overlap the yellow sale/bestseller badge
   at top-left. Muted blue-grey rather than red: out of stock is
   informational, not an error. Everything else inherits .pcard .badge. */
.pcard .badge--stock {
  left: auto;
  right: 12px;
  background: var(--ms-navy-500);
  color: var(--ms-white);
  box-shadow: 0 2px 8px rgba(4, 20, 86, 0.18), 0 0 0 1.5px var(--ms-navy);
}

/* Below 375px WPForms drops its own 10px block padding (it expects the
   name fields to stack there). Our flex:1 1 0 kept them side by side, so
   the gutter collapsed to 0 and the two inputs touched. Let them stack
   full-width instead, which also gives better tap targets at 360px. */
@media (max-width: 374px) {
  .ms-csplit__form .wpforms-field-row-block { flex: 1 1 100%; }
}

/* --- Checkout: cart-errors state --------------------------- 2026-09-24
   WooCommerce swaps form-checkout.php for cart-errors.php whenever the cart
   has errors, so this state gets none of the checkout layout. Give it the
   same card treatment the rest of the site uses. The per-item notices inside
   already pick up .woocommerce-error from main.css:1157. */
.ms-cart-errors { padding-top: 48px; padding-bottom: 80px; }

.ms-cart-errors__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--ms-white);
  border: 1px solid var(--ms-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--ms-shadow-sm);
}

.ms-cart-errors__title {
  font-family: var(--ms-font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--ms-navy);
  margin: 0 0 12px;
}

.ms-cart-errors__intro {
  color: var(--ms-text-soft);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.ms-cart-errors__actions { margin: 24px 0 0; }

@media (max-width: 767px) {
  .ms-cart-errors { padding-top: 32px; padding-bottom: 48px; }
  .ms-cart-errors__card { padding: 24px; }
}

/* --- WCAG AA contrast remediation -------------------------- 2026-09-24
   Ratios measured against the actual backgrounds in use. Each value is the
   LIGHTEST that clears 4.5:1 on its worst background, to keep the visual
   change as small as possible. Brand --ms-cyan is deliberately untouched:
   it is correct on navy, and only misused on one light-background element
   (.ms-reviews__eyebrow), which is repointed below. */
:root {
  --ms-text-soft: #5F6A8C;   /* was #7A84A4 - worst 3.28 -> 4.73 */
  --ms-cyan-700:  #067B91;   /* was #0790AA - worst 3.48 -> 4.57 */
}

/* 12px bold is not "large text", so 4.5:1 applies here. 4.25 -> 6.62 */
.ms-footer__col .ms-fcol__title { color: rgba(255, 255, 255, 0.60); }

/* Brand cyan on a light background measured 1.64:1 - the worst on the site. */
.ms-reviews__eyebrow { color: var(--ms-cyan-700); }   /* 1.64 -> 4.57 */

/* Failed by 0.03. Scoped to this element rather than moving the shared
   --ms-text-muted token, which comes from theme.json presets. */
.ms-hero__sub { color: #68707E; }                      /* 4.47 -> 4.62 */

/* The amber cutoff warning measured 2.26:1 on the card's white background.
   Rather than dull the amber to olive, it moves onto a navy chip - the same
   treatment .ms-ship__badge already uses one element to its left, so the
   brand amber stays exactly as-is: #E0A12A on navy = 7.50:1. */
.ms-ship__meta.is-warn {
  color: var(--ms-warning);
  background: var(--ms-navy);
  padding: 4px 9px;
  border-radius: 6px;
}

/* --- PDP contrast follow-up -------------------------------- 2026-09-24
   --ms-text-muted (#6b7280) misses AA by 0.03 on --ms-bg (4.47 vs 4.5).
   Scoped to the affected elements rather than moving the token, which is
   emitted by theme.json at :root:root and would need higher specificity.
   The active tab (.is-on) already passes, so it is excluded. */
.ms-pd__crumbs .curr,
.ms-pd__desc,
.ms-tabs__bar .ms-tab:not(.is-on) { color: #68707E; }   /* 4.47 -> 4.62 */

/* Unstyled content links fell back to the browser default #0d6efd (4.16).
   --ms-cyan itself is 1.64 on light, so the accessible brand tone is used. */
.ms-tab-details a { color: var(--ms-cyan-700); }          /* 4.16 -> 4.57 */

/* --- Home CLS: reserve space for the cutoff notice ---------- 2026-09-24
   .ms-announce__tomorrow is server-rendered with [hidden] and revealed by JS
   once the same-day cutoff passes. [hidden] is display:none, so revealing it
   widens .ms-announce__text by 163px and shoves .ms-announce__meta 82px right
   -- measured as the whole of Home's desktop CLS (0.2302). The bar's HEIGHT
   never changes at this width, which is why an earlier height-only test
   wrongly cleared it; CLS counts horizontal movement too.

   visibility:hidden keeps the box in layout, so the reveal changes nothing.

   Scoped to >=768px deliberately: below that the bar wraps and reserving the
   space costs 25.5px of permanent blank height, and mobile CLS is already 0.
   Measured height cost of this rule: 0px at 1024, 0px at 768. */
@media (min-width: 768px) {
  .ms-announce__tomorrow[hidden] {
    display: inline;
    visibility: hidden;
  }
}