/* ========================================================================== Klashify Account in direction B "Pearl": login / register cards and all My account pages. Loads LAST in the account stylesheet list (assets.php), so it changes the older black-and-white shapes (square buttons, capitals, 4px black card edge) without rewriting those files. Colours, radii and shadows already come from tokens.css, which now reads the site tokens (--k-*) from site.css. Rules keep the same selectors and !important as the files they replace. ========================================================================== */ /* ---------- Page frame: pearl backdrop, Astra's white wrappers step aside ---------- */ html, html body.woocommerce-account[class] { background: var(--k-pearl); } .woocommerce-account :is(.site, .site-content, #content, #primary, .site-main, .entry-content, .ast-article-single, .ast-container) { background: transparent; } .woocommerce-account #primary { margin: 0; padding: 0; width: 100%; max-width: none; } .woocommerce-account .ast-container { display: block; max-width: none; padding: 0; } .woocommerce-account .entry-header, .woocommerce-account .ast-breadcrumbs-wrapper { display: none; } .woocommerce-account .ast-article-single, .woocommerce-account .entry-content { margin: 0; padding: 0; box-shadow: none; } .kl-acc-bg, .kl-auth-bg { padding-block: var(--k-7) var(--k-9) !important; } /* ---------- Cards: menu and content ---------- */ html body .kl-acc { gap: var(--k-5); max-width: 1080px; } html body .kl-acc :is(.kl-acc-nav, .kl-acc-content):where(:not(.kb-book *)) { border: 0 !important; border-radius: var(--kl-radius-card) !important; } html body .kl-acc .kl-acc-nav { padding: var(--k-3) !important; top: 96px; } html body .kl-acc .kl-acc-content { padding: var(--k-7) !important; } /* menu links: sentence case pills, the open page is dark */ html body .kl-acc .kl-acc-nav li a:where(:not(.kb-book *)) { min-height: 48px; padding: 10px var(--k-4) !important; border-radius: var(--k-r-pill) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none; } html body .kl-acc .kl-acc-nav li.is-active a:where(:not(.kb-book *)) { background: var(--kl-ink) !important; color: #fff !important; box-shadow: none; } @media (hover: hover) { html body .kl-acc .kl-acc-nav li.is-active a:hover:where(:not(.kb-book *)) { background: var(--k-ink-hover) !important; color: #fff !important; } } html body .kl-acc .kl-acc-nav li.kl-nav-logout:where(:not(.kb-book *)) { margin-top: var(--k-2) !important; padding-top: var(--k-2) !important; } @media (max-width: 768px) { html body .kl-acc .kl-acc-nav li.kl-nav-logout:where(:not(.kb-book *)) { margin: 0 !important; padding: 0 !important; } } /* pills sit in one wrapping row: no extra offset */ /* ---------- Headings: Bricolage, no capitals ---------- */ html body .kl-acc .kl-acc-content .kl-dash-eyebrow, html body .kl-auth .kl-eyebrow { display: block; width: fit-content; padding: 7px 12px; margin: 0 0 var(--k-3) !important; border-radius: var(--k-r-pill); background: rgba(20, 23, 26, .07); font-size: 11px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--kl-ink) !important; } html body .kl-acc .kl-acc-content h2.kl-dash-title:where(:not(.kb-book *)), html body .kl-auth .kl-title { font-family: var(--k-font-head) !important; font-size: clamp(32px, 4.4vw, 44px) !important; font-weight: 700 !important; letter-spacing: -.03em !important; text-transform: none !important; line-height: 1.05 !important; } html body .kl-acc .kl-acc-content .kl-dash-sub { font-size: 17px !important; margin-bottom: var(--k-6) !important; } html body .kl-acc .kl-acc-content :is(h2, h3, h4):where(:not(.kb-book *)) { font-family: var(--k-font-head) !important; font-size: 22px !important; letter-spacing: -.02em !important; text-transform: none !important; } html body .kl-acc .kl-acc-content h3.kl-section-title:where(:not(.kb-book *)) { font-family: var(--k-font-head) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--kl-ink) !important; margin: var(--k-7) 0 var(--k-4) !important; } html body .kl-acc .kl-acc-content > h3.kl-section-title:first-child:where(:not(.kb-book *)), html body .kl-acc .kl-acc-content .kl-dash-sub + h3.kl-section-title:where(:not(.kb-book *)) { margin-top: 0 !important; } html body .kl-acc .kl-acc-content legend:where(:not(.kb-book *)) { font-family: var(--k-font-head) !important; font-size: 22px !important; letter-spacing: -.02em !important; text-transform: none !important; } html body .kl-acc .kl-acc-content table th:where(:not(.kb-book *)) { font-size: 11px !important; letter-spacing: .12em !important; } /* ---------- Buttons: dark pills, quiet ghost, no capitals ---------- */ html body .kl-acc .kl-acc-content :is(a.button, button:not(.show-password-input), input[type=submit], .woocommerce-Button):where(:not(.kb-book *)), html body .kl-auth .kl-btn { min-height: 48px; padding: 0 var(--k-6) !important; border: 0 !important; border-radius: var(--k-r-pill) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2 !important; } html body .kl-acc .kl-acc-content :is(a.button.kl-btn-ghost, a.button.kl-act, a.edit):where(:not(.kb-book *)) { background: transparent !important; box-shadow: inset 0 0 0 1px var(--k-line-strong) !important; color: var(--kl-ink) !important; } @media (hover: hover) { html body .kl-acc .kl-acc-content :is(a.button.kl-btn-ghost, a.button.kl-act, a.edit):hover:where(:not(.kb-book *)) { background: rgba(20, 23, 26, .05) !important; box-shadow: inset 0 0 0 1px var(--kl-ink) !important; } } html body .kl-acc .kl-acc-content a.button.kl-act:where(:not(.kb-book *)) { min-height: 44px; padding: 0 var(--k-5) !important; font-size: 14px !important; } html body .kl-acc .kl-acc-content a.button:is(.kl-act-pay, .kl-act-download):where(:not(.kb-book *)) { background: var(--kl-ink) !important; color: #fff !important; box-shadow: none !important; } @media (hover: hover) { html body .kl-acc .kl-acc-content a.button:is(.kl-act-pay, .kl-act-download):hover:where(:not(.kb-book *)) { background: var(--k-ink-hover) !important; color: #fff !important; box-shadow: var(--kl-shadow-lift) !important; } } html body .kl-acc .kl-acc-content a.button.kl-act-download:where(:not(.kb-book *)) { font-size: 14px !important; } html body .kl-acc .kl-acc-content a.button.kl-act-cancel:where(:not(.kb-book *)) { box-shadow: inset 0 0 0 1px var(--kl-error) !important; } html body .kl-acc .kl-acc-content a.edit:where(:not(.kb-book *)) { min-height: 40px; padding: 0 var(--k-4) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--k-line-strong) !important; } html body .kl-acc .kl-acc-content a.kl-back:where(:not(.kb-book *)) { display: flex; width: fit-content; margin: 0 0 var(--k-3) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; } /* ---------- Dashboard shortcuts ---------- */ html body .kl-acc a.kl-shortcut:where(:not(.kb-book *)) { border: 0 !important; border-radius: var(--k-r-md); background: var(--kl-tint) !important; padding: var(--k-5) !important; } @media (hover: hover) { html body .kl-acc a.kl-shortcut:hover:where(:not(.kb-book *)) { background: rgba(20, 23, 26, .08) !important; box-shadow: none; transform: translateY(-2px); } } html body .kl-acc .kl-shortcut-icon { border-radius: 14px; background: var(--kl-surface); box-shadow: 0 0 0 1px var(--kl-divider); } html body .kl-acc .kl-shortcut-text b:where(:not(.kb-book *)) { font-family: var(--k-font-head); font-size: 17px !important; letter-spacing: -.01em; text-transform: none; } html body .kl-acc .kl-shortcut-text small:where(:not(.kb-book *)) { font-size: 14px !important; } html body .kl-acc .kl-empty-box { border-radius: var(--k-r-md); } /* ---------- Lists (orders, downloads, items) ---------- */ @media (min-width: 769px) { html body .kl-acc .kl-list { --kl-cols: 1fr 1.3fr 1.2fr 1.2fr 220px; } html body .kl-acc .kl-list-downloads { --kl-cols: 1.8fr .9fr .9fr 280px; } html body .kl-acc .kl-c-actions { flex-wrap: nowrap; } html body .kl-acc .kl-list-items { --kl-cols: minmax(0, 1fr) auto; } } html body .kl-acc .kl-list-head { border-bottom: 1px solid var(--k-line-strong); } html body .kl-acc .kl-list-head span { letter-spacing: .12em !important; } html body .kl-acc .kl-list-row { border-radius: var(--k-r-sm); } html body .kl-acc .kl-total-row span:first-child:where(:not(.kb-book *)) { letter-spacing: .1em !important; } /* ---------- One order: totals, address boxes, timeline ---------- */ html body .kl-acc .kl-total-row span:first-child:where(:not(.kb-book *)) { font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; } html body .kl-acc .kl-total-row.is-order_total { border-bottom: 0; padding: var(--k-4) 0 0; } html body .kl-acc .kl-total-row.is-order_total span:first-child:where(:not(.kb-book *)) { font-family: var(--k-font-head); font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--kl-ink) !important; } html body .kl-acc .kl-total-row.is-order_total span:last-child:where(:not(.kb-book *)) { font-family: var(--k-font-head); font-size: 22px !important; letter-spacing: -.02em; } html body .kl-acc .kl-box { border-radius: var(--k-r-md); padding: var(--k-5); } html body .kl-acc .kl-update::before { box-shadow: 0 0 0 3px var(--kl-surface); } /* ---------- Addresses page: two cards ---------- */ html body .kl-acc .kl-acc-content :is(.woocommerce-Address, .woocommerce-column--billing-address, .woocommerce-column--shipping-address):where(:not(.kb-book *)) { border: 0 !important; border-radius: var(--k-r-md) !important; background: var(--kl-tint) !important; padding: var(--k-5) !important; } html body .kl-acc .kl-acc-content .woocommerce-Address-title { border-bottom-color: var(--kl-divider); } html body .kl-acc .kl-acc-content .woocommerce-Address-title :is(h2, h3):where(:not(.kb-book *)) { font-size: 20px !important; letter-spacing: -.02em !important; } /* ---------- Login / register / lost password card ---------- */ html body .kl-auth { border: 0 !important; border-radius: var(--kl-radius-card) !important; max-width: 460px !important; padding: var(--k-7) var(--k-6) var(--k-6) !important; } html body .kl-auth .kl-title code, html body .kl-auth .kl-title * { font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; background: none !important; padding: 0 !important; color: inherit !important; } html body .kl-auth .kl-eyebrow { display: block; width: fit-content; margin-inline: auto !important; } html body .kl-auth .kl-title { margin-bottom: var(--k-6) !important; } html body .kl-auth .kl-btn { width: 100%; } /* ---------- Desktop keeps full-size controls (the older compact sizes for mouse screens are dropped) ---------- */ @media (min-width: 769px) { html body .kl-acc .kl-acc-content :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=search], select):where(:not(.kb-book *)) { height: 52px !important; font-size: 16px !important; padding: 0 16px !important; } html body .kl-acc .kl-acc-content select:where(:not(.kb-book *)) { padding-right: 40px !important; } html body .kl-acc .kl-acc-content textarea:where(:not(.kb-book *)) { font-size: 16px !important; } html body .kl-acc .kl-acc-content .select2-container .select2-selection--single { height: 52px !important; } html body .kl-acc .kl-acc-content .select2-container .select2-selection__rendered { line-height: 50px !important; font-size: 16px !important; } html body .kl-acc .kl-acc-content .select2-container .select2-selection__arrow { height: 50px !important; } html body .kl-acc .kl-acc-content label:where(:not(.kb-book *)) { font-size: 14px !important; margin-bottom: 8px !important; } html body .kl-acc .kl-acc-content :is(.form-row, .woocommerce-form-row):where(:not(.kb-book *)) { margin-bottom: var(--k-4) !important; } html body .kl-acc .kl-acc-content :is(a.button, button:not(.show-password-input), input[type=submit], .woocommerce-Button):where(:not(.kb-book *)) { min-height: 52px; padding: 0 var(--k-6) !important; font-size: 15px !important; } html body .kl-acc .kl-acc-content a.button.kl-act:where(:not(.kb-book *)) { min-height: 44px; padding: 0 var(--k-5) !important; font-size: 14px !important; } html body .kl-acc .kl-acc-content .kl-dash-sub { font-size: 17px !important; margin-bottom: var(--k-6) !important; } html body .kl-acc .kl-list-row { padding: var(--k-4) 12px; } html body .kl-acc .kl-c { font-size: 15px !important; } html body .kl-acc .kl-acc-content button.show-password-input { top: 0 !important; height: 100% !important; width: 48px !important; transform: none !important; translate: none !important; margin-top: 0 !important; } html body .kl-acc .kl-acc-content button.show-password-input::after { width: 20px !important; height: 20px !important; } html body .kl-auth input.kl-input { height: 52px !important; font-size: 16px !important; padding: 0 16px !important; } html body .kl-auth .kl-field label { font-size: 14px !important; margin-bottom: 8px !important; } html body .kl-auth .kl-field { margin-bottom: var(--k-4) !important; } html body .kl-auth .kl-toggle-pass { width: 48px !important; height: 100% !important; top: 0 !important; right: 0 !important; } html body .kl-auth .kl-btn { min-height: 52px; padding: 0 var(--k-6) !important; font-size: 16px !important; letter-spacing: 0 !important; margin-top: var(--k-4) !important; } html body .kl-auth .kl-btn.kl-btn-outline { margin-top: 0 !important; } html body .kl-auth .kl-check, html body .kl-auth .kl-link { font-size: 14px !important; min-height: 44px; } html body .kl-auth .kl-foot, html body .kl-auth .kl-foot .kl-foot-text { font-size: 14px !important; } html body .kl-auth .kl-note { font-size: 16px !important; } } /* Password change box and address boxes: plain headings, no nested frames */ html body .kl-acc .kl-acc-content fieldset:where(:not(.kb-book *)) legend { color: var(--kl-ink) !important; } html body .kl-acc .kl-acc-content fieldset:where(:not(.kb-book *)) { border: 0 !important; border-radius: var(--k-r-md) !important; background: var(--kl-tint) !important; padding: var(--k-5) !important; } html body .kl-acc .kl-acc-content .woocommerce-Address-title { background: transparent !important; flex-wrap: wrap; border: 0 !important; padding: 0 !important; margin: 0 0 var(--k-3) !important; } html body .kl-acc .kl-acc-content address:where(:not(.kb-book *)) { border: 0 !important; padding: 0 !important; background: none !important; } /* ---------- Messages: even 1px edge (a thick left bar on a rounded box curls into a crescent) ---------- */ html body :is(.kl-auth, .kl-acc .kl-acc-content) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner) { border: 1px solid var(--kl-divider) !important; border-radius: var(--k-r-md) !important; padding: var(--k-4) var(--k-5) !important; } html body :is(.kl-auth, .kl-acc .kl-acc-content) :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) { border-color: #e9b3ae !important; } html body :is(.kl-auth, .kl-acc .kl-acc-content) :is(.woocommerce-message, .wc-block-components-notice-banner.is-success) { border-color: #a9d9bd !important; } /* ---------- Phones ---------- */ @media (max-width: 768px) { html body .kl-acc .kl-acc-content { padding: var(--k-5) var(--k-4) !important; } html body .kl-auth { padding: var(--k-6) var(--k-4) var(--k-5) !important; } .kl-acc-bg, .kl-auth-bg { padding-block: var(--k-6) var(--k-8) !important; } } /* WooCommerce hides the real country/state