/* ============================================================================ GROUNDCRAFT THEME — STOREFRONT ---------------------------------------------------------------------------- The sheet that dresses stock WooCommerce markup. `functions.php` drops `woocommerce-general` and `woocommerce-smallscreen`, which is the right call — they fight a themed shop and win on specificity often enough to be a real cost — but for a long time nothing replaced them. The fleet's shops have been serving `ul.products` as a bulleted list in the browser's default serif. This file is the other half of that decision. Everything resolves through the design system. Not one colour, size, space or radius is written as a literal below the alias block, so the Global Styles panel re-tints the entire storefront from the same declarations that re-tint the header. If you find yourself reaching for a hex in here, the token you want either exists already or belongs in theme.json. Scope: every rule is anchored on `.woocommerce` / `.woocommerce-page`, which WooCommerce puts on the BODY. Nothing here can leak onto a page that is not part of the shop, and the sheet is only enqueued where Woo renders anyway. No `!important`. One section — the float-grid neutraliser — out-specifies WooCommerce by matching its selectors rather than shouting over them, and says so where it does it. ============================================================================ */ /* ---- Token aliases -------------------------------------------------------- Two token families reach this page and they are not interchangeable. `--gf-*` is Forge's bridge. It carries the dark scheme: one `[data-theme]` flip on re-tints every one of them. But the bridge is printed inline only on pages Forge considers its own, so on a plain shop page it may not exist at all. `--wp--preset--*` comes from theme.json and is always present on a block theme, and it is what the Global Styles override layer writes to — but it has no dark scheme of its own. So: prefer the bridge, fall through to the preset. A shop on a Forge page gets dark mode; a shop on a bare page still gets the brand. Both honour an override, because the bridge itself resolves each `--gf-*` through the preset. -------------------------------------------------------------------------- */ :root { --gcw-brand: var( --gf-color-brand, var( --wp--preset--color--brand ) ); --gcw-brand-strong: var( --gf-color-brand-strong, var( --wp--preset--color--brand-strong ) ); --gcw-brand-ink: var( --gf-color-brand-ink, var( --wp--preset--color--brand-ink ) ); --gcw-brand-soft: var( --gf-color-brand-soft, var( --wp--preset--color--brand-soft ) ); --gcw-accent: var( --gf-color-accent, var( --wp--preset--color--accent ) ); --gcw-canvas: var( --gf-color-canvas, var( --wp--preset--color--canvas ) ); --gcw-surface: var( --gf-color-surface, var( --wp--preset--color--surface ) ); --gcw-surface-2: var( --gf-color-surface-2, var( --wp--preset--color--surface-2 ) ); --gcw-ink: var( --gf-color-ink, var( --wp--preset--color--ink ) ); --gcw-ink-2: var( --gf-color-ink-2, var( --wp--preset--color--ink-2 ) ); --gcw-muted: var( --gf-color-muted, var( --wp--preset--color--muted ) ); --gcw-on-dark: var( --gf-color-on-dark, var( --wp--preset--color--on-dark ) ); --gcw-border: var( --gf-color-border, var( --wp--preset--color--border ) ); --gcw-border-strong: var( --gf-color-border-strong, var( --wp--preset--color--border-strong ) ); --gcw-space-20: var( --gf-space-20, var( --wp--preset--spacing--20 ) ); --gcw-space-30: var( --gf-space-30, var( --wp--preset--spacing--30 ) ); --gcw-space-40: var( --gf-space-40, var( --wp--preset--spacing--40 ) ); --gcw-space-50: var( --gf-space-50, var( --wp--preset--spacing--50 ) ); --gcw-space-60: var( --gf-space-60, var( --wp--preset--spacing--60 ) ); --gcw-text-sm: var( --gf-size-sm, var( --wp--preset--font-size--sm ) ); --gcw-text: var( --gf-size-base, var( --wp--preset--font-size--base ) ); --gcw-text-lg: var( --gf-size-lg, var( --wp--preset--font-size--lg ) ); --gcw-text-xl: var( --gf-size-xl, var( --wp--preset--font-size--xl ) ); --gcw-text-2xl: var( --gf-size-2xl, var( --wp--preset--font-size--2xl ) ); --gcw-text-3xl: var( --gf-size-3xl, var( --wp--preset--font-size--3xl ) ); --gcw-font-display: var( --gf-font-display, var( --wp--preset--font-family--display ) ); --gcw-font-body: var( --gf-font-body, var( --wp--preset--font-family--body ) ); /* No `--gf-font-label`: the label face is a theme.json addition, so it has only the one source. Falls through to the body face on a theme without it. */ --gcw-font-label: var( --wp--preset--font-family--label, var( --gcw-font-body ) ); /* Radii are the exception, and the literal is deliberate. There is no `--wp--preset--radius--*` family in WordPress to fall through to, and the `--gf-radius-*` that would carry it is printed only on Forge pages — so without a literal the whole storefront would render square-cornered on a plain shop page. A site that changes a radius in Global Styles writes `--gf-radius-*` directly, so the override still wins; this is the floor, not the value. Kept in step with Forge's Css\Tokens defaults. */ --gcw-radius-sm: var( --gf-radius-sm, 10px ); --gcw-radius-md: var( --gf-radius-md, 16px ); --gcw-radius-lg: var( --gf-radius-lg, 22px ); --gcw-radius-pill: var( --gf-radius-pill, 999px ); /* Elevation, mixed from the ink token rather than declared as a colour, so a dark site's shadows go dark with it instead of staying a bruise. */ --gcw-shadow: 0 1px 2px color-mix( in srgb, var( --gcw-ink ) 6%, transparent ), 0 8px 24px color-mix( in srgb, var( --gcw-ink ) 7%, transparent ); --gcw-shadow-lift: 0 2px 4px color-mix( in srgb, var( --gcw-ink ) 7%, transparent ), 0 16px 36px color-mix( in srgb, var( --gcw-ink ) 12%, transparent ); /* How a product photograph sits in its frame. `contain` is the catalogue default: goods shot on white, and a rifle or a bottle cropped to fill a 4:3 box is a returned order. A lifestyle shop overrides this one property in its child theme and every card, thumbnail and related item follows. */ --gcw-product-image-fit: contain; --gcw-product-image-ratio: 4 / 3; --gcw-ease: cubic-bezier( .16, .84, .44, 1 ); } /* ---- Neutralise WooCommerce's float grid ---------------------------------- `woocommerce-layout.css` is NOT dequeued, and should not be — it is structural rather than decorative. But it lays the shop out with floats and percentage widths, and a couple of its selectors carry `#content`, which is an id and outranks anything reasonable. A grid item ignores `float` outright, so the floats fall away on their own the moment `ul.products` and `div.product` become grids. The WIDTHS do not: a 48%-wide gallery inside a grid track is a stripe of image beside a lot of nothing, and a 22.05%-wide card in a four-column grid is a quarter of a quarter. So the widths are undone here, matched selector-for-selector rather than shouted over with `!important` — the next person to write a storefront rule should not have to out-shout this one as well. Harmless where layout.css is absent, which on some builds it is. -------------------------------------------------------------------------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce #content div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page div.product div.summary { float: none; clear: none; width: auto; margin: 0; } /* ---- Shared type + rhythm -------------------------------------------------- */ .woocommerce, .woocommerce-page { font-family: var( --gcw-font-body ); color: var( --gcw-ink-2 ); } .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4 { font-family: var( --gcw-font-display ); color: var( --gcw-ink ); letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; } .woocommerce img { max-width: 100%; height: auto; } /* The theme's own shop wrappers. Named in the block templates, so the storefront has one hook for page-level rhythm that does not depend on Woo's markup. */ .gc-shop > * + *, .gc-product > * + * { margin-block-start: var( --gcw-space-40 ); } /* ---- Notices --------------------------------------------------------------- Rebuilt without an icon. WooCommerce's tick, cross and (i) all came from the `WooCommerce` icon font declared inside the stylesheet we dequeue, so any rule here that reached for `::before { content: "\e015" }` would print a box. A weighted left rule reads as well and cannot break. -------------------------------------------------------------------------- */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: var( --gcw-space-30 ); margin: 0 0 var( --gcw-space-40 ); padding: var( --gcw-space-30 ) var( --gcw-space-40 ); list-style: none; border: 1px solid var( --gcw-border ); border-left: 4px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-size: var( --gcw-text-sm ); line-height: 1.6; box-shadow: var( --gcw-shadow ); } .woocommerce .woocommerce-message { border-left-color: var( --gcw-brand-strong ); background: var( --gcw-brand-soft ); } .woocommerce .woocommerce-info { border-left-color: var( --gcw-accent ); } .woocommerce .woocommerce-error { border-left-color: var( --gcw-ink ); background: var( --gcw-surface-2 ); } /* The button Woo tucks into a notice ("View basket") sits at the end of the row, not on a line of its own halfway through the sentence. */ .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button { margin-inline-start: auto; } .woocommerce-notices-wrapper:empty { display: none; } /* ---- Store notice ---------------------------------------------------------- */ .woocommerce-store-notice, p.demo_store { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90; margin: 0; padding: var( --gcw-space-30 ) var( --gcw-space-40 ); background: var( --gcw-ink ); color: var( --gcw-on-dark ); font-size: var( --gcw-text-sm ); text-align: center; } .woocommerce-store-notice a, p.demo_store a { color: var( --gcw-brand ); } /* ---- Breadcrumb ------------------------------------------------------------ */ .woocommerce .woocommerce-breadcrumb { margin: 0 0 var( --gcw-space-40 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); line-height: 1.5; } .woocommerce .woocommerce-breadcrumb a { color: var( --gcw-ink-2 ); text-decoration: none; transition: color .16s ease; } .woocommerce .woocommerce-breadcrumb a:hover, .woocommerce .woocommerce-breadcrumb a:focus-visible { color: var( --gcw-brand-strong ); } /* ---- Archive header -------------------------------------------------------- Stock markup on the witness: `header.woocommerce-products-header` carrying an `h1.woocommerce-products-header__title.page-title`, with the term description beneath it on a category archive. -------------------------------------------------------------------------- */ /* `:not(:empty)` because a site that suppresses the shop title via `woocommerce_show_page_title` still renders the wrapper — and a bordered, padded empty element is a stray horizontal rule with dead space above it, on the shop page and every category archive. Kanele does exactly this. */ .woocommerce .woocommerce-products-header:not(:empty) { margin: 0 0 var( --gcw-space-40 ); padding-block-end: var( --gcw-space-30 ); border-block-end: 1px solid var( --gcw-border ); } .woocommerce .woocommerce-products-header__title, .woocommerce .page-title { margin: 0; font-size: var( --gcw-text-3xl ); color: var( --gcw-ink ); } .woocommerce .term-description { margin: var( --gcw-space-30 ) 0 0; max-width: 62ch; font-size: var( --gcw-text-lg ); color: var( --gcw-ink-2 ); line-height: 1.7; } /* ---- Result count + ordering ----------------------------------------------- These two are siblings with no wrapper between them, which is why floats and not flex: laying them on one line any other way would mean filtering Woo's template output to insert a container, and that is a larger intervention than a shop stylesheet is entitled to make. Stacked on narrow screens, side by side from the point they comfortably fit, with the grid clearing them. -------------------------------------------------------------------------- */ .woocommerce .woocommerce-result-count { margin: 0 0 var( --gcw-space-30 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); line-height: 2.6; } .woocommerce .woocommerce-ordering { margin: 0 0 var( --gcw-space-40 ); } .woocommerce ul.products { clear: both; } @media ( min-width: 46em ) { .woocommerce .woocommerce-result-count { float: left; margin-block-end: var( --gcw-space-40 ); } .woocommerce .woocommerce-ordering { float: right; } } /* The native chevron is kept on purpose. Replacing it means an inline SVG whose stroke is baked into a data URI — a hard-coded colour that cannot follow the palette and goes invisible the moment the site flips to dark. The box is ours; the arrow is the platform's, and the platform's is always the right colour. */ .woocommerce .woocommerce-ordering select, .woocommerce select.orderby { padding: var( --gcw-space-20 ) var( --gcw-space-30 ); max-width: 100%; border: 1px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-pill ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 600; line-height: 1.6; cursor: pointer; } /* ---- The product grid ------------------------------------------------------ WooCommerce puts a `columns-N` class on the list and expects the theme to honour it. Rather than N fixed tracks, each column count sets a MINIMUM card width and the grid fills as many as fit: at the theme's 1200px content width that lands on exactly the requested count, and it steps down by itself as the viewport narrows — no breakpoint per column count, and no row of matchbox cards on a tablet. `auto-fill`, not `auto-fit`: auto-fit collapses the empty tracks, so a category holding one product would stretch that product to the full width of the page. A shop with one item should look like a shop with one item. -------------------------------------------------------------------------- */ .woocommerce ul.products { --gcw-card-min: 20rem; display: grid; grid-template-columns: repeat( auto-fill, minmax( min( var( --gcw-card-min ), 100% ), 1fr ) ); gap: var( --gcw-space-40 ); margin: 0 0 var( --gcw-space-50 ); padding: 0; list-style: none; } .woocommerce ul.products.columns-1 { --gcw-card-min: 100%; } .woocommerce ul.products.columns-2 { --gcw-card-min: 26rem; } .woocommerce ul.products.columns-3 { --gcw-card-min: 20rem; } .woocommerce ul.products.columns-4 { --gcw-card-min: 16.5rem; } .woocommerce ul.products.columns-5 { --gcw-card-min: 13rem; } .woocommerce ul.products.columns-6 { --gcw-card-min: 11rem; } /* ---- The loop card --------------------------------------------------------- */ .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); list-style: none; transition: border-color .18s ease, box-shadow .22s ease, transform .22s var( --gcw-ease ); } .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:focus-within { transform: translateY( -3px ); border-color: var( --gcw-border-strong ); box-shadow: var( --gcw-shadow-lift ); } /* The whole card above the button is one link. It carries the flex column so the price can be pushed to the bottom and every card's button lines up with its neighbours' whatever the title wraps to. */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link, .woocommerce ul.products li.product a.woocommerce-loop-product__link { display: flex; flex: 1 1 auto; flex-direction: column; gap: var( --gcw-space-20 ); padding-block-end: var( --gcw-space-30 ); color: inherit; text-decoration: none; } .woocommerce ul.products li.product img { display: block; width: 100%; margin: 0 0 var( --gcw-space-30 ); aspect-ratio: var( --gcw-product-image-ratio ); object-fit: var( --gcw-product-image-fit ); padding: var( --gcw-space-30 ); background: var( --gcw-surface-2 ); transition: transform .35s var( --gcw-ease ); } .woocommerce ul.products li.product:hover img { transform: scale( 1.03 ); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 { margin: 0; padding-inline: var( --gcw-space-30 ); font-size: var( --gcw-text-lg ); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var( --gcw-ink ); } /* An SEO plugin, a brand taxonomy or a rating each slide their own line in above the price. Whatever sits between title and price is small, muted and quiet. */ .woocommerce ul.products li.product .woocommerce-loop-product__title ~ *:not( .price ):not( .button ) { padding-inline: var( --gcw-space-30 ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); } .woocommerce ul.products li.product .price { margin: auto 0 0; padding-inline: var( --gcw-space-30 ); padding-block-start: var( --gcw-space-20 ); } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { margin: var( --gcw-space-30 ) var( --gcw-space-30 ) var( --gcw-space-30 ); justify-content: center; } /* ---- Prices ---------------------------------------------------------------- Tabular figures so a column of prices aligns on the decimal instead of shimmying. The struck-through original is muted and lighter than the price that replaced it — the discount should be the loud one. -------------------------------------------------------------------------- */ .woocommerce .price, .woocommerce span.price, .woocommerce p.price { display: block; margin: 0; font-family: var( --gcw-font-label ); font-size: var( --gcw-text-lg ); font-weight: 700; font-variant-numeric: tabular-nums; color: var( --gcw-ink ); line-height: 1.4; } .woocommerce .price del, .woocommerce span.price del { margin-inline-end: var( --gcw-space-20 ); font-weight: 500; color: var( --gcw-muted ); text-decoration-thickness: 1px; opacity: .85; } .woocommerce .price ins, .woocommerce span.price ins { background: none; text-decoration: none; color: var( --gcw-brand-strong ); } .woocommerce .price .woocommerce-Price-currencySymbol { font-weight: 500; color: var( --gcw-ink-2 ); } .woocommerce .price small.woocommerce-price-suffix { display: block; font-size: var( --gcw-text-sm ); font-weight: 500; color: var( --gcw-muted ); } /* ---- Sale flash ------------------------------------------------------------ */ .woocommerce span.onsale { position: absolute; inset-block-start: var( --gcw-space-30 ); inset-inline-start: var( --gcw-space-30 ); z-index: 2; display: inline-flex; align-items: center; min-height: 0; padding: var( --gcw-space-20 ) var( --gcw-space-30 ); border-radius: var( --gcw-radius-pill ); background: var( --gcw-brand ); color: var( --gcw-brand-ink ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1; } /* A sold-out product still deserves a legible label rather than a stray line of body copy under the price. */ .woocommerce .stock.out-of-stock { display: inline-block; margin-block: var( --gcw-space-20 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var( --gcw-muted ); } .woocommerce .stock.in-stock { font-size: var( --gcw-text-sm ); color: var( --gcw-brand-strong ); } /* ---- Star ratings ---------------------------------------------------------- Rebuilt from scratch, because the stars were a webfont — `@font-face { font-family: star }` lives inside the stylesheet we dequeue, so the stock rules would print five literal "s" characters where the rating should be. The markup gives us a percentage width on the inner span and nothing else to work with, so the fill is that span clipped by its parent, and the glyph is a character every system already has. -------------------------------------------------------------------------- */ .woocommerce .star-rating { position: relative; display: inline-block; overflow: hidden; width: 5.6em; height: 1.3em; font-family: var( --gcw-font-body ); font-size: var( --gcw-text-sm ); line-height: 1.3; letter-spacing: .1em; } .woocommerce .star-rating::before { content: "\2605\2605\2605\2605\2605"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: var( --gcw-border-strong ); } /* The inline `width: N%` WooCommerce writes on this span IS the rating. Never set a width here. The padding pushes its "4 out of 5" text below the clipped box, which is how the number stays available to screen readers. */ .woocommerce .star-rating span { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; padding-block-start: 1.6em; white-space: nowrap; } .woocommerce .star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: var( --gcw-brand-strong ); } .woocommerce .woocommerce-product-rating { display: flex; align-items: center; gap: var( --gcw-space-20 ); margin-block-end: var( --gcw-space-30 ); } .woocommerce .woocommerce-review-link { font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); text-decoration: none; } .woocommerce .woocommerce-review-link:hover { color: var( --gcw-brand-strong ); text-decoration: underline; } /* ---- Buttons --------------------------------------------------------------- One button shape for the whole shop, matching the theme's own `.gct-btn` so a header CTA and an add-to-cart are recognisably the same object. `.alt` is WooCommerce's word for "this is the primary action on the page". -------------------------------------------------------------------------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.added_to_cart { display: inline-flex; align-items: center; justify-content: center; gap: var( --gcw-space-20 ); padding: .85rem 1.6rem; border: 1px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-pill ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var( --gcw-ease ); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.added_to_cart:hover { transform: translateY( -1px ); border-color: var( --gcw-brand-strong ); color: var( --gcw-brand-strong ); } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible, .woocommerce #respond input#submit:focus-visible { outline: 2px solid var( --gcw-brand-strong ); outline-offset: 2px; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button { border-color: transparent; background: var( --gcw-brand ); color: var( --gcw-brand-ink ); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover { background: var( --gcw-brand-strong ); color: var( --gcw-on-dark ); } .woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button:disabled { transform: none; border-color: var( --gcw-border ); background: var( --gcw-surface-2 ); color: var( --gcw-muted ); cursor: not-allowed; } /* WooCommerce hangs a spinner off the button while an AJAX add-to-cart is in flight and expects room for it. Without the reservation the label jumps. */ .woocommerce a.button.loading, .woocommerce button.button.loading { opacity: .7; padding-inline-end: 2.6rem; } /* ---- Forms ----------------------------------------------------------------- One field shape, used by the quantity box, the ordering select, coupon entry, checkout and account. Written once here rather than four times below. -------------------------------------------------------------------------- */ .woocommerce form .form-row { display: flex; flex-direction: column; gap: var( --gcw-space-20 ); margin: 0 0 var( --gcw-space-30 ); padding: 0; } .woocommerce form .form-row label, .woocommerce label { font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 600; color: var( --gcw-ink ); } .woocommerce form .form-row .required, .woocommerce .required { border: 0; color: var( --gcw-brand-strong ); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="url"], .woocommerce input[type="password"], .woocommerce input[type="search"], .woocommerce input[type="number"], .woocommerce textarea { width: 100%; padding: .7rem var( --gcw-space-30 ); border: 1px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-family: var( --gcw-font-body ); font-size: var( --gcw-text ); line-height: 1.6; transition: border-color .16s ease, box-shadow .16s ease; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="number"]:focus, .woocommerce textarea:focus { outline: none; border-color: var( --gcw-brand-strong ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --gcw-brand ) 32%, transparent ); } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var( --gcw-ink ); } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var( --gcw-brand-strong ); } .woocommerce .woocommerce-input-wrapper { display: block; width: 100%; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } /* ---- Quantity -------------------------------------------------------------- */ .woocommerce .quantity { display: inline-flex; } .woocommerce .quantity input.qty { width: 5.5rem; padding: .8rem var( --gcw-space-20 ); border: 1px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text ); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } /* ---- Single product: the frame --------------------------------------------- Gallery and summary side by side, everything below them full width. The children are direct siblings with no wrapper, so the spanning rules name them rather than relying on source order. -------------------------------------------------------------------------- */ .woocommerce div.product { position: relative; display: grid; grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 1fr ); gap: var( --gcw-space-50 ); align-items: start; margin: 0; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells, .woocommerce div.product .up-sells, .woocommerce div.product .cross-sells, .woocommerce div.product .woocommerce-product-gallery + .woocommerce-tabs { grid-column: 1 / -1; } @media ( max-width: 52em ) { .woocommerce div.product { grid-template-columns: minmax( 0, 1fr ); gap: var( --gcw-space-40 ); } } /* ---- Single product: the gallery ------------------------------------------- */ .woocommerce div.product .woocommerce-product-gallery { position: relative; margin: 0; } .woocommerce div.product .woocommerce-product-gallery__image img, .woocommerce div.product div.images img { display: block; width: 100%; border-radius: var( --gcw-radius-md ); background: var( --gcw-surface-2 ); } /* The lightbox trigger. WooCommerce ships it as a bare anchor holding a magnifier character, so all it needs from us is somewhere to sit. */ .woocommerce div.product .woocommerce-product-gallery__trigger { position: absolute; inset-block-start: var( --gcw-space-30 ); inset-inline-end: var( --gcw-space-30 ); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-pill ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-size: var( --gcw-text ); text-decoration: none; box-shadow: var( --gcw-shadow ); } /* Thumbnails. Also a casualty of the dequeue: `.flex-control-thumbs` is an ordered list, so without a rule it renders as a numbered column beneath the product. */ .woocommerce div.product .flex-control-thumbs, .woocommerce div.product .woocommerce-product-gallery__wrapper .flex-control-nav { display: grid; grid-template-columns: repeat( auto-fill, minmax( 4.5rem, 1fr ) ); gap: var( --gcw-space-20 ); margin: var( --gcw-space-30 ) 0 0; padding: 0; list-style: none; } .woocommerce div.product .flex-control-thumbs li { margin: 0; list-style: none; } .woocommerce div.product .flex-control-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: var( --gcw-product-image-fit ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface-2 ); cursor: pointer; opacity: .72; transition: opacity .16s ease, border-color .16s ease; } .woocommerce div.product .flex-control-thumbs img:hover, .woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var( --gcw-brand-strong ); } /* ---- Single product: the summary ------------------------------------------- */ .woocommerce div.product .summary { display: flex; flex-direction: column; gap: var( --gcw-space-30 ); } .woocommerce div.product .product_title { margin: 0; font-size: var( --gcw-text-3xl ); color: var( --gcw-ink ); } .woocommerce div.product .summary .price, .woocommerce div.product p.price { font-size: var( --gcw-text-2xl ); color: var( --gcw-ink ); } .woocommerce div.product .woocommerce-product-details__short-description { max-width: 58ch; color: var( --gcw-ink-2 ); font-size: var( --gcw-text-lg ); line-height: 1.7; } .woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-block-end: 0; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var( --gcw-space-30 ); margin: 0; padding-block: var( --gcw-space-30 ); border-block: 1px solid var( --gcw-border ); } .woocommerce div.product form.cart .button { flex: 1 1 12rem; padding-block: 1rem; } /* Variable products: the attribute table is a two-column form, not a table. Woo emits a real ``, so the grid is applied to the rows. */ .woocommerce div.product form.cart table.variations { width: 100%; margin: 0; border: 0; border-collapse: collapse; } .woocommerce div.product form.cart table.variations tr { display: flex; flex-wrap: wrap; align-items: center; gap: var( --gcw-space-20 ) var( --gcw-space-30 ); margin-block-end: var( --gcw-space-30 ); } .woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { padding: 0; border: 0; text-align: start; } .woocommerce div.product form.cart table.variations th.label { flex: 0 0 8rem; } .woocommerce div.product form.cart table.variations td.value { flex: 1 1 14rem; } .woocommerce div.product form.cart table.variations select { width: 100%; padding: .7rem var( --gcw-space-30 ); border: 1px solid var( --gcw-border-strong ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface ); color: var( --gcw-ink ); font-family: var( --gcw-font-body ); font-size: var( --gcw-text ); } .woocommerce div.product form.cart .reset_variations { font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); text-decoration: underline; } .woocommerce div.product .woocommerce-variation-price { margin-block-end: var( --gcw-space-30 ); } .woocommerce div.product .product_meta { margin: 0; font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); line-height: 1.9; } .woocommerce div.product .product_meta > span { display: block; } .woocommerce div.product .product_meta a { color: var( --gcw-ink-2 ); text-decoration: none; } .woocommerce div.product .product_meta a:hover { color: var( --gcw-brand-strong ); text-decoration: underline; } /* ---- Tabs ------------------------------------------------------------------ */ .woocommerce div.product .woocommerce-tabs { margin-block-start: var( --gcw-space-50 ); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var( --gcw-space-30 ); margin: 0 0 var( --gcw-space-40 ); padding: 0 0 var( --gcw-space-20 ); border-block-end: 1px solid var( --gcw-border ); list-style: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; list-style: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: var( --gcw-space-20 ) 0; border-block-end: 2px solid transparent; color: var( --gcw-muted ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: color .16s ease, border-color .16s ease; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var( --gcw-ink ); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var( --gcw-ink ); border-block-end-color: var( --gcw-brand ); } .woocommerce div.product .woocommerce-tabs .panel { max-width: 74ch; margin: 0; color: var( --gcw-ink-2 ); line-height: 1.75; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-block-start: 0; } /* Attribute table inside the Additional Information tab — a real table, and the one place in the shop where a table is the right answer. */ .woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: var( --gcw-space-20 ) 0; border-block-end: 1px solid var( --gcw-border ); text-align: start; vertical-align: top; font-size: var( --gcw-text-sm ); } .woocommerce table.shop_attributes th { width: 30%; font-family: var( --gcw-font-label ); font-weight: 700; color: var( --gcw-ink ); } .woocommerce table.shop_attributes td p { margin: 0; } /* ---- Reviews --------------------------------------------------------------- */ .woocommerce #reviews #comments ol.commentlist { margin: 0 0 var( --gcw-space-40 ); padding: 0; list-style: none; } .woocommerce #reviews #comments ol.commentlist li { margin: 0 0 var( --gcw-space-30 ); list-style: none; } .woocommerce #reviews .comment_container { display: flex; gap: var( --gcw-space-30 ); padding: var( --gcw-space-30 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); } .woocommerce #reviews .comment_container img.avatar { flex: none; width: 3rem; height: 3rem; border-radius: var( --gcw-radius-pill ); } .woocommerce #reviews .comment-text .meta { margin: 0 0 var( --gcw-space-20 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); } .woocommerce #reviews .comment-text .description p:last-child { margin-block-end: 0; } /* ---- Related, up-sells, cross-sells ---------------------------------------- Same card as the main grid — they share `ul.products` — so all that is left is the heading and the space above it. -------------------------------------------------------------------------- */ .woocommerce .related, .woocommerce .upsells, .woocommerce .up-sells, .woocommerce .cross-sells { margin-block-start: var( --gcw-space-60 ); padding-block-start: var( --gcw-space-40 ); border-block-start: 1px solid var( --gcw-border ); } .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 { margin: 0 0 var( --gcw-space-40 ); font-size: var( --gcw-text-2xl ); } /* ---- Pagination ------------------------------------------------------------ */ .woocommerce nav.woocommerce-pagination { margin-block-start: var( --gcw-space-50 ); } .woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var( --gcw-space-20 ); margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { margin: 0; padding: 0; border: 0; overflow: visible; list-style: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; /* 44px is the tap-target floor, expressed in the base size so it scales with a visitor's own type settings rather than pinning to one device. */ min-width: 2.75rem; min-height: 2.75rem; padding-inline: var( --gcw-space-20 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-pill ); background: var( --gcw-surface ); color: var( --gcw-ink-2 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 700; text-decoration: none; transition: border-color .16s ease, color .16s ease, background-color .16s ease; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var( --gcw-brand-strong ); color: var( --gcw-brand-strong ); } .woocommerce nav.woocommerce-pagination ul li span.current { border-color: transparent; background: var( --gcw-brand ); color: var( --gcw-brand-ink ); } /* ============================================================================ BEYOND THE CATALOGUE — cart, checkout and account ---------------------------------------------------------------------------- UNVERIFIED ON THE WITNESS. Kanele Arms runs WooCommerce in catalogue mode: `/cart/`, `/checkout/` and `/my-account/` all return 404 there, so none of what follows has been seen rendering on the site these rules were measured against. It is written from stock WooCommerce template markup and is correct to ship — other sites on the fleet do transact, and shipping a storefront sheet that stops at the product page would leave those shops half-dressed — but the first site that actually has a checkout is the one that proves it. ============================================================================ */ /* ---- Shop tables ( cart, checkout review, orders ) -------------------------- */ .woocommerce table.shop_table { width: 100%; margin: 0 0 var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); border-collapse: separate; border-spacing: 0; background: var( --gcw-surface ); overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var( --gcw-space-30 ); border: 0; border-block-end: 1px solid var( --gcw-border ); text-align: start; vertical-align: middle; font-size: var( --gcw-text-sm ); color: var( --gcw-ink-2 ); } .woocommerce table.shop_table thead th { background: var( --gcw-surface-2 ); font-family: var( --gcw-font-label ); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var( --gcw-ink ); } .woocommerce table.shop_table tbody tr:last-child td, .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce table.shop_table tfoot tr:last-child td { border-block-end: 0; } .woocommerce table.shop_table tfoot th { font-family: var( --gcw-font-label ); font-weight: 700; color: var( --gcw-ink ); } .woocommerce table.shop_table .product-thumbnail img { width: 4rem; border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface-2 ); } .woocommerce table.shop_table td.product-name a { color: var( --gcw-ink ); font-weight: 600; text-decoration: none; } .woocommerce table.shop_table td.product-name a:hover { color: var( --gcw-brand-strong ); } .woocommerce table.cart td.actions { display: flex; flex-wrap: wrap; gap: var( --gcw-space-30 ); align-items: center; background: var( --gcw-surface-2 ); } .woocommerce table.cart td.actions .coupon { display: flex; gap: var( --gcw-space-20 ); margin-inline-end: auto; } .woocommerce table.cart td.actions .coupon input.input-text { width: 12rem; } .woocommerce a.remove { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var( --gcw-radius-pill ); background: var( --gcw-surface-2 ); color: var( --gcw-ink-2 ); font-size: var( --gcw-text-lg ); line-height: 1; text-decoration: none; } .woocommerce a.remove:hover { background: var( --gcw-ink ); color: var( --gcw-on-dark ); } /* ---- Cart totals + checkout review ----------------------------------------- */ .woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: var( --gcw-space-40 ); } .woocommerce .cart_totals { padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); box-shadow: var( --gcw-shadow ); } .woocommerce .cart_totals h2, .woocommerce #order_review_heading { margin: 0 0 var( --gcw-space-30 ); font-size: var( --gcw-text-xl ); } .woocommerce .cart_totals table.shop_table { border: 0; margin: 0; } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td, .woocommerce .woocommerce-checkout-review-order-table .order-total th, .woocommerce .woocommerce-checkout-review-order-table .order-total td { font-size: var( --gcw-text-lg ); font-weight: 700; color: var( --gcw-ink ); } .woocommerce .wc-proceed-to-checkout { margin-block-start: var( --gcw-space-30 ); } .woocommerce .wc-proceed-to-checkout .checkout-button { display: flex; width: 100%; padding-block: 1rem; } /* ---- Checkout -------------------------------------------------------------- */ .woocommerce form.checkout { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: var( --gcw-space-50 ); align-items: start; } .woocommerce form.checkout .col2-set { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: var( --gcw-space-40 ); } /* `.col-1` / `.col-2` arrive carrying layout.css's 48% widths; the grid owns the columns now, so the widths are undone the same way the product page's are. */ .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { float: none; width: auto; } .woocommerce form.checkout h3, .woocommerce .woocommerce-billing-fields h3, .woocommerce .woocommerce-shipping-fields h3 { margin: 0 0 var( --gcw-space-30 ); font-size: var( --gcw-text-xl ); } .woocommerce #order_review { padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); box-shadow: var( --gcw-shadow ); } .woocommerce #payment { margin-block-start: var( --gcw-space-30 ); } .woocommerce #payment ul.wc_payment_methods { margin: 0 0 var( --gcw-space-30 ); padding: 0; border: 0; list-style: none; } .woocommerce #payment ul.wc_payment_methods li { margin: 0 0 var( --gcw-space-20 ); padding: var( --gcw-space-30 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-sm ); list-style: none; } .woocommerce #payment ul.wc_payment_methods li label { display: inline-flex; align-items: center; gap: var( --gcw-space-20 ); font-size: var( --gcw-text ); } .woocommerce #payment div.payment_box { margin: var( --gcw-space-20 ) 0 0; padding: var( --gcw-space-30 ); border-radius: var( --gcw-radius-sm ); background: var( --gcw-surface-2 ); color: var( --gcw-ink-2 ); font-size: var( --gcw-text-sm ); line-height: 1.6; } .woocommerce #payment #place_order { width: 100%; padding-block: 1rem; } .woocommerce .woocommerce-terms-and-conditions-wrapper { margin-block-end: var( --gcw-space-30 ); font-size: var( --gcw-text-sm ); } .woocommerce-checkout .woocommerce-form-login, .woocommerce-checkout .woocommerce-form-coupon, .woocommerce .checkout_coupon { margin: 0 0 var( --gcw-space-40 ); padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); } /* ---- Order received -------------------------------------------------------- */ .woocommerce ul.order_details { display: flex; flex-wrap: wrap; gap: var( --gcw-space-40 ); margin: 0 0 var( --gcw-space-40 ); padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); list-style: none; } .woocommerce ul.order_details li { font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); text-transform: uppercase; letter-spacing: .05em; color: var( --gcw-muted ); list-style: none; } .woocommerce ul.order_details li strong { display: block; margin-block-start: var( --gcw-space-20 ); font-size: var( --gcw-text-lg ); text-transform: none; letter-spacing: normal; color: var( --gcw-ink ); } /* ---- My account ------------------------------------------------------------ */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: var( --gcw-space-40 ); } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var( --gcw-space-20 ) var( --gcw-space-30 ); border-radius: var( --gcw-radius-sm ); color: var( --gcw-ink-2 ); font-family: var( --gcw-font-label ); font-size: var( --gcw-text-sm ); font-weight: 600; text-decoration: none; transition: background-color .16s ease, color .16s ease; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var( --gcw-surface-2 ); color: var( --gcw-ink ); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var( --gcw-brand-soft ); color: var( --gcw-brand-strong ); } .woocommerce-account .woocommerce-MyAccount-content { min-width: 0; } .woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-register { padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); } .woocommerce .woocommerce-form-login__rememberme, .woocommerce .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: var( --gcw-space-20 ); font-weight: 500; } .woocommerce .woocommerce-Address { padding: var( --gcw-space-40 ); border: 1px solid var( --gcw-border ); border-radius: var( --gcw-radius-md ); background: var( --gcw-surface ); } .woocommerce .woocommerce-Address address { font-style: normal; line-height: 1.8; } /* ---- Responsive ------------------------------------------------------------ */ @media ( min-width: 46em ) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc( 50% - ( var( --gcw-space-30 ) / 2 ) ); } .woocommerce form .form-row-first { float: left; } .woocommerce form .form-row-last { float: right; } .woocommerce form .form-row::after { content: ""; display: table; clear: both; } .woocommerce .cart-collaterals { grid-template-columns: minmax( 0, 1fr ) minmax( 20rem, 24rem ); align-items: start; } .woocommerce form.checkout .col2-set { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .woocommerce-account .woocommerce { grid-template-columns: minmax( 0, 14rem ) minmax( 0, 1fr ); gap: var( --gcw-space-50 ); } } @media ( min-width: 62em ) { .woocommerce form.checkout { grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); } .woocommerce form.checkout .col2-set { grid-column: 1; } .woocommerce form.checkout #order_review_heading, .woocommerce form.checkout #order_review { grid-column: 2; } } /* Below the fold of a phone, a shop table is the classic silent break: seven columns in a 390px viewport, and the whole page gains a horizontal scrollbar. WooCommerce writes `data-title` on every cell for exactly this reason, and `woocommerce-smallscreen.css` — which used it — is one of the sheets we drop. So the restack lives here: each row becomes a card, each cell a labelled line. */ @media ( max-width: 46em ) { .woocommerce table.shop_table thead { display: none; } .woocommerce table.shop_table tbody tr, .woocommerce table.shop_table tfoot tr { display: block; border-block-end: 1px solid var( --gcw-border ); } .woocommerce table.shop_table tbody td, .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { display: flex; align-items: center; justify-content: space-between; gap: var( --gcw-space-30 ); border-block-end: 0; text-align: end; } .woocommerce table.shop_table tbody td[data-title]::before { content: attr( data-title ); font-family: var( --gcw-font-label ); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var( --gcw-text-sm ); color: var( --gcw-muted ); text-align: start; } .woocommerce table.cart td.actions { display: block; } .woocommerce table.cart td.actions .coupon { margin: 0 0 var( --gcw-space-30 ); } .woocommerce table.cart td.actions .coupon input.input-text { width: auto; flex: 1 1 auto; } } /* ---- Motion ---------------------------------------------------------------- Everything above moves for a reason and none of the reasons survive a visitor who has asked it not to. -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { .woocommerce ul.products li.product, .woocommerce ul.products li.product img, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { transition: none; } .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:focus-within, .woocommerce ul.products li.product:hover img, .woocommerce a.button:hover, .woocommerce button.button:hover { transform: none; } }