/* ========================================================================== D1 BUTTONS + D2 FORM FIELDS — assets/css/controls-d1-d2.css The design pack's two universal components, implemented once, site-wide. Loaded by inc/controls-d1-d2.php at wp_enqueue_scripts priority 15. Pack sources actually opened before a line of this was written: design_handoff_ostugrupp_system/README.md §8 (D1 / D2 specification) "Ostugrupp System Sample 01.dc.html" lines 836-923 (D1, six states drawn) "Ostugrupp System Sample 01.dc.html" lines 925-1130 (D2 + the WooCommerce class map and the select2 pairing) assets/css/tokens.css (every value below) --------------------------------------------------------------------- THE FENCE — why every selector starts :where(body:not(...)) --------------------------------------------------------------------- This file is site-wide, which makes it the one file in the theme that can reach the Montonio gateway by accident. A generic `.button` rule reaches the order button; a generic `.form-row` rule reaches the terms checkbox, which WooCommerce renders INSIDE the gateway container — so a rule can restyle the protected area while naming nothing that tools/check-theme.sh check 6a greps for. CLAUDE.md invariant 1. The answer here is structural, not a promise: every rule is prefixed with :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) so NO selector in this file can match anything on the checkout, the order-pay page, or the add-payment-method page — the only three pages in WordPress that render a gateway list. It is one grep to verify: every rule below carries the prefix, and the checkout is therefore out of reach by the SHAPE of the selector rather than by an enumeration of forbidden names. :where() is used rather than a plain descendant prefix because :where() contributes ZERO specificity. The fence is free: `.btn-primary` inside it is still (0,1,0), so this file wins its arguments on source order the way it would without the fence, and it cannot accidentally out-rank a later module that assumed (0,1,0) was the number to beat. If a browser did not understand :where(), the rule is dropped — the failure mode is "no new styling", never "styling somewhere it must not go". --------------------------------------------------------------------- DIVISION OF OWNERSHIP with assets/css/checkout-fields.css --------------------------------------------------------------------- checkout-fields.css owns `form.checkout #customer_details` and states its contract in its own header: 52px, 16px type (below which iOS zooms the page mid-checkout), 12px/16px padding, --border-strong, the pack focus ring. This file does NOT fight it and does not overlap it by a single selector — the fence removes the whole page from reach. What this file does instead is make the SAME field appear everywhere else: login, registration, lost password, account details, address book, and any other `.woocommerce .form-row` off the checkout. The resting values in block 2a are byte-identical to checkout-fields.css:89-107 on purpose. A shopper who signs in and then checks out must see one field, not two. Where the two files necessarily differ, this file follows checkout-fields: border WIDTH stays 1px, not the pack's 1.5px. woocommerce.css:1209 declares `border: 1px solid var(--border) !important` and that !important is load-bearing (it holds the field shape against plugin CSS). checkout-fields contested only the COLOUR for that reason, and matching it is worth more than half a pixel of literal spec compliance. Same reasoning, same value. --------------------------------------------------------------------- WHAT THIS FILE DELIBERATELY DOES NOT DO --------------------------------------------------------------------- 1. It does not repaint `.woocommerce .button` (woocommerce.css:962, the dark slate base used by coupon/update/order-action buttons). The pack's secondary is a white outline button; converting ~40 buttons at once, on the cart, while cart-polish.css is being tuned, is a change to propose, not a change to smuggle in under "component layer". Those buttons get the missing STATES here (focus, disabled, in-flight) and keep their shape. 2. It does not replace the focus ring. a11y.css:41-47 already draws a two-layer white-gap ring in --green at full colour — the README §5b warning was about ALPHA rings (--brand-a4 at 1.61:1) and this theme never used one. Overriding a compliant ring with a marginally different compliant ring is churn. ONE defect in it is fixed, in block 1e: it forces `border-radius: 6px` on whatever it focuses, so a 12px button squares its corners the moment you tab to it. 3. It adds no spinner markup. WooCommerce core paints its own glyph on `.button.loading` and filters.js injects `.ostu-spinner` into its own button; a third spinner would mean two on screen. The in-flight contribution here is the guard that was missing, not another animation. ========================================================================== */ /* ========================================================================== 1 · D1 — BUTTONS Pack: 5 types x 6 states x 3 sizes (S 44 / M 52 / L 60), radius 12. Sample lines 895-908: "Väikseim on 44px, sest see on puutetsooni miinimum. Kaheksast 'Lisa korvi' teostusest jääb üks: S kaardil, M tootelehel, L kassas." THE LADDER, AND WHERE EACH STEP ALREADY LIVES IN THIS THEME: S 44px product card add-to-cart — woocommerce.css:301 `min-height: 44px` is already exactly S. Not restated; a correct value does not need a second author. THREE BUTTONS ARE EXCLUDED FROM THE M RULE (the :where(:not()) in 1a). Each is paired with, or embedded in, a fixed height that belongs to another module, and growing the button alone would break the pairing: .sticky-atc__btn cart-widget.css:330-334, 46px, inside the sticky bar whose height was measured around it .og-cookie__btn engagement.css:41, 44px, `flex: 1`, three across on a phone .site-footer__newsletter-btn footer.css:156, 48px, sitting in a flex row beside .site-footer__newsletter-input, which is also 48px (footer.css:137). Raising only the button puts a 4px step in a two-element row. Both should go to 52 together — that is one line in footer.css and it is in the handover, not taken here, because the footer is a dark surface and D2 is specified for light ones. M 52px the default for .btn-primary / .btn-secondary. Today 48px (main.css:163-166) with 15px type. L 60px the homepage hero pair and the closing CTA band. Today 54px (main.css:268-269 and main.css:417). This is the "grander front page" step and it is the one visible size change on the site. ========================================================================== */ /* --- 1a · Shape, size M ----------------------------------------------------- (0,1,0) — the same weight as main.css:163, won on source order. The two exclusions are inside :where(), so they cost nothing: the selector is still (0,1,0) and still beats main.css by order alone. `transition` is stated as explicit properties rather than main.css's `all .2s ease`. `all` transitions every animatable property including ones added later by another module, which is how a layout property ends up easing. Only transform / colour / shadow move here. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:where(:not(.sticky-atc__btn):not(.og-cookie__btn):not(.site-footer__newsletter-btn)), :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:where(:not(.sticky-atc__btn):not(.og-cookie__btn):not(.site-footer__newsletter-btn)) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8, 8px); min-height: 52px; padding-inline: var(--space-20, 20px); border-radius: var(--radius-12, 12px); font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif); font-size: var(--fs-md, 16px); font-weight: var(--fw-semibold, 600); line-height: var(--lh-sm, 20px); text-decoration: none; transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: var(--dur, 200ms); transition-timing-function: var(--ease, cubic-bezier(.2, .6, .3, 1)); } /* --- 1b · Size L ------------------------------------------------------------ (0,2,0) against main.css:417's `min-height: 54px` at the same (0,2,0), won on source order. Also wins inside main.css:548's max-width media query for the same reason — a media query adds no specificity, so the later declaration still applies and the mobile `width: 100%; max-width: 360px` it declares is untouched. The closing CTA band therefore reaches the pack's L role on every width: "kassa, avalehe peategevus". THE HOMEPAGE HERO IS DELIBERATELY NOT IN THIS LIST. assets/css/hero-polish.css:210-264 (same design pass, enqueued at priority 22, i.e. after this file) already implements D1 size L there at (0,3,0): 60px primary, and a secondary that is 52px stacked and 60px beside it from 768px up, on a dark-surface palette this file has no business choosing. It wins on both specificity and source order, so a rule here would be dead weight that reads like a second opinion. One component, one author per surface — the hero belongs to hero-polish.css and the ladder is the same ladder. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .home-cta__inner .btn-primary { min-height: 60px; padding-inline: var(--space-24, 24px); font-size: var(--fs-lg, 18px); } /* --- 1c · Primary · rest ---------------------------------------------------- (0,1,0), later than main.css:168. The shadow change is a token migration, not a taste change. main.css:168 uses `--shadow-green: 0 10px 26px -10px rgba(5,150,105,.50)` (main.css:101) and rgb(5,150,105) IS #059669 — the green README §6 lists as deleted, "ei tohi tagasi tulla". The pack's replacement pair is --glow-brand-sm at rest and --glow-brand on hover, both built on #047857. --shadow-green itself is NOT redefined here. It is one of the six tokens the payment block references (main.css:82-90 migration guard); this file simply stops consuming it on this component. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary { background-color: var(--brand, #047857); color: var(--text-on-brand, #ffffff); border: 1px solid transparent; box-shadow: var(--glow-brand-sm, 0 1px 3px rgb(4 120 87 / .2)); } /* --- 1d · Secondary · rest -------------------------------------------------- (0,1,0), later than main.css:170. Loses the card shadow on purpose: the pack's secondary is an OUTLINE button (sample line 862 — border 1.5px --border-strong, no shadow). A drop shadow on an outline button reads as a second, weaker primary, which is exactly the ambiguity D1 exists to remove. Border width is 1.5px here — unlike the fields, nothing declares this one !important, so the pack value can be taken as written. With `box-sizing: border-box` (main.css:110) the extra half-pixel is absorbed by min-height and the primary/secondary pair still line up at 52px. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary { background-color: var(--surface, #ffffff); color: var(--text, #0f172a); border: 1.5px solid var(--border-strong, #cbd5e1); box-shadow: none; } /* --- 1e · Hover ------------------------------------------------------------ (0,2,0), later than main.css:169/171. The lift is 1px, not main.css's 2px — sample line 855. On a phone this state does not exist at all (no hover), which is why the pressed state below is the one the pack calls the most important column. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:hover { background-color: var(--brand-hover, #035e43); box-shadow: var(--glow-brand, 0 4px 16px rgb(4 120 87 / .32)); transform: translateY(-1px); } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:hover { background-color: var(--brand-a1, rgb(4 120 87 / .06)); border-color: var(--brand-a3, rgb(4 120 87 / .2)); color: var(--brand, #047857); transform: translateY(-1px); } /* The inverted CTA on the green closing band (main.css:415-417) is a WHITE button, so the brand glow above would put a green halo around white on green. (0,3,0) keeps its own neutral shadow and lets main.css:416 keep the #f1f5f9 hover fill it already declares at the same (0,3,0). */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .home-cta__inner .btn-primary:hover { box-shadow: 0 14px 34px -12px rgb(0 0 0 / .35); } /* --- 1f · Pressed ---------------------------------------------------------- Sample line 840: "Kõige tähtsam veerg on VAJUTATUD. Telefonis hover'it ei ole — kui vajutus ei anna vastust, mõjub pood katkisena." MOTION IS NOT DECLARED HERE, and that is a decision rather than an omission. motion.css (priority 99, so it loads after this file) already owns press motion for ~40 controls with one coherent scale system — .btn-primary:active at motion.css:165-185 gets `transform: scale(.97)` plus the same --brand-active colour. Adding a translateY here would give the shop two different press languages depending on which list a button happens to be on. So this block declares only what motion.css does NOT: the glow going out. That is the third of the pack's three press signals and nothing in the theme did it. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:active { background-color: var(--brand-active, #024430); box-shadow: none; } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:active { background-color: var(--brand-a2, rgb(4 120 87 / .12)); border-color: var(--brand-a3, rgb(4 120 87 / .2)); color: var(--brand-hover, #035e43); } /* --- 1g · Focus-visible · the squared-corner fix ---------------------------- a11y.css:41-47 draws the ring AND declares `border-radius: 6px` on every focused control. On a 12px button that is a visible corner snap the instant you tab onto it — the radius has no !important, so it beats main.css:165 `border-radius: var(--radius)` at (0,2,0) vs (0,1,0). THE NUMBER TO BEAT IS (0,2,1), NOT (0,2,0). `.a11y-ready button:focus-visible` is class + ELEMENT + pseudo-class, and the element in the middle is easy to miss when counting. A plain `.btn-primary:focus-visible` is (0,2,0) and would lose — the rule would look completely reasonable in the diff and change nothing on screen. `:focus-visible:focus-visible` is not a typo. Repeating a pseudo-class is valid CSS and each occurrence counts, so this lands at (0,3,0) and wins on weight rather than on source order. The alternative was to qualify by element — a.btn-primary / button.btn-primary / input.btn-primary, since the class is used on all three (front-page.php:193 anchor, ajax-filters.php:826 button, comments.php:75 class_submit) — which is six selectors to say one thing, and silently wrong the day the class lands on a fourth element. The fence itself must stay OUTSIDE this compound: `.a11y-ready` sits ON the body, so writing it as a descendant of the body fence would ask for a body inside a body and match nothing at all. (First draft of this rule did exactly that with :is(.a11y-ready, :root) and was dead on arrival.) The RING itself is left alone. It is already --green at full colour (a11y.css --a11y-focus: var(--green) -> var(--brand) = #047857, 5.00:1 on white), which is what WCAG 1.4.11 asks for. Only the corner was wrong. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:focus-visible:focus-visible, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:focus-visible:focus-visible { border-radius: var(--radius-12, 12px); } /* --- 1h · Disabled --------------------------------------------------------- Sample line 858: disabled primary is `background: --surface-muted; color: --text-subtle` — a DIFFERENT SURFACE, not a faded one. That is the substantive difference from main.css:590-593's `opacity: .6`. White text at 60% opacity over #047857 composites to roughly 2.3:1, i.e. a disabled button whose label cannot be read; #64748b on #f1f5f9 is 4.4:1 and can. Disabled must still be legible — it is telling the shopper something. Placed AFTER the hover and active blocks deliberately. Both are (0,2,0) and so is this, so source order decides, and a disabled button that is hovered must stay looking disabled. CURSOR — and the trap underneath it. main.css:591-593 sets `pointer-events: none` on disabled .btn-primary / .btn-secondary. `pointer-events: none` removes the element as a hit target, which means any `cursor` declared on it NEVER RENDERS: the pointer resolves against whatever is behind. So the theme's disabled buttons currently show a plain arrow, the same as an enabled one. - For `:disabled` (a native control) `pointer-events: auto` is restored here so `cursor: not-allowed` can actually paint. The browser refuses to activate a disabled button regardless, so nothing becomes clickable. - For `[aria-disabled="true"]` it is NOT restored. That attribute is used on elements which are still focusable and would still fire a click, and main.css's pointer-events: none is the only thing stopping it. Keeping it costs a cursor; removing it would cost a click. No cursor is claimed there, because a cursor that cannot render is a lie in the stylesheet. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary[aria-disabled="true"], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary[aria-disabled="true"] { background-color: var(--surface-muted, #f1f5f9); color: var(--text-subtle, #64748b); border-color: var(--border, #e2e8f0); box-shadow: none; transform: none; opacity: 1; } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:disabled { pointer-events: auto; cursor: not-allowed; } /* WooCommerce's own buttons never had a disabled look at all — woocommerce.css defines rest, hover and focus for `.woocommerce .button` (962-975) and nothing else. (0,3,0), uncontested. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce .button:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce .button[aria-disabled="true"] { background-color: var(--surface-muted, #f1f5f9); color: var(--text-subtle, #64748b); box-shadow: none; transform: none; } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce .button:disabled { cursor: not-allowed; } /* --- 1i · In-flight · the double-submit guard ------------------------------- The pack's sixth state. What already exists: main.css:589 `.is-busy { opacity:.8; pointer-events:none }` — guarded motion.css:769 `button.is-loading` gets a breathing opacity + cursor progress, but NO pointer guard woocommerce.css:327 `a.add_to_cart_button.loading { opacity:.85 }` — a dimmed button that is still fully tappable The theme's own JS sets `disabled` alongside `.is-loading` (interactions.js :318-319, bundles.js:66-67, filters.js:411-412, giftcards.js:154-155), so those are covered by the browser. WooCommerce's AJAX add-to-cart does NOT: it adds `.loading` and nothing else, so a second tap during a slow request adds the product twice. On a phone, on a slow connection, that is a real order with a real wrong quantity. `pointer-events: none` is the whole fix and it needs no JS. It cannot block a keyboard Enter on a focused button — for that the button needs the `disabled` attribute, which is a JS change and is written up in the handover rather than faked here. --------------------------------------------------------------------------*/ /* ⛔ WooCommerce's own `.loading` class is NOT in this list, and must not be. Verified against the live add-to-cart.min.js (WC 11.0.1): the button gets addClass("loading") before the request, and removeClass("loading") lives in exactly one place — updateButton, bound to `added_to_cart`. The request has NO `error:` handler. So on a dropped connection, a 502, or an empty response, the class is never removed and it stays on the button until the page is reloaded. With pointer-events:none that button is DEAD. Today (woocommerce.css:327) it only dims to opacity .85 and stays clickable, so the shopper taps again and gets the product. `body` itself carries the `woocommerce` class on every shop page, so this would have applied to every add-to-cart in the catalogue — 12 on the first page of /pood/, 18 on the front page. Double-submit protection on an AJAX button is a real problem; the correct fix is JS setting `disabled` (assets/js/interactions.js:318 already does this for the theme's own buttons), not CSS with no way out. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary.is-loading, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary.is-loading, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary[aria-busy="true"], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary[aria-busy="true"] { pointer-events: none; } /* ========================================================================== 2 · D2 — FORM FIELDS Pack: 8 types x 5 states, all 52px and 16px. Sample line 929: "Kõik on 52px kõrged ja 16px kirjaga — telefonis on see piir, millest allpool iOS lehe sisse suumib ja ostja kaotab konteksti." SCOPE: the WooCommerce `.form-row` family, off the checkout. In practice that is sign-in, registration, lost password, account details, the address book and the order-tracking forms — every form a shopper meets except the one checkout-fields.css already owns. The theme's OWN inputs (.og-popup__input engagement.css:98, .ostu-searchform__input pages.css:20, the footer newsletter field, .ostu-cs-card etc.) are NOT touched. Each is fully specified by its own module, several sit inside `overflow: hidden` pill shells that would clip a ring, and a site-wide `input[type="text"]` rule is exactly how a search field ends up with a border inside a pill. Those are a migration to propose, not a side effect of this file. ========================================================================== */ /* --- 2a · Resting shape ---------------------------------------------------- (0,3,2) — matches woocommerce.css:1208 and beats WooCommerce core's `.woocommerce form .form-row .input-text` (0,3,1); won on source order against the equal one. Values are byte-identical to checkout-fields.css:89-107. See the header. `border-color ... !important` answers woocommerce.css:1209 `border: 1px solid var(--border) !important`. Only the COLOUR is contested: --border #e2e8f0 is the pack's DEFAULT border role, while a form field is --border-strong #cbd5e1. Width and radius already match the target, so nothing else is escalated — the same single-property escalation checkout-fields.css documents at its lines 60-75. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row select { box-sizing: border-box; width: 100%; min-height: 52px; padding: var(--space-12, 12px) var(--space-16, 16px); font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif); font-size: 16px; line-height: var(--lh-md, 24px); color: var(--text, #0f172a); background-color: var(--surface, #ffffff); border-color: var(--border-strong, #cbd5e1) !important; transition-property: border-color, background-color, box-shadow; transition-duration: var(--dur, 200ms); transition-timing-function: var(--ease, cubic-bezier(.2, .6, .3, 1)); } /* Multi-line fields — core gives textarea `height: 4em`, which at 16px is barely two lines and cannot be dragged. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea { min-height: 104px; height: auto; resize: vertical; } /* SELECT — the missing arrow. Core sets `appearance: none` AND supplies its own chevron as a background-image, both at (0,2,2). woocommerce.css:1209 then declares `background: #fff` — the SHORTHAND — at the same (0,2,2) but later, which resets background-image to none. Appearance is still off and the arrow is gone, so a : a select already spends its right edge on the arrow restored in block 2a, and the two would sit on top of each other. Signal 3 · TEXT — WooCommerce's own `.woocommerce-error` list, which carries role="alert" and is already styled in woocommerce.css. It is not adjacent to the field; that is a known limit of server-side validation, written up in the handover rather than papered over here. ========================================================================== */ /* 2e-i · the class WooCommerce sets (present off-checkout only if a plugin sets it; kept so the vocabulary is complete and identical to the checkout) */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid input.input-text, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid textarea, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--state-error, #b91c1c) !important; border-width: 2px !important; background-color: var(--danger-a1, rgb(185 28 28 / .06)); } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid > label:where(:not(.checkbox):not(.woocommerce-form__label-for-checkbox)) { color: var(--state-error, #b91c1c); } /* 2e-ii · the ARIA attribute — what a well-behaved script sets, and what a screen reader actually reads. Styled at the same weight so the two agree. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text[aria-invalid="true"], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea[aria-invalid="true"] { border-color: var(--state-error, #b91c1c) !important; border-width: 2px !important; background-color: var(--danger-a1, rgb(185 28 28 / .06)); } /* 2e-iii · the browser's own verdict — SEPARATE BLOCK, see the note above. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text:user-invalid, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea:user-invalid { border-color: var(--state-error, #b91c1c) !important; border-width: 2px !important; background-color: var(--danger-a1, rgb(185 28 28 / .06)); } /* 2e-iv · the icon + the room for it. Inputs and textareas only. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid input.input-text, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text[aria-invalid="true"] { padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b91c1c'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.4a1.25 1.25 0 0 1 1.25 1.35l-.37 5.3a.88.88 0 0 1-1.76 0l-.37-5.3A1.25 1.25 0 0 1 10 4.4Zm0 9.1a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px 20px; background-position: right 16px center; } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text:user-invalid { padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b91c1c'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.4a1.25 1.25 0 0 1 1.25 1.35l-.37 5.3a.88.88 0 0 1-1.76 0l-.37-5.3A1.25 1.25 0 0 1 10 4.4Zm0 9.1a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px 20px; background-position: right 16px center; } /* 2e-v · error + focus. Placed after block 2c ON PURPOSE: both are box-shadow, and if focus won, the error border and the brand-green ring would appear together on the field the shopper is being asked to fix. Re-order these two and the error disappears the moment it is touched. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid input.input-text:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row.woocommerce-invalid textarea:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text[aria-invalid="true"]:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea[aria-invalid="true"]:focus { box-shadow: var(--focus-ring-danger, 0 0 0 2px #ffffff, 0 0 0 5px #b91c1c); border-color: var(--state-error, #b91c1c) !important; } :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text:user-invalid:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea:user-invalid:focus { box-shadow: var(--focus-ring-danger, 0 0 0 2px #ffffff, 0 0 0 5px #b91c1c); border-color: var(--state-error, #b91c1c) !important; } /* --- 2f · Disabled / read-only fields -------------------------------------- Mirrors checkout-fields.css:359-367 exactly. A read-only field (the account email on some flows) is not an error and not a mistake — it is simply not yours to edit, and it should say so with a surface and a cursor. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row select:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text[readonly], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea[readonly] { opacity: .6; cursor: not-allowed; background-color: var(--surface-muted, #f1f5f9); } /* --- 2g · Checkbox + radio ------------------------------------------------- Sample lines 1001-1019: both are NATIVE controls in this system, 24px, with the whole row as the 44px target. a11y.css:210-218 already gives the row its 44px, so the only thing missing was that every checkbox and radio in the shop was browser blue. One declaration, one property, and every tick in the store belongs to the brand. (0,1,1). Deliberately narrow: no size, no custom box, no ::before. A native checkbox is keyboard-correct, forced-colors-correct and screen-reader- correct for free, and the pack chose it for that reason. The gateway's own radios (woocommerce.css:1291) are on the checkout and therefore outside the fence — they keep their own declaration untouched. --------------------------------------------------------------------------*/ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) input[type="checkbox"], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) input[type="radio"] { accent-color: var(--brand, #047857); } /* ========================================================================== 3 · prefers-reduced-motion — COMPLETE, NOT PARTIAL This file introduces exactly two transforms: the 1px hover lift in block 1e. a11y.css:269-276 already cancels .btn-primary:hover / .btn-secondary:hover with !important, so they are covered twice — but a module that depends on another module's !important to be correct is not self-sufficient, and a11y.css's cancellation is (0,3,0) while the inverted-CTA hover in block 1e is (0,3,0) too, i.e. decided by source order rather than by weight. What SURVIVES matters more than what is removed. Someone who asked the OS to stop animation still has to SEE the state change: hover primary -> --brand-hover background + the wider glow secondary-> --brand-a1 fill + --brand-a3 border + brand text pressed primary -> --brand-active background, glow gone focus the ring, which was never animated error 2px border + icon + tint, no motion involved at any point Only the 1px displacement is removed. Every cue is colour or shadow, and both are exempt from this media query by nature. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:hover, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:hover, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .home-cta__inner .btn-primary:hover { transform: none; } } /* ========================================================================== 4 · FORCED COLORS (Windows High Contrast) This mode discards box-shadow outright, so the field focus ring in block 2c would leave NO indicator at all — and every rule in this file out-ranks a11y.css's forced-colors restoration, which sits at (0,2,1). Restated here at matching weight, exactly as checkout-fields.css:400-423 does for the checkout. The error badge in block 2e is a background-image and is also discarded. That is precisely why the border was THICKENED to 2px rather than only recoloured: border-width is the one error signal that survives this mode, and WooCommerce's error text carries the rest. ========================================================================== */ @media (forced-colors: active) { :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row input.input-text:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row textarea:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row select:focus, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .woocommerce form .form-row .select2-container--focus .select2-selection { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; } /* A disabled button in this mode is told apart by GrayText, not by our surface token — forced-colors replaces the palette entirely. */ :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary:disabled, :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-primary[aria-disabled="true"], :where(body:not(.woocommerce-checkout):not(.woocommerce-add-payment-method)) .btn-secondary[aria-disabled="true"] { color: GrayText; border-color: GrayText; } }