/* * VAT view toggle — which of the two prices a visitor sees. * * WHY THIS IS CSS AND NOT A SERVER DECISION. tax/display/type = 3 makes Magento render BOTH the * VAT-inclusive and VAT-exclusive price, computed by its own tax engine, into every price box. The * HTML is therefore IDENTICAL for every visitor, and a class on decides which is visible. * That is the whole trick: no cache variation, no X-Magento-Vary, no doubling of the Varnish object * count. A per-visitor tax setting at the same URL would mean a per-visitor page, which is why the * earlier attempt at this fought the full page cache and lost. * * WHY THIS FILE IS NOT IN THE TAILWIND SOURCE. Two reasons. web/css/styles.css is COMPILED Tailwind * output and must not be hand-edited. And these rules must beat Magezon's bundled bootstrap, which * loads on every page carrying a PageBuilder block — `@layer components` loses to an unlayered * vendor stylesheet regardless of specificity, which this estate has already paid for once * (findings: the Tailwind layer trap). Unlayered rules in a stylesheet loaded last cannot lose that * way. * * THE SURFACES. Verified on box5; the first four on 2026-09-21, the rest on 2026-09-22 after the * first pass was found to cover only the four it had been tested against: * Hyvä product page .final-price / .final-price-excl-tax / .price-excl-tax * Hyvä category grid .price-including-tax / .price-excluding-tax * Magezon grid + slider .price-including-tax / .price-excluding-tax (identical markup) * discounted product .old-price / .old-price-excl-tax (product page) * discounted card .special-price / .old-price (grid; both already covered) * tier prices .price-container.price-tier_price (NOT inside a .price-box) * "As low as" .minimal-price-link * grouped child rows one .price-box per associated product * The Magezon elements render through Magento's own price renderer -- $block->getProductPrice() -- * so they produce the same standard markup as the Hyvä grid and need no separate rules. * * DEFAULT IS VAT-INCLUSIVE, for everyone, including Googlebot. Google Shopping UK requires the * submitted price to include VAT and the landing page to agree; Googlebot crawls predominantly from * US addresses, so a geo-default would show it the ex-VAT view while the feed says inc-VAT -- the * exact price mismatch that disapproves every item. The absence of a class means inclusive. */ /* * SPECIFICITY NOTE, measured on box5 2026-09-21 and the reason this file was rewritten once. * * The compiled theme stylesheet already carries: * .price-box .price-excluding-tax { display: block } (0,2,0) * .price-box .price-excluding-tax::after { content: " " attr(data-label) } * and styles.css is linked AGAIN after this file. So a plain `.price-excluding-tax { display:none }` * at (0,1,0) lost twice over -- both prices stayed visible and Magento's "Excl. Tax" data-label kept * printing. Every rule below therefore leads with `html`, which is enough on its own: `html.vat-exc` * and `html:not(.vat-exc)` are each (0,1,1), so a single following class already clears (0,2,0) * without naming a container. Where a rule still names one it is because it is beating something * MORE specific than that, and the comment beside it says which. * * The theme also already had a rule adding the label Magezon never rendered: * .magezon-builder .product-item:not(:has(.tf-card-vat)) .price::after { content:" Excl. VAT" } * That is why the unit partial carries the class `tf-card-vat` -- the existing :not(:has()) guard * then switches itself off wherever the partial renders, instead of the two fighting. Reuse the * hook that is already there rather than adding a second mechanism. */ /* * THE SELECTORS ARE NOT SCOPED TO `.price-box`, AND THEY ONLY FIRE WHERE BOTH FIGURES EXIST. * * The first version of this file qualified every rule with `.price-box`, purely to clear the * (0,2,0) of the theme's own `.price-box .price-excluding-tax{display:block}`. That worked for the * four surfaces it was tested on and silently missed every price Magento renders OUTSIDE a price * box -- the tier-price list is the one that bit. `html:not(.vat-exc)` is itself (0,1,1), so a * single following class already clears the same bar without naming a container. * * But dropping the container introduced a worse bug, found by looking at the CART: the cart renders * with `tax/cart_display/price = 1`, so it emits a `.price-excluding-tax` with NO inclusive twin -- * and an unguarded `html:not(.vat-exc) .price-excluding-tax {display:none}` hid the cart's prices * outright. Every rule below is therefore written as a SIBLING relationship: hide a figure only * where the other one is actually there to replace it. * * That guard is not defensive noise, it is the correctness condition, and it buys two things: * - anywhere Magento renders ONE figure -- cart, minicart, checkout, any block at display type 1 * or 2 -- these rules do not fire at all, and the price stays on screen; * - the whole stylesheet is INERT at `tax/display/type = 1`, which is what production runs today. * It can ship ahead of the config change and do nothing until the config lands. * * Magento's amount renderer always emits the inclusive figure first, then the exclusive one, as * siblings. Verified on box5 2026-09-22 across price boxes, tier lists, "As low as" links and * grouped rows. */ /* ---- default: VAT-inclusive. The ex-VAT figures stay in the DOM, unseen. ---------------------- */ html:not(.vat-exc) .price-including-tax ~ .price-excluding-tax, html:not(.vat-exc) .final-price ~ .final-price-excl-tax, html:not(.vat-exc) .old-price ~ .old-price-excl-tax, html:not(.vat-exc) .final-price ~ .price-excl-tax, html:not(.vat-exc) .tf-vat-label[data-vat="exc"], html:not(.vat-exc) .tf-vat-amount[data-vat="exc"] { display: none; } /* ---- opted out: VAT-exclusive ----------------------------------------------------------------- */ /* * THESE TWO BLOCKS ARE SPLIT ON PURPOSE. DO NOT MERGE THEM. * * CSS discards an ENTIRE rule if any selector in its list fails to parse, and `:has()` is the * newest thing in this file -- Chrome 105, Safari 15.4, Firefox 121. In any browser without it the * combined rule would have been thrown away whole, taking the two `[data-vat="inc"]` selectors with * it even though they are plain attribute matches that every browser understands. An opted-out * visitor would then have seen the inc-VAT label AND the ex-VAT label at once, on a price. * * Kept apart, a browser without `:has()` degrades to showing both figures rather than showing two * contradictory labels, and the labels keep working everywhere. */ html.vat-exc .tf-vat-label[data-vat="inc"], html.vat-exc .tf-vat-amount[data-vat="inc"] { display: none; } html.vat-exc .price-including-tax:has(~ .price-excluding-tax), html.vat-exc .final-price:has(~ .final-price-excl-tax), html.vat-exc .final-price:has(~ .price-excl-tax) { display: none; } /* * The product page renders the "was" price as a PAIR of sibling divs -- `.old-price` carrying the * inclusive figure and `.old-price-excl-tax` the exclusive one -- where the grid renders ONE * `.old-price` wrapping both. Hiding `.old-price` outright would therefore delete the whole "was" * price from every category card, so the rule fires only where the exclusive twin exists. */ html.vat-exc .old-price:has(~ .old-price-excl-tax) { display: none; } html.vat-exc .price-including-tax ~ .price-excluding-tax, html.vat-exc .final-price ~ .final-price-excl-tax, html.vat-exc .final-price ~ .price-excl-tax { display: inline; } /* * SIZE. Measured on box5 2026-09-22 and reported by the owner before it was measured: toggling to * ex-VAT shrank the price. The theme expresses "this is the secondary figure" as * .price-including-tax + .price-excluding-tax { --price-font-size: 1rem } * because in stock Magento the ex-tax number is always the small one under the real price. Our * toggle makes it the real price, so that convention has to come off -- and `inherit` is the right * value rather than a number, because it picks up whatever the CONTEXT set: 1.25em on a card, * .875em inside an old price, 2.5em on the product page. A literal size here would have flattened * all three. * * On a category card this was 20px -> 16px for the live price while the struck-through "was" price * GREW 12.25px -> 16px, leaving the two the same size. On a grouped row it was 24px -> 16px. */ html .price-container .price-including-tax + .price-excluding-tax { --price-font-size: inherit; } /* * Same problem on the product page's "was" price, which is a separate element rather than a sibling * span, so it never inherited the old-price treatment at all: it rendered at the FULL 40px of the * real price and with no strike-through, so a discounted product showed "Excl. Tax: £80.00" in * 40px bold immediately above the actual £82.80. Set the same two custom properties the theme uses * for `.old-price` rather than restating sizes -- `.product-info-main .old-price{--price-font-size:1em}` * and `.price-box .old-price{--price-font-weight:normal}`. */ html .price-box .old-price-excl-tax { --price-font-size: 1em; --price-font-weight: normal; } html .price-box .old-price-excl-tax .price { text-decoration: line-through; } /* * Magento labels its own figure via a data attribute, which the theme prints as generated content: * "£54.00 £45.00 Excl. Tax" * Our own label sits beside the price and carries the unit as well, which Magento's does not. Two * labels on one number is what made the box unreadable. Suppress theirs, keep ours. */ html .price-box .price-excluding-tax::after, html .price-box .price-including-tax::after { content: none; } /* * The tier-price list has its OWN generated-content convention, and a more specific one: * .price-container.price-tier_price > .price-including-tax + .price-excluding-tax::before * { content: "(" attr(data-label) ": " } * which printed "Buy 10 for £4.74 (Excl. Tax: £3.95) each" -- both prices, on both views, ignoring * the toggle entirely. The reliable recipe against a rule like that is to copy its selector exactly * and prefix `html `: same class count, one more element, so it wins without a specificity hack * nobody can read six months from now. */ html .price-container.price-tier_price > .price-including-tax + .price-excluding-tax::before, html .price-container.price-tier_price > .price-including-tax + .price-excluding-tax::after { content: none; } /* * The product page's ex-VAT blocks carry a LITERAL "Excl. Tax:" span -- real markup, not generated * content, so the `content: none` rules above cannot reach it. In the inclusive view those blocks * are hidden and it does not matter; in the exclusive view it sat in front of the price and gave * "Excl. Tax: £69.00 p/m ex. VAT", which says the same thing twice. * * `:first-child` rather than `:not(.price)`, because `.price-excl-tax` wraps its figure in a plain * span -- so `:not(.price)` would have matched the wrapper and hidden the price along with the * label. The label is the first child in all three blocks. */ html .final-price-excl-tax > span > span:first-child, html .old-price-excl-tax > span > span:first-child, html .price-excl-tax > span:first-child { display: none; } /* * Same for the swatch button, which hardcoded the ex-VAT wording in generated content. */ html .tf-addtocart .sample-product-wrapper button span::after { content: none; } /* ---- the toggle control ----------------------------------------------------------------------- */ .tf-vat-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; } .tf-vat-toggle button { cursor: pointer; border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.5rem; font-weight: 600; background: transparent; color: inherit; } .tf-vat-toggle button[aria-pressed="true"] { background: currentColor; } .tf-vat-toggle button[aria-pressed="true"] span { color: var(--color-white, #fff); mix-blend-mode: difference; } /* ---- the totals, on the Hyvä cart ------------------------------------------------------------- * * The switcher governed product prices only. The cart's subtotal and delivery rows kept showing the * ex-VAT figure while the toggle said inc. VAT, which is the one thing the control exists to stop. * * Hyvä's totals templates render the pair as four cells of ONE grid, so there was no element to * hide. `MM/hyva-topfabric/Magento_Tax/templates/php-cart/totals/{subtotal,shipping}.phtml` now * split that into two marked wrappers; these rules do the rest. * * Plain class selectors, no `:has()`, so there is nothing here that a browser can fail to parse and * throw the whole rule away over. */ html:not(.vat-exc) .tf-total-excl { display: none; } html.vat-exc .tf-total-incl { display: none; } /* ---- the toggle beside the price, and the export sentence with it ------------------------------ * * Added 2026-09-25. The header topbar toggle is correct but far from the number it governs, and the * "not charged VAT outside the UK" sentence was inside the key-info , so a visitor saw it * only by opening the modal. Trade buyers are 28.2% of orders and 42.8% of revenue; export is 17% of * orders and 34% of revenue and is shown a price 20% above what it pays. Both audiences were being * served by controls they had to go looking for. * * Plain CSS in this file, not Tailwind: web/css/styles.css is compiled output that must not be * hand-edited, and the Tailwind build cannot be run in this estate at all. These rules are unlayered * and this file loads last, which is what keeps them ahead of Magezon's bundled bootstrap -- the * layer trap this theme has already paid for once. */ .tf-price-vat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: -0.5rem 0 1rem; color: var(--color-neutral-700, #404040); } .tf-price-vat-note { font-size: 0.75rem; line-height: 1.5; } /* * The header instance keeps its inherited size. This one sits under a large price, so the control is * given a little more room without becoming a second call to action. */ .tf-price-vat .tf-vat-toggle { font-size: 0.8125rem; } .tf-price-vat .tf-vat-toggle button { padding: 0.1rem 0.6rem; } /* * On a narrow screen the sentence goes to its own line rather than squeezing the toggle, because the * toggle is the control and the sentence is the explanation. */ @media (max-width: 480px) { .tf-price-vat-note { flex-basis: 100%; } }