/* Theme Name: NZM Laboratories Theme URI: https://nzmlab.com/ Author: NZM Laboratories Description: WooCommerce storefront theme for NZM Laboratories — research-grade peptides, EU-synthesised, Janoshik-verified. Converted faithfully from the original Astro design to a full WooCommerce theme (shop, product, cart, checkout, research blog). Version: 1.0.1 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: nzm Tags: e-commerce, woocommerce, custom-menu, featured-images, blog WC requires at least: 8.0 WC tested up to: 10.9 */ /* * The full visual system lives in assets/css/ (layout.css, home.css, product.css, * shop.css, cart.css, checkout.css, science.css, points.css, finalcta.css) and is * enqueued from functions.php. This file carries the theme header plus small * WordPress-environment overrides that the vendored design CSS can't know about. */ /* -------------------------------------------------------------------------- * Admin-bar offset for the homepage's absolute nav. * * On the homepage the nav is `position:absolute; top:36px` (transparent bar * floating over the hero, sitting just under the 36px utility bar). When the * WordPress admin bar is visible it adds `html{margin-top:32px}`, which pushes * the in-flow utility bar down but NOT the absolute nav — so the nav overlaps * the utility bar. Push the absolute nav down by the admin-bar height to match. * (Selectors use two body classes on the same : .admin-bar + .home.) * ----------------------------------------------------------------------- */ body.admin-bar.home .nav { top: calc( 36px + 32px ); } @media screen and ( max-width: 782px ) { body.admin-bar.home .nav { top: calc( 36px + 46px ); } } /* -------------------------------------------------------------------------- * Mobile drawer under the admin bar. * * The mobile menu (.mnav) is `position:fixed; top:0`, so the WordPress admin bar * (fixed, z-index 99999) covers its top (logo + close button) for logged-in * users. Offset the drawer by the admin-bar height: 32px normally, 46px on the * ≤782px screens where WP makes the admin bar taller. * ----------------------------------------------------------------------- */ body.admin-bar .mnav { top: 32px; } @media screen and ( max-width: 782px ) { body.admin-bar .mnav { top: 46px; } } /* -------------------------------------------------------------------------- * Mobile hero height under the admin bar. * * The mobile hero is `min-height:100svh` with its content bottom-aligned. When * the WordPress admin bar is visible it pushes the page down by its height * (html{margin-top:46px}), so the full-height hero — and its bottom "Shop now" * button — extends that far below the fold. Trim the hero by the admin-bar * height for logged-in users only; logged-out visitors keep the full 100svh. * ----------------------------------------------------------------------- */ @media screen and ( max-width: 640px ) { body.admin-bar .hero, body.admin-bar .hero__inner { min-height: calc( 100svh - 46px ); } } /* -------------------------------------------------------------------------- * Tier Pricing Table — restyle the plugin's quantity "blocks" (buttons) on the * product buy box to match the original design's .qty-preset chips: quantity on * top (bold), price + discount below, active tier filled ink. Scoped to .info * so it only affects the PDP buy box. !important beats the plugin's main.css. * ----------------------------------------------------------------------- */ .info .tiered-pricing-wrapper, .info .tiered-pricing-dynamic-price-wrapper { border: 0 !important; padding: 0 !important; margin: 14px 0 0 !important; background: none !important; box-shadow: none !important; } .info .tiered-pricing-blocks { display: flex !important; flex-wrap: wrap; gap: 8px !important; border: 0 !important; padding: 12px 0 0 !important; background: none !important; } .info .tiered-pricing-blocks .tiered-pricing-block { position: relative; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 88px; margin: 0 !important; padding: 9px 16px !important; background: var( --white, #fff ) !important; border: 1px solid var( --line, #d4d4d4 ) !important; border-radius: 5px !important; cursor: pointer; text-align: center; font-family: "JetBrains Mono", monospace !important; color: var( --ink, #0a0a0a ) !important; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } /* "Most popular" badge on the first discount tier (qty 3), like the source. */ .info .tiered-pricing-blocks .tiered-pricing-block[data-tiered-quantity="3"] { border-color: var( --ink, #0a0a0a ) !important; } .info .tiered-pricing-blocks .tiered-pricing-block[data-tiered-quantity="3"]::after { content: "Most popular"; position: absolute; top: -9px; left: 50%; transform: translateX( -50% ); white-space: nowrap; background: var( --ink, #0a0a0a ); color: var( --white, #fff ); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; padding: 2px 8px; border-radius: 999px; line-height: 1.4; } .info .tiered-pricing-blocks .tiered-pricing-block[data-tiered-quantity="3"].tiered-pricing--active::after { background: var( --white, #fff ); color: var( --ink, #0a0a0a ); } .info .tiered-pricing-blocks .tiered-pricing-block:hover { border-color: var( --ink, #0a0a0a ) !important; } .info .tiered-pricing-blocks .tiered-pricing-block.tiered-pricing--active { background: var( --ink, #0a0a0a ) !important; border-color: var( --ink, #0a0a0a ) !important; color: var( --white, #fff ) !important; } .info .tiered-pricing-block__quantity { order: -1; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1 !important; color: inherit !important; } .info .tiered-pricing-block__price { display: flex !important; align-items: baseline; gap: 4px; margin: 0 !important; font-size: 10px !important; letter-spacing: .04em; line-height: 1.1 !important; color: var( --ink-soft, #1c1c1c ) !important; } .info .tiered-pricing-block.tiered-pricing--active .tiered-pricing-block__price, .info .tiered-pricing-block.tiered-pricing--active .tiered-pricing-block__price-discount { color: rgba( 255, 255, 255, .7 ) !important; } .info .tiered-pricing-block__price .woocommerce-Price-amount { font-size: 11px !important; font-weight: 600; color: inherit !important; } .info .tiered-pricing-block__price-discount { font-size: 10px !important; color: inherit !important; } /* -------------------------------------------------------------------------- * Request-a-compound (bench-req) section — homepage + shop. * The source shipped these rules as an inline