/* ═══════════════════════════════════════════════════════════════════════════ wn-account.css — GENERATED by scripts/gen-account-css.py. DO NOT EDIT. Source: site/src/styles/{_editorial-base,_forms-base,account-ro}.css Target: WooCommerce's `[woocommerce_my_account]` markup, ALL eight views. Carrier: `body.wn-ac`, added by the account snippet on the my-account page. Gate: the logged-in half additionally requires `body.logged-in`, so no rule written for it can reach the logged-out views. The adversary here is Bricks' `integrations/woocommerce-layer.min.css`, not ACSS — ACSS has zero My Account selectors. That file is wrapped in `@layer bricks`, so this (unlayered) sheet outranks all of it regardless of specificity. What a layer does NOT win is a property this sheet never declares; those are handled explicitly in EXTRA_RULES. Re-run the generator after ANY edit to those stylesheets. Editing this file directly guarantees it drifts from the design of record. ═══════════════════════════════════════════════════════════════════════════ */ /* ── The two-column pairing, which the design never drew ──────────────────── Woo puts login and register side by side. `.ac-auth`'s 470px centred card is a ONE-column page in the design, so the pair needs a container rule that has no source counterpart. Values are the design's own `--wn-ac-gap` and its 900 breakpoint; only the arrangement is new. */ .wn-ac .woocommerce .col2-set { display: grid; gap: var(--wn-ac-gap); max-width: 470px; margin: 0 auto; /* one card, the design's own width */ } @media (min-width: 900px) { .wn-ac .woocommerce .col2-set { grid-template-columns: 1fr 1fr; align-items: start; /* TWO cards side by side: the design's 470px card, twice, plus its own gap. Derived from the design's numbers rather than picked. */ max-width: calc(470px * 2 + var(--wn-ac-gap)); } } .wn-ac .woocommerce .col2-set::before, .wn-ac .woocommerce .col2-set::after { content: none; display: none; } /* Woo floats its columns and clears with generated content. Both fight grid. */ .wn-ac .woocommerce .u-column1, .wn-ac .woocommerce .u-column2 { float: none; width: auto; } :where(.wn-ac) h1,:where(.wn-ac) h2,:where(.wn-ac) h3,:where(.wn-ac) h4{font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading); letter-spacing: normal; margin: 0;} :where(.wn-ac) p{margin: 0; line-height: var(--wn-lh-body);} :where(.wn-ac) a{color: inherit;} .wn-ac .vc-wrap{max-width: var(--wn-wrap-max); margin: 0 auto; padding: 0 var(--wn-wrap-pad);} .wn-ac .d15-section{padding: var(--wn-section-pad) 0; background: var(--wn-color-brand-bg);} .wn-ac .d15-section--ivory{background: var(--wn-color-brand-surface);} .wn-ac .d15-section--band{background: var(--wn-color-band); color: #fff;} .wn-ac .d15-section--band .d15-lead{color: #C2DBCE;} .wn-ac .d15-section--band .d15-hl,.wn-ac .d15-section--band .d15-kicker{color: var(--wn-color-accent-dark);} .wn-ac .d15-kicker{font-family: var(--wn-font-body); font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wn-color-accent-text); margin: 0 0 26px;} .wn-ac .d15-lead{font-size: var(--wn-fs-lead); line-height: var(--wn-lh-body); color: var(--wn-color-brand-muted); max-width: 58ch; margin: 26px 0 0;} .wn-ac .d15-hl{color: var(--wn-color-accent-text);} .wn-ac .d15-btn{display: inline-block; font-family: var(--wn-font-body); font-weight: 700; font-size: .95rem; padding: 15px 26px; border-radius: var(--wn-radius); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease;} .wn-ac .d15-btn--primary{background: var(--wn-btn-primary-bg); color: var(--wn-btn-primary-fg);} .wn-ac .d15-btn--primary:hover,.wn-ac .d15-btn--primary:focus-visible{background: var(--wn-btn-primary-bg-hover);} .wn-ac .d15-btn--ghost{background: transparent; color: var(--wn-color-brand-text); border-color: var(--wn-rule);} .wn-ac .d15-btn--ghost:hover,.wn-ac .d15-btn--ghost:focus-visible{border-color: var(--wn-color-brand-text); background: color-mix(in srgb, var(--wn-color-brand-text) 4%, transparent);} .wn-ac .d15-section--band .d15-btn--ghost{color: #fff; border-color: rgba(255,255,255,.42);} .wn-ac .d15-section--band .d15-btn--ghost:hover,.wn-ac .d15-section--band .d15-btn--ghost:focus-visible{border-color: #fff; background: rgba(255,255,255,.09);} .wn-ac .d15-btn:active{transform: translateY(1px);} .wn-ac .d15-btn:focus-visible{outline: 2px solid var(--wn-color-accent-text); outline-offset: 2px;} .wn-ac .d15-section--band .d15-btn:focus-visible{outline-color: var(--wn-color-accent-dark);} .wn-ac .d15-slot{position: relative; border: 1px solid var(--wn-rule); display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg,#EFE9E0 0 12px,#F5F1EA 12px 24px);} .wn-ac .d15-slot > span{font-family: var(--wn-font-body); font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: #9A8E80; text-align: center; padding: 0 18px;} .wn-ac .d15-slot--wide{aspect-ratio: 16/10;} .wn-ac .d15-slot--square{aspect-ratio: 1/1;} .wn-ac .d15-slot--portrait{aspect-ratio: 3/4;} .wn-ac .d15-slot > img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;} .wn-ac .vc-sr{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;} .wn-ac .wc-verify{font-family: var(--wn-font-body); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wn-color-brand-ember); border: 1px dashed color-mix(in srgb, var(--wn-color-brand-ember) 42%, transparent); border-radius: var(--wn-radius); padding: 3px 8px; display: inline-block; vertical-align: middle; white-space: normal; max-width: 100%;} @media (prefers-reduced-motion: reduce){ .wn-ac .d15-btn{transition: none;} .wn-ac .d15-btn:active{transform: none;} } @media (max-width: 700px){ .wn-ac{--wn-fs-h1: 2.5rem; --wn-fs-h2: 2.2rem; --wn-fs-h3: 1.25rem; --wn-fs-lead: 1rem; --wn-fs-body: 1rem; --wn-fs-body-sm: 1rem; --wn-lh-h2: 1.15; --wn-section-pad: 92px; --wn-wrap-pad: 20px; --wn-nav-h: 72px;} .wn-ac .d15-lead{line-height: 1.55; margin-top: 20px;} .wn-ac .d15-kicker{font-size: .76rem; margin-bottom: 20px;} } @media (max-width: 380px){ .wn-ac{--wn-wrap-pad: 16px;} } .wn-ac.logged-in .woocommerce-EditAccountForm fieldset{border: 0; margin: 0; padding: 0;} .wn-ac.logged-in .woocommerce-EditAccountForm fieldset + fieldset{margin-top: clamp(28px, 3vw, 40px);} .wn-ac.logged-in .woocommerce-EditAccountForm legend{font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading); font-size: var(--wn-fs-h3); line-height: var(--wn-lh-h3); margin: 0 0 18px; padding: 0;} .wn-ac .woocommerce-form-row,.wn-ac .woocommerce .form-row{display: grid; gap: 7px; min-width: 0;} .wn-ac .woocommerce-form-row label,.wn-ac .woocommerce .form-row label{font-family: var(--wn-font-body); font-size: .88rem; font-weight: 600; color: var(--wn-color-brand-text);} .wn-ac.logged-in .woocommerce-EditAccountForm em,.wn-ac.logged-in .woocommerce-EditAccountForm span.description{font-size: .82rem; line-height: 1.5; color: var(--wn-color-brand-muted);} @media (max-width: 700px){ .wn-ac .woocommerce-form-row label,.wn-ac .woocommerce .form-row label{font-size: var(--wn-fs-body-sm);} .wn-ac.logged-in .woocommerce-EditAccountForm em,.wn-ac.logged-in .woocommerce-EditAccountForm span.description{font-size: var(--wn-fs-body-sm);} } .wn-ac .woocommerce-Input--text,.wn-ac .woocommerce .input-text,.wn-ac .woocommerce input[type='text'],.wn-ac .woocommerce input[type='email'],.wn-ac .woocommerce input[type='password'],.wn-ac .woocommerce input[type='tel'],.wn-ac .woocommerce select{width: 100%; min-height: 48px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-text); background: var(--wn-color-brand-bg); border: 1px solid var(--wn-rule); border-radius: var(--wn-radius); padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease;} .wn-ac .woocommerce-Input--text::placeholder,.wn-ac .woocommerce .input-text::placeholder,.wn-ac .woocommerce input[type='text']::placeholder,.wn-ac .woocommerce input[type='email']::placeholder,.wn-ac .woocommerce input[type='password']::placeholder,.wn-ac .woocommerce input[type='tel']::placeholder{color: color-mix(in srgb, var(--wn-color-brand-muted) 78%, transparent);} .wn-ac .woocommerce-Input--text:hover,.wn-ac .woocommerce .input-text:hover,.wn-ac .woocommerce input[type='text']:hover,.wn-ac .woocommerce input[type='email']:hover,.wn-ac .woocommerce input[type='password']:hover,.wn-ac .woocommerce input[type='tel']:hover,.wn-ac .woocommerce select:hover{border-color: var(--wn-color-brand-muted);} .wn-ac .woocommerce-Input--text:focus,.wn-ac .woocommerce .input-text:focus,.wn-ac .woocommerce input[type='text']:focus,.wn-ac .woocommerce input[type='email']:focus,.wn-ac .woocommerce input[type='password']:focus,.wn-ac .woocommerce input[type='tel']:focus,.wn-ac .woocommerce select:focus{outline: 0; border-color: var(--wn-color-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wn-color-brand-primary) 18%, transparent);} .wn-ac .woocommerce select{appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7268' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;} .wn-ac .woocommerce-Input--text[aria-invalid='true'],.wn-ac .woocommerce .input-text[aria-invalid='true'],.wn-ac .woocommerce input[type='text'][aria-invalid='true'],.wn-ac .woocommerce input[type='email'][aria-invalid='true'],.wn-ac .woocommerce input[type='password'][aria-invalid='true'],.wn-ac .woocommerce input[type='tel'][aria-invalid='true'],.wn-ac .woocommerce select[aria-invalid='true']{border-color: var(--wn-color-brand-ember);} .wn-ac .woocommerce-error{font-size: .84rem; font-weight: 600; color: var(--wn-color-brand-ember); display: flex; align-items: flex-start; gap: 6px;} .wn-ac .woocommerce-error svg{width: 15px; height: 15px; flex: none; margin-top: 2px;} .wn-ac{--wn-ac-gap: clamp(24px, 3.2vw, 40px); --wn-ac-card-pad: clamp(20px, 2.6vw, 30px); --wn-ac-sidebar: 248px; --wn-ck-field-gap: 18px;} .wn-ac #brx-content{padding: clamp(104px, 11vw, 148px) 0 clamp(64px, 8vw, 104px);} .wn-ac #brx-content > h1{font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.18; margin: 0;} .wn-ac .woocommerce .u-column1,.wn-ac .woocommerce .u-column2{background: var(--wn-color-brand-surface); border: 1px solid var(--wn-rule); border-radius: var(--wn-radius); padding: var(--wn-ac-card-pad);} .wn-ac .woocommerce .col2-set h2,.wn-ac .woocommerce-ResetPassword + h2{font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; margin: 0 0 8px;} .wn-ac .woocommerce-form .form-row:last-of-type{margin-top: 26px; display: grid; gap: 14px;} .wn-ac .woocommerce-form__label-for-checkbox{display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-text); cursor: pointer;} .wn-ac .woocommerce-form__label-for-checkbox input{width: 18px; height: 18px; flex: none; accent-color: var(--wn-color-brand-primary); cursor: pointer;} .wn-ac .woocommerce-LostPassword a,.wn-ac .woocommerce-privacy-policy-link,.wn-ac.logged-in .woocommerce-Address-title .edit{display: inline-flex; align-items: center; min-height: 44px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); font-weight: 600; color: var(--wn-color-brand-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;} .wn-ac .woocommerce-LostPassword a:hover,.wn-ac .woocommerce-privacy-policy-link:hover,.wn-ac.logged-in .woocommerce-Address-title .edit:hover{text-decoration-thickness: 2px;} .wn-ac .woocommerce-LostPassword{margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-muted);} .wn-ac .woocommerce-Button,.wn-ac .woocommerce-button,.wn-ac .woocommerce button.button,.wn-ac.logged-in .woocommerce a.button{display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 24px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); font-weight: 700; border: 1px solid transparent; border-radius: var(--wn-radius); cursor: pointer; transition: background-color .2s ease, border-color .2s ease;} .wn-ac .woocommerce-Button,.wn-ac .woocommerce-button,.wn-ac .woocommerce button.button,.wn-ac.logged-in .woocommerce a.button{background: var(--wn-btn-primary-bg); color: var(--wn-btn-primary-fg);} .wn-ac .woocommerce-Button:hover,.wn-ac .woocommerce-button:hover,.wn-ac .woocommerce button.button:hover,.wn-ac.logged-in .woocommerce a.button:hover{background: var(--wn-btn-primary-bg-hover);} .wn-ac.logged-in .woocommerce .woocommerce-orders-table__cell-order-actions a.button,.wn-ac.logged-in .woocommerce .woocommerce-pagination a.button,.wn-ac.logged-in .woocommerce .order-again a.button{background: transparent; color: var(--wn-color-brand-text); border-color: var(--wn-rule);} .wn-ac.logged-in .woocommerce .woocommerce-orders-table__cell-order-actions a.button:hover,.wn-ac.logged-in .woocommerce .woocommerce-pagination a.button:hover,.wn-ac.logged-in .woocommerce .order-again a.button:hover{border-color: var(--wn-color-brand-muted);} .wn-ac.logged-in .woocommerce .woocommerce-orders-table__cell-order-actions a.button,.wn-ac.logged-in .woocommerce .woocommerce-pagination a.button,.wn-ac.logged-in .woocommerce .order-again a.button,.wn-ac.logged-in .woocommerce-MyAccount-content .woocommerce-info .button{width: auto;} .wn-ac .woocommerce-privacy-policy-text,.wn-ac .woocommerce-form-login-toggle{border-left: 3px solid var(--wn-color-brand-secondary); padding: 2px 0 2px 16px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); line-height: var(--wn-lh-body); color: var(--wn-color-brand-muted);} .wn-ac .woocommerce-privacy-policy-text strong,.wn-ac .woocommerce-form-login-toggle strong{color: var(--wn-color-brand-text); font-weight: 600;} @media (max-width: 560px){ .wn-ac .woocommerce .u-column1,.wn-ac .woocommerce .u-column2{padding: 22px 18px;} } .wn-ac.logged-in .woocommerce{display: grid; gap: var(--wn-ac-gap);} @media (min-width: 900px){ .wn-ac.logged-in .woocommerce{grid-template-columns: var(--wn-ac-sidebar) minmax(0, 1fr);} } .wn-ac.logged-in .woocommerce-MyAccount-navigation{min-width: 0;} .wn-ac.logged-in .woocommerce-MyAccount-navigation ul{list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;} .wn-ac.logged-in .woocommerce-MyAccount-navigation li a{display: block; padding: 13px 14px; min-height: 44px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); font-weight: 600; color: var(--wn-color-brand-text); border-radius: var(--wn-radius); border-left: 3px solid transparent; text-decoration: none;} .wn-ac.logged-in .woocommerce-MyAccount-navigation li a:hover{background: var(--wn-color-brand-surface);} .wn-ac.logged-in .woocommerce-MyAccount-navigation li.is-active a{background: var(--wn-color-brand-surface); border-left-color: var(--wn-color-brand-primary); color: var(--wn-color-brand-primary);} .wn-ac.logged-in .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wn-rule);} @media (max-width: 899px){ .wn-ac.logged-in .woocommerce-MyAccount-navigation ul{grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: thin;} .wn-ac.logged-in .woocommerce-MyAccount-navigation li a{border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--wn-radius) var(--wn-radius) 0 0; white-space: nowrap;} .wn-ac.logged-in .woocommerce-MyAccount-navigation li.is-active a{border-left: 0; border-bottom-color: var(--wn-color-brand-primary);} .wn-ac.logged-in .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{margin-top: 10px;} } @media (max-width: 480px){ .wn-ac.logged-in .woocommerce-MyAccount-navigation li a{padding: 13px 10px;} } .wn-ac.logged-in .woocommerce-MyAccount-content{min-width: 0;} .wn-ac.logged-in .woocommerce-EditAccountForm,.wn-ac.logged-in .woocommerce-Address,.wn-ac.logged-in .woocommerce-order-details,.wn-ac.logged-in .woocommerce-customer-details,.wn-ac.logged-in .woocommerce-address-fields{background: var(--wn-color-brand-surface); border: 1px solid var(--wn-rule); border-radius: var(--wn-radius); padding: var(--wn-ac-card-pad);} .wn-ac.logged-in .woocommerce-order-details + .woocommerce-customer-details{margin-top: 16px;} .wn-ac.logged-in .woocommerce-order-details__title,.wn-ac.logged-in .woocommerce-column__title,.wn-ac.logged-in .woocommerce-Address-title h2,.wn-ac.logged-in .woocommerce-Address-title h3,.wn-ac.logged-in .woocommerce-EditAccountForm legend{font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading); font-size: var(--wn-fs-h3); line-height: var(--wn-lh-h3); margin: 0 0 16px;} .wn-ac.logged-in .woocommerce-Address-title{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px;} .wn-ac.logged-in .woocommerce-Address-title h2,.wn-ac.logged-in .woocommerce-Address-title h3{margin: 0;} .wn-ac.logged-in .woocommerce-orders-table tbody{list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;} .wn-ac.logged-in .woocommerce-orders-table tbody tr{background: var(--wn-color-brand-bg); border: 1px solid var(--wn-rule); border-radius: var(--wn-radius);} .wn-ac.logged-in .woocommerce-orders-table tbody tr{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 18px; min-height: 44px; cursor: pointer; list-style: none;} .wn-ac.logged-in .woocommerce-orders-table tbody tr::-webkit-details-marker{display: none;} .wn-ac.logged-in .woocommerce-orders-table tbody tr:focus-visible{outline: 2px solid var(--wn-color-brand-primary); outline-offset: -2px;} .wn-ac.logged-in .woocommerce-orders-table__cell-order-number{font-family: var(--wn-font-body); font-weight: 700; font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-text);} .wn-ac.logged-in .woocommerce-orders-table__cell-order-date{font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-muted);} .wn-ac.logged-in .woocommerce-orders-table__cell-order-total{font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); font-weight: 600; color: var(--wn-color-brand-text); margin-left: auto;} .wn-ac.logged-in .woocommerce-order-details table tbody{list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 10px;} .wn-ac.logged-in .woocommerce-order-details table tbody tr{display: flex; gap: 12px; align-items: center; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); line-height: 1.45;} .wn-ac.logged-in .woocommerce-order-details .product-quantity{color: var(--wn-color-brand-muted); flex: none;} .wn-ac.logged-in .woocommerce-order-details td.product-name{flex: 1 1 auto; min-width: 0;} .wn-ac.logged-in .woocommerce-order-details td.product-total{flex: none; color: var(--wn-color-brand-muted);} .wn-ac.logged-in .woocommerce-order-details table tfoot{margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wn-rule); display: grid; gap: 8px; font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-muted);} .wn-ac.logged-in .woocommerce-order-details table tfoot strong{color: var(--wn-color-brand-text); font-weight: 600;} .wn-ac.logged-in #brx-content td.woocommerce-orders-table__cell-order-status{display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-family: var(--wn-font-body); font-size: .8rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;} .wn-ac.logged-in .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,.wn-ac.logged-in .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status{background: #FDF0E4; color: #8A4A12;} .wn-ac.logged-in .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{background: #E3F0EA; color: var(--wn-color-brand-deep);} .wn-ac.logged-in .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{background: var(--wn-color-brand-primary); color: #fff;} .wn-ac.logged-in .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,.wn-ac.logged-in .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,.wn-ac.logged-in .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status{background: #EFEDE8; color: #5A5750;} .wn-ac.logged-in .woocommerce-Addresses{display: grid; gap: 16px;} @media (min-width: 700px){ .wn-ac.logged-in .woocommerce-Addresses{grid-template-columns: 1fr 1fr;} } .wn-ac.logged-in .woocommerce-Address address{font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); line-height: 1.6; color: var(--wn-color-brand-muted);} .wn-ac.logged-in .woocommerce-Address address strong{display: block; color: var(--wn-color-brand-text); font-weight: 600; margin-bottom: 4px;} .wn-ac.logged-in .woocommerce-MyAccount-content .woocommerce-info{text-align: center; padding: 30px 16px;} /* ── Woo-only nodes the design has no name for ────────────────────────────── Each one exists in Woo's markup and would otherwise render at Bricks' WooCommerce-integration defaults inside a designed card. */ /* The lost-password / reset forms are single-column: no `col2-set` wraps them, so they get the card treatment directly. */ .wn-ac .woocommerce-ResetPassword { max-width: 470px; margin: 0 auto; background: var(--wn-color-brand-surface); border: 1px solid var(--wn-rule); border-radius: var(--wn-radius); padding: var(--wn-ac-card-pad); } .wn-ac .woocommerce-ResetPassword .woocommerce-form-row { margin-bottom: 0; } /* Woo's required marker is a bare `*` in a `.required` span. */ .wn-ac .woocommerce .required { color: var(--wn-color-brand-ember); text-decoration: none; } /* Notices. Woo's defaults are a green bar with a tick sprite that does not exist in this design system. */ .wn-ac .woocommerce-notices-wrapper .woocommerce-message, .wn-ac .woocommerce-notices-wrapper .woocommerce-info, .wn-ac .woocommerce-notices-wrapper .woocommerce-error { font-family: var(--wn-font-body); font-size: var(--wn-fs-body-sm); line-height: var(--wn-lh-body); border-radius: var(--wn-radius); border: 1px solid var(--wn-rule); background: var(--wn-color-brand-surface); padding: 14px 16px; list-style: none; } .wn-ac .woocommerce-notices-wrapper .woocommerce-error { border-color: var(--wn-color-brand-ember); } .wn-ac .woocommerce-notices-wrapper .button { width: auto; min-height: 44px; } /* ── EXTRA_RULES['ac-auth__card'] ─────────────────────────────────── */ .wn-ac .woocommerce-form-login, .wn-ac .woocommerce-form-register { border: 0; } /* ── EXTRA_RULES['ac-shell'] ─────────────────────────────────── */ .wn-ac.logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* ── EXTRA_RULES['ac-side'] ─────────────────────────────────── */ .wn-ac.logged-in .woocommerce-MyAccount-navigation { background: none; } .wn-ac.logged-in .woocommerce-MyAccount-navigation li { margin: 0; } .wn-ac.logged-in .woocommerce-MyAccount-navigation li a { line-height: 1.35; } /* ⚠️ The logout item in the MOBILE strip. `.ac-side__out` separates logout from the rest with `margin-top / padding-top / border-top` — correct for the vertical desktop list, and the design's ≤899 block only revisits `margin-top` (10px) because in the Astro source the logout link sits OUTSIDE the strip. Woo has it as the last `
  • ` INSIDE the same `