between sections. On a dark theme that renders as a near-white bar.
Kill it. */
.waave-compliance-disclaimer-hr {
display: none !important;
}
@media (max-width: 782px) {
.waave-compliance-mode { padding: 20px 16px; }
.waave-compliance-disclaimer-content,
.waave-compliance-disclaimer-content span { font-size: 10px !important; }
}
/* === ADMIN BAR — RE-ENABLED 2026-05-27 ===
Was hidden globally because the old fixed header conflicted with WP's
admin bar. The new sticky header has a paired offset rule
(`.admin-bar .nh-header { top: 32px }` in the appended section at the
bottom of this file) so we can safely let core render the bar.
Hiding rules removed. */
/* === BEST SELLERS ON WHITE BG — override product card colors === */
div[style*="background:#fff"] .woocommerce ul.products li.product,
div[style*="background: #fff"] .woocommerce ul.products li.product {
background: #fff !important;
border: 1px solid #e5e5e5 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product:hover,
div[style*="background: #fff"] .woocommerce ul.products li.product:hover {
border-color: var(--gold) !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .woocommerce-loop-product__title,
div[style*="background: #fff"] .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #000 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .price,
div[style*="background: #fff"] .woocommerce ul.products li.product .price {
color: #000 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .price .woocommerce-Price-amount,
div[style*="background: #fff"] .woocommerce ul.products li.product .price .woocommerce-Price-amount {
color: #000 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
color: #000 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .button {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
div[style*="background:#fff"] .woocommerce ul.products li.product.outofstock .button {
background: #e5e5e5 !important;
color: #999 !important;
border-color: #e5e5e5 !important;
}
/* Best sellers category label */
.woocommerce ul.products li.product .ast-woo-product-category {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
div[style*="background:#fff"] .woocommerce ul.products li.product .ast-woo-product-category,
div[style*="background:#ffffff"] .woocommerce ul.products li.product .ast-woo-product-category {
color: #999 !important;
}
/* White section overrides — use both #fff and #ffffff */
div[style*="background:#ffffff"] h2,
div[style*="background:#ffffff"] .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #000 !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product {
background: #fff !important;
border: 1px solid #e5e5e5 !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product:hover {
border-color: var(--gold) !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product .price,
div[style*="background:#ffffff"] .woocommerce ul.products li.product .price .woocommerce-Price-amount,
div[style*="background:#ffffff"] .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
div[style*="background:#ffffff"] .woocommerce ul.products li.product .price span {
color: #000 !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product .button {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product.outofstock .button {
background: #e5e5e5 !important;
color: #999 !important;
border-color: #e5e5e5 !important;
}
div[style*="background:#ffffff"] .woocommerce ul.products li.product .ast-woo-product-category {
color: #999 !important;
}
/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* === MOBILE (up to 768px) === */
@media (max-width: 768px) {
.erosyn-desktop-nav {
display: none !important;
}
.erosyn-hamburger-wrap {
display: flex !important;
}
.erosyn-nav-left {
display: none;
}
.erosyn-logo {
position: static;
transform: none;
}
.erosyn-header-inner {
justify-content: space-between;
padding: 0;
}
.erosyn-footer-inner {
flex-direction: column;
gap: 30px;
}
body.home .entry-content > div {
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
max-width: 100% !important;
}
/* --- Header --- */
.erosyn-header {
padding: 8px 15px;
}
.erosyn-logo img {
height: 40px;
}
.erosyn-header-icons {
gap: 12px;
}
.erosyn-header-icons .erosyn-icon svg {
width: 18px;
height: 18px;
}
.erosyn-announcement-bar {
font-size: 11px;
padding: 8px 10px;
letter-spacing: 0.5px;
}
/* --- Hamburger Drawer --- */
.erosyn-drawer {
width: 80vw;
max-width: 360px;
left: -85vw;
padding: 60px 30px 30px;
}
.erosyn-drawer.open {
left: 0;
}
.erosyn-drawer-nav a {
font-size: 15px !important;
padding: 18px 5px;
white-space: nowrap;
overflow: visible;
/* Bigger tap targets on mobile */
}
/* --- Hero Image --- */
body.home .entry-content > div:first-child,
body.home .entry-content > div[style*="position:relative"] {
min-height: 250px !important;
height: auto !important;
}
body.home .entry-content > div:first-child img,
body.home .entry-content > div[style*="position:relative"] img {
width: 100% !important;
height: auto !important;
object-fit: cover;
}
/* Hero overlay text */
div[style*="position:absolute"] {
padding: 15px !important;
}
div[style*="position:absolute"] p {
font-size: 18px !important;
line-height: 1.3 !important;
}
/* --- Marquee --- */
.erosyn-marquee span {
font-size: 11px !important;
letter-spacing: 2px !important;
padding: 0 15px !important;
}
/* --- Best Sellers / Product Grid --- */
.erosyn-product-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
padding: 0 10px;
}
.erosyn-product-info h3 {
font-size: 13px !important;
}
.erosyn-product-price {
font-size: 12px !important;
}
.erosyn-btn-cart,
.erosyn-btn-soldout {
padding: 12px !important;
font-size: 10px !important;
letter-spacing: 1px !important;
}
/* --- WooCommerce Shop Grid --- */
.woocommerce ul.products[class*="columns-"],
.woocommerce ul.products {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 0 10px !important;
}
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 10px !important;
min-width: 0 !important;
}
.woocommerce ul.products li.product img {
width: 100% !important;
height: auto !important;
background: #2a2a2a !important;
padding: 5px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 12px !important;
letter-spacing: 0.5px !important;
padding: 8px 0 2px !important;
}
.woocommerce ul.products li.product .price {
font-size: 14px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
padding: 10px 12px !important;
font-size: 10px !important;
letter-spacing: 1px !important;
width: 100%;
display: block !important;
text-align: center;
}
/* --- Single Product Page --- */
.woocommerce div.product {
padding: 15px !important;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce div.product div.images {
margin-bottom: 20px !important;
}
.woocommerce div.product div.images img {
width: 100% !important;
height: auto !important;
}
.woocommerce div.product .product_title {
font-size: 22px !important;
}
.woocommerce div.product p.price {
font-size: 22px !important;
}
.woocommerce div.product .quantity .qty {
width: 60px !important;
padding: 10px !important;
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1;
min-height: 48px;
font-size: 13px !important;
}
.erosyn-research-disclaimer {
font-size: 11px;
padding: 8px 12px;
}
/* --- Cart Page --- */
.woocommerce-cart table.cart {
display: block !important;
overflow-x: auto !important;
}
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
padding: 10px 8px !important;
font-size: 13px !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
width: 60px !important;
height: auto !important;
}
.woocommerce-cart table.cart td.product-name {
min-width: 120px;
}
.woocommerce-cart .cart_totals {
width: 100% !important;
float: none !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
font-size: 14px !important;
padding: 16px !important;
min-height: 52px;
}
.woocommerce table.cart td.actions {
padding: 15px 10px !important;
}
.woocommerce table.cart td.actions .coupon {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.woocommerce table.cart td.actions .coupon input[type="text"] {
flex: 1;
min-width: 0;
}
.woocommerce table.cart td.actions .coupon button {
white-space: nowrap;
}
.woocommerce table.cart td.actions > button[name="update_cart"] {
width: 100%;
margin-top: 8px;
}
/* --- Checkout Page --- */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
width: 100% !important;
float: none !important;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
width: 100% !important;
float: none !important;
}
.woocommerce form .form-row {
width: 100% !important;
float: none !important;
padding: 3px 0 !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
width: 100% !important;
min-height: 48px;
font-size: 16px !important; /* Prevents iOS zoom on focus */
}
.woocommerce #place_order {
width: 100% !important;
min-height: 52px;
font-size: 14px !important;
padding: 16px !important;
}
/* WC Blocks checkout (used by default WC) */
.wp-block-woocommerce-checkout {
padding: 0 10px !important;
}
.wc-block-checkout__form {
padding: 0 !important;
}
.wc-block-components-text-input input,
.wc-block-components-select select {
min-height: 48px !important;
font-size: 16px !important;
}
.wc-block-components-checkout-place-order-button {
min-height: 52px !important;
font-size: 14px !important;
}
/* --- My Account Page --- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
margin-bottom: 20px;
}
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
padding: 20px 15px !important;
margin: 0 !important;
}
.woocommerce form.woocommerce-form-login input[type="text"],
.woocommerce form.woocommerce-form-login input[type="password"],
.woocommerce form.woocommerce-form-register input[type="text"],
.woocommerce form.woocommerce-form-register input[type="email"],
.woocommerce form.woocommerce-form-register input[type="password"] {
width: 100% !important;
min-height: 48px;
font-size: 16px !important;
}
.woocommerce form.woocommerce-form-login button,
.woocommerce form.woocommerce-form-register button {
width: 100% !important;
min-height: 48px;
}
/* --- Contact / WPForms --- */
.wpforms-container,
.wpforms-form {
padding: 0 !important;
}
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
width: 100% !important;
min-height: 48px;
font-size: 16px !important;
}
.wpforms-submit-container button {
width: 100% !important;
min-height: 48px;
}
/* Inline contact form from page content */
div[style*="max-width:600px"] {
padding: 0 15px !important;
}
div[style*="max-width:600px"] input,
div[style*="max-width:600px"] textarea {
width: 100% !important;
box-sizing: border-box;
}
/* --- Non-homepage page padding on mobile --- */
body:not(.home) .site-content .ast-container {
padding: 0 20px !important;
}
body:not(.home) .entry-content {
padding: 15px 0 30px !important;
}
body:not(.home):not(.woocommerce-page) .entry-content {
padding: 15px 0 30px !important;
}
.page-id-56 .entry-content {
padding: 20px 0 40px !important;
}
/* Product tabs on mobile */
.woocommerce div.product .woocommerce-tabs .panel {
padding: 15px !important;
}
/* --- Homepage section padding --- */
body.home .entry-content > div[style*="padding"] {
padding-left: 15px !important;
padding-right: 15px !important;
}
body.home .entry-content > div h2 {
font-size: 22px !important;
}
body.home .entry-content > div p {
font-size: 14px !important;
}
/* --- Email Signup --- */
.erosyn-email-signup {
padding: 30px 15px;
}
.erosyn-email-signup > p {
font-size: 12px;
letter-spacing: 1px;
}
.erosyn-email-form {
max-width: 100%;
}
.erosyn-email-form input[type="email"] {
font-size: 16px !important; /* Prevent iOS zoom */
}
/* --- Footer --- */
.erosyn-footer {
padding: 30px 15px 15px;
}
.erosyn-footer-inner {
gap: 25px;
}
.erosyn-footer-disclaimer {
padding: 15px;
}
.erosyn-footer-disclaimer p {
font-size: 10px;
}
/* --- Compliance badges on mobile --- */
.erosyn-card-disclaimer {
font-size: 8px;
}
/* --- WooCommerce tabs on product page --- */
.woocommerce div.product .woocommerce-tabs {
margin-top: 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-size: 12px !important;
padding: 8px 12px !important;
}
/* --- Generic fix: prevent horizontal scroll --- */
body, html {
overflow-x: hidden !important;
}
* {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* === SMALL MOBILE (375px and below) === */
@media (max-width: 390px) {
.erosyn-product-grid {
grid-template-columns: 1fr 1fr !important;
gap: 8px;
padding: 0 10px;
}
.woocommerce ul.products[class*="columns-"],
.woocommerce ul.products {
grid-template-columns: 1fr 1fr !important;
}
.erosyn-header-icons {
gap: 8px;
}
.erosyn-logo img {
height: 35px;
}
.erosyn-announcement-bar {
font-size: 10px;
}
}
/* ============================================================
COMPLIANCE: Research Disclaimers
============================================================ */
/* Product page disclaimer */
.erosyn-research-disclaimer {
background: rgba(197, 169, 78, 0.1);
border: 1px solid #C5A94E;
border-radius: 4px;
padding: 10px 15px;
margin: 15px 0;
font-size: 13px;
color: #C5A94E;
letter-spacing: 0.5px;
}
.erosyn-research-disclaimer p {
margin: 0;
}
/* Shop card disclaimer */
.erosyn-card-disclaimer {
font-size: 10px;
color: #888;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 4px 0 0 0;
}
/* Footer sitewide disclaimer */
.erosyn-footer-disclaimer {
border-top: 1px solid #333;
padding: 20px 40px;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.erosyn-footer-disclaimer p {
font-size: 11px;
color: #b5b5b5;
line-height: 1.6;
letter-spacing: 0.3px;
margin: 0 0 10px;
}
.erosyn-footer-disclaimer p:last-child {
margin-bottom: 0;
}
/* WAAVE Compliance plugin disclaimer — superseded 2026-05-27 by the
dedicated styling block at the bottom of this file. The old color:#000
rule here was a workaround for when WAAVE rendered on a white footer
background. With the new dark-themed footer we want light text on
black, so this rule is neutralized (color: inherit lets the bottom-
of-file rule win cleanly). */
.waave-compliance-disclaimer-content,
.waave-compliance-disclaimer-content span {
color: inherit;
}
/* ============================================================
EMAIL CAPTURE: Newsletter Signup
============================================================ */
.erosyn-email-signup {
background: #1a1a1a;
padding: 40px 20px;
text-align: center;
border-top: 1px solid #333;
}
.erosyn-email-signup > p {
color: #fff;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 300;
}
.erosyn-email-form {
display: flex;
justify-content: center;
max-width: 400px;
margin: 0 auto;
border: 1px solid #555;
}
.erosyn-email-form input[type="email"] {
flex: 1;
padding: 12px 15px;
background: transparent;
border: none;
color: #fff;
font-size: 14px;
outline: none;
}
.erosyn-email-form input[type="email"]::placeholder {
color: #888;
}
.erosyn-email-form button {
background: transparent;
border: none;
color: #fff;
padding: 12px 15px;
cursor: pointer;
}
.erosyn-email-form button:hover {
color: #C5A94E;
}
/* ============================================================
COA / LAB CERTIFICATE TABS
============================================================ */
.erosyn-coa-tab {
padding: 20px 0;
}
.erosyn-coa-placeholder {
text-align: center;
padding: 40px 20px;
border: 1px dashed var(--border);
background: rgba(197, 169, 78, 0.05);
}
.erosyn-coa-icon {
font-size: 48px;
margin-bottom: 15px;
}
.erosyn-coa-placeholder p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.8;
max-width: 500px;
margin: 8px auto;
}
.erosyn-coa-link {
color: var(--gold) !important;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
}
/* Specifications table */
.erosyn-specs-table {
width: 100%;
border-collapse: collapse;
}
.erosyn-specs-table tr {
border-bottom: 1px solid var(--border);
}
.erosyn-specs-table td {
padding: 12px 15px;
font-size: 14px;
color: var(--text);
}
.erosyn-specs-table td:first-child {
color: var(--text-muted);
font-weight: 500;
width: 40%;
letter-spacing: 0.5px;
}
/* ============================================================
TRUST BADGES
============================================================ */
.erosyn-trust-badges {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 10px 0 5px;
}
.erosyn-badge {
background: rgba(197, 169, 78, 0.1);
border: 1px solid rgba(197, 169, 78, 0.3);
color: var(--gold) !important;
padding: 6px 12px;
font-size: 11px;
letter-spacing: 0.5px;
font-weight: 500;
white-space: nowrap;
}
/* ============================================================
BAC WATER CROSS-SELL
============================================================ */
.erosyn-cross-sell {
margin-top: 25px;
padding: 20px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.03);
}
.erosyn-cross-sell h4 {
font-size: 13px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase;
color: var(--gold) !important;
margin: 0 0 8px !important;
font-weight: 500 !important;
}
.erosyn-cross-sell-note {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 15px;
}
.erosyn-cross-sell-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.erosyn-cross-sell-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.erosyn-cross-sell-name {
font-size: 14px;
color: var(--text);
font-weight: 400;
}
.erosyn-cross-sell-price {
font-size: 16px;
color: var(--gold) !important;
font-weight: 500;
}
.erosyn-cross-sell-btn {
background: var(--gold) !important;
color: #000 !important;
border: none !important;
padding: 10px 20px !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase;
font-weight: 600 !important;
cursor: pointer;
white-space: nowrap;
text-decoration: none !important;
}
.erosyn-cross-sell-btn:hover {
background: transparent !important;
color: var(--gold) !important;
border: 1px solid var(--gold) !important;
}
/* ============================================================
PRODUCT FAQs
============================================================ */
.erosyn-product-faqs {
padding: 40px 0;
max-width: 800px;
}
.erosyn-product-faqs h2 {
font-size: 22px !important;
letter-spacing: 2px !important;
margin-bottom: 25px;
}
.erosyn-faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.erosyn-faq-item {
border-bottom: 1px solid var(--border);
}
.erosyn-faq-item summary {
padding: 18px 0;
cursor: pointer;
font-size: 14px;
color: var(--text);
font-weight: 400;
letter-spacing: 0.5px;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.erosyn-faq-item summary::after {
content: '+';
font-size: 20px;
color: var(--gold);
font-weight: 300;
transition: transform 0.2s;
}
.erosyn-faq-item[open] summary::after {
content: '−';
}
.erosyn-faq-item summary::-webkit-details-marker {
display: none;
}
.erosyn-faq-answer {
padding: 0 0 18px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.8;
}
/* ============================================================
LEAD MAGNET POPUP
============================================================ */
.erosyn-lead-magnet {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
z-index: 999998;
display: flex;
align-items: center;
justify-content: center;
}
.erosyn-lead-magnet-box {
background: var(--darker);
border: 1px solid var(--gold);
max-width: 440px;
width: 90%;
padding: 40px 30px;
text-align: center;
position: relative;
}
.erosyn-lead-magnet-close {
position: absolute;
top: 12px;
right: 15px;
background: none !important;
border: none !important;
color: var(--text-muted) !important;
font-size: 18px;
cursor: pointer;
padding: 5px !important;
}
.erosyn-lead-magnet-icon {
font-size: 40px;
margin-bottom: 10px;
}
.erosyn-lead-magnet-box h3 {
font-size: 20px !important;
letter-spacing: 2px !important;
text-transform: uppercase;
margin-bottom: 10px;
color: var(--gold) !important;
}
.erosyn-lead-magnet-box > p {
color: var(--text-muted);
font-size: 13px;
line-height: 1.7;
margin-bottom: 20px;
}
.erosyn-lead-magnet-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.erosyn-lead-magnet-form input {
width: 100%;
padding: 12px 15px !important;
background: #2a2a2a !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
font-size: 14px;
box-sizing: border-box;
}
.erosyn-lead-magnet-form button {
background: var(--gold) !important;
color: #000 !important;
border: none !important;
padding: 14px !important;
font-size: 12px !important;
letter-spacing: 2px !important;
font-weight: 600 !important;
cursor: pointer;
text-transform: uppercase;
}
.erosyn-lead-magnet-form button:hover {
background: #d4bc6a !important;
}
.erosyn-lead-magnet-fine {
font-size: 12px;
color: var(--text-muted);
margin-top: 15px;
}
.erosyn-lead-magnet-fine strong {
color: var(--gold) !important;
}
/* ============================================================
STICKY PROMO BAR
============================================================ */
.erosyn-sticky-promo {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--gold);
color: #000 !important;
display: none;
align-items: center;
justify-content: center;
gap: 15px;
padding: 12px 20px;
z-index: 99998;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
}
.erosyn-sticky-promo span {
color: #000 !important;
}
.erosyn-sticky-promo button {
background: #000 !important;
color: var(--gold) !important;
border: none !important;
padding: 8px 20px !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
font-weight: 600 !important;
cursor: pointer;
text-transform: uppercase;
}
.erosyn-sticky-close {
background: none !important;
color: #000 !important;
border: none !important;
font-size: 16px !important;
cursor: pointer;
padding: 4px 8px !important;
position: absolute;
right: 10px;
}
/* ============================================================
EXPLORE BY RESEARCH CATEGORY (Homepage)
============================================================ */
.erosyn-categories-section {
padding: 60px 40px;
background: var(--dark);
}
.erosyn-categories-section h2 {
text-align: center;
font-size: 26px !important;
letter-spacing: 3px !important;
text-transform: uppercase;
margin-bottom: 40px;
color: var(--text) !important;
}
.erosyn-categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.erosyn-category-card {
border: 1px solid var(--border);
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
text-decoration: none !important;
display: block;
background: rgba(255,255,255,0.02);
}
.erosyn-category-card:hover {
border-color: var(--gold);
background: rgba(197, 169, 78, 0.05);
}
.erosyn-category-icon {
font-size: 36px;
margin-bottom: 15px;
}
.erosyn-category-card h3 {
font-size: 14px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase;
color: var(--text) !important;
margin-bottom: 8px !important;
font-weight: 400 !important;
}
.erosyn-category-card p {
color: var(--text-muted) !important;
font-size: 12px;
line-height: 1.6;
}
/* Mobile for new features */
@media (max-width: 768px) {
.erosyn-trust-badges {
gap: 6px;
}
.erosyn-badge {
font-size: 9px;
padding: 5px 8px;
}
.woocommerce div.product form.variations_form .variations select {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
font-size: 16px !important; /* prevent iOS zoom */
}
.woocommerce div.product form.variations_form .variations td.label,
.woocommerce div.product form.variations_form .variations td.value {
display: block;
width: 100%;
padding: 5px 0;
}
.erosyn-cross-sell-item {
flex-direction: column;
align-items: flex-start;
}
.erosyn-cross-sell-btn {
width: 100%;
text-align: center;
}
.erosyn-product-faqs {
padding: 30px 15px;
}
.erosyn-categories-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.erosyn-categories-section {
padding: 40px 15px;
}
.erosyn-category-card {
padding: 20px 15px;
}
.erosyn-sticky-promo {
flex-wrap: wrap;
justify-content: center;
padding: 10px 40px 10px 15px;
font-size: 12px;
gap: 8px;
}
.erosyn-lead-magnet-box {
padding: 30px 20px;
}
.erosyn-lead-magnet-form input {
font-size: 16px !important; /* prevent iOS zoom */
}
}
/* === VARIABLE PRODUCT / VARIANT SELECTOR === */
.woocommerce div.product form.variations_form .variations {
margin-bottom: 20px;
}
.woocommerce div.product form.variations_form .variations td.label {
padding: 10px 15px 10px 0;
}
.woocommerce div.product form.variations_form .variations td.label label {
color: var(--text) !important;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
}
.woocommerce div.product form.variations_form .variations select {
background-color: #1a1a1a !important;
border: 1px solid var(--gold) !important;
color: #fff !important;
padding: 12px 40px 12px 15px !important;
font-size: 15px !important;
min-width: 250px;
width: 100%;
max-width: 350px;
height: auto !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C5A94E' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 12px 8px !important;
border-radius: 0 !important;
cursor: pointer;
letter-spacing: 0.5px;
}
.woocommerce div.product form.variations_form .variations select:focus {
border-color: #d4bc6a !important;
outline: none !important;
}
.woocommerce div.product form.variations_form .variations select option {
background: #1a1a1a;
color: #fff;
padding: 10px;
}
.woocommerce div.product form.variations_form .variations td.value {
padding: 10px 0;
}
.woocommerce div.product form.variations_form .variations table {
width: 100%;
}
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
color: var(--gold) !important;
font-size: 24px !important;
}
.woocommerce div.product .single_variation_wrap .woocommerce-variation-description p {
color: var(--text-muted) !important;
}
.woocommerce div.product form.variations_form .reset_variations {
color: var(--gold) !important;
font-size: 12px;
letter-spacing: 1px;
}
/* COA Image Display */
.erosyn-coa-image-wrap { text-align: center; }
.erosyn-coa-image-wrap a { display: inline-block; }
.erosyn-coa-image { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; transition: transform 0.2s; }
.erosyn-coa-image:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(197,169,78,0.2); }
.erosyn-coa-caption { color: var(--text-muted); font-size: 0.85rem; margin-top: 12px; text-align: center; }
/* === SEARCH OVERLAY === */
.erosyn-search-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(17, 17, 17, 0.98) !important;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.erosyn-search-overlay.active {
display: block;
opacity: 1;
visibility: visible;
}
.erosyn-search-overlay form {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
max-width: 600px;
width: 90%;
margin: 0 auto;
position: relative;
}
.erosyn-search-overlay input[type="search"] {
width: 100%;
padding: 18px 24px;
font-size: 20px;
background: var(--dark) !important;
color: var(--text) !important;
border: 2px solid var(--gold) !important;
border-radius: 6px;
outline: none;
font-family: 'Inter', sans-serif;
transition: border-color 0.2s;
}
.erosyn-search-overlay input[type="search"]:focus {
border-color: var(--gold-bg) !important;
box-shadow: 0 0 20px rgba(197, 169, 78, 0.2);
}
.erosyn-search-overlay input[type="search"]::placeholder {
color: var(--text-muted);
}
/* Search close button */
.erosyn-search-close {
position: absolute;
top: 40px;
right: 40px;
background: none;
border: none;
color: var(--text);
font-size: 32px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.erosyn-search-close:hover {
opacity: 1;
}
/* Mobile search overlay */
@media (max-width: 768px) {
.erosyn-search-overlay form {
width: 95%;
}
.erosyn-search-overlay input[type="search"] {
font-size: 18px;
padding: 16px 20px;
}
.erosyn-search-close {
top: 20px;
right: 20px;
font-size: 28px;
}
}
/* ============================================================
SECTION 6: SALES OPTIMIZATION STYLES
============================================================ */
/* Free Shipping Progress Bar */
.erosyn-shipping-bar {
background: rgba(197, 169, 78, 0.1);
border: 1px solid var(--gold);
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
text-align: center;
}
.erosyn-shipping-bar p {
color: var(--text) !important;
font-size: 14px;
margin: 0 0 10px 0;
font-weight: 500;
}
.erosyn-shipping-bar strong {
color: var(--gold) !important;
font-weight: 600;
}
.erosyn-shipping-track {
width: 100%;
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
}
.erosyn-shipping-fill {
height: 100%;
background: var(--gold);
transition: width 0.3s ease;
border-radius: 4px;
}
/* Sticky Add to Cart (Mobile) */
.erosyn-sticky-atc {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--dark);
border-top: 1px solid var(--border);
padding: 12px 15px;
z-index: 99;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.erosyn-sticky-atc.visible {
display: flex;
}
.erosyn-sticky-name {
color: var(--text) !important;
font-size: 13px;
font-weight: 500;
flex: 1;
letter-spacing: 0.5px;
}
.erosyn-sticky-price {
color: var(--gold) !important;
font-size: 14px;
font-weight: 600;
}
.erosyn-sticky-btn {
background: var(--gold) !important;
color: #000 !important;
border: none !important;
padding: 10px 16px !important;
font-size: 11px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
cursor: pointer;
border-radius: 3px;
white-space: nowrap;
text-decoration: none !important;
}
.erosyn-sticky-btn:hover {
background: #d4bc6a !important;
}
/* Low Stock Urgency */
.erosyn-low-stock {
background: rgba(255, 87, 34, 0.15);
border: 1px solid #ff5722;
color: #ff9800 !important;
padding: 10px 15px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
margin: 12px 0;
text-align: center;
letter-spacing: 0.5px;
}
.erosyn-in-stock {
background: rgba(76, 175, 80, 0.15);
border: 1px solid #4caf50;
color: #81c784 !important;
padding: 10px 15px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
margin: 12px 0;
text-align: center;
letter-spacing: 0.5px;
}
/* Related Products / Upsells Grid */
.woocommerce div.related.products,
.woocommerce div.upsells.products {
margin-top: 40px;
}
.woocommerce div.related.products h2,
.woocommerce div.upsells.products h2 {
color: var(--text) !important;
font-size: 20px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin-bottom: 20px;
font-weight: 400 !important;
}
/* Mobile: Hide sticky ATC on desktop */
@media (min-width: 769px) {
.erosyn-sticky-atc {
display: none !important;
}
}
@media (max-width: 768px) {
.erosyn-sticky-atc.visible {
display: flex;
}
/* Add padding to product form to account for sticky ATC */
.woocommerce div.product form.cart {
padding-bottom: 70px;
}
.erosyn-shipping-bar {
margin-top: 15px;
}
}
/* ROUND 1: BAC Water Cross-Sell Box */
.erosyn-bac-crosssell {
margin-top: 24px;
padding: 16px;
border: 1px solid #c9a84c;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
background-color: #111111;
}
.erosyn-bac-header {
margin-bottom: 8px;
}
.erosyn-bac-heading {
color: #C5A94E;
font-size: 14px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: 0.5px;
}
.erosyn-bac-text {
color: #b0b0b0;
font-size: 13px;
line-height: 1.4;
margin: 0 0 12px 0;
}
.erosyn-bac-product {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.erosyn-bac-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.erosyn-bac-name {
color: #ffffff;
font-size: 14px;
font-weight: 500;
}
.erosyn-bac-price {
color: #C5A94E;
font-size: 13px;
font-weight: 600;
}
.erosyn-bac-btn {
background-color: #C5A94E !important;
color: #000000 !important;
border: 1px solid #C5A94E !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
white-space: nowrap;
border-radius: 4px !important;
}
.erosyn-bac-btn:hover {
background-color: #d4b86a !important;
border-color: #d4b86a !important;
cursor: pointer;
}
/* Mobile: stack vertically */
@media (max-width: 600px) {
.erosyn-bac-product {
flex-direction: column;
align-items: stretch;
}
.erosyn-bac-btn {
width: 100% !important;
text-align: center;
}
}
}
.woocommerce table.shop_table {
font-size: 12px;
}
.woocommerce table.shop_table td {
padding: 8px 6px !important;
}
}
/* Remove product description from cart items */
.woocommerce-cart .woocommerce-cart-form__cart-item .product-description {
display: none !important;
}
.woocommerce-cart .woocommerce-cart-form__cart-item .product-excerpt {
display: none !important;
}
}
}
/* Fix section headings and form elements */
.wc-block-components-checkout-step__heading,
.wc-block-components-title,
.wc-block-cart__heading,
.wc-block-components-form-step,
.wc-block-checkout__form-step,
.wc-block-components-panel,
.wc-block-components-form-step__heading {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Form fields - ensure they have padding */
.wc-block-components-text-input,
.wc-block-components-quantity-selector,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
padding-left: 12px !important;
box-sizing: border-box !important;
}
/* Checkboxes - prevent clipping */
input[type="checkbox"],
.wc-block-components-checkbox {
margin-left: 0 !important;
padding-left: 4px !important;
}
/* Cart/Checkout table and items */
.wc-block-cart-items,
.wc-block-cart__form-coupon,
.wc-block-cart-item {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Product descriptions in cart - hide */
.wc-block-cart-item__description,
.wc-block-cart-item .short-description,
.woocommerce-cart .woocommerce-cart-form__cart-item .description,
.woocommerce-cart .woocommerce-cart-form__cart-item .product-short-description {
display: none !important;
}
}
/* AGGRESSIVE MOBILE FIX: Remove all overflow/padding restrictions on WooCommerce pages */
@media (max-width: 768px) {
/* Override Astra theme's restrictive mobile styles */
body.woocommerce-cart,
body.woocommerce-checkout {
overflow-x: visible !important;
}
/* Main content wrapper - CRITICAL */
.entry-content {
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Site main */
.site-main {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow-x: visible !important;
}
/* Site content */
#content.site-content {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow-x: visible !important;
}
/* WooCommerce block containers - all of them */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-main,
.wc-block-components-sidebar-layout {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
overflow-x: visible !important;
}
/* Form steps and sections */
.wc-block-checkout__form,
.wc-block-checkout__form-step,
.wc-block-components-form-step,
.wc-block-components-checkout-step {
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
/* Headings - prevent clipping */
.wc-block-checkout__form-step-heading,
.wc-block-components-checkout-step__heading,
.wc-block-components-title,
.wc-block-cart__heading,
h2,
h3 {
padding-left: 0 !important;
margin-left: 0 !important;
text-indent: 0 !important;
}
/* Form inputs */
.wc-block-components-text-input,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
padding-left: 12px !important;
margin-left: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Checkboxes */
input[type="checkbox"],
.wc-block-components-checkbox {
margin-left: 0 !important;
margin-right: 8px !important;
}
/* Labels - prevent wrapping issues */
label,
.wc-block-components-label {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Hide product descriptions from cart/checkout */
.wc-block-cart-item__description,
.cart-item-description,
.woocommerce-cart-form__cart-item .description,
.woocommerce-cart-form__cart-item .product-short-description {
display: none !important;
}
/* Order summary - ensure full visibility */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__order-summary,
.wc-block-checkout-order-summary {
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
}
/* =========================================================
Site-wide new header (Erosyn 2026 redesign)
Was originally inline in tpl-newhome.php; promoted here so
every page renders the same header markup from header.php.
All selectors prefixed .nh- so they don't collide with the
legacy .erosyn-header rules that still exist above (those
are dead code as of 2026-05-27 and can be removed in a
follow-up cleanup).
========================================================= */
/* Admin bar offset — sticky header would otherwise hide behind WP's bar. */
.admin-bar .nh-header { top: 32px; }
@media (max-width: 782px) {
.admin-bar .nh-header { top: 46px; }
}
/* Prevent horizontal page-overflow on mobile.
The best-sellers carousel intentionally extends past the viewport but is
clipped by its own overflow-x:auto. We clip at html/body AND on each
major nh- section so nothing inside any section can push the document
wider than the viewport.
IMPORTANT: use overflow-x: CLIP, not HIDDEN, on html/body. iOS Safari
has a long-standing bug where overflow-x:hidden on root elements turns
the body into a scroll container, which (a) breaks position:sticky on
.nh-header and (b) creates a "scroll trap" where vertical scroll
momentum gets reset / bounces back when you try to scroll past the hero.
overflow:clip clips visually identically but does NOT establish a new
scroll container, so sticky + scroll momentum both keep working. */
html, body {
overflow-x: clip;
max-width: 100%;
}
.nh-best, .nh-section, .nh-hero, .nh-sci, .nh-about { overflow-x: clip; }
/* =========================================================
WooCommerce cart / checkout — mobile edge alignment fix.
WP's `.alignwide` class adds a -20px left/right margin to break out
of the content padding. That's fine when the entry-content has 20px
padding to absorb it. On the cart/checkout pages our entry-content
sits flush against the viewport, so .alignwide ends up bleeding 20px
off the left edge — clipping the product image, "Add coupons",
"Enter code", "Free Shipping", "Estimated total" labels, etc.
There IS already a rule for this earlier in the file (around line
2544), but a broken brace pair upstream (orphan `}` at ~2433/2453)
breaks the CSS parser so the @media block never gets applied. Fixing
the broken brace pair is risky (unclear what else depends on it),
so we just re-add the same rule here at file-end where parsing is
clean. The selector matches what the actual rendered DOM has.
========================================================= */
@media (max-width: 980px) {
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-checkout.alignfull {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* The product-thumbnail cell sits at the left edge of each cart
row. Give it a touch of breathing room so the image isn't
jammed against the section padding. */
.wc-block-cart-item__image,
.wc-block-cart-items__row .wc-block-components-product-image {
padding-left: 0 !important;
}
}
/* =========================================================
WooCommerce checkout — floating-label fix (dark theme).
The block-editor checkout uses Material-style floating labels.
When a field has a value the label slides up and sits at the
top of the field's border. Without a matching background the
label appears to cut through the gold border (looks broken on
a dark theme).
Fix: give the floating (active) state of every WC block label
the page background colour, small horizontal padding, and a
shrunken font so it looks like a tidy "notch" in the border.
========================================================= */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-form-row label,
.wc-block-components-checkout-step label,
.wc-block-components-state-input label,
.wc-block-components-country-input label,
.wc-block-components-address-form label {
background: transparent;
transition: top .18s, font-size .18s, color .18s;
}
/* "Active" state — when input is focused or has content. WC blocks
adds .is-active to the wrapper OR moves the label into a specific
class. Cover both APIs. */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-block-components-text-input input:not(:placeholder-shown) + label,
.wc-block-components-combobox.is-active label,
.wc-block-components-combobox .wc-block-components-combobox-control.is-active label,
.wc-block-components-text-input:has(input:not(:placeholder-shown)) label,
.wc-block-components-combobox:has(input:not(:placeholder-shown)) label,
/* Select fields (Country, State dropdowns) — always show as "filled" */
.wc-block-components-form .wc-block-components-form-row select + label,
.wc-block-components-form .wc-block-components-form-row label[for*="country"],
.wc-block-components-form .wc-block-components-form-row label[for*="state"] {
background: #1a1a1a !important; /* match page bg to mask border */
padding: 0 6px !important;
font-size: 11px !important;
letter-spacing: .04em !important;
top: -8px !important;
line-height: 1 !important;
color: #C5A94E !important;
transform: none !important;
}
/* =========================================================
New Home — scoped layout
Uses site fonts (Inter + Roboto Slab, already enqueued by
Astra/child theme) and the existing dark + gold palette.
All selectors are .nh-* scoped so nothing leaks to other
pages.
========================================================= */
.nh-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.nh-mono {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
}
/* ---- ticker / announcement ---- */
.nh-ticker {
background: #000;
color: #999;
border-bottom: 1px solid #222;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
}
.nh-ticker-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto;
padding: 9px 32px;
gap: 32px;
}
.nh-ticker-msg b { color: #C5A94E; font-weight: 500; }
.nh-ticker-links { display: flex; gap: 24px; }
.nh-ticker-links a {
color: #999 !important;
text-decoration: none !important;
transition: color .2s;
}
.nh-ticker-links a:hover { color: #C5A94E !important; }
/* ---- header ---- */
.nh-header {
position: sticky;
top: 0;
z-index: 90;
background: rgba(17,17,17,.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid #222;
}
.nh-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 78px;
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
gap: 32px;
}
.nh-brand { display: flex; align-items: center; }
.nh-brand img { max-height: 60px; width: auto; display: block; }
.nh-header-right { display: flex; align-items: center; gap: 12px; }
.nh-nav {
display: flex;
gap: 36px;
font-size: 13px;
font-weight: 400;
letter-spacing: .04em;
text-transform: uppercase;
}
.nh-nav a {
color: #fff !important;
text-decoration: none !important;
padding: 4px 0;
position: relative;
transition: color .2s;
}
.nh-nav a::after {
content: "";
position: absolute;
left: 0; bottom: -3px;
width: 0; height: 1.5px;
background: #C5A94E;
transition: width .25s;
}
.nh-nav a:hover { color: #C5A94E !important; }
.nh-nav a:hover::after { width: 100%; }
.nh-cart {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: .14em;
border: 1px solid #C5A94E;
color: #C5A94E !important;
padding: 10px 18px;
border-radius: 2px;
text-decoration: none !important;
transition: .25s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 9px;
line-height: 1;
}
.nh-cart svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
.nh-cart:hover { background: #C5A94E; color: #111 !important; }
/* ---- hamburger + mobile panel ---- */
.nh-hamburger {
display: none;
background: none;
border: 1px solid #333;
border-radius: 2px;
color: #C5A94E;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: .2s;
}
.nh-hamburger:hover { border-color: #C5A94E; }
.nh-hamburger svg { width: 20px; height: 20px; stroke: currentColor; }
.nh-hamburger .nh-burger-close { display: none; }
.nh-hamburger.is-open .nh-burger-open { display: none; }
.nh-hamburger.is-open .nh-burger-close { display: block; }
.nh-mobile-panel {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
background: #111;
border-bottom: 1px solid #222;
box-shadow: 0 24px 40px -20px rgba(0,0,0,.7);
}
.nh-mobile-panel.is-open { display: block; }
.nh-mobile-nav {
display: flex;
flex-direction: column;
padding: 8px 0;
}
.nh-mobile-nav a {
display: block;
padding: 18px 24px;
color: #fff !important;
font-size: 15px;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none !important;
border-bottom: 1px solid #1f1f1f;
transition: .2s;
}
.nh-mobile-nav a:last-child { border-bottom: none; }
.nh-mobile-nav a:hover,
.nh-mobile-nav a:focus { background: #181818; color: #C5A94E !important; padding-left: 30px; }
.nh-mobile-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 18px 24px 24px;
border-top: 1px solid #1f1f1f;
}
.nh-mobile-actions a {
text-align: center;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none !important;
padding: 14px 12px;
border-radius: 2px;
transition: .2s;
}
.nh-mobile-actions .nh-mob-btn-solid {
background: #C5A94E;
color: #111 !important;
border: 1px solid #C5A94E;
}
.nh-mobile-actions .nh-mob-btn-solid:hover { background: #d4b86a; }
.nh-mobile-actions .nh-mob-btn-ghost {
background: transparent;
color: #C5A94E !important;
border: 1px solid #C5A94E;
}
.nh-mobile-actions .nh-mob-btn-ghost:hover { background: #C5A94E; color: #111 !important; }
/* ---- hero ---- */
.nh-hero {
position: relative;
padding: 110px 0 96px;
overflow: hidden;
background:
radial-gradient(1200px 700px at 75% -10%, rgba(197,169,78,.10), transparent 55%),
radial-gradient(900px 500px at 0% 110%, rgba(197,169,78,.04), transparent 60%),
#0f0f0f;
border-bottom: 1px solid #222;
}
.nh-hero-grid {
display: grid;
grid-template-columns: 1.55fr .7fr;
gap: 70px;
align-items: end;
}
.nh-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: #C5A94E;
margin-bottom: 28px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
}
.nh-eyebrow::before {
content: "";
width: 34px; height: 1px;
background: #C5A94E;
}
.nh-hero h1 {
font-family: "Roboto Slab", Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(40px, 4.6vw, 68px) !important;
line-height: 1.02 !important;
letter-spacing: -.02em !important;
color: #fff !important;
margin: 0 !important;
}
.nh-hero h1 em {
font-style: italic;
color: #C5A94E !important;
font-weight: 300;
}
.nh-hero .nh-lede {
margin: 30px 0 38px;
font-size: 17px;
max-width: 46ch;
color: #b8b8b8;
line-height: 1.6;
}
.nh-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.nh-btn {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
padding: 16px 30px;
border-radius: 2px;
border: 1px solid #C5A94E;
transition: .25s;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none !important;
cursor: pointer;
}
.nh-btn-solid {
background: #C5A94E;
color: #111 !important;
border-color: #C5A94E;
}
.nh-btn-solid:hover { background: #d4b86a; border-color: #d4b86a; color: #111 !important; }
.nh-btn-ghost { color: #C5A94E !important; background: transparent; }
.nh-btn-ghost:hover { background: #C5A94E; color: #111 !important; }
.nh-spec {
border-left: 1px solid #333;
padding-left: 32px;
}
.nh-spec-row {
padding: 18px 0;
border-bottom: 1px solid #2a2a2a;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
}
.nh-spec-row:first-child { padding-top: 0; }
.nh-spec-row:last-child { border-bottom: none; }
.nh-spec-k {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: #888;
}
.nh-spec-v {
font-family: "Roboto Slab", Georgia, serif;
font-weight: 400;
font-size: 30px;
color: #fff;
line-height: 1;
}
.nh-spec-v small {
font-size: 12px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: #C5A94E;
letter-spacing: .05em;
margin-left: 4px;
font-weight: 400;
}
.nh-seqstrip {
position: absolute;
right: 0; top: 24px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
color: rgba(197,169,78,.08);
letter-spacing: .35em;
transform: rotate(90deg);
transform-origin: right top;
white-space: nowrap;
pointer-events: none;
}
/* ---- shared section ---- */
.nh-section { padding: 96px 0; }
.nh-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 56px;
gap: 30px;
flex-wrap: wrap;
}
/* Single H2 rule — applies to every section heading on the page. Every h2
now lives inside a .nh-section-head wrapper, so margin is handled by the
wrapper's own margin-bottom (no per-section margin overrides needed). */
.nh-section-head h2 {
font-family: "Roboto Slab", Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(38px, 4.4vw, 58px) !important;
letter-spacing: -.015em !important;
line-height: 1.05 !important;
color: #fff !important;
margin: 0 !important;
}
.nh-section-head h2 em {
font-style: italic;
color: #C5A94E !important;
font-weight: 300;
}
.nh-section-head p {
color: #999;
max-width: 42ch;
font-size: 14.5px;
line-height: 1.6;
margin: 0;
}
.nh-section-num {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: .22em;
color: #C5A94E;
display: block;
margin-bottom: 14px;
text-transform: uppercase;
}
/* ---- best sellers ---- */
.nh-best { background: #1c1c1c; border-bottom: 1px solid #222; }
.nh-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.nh-card {
background: #1f1f1f;
border: 1px solid #2c2c2c;
border-radius: 3px;
overflow: hidden;
transition: .3s;
display: flex;
flex-direction: column;
text-decoration: none !important;
}
.nh-card:hover {
transform: translateY(-5px);
border-color: #C5A94E;
box-shadow: 0 20px 40px -22px rgba(0,0,0,.7);
}
.nh-card-img {
aspect-ratio: 1;
background: radial-gradient(circle at 50% 38%, #2c2c2c, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #2c2c2c;
position: relative;
overflow: hidden;
}
.nh-card-img img {
width: 78%;
height: 78%;
object-fit: contain;
display: block;
}
.nh-card-body {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.nh-card h4 {
font-family: "Roboto Slab", Georgia, serif !important;
font-size: 19px !important;
font-weight: 400 !important;
color: #fff !important;
letter-spacing: 0 !important;
margin: 0 !important;
line-height: 1.2;
}
.nh-card-seq {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10.5px;
color: #888;
letter-spacing: .04em;
line-height: 1.4;
}
.nh-card-foot {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #2c2c2c;
}
.nh-card-price {
font-family: "Roboto Slab", Georgia, serif;
font-size: 20px;
color: #C5A94E;
font-weight: 400;
}
.nh-card-add {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10px;
letter-spacing: .16em;
border: 1px solid #C5A94E;
color: #C5A94E !important;
padding: 8px 13px;
border-radius: 2px;
transition: .2s;
text-decoration: none !important;
}
.nh-card-add:hover { background: #C5A94E; color: #111 !important; }
.nh-best-foot {
display: flex;
justify-content: center;
margin-top: 48px;
}
/* ---- about ---- */
.nh-about {
background: #1a1a1a;
border-top: 1px solid #222;
position: relative;
}
.nh-about-inner {
display: grid;
grid-template-columns: 1fr .9fr;
gap: 80px;
align-items: start;
}
.nh-about-lede {
color: #b8b8b8;
font-size: 16px;
line-height: 1.7;
margin: 26px 0 32px;
max-width: 52ch;
}
.nh-pills { display: flex; flex-direction: column; gap: 14px; }
.nh-pill {
border: 1px solid #2c2c2c;
background: #161616;
padding: 22px 26px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 22px;
transition: .25s;
}
.nh-pill:hover { border-color: #C5A94E; background: #1a1a1a; }
.nh-pill-k {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: #C5A94E;
flex-shrink: 0;
width: 38px;
}
.nh-pill-v {
font-family: "Roboto Slab", Georgia, serif;
font-size: 17px;
font-weight: 400;
color: #fff;
line-height: 1.3;
}
.nh-pill-v small {
display: block;
font-family: "Inter", sans-serif;
font-size: 12.5px;
color: #999;
margin-top: 4px;
letter-spacing: 0;
font-weight: 400;
}
/* ---- science band ---- */
.nh-sci {
background: linear-gradient(160deg, #0d0d0d, #161616);
color: #fff;
position: relative;
overflow: hidden;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
.nh-sci-bg {
position: absolute;
inset: 0;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
line-height: 2.4;
color: rgba(197,169,78,.04);
word-break: break-all;
padding: 24px;
pointer-events: none;
letter-spacing: .2em;
user-select: none;
}
.nh-sci-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.nh-sci p {
color: #aaa;
font-size: 16px;
margin: 0 0 32px;
max-width: 48ch;
line-height: 1.6;
}
.nh-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: #2a2a2a;
border: 1px solid #2a2a2a;
}
.nh-metrics > div {
background: #111;
padding: 32px 28px;
}
.nh-metric-big {
font-family: "Roboto Slab", Georgia, serif;
font-size: 46px;
font-weight: 300;
color: #C5A94E;
line-height: 1;
letter-spacing: -.02em;
}
.nh-metric-lbl {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: #888;
margin-top: 10px;
}
/* ---- responsive ---- */
@media (max-width: 1100px) {
.nh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
/* Best sellers becomes a horizontal swipe carousel */
.nh-best .nh-wrap { padding-right: 0; }
.nh-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 14px;
padding: 4px 28px 18px 0;
scrollbar-width: none;
}
.nh-grid::-webkit-scrollbar { display: none; }
.nh-card {
flex: 0 0 72%;
scroll-snap-align: start;
}
.nh-best-foot { padding-right: 20px; }
}
@media (max-width: 980px) {
.nh-hero-grid, .nh-sci-inner, .nh-about-inner { grid-template-columns: 1fr; gap: 50px; }
.nh-seqstrip { display: none; }
.nh-nav { display: none; }
.nh-hamburger { display: inline-flex; }
.nh-header-inner { gap: 14px; }
.nh-cart { padding: 9px 12px; gap: 6px; }
.nh-cart-label { display: none; }
.nh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.nh-wrap,
.nh-ticker-inner,
.nh-header-inner { padding-left: 20px; padding-right: 20px; }
.nh-ticker-links { display: none; }
.nh-ticker-inner { justify-content: center; }
.nh-section { padding: 64px 0; }
.nh-hero { padding: 64px 0; }
.nh-grid { grid-template-columns: 1fr; }
.nh-metrics { grid-template-columns: 1fr; }
.nh-spec { border-left: none; padding-left: 0; border-top: 1px solid #2a2a2a; padding-top: 24px; }
}
/* ============================================================
FIX: keep the WordPress admin toolbar on WP's default colors.
The global `a { color: var(--gold) !important }` rule (top of this
file) otherwise bleeds the brand gold into the admin bar for
logged-in users (cosmetic, admin-only). These scoped, higher-
specificity !important rules restore WP's standard toolbar colors.
============================================================ */
#wpadminbar a,
#wpadminbar a.ab-item,
#wpadminbar .ab-item,
#wpadminbar > #wp-toolbar span.ab-label { color: #f0f0f1 !important; }
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop.hover ul li a { color: #c3c4c7 !important; }
/* ============================================================
HEADER SEARCH — toggle button (left of cart) + dropdown panel
============================================================ */
.nh-search-toggle {
background: none;
border: 1px solid var(--gold);
border-radius: 2px;
color: var(--gold);
height: 36px;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: .2s;
}
.nh-search-toggle:hover,
.nh-search-toggle[aria-expanded="true"] {
background: var(--gold);
color: #000;
}
.nh-search-toggle svg { width: 16px; height: 16px; stroke: currentColor; }
.nh-search-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #111;
border-bottom: 1px solid #222;
box-shadow: 0 24px 40px -20px rgba(0,0,0,.7);
padding: 22px 32px;
z-index: 95;
}
.nh-search-panel.is-open { display: block; }
.nh-search-form {
display: flex;
max-width: 720px;
margin: 0 auto;
}
.nh-search-input {
flex: 1;
background: #1a1a1a;
border: 1px solid #333;
border-right: none;
color: #fff !important;
padding: 13px 16px;
font-size: 15px;
border-radius: 2px 0 0 2px;
outline: none;
}
.nh-search-input::placeholder { color: #888; }
.nh-search-input:focus { border-color: var(--gold); }
.nh-search-submit {
background: var(--gold);
border: 1px solid var(--gold);
color: #000 !important;
padding: 0 20px;
border-radius: 0 2px 2px 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: .2s;
}
.nh-search-submit:hover { background: var(--gold-bg); border-color: var(--gold-bg); }
.nh-search-submit svg { width: 18px; height: 18px; stroke: currentColor; }
@media (max-width: 600px) { .nh-search-panel { padding: 16px 20px; } }
/* ============================================================
SUBPAGE HERO BAND — site-wide slim hero (matches home design)
Applies to all standard pages + WooCommerce cart/checkout/account
+ shop archive. EXCLUDES home (own hero) and single product pages.
Replaces the awkward full-left page title with a thin full-bleed
dark band, a thin gold top bar, and a centered title.
============================================================ */
body:not(.home):not(.single-product) header.entry-header,
.woocommerce-products-header {
display: block !important;
position: relative;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
max-width: 100vw;
padding: 32px 0 28px;
margin-bottom: 4px;
text-align: center;
background:
radial-gradient(1000px 500px at 75% -20%, rgba(197,169,78,.10), transparent 55%),
radial-gradient(700px 400px at 0% 120%, rgba(197,169,78,.04), transparent 60%),
#0f0f0f;
border-bottom: 1px solid #222;
}
/* thin golden bar across the top of the hero band */
body:not(.home):not(.single-product) header.entry-header::before,
.woocommerce-products-header::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, #C5A94E, #d4b86a);
}
body:not(.home):not(.single-product) .entry-title,
.woocommerce-products-header__title {
display: block !important;
max-width: 1200px;
margin: 0 auto !important;
padding: 0 24px;
font-family: "Roboto Slab", Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 2.8vw, 38px) !important;
line-height: 1.08 !important;
letter-spacing: -.02em !important;
color: #fff !important;
text-transform: none !important;
}
/* Reveal headers that were force-hidden, so they get the hero (e.g. Contact) */
.page-id-56 header.entry-header,
.page-id-56 .entry-title { display: block !important; }
/* Pull the hero band flush under the sticky header — Astra's plain-container
gives #primary a top margin that otherwise floats the band below the nav. */
body:not(.home):not(.single-product) #primary,
body:not(.home):not(.single-product) #main.site-main,
body:not(.home):not(.single-product) article.ast-article-single {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 600px) {
body:not(.home):not(.single-product) header.entry-header,
.woocommerce-products-header { padding: 24px 0 22px; }
}
/* AffiliateWP form section heading: their default legend color is dark
navy (#1e293b) which is illegible on our dark background. Make it light.
Covers both the affiliate registration and login forms. */
.affwp-form legend,
.affwp-form fieldset > legend {
color: #fff !important;
font-weight: 500;
letter-spacing: .3px;
margin-bottom: 8px;
}
/* ============================================================
SUBTLE ENTRANCE ANIMATIONS (2026-06-10)
1. Lazy-loaded images fade in instead of popping in
2. Search + mobile menu panels ease in instead of snapping
============================================================ */
img[data-lazyloaded] { opacity: 0; }
img[data-lazyloaded].litespeed-loaded { opacity: 1; transition: opacity 0.35s ease; }
@keyframes nhPanelIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.nh-mobile-panel.is-open,
.nh-search-panel.is-open { animation: nhPanelIn 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
img[data-lazyloaded] { opacity: 1; transition: none; }
.nh-mobile-panel.is-open,
.nh-search-panel.is-open { animation: none; }
}
/* Hide breadcrumbs on the shop catalog page (2026-06-10) */
body.post-type-archive-product .woocommerce-breadcrumb { display: none; }
/* ============================================================
Checkout — Shipping options polish (added 2026-06-16)
1) Selected option = GOLD highlight (was a dark/black ring)
2) Make "Local Pickup" obviously stand out
============================================================ */
/* Gold radio dot — the input is appearance:none, so the dot is drawn by
:checked::before (a 10px circle WC defaults to BLACK). Recolor it gold. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
accent-color: var(--gold) !important;
}
.wc-block-components-shipping-rates-control input.wc-block-components-radio-control__input:checked::before {
background: var(--gold) !important;
}
.wc-block-components-shipping-rates-control input.wc-block-components-radio-control__input:checked {
border-color: var(--gold) !important;
}
/* Hover affordance on unselected shipping options */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover {
border-color: rgba(197,169,78,.55) !important;
}
/* --- Local Pickup: persistent gold-tinted callout so it's easy to spot --- */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option[for*="local_pickup"] {
background: rgba(197,169,78,.06) !important;
border-color: rgba(197,169,78,.40) !important;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option[for*="local_pickup"] .wc-block-components-radio-control__label::before {
content: "\1F4CD "; /* 📍 pin */
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option[for*="local_pickup"] .wc-block-components-radio-control__label::after {
content: "Pick up in-store \2014 skip the shipping fee";
display: block;
font-size: 12px;
font-weight: 400;
color: var(--gold) !important;
margin-top: 3px;
letter-spacing: .2px;
text-transform: none;
}
/* --- SELECTED shipping option = gold "button" (overrides Local Pickup tint
via [for] specificity bump; placed LAST so it wins) --- */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked[for],
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--checked-option-highlighted[for] {
/* contained inset ring = clean continuous gold edge (won't bleed onto the
neighbour divider lines); plus a SMALL soft halo (reduced) */
box-shadow: inset 0 0 0 1px rgba(197,169,78,.5),
0 0 8px 0 rgba(197,169,78,.11) !important;
background: rgba(197,169,78,.05) !important;
border-radius: 4px !important;
}
/* hide the 1px grey divider on the selected row so it doesn't show a
half-washed/broken line under the gold ring */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked[for]::after {
display: none !important;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked[for] .wc-block-components-radio-control__label {
color: var(--gold) !important;
font-weight: 600 !important;
}
/* ============================================================
FIX (2026-06-21): WooCommerce notice text was WHITE-ON-WHITE.
The global rule p, li, td, th, label, span, div { color: var(--text) }
forced the notice
white, but WooCommerce notices sit on a
LIGHT (#f7f6f7) background — so error / success / info message
text was invisible (only the gold "Lost your password?" link showed).
Reported on the My Account login error. Restore WC's default dark
notice text so all storefront notices are legible.
============================================================ */
.woocommerce-error,
.woocommerce-error li,
.woocommerce-message,
.woocommerce-message li,
.woocommerce-info,
.woocommerce-info li {
color: #515151 !important;
}
/* ============================================================
CHECKOUT FIXES (2026-06-22) — block checkout (Store API)
1) Saved SHIPPING/BILLING ADDRESS was invisible: WooCommerce's
address-card "secondary" line (street/city/state/zip) defaults
to rgba(18,18,18,.7) = near-black on this dark theme, so only
the name (white "primary") showed. Force the whole card light.
2) ERROR / SUCCESS NOTICES were WHITE-ON-WHITE: the block notice
banner sits on a LIGHT bg (#fff0f0 error / #f4fff7 success) but
the global p,li,td,th,label,span,div{color:var(--text)} rule
forced its __content WHITE -> invisible message text.
Restore dark, readable notice text (mirrors the 2026-06-21 fix
that covered only the CLASSIC .woocommerce-error notices).
3) On error the page scrolled the banner UNDER the 79px sticky
header, so customers saw only half of it. scroll-margin-top
clears the sticky header on WC's scrollIntoView.
============================================================ */
/* (1) Saved address card — make every line visible on the dark bg */
.wc-block-components-address-card address,
.wc-block-components-address-card__address-section,
.wc-block-components-address-card__address-section--primary {
color: var(--text) !important; /* #fff */
}
.wc-block-components-address-card__address-section--secondary {
color: #c9c9c9 !important; /* muted but clearly legible */
}
/* (2) Block checkout notice banners (error/success/warning/info):
keep WC's light banner bg + coloured left border, but force the
message text DARK so it is never white-on-white. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner p,
.wc-block-components-notice-banner li,
.wc-block-components-notice-banner span,
.wc-block-components-notice-banner a,
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner__content * {
color: #2f2f2f !important;
}
.wc-block-components-notice-banner a {
text-decoration: underline !important; /* keep links obvious on light bg */
}
/* Field-level validation errors: bright, readable red on the dark theme */
.wc-block-components-validation-error,
.wc-block-components-validation-error p,
.wc-block-components-validation-error span {
color: #ff6b6b !important;
}
/* (3) Clear the 79px sticky header when WC scrolls an error into view */
.wc-block-components-notice-banner,
.wc-block-checkout__main .wc-block-components-notices,
.wc-block-components-form .wc-block-components-notices,
.woocommerce-checkout .wc-block-components-notices {
scroll-margin-top: 100px;
}
/* ============================================================
Show/Hide password eye toggle — dark-theme contrast fix
(2026-06-23). WooCommerce renders .show-password-input with
the WooCommerce icon font at its default color:#000, which is
invisible on this dark login/register form. Force it to brand
gold (lighter on hover, white once the password is revealed).
============================================================ */
.password-input .show-password-input,
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.password-input .show-password-input::after,
.woocommerce form .show-password-input::after {
color: var(--gold) !important;
}
.password-input .show-password-input:hover,
.woocommerce form .show-password-input:hover,
.password-input .show-password-input:hover::after {
color: #e3cd7e !important;
}
.password-input .show-password-input.display-password,
.woocommerce form .show-password-input.display-password,
.password-input .show-password-input.display-password::after {
color: #ffffff !important;
}
/* ============================================================
QC sweep 2026-06-23 — WooCommerce dark-theme contrast batch.
Astra + WooCommerce leave several account/cart/checkout
elements at their default light (#fbfbfb) or navy (#1e293b)
colours, which vanish on this dark theme. Scoped fixes: */
/* (A) CART — "Proceed to Checkout" was WooCommerce default blue.
Match the gold primary buttons used everywhere else. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
background-color: var(--gold) !important;
border-color: var(--gold) !important;
color: #000 !important;
}
.wc-block-cart__submit-button .wc-block-components-button__text { color: #000 !important; }
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
background-color: #d4b86a !important;
border-color: #d4b86a !important;
}
/* (B) CHECKOUT — order-summary quantity badge was a white "1" on a
white circle (global span{color:var(--text)} forced it white). */
.wc-block-components-order-summary-item__quantity {
color: #1a1a1a !important;
}
/* (C) ACCOUNT — fieldset legends (e.g. "Password change") default to
dark navy (#1e293b) and disappear on the dark background. */
.woocommerce legend,
.woocommerce-MyAccount-content legend,
.woocommerce-EditAccountForm legend {
color: var(--text) !important;
}
/* (D) ACCOUNT — Addresses: title bands had a near-white bg with white
headings (invisible). Drop the band; keep white headings + gold edit. */
.woocommerce-Address-title.title,
.woocommerce-MyAccount-content .woocommerce-Address-title {
background: transparent !important;
}
.woocommerce-Address-title.title h2,
.woocommerce-Address-title.title h3 {
color: var(--text) !important;
}
/* (E) ACCOUNT — Orders/Downloads/order-details tables: header rows had
a near-white bg with white text (invisible column labels). */
.woocommerce-MyAccount-content table.shop_table thead,
.woocommerce-MyAccount-content table.shop_table thead th,
.woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-MyAccount-content table.shop_table thead th .nobr {
background: transparent !important;
color: var(--text) !important;
}
/* (F) ACCOUNT — navigation active item was gold text on a near-white
band. Use a faint gold tint over the dark theme instead. */
.woocommerce-MyAccount-navigation li.is-active a {
background: rgba(197, 169, 78, 0.10) !important;
color: var(--gold) !important;
}
/* Product tabs — close the #222 band between the tab row and the content
panel (2026-06-23). The tabs use a connected-card design (#222 card;
active tab + panel = --dark). ul.tabs had a 28px margin-bottom that
exposed the #222 card as a lighter empty strip under the tab labels.
Remove the gap so the active tab connects to the panel; the panel's
own 25px top padding keeps the content spaced. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
margin-bottom: 0 !important;
padding: 12px 0 0 30px !important;
}
/* Mobile: match the tab inset to the panel's 15px mobile padding (768px
breakpoint) so the labels stay aligned with the body text on phones. */
@media (max-width: 768px) {
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 10px 0 0 15px !important;
}
}
/* Active tab highlight had 0 padding top/left/right — the #1a1a1a active
background hugged the label (2026-06-23). Pad every tab's li so the
background box has even padding around the label; the box's left edge
stays aligned with the content margin (ul padding-left = 30px/15px).
High specificity needed to beat an inline .single-product rule. */
html body.single-product .woocommerce-tabs ul.tabs li {
padding: 8px 16px 12px !important;
}
@media (max-width: 768px) {
html body.single-product .woocommerce-tabs ul.tabs li {
padding: 7px 12px 10px !important;
}
}
/* Product grid cards (shop, related, up-sells) wrap the .nh-card inside a
li.product that ALSO had its own border + gold hover border/glow — that
li.product wrapper doubled the .nh-card border/hover (home cards have NO
li wrapper, so a single border). Neutralize the li so ONLY the .nh-card
shows its border + hover, matching the home view. (2026-06-23) */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product:hover {
border: 0 !important;
box-shadow: none !important;
}
/* =====================================================================
ACCESS GATEWAY (tpl-gateway.php) — members-only login / register gate
Scoped to body.erosyn-gateway. Radii match site (.nh-btn 2px / .nh-card 3px).
===================================================================== */
body.erosyn-gateway {
background: radial-gradient(1200px 600px at 20% -10%, rgba(197,169,78,0.10), transparent 60%),
radial-gradient(900px 500px at 100% 110%, rgba(197,169,78,0.06), transparent 55%),
#0f0f0f !important;
min-height: 100vh;
}
.erosyn-gateway .eg-shell {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 20px;
overflow: hidden;
}
/* card */
.erosyn-gateway .eg-card {
position: relative;
width: 100%;
max-width: 440px;
background: #191919;
border: 1px solid #2c2c2c;
border-radius: 3px;
padding: 44px 40px 34px;
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
text-align: center;
}
.erosyn-gateway .eg-brand { margin-bottom: 24px; }
.erosyn-gateway .eg-brand img,
.erosyn-gateway .eg-logo-img { max-height: 66px; width: auto; margin: 0 auto; display: inline-block; }
.erosyn-gateway .eg-logo-text { font-size: 22px; letter-spacing: 4px; color: var(--gold); font-weight: 500; }
.erosyn-gateway .eg-eyebrow {
display: block;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.erosyn-gateway .eg-title {
font-family: 'Inter', sans-serif !important;
font-weight: 300 !important;
font-size: 26px;
line-height: 1.25;
letter-spacing: 1px !important;
color: #fff !important;
margin: 0 0 12px;
}
.erosyn-gateway .eg-lede {
color: #a8a8a8;
font-size: 14.5px;
line-height: 1.65;
margin: 0 auto 26px;
max-width: 350px;
}
/* tabs */
.erosyn-gateway .eg-tabs {
display: flex;
gap: 4px;
background: #111;
border: 1px solid #2c2c2c;
border-radius: 2px;
padding: 4px;
margin-bottom: 24px;
}
.erosyn-gateway .eg-tab {
flex: 1;
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 11px 10px;
border-radius: 2px;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8a8a8a;
transition: background .18s ease, color .18s ease;
}
.erosyn-gateway .eg-tab:hover { color: #cfcfcf; }
.erosyn-gateway .eg-tab.is-active {
background: linear-gradient(180deg, var(--gold), var(--gold-bg));
color: #1a1a1a;
font-weight: 600;
}
/* panels */
.erosyn-gateway .eg-panel { display: none; }
.erosyn-gateway .eg-panel.is-active { display: block; animation: egFade .22s ease; }
@keyframes egFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* notices — self-contained dark-theme chips (WC's own CSS may not load here) */
.erosyn-gateway .eg-notices { margin-bottom: 18px; text-align: left; }
.erosyn-gateway .eg-notices ul { list-style: none; margin: 0; padding: 0; }
.erosyn-gateway .eg-notices .woocommerce-error,
.erosyn-gateway .eg-notices .woocommerce-message,
.erosyn-gateway .eg-notices .woocommerce-info {
list-style: none;
margin: 0 0 8px;
padding: 12px 14px !important;
border-radius: 2px;
font-size: 13.5px;
line-height: 1.5;
background-image: none !important;
}
.erosyn-gateway .eg-notices .woocommerce-error::before,
.erosyn-gateway .eg-notices .woocommerce-message::before,
.erosyn-gateway .eg-notices .woocommerce-info::before { content: none !important; display: none !important; }
.erosyn-gateway .eg-notices .woocommerce-error {
background: rgba(220,53,69,0.10) !important;
border: 1px solid rgba(220,53,69,0.45) !important;
}
.erosyn-gateway .eg-notices .woocommerce-error,
.erosyn-gateway .eg-notices .woocommerce-error li,
.erosyn-gateway .eg-notices .woocommerce-error strong { color: #ff9ea6 !important; }
.erosyn-gateway .eg-notices .woocommerce-message {
background: rgba(40,167,69,0.10) !important;
border: 1px solid rgba(40,167,69,0.45) !important;
}
.erosyn-gateway .eg-notices .woocommerce-message,
.erosyn-gateway .eg-notices .woocommerce-message li,
.erosyn-gateway .eg-notices .woocommerce-message strong { color: #8fe0a3 !important; }
.erosyn-gateway .eg-notices .woocommerce-info {
background: rgba(197,169,78,0.10) !important;
border: 1px solid rgba(197,169,78,0.40) !important;
}
.erosyn-gateway .eg-notices .woocommerce-info,
.erosyn-gateway .eg-notices .woocommerce-info li,
.erosyn-gateway .eg-notices .woocommerce-info strong { color: #e6d59a !important; }
.erosyn-gateway .eg-notices li { margin: 0 !important; padding: 0 !important; }
.erosyn-gateway .eg-notices a { color: inherit !important; text-decoration: underline; }
/* form */
.erosyn-gateway .eg-form { text-align: left; }
.erosyn-gateway .eg-field { display: block; margin-bottom: 16px; }
.erosyn-gateway .eg-name-row { display: flex; gap: 12px; }
.erosyn-gateway .eg-name-row .eg-field { flex: 1; }
.erosyn-gateway .eg-label {
display: block;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8f8f8f;
margin-bottom: 7px;
}
.erosyn-gateway .eg-form input[type="text"],
.erosyn-gateway .eg-form input[type="email"],
.erosyn-gateway .eg-form input[type="password"] {
width: 100%;
box-sizing: border-box;
background: #101010;
border: 1px solid #303030;
border-radius: 2px;
padding: 12px 14px;
color: #fff;
font-size: 15px;
font-family: 'Inter', sans-serif;
transition: border-color .16s ease, box-shadow .16s ease;
}
.erosyn-gateway .eg-form input::placeholder { color: #666; }
.erosyn-gateway .eg-form input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(197,169,78,0.14);
}
/* password show/hide */
.erosyn-gateway .eg-pass-wrap { position: relative; display: block; }
.erosyn-gateway .eg-pass-wrap input { padding-right: 46px; }
.erosyn-gateway .eg-pass-toggle {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.erosyn-gateway .eg-pass-toggle::before {
content: "";
width: 20px;
height: 20px;
background-color: var(--gold);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.erosyn-gateway .eg-pass-toggle.is-shown::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.erosyn-gateway .eg-pass-toggle:hover::before { background-color: #e3cd7e; }
.erosyn-gateway .eg-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 20px;
font-size: 13px;
}
.erosyn-gateway .eg-remember { display: flex; align-items: center; gap: 7px; color: #9a9a9a; cursor: pointer; }
.erosyn-gateway .eg-remember input { accent-color: var(--gold); }
.erosyn-gateway .eg-lost { font-size: 13px; }
/* button — 2px radius to match .nh-btn */
.erosyn-gateway .eg-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
background: linear-gradient(180deg, var(--gold), var(--gold-bg));
color: #171717 !important;
border: 0;
border-radius: 2px;
padding: 14px 18px;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.erosyn-gateway .eg-btn:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(197,169,78,0.22); transform: translateY(-1px); }
.erosyn-gateway .eg-btn:active { transform: none; }
.erosyn-gateway .eg-fineprint {
margin: 14px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: #6f6f6f;
text-align: center;
}
.erosyn-gateway .eg-support {
margin: 24px 0 0;
font-size: 12.5px;
color: #7f7f7f;
text-align: center;
}
@media (max-width: 480px) {
.erosyn-gateway .eg-card { padding: 34px 24px 28px; }
.erosyn-gateway .eg-title { font-size: 23px; }
.erosyn-gateway .eg-name-row { flex-direction: column; gap: 0; }
}