/* ============================================================================= * VNM — single product, rebuilt to the reference's two-column shape * ----------------------------------------------------------------------------- * MEASURED on the surviving solutech install, exam.vania-novikau.me * (/product/by-me-a-lambo/, 1440 viewport). Its `.product` is 1265 wide and * holds exactly two equal columns: * * .woocommerce-product-gallery 607 wide at x=80 (images + thumb grid) * .summary.entry-summary 607 wide at x=738 (51px gutter) * .product-custom-main-content <- the WPBakery body: description + spec * p.price * form.cart * .product_meta * * There are NO tabs and NO related products: solutech unsets description, * reviews and additional_information in `solutech_remove_all_product_tabs` * (functions.php:663) and prints the whole post_content into the SUMMARY column * instead, via `solutech_output_content_in_summary` on * `woocommerce_single_product_summary` at priority 15 (functions.php:686). * * `ai_woo_vc_fix.php` in that theme does the same job with an explicit * WPBMap::addAllMappedShortcodes() call, and looks like the newer attempt — but * it is NOT the active path: its include is commented out at functions.php:672. * The rendered DOM settles it, `.product-custom-main-content` carrying a nested * `.wpb-content-wrapper` is the one-class version plus WPBakery's own wrapper. * * Ours is a block template, so the same shape is expressed as a two-column * `wp:columns` with `wp:post-content` in the right column — templates/single-product.html. * This file only fixes what the block markup cannot say. * ========================================================================== */ /* WooCommerce's own blocks stylesheet caps the gallery: `.woocommerce .wp-block-woocommerce-product-image-gallery { max-width: 512px }`. That left a 512px gallery in a 634px column while the reference's fills its column edge to edge (607 of 607). The cap is WooCommerce's default for a narrower layout, not a decision of ours, so it is lifted inside this template only. */ .woocommerce .vnm-product .wp-block-woocommerce-product-image-gallery { max-width: none; } /* The reference's gutter is 51px between two 607 columns. `wp:columns` ships 2em (32px); stating it keeps the pair at the reference's proportion rather than at the block default. */ .vnm-product__cols { gap: 51px; } /* The WPBakery body sits directly under the top of the summary column on the reference, with the price below it — no excerpt, no rating, nothing between. Block templates add block-gap between siblings, which pushed the price away from the body; this restores the reference's tighter stack. */ .vnm-product__body { margin-block: 0; } /* ----------------------------------------------------------------------------- * Typography and the price/cart block, measured off the reference * ----------------------------------------------------------------------------- * exam.vania-novikau.me/product/by-me-a-lambo/ at 1440, summary column 607.19px: * * title h2 23px / 35px w700 #000 * p.price 30px / 54px w400 #8888ea width 66%, margin-left 34% * .amount w700 * .price-decimals 22px / 39.6px w700 * .quantity display: none * button 18px / 20px w500 radius 4px, padding 12px, * width 32%, margin-left 34% -> 194x46 * * THE 34% IS NOT ARBITRARY. The spec sheet above splits label / value at the * same point, so the price and the button line up with the VALUES column rather * than with the column edge. Expressed as percentages, not as the measured * 206.4px / 400.8px / 194.3px, so the relationship survives a width change. * -------------------------------------------------------------------------- */ .vnm-product .vnm-product__body h2 { font-size: 23px; line-height: 35px; font-weight: 700; color: #000; } .vnm-product .wp-block-woocommerce-product-price, .vnm-product p.price { width: 66%; margin-left: 34%; font-size: 30px; line-height: 54px; font-weight: 400; color: var(--pix-main-color, #8888ea); } /* The figure is bold, the decimals are bold AND smaller. */ .vnm-product .woocommerce-Price-amount { font-weight: 700; } .vnm-product .price-decimals { font-size: 22px; line-height: 39.6px; font-weight: 700; } /* The reference hides the quantity selector outright. For a one-of-a-kind car at €690,000 there is nothing to choose, and WooCommerce still posts quantity=1 from the input's default — the field is display:none, not removed, so the form still submits exactly as before. */ .vnm-product form.cart .quantity { display: none; } /* OUT OF GRID ALTOGETHER, so the percentages resolve against the form. WooCommerce's blockified add-to-cart form is a multi-column grid — measured on ours, `0px 338px 269px` — and puts the button in track two. A grid item's percentage width resolves against its GRID AREA, not the form, so 32% became 32% of 338 (108px) and the 34% offset 115px, landing the button at x=853 instead of x=944. Re-declaring the tracks did not help either: WooCommerce's `.woocommerce div.product form.cart` counts (0,3,2) and simply re-laid them (`518px 69px 0px`, button 26px wide). `display: block` makes the argument moot rather than winning it — with `.quantity` hidden there is one visible child, and a block child's percentages resolve against the form's own 607px. The selector is lifted to (0,4,1) to clear WooCommerce's (0,3,2). */ :root .woocommerce .vnm-product form.cart { display: block; } /* The offset sits on the BUTTON, not on the form. The reference's form.cart spans the whole column (607 at x=738) and the button carries `margin-left: 34%`; moving the margin onto the form instead shrinks it, and the button's 32% then resolves against 401 rather than 607 — 75px, not 194. */ :root .woocommerce .vnm-product form.cart .single_add_to_cart_button { width: 32%; margin-left: 34%; padding: 12px; border: 1px solid transparent; border-radius: 4px; font-size: 18px; line-height: 20px; font-weight: 500; /* The reference's fill, same as the header button and the price: `--pix-main-color` (#8888ea), confirmed live on its product page. An earlier pass darkened this to #5b5bd6 for WCAG AA — white on #8888ea is 3.11:1 against a 4.5:1 bar for normal text — but the brand colour is the one that ships. */ background-color: var(--pix-main-color, #8888ea); } /* ----------------------------------------------------------------------------- * The lambo footer is centred * ----------------------------------------------------------------------------- * `.vnm-footer__inner` is a flex row with `justify-content: space-between` — it * holds the identity card on the left and the "Buy me a lambo" CTA on the right. * On the lambo page the CTA is gone (it would link to the page you are on), and * space-between with a single child just parks it hard left. * * The reference centres it: measured there, the card sits mid-page rather than * at the edge, which is what its 4/6/2 column split achieves where every other * page uses 6/6. The modifier class is emitted alongside the name/roles swap in * vnm_chrome_footer(), so all three parts of the variant travel together. * -------------------------------------------------------------------------- */ .vnm-footer--centred .vnm-footer__inner { justify-content: center; } /* * AND THE CARD HAS TO STOP STRETCHING, or the line above does nothing. * `.vnm-footer__card` is `flex: 1 1 380px` so it can share the row with the * CTA. With the CTA gone it is the only child, grows to the full 1285px, and * `justify-content: center` has a single full-width item to centre — measured * exactly that: card [70..1355], with the mark at x=55 and the text at x=185, * i.e. the content sitting hard left inside a centred box. * * `flex: 0 1 auto` lets it shrink to its contents so there is something for the * centring to act on. The reference's content block centres on x=713 against a * 1440 viewport; this puts ours in the same place. */ .vnm-footer--centred .vnm-footer__card { flex: 0 1 auto; }