/* visual polish, part B (information pages, checkout, account, consultation, errors): rules written after the visual audit of 10.11.2026; selectors with the prefix html body
 * One rule per defect of the register (.scratch/polish-b-report.md). Colours, sizes and radii only from the tokens of css/ecomake.css (site theme).
 * Sections: 1 browser surfaces, 2 one field and one checkbox, 3 one button, 4 information pages, 5 auth, 6 account, 7 checkout, 8 consultation, 9 promo bar and menu.
 */

/* ---------- 1. browser surfaces: selection, scrollbars, focus without a rounded corner ---------- */
html body ::selection { background: var(--rose-soft); color: var(--ink); }
html { scrollbar-color: var(--sand) var(--ivory); }
html body :focus-visible { border-radius: 0; }

/* ---------- 2. one field: 48px, thin line, sharp corner, soft focus. Everywhere outside the storefront of part A ---------- */
html body :is(.s-auth-page.auth, .acct-profile, .mail-subs, .eq, .search-sheet, .fsub) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input:not([type]), select, textarea):not(.wa-confirmation-code),
html body .input, html body .eq-input,
html body #js-checkout-order-page .wa-field-wrapper :is(.wa-input, .wa-select, .wa-textarea),
html body #js-checkout-order-page .wa-plugin-fields-wrapper .wa-select,
html body #js-checkout-order-page .wa-order-cart-wrapper .wa-coupon-section .wa-input {
  min-height: 48px; padding-block: 11px; border-width: 1px; border-style: solid; border-radius: var(--r-s); font-size: var(--fs-body); line-height: 1.3;
}
html body :is(.s-auth-page.auth, .acct-profile, .mail-subs) :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]) { height: 48px; border-color: var(--line); }
html body :is(.s-auth-page.auth, .acct-profile, .mail-subs) textarea, html body .eq textarea.eq-input, html body #js-checkout-order-page .wa-field-wrapper .wa-textarea { min-height: 112px; height: auto; }
html body :is(.s-auth-page.auth, .acct-profile, .mail-subs, .eq:not(.eq-state)) :is(input, select, textarea):focus,
html body .input:focus,
html body #js-checkout-order-page :is(.wa-input, .wa-select, .wa-textarea):focus { outline: none; border-color: var(--cocoa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent); }
html body :is(.s-auth-page.auth, .acct-profile) input::placeholder, html body .input::placeholder { color: var(--muted); opacity: 1; }

/* one checkbox: a square of the token radius, 22px, a thin line, the deep fill and an ivory tick (6px corners before, two different weights) */
html body :is(.check, .s-auth-page.auth, .acct-profile, .mail-subs, .fsub, #js-checkout-order-page) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1px solid var(--cocoa); border-radius: var(--r-s); background: var(--white); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
html body :is(.check, .s-auth-page.auth, .acct-profile, .mail-subs, .fsub, #js-checkout-order-page) input[type="checkbox"]:checked { background: var(--deep); border-color: var(--deep); }
html body :is(.check, .s-auth-page.auth, .acct-profile, .mail-subs, .fsub, #js-checkout-order-page) input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 11px; border: solid var(--ivory); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
html body .fsub input[type="checkbox"] { border-color: var(--on-deep-muted); background: transparent; }
html body .fsub input[type="checkbox"]:checked { background: var(--on-deep); border-color: var(--on-deep); }
html body .fsub input[type="checkbox"]:checked::after { border-color: var(--deep); }
/* the consultation forms: the tick takes the ground of its form (on the light form of the cosmetologist it was deep on deep, a filled square) */
html body .eq-check input:checked::after { border-color: var(--ivory); }
html body .eq .eq-state .eq-check input:checked::after, html body .eq .eq-consult .eq-check input:checked::after { border-color: var(--deep); }
html body .eq-check input:checked { border-color: var(--eq-fg, var(--ink)); }

/* ---------- 3. one button: the deep primary of the theme (auth and account forms of the core had a cocoa button in bold lower case) ---------- */
html body .s-auth-page.auth :is(input[type="submit"], button:not(.wa-confirmation-code-input-submit-loading), .wa-confirmation-code-input-submit),
html body .acct-profile :is(input[type="submit"], input[type="button"]):not(.transparent) {
  min-height: 52px; padding: 0 32px; border: 1px solid var(--deep); border-radius: var(--r-pill); background: var(--deep); color: var(--on-deep);
  font-family: var(--f-ui); font-size: var(--fs-note); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
html body .acct-profile :is(input.transparent, .general-button) {
  min-height: 52px; padding: 0 32px; border: 1px solid var(--deep); border-radius: var(--r-pill); background: transparent; color: var(--deep);
  font-family: var(--f-ui); font-size: var(--fs-note); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
@media (hover: hover) {
  html body .s-auth-page.auth :is(input[type="submit"], button):hover, html body .acct-profile :is(input[type="submit"], input[type="button"]):not(.transparent):hover { background: var(--clay-deep); border-color: var(--clay-deep); }
  html body .acct-profile :is(input.transparent, .general-button):hover { background: var(--deep); color: var(--on-deep); }
}

/* ---------- 4. information pages: an editorial grid on a wide screen (the text column stood at the left with half the page empty) ---------- */
html body .page .prose h2 { font-weight: 400; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
html body .page .prose h3 { text-wrap: balance; }
html body .page__title { text-wrap: balance; }
html body .page .prose a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (min-width: 1024px) {
  html body .page:has(.prose > h2):not(:has(.eq, .about-index, .ebuilder)) .page__head { max-width: none; margin-bottom: 56px; }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 0; row-gap: 0; max-width: none; align-items: start;
  }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > * { grid-column: 2; margin: 0; padding-left: 48px; }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > * + * { margin-top: 1em; }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > .lead { grid-column: 1 / -1; padding-left: 0; max-width: 46em; margin: 0 0 64px; }
  /* a heading and the first block of its section open one hairline across both columns */
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > h2 { grid-column: 1; padding: 28px 24px 0 0; margin-top: 56px; border-top: 1px solid var(--line); }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > h2 + * { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line); }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > h2:first-child,
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > .lead + h2 { margin-top: 0; }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > h2:first-child + *,
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > .lead + h2 + * { margin-top: 0; }
  html body .page .prose:has(> h2):not(:has(.eq, .about-index, .ebuilder)) > :is(p, ul, ol, dl, table, blockquote, h3, .ph) { max-width: 44em; }
}

/* error page: the two actions side by side on a wide screen, one width */
@media (min-width: 640px) {
  html body .err__actions { flex-wrap: nowrap; }
  html body .err__actions .btn { flex: 0 0 240px; }
}

/* ---------- 5. auth: the captcha before the button, the field of the captcha as wide as the other fields, no card on a phone ---------- */
html body .s-auth-page.auth cap-widget { max-width: none; }
html body .s-auth-page.auth .wa-field .wa-name { font-size: var(--fs-small); font-weight: 600; margin-bottom: 8px; }
html body .s-auth-page.auth .wa-field { margin-top: 20px; }
html body .s-auth-page.auth .wa-login-form-title, html body .s-auth-page.auth h1 { font-weight: 300; font-size: clamp(36px, 7vw, 48px); margin-bottom: 24px; }
html body .s-forgot-password-page .wa-forgotpassword-form-fields { display: flex; flex-direction: column; }
html body .s-forgot-password-page .wa-forgotpassword-form-fields .wa-field-login,
html body .s-forgot-password-page .wa-forgotpassword-form-fields .wa-field-login > .wa-value { display: contents; }
html body .s-forgot-password-page .wa-field-login > .wa-name { order: 1; margin: 0 0 8px; }
html body .s-forgot-password-page .wa-field-login > .wa-value > input { order: 2; }
html body .s-forgot-password-page .wa-field-login .wa-edit-login-link-wrapper { order: 3; }
html body .s-forgot-password-page .wa-field-confirmation-code { order: 4; }
html body .s-forgot-password-page .wa-captcha-field { order: 5; }
html body .s-forgot-password-page .wa-forgotpassword-button { order: 6; margin-top: 8px; }
html body .s-forgot-password-page .wa-forgotpassword-button input { width: 100%; }
@media (max-width: 639px) {
  html body .s-auth-page.auth { margin: 8px auto 24px; padding: 8px 0 0; border: 0; background: transparent; }
}

/* ---------- 6. account: the sections as a column at the left on a wide screen, an even 2 x 2 grid of tabs on a phone ---------- */
html body .acct-nav a { min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; font-size: var(--fs-text); font-weight: 500; color: var(--ink); text-decoration: none; }
html body .acct-nav .is-selected a { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
@media (hover: hover) { html body .acct-nav li:not(.is-selected) a:hover { border-color: var(--deep); } }
@media (max-width: 1023px) {
  html body .acct .acct-nav { margin-inline: 0; padding-inline: 0; overflow: visible; }
  html body .acct .acct-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto; }
  html body .acct .acct-nav a { display: flex; justify-content: center; width: 100%; white-space: nowrap; }
}
@media (min-width: 640px) and (max-width: 1023px) { html body .acct .acct-nav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  html body .acct { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 64px; row-gap: 0; align-items: start; }
  html body .acct > *, html body .acct-ord > * { grid-column: 2; min-width: 0; }
  html body .acct-ord { display: contents; }
  html body .acct > .acct__title, html body .acct > .acct-pin, html body .acct-ord > .acct-ord__head { grid-column: 1 / -1; margin-bottom: 40px; }
  html body .acct .acct-nav { grid-column: 1; grid-row: 2 / span 40; position: sticky; top: calc(var(--header-h) + 32px); margin: 0; }
  html body .acct .acct-nav ul { display: block; border-top: 1px solid var(--line); }
  html body .acct .acct-nav li { border-bottom: 1px solid var(--line); }
  html body .acct .acct-nav a { display: flex; width: 100%; min-height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--cocoa); }
  html body .acct .acct-nav .is-selected a { background: var(--paper); color: var(--ink); font-weight: 600; }
  @media (hover: hover) { html body .acct .acct-nav li:not(.is-selected) a:hover { background: var(--ivory); color: var(--ink); } }
  html body .acct > :not(.acct__title):not(.acct-nav):not(.acct-ord) + :not(.acct-nav), html body .acct-ord > :not(.acct-ord__head):not(.acct-nav) + * { margin-top: 24px; }
  html body .acct-orders, html body .acct-profile, html body .acct-ord__cols, html body .acct-items-wrap { max-width: none; }
}
/* one heading level for the small titles of the account: Onest 600 20px (the number of an order was Cormorant 24px, thin next to the bold labels) */
html body .acct-order__num { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; letter-spacing: 0; }
html body .acct-order { border-radius: var(--r-m); }
html body .acct-order__head { padding: 18px 24px; }
html body .acct-order__body { padding: 20px 24px 22px; gap: 12px; }
@media (min-width: 1024px) {
  html body .acct-order__body { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr); column-gap: 32px; align-items: start; }
  html body .acct-order__body > .acct-order__row:first-child { grid-row: span 3; }
  html body .acct-order__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
html body .acct-profile .wa-form, html body .eq-profile { border-radius: var(--r-l); padding: 28px 24px; }
@media (min-width: 640px) { html body .acct-profile .wa-form, html body .eq-profile { padding: 36px 40px; } }
@media (max-width: 639px) {
  html body .acct-profile .wa-form, html body .eq-profile { padding: 24px 20px; }
}
/* the read mode of the contacts: the italic remark of the core after the address ("доставка") reads as a typo */
html body .acct-profile #wa-my-info-read-wrapper .wa-value em, html body .acct-profile #wa-my-info-read-wrapper .wa-value i { font-style: normal; color: var(--muted); font-size: var(--fs-small); margin-left: 6px; }
html body .acct-profile #wa-my-info-read-wrapper .wa-value a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* the beauty profile: the same row style as the contacts above it */
html body .eq-profile .eq-dl dt { font-size: var(--fs-note); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); align-self: baseline; }
html body .eq-profile .eq-dl dd { font-weight: 400; font-size: var(--fs-body); }
html body .eq-profile .eq-profile__t { margin-bottom: 10px; }
html body .eq-profile > p, html body .eq-profile .eq-profile__lead { max-width: 60ch; }
html body .mail-subs .wa-form, html body .mail-subs form { max-width: 640px; }

/* ---------- 7. checkout ---------- */
/* the cart column stays in view while the long form scrolls (it ended halfway and left an empty column) */
@media (min-width: 1024px) {
  html body #js-checkout-order-page .wa-order-cart-wrapper, html body .s-order-page .s-order-column--cart { position: sticky; top: calc(var(--header-h) + 24px); }
}
/* the e-mail stood alone in half a row: the whole row */
html body #js-checkout-order-page .wa-step-auth-section .wa-fields-group.line > .wa-field-wrapper:has(.wa-email):last-child { grid-column: 1 / -1; }
/* consent text: the core paints it #aaa (2.3:1 on ivory) */
html body #js-checkout-order-page .wa-checkbox-wrapper .wa-text { color: var(--ink); }
html body #js-checkout-order-page .wa-field-wrapper.is-agreement-field a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* the group of fields drew its own rule right above the rule of the next step: two lines 26px apart; the steps keep theirs */
html body #js-checkout-order-page .wa-step-section .wa-fields-group.line { border-bottom: 0; }
/* one checkbox on the checkout too (the rule of section 2 loses to the id selectors of ecomake.checkout.css) */
html body #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"], html body #js-checkout-order-page input.wa-checkbox, html body #js-checkout-order-page .ec-marketing input[type="checkbox"] {
  width: 22px; height: 22px; border: 1px solid var(--cocoa); border-radius: var(--r-s); background: var(--white);
}
html body #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"]:checked, html body #js-checkout-order-page input.wa-checkbox:checked, html body #js-checkout-order-page .ec-marketing input[type="checkbox"]:checked { background: var(--deep); border-color: var(--deep); }
html body #js-checkout-order-page .wa-field-wrapper .wa-select { min-height: 48px; }

/* ---------- 8. consultation ---------- */
@media (min-width: 1024px) {
  /* the intro and the steps stay next to the long dark form */
  html body .eq .eq-hero__side { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
/* the light strip of the catalog closes the dark panel: the panel kept 12px of its own bottom padding under it */
html body .eq .eq-state:has(.eq-cta:not([hidden])) { padding-bottom: var(--eq-pad); }
/* the form of the cosmetologist: the fields fill their column instead of 520px of it */
html body .eq .eq-card--care .eq-form { max-width: none; }
@media (min-width: 900px) { html body .eq .eq-card--care > .eq-q { position: sticky; top: calc(var(--header-h) + 32px); } }
/* the captcha on the dark panel: as wide as the fields, without its white plate */
html body .eq cap-widget { max-width: none; }
html body .eq .eq-state cap-widget { --cap-background: transparent; --cap-color: var(--on-deep); --cap-checkbox-background: transparent; --cap-checkbox-border: 1px solid var(--on-deep); --cap-troubleshoot-color: var(--rose); }

/* ---------- 9. promo bar on a phone: two lines of sentence case instead of three lines of capitals; the lower part of the menu ---------- */
@media (max-width: 639px) {
  html body .promo, html body .promo * { font-size: var(--fs-note); letter-spacing: .01em; text-transform: none; }
  html body .promo { padding-block: 9px; line-height: 1.45; }
}
html body .menu__panel { display: flex; flex-direction: column; }
html body .menu__util { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
html body .menu__panel .menu__util a { min-height: 44px; font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-text); color: var(--cocoa); border-bottom: 1px solid var(--line); }

/* ---------- 6b. account, second pass after the reshoot ---------- */
/* the boxes of an order: Onest subheading (Cormorant 24px was below the 28px floor of the thin face), three boxes stand in one row, the core's flag icon goes */
html body .acct-box h2, html body .acct-box h3 { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; letter-spacing: 0; }
html body .acct-box { padding: 24px; gap: 8px; border-radius: var(--r-m); }
html body .acct-box img[src*="flag"], html body .acct-box .icon16 { display: none; }
@media (min-width: 1024px) {
  html body .acct-ord__cols:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* "Мои консультации": the same frame, width and heading as the cards around it */
html body .acct-cons { max-width: none; margin: 24px 0; }
html body .acct-cons .section-header, html body .acct-profile .section-header { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; letter-spacing: 0; margin: 0 0 14px; }
html body .acct-cons__t th { font-size: var(--fs-note); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
html body .acct-cons__t th, html body .acct-cons__t td { padding: 14px 20px; }
/* the beauty profile: air between a text and the line or the button under it */
html body .eq-profile .eq-profile__t + p, html body .eq-profile .eq-fine { margin-bottom: 16px; }
html body .eq-profile .btn { margin-top: 4px; }
html body .eq-profile p + .btn, html body .eq-profile .eq-fine + .btn, html body .eq-profile .eq-note + .btn { margin-top: 12px; }
html body .eq-profile :is(h3, .eq-sub) { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0; }
/* the formatted address of the core starts with a flag picture of the country (a 16 x 11 icon by the name): a stray emblem in a text box */
html body .acct-box img, html body .acct-box .icon16, html body .acct-box i[class*="icon"] { display: none; }
/* the open consultation is a short dark panel next to a tall intro: the panel takes the height of the row and holds its content in the middle */
@media (min-width: 1024px) {
  html body .eq .eq-hero { align-items: stretch; }
  html body .eq .eq-hero__act { display: flex; flex-direction: column; }
  html body .eq .eq-hero__act > .eq-state:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- 7b. "Заказ оформлен": one column of one width (the cards were 560px, the blocks of the consultation 720px, the heading of "Что дальше" hung between them) ---------- */
html body .s-checkout-result { max-width: 640px; }
html body .s-checkout-result :is(.s-result-summary, .s-result-facts, .s-result-next, .s-plugin-wrapper, .eq-book, .eq-follow) { max-width: none; width: 100%; margin-inline: 0; border-radius: var(--r-l); }
html body .s-checkout-result :is(.s-result-summary, .s-result-facts, .eq-book, .eq-follow) { padding: 28px 32px; }
html body .s-checkout-result .s-result-next { margin-top: 32px; }
html body .s-checkout-result :is(.s-result-summary, .s-result-facts, .s-result-next, .eq-book, .eq-follow) + :is(.s-result-summary, .s-result-facts, .s-result-next, .eq-book, .eq-follow) { margin-top: 16px; }
html body .s-checkout-result .s-result-next + :is(.s-result-summary, .s-result-facts, .eq-book, .eq-follow, .s-plugin-wrapper, *) { margin-top: 32px; }
html body .s-checkout-result .s-result-summary .h3, html body .s-checkout-result .s-result-next .h3 { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-lg); line-height: 1.3; letter-spacing: 0; }
/* the three ways of the review: three equal buttons in a row, one column on a phone */
html body .eq-follow__act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html body .eq-follow__act .btn { width: 100%; padding-inline: 12px; }
html body .s-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body .s-result-actions .btn { width: 100%; padding-inline: 16px; }
@media (max-width: 639px) {
  html body .s-checkout-result :is(.s-result-summary, .s-result-facts, .eq-book, .eq-follow) { padding: 22px 20px; }
  html body .eq-follow__act { grid-template-columns: minmax(0, 1fr); }
}
/* 640-1023px: the tabs run the full width, the cards under them stopped at 760px (12px short at 820) */
html body .acct-orders, html body .acct-profile, html body .acct-ord, html body .acct-cons { max-width: none; }