/** * The shop and its category pages. * * Loaded after `landing.css`, which supplies the tokens, the type scale, the * eyebrow and lead, and the product card. This file holds only what a catalogue * has and the home page does not: the page frame, the category chips, the * toolbar and the grid's column count. Every size in it is one of the landing * page's tokens, so the spacing on the two pages is one system, not two that * happen to look alike. * * Scoped under `.pod-shop`, which `ShopModule` puts on the `` of the shop, * a category, a tag and a product search, and nowhere else. * * The rhythm, top to bottom: * * intro (eyebrow 8, title 16, lead) * 40 an introduction and what it introduces * chips, only when the header menu is collapsed (section 3) * 24 between controls * toolbar: count | search, sort * 24 * grid */ /* --- 1. The frame ---------------------------------------------------------- */ /* * White, like the home page. Astra's site background is a pale grey, which the * boxed layout used to cover with a white panel. Without the panel the grey * showed through, and white cards with borders on grey read as a dashboard. */ body.pod-shop, .pod-shop .site-content { background-color: var( --pod-surface ); } /* * The landing page's content column: 1200px wide including the gutter, so the * grid's first card lines up with where every heading on the home page starts. */ .pod-shop .site-content > .ast-container { box-sizing: border-box; max-width: var( --pod-container ); padding-inline: var( --pod-gutter ); } /* * The top matches the landing page's hero (56) and the bottom its sections (72). * On a phone the bottom takes the sections' two-thirds and the top stays 56, * the same as the landing page's hero there. */ .pod-shop #primary { margin-block: 0; padding-block: var( --pod-frame-top ) var( --pod-frame-bottom ); width: 100%; } @media ( max-width: 767px ) { .pod-shop #primary { padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm ); } } .pod-shop .woocommerce-products-header { margin: 0; padding: 0; } /* --- 2. The intro ---------------------------------------------------------- */ .pod-shop__intro { display: grid; gap: var( --pod-tight ); margin-bottom: var( --pod-break ); } .pod-shop .pod-eyebrow, .pod-shop .pod-shop__title, .pod-shop .pod-lead { margin: 0; } /* * Astra gives every link `transition: all`, which would fade the focus ring in; * the colour alone may ease, and the ring appears at once (§6). */ .pod-shop .pod-eyebrow a, .pod-shop .woocommerce-pagination .page-numbers a { transition: color var( --pod-fast ) var( --pod-ease ); } .pod-shop .pod-eyebrow a { color: inherit; text-decoration: none; } .pod-shop .pod-eyebrow a:hover, .pod-shop .pod-eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } .pod-shop .pod-eyebrow a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* * The Title tier (`docs/design-standards.md` §3), on the shop, a category and a * product search alike. It used to share the home hero's Display size, so a * catalogue page opened with a headline as loud as the shop front's. */ .pod-shop .pod-shop__title { color: var( --pod-ink ); font-size: var( --pod-title-size ); font-weight: 800; letter-spacing: var( --pod-title-tracking ); line-height: 1.08; text-wrap: balance; } /* The heading-to-lead gap is 16, the eyebrow-to-heading gap is 8: the grid gives 8, this adds the rest. */ .pod-shop .pod-lead { color: var( --pod-ink-soft ); margin-top: calc( var( --pod-near ) - var( --pod-tight ) ); max-width: var( --pod-measure-lead ); } /* --- 3. Category chips ----------------------------------------------------- */ /* * Filter chips, in the shape the page's buttons already use: a pill, one line, * the selected one filled in ink. 40px rather than the buttons' 48 because a row * of six at 48 reads as six calls to action. They are links, so they keep a full * 40px of height to hit, and 8px apart. */ .pod-chips { display: flex; flex-wrap: wrap; gap: var( --pod-tight ); margin-bottom: var( --pod-apart ); } .pod-chip { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-pill ); box-sizing: border-box; color: var( --pod-ink ); display: inline-flex; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; 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 ), color var( --pod-fast ) var( --pod-ease ); } .pod-chip:hover { background: var( --pod-surface-2 ); color: var( --pod-ink ); } .pod-chip:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-chip[aria-current="page"] { background: var( --pod-ink ); border-color: var( --pod-ink ); color: var( --pod-on-ink ); } /* * Only while the header's menu is folded away. * * On a desktop the header already lists every category, in the same order, * with the current one highlighted, so a row of chips under the intro said * the same thing twice. Once the menu collapses into the hamburger (tablets and * phones) the chips are the only way to change category without opening a * drawer, so there they stay. * * Keyed off Astra's own switch rather than a width of ours: its script swaps * `ast-desktop` for `ast-header-break-point` at whatever breakpoint the header is * set to collapse at, so the two change over at the same pixel. */ .ast-desktop .pod-chips { display: none; } /* --- 4. The toolbar -------------------------------------------------------- */ .pod-shop__toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: var( --pod-near ); justify-content: space-between; margin-bottom: var( --pod-apart ); } .pod-shop__count { color: var( --pod-ink-soft ); font-size: 0.9375rem; margin: 0; } .pod-shop__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var( --pod-tight ); } /* * Search and sort are the standard's compact field: 40px beside the 40px chips, * radius 12 and the `--pod-field-border` edge. They were pills with a * `--pod-line` border, which read as two more chips rather than as places to * type and choose, and which the eye could barely find on white. Both are * WooCommerce's own forms, restyled rather than replaced, so they keep working * exactly as they did. */ .pod-shop .woocommerce-product-search, .pod-shop .woocommerce-ordering { margin: 0; position: relative; } .pod-shop .woocommerce-product-search .search-field, .pod-shop .woocommerce-ordering .orderby { appearance: none; background-color: var( --pod-surface ); background-position: 14px center; background-repeat: no-repeat; background-size: 16px 16px; border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); /* 16px at least, or iOS zooms into the field (the phone root is 14.6px). */ font-size: var( --pod-field-size ); height: var( --pod-btn-compact-h ); line-height: 1.2; margin: 0; padding: 0 var( --pod-near ); /* Astra gives fields `transition: all`; focus must appear at once (§6). */ transition: none; } /* The standard's field focus; the transparent outline is for forced-colours mode. */ .pod-shop .woocommerce-product-search .search-field:focus, .pod-shop .woocommerce-ordering .orderby:focus { border-color: var( --pod-accent ); box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* A magnifier where the button was. */ .pod-shop .woocommerce-product-search .search-field { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357637a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E" ); padding-left: 40px; width: 15rem; } /* * The submit button, kept for assistive technology and hidden from sight: the * field submits on Enter like every search box, and a separate blue square * beside it was the heaviest thing on the old page. */ .pod-shop .woocommerce-product-search button[type="submit"] { background: none; border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .pod-shop .woocommerce-ordering .orderby { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357637a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" ); background-position: right 14px center; cursor: pointer; padding-right: 40px; } @media ( max-width: 599px ) { .pod-shop__controls, .pod-shop .woocommerce-product-search { flex: 1 1 100%; } .pod-shop .woocommerce-product-search .search-field { width: 100%; } } /* --- 5. The grid ----------------------------------------------------------- */ /* * The landing page's grid and card, four across on a desktop. * * `auto-fill` rather than the landing page's `auto-fit`: a category with one * product keeps a card of normal width instead of one stretched across the * page. The 15rem floor gives four columns in the 1136px column, three on a * tablet. A phone gets two, because a one-column shop is a lot of scrolling * for fourteen products. */ .pod-shop .pod-shop__grid { grid-template-columns: repeat( auto-fill, minmax( min( 100%, 15rem ), 1fr ) ); list-style: none; margin: 0; padding: 0; } .pod-shop__item { display: flex; margin: 0; } .pod-shop__item > .pod-card { flex: 1; } @media ( max-width: 599px ) { .pod-shop .pod-shop__grid { gap: var( --pod-near ); grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .pod-shop .pod-card__name { font-size: 0.9375rem; } } /* --- 6. Pagination --------------------------------------------------------- */ .pod-shop .woocommerce-pagination { margin-top: var( --pod-break ); } .pod-shop .woocommerce-pagination ul.page-numbers { border: 0; display: flex; gap: var( --pod-tight ); justify-content: center; } .pod-shop .woocommerce-pagination ul.page-numbers li { border: 0; } .pod-shop .woocommerce-pagination .page-numbers a, .pod-shop .woocommerce-pagination .page-numbers span { align-items: center; border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: inline-flex; font-weight: 600; justify-content: center; min-height: var( --pod-btn-compact-h ); min-width: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); } .pod-shop .woocommerce-pagination .page-numbers a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-shop .woocommerce-pagination .page-numbers span.current { background: var( --pod-ink ); border-color: var( --pod-ink ); color: var( --pod-on-ink ); } @media ( prefers-reduced-motion: reduce ) { .pod-chip { transition: none; } }