whose class carries the verdict. */
.woocommerce-password-strength{
margin-block-start:8px;
padding:4px 8px;
border-radius:8px;
font-size: var(--fs-tag);
font-weight:600;
text-align:start;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad{ color:#db2323; }
.woocommerce-password-strength.good{ color: var(--color-gold); }
.woocommerce-password-strength.strong{ color:#4caf50; }
.woocommerce-password-hint{
display:block;
margin-block-start:4px;
font-size: var(--fs-tag);
color: var(--color-brown);
}
/* ---------- coupon form ----------
No design; laid out like a .form-field row with the button beside it. */
.checkout_coupon,
.woocommerce-form-coupon{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:16px;
width:100%;
margin-block-end:24px;
}
.checkout_coupon .form-row,
.woocommerce-form-coupon .form-row{ flex:1 1 220px; min-width:0; margin:0; }
.checkout_coupon .button,
.woocommerce-form-coupon .button{
flex:0 0 auto;
border-radius:183px;
padding:18px 32px;
background: var(--color-brown);
border:1px solid var(--color-border-2);
color: var(--color-white);
font-weight:700;
font-size: var(--fs-btn);
line-height:1.1;
}
.woocommerce-remove-coupon{
font-size: var(--fs-tag);
color:#db2323;
text-decoration:underline;
}
/* ---------- terms checkbox on checkout ----------
Reuses the register form's .auth-terms-check geometry. */
.woocommerce-terms-and-conditions-wrapper{
display:flex;
flex-direction:column;
gap:8px;
width:100%;
margin-block-end:16px;
font-size: var(--fs-quote);
color: var(--color-brown);
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
display:flex;
align-items:center;
gap:8px;
}
.woocommerce-terms-and-conditions-wrapper a{ text-decoration:underline; }
/* ---------- variation data on order/checkout lines ----------
WooCommerce prints
with the chosen attributes. The
design has no slot for it, but dropping it would hide what was ordered. */
.checkout-item__body .variation,
.order-product__info .variation{
display:flex;
flex-wrap:wrap;
gap:4px 8px;
margin-block-start:4px;
font-size: var(--fs-tag);
color: var(--color-brown);
}
.checkout-item__body .variation dt,
.order-product__info .variation dt{ font-weight:600; }
.checkout-item__body .variation dd,
.order-product__info .variation dd{ margin:0; }
.checkout-item__body .variation p,
.order-product__info .variation p{ margin:0; }
/* ---------- WooCommerce's own loading veil ----------
blockUI is used by the checkout while totals refresh. */
.blockUI.blockOverlay{
position:relative;
background: var(--color-bg);
opacity:.6 !important;
}
/* ---------- notices must never join a two-column row ----------
Found on the staging site: WooCommerce prints notices from inside
woocommerce_account_content, which lands them between .account-card and
.account-nav. Both .account-layout and .checkout-layout are flex ROWS on
desktop, so a notice became a third column and squeezed the card to nothing.
The template now prints them above the layout (myaccount/my-account.php), but
any plugin can inject one back into the same place — so a stray notice is
forced onto its own full-width row instead of stealing space.
flex-basis:0 on the card plus the fixed sidebar means the two real columns
still share one line; only the notice wraps. The flex-wrap itself lives in
woo-account.css / woo-checkout.css — one selector, one file (see the stage-1
invariant in CLAUDE.md). */
.account-layout > .woocommerce-notices-wrapper,
.account-layout > .woocommerce-message,
.account-layout > .woocommerce-info,
.account-layout > .woocommerce-error,
.checkout-layout > .woocommerce-notices-wrapper,
.checkout-layout > .woocommerce-message,
.checkout-layout > .woocommerce-info,
.checkout-layout > .woocommerce-error{
flex:1 1 100%;
order:-1;
margin-block-end:0;
}
/* Пустая обёртка уведомлений не должна добавлять лишний gap в ряду. */
.account-layout > .woocommerce-notices-wrapper:empty,
.checkout-layout > .woocommerce-notices-wrapper:empty{ display:none; }
/* Кнопка внутри уведомления («подтвердить адрес») — на своей строке под текстом,
иначе длинная ивритская фраза обтекает её и ломает строку. */
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button{ align-self:start; margin-block-start:4px; }