/*! * Custom Webshop Tweaks for Lizzard — frontend styles * Version: 2.0.2 * License: GPL-2.0-or-later * * Why compound selectors (`body.cst-b2b-user.single-product`) instead * of descendant chains (`.cst-b2b-user .single-product`): * In WordPress, both `cst-b2b-user` (added by us) and `single-product` * (added by core) live on the same element. CSS descendant * combinators require strict descent — an element can't be its own * ancestor. v1.7.0 happened to render acceptably because its inline * CSS was loaded early enough that theme rules cascaded over it in * ways that compensated. v2.0.1 made this visible. v2.0.2 fixes it * structurally with compound selectors. * * Layout rules use `!important` because they need to beat theme CSS * for the price container's flex direction. All visual styling * (colors, sizes, badges) stays non-important so admins can re-skin * freely. * * Sections: * 1. Cart messages * 2. Distraction-free checkout * 3. Checkout email field separator * 4. B2B dual-price layout (single product) * 5. Margin badge + wholesale-unavailable badge * 6. Tax row visibility (B2C hides, B2B shows) * 7. Mobile refinements */ /* 1. ─── Cart messages ───────────────────────────────────────────── */ .woocommerce-info .showcoupon { font-weight: 600; color: #0E3386; } /* 2. ─── Distraction-free checkout ────────────────────────────────── */ body.glozin-distraction-free-checkout #site-header .header-main__nav, body.glozin-distraction-free-checkout #site-header .header-bottom, body.glozin-distraction-free-checkout #site-header .header-mobile-main__nav, body.glozin-distraction-free-checkout #topbar, body.glozin-distraction-free-checkout #site-footer, body.glozin-distraction-free-checkout .glozin-breadcrumb-navigation-wrapper { display: none !important; } .glozin-checkout-footer { border-top: 1px solid var(--gz-border-color, #e5e7eb); padding: 28px 24px; margin-top: 20px; } .glozin-checkout-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .glozin-checkout-footer__links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .glozin-checkout-footer__links a { font-size: .8125rem; color: var(--gz-color-base, #4b5563); text-decoration: underline; text-underline-offset: 2px; } .glozin-checkout-footer__links a:hover { color: var(--gz-color-dark, #111827); } .glozin-checkout-footer__sep { font-size: .75rem; color: var(--gz-color-base, #4b5563); opacity: .4; } .glozin-checkout-footer__copy { font-size: .75rem; color: var(--gz-color-base, #4b5563); opacity: .6; margin: 0; } /* 3. ─── Checkout email-first separator ───────────────────────────── */ #billing_email_field { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--gz-border-color, #e5e7eb); } /* 4. ─── B2B dual-price layout on single product ──────────────────── */ /* Base price container — flex layout for the dual rows. Note: this rule has high specificity AND !important on layout properties because Glozin's own `.price` styling is what we're overriding. */ body.cst-b2b-user .glozin-product-price .price { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } /* Each price row is its own flex container — label inline with price. */ body.cst-b2b-user .glozin-product-price .price .b2bking-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; line-height: 1.4; width: 100%; } /* Retail row — comes first, smaller, gray; strike-through when there's a wholesale row underneath. */ body.cst-b2b-user .glozin-product-price .b2bking-price-row--retail { order: 1; } body.cst-b2b-user .glozin-product-price .b2bking_retail_price_text { font-size: .8125rem; font-weight: 400; color: var(--gz-color-base, #4b5563); white-space: nowrap; } body.cst-b2b-user .glozin-product-price .b2bking_retail_price_price { font-size: .875rem; font-weight: 400; color: var(--gz-color-base, #4b5563); } body.cst-b2b-user .glozin-product-price .b2bking-price-row--retail:has(~ .b2bking-price-row--wholesale) .b2bking_retail_price_price { text-decoration: line-through; text-decoration-color: var(--gz-color-base, #4b5563); } body.cst-b2b-user .glozin-product-price .b2bking_retail_price_price br { display: none; } /* Wholesale row — primary price, with badge inline (wraps on narrow). */ body.cst-b2b-user .glozin-product-price .b2bking-price-row--wholesale { order: 2; flex-wrap: wrap; gap: 8px; align-items: center; } body.cst-b2b-user .glozin-product-price .b2bking_b2b_price_text { font-size: .95rem; font-weight: 500; color: var(--gz-color-dark, #111827); white-space: nowrap; } body.cst-b2b-user .glozin-product-price .b2bking_b2b_price_price { font-size: 1.625rem; font-weight: 600; color: var(--gz-color-dark, #111827); line-height: 1; } body.cst-b2b-user .glozin-product-price .b2bking_b2b_price_price .woocommerce-price-suffix { font-size: .7em; font-weight: 500; margin-left: 4px; } /* Variable-product badge anchor — JS populates this on found_variation. `:empty` hides the anchor when no variation is selected. */ body.cst-b2b-user .cst-variable-inline-badge { display: inline-flex; align-items: center; vertical-align: middle; } body.cst-b2b-user .cst-variable-inline-badge:empty { display: none; } /* 5. ─── Margin & unavailable badges ──────────────────────────────── */ /* Margin badge — green pill. Visible everywhere it lives (inside the wholesale row on simple products, inside the variable anchor on variations). Scoped to body class so we don't accidentally style the same class elsewhere. */ body.cst-b2b-user .b2bking-margin-badge { display: inline-flex !important; align-items: center; font-size: .6875rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: .04em; color: #14854e; background-color: #dcf0d8; border: 1px solid #b4deb0; border-radius: 30px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; } /* When the badge lives inside the variable anchor, it inherits the small left-margin so it sits flush after the price. */ body.cst-b2b-user .b2bking-price-row--wholesale .cst-variable-inline-badge .b2bking-margin-badge { margin-left: 2px; } /* Unavailable badge (orange/amber) — sits below the price block. */ body.cst-b2b-user .b2bking-wholesale-notice { margin-top: 6px; min-height: 0; } body.cst-b2b-user .b2bking-wholesale-unavailable-badge { display: inline-block; font-size: .6875rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; color: #92400e; background-color: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px; padding: 6px 12px; white-space: normal; word-break: break-word; max-width: 100%; } body.cst-b2b-user .b2bking-price-row--wholesale .b2bking-wholesale-unavailable-badge { margin-top: 4px; } body.cst-b2b-user .b2bking-wholesale-notice .b2bking-wholesale-unavailable-badge { margin-top: 0; } /* 6. ─── Tax row visibility (B2C hides, B2B shows) ────────────────── */ .woocommerce-cart .cart_totals .includes_tax, .woocommerce-checkout .shop_table .includes_tax, .woocommerce-checkout-review-order-table .includes_tax { display: none; } body.cst-b2b-user.woocommerce-cart .cart_totals .includes_tax, body.cst-b2b-user.woocommerce-checkout .shop_table .includes_tax, body.cst-b2b-user .woocommerce-checkout-review-order-table .includes_tax { display: inline-block; } /* 7. ─── Mobile refinements ───────────────────────────────────────── */ @media (max-width: 767px) { body.cst-b2b-user .glozin-product-price .b2bking_b2b_price_price { font-size: 1.375rem; } /* On narrow screens push the badge to its own line so it can't overflow off the right side of the price container. */ body.cst-b2b-user .glozin-product-price .b2bking-margin-badge { flex-basis: 100%; margin-top: 2px; } }