/* =============================================================================
25-controls.css — Buttons, fields & micro-components
-----------------------------------------------------------------------------
The control layer of the whole store. It answers three questions once, in
this file, and nothing below is allowed to answer them a second time.
1 — ONE RADIUS SCALE. Two values. That is the whole scale.
--ctl-r 6px EVERY rectangle in the control layer: field,
select, textarea, tick box, panel, card,
dropdown, notice, badge, counter, summary,
segment, stepper, sort trigger.
--ctl-r-action 999px RESERVED for a primary action. The paper pill
is the store's commit gesture and nothing else
in the store is allowed to borrow its corner.
A circle is not a corner. Three things are genuinely round because
round is their affordance — the radio, the loading ring, and the round
icon buttons (view toggle, pagination, card action) that echo the
hero's dot rail. They take 50%, and they are the only exceptions.
--ctl-r-1 / --ctl-r-2 survive as aliases of --ctl-r so that no rule
written before this scale existed can reintroduce a third corner.
2 — ONE INPUT TREATMENT. Flat, not graded. The page ground is --night at
#0e1611; a field is a FLAT slab of --ctl-field-face, mixed several
steps up towards --ink so it separates from the page by tone alone,
finished with a single 1px inset highlight along its top edge and a
warm hairline. No gradient, no drop shadow, no bevel: depth in this
system comes from surface tone and one lit edge, nothing else.
Focus adds a 2px accent-tinted ring — never a browser outline.
Three planes, in this order, and the order is the point:
panel below the page --ctl-panel-face (a form's own ground)
page --night
field above the page --ctl-field-face (the thing you type in)
3 — NO RAW BROWSER ARTEFACTS. §12 removes or redraws every user-agent
widget the store can surface: spin buttons, the search-cancel cross,
autofill / strong-password / contacts keys, the caps-lock glyph, the
textarea resizer grip, calendar buttons, MS clear/reveal, file-upload
buttons, colour swatches, tap flashes, focus outlines and the OS
scrollbar inside every control that scrolls. Checkboxes and radios are
not restyled — §4 rebuilds them from `appearance: none`.
4 — ONE ACCENT PER VIEW. Link-green was the loudest thing on the checkout:
every inline link, every required asterisk, every helper. §4b sets
inline links in cream under a 1px accent rule instead, and demotes the
asterisks to muted. The saturated accent survives in exactly two
places per view — the display type's period, and the order Total.
This file loads last, so it carries its own media queries.
========================================================================== */
:root {
/* --- Warm paper washes -------------------------------------------------
The hero draws its chrome as paper at low alpha over the photograph.
Reusing that instead of the cold grey --color-border makes the controls
read as part of the same object as the hero, not as a UI kit bolted on. */
--ctl-wash-1: rgba(236, 229, 214, 0.05);
--ctl-wash-2: rgba(236, 229, 214, 0.085);
--ctl-wash-3: rgba(236, 229, 214, 0.14);
--ctl-hair: rgba(236, 229, 214, 0.16);
--ctl-hair-2: rgba(236, 229, 214, 0.24);
--ctl-hair-3: rgba(236, 229, 214, 0.44);
/* The lit paper the hero's CTA warms to on hover (journey.css uses the same
value); and --night-2 as rgb so glass grounds can take an alpha of it. */
--ctl-paper-lit: #fffaf0;
--ctl-night-rgb: 7, 12, 8;
/* rgb mirrors of palette tokens so component rules can take an alpha of
them without ever writing a fresh hex. Note --color-primary-rgb is the
ACCENT green (158, 201, 138) — the one that reads on a dark ground. */
--ctl-danger-rgb: 226, 112, 92; /* --color-danger */
--ctl-gold-rgb: 213, 160, 94; /* --color-secondary */
--ctl-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
/* Cast shadows survive on exactly one class of object: things that FLOAT
over the page — a dropdown, a popover, a control sitting on a photograph.
No button, field or panel casts a shadow. */
--ctl-lift: 0 30px 64px -26px rgba(0, 0, 0, 1);
/* ======================================================================
THE RADIUS SCALE — two values, and the aliases that keep it two.
====================================================================== */
--ctl-r: 6px;
--ctl-r-action: 999px;
--ctl-r-1: var(--ctl-r);
--ctl-r-2: var(--ctl-r);
--ctl-radius: var(--ctl-r-action);
/* ======================================================================
THE ROW — one height for everything that shares a line.
====================================================================== */
--ctl-h: 48px; /* the row: button, select, trigger, segment */
--ctl-h-sm: 38px; /* inline action inside a notice or a widget */
--ctl-h-lg: 56px; /* a commit button that owns its own line */
--ctl-field-h: 48px; /* a field is a control, so it is 48 too */
--ctl-box: 18px; /* the tick box */
--ctl-track: 0.09em;
/* ======================================================================
THE FIELD — one flat material, declared once.
face a flat slab lifted off --color-surface-2 towards --ink until it
separates from the --night page by tone alone
crown a single 1px inset highlight along the top edge — the ONLY
modelling in the system
edge a warm hairline that is actually visible on that slab
====================================================================== */
--ctl-field-face: color-mix(in srgb, var(--color-surface-2) 91%, var(--ink));
--ctl-field-face-hover: color-mix(in srgb, var(--color-surface-2) 86%, var(--ink));
--ctl-field-face-focus: color-mix(in srgb, var(--color-surface-2) 83%, var(--ink));
/* Kept as tokens, set to `none`: every historical `background-image:
var(--ctl-field-fill)` in this file therefore paints nothing, which is
how the gradient leaves the system in one line instead of forty. */
--ctl-field-fill: none;
--ctl-field-fill-hover: none;
--ctl-field-fill-focus: none;
--ctl-field-edge: color-mix(in srgb, var(--ink) 17%, transparent);
--ctl-field-edge-lit: color-mix(in srgb, var(--ink) 17%, transparent);
--ctl-field-edge-hov: color-mix(in srgb, var(--ink) 30%, transparent);
--ctl-field-edge-foc: rgba(var(--color-primary-rgb), 0.75);
--ctl-field-ink: var(--color-dark);
--ctl-field-hint: color-mix(in srgb, var(--color-text-light) 78%, transparent);
/* The crown, and nothing else. */
--ctl-field-depth: inset 0 1px 0 rgba(236, 229, 214, 0.10);
--ctl-field-depth-hover: inset 0 1px 0 rgba(236, 229, 214, 0.15);
--ctl-field-depth-focus: inset 0 1px 0 rgba(236, 229, 214, 0.17),
0 0 0 2px rgba(var(--color-primary-rgb), 0.42);
--ctl-field-depth-error: inset 0 1px 0 rgba(236, 229, 214, 0.12),
0 0 0 2px rgba(var(--ctl-danger-rgb), 0.38);
/* A form panel sits BELOW the page ground so the field slabs on it read as
raised. Three planes, in order: panel < page < field. */
--ctl-panel-face: color-mix(in srgb, var(--night-2) 62%, transparent);
--ctl-panel-edge: color-mix(in srgb, var(--ink) 11%, transparent);
--ctl-field-transition:
background-color 0.3s var(--ctl-ease), border-color 0.3s var(--ctl-ease),
box-shadow 0.3s var(--ctl-ease), color 0.3s var(--ctl-ease);
/* --- Focus -------------------------------------------------------------
main.css and woocommerce.css already say `box-shadow: var(--focus-ring)`
in a dozen places, so redefining the token upgrades every one of them at
once: the same 2px accent-tinted ring the fields use. */
--focus-ring: 0 0 0 2px rgba(var(--color-primary-rgb), 0.55);
/* --- WooCommerce's own form variables -----------------------------------
WooCommerce paints its fields straight from these, at a specificity the
theme would otherwise need !important to beat. Declaring them is the
supported way in, and it reaches controls no rule below ever names. */
--wc-form-color-background: color-mix(in srgb, var(--color-surface-2) 91%, var(--ink));
--wc-form-color-text: var(--color-dark);
--wc-form-border-color: color-mix(in srgb, var(--ink) 17%, transparent);
--wc-form-border-width: 1px;
--wc-form-border-radius: 6px;
/* Re-eased globally: nothing on this site should pop. */
--transition: color 0.3s var(--ctl-ease), background-color 0.3s var(--ctl-ease),
border-color 0.3s var(--ctl-ease), box-shadow 0.3s var(--ctl-ease),
transform 0.35s var(--ctl-ease), opacity 0.3s var(--ctl-ease);
/* Legacy aliases: the two cast shadows the button family used to take. */
--ctl-shadow: none;
--ctl-shadow-hover: none;
}
/* =============================================================================
1. THE BUTTON FAMILY — shared shape and voice
========================================================================== */
.btn,
.teashop-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce .woocommerce-Button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .variations_form button.single_add_to_cart_button.button,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart a.wp-block-button__link,
.shop-filter-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--ctl-h);
padding: 0 28px;
border: 1px solid transparent;
border-radius: var(--ctl-radius);
font-family: var(--font-primary);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: var(--ctl-track);
text-transform: uppercase;
text-align: center;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color 0.3s var(--ctl-ease), background 0.3s var(--ctl-ease),
border-color 0.3s var(--ctl-ease), box-shadow 0.4s var(--ctl-ease),
transform 0.4s var(--ctl-ease);
}
/* --- Primary: the paper pill ------------------------------------------------
Lifted straight off .journey-cta. The gradient runs ink -> paper so the pill
catches light at the top edge; the inset hairline is the highlight that
stops it reading as a flat sticker. --------------------------------------- */
.btn-primary,
.teashop-btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce .woocommerce-Button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .variations_form button.single_add_to_cart_button.button,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart a.wp-block-button__link,
.shop-filter-btn {
--ctl-spinner: var(--night);
--ctl-spinner-track: rgba(14, 22, 17, 0.22);
background: var(--paper);
color: var(--night);
border-color: var(--paper);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-primary:hover,
.teashop-btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .variations_form button.single_add_to_cart_button.button:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
a.wp-block-button__link.add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart a.wp-block-button__link:hover,
.shop-filter-btn:hover {
background: var(--ctl-paper-lit);
color: var(--night);
border-color: var(--ctl-paper-lit);
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-primary:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce button.button.alt:active,
.wc-block-components-button:not(.is-link):active,
.wp-element-button:active {
transform: none;
background: var(--neutral-300);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* The block-button label lives in a child div that WordPress colours on its
own; without this the pill reads as a blank bar. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button.wp-element-button:not(.is-link) {
color: var(--night);
}
/* --- Secondary: hairline pill ------------------------------------------------
Everything that supports the primary action. WooCommerce's own semantics do
most of the sorting for us: `.alt` is the real action, plain `.button` in a
notice or on a coupon row is the supporting one. --------------------------- */
.btn-outline,
.btn-outline-white,
.btn-secondary,
.teashop-btn-outline,
.woocommerce .button[name="apply_coupon"],
.woocommerce .button[name="update_cart"],
.woocommerce .checkout_coupon .button,
.woocommerce a.button.wc-backward,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce .cart .button[name="update_cart"] {
--ctl-spinner: var(--paper);
--ctl-spinner-track: rgba(236, 229, 214, 0.22);
background: var(--ctl-wash-1);
color: var(--color-dark);
border-color: var(--ctl-hair-2);
box-shadow: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.btn-outline:hover,
.btn-outline-white:hover,
.btn-secondary:hover,
.teashop-btn-outline:hover,
.woocommerce .button[name="apply_coupon"]:hover,
.woocommerce .button[name="update_cart"]:hover,
.woocommerce .checkout_coupon .button:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
background: var(--ctl-wash-2);
color: var(--ink);
border-color: var(--ctl-hair-3);
transform: none;
box-shadow: none;
}
/* --- Ghost: text with a hover ground ---------------------------------------- */
.btn-ghost,
.teashop-btn-ghost,
.wc-block-components-button.is-link,
.woocommerce-remove-coupon,
.woocommerce .woocommerce-form-login__rememberme + .lost_password a {
background: transparent;
border-color: transparent;
color: var(--color-text-light);
box-shadow: none;
}
.btn-ghost {
padding: 0 18px;
}
.btn-ghost:hover,
.teashop-btn-ghost:hover,
.wc-block-components-button.is-link:hover {
background: var(--ctl-wash-1);
border-color: transparent;
color: var(--ink);
transform: none;
}
/* Danger stays a hairline too — a red block would out-shout the primary. */
.btn-danger,
.teashop-btn-danger {
background: rgba(var(--ctl-danger-rgb), 0.08);
color: var(--color-danger);
border-color: rgba(var(--ctl-danger-rgb), 0.38);
box-shadow: none;
}
.btn-danger:hover,
.teashop-btn-danger:hover {
background: rgba(var(--ctl-danger-rgb), 0.16);
border-color: rgba(var(--ctl-danger-rgb), 0.62);
color: var(--color-danger);
transform: none;
}
/* --- Sizes ------------------------------------------------------------------ */
.btn-sm,
.woocommerce .button.small,
.woocommerce-message .button,
.woocommerce-info .button {
min-height: var(--ctl-h-sm);
padding: 0 18px;
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.btn-lg {
min-height: var(--ctl-h-lg);
padding: 0 40px;
font-size: 0.8rem;
}
.btn-block,
.btn.btn-block {
width: 100%;
}
.btn-icon {
padding: 0;
width: var(--ctl-h);
min-height: var(--ctl-h);
}
/* The commit buttons of the whole store get the large treatment and fill
their column — they are the end of a funnel, not an inline control. */
.woocommerce button.woocommerce-form-login__submit,
.woocommerce input.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit,
.woocommerce input.woocommerce-form-register__submit,
.woocommerce a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
min-height: var(--ctl-h-lg);
padding: 0 34px;
font-size: 0.78rem;
}
.woocommerce a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
width: 100%;
}
/* --- #place_order ------------------------------------------------------------
WooCommerce styles this with an ID selector, and the theme's woocommerce.css
answers it with `#payment #place_order { display: block !important }` — two
IDs plus a bang. Nothing short of the same specificity reaches the store's
single most important button, so match it exactly. This overrides the
theme's own declaration, not the plugin's. -------------------------------- */
.woocommerce-checkout #payment #place_order,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce #place_order {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: var(--ctl-h-lg);
padding: 0 34px;
border: 1px solid var(--paper);
border-radius: var(--ctl-radius);
background: var(--paper);
color: var(--night);
font-family: var(--font-primary);
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
letter-spacing: var(--ctl-track);
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce #place_order:hover {
background: var(--ctl-paper-lit);
border-color: var(--ctl-paper-lit);
color: var(--night);
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.woocommerce-checkout #payment #place_order:disabled,
.woocommerce #place_order:disabled {
background: var(--ctl-wash-1);
border-color: var(--ctl-hair);
color: var(--color-text-muted);
box-shadow: none;
transform: none;
cursor: not-allowed;
}
/* --- The forward arrow ------------------------------------------------------
The hero's CTA ends in an arrow; so does every button that moves the visitor
one step further down the funnel. Set explicitly so WooCommerce's own icon
webfont glyph can never show through. ------------------------------------- */
.woocommerce a.button.wc-forward::after,
.woocommerce a.checkout-button::after,
.woocommerce-checkout #payment #place_order::after,
.woocommerce #payment #place_order::after,
.woocommerce #place_order::after,
.wc-block-cart__submit-button::after,
.btn.btn-forward::after {
content: "\2192";
font-family: var(--font-primary);
font-size: 1.05em;
line-height: 1;
position: static;
margin: 0;
opacity: 0.75;
transition: transform 0.4s var(--ctl-ease), opacity 0.3s var(--ctl-ease);
}
.woocommerce a.button.wc-forward:hover::after,
.woocommerce a.checkout-button:hover::after,
.woocommerce-checkout #payment #place_order:hover::after,
.woocommerce #payment #place_order:hover::after,
.woocommerce #place_order:hover::after,
.wc-block-cart__submit-button:hover::after,
.btn.btn-forward:hover::after {
transform: translateX(4px);
opacity: 1;
}
/* Backward actions get the mirror. */
.woocommerce a.button.wc-backward::before {
content: "\2190";
font-family: var(--font-primary);
font-size: 1.05em;
line-height: 1;
opacity: 0.7;
transition: transform 0.4s var(--ctl-ease);
}
.woocommerce a.button.wc-backward:hover::before { transform: translateX(-4px); }
/* =============================================================================
2. DISABLED & LOADING
========================================================================== */
.btn:disabled,
.btn[disabled],
.btn.disabled,
.teashop-btn:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button[disabled],
.woocommerce .variations_form button.single_add_to_cart_button.button.disabled,
.woocommerce .variations_form button.single_add_to_cart_button.button:disabled,
.wc-block-components-button:not(.is-link):disabled,
.wp-element-button:disabled {
background: var(--ctl-wash-1);
color: var(--color-text-muted);
border-color: var(--ctl-hair);
box-shadow: none;
transform: none;
opacity: 1;
cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn.disabled:hover,
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce .variations_form button.single_add_to_cart_button.button.disabled:hover,
.woocommerce .variations_form button.single_add_to_cart_button.button:disabled:hover,
.wc-block-components-button:not(.is-link):disabled:hover,
.wp-element-button:disabled:hover {
background: var(--ctl-wash-1);
color: var(--color-text-muted);
border-color: var(--ctl-hair);
transform: none;
box-shadow: none;
}
/* Loading — WooCommerce fades the button to 25% and spins a glyph from its own
icon font in the corner. Hold the pill at full strength instead, blank the
label and centre a proper ring in it. */
.btn.loading,
.btn.is-loading,
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading,
.woocommerce .button.loading,
a.wp-block-button__link.add_to_cart_button.loading,
[aria-busy="true"].button,
[aria-busy="true"].btn {
color: transparent;
opacity: 1;
padding-right: 28px;
pointer-events: none;
transform: none;
}
.btn.loading::after,
.btn.is-loading::after,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce .button.loading::after,
a.wp-block-button__link.add_to_cart_button.loading::after,
[aria-busy="true"].button::after,
[aria-busy="true"].btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 17px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 2px solid var(--ctl-spinner-track, rgba(236, 229, 214, 0.22));
border-top-color: var(--ctl-spinner, var(--paper));
animation: ctl-spin 0.72s linear infinite;
opacity: 1;
font-size: 0;
transform: none;
}
@keyframes ctl-spin { to { transform: rotate(360deg); } }
/* WooCommerce's "View cart" confirmation link that appears beside an added
product — a quiet accent link, never a second pill. */
.woocommerce a.added_to_cart {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.35);
}
/* =============================================================================
3. THE FIELD — one material, one corner, one focus
-----------------------------------------------------------------------------
Everything typable in the store is this object and nothing else: a warm slab
cut from --color-surface-2, two full steps ABOVE the page ground, lit along
its crown, settled along its foot, standing on a contact shadow, cornered at
--ctl-r-1. The treatment it replaces punched a --night-2 void INTO the page
and held it with a hairline at 16% paper: on a --night page that reads as a
hole, not as a control, which is exactly how a form ends up looking unstyled
underneath a styled header.
The selector list below is one rule on purpose. It opens with a
zero-specificity :where() catch-all so a control nobody ever named — a
plugin's field, a widget's input, a date picker — still arrives dressed, and
so any workstream that owns a field of its own (the header's search, the
footer's newsletter rule) overrides it with a single class. The store's own
class names follow at their natural specificity, which is what beats
WooCommerce's plugin CSS without one !important.
========================================================================== */
:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], select, textarea
),
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .woocommerce-Input,
.woocommerce .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce-ordering select,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__select,
.wc-block-components-select__container select,
.wp-block-search__input,
.select2-container--default .select2-selection--single {
min-height: var(--ctl-field-h);
max-width: 100%;
padding: 14px 16px;
-webkit-appearance: none;
appearance: none;
background-color: var(--ctl-field-face);
background-image: var(--ctl-field-fill);
color: var(--ctl-field-ink);
border: 1px solid var(--ctl-field-edge);
border-top-color: var(--ctl-field-edge-lit);
border-radius: var(--ctl-r-1);
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.005em;
outline: none;
box-shadow: var(--ctl-field-depth);
transition: var(--ctl-field-transition);
}
/* Store fields fill their column. The :where() catch-all deliberately does
not, so a stray control keeps its intrinsic width. */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .woocommerce-Input,
.woocommerce .variations select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce-ordering select,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__select,
.wc-block-components-select__container select,
.wp-block-search__input,
.select2-container--default .select2-selection--single {
width: 100%;
}
/* Hover raises the slab a little further off the page — the same gesture the
buttons make, minus the translate. */
:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], select, textarea
):hover,
.woocommerce input.input-text:hover,
.woocommerce textarea:hover,
.woocommerce select:hover,
.woocommerce .woocommerce-Input:hover,
.woocommerce .variations select:hover,
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover,
.woocommerce-page form .form-row input.input-text:hover,
.woocommerce-page form .form-row textarea:hover,
.woocommerce-page form .form-row select:hover,
.woocommerce-ordering select:hover,
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover,
.form-group textarea:hover,
.comment-form input[type="text"]:hover,
.comment-form input[type="email"]:hover,
.comment-form input[type="url"]:hover,
.comment-form textarea:hover,
.wc-block-components-text-input input:hover,
.wc-block-components-textarea:hover,
.wc-block-components-combobox-control input:hover,
.wc-block-components-select__select:hover,
.wc-block-components-select__container select:hover,
.wp-block-search__input:hover,
.select2-container--default .select2-selection--single:hover {
background-color: var(--ctl-field-face-hover);
background-image: none;
border-color: var(--ctl-field-edge-hov);
box-shadow: var(--ctl-field-depth-hover);
}
/* Focus: the accent hairline plus a soft halo, never the UA ring. select2
fakes focus with two container classes, so they join the same rule. */
:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], select, textarea
):focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce .woocommerce-Input:focus,
.woocommerce .variations select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce-ordering select:focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select__select:focus,
.wc-block-components-select__container select:focus,
.wp-block-search__input:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
background-color: var(--ctl-field-face-focus);
background-image: none;
border-color: var(--ctl-field-edge-foc);
box-shadow: var(--ctl-field-depth-focus);
outline: none;
}
/* Placeholders sit a clear step below entered text so a filled field reads as
filled at a glance. */
:where(
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="month"],
input[type="time"], input[type="week"], select, textarea
)::placeholder,
.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder,
.woocommerce select::placeholder,
.woocommerce .woocommerce-Input::placeholder,
.woocommerce .variations select::placeholder,
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce form .form-row select::placeholder,
.woocommerce-page form .form-row input.input-text::placeholder,
.woocommerce-page form .form-row textarea::placeholder,
.woocommerce-page form .form-row select::placeholder,
.woocommerce-ordering select::placeholder,
.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder,
.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form input[type="url"]::placeholder,
.comment-form textarea::placeholder,
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder,
.wc-block-components-combobox-control input::placeholder,
.wc-block-components-select__select::placeholder,
.wc-block-components-select__container select::placeholder,
.wp-block-search__input::placeholder,
.select2-container--default .select2-selection--single::placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--ctl-field-hint);
opacity: 1;
font-weight: 400;
letter-spacing: 0.01em;
}
/* Disabled and read-only fields lose the slab: no lift, no crown, no cast —
they sit flush with the page and read as "not yours to fill". Without this
a disabled control is indistinguishable from a live one. */
.woocommerce input.input-text:disabled,
.woocommerce textarea:disabled,
.woocommerce select:disabled,
.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row select:disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled,
.select2-container--disabled .select2-selection--single,
:where(input, select, textarea):disabled {
background-color: transparent;
background-image: none;
border-color: var(--ctl-hair);
border-top-color: var(--ctl-hair);
color: var(--color-text-muted);
box-shadow: none;
cursor: not-allowed;
opacity: 1;
}
.woocommerce input.input-text[readonly],
.woocommerce form .form-row input.input-text[readonly],
.form-group input[readonly],
:where(input, textarea)[readonly] {
background-image: none;
background-color: var(--ctl-wash-1);
border-color: var(--ctl-hair);
box-shadow: none;
color: var(--color-text-light);
cursor: default;
}
.woocommerce input.input-text:disabled:hover,
.woocommerce select:disabled:hover,
.form-group input:disabled:hover,
:where(input, select, textarea):disabled:hover,
:where(input, textarea)[readonly]:hover {
background-image: none;
border-color: var(--ctl-hair);
box-shadow: none;
}
/* --- Textarea --------------------------------------------------------------
The one field that is taller than it is deep. Same slab, more room, and the
UA's grabber triangle is removed in section 12 — resizing still works. */
.woocommerce textarea,
.woocommerce form .form-row textarea,
.form-group textarea,
.comment-form textarea,
.wc-block-components-textarea,
:where(textarea) {
min-height: 132px;
padding-top: 15px;
padding-bottom: 15px;
resize: vertical;
line-height: 1.65;
}
/* --- Native select ---------------------------------------------------------
`appearance: none` above already removed the system widget, so nothing here
is a UA chevron. The mark is drawn from two 1px diagonals in currentColor —
no icon font, no data URI, no stock triangle — and it inherits every state
the field already has because it is painted in the field's own ink. -------- */
.woocommerce select,
.woocommerce .variations select,
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce-ordering select,
.form-group select,
.wc-block-components-select__select,
.wc-block-components-select__container select,
:where(select) {
padding-right: 46px;
background-image:
linear-gradient(to top right, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px), currentColor calc(50% + 0.7px), transparent calc(50% + 0.7px)),
linear-gradient(to bottom right, transparent calc(50% - 0.7px), currentColor calc(50% - 0.7px), currentColor calc(50% + 0.7px), transparent calc(50% + 0.7px));
background-size: 8px 8px, 8px 8px;
background-position: right 24px center, right 17px center;
background-repeat: no-repeat;
cursor: pointer;
text-overflow: ellipsis;
}
/* The popup itself is drawn by the OS; `color-scheme: dark` in main.css is
what keeps it from opening white. These two only fix the rows' colours. */
.woocommerce select option,
.form-group select option,
:where(select) option,
:where(select) optgroup {
background: var(--color-surface);
color: var(--color-text);
}
:where(select) optgroup {
color: var(--color-text-muted);
font-style: normal;
}
/* --- Validation ------------------------------------------------------------
WooCommerce only recolours the border; pair it with the field's own depth
token so the state reads as the same object in a different mood. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
border-color: rgba(var(--ctl-danger-rgb), 0.7);
box-shadow: var(--ctl-field-depth-error);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-container--default .select2-selection--single {
border-color: rgba(var(--color-primary-rgb), 0.5);
}
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row.woocommerce-invalid > label:not(.checkbox) {
color: var(--color-danger);
}
/* Autofill. Chrome repaints the field near-white with black text and the only
lever left is an inset shadow, which has to be an opaque colour — which is
exactly why the field's face is a solid token and not a wash. */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus,
.woocommerce input:-webkit-autofill:active,
.woocommerce textarea:-webkit-autofill,
.woocommerce select:-webkit-autofill,
.form-group input:-webkit-autofill,
.comment-form input:-webkit-autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--ctl-field-ink);
-webkit-box-shadow: 0 0 0 1000px var(--ctl-field-face) inset;
box-shadow: 0 0 0 1000px var(--ctl-field-face) inset;
caret-color: var(--color-accent);
transition: background-color 100000s ease 0s;
}
/* Every field's caret is the accent — a 1px brand mark that only shows while
someone is actually typing. */
.woocommerce input.input-text,
.woocommerce textarea,
.form-group input,
.form-group textarea,
:where(input, textarea) {
caret-color: var(--color-accent);
}
/* --- Rhythm -----------------------------------------------------------------
WooCommerce stacks its rows 16px apart, which on a 52px field reads as a
list of boxes. 20px lets each label/field pair read as one unit with air
around it — and the two address lines, which are one address, close back up
to 8px so they group the way they are read. ------------------------------- */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
margin-bottom: var(--space-5);
}
.woocommerce form .form-row#billing_address_2_field,
.woocommerce form .form-row#shipping_address_2_field,
.woocommerce-page form .form-row#billing_address_2_field,
.woocommerce-page form .form-row#shipping_address_2_field {
margin-top: -12px;
}
.woocommerce form .form-row:last-child { margin-bottom: 0; }
/* --- Labels & required ------------------------------------------------------
Field labels take the hero's micro-kicker voice: 0.7rem, 0.13em, uppercase,
muted. Checkbox labels are excluded — those are sentences, not labels. */
.woocommerce form .form-row > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.woocommerce-page form .form-row > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.woocommerce .woocommerce-address-fields .form-row > label:not(.checkbox),
.wc-block-components-text-input label,
.form-group > label,
.comment-form > p > label {
display: block;
margin-bottom: 9px;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--color-text-light);
transition: color 0.3s var(--ctl-ease);
}
/* The label brightens with its own field — the pair reads as one component. */
.woocommerce form .form-row:focus-within > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.woocommerce-page form .form-row:focus-within > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.form-group:focus-within > label {
color: var(--color-accent);
}
.woocommerce form .form-row .required,
.woocommerce .required {
color: rgba(var(--color-primary-rgb), 0.85);
border: 0;
text-decoration: none;
font-weight: 400;
}
.woocommerce form .form-row .optional {
color: var(--color-text-muted);
font-size: 0.92em;
letter-spacing: 0.08em;
}
/* --- The password reveal ----------------------------------------------------
WooCommerce ships this eye as an SVG data URI with `fill="#111111"` baked
into it, so on a dark field it renders as a black smudge in the corner —
the single most visible raw plugin artefact on My Account. It cannot be
recoloured, only replaced: the same two glyphs are re-declared here as a
MASK, which makes the icon take `currentColor` and therefore every state
the rest of the control set already has. ---------------------------------- */
.woocommerce form .woocommerce-password-input input.input-text,
.woocommerce form .form-row .woocommerce-password-input input.input-text,
.woocommerce form .password-input input[type="password"],
.woocommerce-page form .password-input input[type="password"] {
padding-right: 48px;
}
.woocommerce form .password-input,
.woocommerce-page form .password-input,
.woocommerce form .woocommerce-password-input { display: block; position: relative; }
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.woocommerce form .woocommerce-password-input .show-password-input {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
right: 9px;
padding: 0;
border: 0;
border-radius: var(--ctl-r-1);
background-color: transparent;
color: var(--color-text-light);
transition: color 0.3s var(--ctl-ease), background-color 0.3s var(--ctl-ease);
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
content: "";
display: block;
width: 19px;
height: 19px;
background-image: none;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
background-image: none;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover {
color: var(--color-accent);
background-color: var(--ctl-wash-2);
}
.woocommerce form .show-password-input.display-password,
.woocommerce-page form .show-password-input.display-password {
color: var(--color-accent);
}
.woocommerce form .show-password-input:focus-visible {
outline: none;
color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.55);
}
/* The register form's strength meter — a strip, not a plugin banner. */
.woocommerce .woocommerce-password-strength {
margin-top: 8px;
padding: 9px 13px;
border: 1px solid var(--ctl-hair);
border-radius: var(--ctl-r-1);
background: var(--ctl-wash-1);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
color: var(--color-text-light);
}
.woocommerce .woocommerce-password-strength.strong { color: var(--color-accent); border-color: rgba(var(--color-primary-rgb), 0.4); }
.woocommerce .woocommerce-password-strength.short,
.woocommerce .woocommerce-password-strength.bad { color: var(--color-danger); border-color: rgba(var(--ctl-danger-rgb), 0.4); }
.woocommerce .woocommerce-password-strength.good { color: var(--color-secondary); border-color: rgba(var(--ctl-gold-rgb), 0.4); }
.woocommerce .woocommerce-password-hint {
display: block;
margin-top: 7px;
font-size: 0.78rem;
color: var(--color-text-muted);
}
/* =============================================================================
3b. THE PLANES — what a field stands on
-----------------------------------------------------------------------------
A raised field only reads as raised if the thing behind it is not also
raised. So the form panels invert: they sit BELOW the page ground, held by
the faintest hairline. Three planes, in order — panel < page < field — which
is the depth the control layer was missing.
These are WooCommerce's own boxes, which ship with a 5px corner, a grey
border and 20px of padding. They are part of the control layer, so they
join the scale at --ctl-r-2 and take the panel plane.
========================================================================== */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.checkout_coupon,
.woocommerce-checkout .checkout_coupon,
.woocommerce-page form.login,
.woocommerce-page form.register,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment div.payment_box,
.woocommerce .woocommerce-address-fields__field-wrapper {
border-radius: var(--ctl-r-2);
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.checkout_coupon,
.woocommerce-checkout .checkout_coupon,
.woocommerce-page form.login,
.woocommerce-page form.register {
position: relative;
margin: 0 0 var(--space-7);
/* Symmetrical. 40 top against 32 bottom left the card sitting a step low in
its own frame, which is exactly the tell that says nobody looked at it. */
padding: 44px;
background: var(--ctl-panel-face);
border: 1px solid var(--ctl-panel-edge);
box-shadow: inset 0 1px 0 rgba(236, 229, 214, 0.03),
0 30px 64px -54px rgba(0, 0, 0, 1);
}
/* The hero's signature: a 34x1px rule. Here it rides the panel's top edge and
marks where the form begins. */
.woocommerce form.login::before,
.woocommerce form.register::before,
.woocommerce form.lost_reset_password::before,
.woocommerce-page form.login::before,
.woocommerce-page form.register::before {
content: "";
position: absolute;
top: -1px;
left: var(--space-8);
width: 34px;
height: 1px;
background: var(--color-accent);
}
/* The checkout's summary card and payment box are the same plane. */
.woocommerce-checkout #order_review {
background: var(--ctl-panel-face);
border-color: var(--ctl-panel-edge);
}
.woocommerce-checkout #payment div.payment_box {
background: var(--ctl-wash-1);
border-color: var(--ctl-panel-edge);
}
/* Notices stand in the same view as the fields — on checkout they are the
first two things above the form — so they take the panel plane, the same
corner, and a 1px editorial rule down their leading edge instead of the
3px coloured slab of an alert component. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-noreviews,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border: 1px solid var(--ctl-panel-edge);
border-left: 2px solid var(--ctl-hair-2);
border-radius: var(--ctl-r-2);
background: var(--ctl-panel-face);
box-shadow: inset 0 1px 0 rgba(236, 229, 214, 0.03);
color: var(--color-text);
}
.woocommerce .woocommerce-message,
.woocommerce-message { border-left-color: var(--color-accent); }
.woocommerce .woocommerce-error,
.woocommerce-error { border-left-color: var(--color-danger); }
/* =============================================================================
4. CHECKBOXES & RADIOS — rebuilt, not restyled
-----------------------------------------------------------------------------
`appearance: none` deletes the OS widget outright; everything you see below
is drawn here. One box, one size, one behaviour:
18px square, --ctl-r, sitting on the field surface
1px stroke of the accent at 25% — the box announces itself as brand
chrome even when it is empty, which is what stops it reading as a grey
system square parked in an editorial page
checked -> a solid --color-primary fill with a cream check cut into it
(the palette's own rule: paper ink sits on the primary fill)
the radio is the same object as a circle with a cream dot
The box is floated into a 30px gutter and centred on the label's optical
middle (top: 50%), so a one-line label and a two-line sentence both come
out centred; and the rows that put a tick box next to a button centre the
whole cluster on that button rather than hanging it from its top edge.
========================================================================== */
.woocommerce input[type="checkbox"],
.woocommerce .input-checkbox,
.woocommerce-page .input-checkbox,
.woocommerce-page .woocommerce-form__input-checkbox,
.woocommerce form .form-row .input-checkbox,
.woocommerce .woocommerce-form__input-checkbox,
input[type="checkbox"].input-checkbox,
input[type="checkbox"].woocommerce-form__input-checkbox,
.filter-item input[type="checkbox"],
.form-group input[type="checkbox"],
.wc-block-components-checkbox__input,
.woocommerce input[type="radio"],
.shipping-option-left input[type="radio"],
.payment-option-header input[type="radio"],
.woocommerce ul.wc_payment_methods input[type="radio"],
.form-group input[type="radio"],
:where(input[type="checkbox"], input[type="radio"]) {
-webkit-appearance: none;
appearance: none;
display: inline-grid;
place-content: center;
flex: none;
width: var(--ctl-box);
height: var(--ctl-box);
min-width: var(--ctl-box);
min-height: var(--ctl-box);
margin: 0;
padding: 0;
vertical-align: middle;
/* An unticked box is a WELL, not a slab. Given the field's own raised face
it read at 18px as a small grey lozenge — the shape of a disabled input —
and the faint green hairline was invisible against it. Recessed below
the panel with a warm paper edge, empty and ticked are now two obviously
different states rather than two tones of the same one. */
background-color: color-mix(in srgb, var(--night-2) 76%, transparent);
background-image: none;
border: 1px solid var(--ctl-hair-2);
border-radius: var(--ctl-r);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: background-color 0.24s var(--ctl-ease), border-color 0.24s var(--ctl-ease),
box-shadow 0.24s var(--ctl-ease);
}
/* A circle is a shape, not a corner. */
.woocommerce input[type="radio"],
.shipping-option-left input[type="radio"],
.payment-option-header input[type="radio"],
.woocommerce ul.wc_payment_methods input[type="radio"],
.form-group input[type="radio"],
:where(input[type="radio"]) {
border-radius: 50%;
}
.woocommerce input[type="checkbox"]:hover,
.woocommerce .input-checkbox:hover,
.woocommerce form .form-row .input-checkbox:hover,
.filter-item input[type="checkbox"]:hover,
.form-group input[type="checkbox"]:hover,
.woocommerce input[type="radio"]:hover,
.form-group input[type="radio"]:hover,
:where(input[type="checkbox"], input[type="radio"]):hover {
background-color: color-mix(in srgb, var(--night-2) 60%, transparent);
border-color: rgba(var(--color-primary-rgb), 0.62);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),
0 0 0 3px rgba(var(--color-primary-rgb), 0.10);
}
/* The check is a clip-path, so it needs no icon font and scales cleanly. */
.woocommerce input[type="checkbox"]::before,
.woocommerce .input-checkbox::before,
.woocommerce form .form-row .input-checkbox::before,
input[type="checkbox"].input-checkbox::before,
input[type="checkbox"].woocommerce-form__input-checkbox::before,
.filter-item input[type="checkbox"]::before,
.form-group input[type="checkbox"]::before,
:where(input[type="checkbox"])::before {
content: "";
width: 11px;
height: 11px;
background: var(--paper);
transform: scale(0.4);
opacity: 0;
transform-origin: center;
transition: transform 0.22s var(--ctl-ease), opacity 0.16s var(--ctl-ease);
clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 19%, 86% 5%, 37% 71%);
}
.woocommerce input[type="checkbox"]:checked,
.woocommerce .input-checkbox:checked,
.woocommerce form .form-row .input-checkbox:checked,
input[type="checkbox"].input-checkbox:checked,
input[type="checkbox"].woocommerce-form__input-checkbox:checked,
.filter-item input[type="checkbox"]:checked,
.form-group input[type="checkbox"]:checked,
:where(input[type="checkbox"], input[type="radio"]):checked {
background-color: var(--color-primary);
background-image: none;
border-color: var(--color-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.woocommerce input[type="checkbox"]:checked::before,
.woocommerce .input-checkbox:checked::before,
.woocommerce form .form-row .input-checkbox:checked::before,
input[type="checkbox"].input-checkbox:checked::before,
input[type="checkbox"].woocommerce-form__input-checkbox:checked::before,
.filter-item input[type="checkbox"]:checked::before,
.form-group input[type="checkbox"]:checked::before,
:where(input[type="checkbox"]):checked::before {
transform: scale(1);
opacity: 1;
}
.woocommerce input[type="radio"]::before,
.shipping-option-left input[type="radio"]::before,
.payment-option-header input[type="radio"]::before,
.woocommerce ul.wc_payment_methods input[type="radio"]::before,
.form-group input[type="radio"]::before,
:where(input[type="radio"])::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--paper);
transform: scale(0);
transition: transform 0.22s var(--ctl-ease);
}
.woocommerce input[type="radio"]:checked,
.shipping-option-left input[type="radio"]:checked,
.payment-option-header input[type="radio"]:checked,
.woocommerce ul.wc_payment_methods input[type="radio"]:checked,
.form-group input[type="radio"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.woocommerce input[type="radio"]:checked::before,
.shipping-option-left input[type="radio"]:checked::before,
.payment-option-header input[type="radio"]:checked::before,
.woocommerce ul.wc_payment_methods input[type="radio"]:checked::before,
.form-group input[type="radio"]:checked::before,
:where(input[type="radio"]):checked::before {
transform: scale(1);
}
.woocommerce input[type="checkbox"]:focus-visible,
.woocommerce input[type="radio"]:focus-visible,
.filter-item input[type="checkbox"]:focus-visible,
.form-group input[type="checkbox"]:focus-visible,
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
outline: none;
border-color: rgba(var(--color-primary-rgb), 0.9);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.45);
}
/* --- The cluster ------------------------------------------------------------
The sentence beside the box. A flex row would make a trailing `*` a sibling
item and strand it at the end of the line, so the block is indented by one
gutter and the box is floated into it — the text and its asterisk then flow
as one sentence, and `top: 50%` centres the box on the sentence whether it
runs to one line or three. ------------------------------------------------- */
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce label.checkbox,
.woocommerce-form-login__rememberme,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form-login__rememberme {
display: block;
position: relative;
margin: 0;
padding-left: 30px;
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
color: var(--color-text);
cursor: pointer;
}
.woocommerce .woocommerce-form__label-for-checkbox span,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox span,
.woocommerce label.checkbox span {
display: inline;
font-weight: 400;
}
.woocommerce .woocommerce-form__label-for-checkbox > input[type="checkbox"],
.woocommerce label.checkbox > input[type="checkbox"],
.woocommerce-form-login__rememberme > input[type="checkbox"],
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox > input[type="checkbox"],
.woocommerce form .form-row label.checkbox > input[type="checkbox"],
.woocommerce form .form-row label.woocommerce-form-login__rememberme > input[type="checkbox"] {
position: absolute;
left: 0;
top: 50%;
margin: 0;
transform: translateY(-50%);
}
.woocommerce .woocommerce-form__label-for-checkbox:hover { color: var(--color-dark); }
/* The row that carries "Remember me" also carries the Log in button. Both are
flex items on one centred line, so the cluster sits on the button's optical
middle instead of hanging off its top edge. The button keeps its place at
the head of the row. */
.woocommerce form.login p.form-row:not(.woocommerce-form-row),
.woocommerce-page form.login p.form-row:not(.woocommerce-form-row) {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 22px;
}
.woocommerce form.login p.form-row:not(.woocommerce-form-row) > button,
.woocommerce form.login p.form-row:not(.woocommerce-form-row) > input.button,
.woocommerce-page form.login p.form-row:not(.woocommerce-form-row) > button {
order: -1;
}
.woocommerce .woocommerce-form-login__rememberme,
.woocommerce form .form-row label.woocommerce-form-login__rememberme {
display: inline-block;
margin: 0;
vertical-align: middle;
}
/* The login commit button joins the 48px row rather than towering over it. */
.woocommerce button.woocommerce-form-login__submit,
.woocommerce input.woocommerce-form-login__submit {
min-height: var(--ctl-h);
padding: 0 30px;
font-size: 0.75rem;
}
/* Ship-to-a-different-address is a heading wrapping a checkbox; keep the
heading voice and let the box sit in the same gutter. */
.woocommerce #ship-to-different-address label,
.woocommerce h3#ship-to-different-address label {
padding-left: 30px;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
line-height: inherit;
color: inherit;
}
/* =============================================================================
4b. LINK-GREEN, DEMOTED
-----------------------------------------------------------------------------
Inline links were the accent's biggest consumer: on one checkout the green
appeared on the coupon toggle, the privacy link, the terms link, every
required asterisk and the Total — five different greens fighting for the
same eye. Inline links are now cream sitting on a 1px accent rule, which
still reads unmistakably as a link but hands the saturated accent back to
the two places that earn it: the display type's period, and the Total.
========================================================================== */
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-error a:not(.button),
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-link,
.woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce .woocommerce-LostPassword a,
.woocommerce .lost_password a,
.woocommerce-LostPassword a,
.woocommerce form .form-row a,
.woocommerce-form-login a,
.woocommerce-form-register a,
.woocommerce a.showcoupon,
.woocommerce a.added_to_cart,
.woocommerce-privacy-policy-link,
.page-article .post-content .woocommerce a:not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.shop_table a) {
color: var(--color-dark);
font-weight: 500;
border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.5);
padding-bottom: 1px;
transition: color 0.3s var(--ctl-ease), border-color 0.3s var(--ctl-ease);
}
.woocommerce-info a:not(.button):hover,
.woocommerce-message a:not(.button):hover,
.woocommerce-privacy-policy-text a:hover,
.woocommerce-terms-and-conditions-link:hover,
.woocommerce .woocommerce-LostPassword a:hover,
.woocommerce .lost_password a:hover,
.woocommerce-LostPassword a:hover,
.woocommerce form .form-row a:hover,
.woocommerce a.showcoupon:hover,
.woocommerce a.added_to_cart:hover {
color: var(--ink);
border-bottom-color: var(--color-accent);
}
/* "View cart" beside an added product is a link, not a second pill. */
.woocommerce a.added_to_cart {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Required marks are punctuation, not signal — one per field is a rash of
green otherwise. The optional tag matches them. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required,
.woocommerce .required,
.woocommerce abbr.required,
.woocommerce-terms-and-conditions-checkbox-text + .required {
color: var(--color-text-muted);
border: 0;
text-decoration: none;
font-weight: 400;
}
/* A focused label brightens to cream; the accent moment on a focused field is
the ring, and one accent moment is enough. */
.woocommerce form .form-row:focus-within > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.woocommerce-page form .form-row:focus-within > label:not(.woocommerce-form__label-for-checkbox):not(.checkbox),
.form-group:focus-within > label {
color: var(--color-dark);
}
/* =============================================================================
5. SELECT2 — WooCommerce swaps country/state for it
-----------------------------------------------------------------------------
The real