/** * The cart page, in the shop front's system. * * WooCommerce's classic cart, restyled and not rebuilt (`CartPage`). Its table * becomes a list of item rows with CSS grid, so the quantity fields, "Update * cart", the coupon form and the shipping calculator are untouched underneath * and keep working exactly as WooCommerce ships them. * * Scoped under `.pod-cart`, which `CartPage` puts on the cart's `` only. * Every size is a token from `tokens.css`, so the spacing is the landing * page's and the shop's, not a third system. * * Selectors carry `.woocommerce` where WooCommerce's or Astra's own rules are * three classes deep. That wins on specificity and load order, with no * `!important`. * * title * 40 * items (list) | summary (card, stays in view) * coupon · update | */ /* --- 1. The frame ---------------------------------------------------------- */ /* The shop's frame: white, the landing page's content column, 56 under the header. */ body.pod-cart, .pod-cart .site-content { background-color: var( --pod-surface ); } .pod-cart .site-content > .ast-container { box-sizing: border-box; max-width: var( --pod-container ); padding-inline: var( --pod-gutter ); } .pod-cart #primary { margin-block: 0; padding-block: var( --pod-frame-top ) var( --pod-frame-bottom ); width: 100%; } @media ( max-width: 767px ) { .pod-cart #primary { padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm ); } } .pod-cart .entry-header { margin: 0 0 var( --pod-break ); padding: 0; } /* * The page title tier (docs/design-standards.md §3). * * `header.entry-header` because Astra sizes the title as * `header.entry-header .entry-title` (1.875rem), inline, which out-ranked a bare * `.pod-cart .entry-title` and held the title at 30px. The account's title is * the same rule (`account.css`); change them together. */ .pod-cart 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; } .pod-cart .entry-content { margin: 0; } /* --- 2. Two columns -------------------------------------------------------- */ /* * Items on the left, the summary on the right, the way every large shop lays * out a cart: the list can be as long as it likes and the total and the way on * stay beside it. * * Only when there is a cart to lay out. The empty cart prints a message and a * button into the same wrapper, and a grid would split them into two columns. */ @media ( min-width: 1025px ) { .pod-cart .entry-content > .woocommerce:has( .woocommerce-cart-form ) { align-items: start; column-gap: calc( 2 * var( --pod-apart ) ); display: grid; grid-template-columns: minmax( 0, 1fr ) 380px; } .pod-cart .entry-content > .woocommerce:has( .woocommerce-cart-form ) > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .pod-cart .entry-content > .woocommerce:has( .woocommerce-cart-form ) > .woocommerce-cart-form { grid-column: 1; } /* The summary keeps its place while a long cart scrolls past it. */ .pod-cart .woocommerce .cart-collaterals { grid-column: 2; grid-row: 2; position: sticky; top: calc( var( --pod-apart ) + var( --wp-admin--admin-bar--height, 0px ) ); } } .pod-cart .woocommerce .cart-collaterals { margin: 0; width: 100%; } @media ( max-width: 1024px ) { .pod-cart .woocommerce .cart-collaterals { margin-top: var( --pod-break ); } } /* --- 3. The item list ------------------------------------------------------ */ .pod-cart .woocommerce table.shop_table.cart { border: 0; border-collapse: collapse; border-radius: 0; display: block; margin: 0; width: 100%; } .pod-cart .woocommerce table.shop_table.cart tbody { display: block; } /* The column headings, kept for screen readers: each row now says what it is by its shape. */ .pod-cart .woocommerce table.shop_table.cart thead { clip: rect( 0 0 0 0 ); height: 1px; overflow: hidden; position: absolute; width: 1px; } /* * One item. * * picture | name | qty | total | remove * | details | | each | * | edit · preview | | | * * The name column takes everything about the item: its name, what was chosen * and the two things that can be done to it. The narrow columns hold the three * facts a shopper scans a cart for, lined up with the name at the top of the * row, not floated to the middle of however tall the details make it. */ .pod-cart .woocommerce table.shop_table.cart tr.cart_item { align-items: start; border-bottom: 1px solid var( --pod-line ); column-gap: var( --pod-apart ); display: grid; grid-template-areas: "thumb name qty total remove" "thumb name . price ."; grid-template-columns: 96px minmax( 0, 1fr ) auto minmax( 5.5rem, auto ) 40px; grid-template-rows: auto 1fr; padding: var( --pod-apart ) 0; } .pod-cart .woocommerce table.shop_table.cart tr.cart_item:first-child { border-top: 1px solid var( --pod-line ); } /* * The reset every cell starts from. `table.shop_table.cart td`, not * `… tr.cart_item td`: one element fewer keeps it below the per-cell rules * that follow (which set `display: flex` on the name and the controls), while * still above WooCommerce's and Astra's own `td` rules. With `tr` in it, this * reset won and the cells stayed blocks. */ .pod-cart .woocommerce table.shop_table.cart td { background: none; border: 0; display: block; padding: 0; /* * `!important` because WooCommerce's phone stylesheet sets * `text-align: right !important` on every cell of a responsive table, * which pushed the name, price and quantity to the right edge. Nothing * without it can win. The figures on the right set their own alignment * below, the same way. */ text-align: left !important; } /* * WooCommerce gives every cart cell `min-height: 3.25em` (52px) through a * `#content` selector, and a minimum outranks a height. It kept the 40px * controls 12px taller than set, and below the name. */ .pod-cart #content .woocommerce table.shop_table.cart td { min-height: 0; } /* WooCommerce's phone labels ("Product:", "Price:"), which the row's shape now makes redundant. */ .pod-cart .woocommerce table.shop_table_responsive tr td::before { content: none; display: none; } /* --- 3a. Picture ----------------------------------------------------------- */ .pod-cart .woocommerce table.shop_table.cart td.product-thumbnail { display: block; grid-area: thumb; min-width: 0; } /* * The product's picture, filled and square, on the tint the shop's cards use, * so a white product on white is still a shape. * * On the picture itself and not on the link around it: for a designed item * Lumise puts the design's preview inside the same link, after the picture, * and a square crop on the link would cut the preview off. */ .pod-cart .woocommerce table.shop_table.cart td.product-thumbnail > a { display: block; text-decoration: none; } .pod-cart .woocommerce table.shop_table.cart td.product-thumbnail > img, .pod-cart .woocommerce table.shop_table.cart td.product-thumbnail > a > img { aspect-ratio: 1; background: var( --pod-surface-2 ); border-radius: var( --pod-radius ); display: block; height: auto; max-width: none; object-fit: cover; width: 100%; } /* * The customer's own design, under the product's picture: the artwork they * made, framed on white so it reads as a print rather than as another product * photo. `contain`, never `cover`, because cropping someone's design to fill a * square would show them less than they made. * * A design with more than one side (a shirt's front and back) puts them side * by side in the same width. Lumise sets each preview's background to the * product's colour inline, which is kept, so a design for a black shirt is * shown on black. * * The file itself is served by `CartPreviews`, to this visitor only. */ .pod-cart .woocommerce table.shop_table.cart .lumise-cart-thumbnails { display: grid; gap: var( --pod-hair ); grid-template-columns: repeat( auto-fit, minmax( 40px, 1fr ) ); margin-top: var( --pod-tight ); } .pod-cart .woocommerce table.shop_table.cart .lumise-cart-thumbnails img { aspect-ratio: 1; background-color: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius ); box-sizing: border-box; display: block; height: auto; /* Lumise's own stylesheet gives each preview a 5px margin, which pushed it past its column. */ margin: 0; max-width: none; object-fit: contain; width: 100%; } /* --- 3b. Name, details and actions ----------------------------------------- */ /* * A wrapping row, reordered: the name, the details, then the two actions side * by side. WooCommerce prints the actions (`woocommerce_after_cart_item_name`) * between the name and the details, which put "See it on your wall" above what * it is a preview of. * * The top padding sets the name's first line level with the 40px controls on * the right. */ .pod-cart .woocommerce table.shop_table.cart td.product-name { /* Lines packed to the top: a wrapping row otherwise spreads them down a tall cell. */ align-content: flex-start; align-items: center; align-self: start; column-gap: var( --pod-tight ); display: flex; flex-wrap: wrap; grid-area: name; min-width: 0; padding-top: var( --pod-tight ); row-gap: var( --pod-tight ); } .pod-cart .woocommerce table.shop_table.cart td.product-name > a { color: var( --pod-ink ); flex: 1 1 100%; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; order: 1; text-decoration: none; } .pod-cart .woocommerce table.shop_table.cart td.product-name > a:hover { text-decoration: underline; text-underline-offset: 0.25em; } /* * What was chosen (size, material, each finishing option and its price, when * it ships) as labels and values, quieter than the name. */ .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation { color: var( --pod-ink-soft ); column-gap: var( --pod-near ); display: grid; flex: 1 1 100%; font-size: 0.875rem; grid-template-columns: max-content minmax( 0, 1fr ); line-height: 1.5; margin: 0; order: 2; row-gap: 2px; } .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dt { float: none; font-weight: 400; margin: 0; } .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dd { color: var( --pod-ink ); float: none; margin: 0; padding: 0; } .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dd p { margin: 0; } .pod-cart .woocommerce table.shop_table.cart td.product-name .backorder_notification { flex: 1 1 100%; margin: 0; order: 4; } /* * The two actions, "Edit design" (Lumise's link, moved here by `CartPage`) and * "See it on your wall", as a pair of compact secondary buttons (40px, the * standard's dense-row size) after the details, with a little more space above * them than between the details' own lines. * * Styled here as well as by their owners (Lumise's `frontend.css` paints the * edit link as a teal block, and `visualizer.css` the preview button), so the * pair match whichever stylesheet loads last. */ /* As wide and as tall as its button, so the two actions share a line and a baseline. */ .pod-cart .woocommerce table.shop_table.cart td.product-name .lumise-edit-design-wrp { display: flex; flex: 0 0 auto; margin: var( --pod-tight ) 0 0; order: 3; width: auto; } .pod-cart .woocommerce table.shop_table.cart td.product-name .pod-viz__open { margin: var( --pod-tight ) 0 0; order: 3; } .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design, .pod-cart .woocommerce table.shop_table.cart td.product-name .pod-viz__open { 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; letter-spacing: 0; line-height: 1.2; 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 ); width: auto; } .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design:hover, .pod-cart .woocommerce table.shop_table.cart td.product-name .pod-viz__open:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); color: var( --pod-ink ); } .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design:focus-visible, .pod-cart .woocommerce table.shop_table.cart td.product-name .pod-viz__open:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* Over WooCommerce's `#content table.cart .button { display: inline-block }`, which left the label at the top of the pill. */ .pod-cart #content .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design { display: inline-flex; } /* * Lumise paints its link teal twice over, both with `!important`: in * `frontend.css` and again in an inline style. Its colours can only be * answered in kind, so these three alone carry it. */ .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design { background: var( --pod-surface ) !important; background-color: var( --pod-surface ) !important; color: var( --pod-ink ) !important; } .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design:hover { background: var( --pod-surface-2 ) !important; background-color: var( --pod-surface-2 ) !important; } /* --- 3c. Quantity, total, remove ------------------------------------------- */ /* * Each exactly 40px tall with its content centred, so the three sit on one * line with the name. A set height and a plain line-height, because the * theme's 1.86 line-height made the cells 52 and 55px tall around 40px of * content, which dropped them below the name. */ .pod-cart .woocommerce table.shop_table.cart td.product-quantity, .pod-cart .woocommerce table.shop_table.cart td.product-subtotal, .pod-cart .woocommerce table.shop_table.cart td.product-remove { align-items: center; align-self: start; box-sizing: border-box; display: flex; height: 40px; line-height: 1.2; } .pod-cart .woocommerce table.shop_table.cart td.product-quantity .quantity { display: flex; } .pod-cart .woocommerce table.shop_table.cart td.product-quantity { grid-area: qty; } .pod-cart .woocommerce table.shop_table.cart td.product-subtotal { color: var( --pod-ink ); font-size: 1.0625rem; font-weight: 700; grid-area: total; justify-content: flex-end; text-align: right !important; } /* "$19.99 each", under the total, and only when the quantity is above one (`CartLines`). */ .pod-cart .woocommerce table.shop_table.cart td.product-price { align-self: start; color: var( --pod-ink-soft ); font-size: 0.8125rem; grid-area: price; line-height: 1.4; text-align: right !important; } .pod-cart .woocommerce table.shop_table.cart td.product-remove { grid-area: remove; justify-content: flex-end; } /* * A designed item's quantity, labelled (`CartPage::label_fixed_quantity()`). * It is fixed by the design and changed in the designer, so it is a figure, * not a field. */ .pod-cart .woocommerce table.shop_table.cart .pod-cart-qty { align-items: baseline; display: inline-flex; gap: var( --pod-hair ); white-space: nowrap; } .pod-cart .woocommerce table.shop_table.cart .pod-cart-qty__label { color: var( --pod-ink-soft ); font-size: 0.8125rem; } .pod-cart .woocommerce table.shop_table.cart .pod-cart-qty__value { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 700; } /* * A plain product's quantity stays WooCommerce's field, in the field's shape. * 40px rather than 48: it sits in the item row's 40px line beside the total and * the remove button, the standard's dense-row height. */ .pod-cart .woocommerce table.shop_table.cart .quantity { margin: 0; } .pod-cart .woocommerce table.shop_table.cart .quantity input.qty { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); font-weight: 700; height: 40px; margin: 0; padding: 0 var( --pod-tight ); text-align: center; width: 72px; /* Theme fields ease `all`; focus appears at once (standard §6). */ transition: none; } /* The field focus: an accent edge and a 1px accent ring, no outer glow. */ .pod-cart .woocommerce table.shop_table.cart .quantity input.qty:focus { border-color: var( --pod-accent ); box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* Remove, as a round icon button that turns ink on hover, not the theme's red. */ .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove { align-items: center; background: transparent; border: 0; border-radius: var( --pod-radius-pill ); color: var( --pod-ink-soft ); display: inline-flex; height: 40px; justify-content: center; transition: background-color var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); width: 40px; } .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove:hover, .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove:focus-visible { background: var( --pod-surface-2 ); color: var( --pod-ink ); } .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove svg { height: 20px; width: 20px; } /* --- 4. Updating quantities ------------------------------------------------ */ /* * What is left of the row under the items is WooCommerce's "Update cart" * button. The coupon field moved to the summary (`CartPage::render_coupon()`). * * With JavaScript a changed quantity applies itself (`cart-page.js` presses * this same button for the customer), so the button is not shown, and the row * goes with it when nothing else is in it. Without JavaScript it is the only * way a changed quantity is saved, so it stays, as a secondary button. * * A designed item has no quantity field at all (Lumise fixes the quantity in * the designer), so for a cart of designs there was never anything for this * button to do. */ .pod-cart .woocommerce table.shop_table.cart tr:has( > td.actions ) { display: block; } .pod-cart .woocommerce table.shop_table.cart td.actions { align-items: center; background: none; border: 0; display: flex; flex-wrap: wrap; gap: var( --pod-near ); justify-content: flex-end; padding: var( --pod-apart ) 0 0; } .pod-cart .woocommerce table.shop_table.cart td.actions .button { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-ink ); display: inline-flex; font-size: var( --pod-btn-size ); font-weight: 700; height: var( --pod-btn-h ); justify-content: center; letter-spacing: 0; margin: 0; padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-cart .woocommerce table.shop_table.cart td.actions .button:hover:not( :disabled ) { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); color: var( --pod-ink ); } .pod-cart .woocommerce table.shop_table.cart td.actions .button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-cart .woocommerce table.shop_table.cart td.actions .button:disabled { cursor: not-allowed; opacity: 0.5; } /* * With JavaScript (WooCommerce swaps `woocommerce-no-js` for `woocommerce-js` * on the body when it runs): the button hidden, and the row closed up when the * button and the cart nonce are all it holds. Anything another plugin adds to * `woocommerce_cart_actions` keeps the row open. */ /* `#content`, because WooCommerce and the theme set `display` on cart buttons through it. */ body.woocommerce-js.pod-cart #content .woocommerce table.shop_table.cart td.actions button[name="update_cart"] { display: none; } body.woocommerce-js.pod-cart .woocommerce table.shop_table.cart tr:has( > td.actions ):not( :has( td.actions > :not( button[name="update_cart"] ):not( input[type="hidden"] ) ) ) { display: none; } /* --- 5. The summary -------------------------------------------------------- */ /* A summary card on the tint, so it reads as its own object beside the white list. */ .pod-cart .woocommerce .cart-collaterals .cart_totals { background: var( --pod-surface-2 ); border: 0; border-radius: var( --pod-radius-lg ); box-sizing: border-box; float: none; padding: var( --pod-apart ); width: 100%; } .pod-cart .woocommerce .cart-collaterals .cart_totals > h2 { background: none; border: 0; 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; text-wrap: balance; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table { background: none; border: 0; border-radius: 0; display: block; margin: 0; width: 100%; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tbody { display: block; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr { align-items: baseline; display: flex; gap: var( --pod-near ); justify-content: space-between; padding: var( --pod-hair ) 0; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table th, .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td { background: none; border: 0; display: block; font-size: 0.9375rem; padding: 0; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table th { color: var( --pod-ink-soft ); flex: 0 0 auto; font-weight: 400; } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td { color: var( --pod-ink ); flex: 1 1 auto; font-weight: 600; text-align: right; } /* Shipping: the method, where it is going, and "Change address", quieter than the figures. */ .pod-cart .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .pod-cart .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination { color: var( --pod-ink-soft ); font-size: 0.8125rem; font-weight: 400; line-height: 1.45; margin: var( --pod-hair ) 0 0; } .pod-cart .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination strong { font-weight: 600; } .pod-cart .woocommerce .cart-collaterals .cart_totals .shipping-calculator-button { color: var( --pod-accent ); font-size: 0.8125rem; font-weight: 600; text-decoration: none; } .pod-cart .woocommerce .cart-collaterals .cart_totals .shipping-calculator-form { text-align: left; } /* The total, set apart by a rule and a size up, so the eye lands on it. */ .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.order-total { border-top: 1px solid var( --pod-line ); margin-top: var( --pod-tight ); padding-top: var( --pod-near ); } .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.order-total th, .pod-cart .woocommerce .cart-collaterals .cart_totals table.shop_table tr.order-total td { color: var( --pod-ink ); font-size: 1.125rem; font-weight: 800; } /* --- 6. The way on --------------------------------------------------------- */ .pod-cart .woocommerce .cart-collaterals .wc-proceed-to-checkout { display: flex; flex-direction: column; gap: var( --pod-tight ); padding: var( --pod-apart ) 0 0; } /* The one filled button on the page: the standard's primary, flat (no shadow, no lift). */ .pod-cart .woocommerce .wc-proceed-to-checkout a.checkout-button { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-on-ink ); display: flex; font-size: var( --pod-btn-size ); font-weight: 700; justify-content: center; letter-spacing: 0; margin: 0; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } .pod-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* * The order in the card: the coupon field, Power Coupons' "View available * coupons" under it, then Checkout, which stays the last and strongest thing * on the page. Everything WooCommerce and other plugins print here (Checkout, * any express-pay buttons) keeps its own order after the two coupon pieces. */ .pod-cart .woocommerce .wc-proceed-to-checkout > * { order: 3; } /* --- 6a. The coupon field -------------------------------------------------- */ .pod-cart .woocommerce .wc-proceed-to-checkout form.pod-cart-coupon { margin: 0; order: 1; } .pod-cart .woocommerce form.pod-cart-coupon .coupon { float: none; margin: 0; width: 100%; } /* Its label, the standard's field label: ink, 0.875rem/600, 4px above the field. */ .pod-cart .woocommerce form.pod-cart-coupon label.pod-field-label { color: var( --pod-ink ); display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0 0 var( --pod-hair ); } /* * The field and its button as one row: the field takes the width, Apply sits * at its end. The standard's text field (radius 12, not a pill) and a * secondary button. */ .pod-cart .woocommerce form.pod-cart-coupon .pod-cart-coupon__row { display: flex; gap: var( --pod-tight ); } .pod-cart .woocommerce form.pod-cart-coupon #coupon_code { 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 ); flex: 1 1 auto; font-size: var( --pod-field-size ); height: var( --pod-btn-h ); margin: 0; min-width: 0; padding: 0 var( --pod-near ); width: auto; /* Theme fields ease `all`; focus appears at once (standard §6). */ transition: none; } .pod-cart .woocommerce form.pod-cart-coupon #coupon_code:focus { border-color: var( --pod-accent ); box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } .pod-cart .woocommerce form.pod-cart-coupon #coupon_code.has-error { border-color: var( --pod-danger ); } .pod-cart .woocommerce form.pod-cart-coupon #coupon_code.has-error:focus { box-shadow: 0 0 0 1px var( --pod-danger ); } .pod-cart .woocommerce form.pod-cart-coupon .button { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-ink ); display: inline-flex; flex: 0 0 auto; font-size: var( --pod-btn-size ); font-weight: 700; height: var( --pod-btn-h ); justify-content: center; letter-spacing: 0; margin: 0; padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-cart .woocommerce form.pod-cart-coupon .button:hover:not( :disabled ) { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); color: var( --pod-ink ); } .pod-cart .woocommerce form.pod-cart-coupon .button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-cart .woocommerce form.pod-cart-coupon .button:disabled, .pod-cart .woocommerce form.pod-cart-coupon.is-busy .button { cursor: not-allowed; opacity: 0.5; } /* An invalid code, said under the field (the markup is WooCommerce's). */ .pod-cart .woocommerce form.pod-cart-coupon .coupon-error-notice { color: var( --pod-danger ); font-size: 0.8125rem; line-height: 1.4; margin: var( --pod-tight ) 0 0 var( --pod-near ); } /* * "View available coupons", as a quiet link under the field it belongs to, * rather than a second full-width button competing with Checkout. */ .pod-cart .woocommerce .wc-proceed-to-checkout .power-coupons-drawer-trigger-wrapper { margin: 0 0 var( --pod-tight ); order: 2; } .pod-cart .woocommerce .wc-proceed-to-checkout .power-coupons-view-coupons-btn { background: transparent; border: 0; border-radius: var( --pod-radius-pill ); /* Power Coupons draws 4px */ color: var( --pod-accent ); cursor: pointer; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-align: left; text-transform: none; width: auto; } .pod-cart .woocommerce .wc-proceed-to-checkout .power-coupons-view-coupons-btn:hover, .pod-cart .woocommerce .wc-proceed-to-checkout .power-coupons-view-coupons-btn:focus-visible { background: transparent; color: var( --pod-accent-deep ); text-decoration: underline; text-underline-offset: 0.25em; } .pod-cart .woocommerce .wc-proceed-to-checkout .power-coupons-view-coupons-btn:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 7. Phones ------------------------------------------------------------- */ /* * The same row, folded to fit 350px: picture, name and remove across the top, * with the details and actions under the name, then quantity and total, then * the unit price when there is one. */ @media ( max-width: 767px ) { .pod-cart .woocommerce table.shop_table.cart tr.cart_item { column-gap: var( --pod-near ); grid-template-areas: "thumb name remove" "thumb qty total" "thumb . price"; grid-template-columns: 80px minmax( 0, 1fr ) auto; grid-template-rows: auto auto auto; row-gap: var( --pod-tight ); } /* * The details as plain lines, "Size: 24" × 18"", instead of two columns. * At this width the label column took the width of the longest label * ("Grommets (every 24"):") and left the values about 70px, so every value * broke over two or three lines. */ .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation { display: block; } .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dt, .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dd, .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dd p { display: inline; } /* A word's space after the label's colon, which inline text no longer gets from the grid gap. */ .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dt { margin-right: 0.3em; } /* Each value ends its line. */ .pod-cart .woocommerce table.shop_table.cart td.product-name dl.variation dd::after { content: "\A"; white-space: pre; } /* Without JavaScript, "Update cart" across the width. */ .pod-cart #content .woocommerce table.shop_table.cart td.actions > .button { flex: none; margin: 0; width: 100%; } } /* --- 8. An empty cart ------------------------------------------------------ */ /* A sentence and a way back, centred, instead of an info banner on grey. */ .pod-cart .woocommerce .wc-empty-cart-message { margin: 0; } .pod-cart .woocommerce .wc-empty-cart-message .cart-empty { background: none; border: 0; /* A block: Astra lays notices out as a flex row, where `text-align` does nothing. */ display: block; color: var( --pod-ink-soft ); font-size: 1.0625rem; margin: 0; padding: var( --pod-break ) 0 var( --pod-apart ); text-align: center; } .pod-cart .woocommerce .wc-empty-cart-message .cart-empty::before { content: none; } .pod-cart .woocommerce p.return-to-shop { margin: 0; text-align: center; } .pod-cart .woocommerce p.return-to-shop a.button { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; box-sizing: border-box; color: var( --pod-on-ink ); display: inline-flex; font-size: var( --pod-btn-size ); font-weight: 700; letter-spacing: 0; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); /* The theme capitalises `.button`; no pill on the shop front is set in capitals. */ text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-cart .woocommerce p.return-to-shop a.button:hover { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } .pod-cart .woocommerce p.return-to-shop a.button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } @media ( prefers-reduced-motion: reduce ) { .pod-cart .woocommerce .wc-proceed-to-checkout a.checkout-button, .pod-cart .woocommerce p.return-to-shop a.button, .pod-cart .woocommerce table.shop_table.cart td.product-name a.lumise-edit-design, .pod-cart .woocommerce table.shop_table.cart td.product-name .pod-viz__open, .pod-cart .woocommerce table.shop_table.cart td.product-remove a.remove, .pod-cart .woocommerce table.shop_table.cart td.actions .button, .pod-cart .woocommerce form.pod-cart-coupon .button { transition: none; } }