/* ══════════════════════════════════════════════════════════════════════ THE PRODUCT PAGE Almost nothing. That is the point. The buy column now emits the concept's own elements in the concept's own order — h1, .pdp-full, .chips, .pdp-price, .pdp-actions, .pricebreak, .pdp-assure, .pdp-note — so concept.css:1660-1724 styles all of it directly and there is no second copy of those rules to keep in sync. What is left here is two things that only exist because the markup changed underneath rules that are still in style.css, which this file does not own. Both blocks are meant to be DELETED, from here and from style.css, the moment that file catches up. Each says which lines. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. the flex column, stood down ─────────────────────────────────────── style.css:632-648 makes .summary a flex column and hands its children an `order` each, because WooCommerce's DOM order used to disagree with the design's. It no longer does: the pieces are printed in the concept's sequence, by callbacks at the priorities that produce it. Left in place, that rule would now scramble what it used to fix — every element the concept adds (.pdp-full, .pdp-price, .pdp-actions) is unmatched by the list and lands on the catch-all `order:60`, i.e. after the price break. So the column goes back to being what it is in the concept: normal block flow, in source order. Delete with style.css:626-648. */ body.single-product div.product div.summary{ display:block; } .pdp-buy .summary > *{ order:0; } /* The form is now one flex row — .pdp-actions (concept.css:1688) — rather than two floated children, and it brings its own 22px of top margin. Without this the margin is paid twice. Delete with style.css:700-706. The rest of this rule is a name collision, not a layout choice. concept.css:137 declares `.cart` — the header's cart chip: a 40×40 grid box with a 12px radius, `place-items:center` and a wash on hover. The concept has exactly one `.cart` on a page and it is that chip. WooCommerce's add-to-cart form is `
`, so on a product page the design's header chip lands on the buy row: the form became a 40×40 square, and the stepper and the "Add to cart" pill hung outside it, the pill squeezed to 89px with its label broken over three lines. `display:block` alone was not enough — the width and height still applied, and `place-items:center` shrink-wrapped and centred .pdp-actions inside whatever was left. So the chip's box is undone here and only here. Nothing is restyled: every line below is the initial value, handing the row back to concept.css:1688 and :1714, which then measure it exactly as they do in the concept. */ body.single-product div.product form.cart{ display:block; margin:0; width:auto; height:auto; place-items:normal; border-radius:0; background:none; } body.single-product div.product form.cart:hover{ background:none; } /* ── 2. the quantity pill, handed back to concept.css ───────────────────── The stepper is `.step` now (concept.css:1699), which is the class the design has always used for it. style.css:708-732 draws the same pill a second time at higher specificity — a workaround for a `.step` name collision in concept.css that no longer exists; the process card was renamed `.hiw` precisely to end it, and concept.css:2125 says so. Those 25 lines are now dead weight, and the one place they still disagree with the design is visible: `border:0` on the input drops the two hairlines either side of the number, and the field is 2px narrow for three digits. This hands both back. It re-states nothing that concept.css does not already say — it only wins the specificity argument until style.css:708-732 is deleted, at which point this goes with it. */ body.single-product div.product form.cart div.quantity.step input.qty{ width:58px; font-size:16px; border-left:1px solid var(--line); border-right:1px solid var(--line); } /* ── 3. the price-break footnote ────────────────────────────────────────── New element, so concept.css has no rule for it. It sits between .pb-table and .pb-bogo inside the same card and takes the table's own measure — the 18px side padding .pb-table th/td use (concept.css:585) — so the sentence lines up with the column it is explaining. It exists because the table's rows are quantities under a stepped discount: "each" is an average across the order, and a price table that does not say so is the same kind of half-truth the old per-band column was. */ .pb-note{ margin:0; padding:10px 18px 13px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--muted); } /* ══════════════════════════════════════════════════════════════════════ VARIABLE PRODUCTS — the attribute selectors 18 of production's 39 published products are variable and the concept has no drawing of one, because the page generator flattened every variable product to its first price before the design was made. So this is the one part of the product page with no picture to copy, and the rule it is built to is the same one the review band is built to: invent no VALUES. Every colour, radius, measure, easing and shadow below is a concept.css token, and the shapes are the ones the design already uses — `.chip` (concept.css:1804) for the option, `.f input:focus` (concept.css:655) for the focus ring, `.f label` (:648) for the field label, `.pill` for the state. ── What the markup is, and what may not be assumed about it ────────── It is WooCommerce's, untouched. inc/product.php explains at length why not one core template is overridden; the consequence HERE is that the selectors arrive inside `` with `
` and ``, and that table has to be laid out as a field stack without being replaced. `display:block` on the table parts does exactly that, and it keeps every selector a plugin might use. The second consequence is that these rules must survive core rewriting the