/** * WpExperts Hub — WooCommerce pages (cart, checkout, order received, account, * product/shop fallbacks). Loaded only on WooCommerce pages. * * The cart/checkout/order-confirmation section at the end is carried over * from the previous theme: it contains targeted fixes for the WooCommerce * Blocks markup (hydrated layout, coupon form, payment accordion, field * alignment) and now runs on this theme's colour tokens. */ :root { --wpx-navy: #0F172A; --wpx-navy-700: #1E293B; --wpx-brand: #2563EB; --wpx-accent: #06B6D4; --wpx-ink: #334155; --wpx-border: #E2E8F0; --wpx-radius: 8px; --wpx-radius-lg: 12px; --wpx-radius-xl: 16px; --wpx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --wpx-shadow: 0 4px 12px rgba(15, 23, 42, .07); --wpx-shadow-lg: 0 12px 28px rgba(15, 23, 42, .1); --wpx-container: 1200px; } /* ── Generic WooCommerce elements ──────────────────────────────────────── */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { list-style: none; margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--blue-200); background: var(--blue-50); color: #1E3A8A; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .woocommerce-error { border-color: #FECACA; background: #FEF2F2; color: #991B1B; } .woocommerce-message .button, .woocommerce-info .button { order: 2; } .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce-page .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; background: var(--blue); color: var(--white) !important; font: 600 14.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s; } .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--blue-dark); color: var(--white); } .woocommerce .button.alt { background: var(--blue); } .woocommerce form .form-row { margin: 0 0 16px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .woocommerce form .form-row .required { color: #DC2626; text-decoration: none; } .woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--white); font: 400 15px var(--sans); color: var(--navy); } .woocommerce form textarea.input-text { padding: 12px 14px; min-height: 110px; } .woocommerce form .input-text:focus, .woocommerce form select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); } .woocommerce form .password-input { position: relative; display: block; } .woocommerce form .show-password-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; } .woocommerce table.shop_table, .woocommerce-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14.5px; } .woocommerce table.shop_table th, .woocommerce-table th { background: var(--surface); font: 500 11.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .02em; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); } .woocommerce table.shop_table td, .woocommerce-table td { padding: 14px 16px; border-bottom: 1px solid var(--surface-2); vertical-align: middle; } .woocommerce table.shop_table tr:last-child td { border-bottom: 0; } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: var(--white); font: 600 14.5px var(--sans); color: var(--navy); text-transform: none; } .woocommerce-Price-amount { font-variant-numeric: tabular-nums; } .woocommerce mark { background: var(--blue-50); color: var(--blue-dark); padding: 0 4px; border-radius: 4px; } /* ── My Account ────────────────────────────────────────────────────────── */ .wpxh-account { max-width: 1200px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) var(--gutter) clamp(64px, 8vw, 96px); } .wpxh-account .woocommerce-MyAccount-navigation, .wpxh-account .woocommerce-MyAccount-content { float: none; width: auto; } .wpxh-account .woocommerce { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; } .wpxh-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 1 100%; } .woocommerce-MyAccount-navigation { flex: 0 0 240px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 24px); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* woocommerce-smallscreen.css adds a 2em bottom margin (0,2,1). */ .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0 !important; padding: 0 !important; list-style: none; border: 0 !important; } .woocommerce-MyAccount-navigation a { text-decoration: none !important; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; } .woocommerce-MyAccount-navigation a:hover { background: var(--surface); color: var(--navy); } .woocommerce-MyAccount-navigation .is-active a { background: var(--blue-50); color: var(--blue-dark); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); } .woocommerce-MyAccount-content { flex: 4 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; font-size: 15px; color: var(--ink); } .woocommerce-MyAccount-content > * { margin: 0; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-column__title, .woocommerce-order-details__title, .woocommerce-order-downloads__title { font-size: 22px; letter-spacing: -.03em; margin: 0 0 12px; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { min-height: 36px; padding: 0 12px; font-size: 13.5px; background: var(--white); color: var(--navy) !important; border-color: var(--line-strong); } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:hover { border-color: var(--blue); color: var(--blue-dark) !important; } .woocommerce-MyAccount-content form.edit-account, .woocommerce-MyAccount-content form.woocommerce-EditAccountForm, .woocommerce-address-fields, .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 28px); } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 8px 0 16px; } .woocommerce-MyAccount-content legend { font-weight: 650; padding: 0 6px; } .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none; } .woocommerce-Addresses .col-1, .woocommerce-Addresses .col-2 { width: auto; float: none; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .woocommerce-Address-title h2 { font-size: 18px; margin: 0; } .woocommerce-MyAccount-content address { font-style: normal; line-height: 1.7; } .wpxh-dashcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; } .wpxh-dashcard { text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--navy); transition: border-color .2s; } .wpxh-dashcard:hover { border-color: var(--blue); color: var(--navy); } .wpxh-dashcard.is-tint { background: var(--blue-50); border-color: var(--blue-200); } .wpxh-dashcard.is-tint .wpxh-mono-label { color: var(--blue-dark); } .wpxh-dashcard strong { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; } .wpxh-dashcard strong.is-text { font-size: 17px; letter-spacing: -.01em; } .wpxh-dashcard__link { font-size: 13.5px; color: var(--blue); font-weight: 600; } .wpxh-recent { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .wpxh-recent__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--surface-2); } .wpxh-recent__head h2 { font-size: 17px !important; font-weight: 650; margin: 0 !important; letter-spacing: -.02em !important; } .wpxh-recent__head a { font-size: 14px; font-weight: 600; } .wpxh-recent__row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--surface-2); color: var(--navy); font-size: 14.5px; } .wpxh-recent__row:last-child { border-bottom: 0; } .wpxh-recent__row:hover { background: var(--surface); color: var(--navy); } .wpxh-recent__row .wpxh-mono { font-size: 13px; color: var(--ink); } .wpxh-recent__items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wpxh-recent__total { font-weight: 600; } .woocommerce-MyAccount-content > p:first-of-type { color: var(--muted); } /* Guest login / register */ .wpxh-account .u-columns, .wpxh-account .woocommerce > form.login, .wpxh-account .woocommerce > form.lost_reset_password, .wpxh-account .woocommerce > form.woocommerce-ResetPassword { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; } .wpxh-account .u-columns::before, .wpxh-account .u-columns::after { display: none; } .wpxh-account .u-column1, .wpxh-account .u-column2 { width: auto !important; float: none !important; } .wpxh-account .u-columns > div > h2 { display: none; } .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { margin: 0 !important; background: var(--white); border: 1px solid var(--line) !important; border-radius: 18px !important; padding: clamp(22px, 3vw, 30px) !important; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-card); } .woocommerce form.lost_reset_password { max-width: 520px; } .woocommerce form.lost_reset_password > p:first-of-type { order: 1; color: var(--muted); } .wpxh-authband { order: -1; display: flex; align-items: center; gap: 14px; margin: -6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--surface-2); } .wpxh-authband__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-brand); color: var(--white); display: grid; place-items: center; flex: none; } .wpxh-authband__title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); } .wpxh-authband__sub { font-size: 14px; color: var(--muted); } .woocommerce form.login .button, .woocommerce form.register .button, .woocommerce form.lost_reset_password .button { width: 100%; min-height: 48px; margin-top: 6px; } .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin-bottom: 8px !important; } .woocommerce-LostPassword { margin: 8px 0 0; font-size: 14px; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); } /* Guest sign in / register: split layout (brand panel + card with tabs) */ .wpxh-main--account:has(.wpxh-auth), .wpxh-main--account:has(form.lost_reset_password) { background: radial-gradient(60% 40% at 50% 0%, var(--blue-50), transparent 70%), var(--surface); } .wpxh-account .woocommerce > .wpxh-auth { flex: 1 1 100%; } .wpxh-auth { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); width: 100%; max-width: 1080px; margin: clamp(0px, 1.5vw, 16px) auto 0; background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 40px 80px -48px rgba(15, 23, 42, .45); } .wpxh-auth__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 52px); background: var(--navy); color: #CBD5E1; } .wpxh-auth__brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 100% 0%, rgba(37, 99, 235, .5), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(6, 182, 212, .22), transparent 70%); } .wpxh-auth__brand::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); } .wpxh-auth__brand > * { position: relative; z-index: 1; margin: 0 !important; } .wpxh-auth__brand .wpxh-mono-label { color: var(--blue-300); font-size: 12px; } .wpxh-auth__title { color: var(--white); font-size: clamp(26px, 3vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -.04em; } .wpxh-auth__lead { font-size: 16px; line-height: 1.6; color: #CBD5E1; } .wpxh-auth__perks { list-style: none; padding: 0; display: grid; gap: 12px; } .wpxh-auth__perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45; color: #E2E8F0; } .wpxh-auth__perkicon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--cyan-light); } .wpxh-auth__help { margin-top: auto !important; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--subtle); } .wpxh-auth__help svg { flex: none; color: var(--blue-light); } .wpxh-auth__help a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .wpxh-auth__card { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 4vw, 48px); } .wpxh-auth__card > .wc-block-store-notices, .wpxh-auth__card .wc-block-components-notice-banner { margin: 0 !important; } .wpxh-auth__card > .woocommerce-notices-wrapper:empty { display: none; } .wpxh-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); } .wpxh-auth:not(.is-tabs) .wpxh-auth__tabs, .wpxh-auth:not(.is-tabs) .wpxh-auth__switch { display: none; } .wpxh-auth__tabs button { appearance: none; border: 0; border-radius: 10px; padding: 11px 12px; background: transparent; font: 600 14.5px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; } .wpxh-auth__tabs button:hover { color: var(--navy); } .wpxh-auth__tabs button[aria-selected="true"] { background: var(--white); color: var(--navy); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 14px -8px rgba(15, 23, 42, .25); } .wpxh-auth__tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .wpxh-account .wpxh-auth .u-columns { display: block; } .wpxh-account .wpxh-auth:not(.is-tabs) .u-columns { display: grid; gap: 36px; } .wpxh-auth [hidden] { display: none !important; } .wpxh-auth.is-tabs .u-columns > div:not([hidden]) { animation: wpxh-auth-in .28s ease both; } @keyframes wpxh-auth-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .woocommerce .wpxh-auth form.login, .woocommerce .wpxh-auth form.register { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none; background: none; gap: 0; } .wpxh-auth .wpxh-authband { margin: 0 0 22px; padding: 0; border: 0; } .wpxh-auth .wpxh-authband__title { font-size: 22px; letter-spacing: -.03em; } /* Fields (sign in, register, lost/reset password) */ .wpxh-auth form .form-row, .wpxh-account form.lost_reset_password .form-row { margin: 0 0 16px; } .wpxh-auth form .form-row label, .wpxh-account form.lost_reset_password .form-row label { font-size: 13.5px; color: var(--navy); } .wpxh-auth form .form-row .required, .wpxh-account form.lost_reset_password .required { color: var(--blue); } .wpxh-auth form .input-text, .wpxh-account form.lost_reset_password .input-text { min-height: 50px; border-radius: 12px; border-color: var(--line-strong); background: var(--surface); padding: 0 16px; transition: border-color .2s, background-color .2s, box-shadow .2s; } .wpxh-auth form .input-text:hover, .wpxh-account form.lost_reset_password .input-text:hover { border-color: var(--subtle); } .wpxh-auth form .input-text:focus, .wpxh-account form.lost_reset_password .input-text:focus { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); } .wpxh-auth form .password-input .input-text { padding-right: 48px; } .wpxh-auth form .show-password-input { right: 8px; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); } .wpxh-auth form .show-password-input:hover { background: var(--surface-2); color: var(--navy); } /* wphub-stop-spam CAPTCHA: image and answer on one row */ .woocommerce form .form-row.wphub-stop-spam { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; } .woocommerce form .form-row.wphub-stop-spam::before, .woocommerce form .form-row.wphub-stop-spam::after { display: none; } .woocommerce form .form-row.wphub-stop-spam > label { flex: 0 0 100%; margin: 0 0 2px; } .woocommerce form .form-row.wphub-stop-spam > img { flex: none; display: block !important; box-sizing: border-box; width: auto; height: 50px !important; max-width: 45%; margin: 0 !important; object-fit: contain; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); } .woocommerce form .form-row.wphub-stop-spam > .input-text { flex: 1; min-width: 0; } .woocommerce form .form-row.wpx-captcha-row, .woocommerce form .form-row:has(> img + .input-text) { display: flex; align-items: stretch; gap: 10px; } .woocommerce form .wpx-captcha-row::before, .woocommerce form .wpx-captcha-row::after, .woocommerce form .form-row:has(> img + .input-text)::before, .woocommerce form .form-row:has(> img + .input-text)::after { display: none; } .woocommerce form .wpx-captcha-row > img, .woocommerce form .form-row:has(> img + .input-text) > img { flex: none; height: 50px; width: auto; max-width: 45%; object-fit: contain; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); } .woocommerce form .wpx-captcha-row > .input-text, .woocommerce form .form-row:has(> img + .input-text) > .input-text { flex: 1; min-width: 0; } .woocommerce form .form-row:has(+ .wpx-captcha-row), .woocommerce form .form-row:has(+ .form-row > img + .input-text) { margin-bottom: 0; } .woocommerce form .form-row.form-row:has(+ .form-row.wphub-stop-spam) { margin-bottom: 16px; } /* Remember me + Forgot password on one row */ .woocommerce .wpxh-auth form.login { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; } .wpxh-auth form.login > * { grid-column: 1 / -1; } .wpxh-auth form.login > p.form-row:not(.woocommerce-form-row) { display: contents; } /* WooCommerce's clearfix pseudo-elements would become grid cells once the row is display: contents. */ .wpxh-auth form.login > p.form-row:not(.woocommerce-form-row)::before, .wpxh-auth form.login > p.form-row:not(.woocommerce-form-row)::after { display: none; } .wpxh-auth form.login .woocommerce-form-login__rememberme { grid-column: 1; margin: 0 !important; font-size: 14px !important; color: var(--ink); } .wpxh-auth form.login .woocommerce-form-login__rememberme input { width: 17px; height: 17px; accent-color: var(--blue); } .wpxh-auth form.login .woocommerce-LostPassword { grid-column: 2; order: 1; margin: 0; font-size: 14px; font-weight: 600; } .wpxh-auth form.login .woocommerce-form-login__submit { order: 2; grid-column: 1 / -1; } .wpxh-auth form.login .wpxh-auth__switch { order: 3; } /* Buttons */ .wpxh-auth form .button, .wpxh-account form.lost_reset_password .button { width: 100%; min-height: 52px; margin-top: 20px; border-radius: 12px; font-size: 15.5px; box-shadow: 0 12px 24px -14px rgba(37, 99, 235, .7); transition: background-color .2s, transform .2s, box-shadow .2s; } .wpxh-auth form .button::after, .wpxh-account form.lost_reset_password .button::after { content: "→"; transition: transform .2s; } .wpxh-auth form .button:hover, .wpxh-account form.lost_reset_password .button:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(37, 99, 235, .8); } .wpxh-auth form .button:hover::after, .wpxh-account form.lost_reset_password .button:hover::after { transform: translateX(3px); } .wpxh-auth form.register .form-row:has(> .button) { margin: 0; } /* Password strength (register / reset) */ .wpxh-auth .woocommerce-password-strength, .wpxh-account form.lost_reset_password .woocommerce-password-strength { margin-top: 8px; padding: 7px 12px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 600; text-align: left; } .woocommerce-password-strength.short { background: #FEE2E2; color: #B91C1C; } .woocommerce-password-strength.bad { background: #FFEDD5; color: #C2410C; } .woocommerce-password-strength.good { background: var(--blue-50); color: var(--blue-dark); } .woocommerce-password-strength.strong { background: #DCFCE7; color: #15803D; } .wpxh-auth .woocommerce-password-hint, .wpxh-account form.lost_reset_password .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .wpxh-auth .woocommerce-privacy-policy-text:empty { display: none; } .wpxh-auth__legal { margin: 14px 0 0 !important; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: center; } .wpxh-auth__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .wpxh-auth__switch { margin: 22px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--surface-2); font-size: 14px; color: var(--muted); text-align: center; } .wpxh-auth__switch a { font-weight: 650; } /* Lost / reset password: one centred card */ .wpxh-account .woocommerce:has(> form.lost_reset_password) { justify-content: center; } .wpxh-account .woocommerce > form.lost_reset_password { display: flex; flex-direction: column; flex: 0 1 500px; max-width: 500px; margin: clamp(0px, 1.5vw, 16px) auto 0 !important; padding: clamp(24px, 4vw, 40px) !important; border-radius: 22px !important; } .wpxh-account form.lost_reset_password > p:first-of-type { order: 0; margin: 0 0 18px; font-size: 15px; line-height: 1.6; } .wpxh-account form.lost_reset_password .form-row-first, .wpxh-account form.lost_reset_password .form-row-last { width: 100%; float: none; } .wpxh-account .woocommerce > form.lost_reset_password { gap: 0; } .wpxh-account form.lost_reset_password > .clear { display: none; } /* "Reset link sent" confirmation: same centred card */ .wpxh-account .woocommerce:has(> .wpxh-auth__back):not(:has(form)) { flex-direction: column; align-items: stretch; gap: 14px; max-width: 500px; margin: clamp(0px, 1.5vw, 16px) auto 0; padding: clamp(24px, 4vw, 40px); background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); } .wpxh-account .woocommerce:has(> .wpxh-auth__back):not(:has(form)) > * { flex: none; margin: 0 !important; } .wpxh-account .woocommerce:has(> .wpxh-auth__back):not(:has(form)) > p:not(.wpxh-auth__back) { font-size: 15px; line-height: 1.65; color: var(--ink); } .wpxh-account .woocommerce:has(> .wpxh-auth__back):not(:has(form)) .woocommerce-message { width: 100%; } .wpxh-main--account:has(.woocommerce > .wpxh-auth__back) { background: radial-gradient(60% 40% at 50% 0%, var(--blue-50), transparent 70%), var(--surface); } .wpxh-account form.lost_reset_password .wpxh-authband { margin-bottom: 18px; } .wpxh-auth__back { order: 5; margin: 18px 0 0 !important; text-align: center; font-size: 14px; } .wpxh-auth__back a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .wpxh-account .woocommerce > .wpxh-auth__back { flex: 1 1 100%; } @media (max-width: 959px) { .wpxh-auth { grid-template-columns: 1fr; max-width: 620px; } .wpxh-auth__brand { gap: 14px; padding: 28px clamp(20px, 5vw, 36px); } .wpxh-auth__help { margin-top: 4px !important; } } @media (max-width: 600px) { .wpxh-auth { border-radius: 18px; } .wpxh-auth__brand { padding: 24px 20px; } .wpxh-auth__lead, .wpxh-auth__perks, .wpxh-auth__help { display: none; } .wpxh-auth__title { font-size: 23px; } .wpxh-auth__card { padding: 22px 18px 26px; gap: 18px; } .wpxh-auth .wpxh-authband { margin-bottom: 18px; } .woocommerce form .wpx-captcha-row > img, .woocommerce form .form-row:has(> img + .input-text) > img { height: 50px; max-width: 50%; } .woocommerce form .form-row.wphub-stop-spam > img { max-width: 50%; } } @media (prefers-reduced-motion: reduce) { .wpxh-auth.is-tabs .u-columns > div:not([hidden]) { animation: none; } .wpxh-auth form .button, .wpxh-auth form .button::after { transition: none; } } /* Downloads / licence keys */ .woocommerce-table--order-downloads td { font-size: 14px; } .woocommerce-MyAccount-downloads-file.button { min-height: 36px !important; font-size: 13.5px !important; } .wpexpert-licence-key { display: flex; align-items: center; gap: 8px; min-width: 0; } /* Order details (view-order) */ .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-order-downloads { margin: 0 0 24px; } .woocommerce-customer-details address { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px; font-style: normal; line-height: 1.7; } .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .woocommerce-columns--addresses .woocommerce-column { width: auto; float: none; } mark.order-number, mark.order-date, mark.order-status { background: none; color: var(--navy); font-weight: 650; padding: 0; } @media (max-width: 859px) { .woocommerce-MyAccount-navigation { flex: 1 1 100%; position: static; padding: 6px; overflow-x: auto; } .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: 4px; } .woocommerce-MyAccount-navigation a { min-height: 40px; } .woocommerce table.shop_table_responsive thead { display: none; } .woocommerce table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; } .woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 8px 16px; text-align: right; } .woocommerce table.shop_table_responsive td::before { content: attr(data-title); font: 500 11.5px var(--mono); color: var(--muted); text-transform: uppercase; text-align: left; } .wpxh-recent__row { grid-template-columns: 70px minmax(0, 1fr); } .wpxh-recent__total { grid-column: 2; } } /* ── Ported cart / checkout / order-confirmation rules ─────────────────── */ /* ---------- WooCommerce Cart (FSE blocks) ---------- */ /* Page container -- cart is a wide, functional page, so widen past the doc-page cap to the site container (80rem) and reset the top padding for a tighter, app-like feel. */ .wpxh-main--cart { max-width: var(--wpx-container); padding-top: 2.5rem; } /* Page header */ .wpxh-main--cart h1.wp-block-heading { margin: 0; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--wpx-navy); } .wp-block-woocommerce-cart { padding: 0 0 2rem; } /* Two-column layout: items / totals side-by-side on desktop. NOTE: WooCommerce's JS hydrates the cart and swaps the SSR wrapper `.wp-block-woocommerce-filled-cart-block` for a `.wc-block-components-sidebar-layout` flex row whose children default to `width:65%` (main) / `width:35%` (sidebar) — which makes both columns feel cramped. We override it back to a grid with a comfortable, fixed sidebar so the two columns use the layout below regardless of which markup (SSR skeleton vs hydrated) is on screen. */ .wp-block-woocommerce-filled-cart-block, .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block, .wc-block-components-sidebar-layout { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; margin: 0 auto; } @media (min-width: 1024px) { .wp-block-woocommerce-filled-cart-block, .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-filled-cart-block, .wc-block-components-sidebar-layout { grid-template-columns: minmax(0, 1fr) 380px; } } /* Neutralise the WooCommerce percentage widths on both render paths and let the grid columns decide the width. */ .wp-block-woocommerce-cart-items-block, .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-cart-items-block, .wc-block-components-sidebar-layout .wc-block-components-main { box-sizing: border-box; width: auto; min-width: 0; margin: 0; padding-right: 0; } .wp-block-woocommerce-cart-totals-block, .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-cart-totals-block, .wc-block-components-sidebar-layout .wc-block-components-sidebar { box-sizing: border-box; width: auto; min-width: 0; margin: 0; padding-left: 0; } /* --- Cart items table --- */ table.wc-block-cart-items { width: 100%; border-collapse: separate; border-spacing: 0 0.9rem; } /* Table header (Product / Price / Qty / Total) */ .wc-block-cart-items__header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8a93ad; font-weight: 700; } .wc-block-cart-items__header th { padding: 0 1rem 0.6rem; text-align: left; border-bottom: 2px solid var(--wpx-border); } .wc-block-cart-items__header .wc-block-cart-items__header-total { text-align: right; } .wc-block-cart-items__header .wc-block-cart-items__header-image { width: 84px; } /* Line-item rows -- card style */ .wc-block-cart-items__row { background: #ffffff; border: 1px solid var(--wpx-border); border-radius: var(--wpx-radius-lg); padding: 1rem; box-shadow: var(--wpx-shadow-sm); transition: box-shadow 0.18s ease, border-color 0.18s ease; } .wc-block-cart-items__row:hover { border-color: #c9d4ef; box-shadow: var(--wpx-shadow); } .wc-block-cart-items__row td { padding: 0 1rem; vertical-align: middle; } /* Item image */ .wc-block-cart-item__image { width: 84px; } .wc-block-cart-item__image img { border-radius: var(--wpx-radius); width: 76px; height: 76px; object-fit: contain; background: #f8fafc; border: 1px solid #eef1f7; padding: 0.35rem; } /* Product details */ .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .wc-block-cart-item__product { display: flex; flex-direction: column; gap: 0.45rem; } .wc-block-cart-item__product-name, .wc-block-cart-item__product .wc-block-components-product-name { font-size: 1rem; font-weight: 700; color: var(--wpx-navy); line-height: 1.35; } .wc-block-cart-item__product .wc-block-components-product-name a { color: var(--wpx-navy); text-decoration: none; } .wc-block-cart-item__product .wc-block-components-product-name a:hover { color: var(--wpx-brand); text-decoration: none; } .wc-block-cart-item__prices { font-size: 0.85rem; font-weight: 600; color: #6474a0; } .wc-block-cart-item__prices .price, .wc-block-cart-item__prices .woocommerce-Price-amount { color: var(--wpx-brand); } /* Quantity stepper -- pill control */ .wc-block-cart-item__quantity .wc-block-cart-input { display: inline-flex; align-items: center; gap: 0.1rem; border: 1px solid #d6dae3; border-radius: 999px; padding: 0.2rem 0.4rem; background: #f8fafc; } .wc-block-cart-item__quantity .wc-block-cart-input input { width: 42px; text-align: center; border: none; outline: none; background: transparent; font-size: 0.9rem; font-weight: 600; color: var(--wpx-navy); } .wc-block-cart-item__quantity .wc-block-cart-input button { border: none; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--wpx-navy); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease; } .wc-block-cart-item__quantity .wc-block-cart-input button:hover { background: var(--wpx-navy); color: #fff; } /* Remove / save-for-later */ .wc-block-cart-item__remove-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #9aa4bd; font-size: 1.15rem; cursor: pointer; transition: all 0.15s ease; border: none; background: transparent; } .wc-block-cart-item__remove-link:hover { color: #dc2626; background: #fef2f2; transform: scale(1.08); } /* Subtotal column */ .wc-block-cart-item__total { text-align: right; } .wc-block-cart-item__total-price-and-sale-badge-wrapper, .wc-block-cart-item__total .price, .wc-block-cart-item__total .woocommerce-Price-amount { font-weight: 800; font-size: 1.05rem; color: var(--wpx-navy); } /* --- Order summary (right column) --- */ .wp-block-woocommerce-cart-totals-block { min-width: 0; } @media (min-width: 1024px) { .wp-block-woocommerce-cart-totals-block { position: sticky; top: 6rem; } } .wp-block-woocommerce-cart-order-summary-block { background: #ffffff; border: 1px solid var(--wpx-border); border-radius: var(--wpx-radius-xl); padding: 1.5rem; box-shadow: var(--wpx-shadow); } /* Summary heading — the classes sit ON the

itself (not an ancestor), so we target the element directly with a small icon accent + divider. */ .wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title, .wp-block-woocommerce-cart-order-summary-block .wc-block-components-title, .wp-block-woocommerce-cart-order-summary-block h2 { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -0.01em; color: var(--wpx-navy) !important; margin: 0 0 1rem !important; padding: 0 0 0.85rem !important; position: relative !important; display: flex !important; align-items: center !important; gap: 0.55rem !important; } .wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title::before { content: ""; width: 0.5rem; height: 1.15rem; border-radius: 3px; background: linear-gradient(180deg, var(--wpx-brand) 0%, var(--wpx-accent) 100%); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18); flex: 0 0 auto; } .wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--wpx-brand) 0%, rgba(37, 99, 235, 0.12) 70%, transparent 100%); } /* ---------- WooCommerce block notice banners (store-notices) ---------- Rendered as .wc-block-components-notice-banner with is-success / is-error / is-info. Restyled to match the theme palette with an icon chip + card. */ .wc-block-components-notice-banner { display: flex !important; align-items: flex-start !important; gap: 0.7rem !important; margin: 0 0 1.1rem !important; padding: 0.9rem 1.05rem !important; border-radius: var(--wpx-radius-lg) !important; border: 1px solid !important; box-shadow: var(--wpx-shadow-sm); font-size: 0.9rem !important; line-height: 1.55 !important; } .wc-block-components-notice-banner > svg { width: 1.4rem !important; height: 1.4rem !important; flex: 0 0 auto !important; margin-top: 0.05rem; } .wc-block-components-notice-banner__content { flex: 1 1 auto; min-width: 0; } .wc-block-components-notice-banner.is-success { background: #f0fdf4 !important; border-color: #bbe6c7 !important; color: #166534 !important; } .wc-block-components-notice-banner.is-success > svg { fill: #16a34a !important; } .wc-block-components-notice-banner.is-success a { color: #15803d !important; font-weight: 700; } .wc-block-components-notice-banner.is-error { background: #fef2f2 !important; border-color: #f8c6c6 !important; color: #b91c1c !important; } .wc-block-components-notice-banner.is-error > svg { fill: #dc2626 !important; } .wc-block-components-notice-banner.is-error a { color: #b91c1c !important; font-weight: 700; } .wc-block-components-notice-banner.is-info { background: #eff6ff !important; border-color: #c4d8fb !important; color: #1e40af !important; } .wc-block-components-notice-banner.is-info > svg { fill: var(--wpx-brand) !important; } .wc-block-components-notice-banner.is-info a { color: var(--wpx-navy) !important; font-weight: 700; } .wc-block-components-notice-banner.is-dismissible .wc-block-components-notice-banner__dismiss { align-self: center; margin-left: auto; color: inherit !important; background: transparent; border: none; cursor: pointer; } .wc-block-components-notice-banner.is-dismissible .wc-block-components-notice-banner__dismiss svg { fill: currentColor; } /* Coupon form — card treatment. WooCommerce hydrates the cart and injects its own (emotion) stylesheet AFTER this theme's CSS, and it's enqueued with higher specificity or later load order. So every coupon selector below is scoped under the order-summary block to raise specificity, and vital props use !important to beat the injected defaults. */ .wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper { margin: 1rem 0 1.25rem; border-top: 2px solid var(--wpx-border); padding-top: 1.1rem; } /* --- Collapsed "Add coupons" toggle --- */ .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon.wc-block-components-panel { margin: 0 !important; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button { display: flex !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; margin: 0 !important; padding: 0.7rem 0.9rem !important; background: #f5f8fc !important; border: 1px solid #dbe4f2 !important; border-radius: var(--wpx-radius-lg) !important; color: var(--wpx-navy) !important; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: var(--wpx-shadow-sm); transition: border-color 0.18s ease, background-color 0.18s ease; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button:hover { border-color: var(--wpx-brand) !important; background: #eef4ff !important; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button-icon { width: 15px !important; height: 15px !important; margin-left: auto !important; transition: transform 0.2s ease; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button[aria-expanded="true"] .wc-block-components-panel__button-icon { transform: rotate(180deg); } /* Revealed coupon body */ .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__content { padding: 0.5rem 0 0 !important; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__content { background: #f5f8fc !important; border: 1px solid #e6edf7 !important; border-radius: var(--wpx-radius-lg) !important; padding: 0.75rem !important; } .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__form { display: flex !important; align-items: stretch !important; gap: 0.5rem !important; flex-wrap: nowrap !important; } /* Coupon input — WooCommerce wraps a raw in a .wc-block-components-text-input div with a floating