/* * woocommerce.css — the Woo → design-system map, and the product page's own * layout system. * * Why this file exists separately from commerce.css: * commerce.css holds the design system's own commerce vocabulary * (.nk-product-card, .nk-price, .nk-stock, .nk-gallery …) and is used on the * homepage rails and category pages, where Woo's stylesheet is absent. This * file holds the rules that translate WooCommerce's own markup * (.woocommerce div.product, .single_add_to_cart_button, .variations …) into * that vocabulary, plus the panels the PDP is composed from. Keeping the two * apart means a Woo upgrade never forces an edit to a file the rest of the * store depends on. * * Cascade position: last of the component files, immediately before motion.css * — so it can out-specify any of our own components on a commerce route * without reaching for !important. It still has to beat WooCommerce's own * stylesheets, which are enqueued separately and win on specificity in places. * Raise specificity or dequeue the offending Woo style; never !important. * * --------------------------------------------------------------------------- * TWO SELECTOR TRAPS ON THIS ROUTE, both of which fail silently: * * 1. `.woocommerce` is a class on , not a wrapper inside it. So * `body.single-product .woocommerce …` matches nothing at all. The * template's own container is `.nk-product-main`. * * 2. WooCommerce Blocks' legacy-template compat sheet ships selectors like * .woocommerce :where(div[data-block-name="woocommerce/legacy-template"]) * div.product form.cart div.quantity { display: inline-block } * `:where()` contributes nothing, but the rest is (0,4,3) and beats an * ordinary (0,2,1) rule of ours. Out-specify it on the type count. * * --------------------------------------------------------------------------- * THE PAGE IS BUILT FROM PANELS. * * Laid out as a continuous column of headings and paragraphs the page read * like a newspaper — nothing told a scanning parent where "choosing" ended and * "reading" began. Every major block is a raised surface with its own padding * and shadow (`.nk-panel`), and the one place a purchase decision happens is * the only block on an accent ground (`.nk-buy-panel`). Shadow does the * separating; `nk_divider()` marks the single seam where the product ends and * the shop resumes. * * Registered as 'nk-woocommerce' in the $styles array in functions.php. */ /* ======================================================================= * SHELL * ===================================================================== */ body.single-product { background-color: var(--nk-surface-page); color: var(--nk-text-default); } body.single-product .nk-product-main { inline-size: min(100%, var(--nk-container-max)); margin-inline: auto; padding-inline: var(--nk-gutter); padding-block: var(--nk-space-3) var(--nk-section-gap); } /* * Woo's notices are styled in `feedback.css`, unscoped, mapped onto * `.nk-alert`. They lived here scoped to `body.single-product` until * 2026-08-23, which is why the cart and the checkout showed Woo's own grey bar * — the rules were right and simply did not reach the other routes. The only * product-page-specific part left is the space below one. */ body.single-product .woocommerce-notices-wrapper { margin-block-end: var(--nk-space-5); } /* Below 768px the fold is spent on the price, not the category path — hidden outright rather than kept to one scrolling line. Visual only: the markup still renders server-side (`nk_product_breadcrumb_defaults()` in `inc/product.php`), and WooCommerce's BreadcrumbList JSON-LD is a separate script on `wp_footer` keyed off the same trail data, not this `