/* VAT switcher: which of the two server-rendered prices is visible, plus the header control itself. The default (no class on ) is inclusive, with the net price in small type underneath. */ .idtools-vat-price { display: inline; } /* --- Inclusive: gross price as-is, net price small underneath. --- */ /* Relative sizing alone is not enough: the price it hangs under ranges from 16px on a product card to 30px on a product page, which put this line at 9.6px on cards. Keep it proportional, but never below a readable floor. */ .idtools-vat-price__excl { display: block; margin-top: 2px; font-size: max(0.55em, 13px); font-weight: 400; line-height: 1.35; opacity: 0.85; } /* The net line is a secondary note, so never let the theme's price styling make it compete with the gross price above it. */ .idtools-vat-price__excl .amount, .idtools-vat-price__excl .woocommerce-Price-amount, .idtools-vat-price__excl .woocommerce-price-suffix { font-size: inherit; font-weight: inherit; color: inherit; } /* "From" already appears on the gross line; repeating it on the note below reads as a stutter. Only drop it while the note is the secondary line. */ html:not(.idtools-vat-excl) .idtools-vat-price__excl .idtools-price-from { display: none; } /* Compact spots (floating cart) show one amount at a time: no note underneath, because a second line would break the button's layout. */ .idtools-vat-price--single .idtools-vat-price__excl { display: none; } html.idtools-vat-excl .idtools-vat-price--single .idtools-vat-price__incl { display: none; } html.idtools-vat-excl .idtools-vat-price--single .idtools-vat-price__excl { display: inline; } /* WooCommerce appends "(incl. VAT)" to a cart amount in the gross state but labels nothing in the net state, which reads as an inconsistency. The header control already names the current state. This only ever matches inside the mini cart; the cart and checkout pages are not wrapped and keep their labels. */ .idtools-vat-price .tax_label { display: none; } /* --- Exclusive: net price only, at full size. --- */ html.idtools-vat-excl .idtools-vat-price__incl { display: none; } html.idtools-vat-excl .idtools-vat-price__excl { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; opacity: 1; } /* --- Header control --- */ /* A segmented control, not a chip: the topbar is near-white (#f6f6f7), so a dark block would sit on it like a blot. A recessed track with the active option lifted out of it reads as a control at a glance, and borrows the brand orange only for the active label rather than as a fill. */ .idtools-vat-toggle { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; margin: 0 10px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); line-height: 1; vertical-align: middle; } .top-bar .idtools-vat-toggle { /* The7 sets display:block on topbar widgets and paints .top-bar-bg over them; force flex back and lift the control above that layer. */ display: inline-flex !important; position: relative; z-index: 5; } .idtools-vat-toggle__option { margin: 0; padding: 4px 11px; border: 0; border-radius: 999px; background: transparent; color: #6c6c74; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .idtools-vat-toggle__option:hover { color: #1a1c20; } .idtools-vat-toggle__option.is-active { background: #fff; color: #ea591b; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); cursor: default; } .idtools-vat-toggle__option:focus-visible { outline: 2px solid #ea591b; outline-offset: 1px; } /* In the mobile menu it sits on its own row and may use the full width. */ .mobile-mini-widgets-in-menu .idtools-vat-toggle { display: flex; margin: 12px 0; } .mobile-mini-widgets-in-menu .idtools-vat-toggle__option { flex: 1 1 0; padding: 7px 10px; font-size: 13px; }