/* Theme Name: Rosen Description: The concept design, over real WooCommerce. Built for the demo store first, where breaking it is free — and it is the first half of R12. Version: 0.2.40 */ /* The design system is imported UNCHANGED from the concept. 116 KB of decisions — the palette, the type scale, the contrast audit that passes on 38 colour pairs, the mobile drill-down — none of it is retyped here. When the concept is rebuilt, this file is replaced by a copy and the theme inherits every change. That is the whole point of reusing it verbatim rather than "porting" it. */ @import url('concept.css?ver=0.2.40'); /* The decorative cards must not impose a 300px minimum on the hero copy. */ @media (max-width: 980px) { .rwd-hero .libhero-inner { grid-template-columns: minmax(0, 1fr); } .rwd-hero-copy, .rwd-fan { min-width: 0; } .rwd-fan-inner { width: min(300px, 100%); } } /* ══════════════════════════════════════════════════════════════════════════ CART — bridging rules only. Nothing here restyles the design; every rule exists because WooCommerce emits markup the concept never had (a notice div, a totals table, a core stylesheet with !important in it). No new colours: every value is a token from concept.css, so the contrast audit still covers all of it. ══════════════════════════════════════════════════════════════════════════ */ /* concept.css line 1596 gives `.line` a 56px bottom margin for the three Rosen Screw bands on the product story page. It is declared after the cart's `.line`, so cart rows inherit it and the `.lines` card tears apart. Scoped back to zero rather than touched in concept.css, which is read-only. */ .lines > .line { margin-bottom: 0; } /* WooCommerce labels the quantity field and the coupon field with `.screen-reader-text` and expects the theme to hide it. concept.css has no such class — it never had WooCommerce's markup to hide — so without this the words "Qty" and "Coupon:" sit in the middle of the cart. Scoped to the cart rather than declared globally so it cannot collide with the rest of R12. */ .shop-main .screen-reader-text, .state .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── the two money lines ────────────────────────────────────────────────── The wallet's "$150 of your credit is applied" and the loyalty programme's "you are $4,750 from Gold" reach the page as wc_print_notice() output on woocommerce_before_cart — a `.woocommerce-message` and a `.woocommerce-info`. These rules are what turn them into the concept's `.credit-banner` and `.rwd-line`. The icon is a ::before rather than a flex child so the message text keeps its own inline flow: the loyalty line contains several elements, and a flex container would blow each of them onto its own row. */ .shop-main .woocommerce-message, .shop-main .woocommerce-info, .shop-main .woocommerce-error, .state .woocommerce-info { position: relative; margin: 0 0 16px; padding: 15px 17px 15px 63px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); list-style: none; } .shop-main .woocommerce-message::before, .shop-main .woocommerce-info::before, .state .woocommerce-info::before { content: ""; position: absolute; left: 16px; top: 13px; width: 36px; height: 36px; border-radius: 11px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 19px 19px; } /* success = the credit that is coming off this order */ .shop-main .woocommerce-message { background: var(--green-soft); border: 1px solid #d7e8bf; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .shop-main .woocommerce-message::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7324' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h12a2 2 0 012 2'/%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M16 13h3'/%3E%3C/svg%3E"); } .shop-main .woocommerce-message strong { color: var(--ink); } /* the "Save it for later instead" toggle, pinned right as in the concept */ .shop-main .woocommerce-message > a { margin-left: auto; font-weight: 600; color: var(--green-ink); white-space: nowrap; } .shop-main .woocommerce-message > a:hover { text-decoration: underline; text-underline-offset: 3px; } /* info = the rewards line, and anything else the plugins say in passing */ .shop-main .woocommerce-info, .state .woocommerce-info { background: linear-gradient(148deg, #F7FBF0 0%, #EFF7E4 100%); border: 1px solid #d7e8bf; } .shop-main .woocommerce-info::before, .state .woocommerce-info::before { background-color: #fff; box-shadow: inset 0 0 0 1px #d7e8bf; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7324' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E"); } .shop-main .woocommerce-info strong, .state .woocommerce-info strong { color: var(--ink); font-weight: 650; } .shop-main .woocommerce-info a, .state .woocommerce-info a { font-weight: 600; color: var(--green-ink); } /* errors must not read as good news: no green, no reward icon */ .shop-main .woocommerce-error { background: #fdf4f3; border: 1px solid #f0cdc8; padding-left: 17px; margin-bottom: 16px; } .shop-main .woocommerce-error li { list-style: none; } /* The empty-cart template keeps do_action( 'woocommerce_cart_is_empty' ) so cart.js can still swap the page in over AJAX, but core's own sentence says exactly what the

underneath already says. Only that one notice is hidden — anything else hooked there still renders, styled above. */ .state .cart-empty { display: none; } /* Core wraps the return-to-shop link in a

that plugins target. Kept, but taken out of the flex flow so the button lines up with the one beside it instead of sitting in a paragraph of its own. */ .state-actions .return-to-shop { display: contents; } /* ── the quantity stepper ───────────────────────────────────────────────── WooCommerce names the number INPUT `qty`; the design system names the stepper CONTAINER `.qty`. Both selectors therefore hit the input, and woocommerce.css wins the width with `.woocommerce .quantity .qty`. These rules restate the concept's input geometry at a specificity that holds. */ .lines .qty .quantity { display: flex; margin: 0; width: auto; float: none; } .lines .qty input.qty { display: block; width: 44px; height: 36px; padding: 0; border: 0; border-radius: 0; text-align: center; font: 500 14px/1 inherit; color: var(--ink); background: #fff; -moz-appearance: textfield; } .lines .qty input.qty::-webkit-outer-spin-button, .lines .qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lines .qty input.qty:focus { outline: none; background: var(--green-soft); } /* the dividers only make sense once the − / + buttons are actually there, which the template's script signals with this attribute */ .lines .qty[data-rosen-stepper] input.qty { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } /* ── remove ─────────────────────────────────────────────────────────────── woocommerce.css sets `a.remove{color:red!important}` and a red hover fill. Matching `.line-x` means answering !important with !important; there is no other way to win against a core declaration we do not own. */ .line .product-remove { display: flex; } .line .product-remove a.remove { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 20px; line-height: 1; text-decoration: none; color: var(--muted) !important; background: transparent !important; } .line .product-remove a.remove:hover { color: var(--ink) !important; background: var(--wash) !important; } /* ── coupon and "Update cart" ───────────────────────────────────────────── The concept has no such row, but dropping the form controls would drop coupons and the only no-JS way to change a quantity. It sits inside the `.lines` card as its last row, on the wash, so it reads as part of it. */ .cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--wash); } .cart-actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 240px; min-width: 0; } .cart-actions .coupon .input-text { /* basis 0, not auto: an 's intrinsic width is wide enough to push "Apply coupon" onto its own line on a phone. */ flex: 1 1 0; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 400 14px/1 inherit; color: var(--ink); } .cart-actions .coupon .input-text:focus { outline: none; border-color: var(--green-ink); } /* `button.button` rather than `.button`: woocommerce.css claims the same element with `.woocommerce button.button`, which outranks a two-class selector and would put its own purple back. */ .cart-actions button.button { height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--green-ink); font: 600 13.5px/1 inherit; cursor: pointer; transition: background .18s var(--ease); } .cart-actions button.button:hover { background: var(--green-soft); } .cart-actions button.button[disabled] { opacity: .45; cursor: default; } .cart-actions button.button[disabled]:hover { background: #fff; } .cart-actions__update { margin-left: auto; } .cart-actions .coupon-error-notice { flex: 1 0 100%; margin: 0; font-size: 12.5px; color: #a3261c; } /* ── the summary panel ──────────────────────────────────────────────────── cart-totals stays a because cart/cart-shipping.php — a template this theme does not override — emits a bare . The rows are laid out as the concept's `.sum-row` pairs instead of being re-marked-up, so the shipping row, the tax rows and the negative-fee credit row all still land. The selectors carry the `.shop-side` prefix deliberately. woocommerce.css styles this table as `.woocommerce table.shop_table td` — three components to our two — and would otherwise win the padding and the cell borders back, and woocommerce-layout.css floats `.cart-collaterals .cart_totals` right at 48% width, which would tear the sidebar in half. Specificity, not !important: the losing rules still apply anywhere else on the site. */ .shop-grid .shop-side.cart-collaterals .cart_totals, .shop-grid .shop-side.cart-collaterals .cross-sells { float: none; width: 100%; } .shop-side .cart_totals table.sum-table { display: block; width: 100%; border: 0; margin: 0; } .shop-side .cart_totals .sum-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; font-size: 14.5px; border: 0; } .shop-side .cart_totals .sum-table th, .shop-side .cart_totals .sum-table td { padding: 0; border: 0; background: none; font-size: inherit; line-height: 1.5; } .shop-side .cart_totals .sum-table th { font-weight: 400; text-align: left; color: var(--body); } .shop-side .cart_totals .sum-table td { font-weight: 600; text-align: right; color: var(--ink); } /* the credit and any coupon are negative — the concept colours them green */ .shop-side .cart_totals .sum-row--credit th, .shop-side .cart_totals .sum-row--credit td { color: var(--green-ink); } .shop-side .cart_totals .sum-table tr.order-total { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; } .shop-side .cart_totals .order-total td { font-size: 24px; letter-spacing: -.02em; } .shop-side .cart_totals .order-total td small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); } /* shipping and the shipping calculator carry a list or a whole form in the right-hand cell, so those rows stack instead of sitting on one line */ .shop-side .cart_totals .sum-table tr.shipping { flex-direction: column; align-items: stretch; } .shop-side .cart_totals .sum-table tr.shipping td { text-align: left; font-weight: 400; margin-top: 6px; } .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; font-weight: 400; color: var(--body); } .cart_totals #shipping_method input { accent-color: var(--green-ink); } .cart_totals .woocommerce-shipping-destination { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); } /* woocommerce_proceed_to_checkout prints `a.checkout-button` — the design's primary block button, which we cannot add a class to from a hook. */ .cart_totals .wc-proceed-to-checkout { margin-top: 18px; } .shop-side .cart_totals a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 28px; border-radius: 100px; background: var(--green-ink); color: #fff; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; box-shadow: 0 8px 20px rgba(74, 115, 36, .24); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .shop-side .cart_totals a.checkout-button:hover { background: var(--green-ink); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(74, 115, 36, .32); } /* Cross-sells share woocommerce_cart_collaterals with the totals, so if the store ever switches them on they land in a 372px column. One per row. */ .shop-side .cross-sells { margin-top: 24px; } .shop-side .cross-sells h2 { font-size: 18px; margin-bottom: 14px; } .shop-side .cross-sells ul.products { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; } @media (max-width: 620px) { /* concept.css drops the stepper and the total to a second row at this width using `.line-x`; WooCommerce's remove link lives in `.product-remove`, so it takes the same slot. */ .line .product-remove { grid-column: 3; grid-row: 1; justify-self: end; } .cart-actions__update { margin-left: 0; width: 100%; } .cart-actions .coupon { flex: 1 1 100%; } } /* ══════════════════════════════════════════════════════════════════════════ CHECKOUT AND THANK YOU concept.css styles the concept's OWN markup (.sum-row, .mini, .pick, .f). WooCommerce emits different markup for the same things and cannot be made to emit the concept's without rewriting templates that carry the nonce, the gateways and the credit fee. So the markup stays WooCommerce's and these rules map it onto the concept — no new colours, no new easings, only the tokens already in :root. ══════════════════════════════════════════════════════════════════════════ */ /* Present to a screen reader, absent to the eye: the review table needs column headers, the concept draws none. */ .rosen-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ── woocommerce-layout.css still loads, and it floats the checkout into the two columns of a 2013 theme. Undo that inside our grid only, so nothing else on the site changes. ─────────────────────────────────────────── */ .co-grid .col2-set, .co-grid .col2-set .col-1, .co-grid .col2-set .col-2, .co-grid #order_review, .co-grid #customer_details{float:none; width:100%} .co-main .col2-set{display:block} /* the second step is the last thing in the column — no rule under it */ .co-main .col-2.co-step{border-bottom:0; margin-bottom:0; padding-bottom:0} .co-aside .co-step-head h2{margin-bottom:0} /* The summary is sticky per the concept. A sticky box taller than the viewport pins at the top and its bottom becomes unreachable — and the bottom of this one is the Place order button. Capping it makes the card scroll instead. */ .co-aside .sum{max-height:calc(100vh - 106px); overflow-y:auto; overscroll-behavior:contain} @media (max-width:1000px){ .co-aside .sum{max-height:none; overflow:visible} } /* ── WooCommerce's form rows, wearing the concept's .f ──────────────────── */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:16px} .co-main .form-row{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; grid-column:1 / -1} .co-main .form-row-first, .co-main .form-row-last{grid-column:auto} .co-main .form-row label{font-size:13.5px; font-weight:600; color:var(--ink)} .co-main .form-row label .required, .co-main .form-row abbr{ color:var(--green-ink); text-decoration:none; border:0; } .co-main .form-row .input-text, .co-main .form-row select, .co-main .form-row textarea{ width:100%; font:400 15.5px/1.4 inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 14px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .co-main .form-row textarea{min-height:96px; resize:vertical} .co-main .form-row .input-text::placeholder{color:#98a3aa} .co-main .form-row .input-text:focus, .co-main .form-row select:focus, .co-main .form-row textarea:focus{ outline:none; border-color:var(--green-ink); box-shadow:0 0 0 4px rgba(140,192,84,.22); } .co-main .woocommerce-input-wrapper{display:block} /* select2 is enqueued by WooCommerce for country/state and cannot be styled through the
: the table reset, and the totals rows. Item-row geometry now lives in concept.css and css/commerce.css. */ .rosen-review{width:100%; border-collapse:collapse} .rosen-review th, .rosen-review td{padding:9px 0; font-size:14.5px; vertical-align:middle} .rosen-review th{text-align:left; font-weight:400; color:var(--body)} .rosen-review td{text-align:right; font-weight:600; color:var(--ink)} .rosen-review tbody{border-bottom:1px solid var(--line)} .rosen-review tbody td{padding:7px 0} /* The name is a grid item in a `1fr` track: without this a long unbroken SKU would size the track to itself and push the figure off the panel. Its `font-weight` is reset because the cell it sits in is a
, which line 442 makes semibold — the concept's item names are regular. */ .rosen-review .mini-name{min-width:0; font-weight:400} /* Core's variation/item-data list, which the concept's summary never shows and so never styled. Kept: `wc_get_formatted_cart_item_data()` emits it for any variable product or any plugin that adds line data. */ .rosen-review .mini-name dl{margin:2px 0 0; font-size:11.5px; color:var(--muted)} .rosen-review .mini-name dt, .rosen-review .mini-name dd{display:inline; margin:0} /* Only rendered when a plugin has rewritten woocommerce_checkout_cart_item_quantity — review-order.php shows the quantity as the badge on the thumbnail otherwise. */ .rosen-review .product-quantity{font-weight:600; color:var(--muted)} .rosen-review .order-total th, .rosen-review .order-total td{ padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:var(--ink); } .rosen-review .order-total td, .rosen-review .order-total td .amount{ font-size:24px; font-weight:600; letter-spacing:-.02em; } .rosen-review .order-total td small{display:block; font-size:12px; font-weight:400; color:var(--muted)} /* The delivery choices live in a cell of that table. The cell's own alignment is css/commerce.css's — it puts the picker back on the right, with the label column beside it, and the `text-align:left` that used to sit here was inert the moment it did. */ .rosen-review #shipping_method{list-style:none; margin:0; padding:0; display:grid; gap:7px} .rosen-review #shipping_method li{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:400; color:var(--body); } .rosen-review #shipping_method input{accent-color:var(--green-ink); width:16px; height:16px; flex:none} .rosen-review #shipping_method label{cursor:pointer} .rosen-review .woocommerce-shipping-destination{margin:8px 0 0; font-size:12.5px; color:var(--muted)} /* ── the payment box, wearing the concept's .pick ───────────────────────── */ .woocommerce-checkout-payment{margin-top:20px} .wc_payment_methods{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px} .wc_payment_methods > li{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:border-color .18s var(--ease), background .18s var(--ease); } .wc_payment_methods > li:hover{border-color:#c9d3c0} /* :has() is how the selected method gets the concept's green card without JS. Where it is unsupported the row simply stays neutral — nothing breaks. */ .wc_payment_methods > li:has(input:checked){border-color:var(--green-ink); background:var(--green-soft)} .wc_payment_methods > li > label{ display:flex; align-items:center; gap:10px; margin:0; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; } .wc_payment_methods input[type=radio]{accent-color:var(--green-ink); width:17px; height:17px; flex:none} .wc_payment_methods img{max-height:24px; width:auto; margin-left:auto} .payment_box{margin:11px 0 0; padding:0; font-size:13.5px; line-height:1.55; color:var(--muted)} .payment_box p:last-child{margin-bottom:0} .woocommerce-terms-and-conditions-wrapper{margin-bottom:16px; font-size:13.5px; color:var(--muted)} .woocommerce-terms-and-conditions-wrapper .form-row{margin:0} .woocommerce-terms-and-conditions-wrapper label{display:flex; align-items:flex-start; gap:9px; cursor:pointer} .woocommerce-terms-and-conditions-wrapper input{accent-color:var(--green-ink); margin-top:2px} /* Place order. WooCommerce hard-codes class="button alt" on this and the markup comes from a filter in payment.php, so the concept's .btn is applied by id. */ #place_order{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:0; cursor:pointer; background:var(--green-ink); color:#fff; font:600 16px/1 inherit; padding:16px 28px; border-radius:100px; box-shadow:0 8px 20px rgba(74,115,36,.24); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } #place_order:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(74,115,36,.32)} #place_order:active{transform:translateY(0) scale(.985)} #place_order:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none} /* ── thank you ─────────────────────────────────────────────────────────── */ /* order-received.php is a

and stays a

so its filter keeps working; the concept's headline size is applied to it rather than replacing it with an h1. */ .thanks-head p{ margin:0; font-size:clamp(30px,3.6vw,42px); line-height:1.1; font-weight:600; color:var(--ink); letter-spacing:-.02em; } .thanks-tick--failed{background:#fdecec; color:#a3241f} .woocommerce-order-overview{list-style:none; margin:0; padding:0} .woocommerce-order-overview li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; font-size:14.5px; color:var(--body); border-top:1px solid var(--line); } .woocommerce-order-overview li:first-child{border-top:0; padding-top:0} .woocommerce-order-overview li:last-child{padding-bottom:0} .woocommerce-order-overview li strong{font-weight:600; color:var(--ink); text-align:right} /* Everything hung on woocommerce_thankyou lands here — the order table, the customer address block, and the tracking number the PayPal sync writes. */ .thanks-details{margin-top:30px; text-align:left} .thanks-details:empty{margin-top:0} .thanks-details h2, .thanks-details .woocommerce-column__title{font-size:18px; margin:30px 0 14px} .thanks-details table.shop_table{width:100%; border-collapse:collapse; font-size:14.5px} .thanks-details table.shop_table th{ text-align:left; font-weight:400; color:var(--body); padding:10px 0; border-top:1px solid var(--line); } .thanks-details table.shop_table td{ text-align:right; font-weight:600; color:var(--ink); padding:10px 0; border-top:1px solid var(--line); } .thanks-details table.shop_table thead th{ font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-top:0; padding-top:0; } .thanks-details .woocommerce-customer-details address{ font-style:normal; line-height:1.6; color:var(--body); border:1px solid var(--line); border-radius:var(--radius); padding:18px; } /* ══════════════════════════════════════════════════════════════════════════ SINGLE PRODUCT — bridging rules only. concept.css already carries .pdp, .pricebreak, .specs, .brands and .vid, and none of it is restated here. What it does not carry is WooCommerce's own class names, because the concept was a static page with no add-to-cart form, no gallery and no tabs. Two jobs, then: 1. Dress WooCommerce's markup in shapes concept.css already defines. 2. Win against woocommerce.css and woocommerce-layout.css, which float the summary to 48%, tint the price #77a464 (2.6:1 on white — it would fail the audit the palette passed) and draw the tabs as pink folder corners. Those are core declarations we do not own, so the selectors below carry `body.single-product div.product …` purely to out-specify them. That is the reason for the long selectors, not carelessness. No new colours: every value is a token from concept.css or a literal already in it, so the 38-pair contrast audit still covers all of it. ══════════════════════════════════════════════════════════════════════════ */ /* The shop wrapper from functions.php is a max-width column with 96px of padding. The product page is a full-bleed page whose own sections carry the measure — without this the .pdp-grid is padded twice and the wash bands behind the video and the compatibility list stop reaching the edges. */ body.single-product .shop-page{max-width:none; padding:0} /* Notices land before the product, outside every section, so they need the measure put back. This is where the wallet would speak if it ever spoke on a product page. */ body.single-product .shop-page > .woocommerce-notices-wrapper:not(:empty){ max-width:var(--max); margin:0 auto; padding:22px 28px 0; } /* woocommerce_breadcrumb (before_main_content, priority 20) wearing the concept's .crumbs--light. Kept as WooCommerce's own breadcrumb rather than re-implemented, so category and shop-base changes keep flowing through. */ body.single-product .woocommerce-breadcrumb{ max-width:var(--max); margin:0 auto; padding:26px 28px 0; font-size:13px; line-height:1.5; color:var(--muted); } body.single-product .woocommerce-breadcrumb a{color:inherit} body.single-product .woocommerce-breadcrumb a:hover{text-decoration:underline; text-underline-offset:3px} /* ── the media stage ────────────────────────────────────────────────────── Whatever renders in the gallery slot — the concept's single image on the demo, WooCommerce's real gallery on production — has to sit on the stage rather than float beside it. */ body.single-product div.product div.images, body.single-product .pdp-media .woocommerce-product-gallery{ float:none; width:100%; max-width:100%; margin:0; } body.single-product .pdp-media .woocommerce-product-gallery__wrapper{margin:0} body.single-product .pdp-media .flex-viewport, body.single-product .pdp-media .woocommerce-product-gallery__image img{margin-inline:auto} /* the gallery thumbnails are a strip under the stage, not a second stage */ body.single-product .pdp-media .flex-control-thumbs{ display:flex; gap:8px; justify-content:center; margin:14px 0 0; padding:0; list-style:none; } body.single-product .pdp-media .flex-control-thumbs li{width:52px; margin:0} /* the sale flash, which core draws as a pink circle */ body.single-product div.product span.onsale{ position:absolute; top:16px; left:16px; right:auto; z-index:2; min-height:0; min-width:0; margin:0; padding:6px 12px; line-height:1; border-radius:100px; background:var(--green-ink); color:#fff; font:600 11px/1 inherit; letter-spacing:.05em; text-transform:uppercase; } /* ── the buy column ─────────────────────────────────────────────────────── WooCommerce emits title → rating → price → excerpt → form → meta. The concept reads title → full name → chips → price → form → price breaks. The difference is closed with `order` on a flex column, so the hook is fired once and whole and no callback is called out of turn. Everything the template adds is printed AFTER the hook, so the DOM order stays a sensible linear read and only non-focusable blocks (the chips, the price-break table) move visually. Tab order and visual order still agree. */ body.single-product div.product div.summary{ float:none; width:auto; margin:0; clear:none; display:flex; flex-direction:column; } /* anything a plugin registers between priority 30 and 60 keeps its DOM order, after the form and before the assurances */ .pdp-buy .summary > *{order:60} .pdp-buy .summary > .product_title{order:10} .pdp-buy .summary > .woocommerce-product-rating{order:20} .pdp-buy .summary > .woocommerce-product-details__short-description{order:30} .pdp-buy .summary > .chips{order:35} .pdp-buy .summary > .price{order:40} .pdp-buy .summary > .rosen-unit{order:42} .pdp-buy .summary > .stock{order:45} .pdp-buy .summary > form.cart{order:50} .pdp-buy .summary > .pricebreak{order:55} .pdp-buy .summary > .pdp-assure{order:70} .pdp-buy .summary > .pdp-note{order:80} /* WooCommerce labels the quantity field with `.screen-reader-text` and expects the theme to hide it. concept.css has no such class — it never had WooCommerce's markup to hide — so without this the words "Product quantity" sit between the stepper and the Add to cart button. */ body.single-product .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* the short description, as the concept's .pdp-full */ body.single-product .pdp-buy .woocommerce-product-details__short-description{ margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--muted); } body.single-product .pdp-buy .woocommerce-product-details__short-description p{margin:0 0 6px} body.single-product .pdp-buy .woocommerce-product-details__short-description p:last-child{margin-bottom:0} /* the price, as the concept's .pdp-price (core tints this #77a464) */ body.single-product div.product div.summary > .price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line); font-size:32px; font-weight:600; line-height:1.1; letter-spacing:-.025em; color:var(--ink); } body.single-product div.product div.summary > .price del{ font-size:19px; font-weight:500; color:var(--muted); opacity:1; } body.single-product div.product div.summary > .price ins{ text-decoration:none; background:none; color:inherit; font-weight:600; } body.single-product div.product div.summary > .price .woocommerce-price-suffix{ font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); } /* the per-unit line. It sits under the price rather than beside it because the price itself is WooCommerce's output and filtering get_price_html to smuggle a second number into it would change every price on the page, cards included. */ .pdp-buy .summary > .rosen-unit{display:block; margin:8px 0 0} /* stock wording, when a product is not purchasable and the form does not render */ body.single-product div.product div.summary > .stock{ margin:22px 0 0; font-size:14.5px; font-weight:600; color:var(--ink); } body.single-product div.product div.summary > .stock.out-of-stock{color:#8a5a00} /* ── the add-to-cart form ───────────────────────────────────────────────── This is the shop. Core floats the quantity and the button; the concept lays them out as a stepper and a full-width pill on one row. */ body.single-product div.product form.cart{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0 0; } body.single-product div.product form.cart::before, body.single-product div.product form.cart::after{content:none} /* The stepper. Deliberately NOT the concept's `.step` class: concept.css declares `.step` twice — the 52px pill at line 1665 and the numbered process card at line 2085 — and the second one wins, which is why the concept's own quantity control renders with a wash background and 22px of padding. Reusing the name here would inherit that bug; the geometry is the pill's, as designed. concept.css is read-only, so this is the correct side to fix it on. */ body.single-product div.product form.cart div.quantity{ display:inline-flex; align-items:center; float:none; flex:none; height:52px; margin:0; overflow:hidden; border:1px solid #7d8790; border-radius:100px; background:#fff; } body.single-product div.product form.cart div.quantity input.qty{ width:56px; height:100%; padding:0; border:0; background:none; text-align:center; color:var(--ink); font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace; } /* Native spinners are only hidden once the template's script has actually added the − and + buttons; with JavaScript off the input keeps them and stays usable. */ body.single-product div.product form.cart div.quantity[data-rosen-stepper] input.qty{ -moz-appearance:textfield; } body.single-product div.product form.cart div.quantity[data-rosen-stepper] input.qty::-webkit-outer-spin-button, body.single-product div.product form.cart div.quantity[data-rosen-stepper] input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } body.single-product div.product form.cart button.rosen-step-btn{ width:44px; height:100%; padding:0; border:0; background:none; cursor:pointer; font:400 18px/1 inherit; color:var(--ink-2); transition:background .18s var(--ease); } body.single-product div.product form.cart button.rosen-step-btn:hover{background:var(--wash)} body.single-product div.product form.cart button.single_add_to_cart_button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; float:none; flex:1 1 190px; height:52px; margin:0; padding:0 28px; border:0; border-radius:100px; cursor:pointer; background:var(--green-ink); color:#fff; font:600 15px/1 inherit; letter-spacing:0; box-shadow:0 8px 20px rgba(74,115,36,.24); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } body.single-product div.product form.cart button.single_add_to_cart_button:hover{ background:var(--green-ink); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(74,115,36,.32); } body.single-product div.product form.cart button.single_add_to_cart_button:active{ transform:translateY(0) scale(.985); } body.single-product div.product form.cart button.single_add_to_cart_button.disabled, body.single-product div.product form.cart button.single_add_to_cart_button:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } /* SKU, categories and tags: real information, but not the headline the concept already shows in .pdp-top — so it reads as a footnote rather than competing. */ body.single-product .pdp-buy .product_meta{ margin:22px 0 0; font-size:12.5px; line-height:1.7; color:var(--muted); } body.single-product .pdp-buy .product_meta > span{display:block} body.single-product .pdp-buy .product_meta a{color:var(--green-ink); font-weight:600} /* ── tabs, upsells and related products ─────────────────────────────────── woocommerce_after_single_product_summary is kept whole, so these render. They are dressed to belong to the page rather than dropped. */ body.single-product div.product .woocommerce-tabs{ max-width:var(--max); margin:0 auto; padding:0 28px 96px; } body.single-product div.product .woocommerce-tabs ul.tabs{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 26px; padding:0; list-style:none; } body.single-product div.product .woocommerce-tabs ul.tabs::before, body.single-product div.product .woocommerce-tabs ul.tabs li::before, body.single-product div.product .woocommerce-tabs ul.tabs li::after{content:none; display:none} body.single-product div.product .woocommerce-tabs ul.tabs li{ margin:0; padding:0; border:0; background:none; border-radius:0; box-shadow:none; } body.single-product div.product .woocommerce-tabs ul.tabs li a{ display:inline-block; padding:9px 15px; border:1px solid var(--line); border-radius:100px; background:#fff; font-size:13.5px; font-weight:500; color:var(--body); text-shadow:none; } body.single-product div.product .woocommerce-tabs ul.tabs li.active a{ background:var(--green-soft); border-color:#d7e8bf; color:var(--green-ink); } body.single-product div.product .woocommerce-tabs .panel{ max-width:70ch; margin:0; font-size:16px; line-height:1.7; color:var(--body); } body.single-product div.product .woocommerce-tabs .panel > h2{ font-size:clamp(22px,2.4vw,28px); line-height:1.15; margin:0 0 14px; } body.single-product div.product .woocommerce-tabs .panel strong{color:var(--ink)} body.single-product .related.products, body.single-product .up-sells.products{ max-width:var(--max); margin:0 auto; padding:0 28px 96px; clear:both; } body.single-product .related.products > h2, body.single-product .up-sells.products > h2{ margin:0 0 34px; font-size:clamp(26px,3vw,36px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); } /* content-product.php emits the concept's card in place of core's

  • , so the list is a grid of cards rather than four floated columns. */ body.single-product ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; padding:0; list-style:none; } body.single-product ul.products::before, body.single-product ul.products::after{content:none} body.single-product ul.products > *{float:none; width:auto; margin:0} /* ── small screens ──────────────────────────────────────────────────────── Mirroring concept.css's own product-page breakpoints (1080 / 900 / 560) so the WooCommerce parts turn at the same widths as everything around them. */ @media (max-width:1080px){ body.single-product ul.products{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ body.single-product .woocommerce-breadcrumb{padding:22px 22px 0} body.single-product .shop-page > .woocommerce-notices-wrapper:not(:empty){padding:18px 22px 0} body.single-product div.product .woocommerce-tabs, body.single-product .related.products, body.single-product .up-sells.products{padding:0 22px 64px} body.single-product ul.products{grid-template-columns:repeat(2,1fr); gap:12px} } @media (max-width:560px){ /* the concept drops the stepper onto its own full-width row here, so the Add to cart button keeps a thumb-sized target rather than being squeezed */ body.single-product div.product form.cart div.quantity{flex:1 0 100%; justify-content:center} body.single-product div.product .woocommerce-tabs, body.single-product .related.products, body.single-product .up-sells.products{padding:0 20px 56px} body.single-product .woocommerce-breadcrumb{padding:20px 20px 0} } /* ══════════════════════════════════════════════════════════════════════════ ACCOUNT AREA — bridging rules only. concept.css already carries the whole account screen: .ac-grid, .acnav, .ac-tiles, .ac-card, .ord, .cr-table, and — the part the client sent back once already — the phone drill-down at line 888, where the rail is dropped and `.aclist` becomes a grouped list of 54px tap rows with `.ac-back` at the top of every sub-screen. None of that is restated here. Five rules, and every one exists because WooCommerce or the wallet emits markup the concept never had. No new colours: every value is a token from :root, so the 38-pair contrast audit still covers all of it. ══════════════════════════════════════════════════════════════════════════ */ /* functions.php has already opened `.section.shop-page`, which concept.css gives 30px of top padding. `.account-area` is inside it and asks for the same 30px again, so the crumb row would start 60px down the page instead of 30. The shortcode's own `
    ` sits between the two, so this is a descendant selector rather than a child one. */ .shop-page .account-area{padding-top:0} /* The sign-in screen is not a utility page — it is the first thing a new customer sees, and concept.css gives its section the full 96px. It inherits the shop wrapper's 30px instead, which reads as cramped under the header. */ .shop-page .acct{padding:26px 0 20px} /* WooCommerce marks up "Required", "Qty" and similar as `.screen-reader-text` and expects the theme to hide it. concept.css has no such class — it never had WooCommerce's markup to hide — so without this the word "Required" prints beside every label on the sign-in form and on every address form the account area renders. Scoped to these two screens rather than declared globally so it cannot collide with the same fix elsewhere in R12. */ .account-area .screen-reader-text, .acct .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ── the account menu's own labels ─────────────────────────────────────── `.acnav-item` is an in the concept; here it also carries WooCommerce's `woocommerce-MyAccount-navigation-link` classes so plugins can still find it. That costs nothing. What does cost something is the label wrapping: the wallet's item is "Credit" plus a live figure, and at 250px a long tier name next to a four-figure balance can push the row to two lines. */ .acnav-item span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .acnav-item b{flex:none} /* ── a column this design has no slot for ──────────────────────────────── orders.php routes any column it does not recognise — the tracking number the PayPal sync registers, anything a plugin adds next — into a labelled `.ord-meta` line rather than dropping it. concept.css styles `.ord-meta` as a single muted line; these two rules are what let it hold several, with a label and a link that are legible. */ .ord-main > .ord-meta + .ord-meta{margin-top:5px} .ord-meta strong{color:var(--body); font-weight:600} .ord-meta a{color:var(--green-ink); font-weight:600} .ord-meta a:hover{text-decoration:underline; text-underline-offset:3px} /* ── what the plugin prints on the dashboard ───────────────────────────── The wallet's balance summary and the loyalty tier badge come through `woocommerce_account_dashboard` as

    elements carrying their own inline border and background. They are left to keep it — inline styles cannot be overridden without !important on four properties, and reaching into a component that was verified over seven review rounds to restyle it is a worse trade than letting it look like itself. All this does is take away the browser's default paragraph margins so the spacing is the grid's. */ .ac-hooked{display:grid; gap:14px} .ac-hooked > p{margin:0} /* ── notices, inside the account area only ─────────────────────────────── "Address changed successfully", a failed login, the empty-orders notice. WooCommerce prints them with no styling this design recognises, and an unstyled core notice on a screen about money reads as a fault. Scoped to `.account-area` so it cannot reach the cart's or the checkout's own notice rules further up this file. */ .account-area .woocommerce-message, .account-area .woocommerce-info, .account-area .woocommerce-error{ margin:0 0 14px; padding:14px 16px; border-radius:12px; font-size:14.5px; line-height:1.55; color:var(--ink-2); list-style:none; } .account-area .woocommerce-message, .account-area .woocommerce-info{background:var(--green-soft); border:1px solid #d7e8bf} .account-area .woocommerce-error{background:#fdf4f3; border:1px solid #f0cdc8} .account-area .woocommerce-error li{list-style:none} .account-area .woocommerce-message a, .account-area .woocommerce-info a{font-weight:600; color:var(--green-ink)} /* Stack notice actions before the text so a wide button cannot split words. */ .account-area .woocommerce-info .button, .account-area .woocommerce-message .button{ float:none; display:table; max-width:100%; margin:0 0 8px; white-space:normal; text-align:center; } .account-area .ac-card > .woocommerce-info:last-child{margin-bottom:0} /* ══════════════════════════════════════════════════════════════════════════ THE PRODUCT LOOP — shop, search, category, related, up-sells. Added by the verification pass. content-product.php had been rewritten to print `.pcard` markup and to fire none of core's five loop hooks; it is back to core's `

  • ` + five do_action()s, so the card has to be built out of WooCommerce's own elements instead. That is what this block does — no template markup moved, and no callback was dropped to make it happen. Every value is a concept.css token; no new colours, so the audit still covers all of it. ══════════════════════════════════════════════════════════════════════════ */ /* The grid. Core emits `