/* ============================================================ Stepace — Commerce surface polish Shop archive + the BLOCK cart/checkout. Why this file exists: the cart and checkout are WooCommerce *block* pages, so none of the bespoke store templates apply to them. Before this file there was not a single `wc-block` rule in the theme, so everything below the page title was stock WooCommerce chrome sitting inside a Futura/black/orange site. Shape rule followed throughout (matches the rest of the site): buttons -> pill (--radius-pill) inputs -> 2px (--radius-xs, sharp/editorial) panels -> square, hairline rules instead of cards ============================================================ */ :root { --sp-c-ink: #0B0B0B; --sp-c-ink-soft: #262626; --sp-c-muted: #6B6B6B; /* 4.9:1 on white - AA body */ --sp-c-line: rgba(11, 11, 11, 0.14); --sp-c-line-solid: #DADADA; --sp-c-paper: #FFFFFF; --sp-c-sunken: #F0F0F0; --sp-c-orange: #E7511F; --sp-c-orange-dp: #C33F13; } /* The block cart/checkout render outside .sp-root's font scope in a few places (portalled notices, selects), and itself has no family set, so those fall back to Times. Anchor it once. */ body.woocommerce-cart, body.woocommerce-checkout { font-family: "Futura Cyrillic", "Helvetica Neue", Arial, sans-serif; } /* ------------------------------------------------------------ 1. SHOP ARCHIVE ---------------------------------------------------------- */ /* The grid shipped with row-gap 6px against column-gap 24px, so product meta collided with the next row's image and the whole grid read as ragged. Rows need MORE air than columns here, because each row ends in text. */ .sa-grid { row-gap: 48px; column-gap: 24px; align-items: start; } @media (max-width: 767px) { .sa-grid { row-gap: 32px; } } /* Stock WooCommerce pagination: light 1px boxes, system font. Rebuilt as brand numerals on a hairline rule. */ .woocommerce-pagination { margin: 56px 0 0; } .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; } .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--sp-c-line); border-radius: 999px; background: transparent; color: var(--sp-c-ink); font-family: "Futura Cyrillic", Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.25, 1), color 160ms cubic-bezier(0.2, 0.7, 0.25, 1), border-color 160ms cubic-bezier(0.2, 0.7, 0.25, 1); } .woocommerce-pagination .page-numbers:hover, .woocommerce-pagination .page-numbers:focus-visible { border-color: var(--sp-c-ink); background: var(--sp-c-ink); color: #FFFFFF; } .woocommerce-pagination .page-numbers.current { border-color: var(--sp-c-ink); background: var(--sp-c-ink); color: #FFFFFF; } .woocommerce-pagination .page-numbers.dots { border-color: transparent; min-width: 20px; padding: 0; } /* Catalog ordering