/* LUMIADE brand components — buttons, forms, chrome, WooCommerce. */

/* — Buttons (supersedes legacy section 3). CTAs are ALWAYS the rose accent
   (Task 6, Palette A "First Light") — never ink/black; ink is reserved for
   text/headings and dark chrome (header/footer/menus). —
   Selector list extended past the brief's starting point to also cover the
   real WC Blocks cart/checkout markup this store renders (verified live,
   2026-07-10): the "Proceed to Checkout" link on /cart/ is
   .wc-block-cart__submit-button (an <a>, not #place_order — this store's
   checkout is WooCommerce Blocks, not classic, so #place_order never
   exists in the DOM), and "Place Order" on /checkout/ is
   .wc-block-components-checkout-place-order-button. #place_order and
   .checkout-button are kept in the list for classic-template fallback
   (order-pay, pay-for-order) even though unused on /cart/ + /checkout/. */
.lumiade-storefront .wp-block-button__link,
.lumiade-storefront .button,
.lumiade-storefront button[type="submit"],
.lumiade-storefront input[type="submit"],
.lumiade-storefront .single_add_to_cart_button,
.lumiade-storefront .checkout-button,
.lumiade-storefront #place_order,
.lumiade-storefront .woocommerce-button,
.lumiade-storefront .wc-block-cart__submit-button,
.lumiade-storefront .wc-block-components-checkout-place-order-button,
.lumiade-home .wp-block-button__link {
	background: var(--lum-accent);
	border: 1px solid var(--lum-accent);
	border-radius: var(--lumiade-radius-sm);
	color: #ffffff;
	cursor: pointer;
	font-family: var(--lumiade-font-sans);
	font-size: var(--lumiade-fs-base);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	padding: 15px 32px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lumiade-storefront .wp-block-button__link:hover,
.lumiade-storefront .button:hover,
.lumiade-storefront button[type="submit"]:hover,
.lumiade-storefront input[type="submit"]:hover,
.lumiade-storefront .single_add_to_cart_button:hover,
.lumiade-storefront .checkout-button:hover,
.lumiade-storefront #place_order:hover,
.lumiade-storefront .woocommerce-button:hover,
.lumiade-storefront .wc-block-cart__submit-button:hover,
.lumiade-storefront .wc-block-components-checkout-place-order-button:hover,
.lumiade-home .wp-block-button__link:hover {
	background: var(--lum-accent-hover);
	border-color: var(--lum-accent-hover);
	color: #ffffff;
}

.lumiade-storefront .is-style-outline .wp-block-button__link,
.lumiade-storefront .lumiade-btn-ghost,
.lumiade-home .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lum-accent);
}

.lumiade-storefront :where(.button, .wp-block-button__link, button, input[type="submit"], .wc-block-cart__submit-button):focus-visible {
	outline: 2px solid var(--lum-accent);
	outline-offset: 2px;
}

/* Quantity steppers (product buy box form.cart + cart line items): keep the
   ghost/icon treatment (no ink fill — these aren't primary CTAs) but square
   the corners to match the rest of the system. Legacy already drove the qty
   number input's border-color off tokens (see product/cart sections); the
   number input itself also matches the form input rule below via
   [type="number"]. */
.lumiade-storefront .quantity,
.lumiade-storefront .wc-block-components-quantity-selector,
.lumiade-storefront .wc-block-components-quantity-selector__button {
	border-radius: var(--lumiade-radius-sm) !important;
}

/* Blocksy's own woocommerce.min.css ships "div.quantity input[type="number"]"
   at specificity (0,2,1) with border-radius forced !important — beats the
   generic form-input rule above (0,2,0). Add the .quantity ancestor to match
   specificity and win on the later !important tie (confirmed live). */
.lumiade-storefront .quantity input[type="number"] {
	border-radius: var(--lumiade-radius-sm) !important;
}

/* "View cart" link shown after AJAX add-to-cart: secondary chip, not a
   filled CTA — keep its own weight (matches legacy .added_to_cart, which is
   no longer a shared selector in the ink-CTA rule above). */
.lumiade-storefront .added_to_cart {
	border-radius: var(--lumiade-radius-sm);
	font-weight: 760;
}

/* WC Blocks mobile "sticky" duplicate Proceed-to-Checkout button (verified
   live on /cart/ at 390px, Task 9): WooCommerce Blocks JS toggles a
   position:fixed clone of the checkout button
   (.wc-block-cart__submit-container--sticky) onto the viewport whenever the
   in-flow button hasn't scrolled into view yet — on load, with two-plus cart
   line items, that floating bar clips the bottom-most item's quantity
   stepper. The in-flow button in the totals sidebar is always present and
   fully styled (see the ink-CTA rule above), so neutralise the floating
   clone rather than reserve scroll space for it.
   Specificity note: WooCommerce's own cart.css ships
   ".wc-block-cart .wc-block-cart__submit-container--sticky" at (0,2,0);
   our brand-layer rule prefixes ".lumiade-storefront" to reach (0,3,0)
   and wins on higher specificity. */
.lumiade-storefront .wc-block-cart .wc-block-cart__submit-container--sticky {
	position: static;
}

/* — Forms (supersedes legacy section 4): 17px inputs, hairline borders —
   Type-attribute selectors match regardless of the wrapping WC
   Blocks/FunnelKit class names (verified live: checkout, cart coupon field,
   and PDP/cart quantity inputs all render plain <input type="…">).
   !important + no :where(): verified live that WooCommerce's own
   checkout.css ships .wc-block-components-form .wc-block-components-text-input
   input[type="…"] at specificity (0,3,1) with font-size:16px (no !important),
   and Blocksy's woocommerce-cart-checkout-blocks.min.css ships
   .wc-block-components-text-input input:is([type=…]) at (0,2,1) with
   background/border/border-radius/color forced via !important. A :where()-
   wrapped, specificity-0 selector (the brief's original draft) loses to both;
   confirmed live (input stayed 16px/3px-radius after cache flush). Matching
   this file's existing defensive pattern for the same fight (see legacy
   §10b/10f "specificity holdouts"), every property that has a competing
   themed value is forced with !important. */
.lumiade-storefront input[type="text"],
.lumiade-storefront input[type="email"],
.lumiade-storefront input[type="tel"],
.lumiade-storefront input[type="password"],
.lumiade-storefront input[type="search"],
.lumiade-storefront input[type="number"],
.lumiade-storefront select,
.lumiade-storefront textarea {
	background: #ffffff !important;
	border: 1px solid var(--lumiade-line) !important;
	border-radius: var(--lumiade-radius-sm) !important;
	color: var(--lumiade-ink) !important;
	font-family: var(--lumiade-font-sans);
	font-size: var(--lumiade-fs-base) !important;
	line-height: 1.4;
	padding: 13px 14px !important;
}

.lumiade-storefront input:focus,
.lumiade-storefront select:focus,
.lumiade-storefront textarea:focus {
	border-color: var(--lumiade-ink) !important;
	outline: 1px solid var(--lumiade-ink);
	outline-offset: 0;
}

/* !important: WC Blocks' floating labels (.wc-block-components-text-input
   label, checkout.css/packages-style.css) tie our selector's specificity
   (0,1,1) and load later in source order, so they win the 16px/400 default
   on tie without !important — confirmed live. */
.lumiade-storefront label,
.lumiade-storefront .woocommerce form .form-row label {
	color: var(--lumiade-ink) !important;
	font-size: var(--lumiade-fs-sm) !important;
	font-weight: 600 !important;
}

/* Checkbox option text is body copy, not a field label (WC Blocks CheckboxControl
   renders a bare <label> around the option text). */
.lumiade-storefront .wc-block-components-checkbox label {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: 400 !important;
}

/* — Header inversion (supersedes legacy section 5 skin) — */
.lumiade-storefront #header {
	background: var(--lumiade-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* #header's own background doesn't reach the header content: Blocksy's
   Customizer-generated /wp-content/uploads/blocksy/css/global.css paints
   [data-row*="middle"] { background-color: var(--theme-palette-color-8) }
   (white) directly on the child row, which is opaque and paints over the
   parent — background isn't inherited, so the #header rule above never
   reaches it. Same treatment for the bottom row (mobile trigger row) and
   the sticky-state row Blocksy swaps in via .stuck. Verified live: without
   this, the row stayed white while #header itself measured ink. */
.lumiade-storefront #header [data-row] {
	background: var(--lumiade-ink);
}

.lumiade-storefront #header nav a,
.lumiade-storefront #header .menu a,
.lumiade-storefront #header .site-title,
.lumiade-storefront .ct-header-search,
.lumiade-storefront .ct-header-account,
.lumiade-storefront .ct-header-cart,
.lumiade-storefront .ct-header-wishlist {
	color: #ffffff;
}

.lumiade-storefront #header [class*="ct-header"] a:hover,
.lumiade-storefront #header .menu a:hover {
	color: rgba(255, 255, 255, 0.72);
}

/* Blocksy's own svg{fill:var(--theme-icon-color, var(--theme-text-color))}
   rule (main.min.css) does NOT use currentColor — the search/cart/account/
   wishlist icon glyphs ignore the `color: #ffffff` above and stay ink
   (--theme-text-color is unset for these elements, so it falls through to
   the global ink value). Set the custom property Blocksy's rule actually
   reads. Verified live: without this, the icon glyphs were invisible on
   the ink bar (only the white cart-count pill showed). Mobile hamburger
   trigger uses the same var and needs the same fix. */
.lumiade-storefront #header .ct-header-search,
.lumiade-storefront #header .ct-header-account,
.lumiade-storefront #header .ct-header-cart,
.lumiade-storefront #header .ct-header-wishlist,
.lumiade-storefront [data-device="mobile"] .ct-header-trigger {
	--theme-icon-color: #ffffff;
}

.lumiade-storefront #header .ct-dynamic-count-cart {
	background: #ffffff;
	color: var(--lumiade-ink);
}

/* Logo: if the uploaded logo is dark-on-transparent it disappears on ink.
   Invert it in CSS until a white logo variant is uploaded (see Step 4). */
.lumiade-storefront.wp-custom-logo #header .site-logo-container img {
	filter: invert(1) brightness(1.6) grayscale(1);
}

/* — Trust bar (blocksy:header:before) — beige deep field — */
.lumiade-storefront .lumiade-storefront-trust {
	background: var(--lumiade-warm);
	color: var(--lumiade-ink);
}

/* — Footer inversion (supersedes legacy section 6 skin) — */
.lumiade-storefront .lumiade-store-footer {
	background: var(--lumiade-ink);
	color: rgba(255, 255, 255, 0.72);
}

.lumiade-storefront .lumiade-store-footer :where(h1, h2, h3, h4, .site-title, a) {
	color: #ffffff;
}

.lumiade-storefront .lumiade-store-footer a:hover {
	color: rgba(255, 255, 255, 0.72);
}

/* Legacy's hairline dividers (border-top/border-left: var(--lumiade-line),
   #e5e5e2) are near-invisible on the new ink background — reads as
   text sitting directly on the ink strip with no separators. Invert to a
   translucent white line, matching the header's border-bottom treatment. */
.lumiade-storefront .lumiade-store-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lumiade-storefront .lumiade-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* .lumiade-footer-proof (the "Free shipping / 30-day returns / Dermatologist
   tested / Made in Korea" strip nested inside .lumiade-store-footer) still
   carries its legacy warm translucent-white fill; on the ink footer that
   renders as a flat grey band instead of a subtle ink-on-ink tint.
   Text/icons already inherit white from .lumiade-store-footer above. */
.lumiade-storefront .lumiade-footer-proof {
	background: rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lumiade-storefront .lumiade-proof-item {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* — Mobile off-canvas menu (#offcanvas, opened by the header hamburger
   trigger) — supersedes legacy's warm-paper skin inside the
   @media (max-width: 720px) block. Blocksy's own panel/sub-menu CSS has no
   background of its own here (confirmed: no #offcanvas/.ct-panel rule in
   the theme bundle sets background), so the legacy !important fill was the
   only paint source — matched here to avoid losing to it before deletion. */
.lumiade-storefront #offcanvas.ct-panel.ct-header,
.lumiade-storefront #offcanvas .ct-panel-inner {
	background: var(--lumiade-ink) !important;
}

.lumiade-storefront #offcanvas .ct-toggle-close,
.lumiade-storefront #offcanvas [data-toggle-panel] {
	color: #ffffff !important;
}

.lumiade-storefront #offcanvas .ct-toggle-close svg,
.lumiade-storefront #offcanvas .ct-toggle-close svg * {
	fill: #ffffff !important;
}

.lumiade-storefront #offcanvas .mobile-menu a {
	color: #ffffff !important;
}

.lumiade-storefront #offcanvas .mobile-menu .current-menu-item > a,
.lumiade-storefront #offcanvas .mobile-menu a:hover,
.lumiade-storefront #offcanvas .mobile-menu a:focus {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Desktop dropdown/sub-menu panels (Blocksy .sub-menu): background already
   resolves to ink site-wide via --theme-palette-color-4 (tokens.css root,
   consumed by main.min.css's ".sub-menu{background-color:var(--dropdown-
   background-color, var(--theme-palette-color-4))}"), and submenu link text
   inherits white from the "#header .menu a" rule above (.sub-menu is a
   .menu descendant) — verified both resolve without an additional rule.
   This guard rule is kept in case a future menu adds "menu-item-has-
   children" items and something more specific than "var(--theme-palette-
   color-4)" ever sets --dropdown-background-color back to white. */
.lumiade-storefront #header .sub-menu {
	background: var(--lumiade-ink);
}

.lumiade-storefront #header .sub-menu a {
	color: #ffffff;
}

/* Added-to-cart popup CTAs (Blocksy Companion Pro, .ct-button on an <a>,
   not .button — found during Phase 3 T8's purchase-path browser pass).
   Base.css's `.lumiade-storefront a { color: inherit }` is (0,1,1), which
   outranks Blocksy's own `.ct-button { color: var(--theme-button-text-
   initial-color) }` at (0,1,0), so "View Cart"/"Checkout" rendered
   near-black text on the near-black button (invisible). The generic
   `.lumiade-storefront .button` rule above doesn't reach these — they
   never carry a `.button` class, only `.ct-button` + a popup-specific
   modifier. Fix the two text CTAs by class rather than widening `.button`
   site-wide (icon-only .ct-button instances like wishlist/compare should
   keep their own ink glyph color). */
.lumiade-storefront .ct-added-to-cart-popup-cart,
.lumiade-storefront .ct-added-to-cart-popup-checkout {
	color: #ffffff;
}

/* — WooCommerce notices (supersedes legacy section 12 skin) —
   Blocksy's own legacy-notice.scss ships this as
   :is(.woocommerce-info, .woocommerce-error, .woocommerce-message,
   .woocommerce-thankyou-order-received) — every argument is a single class,
   so the :is() specificity is (0,1,0). Legacy homepage.css §12 already beats
   that on border-color/color, but never set `background` for
   .woocommerce-error specifically — confirmed live (my-account bad-login
   error rendered Blocksy's default rgba(218,0,28,.7) red banner, 5px
   radius). This unified rule covers background for all four + the WC
   Blocks banner, closing that gap. */
.lumiade-storefront .woocommerce-message,
.lumiade-storefront .woocommerce-info,
.lumiade-storefront .woocommerce-error,
.lumiade-storefront .wc-block-components-notice-banner {
	background: var(--lumiade-panel);
	border: 1px solid var(--lumiade-line);
	border-left: 3px solid var(--lumiade-ink);
	border-radius: var(--lumiade-radius-sm);
	color: var(--lumiade-ink);
	font-size: var(--lumiade-fs-sm);
}

.lumiade-storefront .woocommerce-error,
.lumiade-storefront .wc-block-components-notice-banner.is-error {
	border-left-color: var(--lumiade-clay);
}

/* Coupon field validation error (WC Blocks cart/checkout): core packages-
   style.css ships `.wc-block-components-validation-error{color:#cc1818}`
   (0,1,0) and the has-error input border at (0,2,1) — both a saturated red
   that clashes with the brand. Bring both onto the brick error token so the
   inline error and the banner-style error above read as one system.
   Input border needs !important: this file's own base input rule
   (`.lumiade-storefront input[type="text"]…`) already forces
   `border: 1px solid var(--lumiade-line) !important`, so the has-error state
   needs the same important tier to win on its higher specificity. */
.lumiade-storefront .wc-block-components-validation-error {
	color: var(--lumiade-clay);
}

.lumiade-storefront .wc-block-components-text-input.has-error input {
	border-color: var(--lumiade-clay) !important;
}

/* — Breadcrumbs — the visible trail on /product/ is the relocated
   `.lumiade-meta-breadcrumb` (legacy §7, rendered after categories via
   woocommerce_product_meta_end); `.ct-breadcrumbs` is Blocksy's native
   trail, kept in case a page template renders its hero (shop/product hide
   it entirely). Legacy sized both at --lumiade-fs-xs/--lumiade-fs-eyebrow (13px);
   bump to the 15px floor. */
.lumiade-storefront .ct-breadcrumbs,
.lumiade-storefront .lumiade-meta-breadcrumb {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
}

.lumiade-storefront .ct-breadcrumbs a {
	color: var(--lumiade-muted);
}

/* — Star ratings: the ACTUAL filled-star glyph is Blocksy's
   `.star-rating span::before { color: var(--star-rating-initial-color,
   #FDA256) }` (star-rating.scss) — a completely different element than the
   `.star-rating` container legacy §13c already re-skins to --lumiade-gold.
   Legacy's container-level override is inert for the filled stars (WC
   never reads currentColor there) and the site never defines
   --star-rating-initial-color, so shoppers were seeing Blocksy's raw
   #FDA256 orange fallback, not bronze — confirmed live (computed color on
   `.star-rating span::before` was rgb(253,162,86) before this rule).
   Defining the custom property here sidesteps the specificity fight
   entirely: Blocksy's own rule reads it directly. */
.lumiade-storefront {
	--star-rating-initial-color: var(--lumiade-gold);
}

/* — Badges (sale/new/featured): ink-outline on paper, uppercase.
   Bronze budget (Phase 4): bronze = review stars + sale price, NOTHING else —
   badges included. Real Blocksy classes: `.onsale`,
   `[class*="ct-woo-badge-"]`. `.out-of-stock-badge` intentionally excluded
   (status flag, not a promo). — */
.lumiade-storefront .onsale,
.lumiade-storefront [class*="ct-woo-badge-"] {
	background: var(--lumiade-paper);
	border: 1px solid var(--lumiade-ink);
	border-radius: 0;
	color: var(--lumiade-ink);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* — Sale price: bronze; regular (struck) price: ink —
   No prior rule existed for this (WC core ships `.price ins/del {color:
   inherit}`, both inheriting the ink set on the shop-card/product-summary
   `.price` container — sale and regular prices were visually identical).
   The extra `.woocommerce-Price-amount` selectors are needed on the
   product page only: legacy §8 pins that inner span to ink directly at
   (0,4,0) — adding the `ins`/`del` ancestor to our selector reaches (0,4,1),
   which wins on the element-count tiebreak. */
.lumiade-storefront .price ins,
.lumiade-storefront .price ins .woocommerce-Price-amount,
.lumiade-storefront .entry-summary .price ins .woocommerce-Price-amount,
.lumiade-storefront .summary .price ins .woocommerce-Price-amount {
	color: var(--lumiade-gold);
	text-decoration: none;
}

.lumiade-storefront .price del,
.lumiade-storefront .price del .woocommerce-Price-amount {
	color: var(--lumiade-ink);
}

/* — Newsletter capture band (Phase 2, global chrome) —
   Rendered by mu-plugins/lumiade-newsletter.php via blocksy:footer:before
   on public storefront pages except cart/checkout/account. Paper field +
   hairline above the ink footer; input/button skin comes from the form and
   CTA rules earlier in this file. */
.lumiade-storefront .lumiade-newsletter {
	background: var(--lumiade-paper);
	border-top: 1px solid var(--lumiade-line);
	padding: clamp(44px, 5vw, 72px) 0;
}

.lumiade-storefront .lumiade-newsletter-shell {
	margin-inline: auto;
	max-width: 560px;
	padding-inline: 24px;
	text-align: center;
}

.lumiade-storefront .lumiade-newsletter h2 {
	font-size: var(--lumiade-fs-xl);
	line-height: 1.15;
}

.lumiade-storefront .lumiade-newsletter-shell > p {
	color: var(--lumiade-muted);
	font-size: var(--lumiade-fs-sm);
	margin: 12px 0 24px;
}

.lumiade-storefront .lumiade-newsletter-label {
	display: block;
	font-size: var(--lumiade-fs-sm);
	font-weight: 600;
	margin-bottom: 8px;
	text-align: left;
}

.lumiade-storefront .lumiade-newsletter-row {
	display: flex;
	gap: 10px;
}

.lumiade-storefront .lumiade-newsletter-row input[type="email"] {
	flex: 1;
	min-width: 0;
}

.lumiade-storefront .lumiade-newsletter-hp {
	display: none !important;
}

.lumiade-storefront .lumiade-newsletter-msg {
	font-size: var(--lumiade-fs-sm);
	margin-top: 12px;
	min-height: 1.4em;
}

@media (max-width: 480px) {
	.lumiade-storefront .lumiade-newsletter-row {
		flex-direction: column;
	}
}