/** * The customer's account, signed in and signed out. * * On the shop front's tokens (`tokens.css`, a dependency of this file), so the * account measures the same as every other page: the same frame, title, rhythm, * buttons, fields, cards and notices. Scoped under `.pod-account`, which * `AccountModule` puts on the `` of every account page, signed in or not. * The reorder block also appears on the order-received page (a checkout page, * not an account one), so its rules also answer to `.woocommerce-order-received`. * * Most of this surface is WooCommerce's own markup, so a good deal of what * follows targets WooCommerce's classes rather than our `.pod-` ones. That is * deliberate: overriding `myaccount/navigation.php`, `orders.php` and the rest * to rename classes would multiply the vendor templates to re-check on every * upgrade, in exchange for nothing but tidier selectors. * * **Selectors carry `.woocommerce`, and sometimes `#content`,** where * WooCommerce's or Astra's rules for the same element are that deep. That wins * on specificity, not on load order. `!important` appears only where it answers * another `!important` (WooCommerce's small-screen table) and says so. * * The spec, shared with the cart, checkout, shop and product pages: * * The spec is `docs/design-standards.md`; in short: * * frame the frame tokens: container with the gutter, frame-top above, frame-bottom below * title the page title tier (--pod-title-size / 800), 40 to what follows * rhythm 4 label to field, 16 heading to text, 24 between fields and cards * buttons pills: 48 primary, 40 (compact) secondary in rows of content; no capitals * fields 48px, radius 12, --pod-field-border, accent border and 1px ring on focus * cards static: white, 1px line, radius-lg, 24 padding, no shadow */ /* --- 1. The frame ---------------------------------------------------------- */ body.pod-account, .pod-account .site-content { background-color: var( --pod-surface ); color: var( --pod-ink ); } .pod-account .site-content > .ast-container { box-sizing: border-box; max-width: var( --pod-container ); padding-inline: var( --pod-gutter ); } .pod-account #primary { margin-block: 0; padding-block: var( --pod-frame-top ) var( --pod-frame-bottom ); width: 100%; } @media ( max-width: 767px ) { .pod-account #primary { padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm ); } } .pod-account .entry-header { margin: 0 0 var( --pod-break ); padding: 0; } /* * The page title tier, the cart's title exactly (`cart.css`); change them together. `header.entry-header` * because Astra sizes the title as `header.entry-header .entry-title`, inline, * which out-ranked a bare `.pod-account .entry-title` and held it at 30px. */ .pod-account header.entry-header .entry-title { color: var( --pod-ink ); font-size: var( --pod-title-size ); font-weight: 800; letter-spacing: var( --pod-title-tracking ); line-height: 1.08; margin: 0; text-wrap: balance; } /* * Signed out, the card's own heading ("Sign in", "Reset your password") is the * visible one, and a page title of "My account" above a sign-in card is a heading * for an account the visitor has not opened yet. Kept for screen readers, which * still land on the page's `

`. / .pod-account:not( .logged-in ) .entry-header { clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); height: 1px; margin: 0; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } / Links in the account's own prose: the accent, underlined on hover. / .pod-account .woocommerce-MyAccount-content p a:not( .button ), .pod-account .pod-authalt a, .pod-account .woocommerce-privacy-policy-text a { color: var( --pod-accent ); font-weight: 600; text-decoration: none; } .pod-account .woocommerce-MyAccount-content p a:not( .button ):hover, .pod-account .pod-authalt a:hover, .pod-account .woocommerce-privacy-policy-text a:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } / --- 2. Layout: the rail and the content ------------------------------------ / / * A grid only where both halves exist (signed in). The wrapper can also hold a * notices block of its own, and any child that is not one of the two halves * spans the whole row rather than landing in the navigation column, which is * what kept this file on floats until now. / .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) { display: grid; gap: var( --pod-apart ); grid-template-columns: minmax( 0, 1fr ); } .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) > { grid-column: 1 / -1; } .pod-account .woocommerce .woocommerce-MyAccount-navigation, .pod-account .woocommerce .woocommerce-MyAccount-content { float: none; margin: 0; min-width: 0; width: auto; } @media ( min-width: 768px ) { .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) { align-items: start; column-gap: var( --pod-break ); grid-template-columns: 200px minmax( 0, 1fr ); } .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) > .woocommerce-MyAccount-navigation { grid-column: 1; } .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) > .woocommerce-MyAccount-content { grid-column: 2; } } @media ( min-width: 1025px ) { .pod-account .woocommerce:has( > .woocommerce-MyAccount-navigation ) { column-gap: calc( 2 * var( --pod-apart ) ); grid-template-columns: 240px minmax( 0, 1fr ); } /* In view while a long order or form scrolls, as the cart's summary is. / .pod-account .woocommerce-MyAccount-navigation { position: sticky; top: calc( var( --pod-apart ) + var( --wp-admin--admin-bar--height, 0px ) ); } } / --- 3. Navigation ---------------------------------------------------------- / / * A rail on a wide screen and a row of chips on a phone, the same list either * way. The current tab is read off `aria-current`, not WooCommerce's * `.is-active`, although both are there: styling the one a screen reader * announces means the visible state cannot drift from the announced one. * * Astra borders every item when its "modern account view" is off, as inline CSS * on `.woocommerce-MyAccount-navigation-link`; the borders are taken off here. / .pod-account .woocommerce-MyAccount-navigation ul { border: 0; display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link { border: 0; margin: 0; padding: 0; } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a { align-items: center; border: 0; border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: flex; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; min-height: 44px; padding: 0 var( --pod-near ); text-decoration: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover { background: var( --pod-surface-2 ); color: var( --pod-ink ); } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } / Ink on the wash rather than the accent, which is 4.07:1 there. / .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a[aria-current='page'] { background: var( --pod-accent-wash ); color: var( --pod-ink ); font-weight: 700; } / Log out is the one item that is not a place, so it sits apart from them. / .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var( --pod-line ); margin-top: var( --pod-tight ); padding-top: var( --pod-tight ); } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var( --pod-ink-soft ); font-weight: 500; } / * On a phone, the shop's chips: one scrolling row, 40px, the current one filled * in ink. A column of six full-width links pushed the page's content a screen * down before anything the customer came for. * * The row is wider than a phone (about 670px of chips at 390), so it says it * scrolls: both edges fade over the gutter, so a chip running off the right is * visibly cut rather than looking like the row's end. The fade is a mask, which * reads only alpha, so the opaque stop is any opaque token (the ink) and no * colour is painted. The list's end padding is twice the gutter, so scrolled to * its end the last chip ("Sign out") clears the fade entirely. `AccountModule` * scrolls the current chip into view on load. / @media ( max-width: 767px ) { / Edge to edge, so the row scrolls under the gutter; the list's padding puts the first chip back in line with the content. / .pod-account .woocommerce .woocommerce-MyAccount-navigation { margin-inline: calc( -1 var( --pod-gutter ) ); -webkit-mask-image: linear-gradient( to right, transparent, var( --pod-ink ) var( --pod-gutter ), var( --pod-ink ) calc( 100% - 2 * var( --pod-gutter ) ), transparent ); mask-image: linear-gradient( to right, transparent, var( --pod-ink ) var( --pod-gutter ), var( --pod-ink ) calc( 100% - 2 * var( --pod-gutter ) ), transparent ); overflow-x: auto; /* The chips' offset parent, so `AccountModule`'s script measures the current one against this row. / position: relative; scrollbar-width: none; } .pod-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; } .pod-account .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: var( --pod-tight ); padding-inline: var( --pod-gutter ) calc( 2 var( --pod-gutter ) ); width: max-content; } /* * The focus ring sits 2px outside the chip; the list's own block padding * keeps it inside the scrolling box, which would otherwise clip it. / .pod-account .woocommerce-MyAccount-navigation ul { padding-block: var( --pod-hair ); } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a { border: 1px solid var( --pod-line ); font-size: 0.9375rem; min-height: var( --pod-btn-compact-h ); white-space: nowrap; } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a[aria-current='page'] { background: var( --pod-ink ); border-color: var( --pod-ink ); color: var( --pod-on-ink ); } .pod-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border: 0; margin: 0; padding: 0; } } / --- 4. Content: headings and prose ----------------------------------------- / .pod-account .woocommerce-MyAccount-content { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; } .pod-account .woocommerce-MyAccount-content > :first-child, .pod-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + { margin-top: 0; } /* * WooCommerce's section headings ("Order details", "Billing address") as the * section title every page uses: the size of the cart's "Cart totals". Our own * panel and reorder titles are sized with their blocks below. / / * The exclusions sit inside `:where()`, which weighs nothing: as plain `:not()`s * they counted as two more classes and out-ranked every more particular heading * rule below (a card's title, a form's opening heading). / .pod-account .woocommerce-MyAccount-content h2:where( :not( .pod-paneltitle, .pod-reordertitle ) ), .pod-account .woocommerce-MyAccount-content h3 { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: var( --pod-break ) 0 var( --pod-near ); text-wrap: balance; } .pod-account .woocommerce-MyAccount-content > p { margin: 0 0 var( --pod-apart ); } / --- 5. Buttons ------------------------------------------------------------- / / * Every button in the account, from one rule. Secondary by default (the * standard's compact secondary, 40px, because most of them sit in a row of * content: View, Order again, Open, the notice's action), and primary where it * is the one thing a screen is for (below). * * `:is()` takes its argument's weight, so these are three classes and an * element, over WooCommerce's and Astra's `.woocommerce a.button` family and * their hover paint. Repeated for `:hover` and `:focus` so no state falls back * to the theme's filled blue. / .pod-account .woocommerce :is( a, button, input ).button, .pod-account .woocommerce :is( a, button, input ).button:hover, .pod-account .woocommerce :is( a, button, input ).button:focus, .woocommerce-order-received .pod-reorder :is( a, button ).button, .woocommerce-order-received .pod-reorder :is( a, button ).button:hover, .woocommerce-order-received .pod-reorder :is( a, button ).button:focus { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); display: inline-flex; font-size: var( --pod-btn-compact-size ); font-weight: 700; gap: var( --pod-tight ); justify-content: center; letter-spacing: 0; line-height: 1.2; margin: 0; min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-decoration: none; text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); white-space: nowrap; } .pod-account .woocommerce :is( a, button, input ).button:hover, .woocommerce-order-received .pod-reorder :is( a, button ).button:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); } .pod-account .woocommerce :is( a, button, input ).button:focus-visible, .woocommerce-order-received .pod-reorder :is( a, button ).button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-account .woocommerce :is( a, button, input ).button:disabled, .pod-account .woocommerce :is( a, button, input ).button.disabled { cursor: not-allowed; opacity: 0.5; } / * Primary: saving a form, signing in, and ordering a line again from the * order's own screen. The accent fill; forms get the full 48px. * * Not where the button repeats down a list: a dashboard row's "Order again" * and a design card's "Add to cart" are the compact secondary (below and the * shared rule above), so each screen keeps one primary (design standard §1). / .pod-account .woocommerce :is( form button[type='submit'], button.pod-reorderbutton ).button, .pod-account .woocommerce :is( form button[type='submit'], button.pod-reorderbutton ).button:hover, .pod-account .woocommerce :is( form button[type='submit'], button.pod-reorderbutton ).button:focus, .woocommerce-order-received .pod-reorder button.button.pod-reorderbutton, .woocommerce-order-received .pod-reorder button.button.pod-reorderbutton:hover, .woocommerce-order-received .pod-reorder button.button.pod-reorderbutton:focus { background: var( --pod-accent ); border-color: var( --pod-accent ); color: var( --pod-on-ink ); } .pod-account .woocommerce :is( form button[type='submit'], button.pod-reorderbutton ).button:hover, .woocommerce-order-received .pod-reorder button.button.pod-reorderbutton:hover { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); } / "Order again" in a dashboard row: one per order, so secondary. / .pod-account .woocommerce .pod-panelrow button.pod-reorderbutton.button, .pod-account .woocommerce .pod-panelrow button.pod-reorderbutton.button:focus { background: var( --pod-surface ); border-color: var( --pod-field-border ); color: var( --pod-ink ); } .pod-account .woocommerce .pod-panelrow button.pod-reorderbutton.button:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); color: var( --pod-ink ); } .pod-account .woocommerce form button[type='submit'].button { font-size: var( --pod-btn-size ); min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); } / --- 6. Notices ------------------------------------------------------------- / / * A tinted row with a 3px bar in its colour, the shape of the product page's * error. WooCommerce's icon font glyph is dropped: the bar and the words say it. * * `order` is not decoration: "Confirm email address" and "Browse products" are * printed before their own sentence in WooCommerce's markup, so without it the * notice would read "Confirm email address Confirm your email address…". / .pod-account .woocommerce .woocommerce-info, .pod-account .woocommerce .woocommerce-message, .pod-account .woocommerce .woocommerce-error { align-items: center; background: var( --pod-surface-2 ); border: 0; border-left: 3px solid var( --pod-accent ); border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0; color: var( --pod-ink ); display: flex; flex-wrap: wrap; font-size: 0.9375rem; gap: var( --pod-tight ) var( --pod-near ); line-height: 1.5; list-style: none; margin: 0 0 var( --pod-apart ); padding: var( --pod-near ) var( --pod-apart ); } .pod-account .woocommerce .woocommerce-message { background: var( --pod-success-wash ); border-left-color: var( --pod-success ); } .pod-account .woocommerce .woocommerce-error { background: var( --pod-danger-wash ); border-left-color: var( --pod-danger ); display: block; } .pod-account .woocommerce .woocommerce-error li { margin: 0; padding: 0; } .pod-account .woocommerce .woocommerce-error li + li { margin-top: var( --pod-hair ); } .pod-account .woocommerce :is( .woocommerce-info, .woocommerce-message, .woocommerce-error )::before { display: none; } .pod-account .woocommerce :is( .woocommerce-info, .woocommerce-message ) .button { float: none; margin-left: auto; order: 1; } @media ( max-width: 599px ) { .pod-account .woocommerce :is( .woocommerce-info, .woocommerce-message ) .button { margin-left: 0; width: 100%; } } / Signed out, a notice belongs to the card, not to the page. / .pod-account:not( .logged-in ) .woocommerce :is( .woocommerce-info, .woocommerce-message, .woocommerce-error ) { margin-inline: auto; max-width: 28rem; } / --- 7. Status chips --------------------------------------------------------- / / * The chip itself is the shared component (`components.css`, `.pod-status`); * only its placement in the account is here. * * WooCommerce's `` in an order's opening sentence, carrying the same classes. / .pod-account mark.pod-status { margin-inline: 2px; vertical-align: 1px; } .pod-account mark.order-number, .pod-account mark.order-date { background: none; color: var( --pod-ink ); font-weight: 700; } / --- 8. Dashboard ------------------------------------------------------------ / .pod-account .pod-accountgreeting { color: var( --pod-ink-soft ); font-size: clamp( 1.0625rem, 1.5vw, 1.1875rem ); line-height: 1.55; margin: 0 0 var( --pod-apart ); } .pod-account .pod-accountgreeting strong { color: var( --pod-ink ); } .pod-account .pod-panels { align-items: start; display: grid; gap: var( --pod-apart ); } @media ( min-width: 1025px ) { .pod-account .pod-panels { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } / Orders carry the most, and a row of them reads badly in half a column. / .pod-account .pod-panels > .pod-panel:first-child { grid-column: 1 / -1; } } .pod-account .pod-panel { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); padding: var( --pod-apart ); } .pod-account .woocommerce-MyAccount-content h2.pod-paneltitle { align-items: baseline; color: var( --pod-ink ); display: flex; flex-wrap: wrap; font-size: var( --pod-h3-size ); font-weight: 800; gap: var( --pod-tight ) var( --pod-near ); justify-content: space-between; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-near ); } / * Two classes, and the second one is load-bearing: Astra sizes * `.entry-content :where(h2) a` at 2.625rem, which reads as one class and one * element and beat a single class of ours. / .pod-account .pod-paneltitle .pod-panelall { color: var( --pod-accent ); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-decoration: none; white-space: nowrap; } .pod-account .pod-paneltitle .pod-panelall:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-account .pod-panellist { list-style: none; margin: 0; padding: 0; } / * An order per row: number, then date and total, then its status, then the * action at the far edge. / .pod-account .pod-panelrow { align-items: center; display: flex; flex-wrap: wrap; gap: var( --pod-tight ) var( --pod-near ); margin: 0; min-height: 64px; padding: 0.75rem 0; } .pod-account .pod-panelrow + .pod-panelrow { border-top: 1px solid var( --pod-line ); } .pod-account .pod-panelprimary { font-weight: 700; } .pod-account .pod-panelprimary a { color: var( --pod-ink ); text-decoration: none; } .pod-account .pod-panelprimary a:hover { text-decoration: underline; text-underline-offset: 0.25em; } .pod-account .pod-panelmeta { color: var( --pod-ink-soft ); font-size: 0.875rem; font-variant-numeric: tabular-nums; } / Whichever action the row ended up with, at the far edge. / .pod-account .pod-panelrow .pod-panelaction, .pod-account .pod-panelrow .pod-reorder { margin-left: auto; } / "View order" is a link, drawn as the compact secondary button. / .pod-account .pod-panelrow a.pod-panelaction { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); box-sizing: border-box; color: var( --pod-ink ); display: inline-flex; font-size: var( --pod-btn-compact-size ); font-weight: 700; min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-decoration: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); white-space: nowrap; } .pod-account .pod-panelrow a.pod-panelaction:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); } .pod-account .pod-panelrow a.pod-panelaction:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } / * The reorder block is chrome-less inside a row: the panel is already the card, * and its own heading is for the order screen, where the block stands alone. * Hidden from sight but not from a screen reader. / .pod-account .pod-panelrow .pod-reorder { border: 0; margin-top: 0; padding-top: 0; } .pod-account .pod-panelrow .pod-reordertitle { clip: rect( 0 0 0 0 ); clip-path: inset( 50% ); height: 1px; margin: 0; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .pod-account .pod-panelrow .pod-reorderlines { margin: 0; } .pod-account .pod-panelrow .pod-reorderline { border: 0; min-height: 0; padding: 0; } .pod-account .pod-panelrow .pod-reordername { color: var( --pod-ink-soft ); font-size: 0.875rem; font-weight: 600; } @media ( max-width: 599px ) { .pod-account .pod-panelrow .pod-panelaction, .pod-account .pod-panelrow .pod-reorder { margin-left: 0; width: 100%; } } .pod-account .pod-paneldesigns { display: grid; gap: var( --pod-near ); grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); list-style: none; margin: 0; padding: 0; } .pod-account .pod-paneldesign { margin: 0; } .pod-account .pod-paneldesign a { color: var( --pod-ink ); display: block; text-decoration: none; } / Two classes, over WooCommerce's `.woocommerce img { height: auto }`. / .pod-account .pod-paneldesign .pod-panelthumb { aspect-ratio: 1; background: var( --pod-surface-2 ); border: 0; border-radius: var( --pod-radius ); box-sizing: border-box; display: block; height: auto; object-fit: contain; padding: var( --pod-tight ); width: 100%; } .pod-account .pod-paneldesign .pod-panelthumb--none { align-items: center; color: var( --pod-ink-soft ); display: flex; font-size: 0.8125rem; justify-content: center; } .pod-account .pod-paneldesign-name { display: block; font-size: 0.875rem; font-weight: 600; margin-top: var( --pod-tight ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Over WooCommerce's `.woocommerce .woocommerce-MyAccount-content address`, which boxes it. / .pod-account .woocommerce .pod-panel address.pod-paneladdress { border: 0; font-style: normal; line-height: 1.6; padding: 0; } .pod-account .pod-panelempty { color: var( --pod-ink-soft ); margin: 0; } / --- 9. The Orders tab --------------------------------------------------------- / / * A list, the cart's shape: no outer box, rows divided by a line, a quiet * header. WooCommerce borders and stripes `table.shop_table`; the selectors * carry `.woocommerce table.shop_table` to out-rank that. / .pod-account .woocommerce table.shop_table.woocommerce-orders-table { border: 0; border-collapse: collapse; border-radius: 0; margin: 0; width: 100%; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table th, .pod-account .woocommerce table.shop_table.woocommerce-orders-table td { background: none; border: 0; border-top: 1px solid var( --pod-line ); font-size: 0.9375rem; padding: var( --pod-near ) 0.75rem; text-align: left; vertical-align: middle; } / Astra tints the header row of every shop table. / .pod-account .woocommerce table.shop_table :is( thead, tfoot ) { background: none; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table thead th { border-top: 0; color: var( --pod-ink-soft ); font-size: 0.8125rem; font-weight: 600; padding-block: 0 0.75rem; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tr > :first-child { padding-left: 0; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tr > :last-child { padding-right: 0; text-align: right; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr:last-child > { border-bottom: 1px solid var( --pod-line ); } .pod-account .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { color: var( --pod-ink ); font-weight: 700; text-decoration: none; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; text-underline-offset: 0.25em; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total { color: var( --pod-ink-soft ); font-variant-numeric: tabular-nums; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total .amount { color: var( --pod-ink ); font-weight: 700; } /* More than one action (View, Pay, Cancel) sit side by side. / .pod-account .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: var( --pod-tight ); } / * On a phone, each order a card, each cell labelled from the `data-title` * WooCommerce already puts on it. * * `!important` answers WooCommerce's small-screen sheet, which right-aligns * every cell of a responsive table with it; the label floats left so a cell * holding two pieces ("$235.50" and " for 1 item") still reads as one phrase. / @media ( max-width: 767px ) { .pod-account .woocommerce table.shop_table.woocommerce-orders-table, .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody, .pod-account .woocommerce table.shop_table.woocommerce-orders-table tr, .pod-account .woocommerce table.shop_table.woocommerce-orders-table th, .pod-account .woocommerce table.shop_table.woocommerce-orders-table td { display: block; width: auto; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table thead { display: none; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr { border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); margin-bottom: var( --pod-near ); padding: var( --pod-tight ) var( --pod-near ); } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr > , .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr:last-child > * { border: 0; display: flow-root; padding: var( --pod-tight ) 0; text-align: right !important; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr > * + * { border-top: 1px solid var( --pod-line ); } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr > ::before { color: var( --pod-ink-soft ); content: attr( data-title ); float: left; font-size: 0.875rem; font-weight: 600; padding-right: var( --pod-near ); text-align: left; } / The actions cell has no label worth reading; its buttons say what they do. / .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-actions::before { content: none; } .pod-account .woocommerce table.shop_table.woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-actions .button { width: 100%; } } / Previous and Next under the list. / .pod-account .woocommerce .woocommerce-pagination { display: flex; gap: var( --pod-tight ); justify-content: space-between; margin-top: var( --pod-apart ); } / --- 10. A single order -------------------------------------------------------- / / The opening sentence ("Order #7939 was placed on … and is currently Shipped."). / .pod-account .woocommerce-MyAccount-content > p:has( mark.order-status ) { color: var( --pod-ink-soft ); font-size: 1.0625rem; line-height: 1.7; } / * The items and totals, the cart's list and summary in one table: lines divided * by a hairline, the product in ink with its details beneath, then the totals * as label and figure, the total itself heavier above a rule. The same table on * WooCommerce's own order-received page (`pod-order-page`, `StorefrontModule`). / :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details, .woocommerce-order-received .woocommerce table.shop_table.woocommerce-table--order-details { border: 0; border-collapse: collapse; border-radius: 0; margin: 0; width: 100%; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details th, :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details td { background: none; border: 0; font-size: 0.9375rem; padding: 0.75rem 0; text-align: left; vertical-align: top; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details thead th { color: var( --pod-ink-soft ); font-size: 0.8125rem; font-weight: 600; padding-top: 0; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tr > :last-child { text-align: right; white-space: nowrap; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tbody tr > { border-top: 1px solid var( --pod-line ); padding-block: var( --pod-near ); } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name > a { color: var( --pod-ink ); font-size: 1.0625rem; font-weight: 700; text-decoration: none; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name > a:hover { text-decoration: underline; text-underline-offset: 0.25em; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details .product-quantity { color: var( --pod-ink-soft ); font-weight: 600; margin-left: var( --pod-hair ); } /* The line's details, as the cart lists them: label and value in two columns. / :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details ul.wc-item-meta { color: var( --pod-ink-soft ); display: grid; font-size: 0.875rem; gap: 2px var( --pod-tight ); grid-template-columns: max-content minmax( 0, 1fr ); line-height: 1.5; list-style: none; margin: var( --pod-tight ) 0 0; padding: 0; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details ul.wc-item-meta li { display: contents; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details ul.wc-item-meta .wc-item-meta-label { float: none; font-weight: 400; margin: 0; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details ul.wc-item-meta p { color: var( --pod-ink ); display: block; margin: 0; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tfoot th { color: var( --pod-ink-soft ); font-weight: 400; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tfoot td { color: var( --pod-ink ); font-weight: 600; } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tfoot tr:first-child > { border-top: 1px solid var( --pod-line ); padding-top: var( --pod-near ); } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tfoot tr > * { padding-block: var( --pod-hair ); } :is( .pod-account, .pod-order-page ) .woocommerce table.shop_table.woocommerce-table--order-details tfoot .shipped_via { color: var( --pod-ink-soft ); font-weight: 400; } /* * A line's product photo and, beside it, the customer's design (`OrderLineMedia`): * two 96px squares side by side (80 on a small tablet, 72 on a phone) ahead of * the name, quantity and details. Side by side rather than stacked, so the two * pictures of the one thing read as a pair and the line is no taller than its * text. * * WooCommerce prints the name, the quantity, the pictures and the details as * separate children of one cell, so the cell is the grid: pictures in the first * column down every row, the name then the quantity on the first row, anything * else (the details, and whatever another plugin adds) across the rest. Only a * cell that has pictures is changed; every other line is as it was. / :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) { align-content: start; / The quantity sits a word-space after the name; the pictures' column keeps its own 24 (margin below). / column-gap: var( --pod-tight ); display: grid; grid-template-columns: max-content minmax( 0, max-content ) minmax( 0, 1fr ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > { grid-column: 2 / -1; } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > a:first-child { grid-column: 2; grid-row: 1; } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > .product-quantity { align-self: baseline; grid-column: 3; grid-row: 1; justify-self: start; } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name > .pod-line-media { align-content: start; display: grid; gap: var( --pod-tight ); grid-auto-flow: column; grid-auto-columns: 96px; grid-column: 1; grid-row: 1 / span 4; margin-right: calc( var( --pod-apart ) - var( --pod-tight ) ); } /* The photo: square, cropped to fill, on the tint (the cart's thumbnail). / :is( .pod-account, .woocommerce-order-received ) .pod-line-mediaphoto { display: block; } :is( .pod-account, .woocommerce-order-received ) .woocommerce .pod-line-mediaphoto img { aspect-ratio: 1; background: var( --pod-surface-2 ); border-radius: var( --pod-radius ); display: block; height: auto; margin: 0; object-fit: cover; width: 100%; } / * The design: whole (`contain`), on white in a hairline frame, the cart's * design square. A button, because pressing it opens it larger; drawn without * any of the theme's button paint, which it would otherwise take from Astra's * bare `button` and `button:hover` rules. / :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign, :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign:hover, :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign:focus { aspect-ratio: 1; background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; cursor: zoom-in; display: block; margin: 0; overflow: hidden; padding: 0; transition: border-color var( --pod-fast ) var( --pod-ease ); width: 100%; } :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign:hover { border-color: var( --pod-ink ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign img { display: block; height: 100%; margin: 0; object-fit: contain; width: 100%; } @media ( max-width: 767px ) { :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) { grid-template-columns: max-content minmax( 0, max-content ) minmax( 0, 1fr ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name > .pod-line-media { grid-auto-columns: 80px; margin-right: calc( var( --pod-near ) - var( --pod-tight ) ); } } / * On a phone the pair moves above the name. The order table keeps its price * column (the cart moves its price under the text; this table does not need * to), and beside the pictures the details had about 110px: "Natural Oak, * finished 26.5 × 38.5" broke into a column of fragments. Above the name, the * text has the cell's width. / @media ( max-width: 599px ) { :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) { grid-template-columns: minmax( 0, max-content ) minmax( 0, 1fr ); row-gap: var( --pod-tight ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > { grid-column: 1 / -1; } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name > .pod-line-media { grid-column: 1 / -1; grid-row: 1; grid-auto-columns: 72px; margin: 0 0 var( --pod-hair ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > a:first-child { grid-column: 1; grid-row: 2; } :is( .pod-account, .woocommerce-order-received ) .woocommerce table.shop_table.woocommerce-table--order-details td.product-name:has( > .pod-line-media ) > .product-quantity { grid-column: 2; grid-row: 2; } } /* * The design, larger: the page's one dialog. The landing page's large corners * and lifted shadow, the picture on the tint and never cropped. / :is( .pod-account, .woocommerce-order-received ) .pod-design-view { border: 0; border-radius: var( --pod-radius-xl ); box-shadow: var( --pod-shadow-lift ); box-sizing: border-box; color: var( --pod-ink ); max-height: 92vh; max-width: min( 44rem, calc( 100vw - 2 var( --pod-gutter ) ) ); padding: 0; width: 100%; } :is( .pod-account, .woocommerce-order-received ) .pod-design-view[open] { display: flex; flex-direction: column; overflow: hidden; } :is( .pod-account, .woocommerce-order-received ) .pod-design-view::backdrop { background: var( --pod-scrim ); } :is( .pod-account, .woocommerce-order-received ) .pod-design-viewhead { align-items: center; border-bottom: 1px solid var( --pod-line ); display: flex; flex: none; gap: var( --pod-near ); justify-content: space-between; padding: var( --pod-near ) var( --pod-apart ); } :is( .pod-account, .woocommerce-order-received ) .woocommerce .pod-design-view .pod-design-viewtitle, :is( .pod-account, .woocommerce-order-received ) .pod-design-view .pod-design-viewtitle { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0; text-wrap: balance; } :is( .pod-account, .woocommerce-order-received ) .pod-design-view button.pod-design-viewclose, :is( .pod-account, .woocommerce-order-received ) .pod-design-view button.pod-design-viewclose:hover, :is( .pod-account, .woocommerce-order-received ) .pod-design-view button.pod-design-viewclose:focus { align-items: center; background: transparent; border: 0; border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: inline-flex; flex: none; font-size: 1.5rem; height: var( --pod-btn-compact-h ); justify-content: center; line-height: 1; padding: 0; width: var( --pod-btn-compact-h ); } :is( .pod-account, .woocommerce-order-received ) .pod-design-view button.pod-design-viewclose:hover { background: var( --pod-surface-2 ); } :is( .pod-account, .woocommerce-order-received ) .pod-design-view button.pod-design-viewclose:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } :is( .pod-account, .woocommerce-order-received ) .pod-design-viewbody { background: var( --pod-surface-2 ); display: flex; flex: 1 1 auto; justify-content: center; min-height: 0; padding: var( --pod-apart ); } :is( .pod-account, .woocommerce-order-received ) .pod-design-view .pod-design-viewimage { display: block; height: auto; max-height: 75vh; max-width: 100%; object-fit: contain; width: auto; } /* Billing and delivery addresses, as two cards. / .pod-account .woocommerce-customer-details { margin-top: var( --pod-break ); } / * Two columns, stacked on a phone. Explicit rather than `auto-fit`, and the * clearfix pseudo-elements WooCommerce hangs on `.col2-set` removed, because in a * grid each of them is a cell: the first one took a column and pushed both cards * right. / .pod-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses { display: grid; gap: var( --pod-apart ); grid-template-columns: minmax( 0, 1fr ); } .pod-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::before, .pod-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::after { display: none; } @media ( min-width: 600px ) { .pod-account .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } .pod-account .woocommerce .woocommerce-customer-details .woocommerce-column { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); float: none; margin: 0; padding: var( --pod-apart ); width: auto; } .pod-account .woocommerce-MyAccount-content .woocommerce-customer-details h2.woocommerce-columntitle, .pod-account .woocommerce-MyAccount-content .woocommerce-customer-details > h2 { background: none; border: 0; margin-top: 0; padding: 0; } .pod-account .woocommerce .woocommerce-customer-details address { border: 0; color: var( --pod-ink ); font-style: normal; line-height: 1.6; padding: 0; } .pod-account .woocommerce .woocommerce-customer-details address p { color: var( --pod-ink-soft ); margin: var( --pod-tight ) 0 0; } .pod-account .woocommerce .woocommerce-customer-details address p::before { color: var( --pod-ink-soft ); } / Notes the shop has added to the order. / .pod-account .woocommerce ol.woocommerce-OrderUpdates { list-style: none; margin: 0; padding: 0; } .pod-account .woocommerce ol.woocommerce-OrderUpdates li.comment { background: var( --pod-surface-2 ); border-radius: var( --pod-radius ); margin: 0 0 var( --pod-tight ); padding: var( --pod-near ) var( --pod-apart ); } .pod-account .woocommerce .woocommerce-OrderUpdate-meta { color: var( --pod-ink-soft ); font-size: 0.8125rem; margin: 0 0 var( --pod-hair ); } / --- 11. Reorder ("These again") ------------------------------------------------- / :is( .pod-account, .woocommerce-order-received ) .pod-reorder { border-top: 1px solid var( --pod-line ); margin-top: var( --pod-break ); padding-top: var( --pod-apart ); } :is( .pod-account, .woocommerce-order-received ) .pod-reorder .pod-reordertitle { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-tight ); } :is( .pod-account, .woocommerce-order-received ) .pod-reorderlines { list-style: none; margin: 0; padding: 0; } / * Name on the left, its actions gathered on the right. `margin-right: auto` on * the name rather than `space-between` on the row, which pushes two buttons to * opposite ends the moment a line has a second. / :is( .pod-account, .woocommerce-order-received ) .pod-reorderline { align-items: center; display: flex; flex-wrap: wrap; gap: var( --pod-tight ); margin: 0; min-height: 64px; padding: 0.75rem 0; } :is( .pod-account, .woocommerce-order-received ) .pod-reorderline + .pod-reorderline { border-top: 1px solid var( --pod-line ); } :is( .pod-account, .woocommerce-order-received ) .pod-reordername { font-weight: 700; margin-right: auto; } / * The room preview's trigger in these rows: the compact secondary button. `visualizer.css` draws it full width for the product page; here it * sits beside Order again. / :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-vizopen, :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-vizopen:hover, :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-vizopen:focus { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); display: inline-flex; font-size: var( --pod-btn-compact-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); white-space: nowrap; width: auto; } :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-vizopen:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); } :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-vizopen:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderresult, .pod-designsresult ) { color: var( --pod-ink-soft ); font-size: 0.875rem; margin: var( --pod-tight ) 0 0; } :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderresult, .pod-designsresult ).is-error { color: var( --pod-danger ); } @media ( max-width: 599px ) { :is( .pod-account, .woocommerce-order-received ) .pod-reordername { flex-basis: 100%; } } / --- 12. Addresses ------------------------------------------------------------- / .pod-account .woocommerce .woocommerce-Addresses { display: grid; gap: var( --pod-apart ); grid-template-columns: minmax( 0, 1fr ); } @media ( min-width: 600px ) { .pod-account .woocommerce .woocommerce-Addresses { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } .pod-account .woocommerce .woocommerce-Addresses::before, .pod-account .woocommerce .woocommerce-Addresses::after { display: none; } .pod-account .woocommerce .woocommerce-Addresses .woocommerce-Address { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); float: none; margin: 0; padding: var( --pod-apart ); width: auto; } / * Title left, Edit right, on every card. The theme reverses the second card's * header, which put "Shipping address" on the right with its Edit link wrapped * under it on the left. / .pod-account .woocommerce .woocommerce-Address .woocommerce-Address-title { align-items: baseline; background: none; border: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: var( --pod-tight ) var( --pod-near ); justify-content: space-between; margin: 0 0 var( --pod-near ); padding: 0; } .pod-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; } / Its clearfix pseudo-elements, which as flex items pushed the title in by the gap. / .pod-account .woocommerce .woocommerce-Address .woocommerce-Address-title::before, .pod-account .woocommerce .woocommerce-Address .woocommerce-Address-title::after { display: none; } .pod-account .woocommerce .woocommerce-Address-title a.edit { color: var( --pod-accent ); float: none; padding: 0; font-size: 0.875rem; font-weight: 600; text-decoration: none; } .pod-account .woocommerce .woocommerce-Address-title a.edit:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-account .woocommerce .woocommerce-Address address { border: 0; color: var( --pod-ink ); font-style: normal; line-height: 1.6; padding: 0; } / --- 13. Forms: addresses and account details ---------------------------------- / / * The checkout's fields, because they are the checkout's fields: the same * address, entered again. A column no wider than a line of it reads. / .pod-account .woocommerce-MyAccount-content form:is( .woocommerce-EditAccountForm, [novalidate] ) { max-width: 40rem; } .pod-account .woocommerce form .form-row { margin: 0 0 var( --pod-apart ); padding: 0; } .pod-account .woocommerce form .form-row label, .pod-account .woocommerce form fieldset legend + p label { color: var( --pod-ink ); display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0 0 var( --pod-hair ); } .pod-account .woocommerce form .form-row .required { color: var( --pod-ink-soft ); text-decoration: none; } .pod-account .woocommerce form .form-row :is( input.input-text, textarea, select ), .pod-account .woocommerce form .form-row .select2-container .select2-selection--single { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); height: var( --pod-btn-h ); line-height: normal; padding: 0 var( --pod-near ); width: 100%; / Theme fields ease `all`; focus appears at once (standard §6). / transition: none; } .pod-account .woocommerce form .form-row textarea { height: auto; min-height: 7rem; padding-block: 0.75rem; } / * `#content` because Astra repaints the account's fields on focus through * seven-class chains of its own (`.woocommerce .woocommerce-MyAccount-content * .woocommerce-EditAccountForm .woocommerce-form-row .woocommerce-Input.input-text:focus` * and the address form's equivalent), which set the border back to its * own colour; the id is what out-ranks them, as the cart's rules do. / .pod-account #content .woocommerce form .form-row :is( input.input-text, textarea, select ):focus, .pod-account #content .woocommerce form .form-row .select2-container--open .select2-selection--single, .pod-account #content .woocommerce form .form-row .select2-container--focus .select2-selection--single { border-color: var( --pod-accent ); border-style: solid; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } / The country and state pickers: WooCommerce's select2, lined up with the fields. / .pod-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selectionrendered { color: var( --pod-ink ); font-size: var( --pod-field-size ); line-height: calc( var( --pod-btn-h ) - 2px ); padding: 0; } .pod-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selectionarrow { height: calc( var( --pod-btn-h ) - 2px ); right: 12px; } / An invalid field says so in the danger colour, not WooCommerce's own red. / .pod-account .woocommerce form .form-row.woocommerce-invalid :is( input.input-text, select ), .pod-account .woocommerce form .form-row.woocommerce-invalid .select2-selection--single { border-color: var( --pod-danger ); } .pod-account #content .woocommerce form .form-row.woocommerce-invalid :is( input.input-text, select ):focus { border-color: var( --pod-danger ); box-shadow: 0 0 0 1px var( --pod-danger ); } .pod-account .woocommerce form .form-row.woocommerce-invalid label { color: var( --pod-danger ); } / First and last name side by side, anything else full width. / @media ( min-width: 600px ) { .pod-account .woocommerce :is( form .woocommerce-address-fieldsfield-wrapper, form.woocommerce-EditAccountForm ) { column-gap: var( --pod-near ); display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .pod-account .woocommerce :is( form .woocommerce-address-fieldsfield-wrapper, form.woocommerce-EditAccountForm ) > { grid-column: 1 / -1; } .pod-account .woocommerce :is( form .woocommerce-address-fieldsfield-wrapper, form.woocommerce-EditAccountForm ) > .form-row-first { grid-column: 1; } .pod-account .woocommerce :is( form .woocommerce-address-fields__field-wrapper, form.woocommerce-EditAccountForm ) > .form-row-last { grid-column: 2; } } .pod-account .woocommerce form :is( .form-row-first, .form-row-last ) { float: none; width: auto; } .pod-account .woocommerce form .clear { display: none; } /* Helper text under a field ("This will be how your name is displayed…"). / .pod-account .woocommerce form .form-row :is( em, span#account_display_name_description ) { color: var( --pod-ink-soft ); display: block; font-size: 0.8125rem; font-style: normal; line-height: 1.5; margin-top: var( --pod-hair ); } / "Password change", a section of the form with a rule above it. / .pod-account .woocommerce form fieldset { border: 0; border-top: 1px solid var( --pod-line ); margin: var( --pod-tight ) 0 var( --pod-apart ); min-width: 0; padding: var( --pod-apart ) 0 0; } / * Floated, which is the one way to make a `` an ordinary block inside * its fieldset: otherwise it sits on the fieldset's top border and the rule runs * through the middle of the heading. / .pod-account .woocommerce form fieldset legend { border: 0; float: left; width: 100%; color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-near ); padding: 0 var( --pod-tight ) 0 0; } .pod-account .woocommerce form fieldset legend + { clear: both; } /* * WooCommerce's show-password button inside the field, centred in the 48px it * now is and clear of the text. / .pod-account .woocommerce form .password-input { display: block; position: relative; } .pod-account .woocommerce form .password-input input.input-text { padding-right: 3rem; } / * Astra places it with `top: 50%` and the separate `translate` property at * -50%, which with a fixed top of our own lifted it half out of the field. / .pod-account .woocommerce form .show-password-input { align-items: center; background: none; border: 0; color: var( --pod-ink-soft ); display: flex; height: var( --pod-btn-compact-h ); justify-content: center; margin: 0; padding: 0; right: var( --pod-hair ); top: var( --pod-hair ); transform: none; translate: none; width: var( --pod-btn-compact-h ); } / * The ring inside its edge, not outside: the button sits 4px inside the field, * and a ring 2px outside it would run over the field's own border. / .pod-account .woocommerce form .show-password-input:focus-visible { border-radius: var( --pod-radius-sm ); outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: calc( -1 var( --pod-focus-offset ) ); } /* The form's own heading ("Billing address") on the edit screen. / .pod-account .woocommerce-MyAccount-content form > h2:first-child, .pod-account .woocommerce-MyAccount-content form > h3:first-child { margin-top: 0; } .pod-account .woocommerce form > p:last-of-type:has( button[type='submit'] ) { margin: 0; } @media ( max-width: 599px ) { .pod-account .woocommerce form button[type='submit'].button { width: 100%; } } / --- 14. My Designs ------------------------------------------------------------- / / The shop's grid: a card 15rem at the least, as many across as fit. / .pod-account .pod-designs { display: grid; gap: var( --pod-apart ); grid-template-columns: repeat( auto-fill, minmax( min( 100%, 15rem ), 1fr ) ); list-style: none; margin: 0; padding: 0; } .pod-account .pod-designsitem { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); box-shadow: var( --pod-shadow-sm ); display: flex; flex-direction: column; gap: var( --pod-near ); margin: 0; overflow: hidden; padding: 0 0 var( --pod-near ); } / * The design, whole, on the tint: artwork rather than a photograph, so shown * entire (`contain`) with room round it, never cropped. Square, so one design's * proportions do not decide the height of the row. Two classes, over * WooCommerce's `.woocommerce img { height: auto }`. / .pod-account .pod-designsitem .pod-designsthumb { aspect-ratio: 1; background: var( --pod-surface-2 ); border: 0; border-radius: 0; box-sizing: border-box; display: block; height: auto; object-fit: contain; padding: var( --pod-apart ); width: 100%; } .pod-account .pod-designsitem .pod-designsthumb--none { align-items: center; color: var( --pod-ink-soft ); display: flex; font-size: 0.875rem; justify-content: center; } .pod-account .pod-designsdetail, .pod-account .pod-designsactions, .pod-account .pod-designsnote { padding-inline: var( --pod-near ); } .pod-account .pod-designsdetail { display: flex; flex-direction: column; gap: 2px; } .pod-account .pod-designsname { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; } .pod-account .pod-designssaved { color: var( --pod-ink-soft ); font-size: 0.875rem; } / * One action per row, the card's width: Add to cart, Open, the room preview, * then Delete, quiet, at the end. Two to a row was tried, and at the grid's * narrowest card "See it on your wall" did not fit half of it. / .pod-account .pod-designsactions { display: grid; gap: var( --pod-tight ); grid-template-columns: minmax( 0, 1fr ); margin-top: auto; } .pod-account .pod-designsactions > { width: 100%; } /* * Delete: the standard's destructive button, the secondary shape in the danger * colour, because it is not what anybody came to the card to do. Its * confirmation (set by `my-designs.js` as `data-state="confirm"`) fills it, so * the second press is unmistakably the one that deletes. / .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete, .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete:hover, .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete:focus { background: var( --pod-surface ); border-color: var( --pod-field-border ); color: var( --pod-danger ); } .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete:hover { background: var( --pod-danger-wash ); border-color: var( --pod-danger ); } .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete[data-state='confirm'], .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete[data-state='confirm']:hover, .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete[data-state='confirm']:focus { background: var( --pod-danger ); border-color: var( --pod-danger ); color: var( --pod-on-ink ); } / * Its focus ring, stated here at this rule's own weight: the `:focus` rules * above out-rank the shared ring (`… .button:focus-visible`), and the theme's * `button:focus` outline reset had left it with none. / .pod-account .woocommerce .pod-designsactions button.button.pod-designsdelete:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } / Why this card has Open but not Add to cart. / .pod-account .pod-designsnote { color: var( --pod-ink-soft ); font-size: 0.8125rem; line-height: 1.5; margin: 0; } .pod-account .pod-designsempty { background: var( --pod-surface-2 ); border-radius: var( --pod-radius-lg ); color: var( --pod-ink-soft ); margin: 0; padding: var( --pod-break ) var( --pod-apart ); text-align: center; } / --- 15. Signing in, creating an account, and the password screens -------------- / / * One centred card for all five screens, so signing in reads as one place: sign * in, create an account, ask for a reset link, "check your email", choose a new * password. / .pod-account .pod-auth { display: flex; justify-content: center; padding: 0; } .pod-account .pod-authcard { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); box-shadow: var( --pod-shadow-sm ); box-sizing: border-box; padding: var( --pod-break ); width: min( 28rem, 100% ); } @media ( max-width: 599px ) { .pod-account .pod-authcard { padding: var( --pod-apart ); } } .pod-account .woocommerce .pod-authtitle { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-tight ); text-wrap: balance; } .pod-account .pod-auth__lede { color: var( --pod-ink-soft ); font-size: 0.9375rem; line-height: 1.55; margin: 0 0 var( --pod-apart ); } / * Astra borders and pads `form.login` and `form.register` as inline CSS in the * head (`body .woocommerce form.login`, two classes and two elements), which * drew a second box inside the card. The reset forms get the same treatment. / body .woocommerce .pod-auth :is( form.login, form.register, form.lost_reset_password ), body .woocommerce-page .pod-auth :is( form.login, form.register, form.lost_reset_password ) { border: 0; border-radius: 0; margin: 0; padding: 0; } / The card's fields: full width, stacked, the same fields as everywhere else. / .pod-account .woocommerce .pod-auth form .form-row { display: block; float: none; margin: 0 0 var( --pod-near ); width: auto; } .pod-account .woocommerce .pod-auth form .form-row :is( input.input-text, input[type='text'], input[type='email'], input[type='password'] ) { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); height: var( --pod-btn-h ); padding: 0 var( --pod-near ); width: 100%; / Theme fields ease `all`; focus appears at once (standard §6). / transition: none; } .pod-account .woocommerce .pod-auth form .form-row :is( input.input-text, input[type='text'], input[type='email'], input[type='password'] ):focus { border-color: var( --pod-accent ); border-style: solid; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } / Remember me and the way back in, on one line, both secondary. / .pod-account .pod-authrow { align-items: center; display: flex; flex-wrap: wrap; gap: var( --pod-tight ) var( --pod-near ); justify-content: space-between; margin: 0 0 var( --pod-apart ); } .pod-account .pod-authrow .woocommerce-formlabel-for-checkbox { align-items: center; color: var( --pod-ink ); display: flex; font-size: 0.9375rem; font-weight: 500; gap: var( --pod-tight ); margin: 0; min-height: 44px; } .pod-account .pod-authrow .woocommerce-forminput-checkbox { accent-color: var( --pod-accent ); height: 20px; margin: 0; width: 20px; } .pod-account .pod-authquiet { color: var( --pod-accent ); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .pod-account .pod-authquiet:hover { color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-account .pod-authactions { margin: 0; } / The one thing on the screen anybody came to press: the primary pill, full width. / .pod-account .woocommerce .pod-auth :is( button, a ).button.pod-authsubmit { display: flex; width: 100%; } .pod-account .pod-authnote, .pod-account .pod-auth .woocommerce-privacy-policy-text { color: var( --pod-ink-soft ); font-size: 0.8125rem; line-height: 1.5; } .pod-account .pod-auth .woocommerce-privacy-policy-text p { margin: 0 0 var( --pod-near ); } / The route to the other screen: a door under a rule, not a second button. / .pod-account .pod-authalt { border-top: 1px solid var( --pod-line ); color: var( --pod-ink-soft ); font-size: 0.9375rem; margin: var( --pod-apart ) 0 0; padding-top: var( --pod-apart ); text-align: center; } / --- 16. Motion ------------------------------------------------------------------ / @media ( prefers-reduced-motion: reduce ) { .pod-account .woocommerce :is( a, button, input ).button, .woocommerce-order-received .pod-reorder :is( a, button ).button, .pod-account .woocommerce-MyAccount-navigation a, .pod-account .pod-panelrow a.pod-panelaction, :is( .pod-account, .woocommerce-order-received ) .woocommerce button.pod-line-mediadesign, :is( .pod-account, .woocommerce-order-received ) :is( .pod-reorderline, .pod-designsactions ) button.pod-viz__open, .pod-account .woocommerce form .form-row :is( input.input-text, textarea, select ) { transition: none; } } / * Sentence case everywhere in the account (`docs/content-style.md`). The * buttons above already say so; this covers what the theme or WooCommerce may * uppercase that no rule here restyles: the tab menu, table headings, the * notices' buttons, and Lumise's "Your designs" block on a completed order. */ .pod-account .woocommerce :is( button, .button, input[type='submit'], th, legend, label ), .pod-account .woocommerce-MyAccount-navigation a, .pod-account .woocommerce .lumise-view-design { text-transform: none; }