/* RecyclingBin — WooCommerce skin. Maps WooCommerce's default markup onto the mockup's product page, shop grid, and store chrome. Enqueued only on store pages (see rb_enqueue). Palette vars come from assets/theme.css (:root). Structure comes from the woocommerce/ template overrides + the .rb-buybox wrapper hooked in functions.php. */ /* ============================ breadcrumb ============================ */ /* mock line 220: .crumb is .82rem with 14px above and below, and the content after it sits inside section.band.tight (padding 40px 0) — so the gap from breadcrumb to page content is 40px. Ours was 8px. */ .woocommerce-breadcrumb.rb-crumb { max-width: var(--maxw); margin: 0 auto; padding: 14px 20px; font-size: .82rem; color: var(--ink-soft); } /* Put the 40px on whatever follows the breadcrumb, so every store page gets it rather than the product page alone. */ .woocommerce.rb-wc-page > .woocommerce-breadcrumb.rb-crumb + * { margin-top: 40px; } .rb-crumb a { color: var(--ink-soft); } .rb-crumb a:hover { color: var(--green-deep); } .rb-crumb .rb-crumb-sep { color: var(--line-2); margin: 0 2px; } /* ============================ product page ========================== */ .woocommerce div.product { /* top margin comes from the rule above, matching section.band.tight */ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; display: grid !important; /* minmax(0,…) lets columns shrink below the image's natural width (prevents blowout) */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; } /* Sections that must span the full width, not sit in a grid column. */ .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .up-sells, .woocommerce div.product > .related, .woocommerce div.product > .rb-px-faqs, .woocommerce div.product > .woocommerce-product-faqs { grid-column: 1 / -1; } .woocommerce div.product .woocommerce-product-gallery { width: 100% !important; max-width: 100%; min-width: 0; margin: 0; float: none !important; } .woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; } /* The image box — the approved page's `.gallery .main`: capped at 60% of the column and centred, which is Chris's "the product image is smaller in the mockup" (2026-09-21). Measured before: 574x846 in a 574px column. The border and background CANNOT live on `__wrapper`. Once FlexSlider initialises, that element is the sliding TRACK — it carries an inline width of all slides combined and a translate3d — so a border on it is drawn around the whole filmstrip and only clipped into looking right. `.flex-viewport` is the window that stays put, so the box belongs there. The `:not(:has(...))` arm covers a product whose gallery never gets a slider, where `__wrapper` IS the visible box. Same browser floor as the `mask` tick. Capping in CSS rather than JS is deliberate: the stylesheet applies before FlexSlider initialises, so it measures the capped width and sizes its slides to match. Setting this after init would leave the slides at their old width. */ .woocommerce div.product .woocommerce-product-gallery .flex-viewport, .woocommerce div.product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper { max-width: 60%; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px; overflow: hidden; } .woocommerce div.product .woocommerce-product-gallery img, .woocommerce div.product .woocommerce-product-gallery__image img { max-width: 100% !important; height: auto; border-radius: 4px; display: block; margin: 0 auto; } /* Cap the image's HEIGHT, which is what actually makes the box the shape the approved page draws — the 60% width cap alone still left a portrait image taller than the mockup's square box (344x464 against 344x344). `aspect-ratio` on the viewport is the obvious way and does not work: it needs `display:flex` to centre the image, which fights FlexSlider's layout maths — the track blew out to 24,095px and the image cropped instead of letterboxing. Constraining the IMG leaves FlexSlider's geometry alone. It also fixes a second thing Chris saw. These files are SMALL: the Hexcycle IV main image is 339x500 natural and was being drawn at 574x846, upscaled 1.69x. That is why the zoom looked stretched — jQuery zoom works from the natural file while the display was blown well past it. Held at its natural size, the two agree. */ .woocommerce div.product .woocommerce-product-gallery__image img { max-height: 340px; width: auto !important; } .woocommerce div.product .summary.entry-summary { width: 100% !important; max-width: 100%; min-width: 0; margin: 0; float: none !important; } .woocommerce div.product .product_title { font-size: 1.7rem; line-height: 1.15; margin: 0 0 6px; } /* SKU (WC prints it in .product_meta; also style the mockup-style .sku if present) */ .woocommerce div.product .product_meta { font-size: .85rem; color: var(--ink-soft); } .woocommerce div.product .product_meta .sku_wrapper { display: inline; } /* rating line (rating.php override) */ .rb-rating-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: .85rem; margin: 0 0 16px; } .rb-rating-line .star-rating { color: var(--amber); margin: 0; } .rb-rating-line .rb-rating-avg { font-weight: 600; } .rb-rating-line a { font-weight: 600; color: var(--green-deep); } .rb-rating-line .rb-no-reviews { color: var(--ink-soft); } /* short description / feature copy */ .woocommerce div.product .woocommerce-product-details__short-description { font-size: .95rem; color: var(--ink); margin: 8px 0 4px; } .woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.1em; } /* ---------------------------- the buy box ---------------------------- */ /* mock .buybox, line 248 */ .rb-buybox { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--wash); margin-top: 8px; } /* ---- the liner popup (§16.6) ---- */ .rb-lm[hidden] { display: none; } .rb-lm { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .rb-lm-backdrop { position: absolute; inset: 0; background: rgba(28, 35, 24, .55); } .rb-lm-box { position: relative; background: #fff; border-radius: var(--radius); padding: 24px 26px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .rb-lm-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft); } .rb-lm-h { font-size: 1.15rem; margin: 0 0 8px; color: var(--green-deep); text-align:center;} .rb-lm-added { border-radius: 6px; padding: 10px 12px; font-size: .9rem; text-align:center;} .rb-lm-added-meta { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; } .rb-lm-div { border: 0; border-top: 1px solid var(--line); margin: 18px 0; } .rb-lm-copy { font-size: .85rem; color: var(--ink-soft); margin: 0 0 14px;text-align:center; } /* One offer = one liner product: thumbnail, name, then a row per buyable option. The rows are a 3-column grid so label, price and quantity line up down the whole popup rather than drifting with the text width. */ .rb-lm-offer { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; } .rb-lm-thumb { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; } .rb-lm-offer-main { flex: 1 1 auto; min-width: 0; } .rb-lm-offer-name { font-weight: 700; font-size: .9rem; } .rb-lm-offer-sub { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; margin-bottom: 6px; } .rb-lm-row { display: grid; grid-template-columns: 1fr auto 64px; align-items: center; gap: 10px; padding: 4px 0; } .rb-lm-row-label { font-size: .85rem; min-width: 0; } .rb-lm-row-price { font-weight: 700; font-size: .85rem; color: var(--green-deep); white-space: nowrap; } .rb-lm-row-price .price { font-size: inherit; color: inherit; } .rb-lm-sub-div { border: 0; border-top: 1px dashed var(--line-2); margin: 4px 0; } .rb-lm-qty { width: 100%; text-align: center; border: 1px solid var(--line-2); border-radius: 6px; padding: .4em; font-family: inherit; } .rb-lm-actions { display: flex; gap: 10px; margin-top: 20px; } .rb-lm-actions .btn { flex: 1 1 0; } button.btn.btn-ghost.rb-lm-no { background: var(--red); color: white; } /* Toast — confirmation after the popup closes, so the buyer is told what happened without another dialog to dismiss. */ .rb-toast[hidden] { display: none; } .rb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 10000; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: .88rem; box-shadow: var(--shadow-lg); max-width: 90vw; } /* Videos tab — poster cards that become a YouTube iframe on click, so the player is never loaded for a visitor who does not ask for it. Mirrors the approved page's two placeholder cards. */ .rb-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; } .rb-video-card { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .rb-video-card iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; } .rb-video-play { display: block; position: relative; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; background: #1c2318; cursor: pointer; overflow: hidden; } .rb-video-play img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-video-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: .15s; } .rb-video-play:hover .rb-video-icon { transform: scale(1.06); } .rb-video-meta { padding: 12px 14px; font-size: .9rem; } .rb-video-desc { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; } @media (max-width: 620px) { .rb-video-grid { grid-template-columns: minmax(0, 1fr); } } /* The PDP's left column. `div.product` is a two-column grid; without this the gallery-column content below the image would become a third grid item and push the summary onto row two. See rb_pdp_left_open() in functions.php. */ .rb-pdp-left { min-width: 0; } /* Feature bullets — the approved page's .feat-list, matched to its own values (was 17px/.92rem/26px, approved is 16px/.85rem/24px). Two blocks share this class: the ticked Feature list field under the gallery (rb_pdp_feature_bullets) and the long description in the summary when that copy is genuinely a list (rb_pdp_feature_list). */ .feat-list { margin: 10px 0; padding: 0; list-style: none; } .feat-list li { position: relative; padding-left: 24px; margin-bottom: 6px; font-size: .85rem; } /* The tick is a mask over a green disc, so the disc IS the fallback: where mask is unsupported the bullet renders as a solid green dot rather than vanishing. `-webkit-mask` is deliberately absent (Chris, 2026-09-21) — which is what makes that fallback reachable on Safari below 15.4 and the iOS of the same era. Re-adding the prefixed line is the fix if a tick is wanted there. */ .feat-list li:before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--green-mid); mask: url("data:image/svg+xml;utf8,") center/13px no-repeat; } .feat-list li p { margin: 0; } /* Add-on upsell — mock .upsell / .addon, line 267 */ .upsell { background: #fff; border: 1px dashed var(--green-mid); border-radius: 8px; padding: 16px; margin: 16px 0; } .upsell h4 { color: var(--green-deep); font-size: .95rem; margin: 0 0 12px; } .addon { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; } .addon:first-of-type { border-top: 0; } .addon .sub-opts { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .addon.on .sub-opts { display: grid; } .addon .price { font-weight: 700; white-space: nowrap; } .addon .price del { font-weight: 500; font-size: .85rem; color: var(--ink-soft); } .addon .price ins { text-decoration: none; } .rb-addon-sub { font-size: .8rem; color: var(--ink-soft); } .rb-liner-match { font-size: .78rem; color: var(--green-deep); font-weight: 700; } .items-total { display: flex; justify-content: space-between; font-weight: 700; border-top: 2px solid var(--line); margin-top: 8px; padding-top: 10px; } /* Buy actions — mock .buy-actions, line 275: Add to order, "— or —", Add to estimate, all full width. For a SIMPLE product WooCommerce puts the quantity and buttons directly in form.cart. For a VARIABLE one it nests them in .woocommerce-variation-add-to-cart, so that div is the flex container instead — flex-basis on the buttons does nothing unless their actual parent is flexed. Both are handled here. */ .woocommerce div.product .rb-buybox form.cart, .woocommerce div.product .rb-buybox .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .woocommerce div.product .rb-buybox form.cart .or, .woocommerce div.product .rb-buybox .woocommerce-variation-add-to-cart .or { text-align: center; color: var(--ink-soft); font-size: .8rem; font-weight: 600; flex: 0 0 100%; order: 2; margin: 0; } .woocommerce div.product .rb-buybox form.cart .single_add_to_cart_button, .woocommerce div.product .rb-buybox .woocommerce-variation-add-to-cart .single_add_to_cart_button { order: 1; flex: 0 0 100%; min-width: 0; } .woocommerce div.product .rb-buybox form.cart .rb-add-to-estimate, .woocommerce div.product .rb-buybox .woocommerce-variation-add-to-cart .rb-add-to-estimate { order: 3; flex: 0 0 100%; padding: .9em 1.6em; font-size: 1.05rem; } .woocommerce div.product .rb-buybox .quantity { order: 0; flex: 0 0 auto; } /* The variation wrapper sits inside .single_variation_wrap; keep that from reintroducing its own block layout between the form and the buttons. */ .woocommerce div.product .rb-buybox .single_variation_wrap { width: 100%; } /* The .quantity wrapper doubles as the mockup .stepper once its buttons render. */ .woocommerce div.product .rb-buybox .quantity.stepper { width: 116px; } .woocommerce div.product .rb-buybox .quantity.stepper .rb-qty-step { width: 34px; border: 0; background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; } .woocommerce div.product .rb-buybox .quantity.stepper input.qty { width: 48px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: center; border-radius: 0; padding: .5em 0; } /* PDP links row — mock .pdp-links, line 277. Plain links, not buttons. */ /* align-items:center so the emoji in each label cannot push one link off the baseline of its neighbours. */ .pdp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font-size: .85rem; line-height: 1.4; } .pdp-links > * { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .pdp-links a { font-weight: 600; } .pdp-links .rb-pdp-phase2 { color: var(--ink-soft); } /* Assist — mock .assist, line 278 */ .assist { background: var(--wash-2); border-radius: 8px; padding: 12px 14px; font-size: .85rem; margin-top: 16px; } /* Colour swatches — mock .swatches, line 253. Applied to the Color variation attribute; see rb_pdp_swatches(). */ .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line-2); cursor: pointer; padding: 0; } .swatch.active { box-shadow: 0 0 0 2.5px var(--green-mid); } /* SKU under the title — mock line 1526 (WooCommerce's own .product_meta blob below the assist box is unhooked in functions.php). */ .woocommerce div.product .rb-pdp-sku { color: var(--ink-soft); font-size: .85rem; margin: 0 0 6px; } /* Product content in the summary — mock line 1533. The long description sits here now, so it needs prose spacing, not just bullet spacing. */ .rb-pdp-content { font-size: .92rem; margin: 16px 0; } .rb-pdp-content > *:first-child { margin-top: 0; } .rb-pdp-content > *:last-child { margin-bottom: 0; } .rb-pdp-content img { height: auto; border-radius: 6px; } .rb-pdp-content p { margin: 0 0 .9em; } /* Shipping note — mock .ship-note, line 359 */ .ship-note { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-size: .86rem; background: #fff; } .ship-note h4 { margin: 0 0 6px; font-size: .9rem; display: flex; align-items: center; gap: 8px; } .ship-note .ship-ico { font-size: 1rem; } .ship-note p { margin: 4px 0 0; color: var(--ink-soft); } .ship-note.freight { background: #fbf7ee; border-color: #e7d9bd; } .freight-fee { font-weight: 800; color: var(--navy); font-size: 1.05rem; } .ship-badge { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .18em .5em; border-radius: 4px; background: #f3e6c8; color: #7a5b16; vertical-align: middle; } /* FAQs as a section below the tabs — mock line 1626 */ .rb-pdp-faqs { max-width: 820px; margin-top: 40px; } .rb-pdp-faqs > h2 { font-size: 1.4rem; margin: 0 0 16px; } /* Related products — mock line 1631: 44px above the heading, 18px under it. */ .woocommerce .related.products, .woocommerce .up-sells.upsells.products { margin-top: 44px; } .woocommerce .related.products > h2, .woocommerce .up-sells.upsells.products > h2 { margin: 0 0 18px; } .woocommerce .related.products ul.products, .woocommerce .up-sells.upsells.products ul.products { margin-bottom: 0; } .woocommerce div.product .related.products { padding-bottom: 0; } /* Custom design gallery — mock .cust-grid, line 287 */ .cust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; } .cust-item { margin: 0; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: .15s; } .cust-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* The clickable element is a real button so it is keyboard reachable; strip the UA button chrome so it renders as the mockup's figure. */ .cust-item .rb-cust-open { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .cust-item .cust-img { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; border-bottom: 1px solid var(--line); } .cust-item .cust-img img { max-height: 100%; width: auto; object-fit: contain; } .cust-item figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 600; color: var(--ink); } .rb-cust-lead { max-width: 760px; color: var(--ink-soft); } .cust-item .rb-cust-open:focus-visible { outline: 2px solid var(--green-mid); outline-offset: -2px; } /* Lightbox — mock line 293 */ .lightbox { position: fixed; inset: 0; z-index: 420; background: rgba(15, 22, 14, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 30px; } .lightbox[hidden] { display: none; } .lightbox figure { margin: 0; max-width: 640px; text-align: center; } .lightbox img { max-width: 100%; max-height: 76vh; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .lightbox figcaption { color: #fff; margin-top: 16px; font-weight: 600; font-size: 1rem; } .lb-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.2rem; cursor: pointer; } .lb-close:hover { background: rgba(255, 255, 255, .28); } @media (max-width: 860px) { .cust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .cust-grid { grid-template-columns: 1fr; } } /* Phase II affordance — mock .locked-overlay, line 445 */ .locked-overlay { border: 1px dashed var(--navy-2); background: #eef3fb; border-radius: 8px; padding: 14px 16px; font-size: .85rem; color: var(--navy); display: flex; gap: 10px; align-items: center; } /* The live price sits ON the quantity row and is deliberately QUIET — the approved `.price-live` is .9rem/400, against the 2rem/800 this used to be at the top of the buybox. Chris, 2026-09-21: "qty + price (same line -- take note of styling)". The weight is the half people miss. */ .woocommerce div.product .rb-buybox .rb-qty-price { color: var(--green-deep); font-size: .9rem; font-weight: 400; letter-spacing: normal; margin: 0; flex: 0 0 auto; } .woocommerce div.product .rb-buybox .rb-qty-price .price, .woocommerce div.product .rb-buybox .rb-qty-price .amount { font-size: inherit; font-weight: inherit; color: inherit; } .woocommerce div.product .rb-buybox .rb-qty-price small { font-size: .85em; color: var(--ink-soft); font-weight: 500; } .woocommerce div.product .rb-buybox .rb-qty-price del { color: var(--ink-soft); opacity: .7; } .woocommerce div.product .rb-buybox .rb-qty-price ins { text-decoration: none; } /* RB Quantity Pricing renders its own live unit price inside the tier box. That figure is the one that tracks the quantity discount, so it is the one shown — but on the quantity row, which is where the approved page puts it. rb-qp.js copies it into `[data-rb-price-slot]` after each render; this hides the copy that stays behind in the box, so the number appears once. */ .woocommerce div.product .rb-buybox .rb-qp .rb-price-live { display: none; } /* WooCommerce's own variation price is now a duplicate of the row above, so it is hidden rather than removed — the element is what `show_variation` writes to, and rb_pdp_price_live() reads its value out of the event payload. */ .woocommerce div.product .rb-buybox .woocommerce-variation-price { display: none; } /* The add-ons block drops onto its own line inside the quantity row, between the stepper and the buttons. */ .woocommerce div.product .rb-buybox .upsell { flex: 0 0 100%; } .woocommerce div.product .rb-buybox p.price del { color: var(--ink-soft); font-size: .95rem; font-weight: 500; opacity: .7; } .woocommerce div.product .rb-buybox p.price ins { text-decoration: none; } /* variation config rows → mockup .cfg-row */ .woocommerce div.product .rb-buybox .variations { margin: 0 0 14px; border: 0; } .woocommerce div.product .rb-buybox .variations th, .woocommerce div.product .rb-buybox .variations td { display: block; text-align: left; padding: 0 0 5px; } .woocommerce div.product .rb-buybox .variations label { font-size: .8rem; font-weight: 700; margin-bottom: 5px; } .woocommerce div.product .rb-buybox .variations select { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; padding: .5em .7em; font-size: .9rem; font-family: inherit; background: #fff; } .woocommerce div.product .rb-buybox .reset_variations { font-size: .8rem; } .woocommerce div.product .rb-buybox .woocommerce-variation-price .price { font-size: 1.6rem; } /* quantity + add to cart */ .woocommerce div.product .rb-buybox form.cart { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .woocommerce div.product .rb-buybox .quantity .qty { width: 72px; text-align: center; border: 1px solid var(--line-2); border-radius: 6px; padding: .5em; font-size: .95rem; } .woocommerce div.product .rb-buybox .single_add_to_cart_button { flex: 1 1 auto; min-width: 180px; display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--green-mid); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .9em 1.6em; font-size: 1.05rem; font-weight: 600; line-height: 1.1; cursor: pointer; } .woocommerce div.product .rb-buybox .single_add_to_cart_button:hover { background: var(--green-deep); } /* brochure button + liner note (RB Product Extras) sit inside the card. The button is .btn.btn-ghost; the mockup moves it into .pdp-links as a plain link, which lands with the PDP rebuild. */ .rb-buybox .rb-px-brochure { margin: 0px 0 0; } /* ------------------------------ tabs ------------------------------- */ .woocommerce div.product .woocommerce-tabs { margin-top: 44px; } .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--line); padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: .8em 1.2em; font-size: .95rem; font-weight: 600; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--green-deep); border-bottom-color: var(--green-mid); } /* Tab panels are WHITE, and the reset below is not decoration — it undoes a class collision. WooCommerce gives every tab panel the class `panel` (`woocommerce-Tabs-panel … panel entry-content wc-tab`). The editorial vocabulary ported from the new mockup ALSO defines `.panel` — theme.css:406, "the larger tinted card (Our Bins, Contributions)" — as a wash background with a border, a radius and 28px padding. So every product tab was rendering as a tinted bordered card: measured rgb(246, 248, 242) on staging, 2026-09-21, which is --wash. The padding here already overrode that rule; the background, border and radius leaked through untouched because nothing named them. Fixed here rather than by narrowing theme.css's `.panel`, because that rule is load-bearing on the content pages and this is the only place the two meet. Worth remembering the shape: the editorial class names are generic, and WooCommerce's markup uses generic class names too. */ .woocommerce div.product .woocommerce-tabs .panel { padding: 26px 0; max-width: 820px; background: #fff; border: 0; border-radius: 0; } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.3rem; } /* spec table (RB Product Extras) + WC attributes */ .woocommerce table.shop_attributes { border: 1px solid var(--line); } .woocommerce table.shop_attributes th { background: var(--wash-2); width: 30%; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: .55em .8em; border-bottom: 1px solid var(--line); } /* ---------------------------- upsells ------------------------------ */ .woocommerce div.product .up-sells.rb-upsells { margin-top: 44px; } .woocommerce div.product .up-sells.rb-upsells > h2 { font-size: 1.4rem; margin: 0 0 18px; } /* ============================ shop / archive ======================= */ /* .rb-wc-page has no width limit, so the archive gets ONE container and the alignment is declared here only. Everything below that used to carry its own max-width + padding now inherits it; those declarations are overridden in place rather than deleted, because .rb-archive-head and ul.products are also used outside an archive (related products, up-sells) where the base rule is still doing a job. Chris, 2026-09-20: the furniture was "not inside their own container, which is why they are allowed to skim the outside edges". */ .rb-archive { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .rb-archive .rb-archive-head, .rb-archive .woocommerce-result-count, .rb-archive .woocommerce-ordering, .rb-archive ul.products, .rb-archive .woocommerce-pagination { max-width: none; padding-left: 0; padding-right: 0; } .rb-archive .rb-archive-head { margin-left: 0; margin-right: 0; } .rb-archive ul.products { margin-left: 0; margin-right: 0; } /* The count and the sort share one row, and wrap onto two on a narrow screen rather than overlapping. margin:0 on both beats WooCommerce's own floats, which is what made them stack in the first place. */ .rb-loop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; } .rb-loop-head .woocommerce-result-count, .rb-loop-head .woocommerce-ordering { margin: 0; float: none; } .rb-archive-head { max-width: var(--maxw); margin: 8px auto 0; padding: 0 20px; } .rb-archive-head .rb-eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 700; color: var(--green-mid); margin: 0 0 .6em; } .rb-archive-title { font-size: 1.9rem; margin: 0 0 10px; max-width: 720px; } .rb-archive-intro { color: var(--ink-soft); font-size: 1.05rem; max-width: 720px; margin: 0 0 18px; } .rb-archive-intro p { margin: 0 0 .6em; } .rb-subcat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; } .rb-subcat-chips .contract-chip { border: 1px solid var(--line-2); border-radius: 6px; padding: .5em .8em; font-size: .8rem; font-weight: 600; background: var(--wash); color: var(--ink); } .rb-subcat-chips .contract-chip:hover { border-color: var(--green-mid); color: var(--green-deep); } /* result count + catalog ordering (native) */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 0 20px; } .woocommerce .woocommerce-result-count { color: var(--ink-soft); font-size: .85rem; margin-bottom: 0; } .woocommerce .woocommerce-ordering select { border: 1px solid var(--line-2); border-radius: 6px; padding: .45em .6em; font-family: inherit; background: #fff; } /* product grid */ .woocommerce ul.products { max-width: var(--maxw); margin: 18px auto 0; padding: 0 20px; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products li.product { width: auto !important; min-width: 0; margin: 0 !important; float: none !important; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; box-shadow: var(--shadow); transition: .15s; display: flex; flex-direction: column; } .woocommerce div.product .up-sells ul.products { max-width: none; padding: 0; } .woocommerce ul.products li.product img { max-width: 100%; height: auto; } .woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* mockup card internals (content-product.php) */ /* Every product image the same height, whatever shape the file is. Three things are load-bearing here and all three were missing: flex-shrink:0 the card is a column flex container, so the box was being squeezed by however much copy sat below it; overflow:hidden without it a tall image grows the box past its ratio — a 300x600 source made a 493px box next to a 262px one; width/height 100% + contain so the image fits the box instead of the box fitting the image. These are exactly the mockup's `.card .imgwrap` rules. */ .rb-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; padding: 16px; border-bottom: 1px solid var(--line); position: relative; flex-shrink: 0; overflow: hidden; } .rb-card-img img { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; margin: 0; } /* Fan favorites — WooCommerce's own product list laid out as the approved five-across scrolling track. The mockup's markup is a prototype `.card`; real products come from `[products]` as `ul.products > li.product`, so these target that. `calc(20% - 14.4px)` is the mockup's own figure for five cards with 18px gaps. Declared here, after `.woocommerce ul.products`, because that rule sets `display:grid` at the same specificity. */ /* `!important` because `.woocommerce ul.products` above declares `display: grid !important` to beat WooCommerce's own stylesheet; without matching it, the track silently stayed a grid and showed one card per row. */ .rbc-bestsellers-viewport ul.products, .woocommerce .rbc-bestsellers-viewport ul.products { display: flex !important; flex-wrap: nowrap; gap: 18px; list-style: none; grid-template-columns: none !important; max-width: none; margin: 18px 0 0; padding: 0; overflow-x: auto; scrollbar-width: none; } /* No `scroll-behavior: smooth` here on purpose. As a CSS property it captures every programmatic scroll into an animation, and where that animation does not run the arrows silently do nothing. home.js asks for smooth per call instead, and only when the visitor has not asked for reduced motion — so the scroll always happens and the easing is the enhancement. */ .rbc-bestsellers-viewport ul.products::-webkit-scrollbar { display: none; } .rbc-bestsellers-viewport ul.products > li.product, .woocommerce .rbc-bestsellers-viewport ul.products > li.product { flex: 0 0 calc(20% - 14.4px); min-width: 0; width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } @media (max-width: 900px) { .rbc-bestsellers-viewport ul.products > li.product, .woocommerce .rbc-bestsellers-viewport ul.products > li.product { flex: 0 0 calc(50% - 9px); } } @media (max-width: 560px) { .rbc-bestsellers-viewport ul.products > li.product, .woocommerce .rbc-bestsellers-viewport ul.products > li.product { flex: 0 0 100%; } } .rb-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; } .rb-card-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-mid); font-weight: 700; margin-bottom: 4px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 700; padding: 0; margin: 0 0 6px; } .woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--ink); } .rb-card-meta { font-size: .8rem; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.4; } .rb-card-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .rb-pill { font-size: .68rem; font-weight: 700; border-radius: 5px; padding: .25em .55em; letter-spacing: .02em; } .rb-pill--usa { background: #eef4e6; color: var(--green-deep); } .rb-pill--vol { background: #eaf1f8; color: var(--navy-2); } .rb-pill--stock { background: #fbf2d9; color: #7a5c00; } /* mock lines 170-171: the price is --ink at 800, and "as low as" sits above it at .85rem in --ink-soft. This carried --green-deep at 700 with a .75rem caption — a colour and a weight the mockup does not use on a card. */ .rb-card-price { margin-top: auto; color: var(--ink); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; } .rb-card-price .rb-aslow { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; } .rb-card-price del { color: var(--ink-soft); font-weight: 500; font-size: .9rem; } .rb-card-price ins { text-decoration: none; } .rb-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } /* mock .c-actions (line 1235): a ghost "Configure & price" over a primary "Add to cart", both full width. Colour comes from .btn-* in theme.css. */ .woocommerce ul.products li.product .rb-card-actions .btn, .woocommerce ul.products li.product .rb-card-actions .button { width: 100%; margin: 0; padding: .55em .5em; font-size: .85rem; } /* sale / onsale flash */ .woocommerce span.onsale { background: var(--amber); color: #3a2c00; border-radius: 20px; font-weight: 800; font-size: .72rem; min-height: auto; min-width: auto; padding: .25em .7em; line-height: 1.4; position: absolute; top: 10px; left: 10px; margin: 0; } /* coming-soon empty state (mockup) */ .rb-empty { max-width: 640px; margin: 8px auto 0; text-align: center; background: var(--wash); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 48px 24px; } .rb-empty__icon { font-size: 2rem; margin-bottom: 6px; } .rb-empty h3 { margin: 0 0 6px; font-size: 1.25rem; } .rb-empty p { max-width: 480px; margin: 0 auto 16px; color: var(--ink-soft); } .rb-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ============================ generic buttons ====================== Values mirror .btn / .btn-primary in theme.css (mock line 35); these selectors exist only to outrank WooCommerce's own button CSS. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--green-mid); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .7em 1.25em; font-size: .95rem; font-weight: 600; line-height: 1.1; text-align: center; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--green-deep); color: #fff; } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--green-deep); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--green-mid); } /* WooCommerce notices in brand colors */ .woocommerce-message { border-top-color: var(--green-mid); } .woocommerce-info { border-top-color: var(--navy-2); } /* ============================ reviews ============================== */ .woocommerce #reviews h2 { font-size: 1.3rem; } .woocommerce #reviews .comment-form-rating .stars a { color: var(--amber); } .woocommerce #review_form #respond .form-submit input { background: var(--green-mid); } .woocommerce #reviews .star-rating { color: var(--amber); } /* Migrated review: light reviewer context (location only) */ .rb-review-meta { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 0; } /* ============================ cart (classic shortcode) ============= */ /* NOTE: these overrides target the CLASSIC [woocommerce_cart] / [woocommerce_checkout] shortcodes. The block Cart/Checkout render their own React markup (.wc-block-*) and are not templatable — set the Cart and Checkout pages to the classic shortcodes for this skin (and the PO/Fortis payment tabs) to apply. */ /* Cart & checkout are ordinary pages (page.php). Let their block content span the full width instead of the 760px article measure, so the two-column layout fits. */ .woocommerce-cart .entry-content > *, .woocommerce-checkout .entry-content > *, .woocommerce-account .entry-content > * { max-width: none; } /* ============================ my account ========================== The logged-OUT gateway is designed (mock line 2169) and built below. The logged-IN dashboard is not: no mockup exists for it yet, so the widths below are deliberately minimal — give the page the same full content width as every other store page instead of the 760px article measure, and leave WooCommerce's own layout alone. Replace THAT part wholesale when the design lands — do not build on it. */ .woocommerce-account h1, .woocommerce-account h2 { font-size: 1.9rem; margin: 8px 0 24px; } .woocommerce-account .woocommerce { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .woocommerce-account .woocommerce-MyAccount-navigation { width: 22%; } .woocommerce-account .woocommerce-MyAccount-content { width: 74%; } @media (max-width: 720px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; } } /* Log in / Create account gateway — ported from mock lines 384-395. */ .acct-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 860px; } .acct-gate.acct-gate--login-only { grid-template-columns: 1fr; max-width: 430px; } .acct-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; background: #fff; box-shadow: var(--shadow); } .acct-card.create { background: var(--wash); border-color: var(--line-2); } /* woocommerce.css styles `.woocommerce form.login, .woocommerce form.register` (0,2,1) with a 20px pad, 5px radius, #cfc8d8 border and a 2em margin, which outranks .acct-card (0,1,0). Carry both classes to beat it at (0,3,1) rather than relying on our stylesheet loading later. */ .woocommerce form.acct-card.login, .woocommerce form.acct-card.register { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; margin: 0; } .woocommerce form.acct-card.register { border-color: var(--line-2); } /* beats .woocommerce-account h2 (0,1,1) above, which is for the dashboard */ .woocommerce-account .acct-card h2 { font-size: 1.25rem; margin: 0 0 6px; } .acct-card .lead { color: var(--ink-soft); font-size: .9rem; margin-bottom: 16px; } .acct-benefits { list-style: none; margin: 0 0 18px; padding: 0; } .acct-benefits li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: .88rem; color: var(--ink); } .acct-benefits li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--green-mid); -webkit-mask: url("data:image/svg+xml;utf8,") center/12px no-repeat; mask: url("data:image/svg+xml;utf8,") center/12px no-repeat; } /* mock line 2181: the fields stack with 10px between them, not the 16px .field default */ .acct-card .field + .field { margin-top: 10px; } .acct-card .rb-remember { display: block; font-size: .82rem; margin: 12px 0; font-weight: 400; } .acct-card .rb-remember input { width: auto; margin-right: 4px; } .acct-card .create .field:last-of-type { margin-bottom: 14px; } .acct-card .btn { margin-top: 14px; } .acct-card .rb-lost-password { font-size: .78rem; color: var(--ink-soft); margin: 12px 0 0; text-align: center; } .woocommerce-account .rb-note-pending { background: #fdf3dc; color: #8a6708; margin-bottom: 18px; } @media (max-width: 720px) { .acct-gate { grid-template-columns: 1fr; } } .woocommerce-cart h1, .woocommerce-checkout h1 { font-size: 1.9rem; margin: 8px 0 24px; } /* Two-column layout: table/form left, summary right. */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; } .woocommerce-cart .cart-collaterals { grid-column: 2; width: auto; } .woocommerce-cart .cart-collaterals .cart_totals { width: auto; float: none; } /* Line-item table. The structure now comes from our cart.php override, so this only has to undo WooCommerce's own table styling — .linetable / .li-prod / .stepper carry the look and live in theme.css. */ .woocommerce-cart table.cart.linetable { border: 0; margin: 0; } .woocommerce-cart table.cart.linetable th, .woocommerce-cart table.cart.linetable td { background: none; } .woocommerce-cart table.cart.linetable thead th { border-top: 0; border-left: 0; border-right: 0; } /* WooCommerce's own `.woocommerce table.shop_table th/td` (0,2,2) outranks the `.linetable` rules in theme.css (0,1,1), so restate the mockup's padding at a weight that wins. mock line 408/409: th 0 10px 10px, td 16px 10px. */ .woocommerce-cart table.cart.linetable thead th { padding: 0 10px 10px; } .woocommerce-cart table.cart.linetable td { padding: 16px 10px; vertical-align: top; } .woocommerce-cart table.cart.linetable td.product-quantity, .woocommerce-cart table.cart.linetable td.product-price, .woocommerce-cart table.cart.linetable td.product-subtotal, .woocommerce-cart table.cart.linetable td.product-remove { vertical-align: middle; } /* Same story for the thumbnail: WooCommerce pins cart images to 32px. mock 411. */ .woocommerce-cart table.cart.linetable td.product-name .li-prod img { width: 70px; height: 70px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; object-fit: contain; flex-shrink: 0; } .woocommerce-cart table.cart.linetable td.product-price, .woocommerce-cart table.cart.linetable td.product-subtotal { color: var(--ink); white-space: nowrap; } .woocommerce-cart table.cart.linetable td.product-quantity { width: 120px; } .woocommerce-cart table.cart.linetable td.product-remove { width: 52px; text-align: right; } /* mock line 1772: the remove control is a small ghost button, not WC's bare ×. */ .woocommerce-cart td.product-remove a.remove { color: var(--ink-soft) !important; font-size: 1rem; width: auto; height: auto; padding: .4em .7em; line-height: 1.1; } .woocommerce-cart td.product-remove a.remove:hover { background: #fff !important; border-color: var(--red); color: var(--red) !important; } .rb-cart-stepper { width: 110px; } .rb-cart-stepper input { -moz-appearance: textfield; } .rb-cart-stepper input::-webkit-outer-spin-button, .rb-cart-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* While a quantity change is posting, the number on screen is not yet the number in the cart — dim the form so that is visible. */ .rb-cart-updating { opacity: .55; pointer-events: none; transition: opacity .1s; } .woocommerce-cart .linetable td.actions { border-bottom: 0; padding: 16px 10px 0; } .woocommerce-cart .actions .coupon { display: inline-flex; gap: 8px; margin-right: 10px; } .woocommerce-cart .actions .coupon .input-text { border: 1px solid var(--line-2); border-radius: 6px; padding: .55em .8em; font-size: .92rem; width: 170px; } .rb-cart-ships { margin-top: 16px; } /* mock line 1774 */ /* Order summary rail. .summary-box (theme.css) paints the box; these rules only neutralise WooCommerce's table markup inside the shipping rows. */ .woocommerce .cart_totals { width: auto; float: none; } .woocommerce .cart_totals h3 { margin: 0 0 12px; font-size: 1.05rem; } .woocommerce .cart_totals .row > span:last-child { text-align: right; } .woocommerce .cart_totals .order-total .amount { color: var(--green-deep); } .woocommerce .cart_totals .rb-freight-row { font-size: .82rem; color: var(--ink-soft); } /* wc_cart_totals_shipping_html() emits a