/* MotionSites Dual Offer — dark brand chrome for every WooCommerce page.
   Scoped to body.woocommerce-page and never touches the homepage (body.ms-homepage). */

body.woocommerce-page:not(.ms-homepage) {
	--msw-bg: #0d0d0e;
	--msw-card: #18181a;
	--msw-card-2: #141416;
	--msw-line: rgba(255, 255, 255, .08);
	/* --msw-line is decorative. A control's own edge has to clear 3:1 against
	   what it encloses, which .08 does not (1.1:1); .38 lands at ~3.4:1. */
	--msw-line-ui: rgba(255, 255, 255, .38);
	--msw-text: #f5f5f5;
	--msw-muted: rgba(255, 255, 255, .62);
	--msw-grad: linear-gradient(135deg, #a855f7, #f472b6, #fdba74);
	background: var(--msw-bg);
	color: var(--msw-text);
}

body.woocommerce-page:not(.ms-homepage) #page,
body.woocommerce-page:not(.ms-homepage) #primary,
body.woocommerce-page:not(.ms-homepage) #main,
body.woocommerce-page:not(.ms-homepage) .content-area,
body.woocommerce-page:not(.ms-homepage) .site-main {
	background: transparent;
	color: inherit;
}

body.woocommerce-page:not(.ms-homepage) .woocommerce:not(.msd-page) { color: var(--msw-text) }

/* ------------------------------------------------------------- typography */

body.woocommerce-page:not(.ms-homepage) :is(h1, h2, h3, h4, h5, h6, .woocommerce .product_title, .woocommerce-page .product_title) { color: #fff }
/* Dark hairline as the default for everything the theme draws. It lives in
   :where() so it stays a *default*: at (0,2,2) the trailing element type out-ranked
   every control rule below it and quietly repainted their edges back to .08. */
body.woocommerce-page:not(.ms-homepage) :where(p, li, td, th, label, span, div) { border-color: var(--msw-line) }
body.woocommerce-page:not(.ms-homepage) .woocommerce .form-row label,
body.woocommerce-page:not(.ms-homepage) .woocommerce-billing-fields__field-wrapper label { color: var(--msw-muted) }
/* Pink belongs to content links. A bare `a` rule reached the site chrome too
   and repainted the footer CTA pink-on-pink, so it is capped to .page-content
   and to nothing that is a button. */
body.woocommerce-page:not(.ms-homepage) .page-content a:not([class*=button]) { color: #f472b6 }
body.woocommerce-page:not(.ms-homepage) .page-content a:not([class*=button]):hover { color: #f9a8d4 }
/* The trail is small text on the darkest surface, so it carries the muted token
   rather than a decorative hairline value. */
body.woocommerce-page:not(.ms-homepage) .woocommerce-breadcrumb { color: var(--msw-muted) }
body.woocommerce-page:not(.ms-homepage) .woocommerce-breadcrumb a { color: var(--msw-muted); text-decoration: none }
body.woocommerce-page:not(.ms-homepage) .woocommerce-breadcrumb a:hover { color: #fff }
body.woocommerce-page:not(.ms-homepage) .page-title,
body.woocommerce-page:not(.ms-homepage) .woocommerce-products-header__title { color: #fff }

/* ------------------------------------------------------------------ cards */

body.woocommerce-page:not(.ms-homepage) .woocommerce-message,
body.woocommerce-page:not(.ms-homepage) .woocommerce-info,
body.woocommerce-page:not(.ms-homepage) .woocommerce-error,
body.woocommerce-page:not(.ms-homepage) .woocommerce-noreviews,
body.woocommerce-page:not(.ms-homepage) p.woocommerce-info {
	background: var(--msw-card);
	border-color: var(--msw-line);
	border-top-color: #f472b6;
	color: var(--msw-text);
}

body.woocommerce-page:not(.ms-homepage) .woocommerce-message::before,
body.woocommerce-page:not(.ms-homepage) .woocommerce-info::before,
body.woocommerce-page:not(.ms-homepage) .woocommerce-error::before { color: #f472b6 }

/* ----------------------------------------------------------------- tables */

body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table,
body.woocommerce-page:not(.ms-homepage) .woocommerce-cart-form table,
body.woocommerce-page:not(.ms-homepage) table.woocommerce-checkout-review-order-table,
body.woocommerce-page:not(.ms-homepage) .woocommerce-MyAccount-content table {
	width: 100%;
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	color: var(--msw-text);
}

body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table th,
body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table td,
body.woocommerce-page:not(.ms-homepage) table.woocommerce-checkout-review-order-table th,
body.woocommerce-page:not(.ms-homepage) table.woocommerce-checkout-review-order-table td {
	border-color: var(--msw-line);
	color: inherit;
	padding: 14px 16px;
}

body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table td.product-name a { color: #fff; text-decoration: none }
body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table td.product-name a:hover { color: #f472b6 }
body.woocommerce-page:not(.ms-homepage) .woocommerce-Price-amount { color: inherit }

/* ------------------------------------------------------------------ forms */

body.woocommerce-page:not(.ms-homepage) :is(input, select, textarea):is(.input-text, .select, select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=date], textarea) {
	background: var(--msw-card-2);
	border: 1px solid var(--msw-line-ui);
	border-radius: 12px;
	color: #fff;
	padding: 12px 14px;
}

body.woocommerce-page:not(.ms-homepage) :is(input, select, textarea):is(.input-text, .select, select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea)::placeholder { color: rgba(255, 255, 255, .35) }
body.woocommerce-page:not(.ms-homepage) :is(input, select, textarea):focus { outline: 2px solid #a855f7; border-color: transparent }
body.woocommerce-page:not(.ms-homepage) .select2-container .select2-selection--single { background: var(--msw-card-2); border: 1px solid var(--msw-line-ui); border-radius: 12px }
body.woocommerce-page:not(.ms-homepage) .select2-container .select2-selection--single .select2-selection__rendered { color: #fff }
body.woocommerce-page:not(.ms-homepage) .select2-dropdown { background: var(--msw-card); border-color: var(--msw-line) }
body.woocommerce-page:not(.ms-homepage) .select2-results__option { color: var(--msw-text) }
body.woocommerce-page:not(.ms-homepage) .select2-results__option--highlighted { background: #242427; color: #fff }
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout #customer_details h3,
body.woocommerce-page:not(.ms-homepage) .woocommerce-form__label-for-checkbox { color: var(--msw-muted) }
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout #customer_details h3 { color: #fff }

/* ---------------------------------------------------------------- buttons */

/* The manual-card gateway injects its own inline stylesheet, whose copy button
   keeps a 1.5:1 hairline. Its edge joins the rest of the controls. */
body.woocommerce-page:not(.ms-homepage) .ms-c2c__copy { border-color: var(--msw-line-ui) }

/* The archive template renders the loop straight into .site-main with no
   .woocommerce wrapper, so the wrapper has to be a *possible* ancestor, not a
   required one — otherwise WooCommerce's light-grey default pill survives on
   every shop card. :where() keeps the scope free of specificity. */
body.woocommerce-page:not(.ms-homepage) :where(.woocommerce, .site-main) :is(.button, a.button, button.button, input[type=submit], .checkout-button, .woocommerce-button):not(.single_add_to_cart_button):not(.msd-btn-site):not(.msd-qty-btn) {
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--msw-line-ui);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
	padding: 12px 24px;
	text-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}

body.woocommerce-page:not(.ms-homepage) :where(.woocommerce, .site-main) :is(.button, a.button, button.button, input[type=submit], .checkout-button):not(.single_add_to_cart_button):not(.msd-btn-site):not(.msd-qty-btn):hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

body.woocommerce-page:not(.ms-homepage) :where(.woocommerce, .site-main) :is(.checkout-button, button[name=place_order], .woocommerce-Button--primary, input[type=submit].alt) {
	background-image: var(--msw-grad);
	background-color: transparent;
	border: 0;
	color: #121212;
	font-weight: 700;
}

body.woocommerce-page:not(.ms-homepage) :where(.woocommerce, .site-main) a.added_to_cart { color: #f472b6 }

/* ------------------------------------------------------------- shop grid */

body.woocommerce-page:not(.ms-homepage) ul.products li.product {
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 16px;
	padding: 12px;
}

body.woocommerce-page:not(.ms-homepage) ul.products li.product a { text-decoration: none }
body.woocommerce-page:not(.ms-homepage) ul.products li.product .woocommerce-loop-product__title { color: #fff; font-size: 15px; font-weight: 700; padding-top: 10px }
body.woocommerce-page:not(.ms-homepage) ul.products li.product .price { color: var(--msw-muted) }
body.woocommerce-page:not(.ms-homepage) ul.products li.product .price .woocommerce-Price-amount { color: #fff }
body.woocommerce-page:not(.ms-homepage) ul.products li.product img { border-radius: 12px }
body.woocommerce-page:not(.ms-homepage) ul.products li.product .button { margin-top: 10px }

/* The resting card hairline is decorative — the thumbnail and title identify the
   card. The control edge only has to appear when the card is the thing you are on,
   so hover and keyboard focus both light it to the 3:1 control line. */
body.woocommerce-page:not(.ms-homepage) ul.products li.product:where(:hover, :focus-within) { border-color: var(--msw-line-ui) }

/* ------------------------------------------------------------ pagination */

body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul { border: 1px solid var(--msw-line); border-radius: 12px; overflow: hidden; background: var(--msw-card) }
body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul li { border-color: var(--msw-line) }
body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul li a,
body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul li span { background: transparent; color: var(--msw-muted); padding: 10px 15px }
body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul li a:hover { background: #242427; color: #fff }
body.woocommerce-page:not(.ms-homepage) nav.woocommerce-pagination ul li span.current { background-image: var(--msw-grad); color: #121212; font-weight: 700 }

/* --------------------------------------------------------------- account */

body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none }
body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-navigation li {
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 12px;
	margin-bottom: 8px;
}
body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-color: rgba(244, 114, 182, .5) }
body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-navigation a { color: var(--msw-text); display: block; padding: 12px 16px; text-decoration: none }
body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: #fff }
body.woocommerce-page:not(.ms-homepage).woocommerce-account .woocommerce-MyAccount-content {
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 16px;
	padding: 24px;
}
body.woocommerce-page:not(.ms-homepage) .woocommerce-account .woocommerce-form-login,
body.woocommerce-page:not(.ms-homepage) .woocommerce-register {
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 16px;
	padding: 24px;
}

/* --------------------------------------------------------------- cart box */

body.woocommerce-page:not(.ms-homepage) .cart-collaterals .cart_totals,
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout .order-review-wrapper,
body.woocommerce-page:not(.ms-homepage) #order_review {
	background: var(--msw-card);
	border: 1px solid var(--msw-line);
	border-radius: 16px;
	padding: 20px;
}

body.woocommerce-page:not(.ms-homepage) .cart_totals h2,
body.woocommerce-page:not(.ms-homepage) #order_review_heading { color: #fff; margin-top: 0 }
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout .select2-search__field { background: var(--msw-card-2); border: 1px solid var(--msw-line); color: #fff }
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout-payment { background: var(--msw-card); border-color: var(--msw-line) }
body.woocommerce-page:not(.ms-homepage) .woocommerce-checkout-payment .payment_box { background: var(--msw-card-2); color: var(--msw-muted) }

/* ------------------------------------------------------------ block cart */

/* The cart is Blocks-rendered, so its submit keeps WordPress's default grey pill
   while checkout's place-order button is a brand gradient. Same action, so it
   should read as the same control. */
body.woocommerce-cart .wc-block-cart__submit-button {
	background: var(--msw-grad);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: #0e0e10;
	font-weight: 800;
	min-height: 54px;
	padding: 14px 30px;
	text-shadow: none;
	width: 100%;
}

body.woocommerce-cart .wc-block-cart__submit-button:hover { filter: brightness(1.06) }
body.woocommerce-cart .wc-block-cart__submit-button:focus-visible { outline: 2px solid #a855f7; outline-offset: 3px }
body.woocommerce-cart .wc-block-cart__submit-button:disabled { opacity: .55 }

/* Blocks draws the stepper's outer box with the decorative hairline, but that box
   is the component's edge, so it carries the control line instead. */
body.woocommerce-cart .wc-block-components-quantity-selector {
	border: 1px solid var(--msw-line-ui);
	border-radius: 12px;
}

body.woocommerce-cart .wc-block-components-quantity-selector__input { background: transparent; color: #fff }

/* -------------------------------------------------------------- utilities */

body.woocommerce-page:not(.ms-homepage) .woocommerce-product-gallery__image { border-radius: 14px; overflow: hidden }
body.woocommerce-page:not(.ms-homepage) .entry-content,
body.woocommerce-page:not(.ms-homepage) .page-content { color: var(--msw-text) }
body.woocommerce-page:not(.ms-homepage) hr { border-color: var(--msw-line) }
body.woocommerce-page:not(.ms-homepage) ::selection { background: rgba(244, 114, 182, .35); color: #fff }

@media (max-width: 767.98px) {
	body.woocommerce-page:not(.ms-homepage) .woocommerce table.shop_table { display: block; overflow-x: auto }
}

/* ------------------------------------------------- card-to-card payment card

   The gateway's own inline sheet paints this as a flat grey panel. The owner's bank
   card is a blu card, so the block is rebuilt to look like one: ISO 1.586 proportions,
   navy through electric blue into violet, and the light arc that sweeps the top-right.
   Everything inside stays live — the amount is the order total and the number is
   copyable — so only the surface changes. Selectors carry an extra .ms-c2c class
   because the plugin's inline CSS can print after this file. */

body .ms-c2c .ms-c2c__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: 400px;
	min-height: 206px;
	aspect-ratio: 1.586;
	margin-inline: auto;
	padding: 52px 20px 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 22px;
	background-color: #0b1733;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M4 7.5a7 7 0 0 1 0 9'/%3E%3Cpath d='M8 5a12 12 0 0 1 0 14'/%3E%3Cpath d='M12 3a16 16 0 0 1 0 18'/%3E%3C/svg%3E"),
		radial-gradient(140% 120% at 128% -30%, rgba(163, 204, 255, .6) 0 41%, rgba(163, 204, 255, 0) 41.5%),
		radial-gradient(120% 150% at 92% 112%, rgba(120, 72, 255, .95) 0 44%, rgba(120, 72, 255, 0) 74%),
		radial-gradient(85% 110% at 68% 12%, rgba(47, 92, 255, .85) 0 38%, rgba(47, 92, 255, 0) 70%),
		linear-gradient(135deg, #08122c 0%, #0f2557 40%, #1b3a94 68%, #3b2a9e 100%);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: right 20px top 18px, center, center, center, center;
	background-size: 22px 22px, auto, auto, auto, auto;
	box-shadow: 0 14px 34px rgba(4, 10, 28, .45);
}

body .ms-c2c .ms-c2c__card::before {
	content: "blu";
	position: absolute;
	top: 15px;
	inset-inline-start: 20px;
	color: #fff;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}

body .ms-c2c .ms-c2c__card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, .13) 0 14%, rgba(255, 255, 255, 0) 46%);
}

body .ms-c2c .ms-c2c__pan {
	width: 100%;
	color: #fff;
	font-family: inherit;
	font-size: clamp(17px, 4.4vw, 23px);
	letter-spacing: .08em;
	line-height: 1.35;
	text-align: center;
	text-shadow: 0 1px 0 rgba(4, 10, 28, .4);
}

/* A .38 hairline is only 2.2:1 against the blue field, so the pill takes a solid fill
   and dark ink instead — the same treatment the gradient CTAs get. */
body .ms-c2c .ms-c2c__card .ms-c2c__copy {
	margin-top: auto;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #fff;
	color: #0d1b3e;
	font-size: 13px;
	font-weight: 700;
}

body .ms-c2c .ms-c2c__card .ms-c2c__copy:hover { background: #e8eeff; color: #0d1b3e; border-color: transparent }
body .ms-c2c .ms-c2c__card .ms-c2c__copy.is-ok { background: #1a40ff; color: #fff; border-color: transparent }