/*
* Theme Name: BargainsCave Child
* Theme URI: https://bargainscave.com
* Description: Neon Underground — bold dark deal discovery engine. Astra child theme.
* Author: BargainsCave
* Author URI: https://bargainscave.com
* Template: astra
* Version: 4.0.0
* Text Domain: bargainscave
* License: GNU General Public License v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* ==========================================================================
FONT IMPORTS — Moved to functions.php tag for better performance.
DO NOT use @import — it blocks rendering.
========================================================================== */
/* ==========================================================================
DESIGN TOKENS — Neon Underground
========================================================================== */
:root {
/* ── True Blacks (backgrounds) ── */
--bc-void: #050507;
--bc-surface: #0a0a0f;
--bc-surface-2: #111118;
--bc-surface-3: #18181f;
/* ── Neon Primary — Cyber Lime ── */
--bc-neon: #39FF14;
--bc-neon-dim: #2bcc10;
--bc-neon-glow: rgba(57, 255, 20, 0.15);
--bc-neon-flare: rgba(57, 255, 20, 0.4);
--bc-neon-subtle: rgba(57, 255, 20, 0.06);
/* ── Neon Secondary — Hot Pink ── */
--bc-pink: #FF2D78;
--bc-pink-dim: #cc2460;
--bc-pink-glow: rgba(255, 45, 120, 0.12);
--bc-pink-flare: rgba(255, 45, 120, 0.35);
/* ── Functional ── */
--bc-savings: #39FF14;
--bc-savings-bg: rgba(57, 255, 20, 0.08);
--bc-hot: #FF2D78;
--bc-hot-glow: rgba(255, 45, 120, 0.2);
--bc-info: #00B4FF;
--bc-warning: #FFB800;
/* ── Text ── */
--bc-text: #E8E8EC;
--bc-text-2: #8888A0;
--bc-text-dim: #55556A;
/* ── Borders ── */
--bc-border: rgba(255, 255, 255, 0.06);
--bc-border-hover: rgba(255, 255, 255, 0.12);
--bc-border-neon: rgba(57, 255, 20, 0.3);
/* ── Legacy Aliases (Content Egg / PHP compatibility) ── */
--bc-primary: var(--bc-neon);
--bc-primary-hover: var(--bc-neon-dim);
--bc-primary-light: var(--bc-neon-glow);
--bc-background: var(--bc-void);
--bc-card: var(--bc-surface);
--bc-subtext: var(--bc-text-2);
--bc-light-gray: var(--bc-surface-2);
--bc-cta: var(--bc-neon);
--bc-cta-hover: var(--bc-neon-dim);
/* ── Typefaces ── */
--bc-font-display: 'Clash Display', 'Arial Black', sans-serif;
--bc-font-body: 'Satoshi', system-ui, sans-serif;
/* ── Spacing ── */
--bc-space-xs: 4px;
--bc-space-sm: 8px;
--bc-space-md: 16px;
--bc-space-lg: 24px;
--bc-space-xl: 40px;
--bc-space-2xl: 64px;
/* ── Radii ── */
--bc-radius-sm: 6px;
--bc-radius: 10px;
--bc-radius-lg: 16px;
--bc-radius-xl: 24px;
--bc-radius-full: 9999px;
/* ── Shadows ── */
--bc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--bc-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
--bc-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
--bc-shadow-neon: 0 0 20px var(--bc-neon-flare);
/* ── Transitions (fast!) ── */
--bc-transition: 0.15s ease;
--bc-transition-slow: 0.25s ease;
/* ── Layout ── */
--bc-grid-gap: 20px;
--bc-container: 1400px;
}
/* ==========================================================================
GLOBAL RESET & BASE
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
body.bc-neon-underground {
background: var(--bc-void);
color: var(--bc-text);
font-family: var(--bc-font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.65;
margin: 0;
overflow-x: hidden;
}
/* ── Subtle grid pattern on body for depth ── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(57, 255, 20, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(57, 255, 20, 0.015) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--bc-font-display);
font-weight: 600;
color: #fff;
line-height: 1.15;
margin: 0 0 var(--bc-space-md) 0;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.4rem); }
h4 { font-size: 1.1rem; }
p {
color: var(--bc-text);
margin: 0 0 var(--bc-space-md) 0;
}
a {
color: var(--bc-neon);
text-decoration: none;
transition: color var(--bc-transition);
}
a:hover {
color: #fff;
}
strong, b {
font-weight: 700;
}
::selection {
background: var(--bc-neon);
color: #050507;
}
/* ==========================================================================
LINKS & BUTTONS — Global
========================================================================== */
.bc-btn,
.button,
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--bc-font-body);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 28px;
border: none;
border-radius: var(--bc-radius);
cursor: pointer;
transition: all var(--bc-transition);
text-decoration: none;
}
/* Primary CTA — Neon Green */
.bc-btn-primary,
.bc-cta-btn,
.woocommerce a.button,
.woocommerce button.button {
background: var(--bc-neon);
color: #050507;
font-weight: 800;
box-shadow: 0 2px 12px var(--bc-neon-glow);
}
.bc-btn-primary:hover,
.bc-cta-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
background: #4dff33;
color: #050507;
box-shadow: var(--bc-shadow-neon);
transform: translateY(-1px);
}
.bc-btn-primary:active,
.bc-cta-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
transform: translateY(0) scale(0.98);
}
/* Secondary CTA — Outline */
.bc-btn-secondary {
background: transparent;
color: var(--bc-neon);
border: 1px solid var(--bc-border-neon);
}
.bc-btn-secondary:hover {
background: var(--bc-neon-subtle);
border-color: var(--bc-neon);
}
/* Hot/Pink CTA */
.bc-btn-hot {
background: var(--bc-pink);
color: #fff;
box-shadow: 0 2px 12px var(--bc-pink-glow);
}
.bc-btn-hot:hover {
background: #ff4d8e;
box-shadow: 0 4px 24px var(--bc-pink-flare);
transform: translateY(-1px);
}
/* ==========================================================================
HEADER / NAVIGATION — Frosted Glass
========================================================================== */
.ast-primary-header-bar,
.site-header,
#ast-desktop-header .ast-primary-header-bar {
background: rgba(17, 17, 24, 0.85) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--bc-border-neon) !important;
box-shadow: 0 1px 30px rgba(57, 255, 20, 0.06);
}
/* Sticky state */
.ast-primary-sticky-header-active .ast-primary-header-bar,
.ast-header-sticked .ast-primary-header-bar {
background: rgba(10, 10, 15, 0.95) !important;
}
/* Site title / logo */
.site-title,
.site-title a,
.ast-site-identity .site-title a {
font-family: var(--bc-font-display);
font-weight: 700;
color: #fff !important;
font-size: 1.6rem;
letter-spacing: -0.02em;
}
/* Nav links */
.main-header-menu > .menu-item > a,
.ast-header-sections-navigation .menu-item > a,
.ast-nav-menu > .menu-item > a {
font-family: var(--bc-font-body);
font-weight: 500;
font-size: 14px;
color: var(--bc-text-2) !important;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 8px 16px !important;
transition: color var(--bc-transition);
}
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.ast-nav-menu > .menu-item > a:hover {
color: var(--bc-neon) !important;
}
/* Dropdown menus — must sit above search bar and all other elements */
.ast-header-sections-navigation .sub-menu,
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu,
.ast-builder-menu .sub-menu,
.ast-builder-menu-1 .sub-menu {
background: var(--bc-surface-2) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius) !important;
box-shadow: var(--bc-shadow-lg) !important;
padding: 8px 0 !important;
z-index: 99999 !important;
position: absolute !important;
}
.main-header-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu .menu-item > a {
color: var(--bc-text) !important;
font-size: 13px !important;
padding: 8px 20px !important;
}
.main-header-menu .sub-menu .menu-item > a:hover,
.ast-nav-menu .sub-menu .menu-item > a:hover {
color: var(--bc-neon) !important;
background: var(--bc-neon-subtle) !important;
}
/* Mobile menu */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-content {
background: var(--bc-surface) !important;
}
.ast-mobile-popup-drawer .menu-item > a {
color: var(--bc-text) !important;
border-color: var(--bc-border) !important;
}
.ast-mobile-popup-drawer .menu-item > a:hover {
color: var(--bc-neon) !important;
}
/* Mobile toggle */
.ast-mobile-menu-trigger-fill,
.ast-button-wrap .ast-mobile-menu-trigger-fill {
background: transparent !important;
color: var(--bc-text) !important;
}
/* ==========================================================================
ANNOUNCEMENT BAR
========================================================================== */
.bc-announcement-bar {
background: var(--bc-pink);
color: #fff;
text-align: center;
padding: 10px 50px 10px 20px;
font-family: var(--bc-font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
position: relative;
z-index: 1000;
}
.bc-announcement-bar__text {
display: inline-block;
}
.bc-announcement-bar__close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color var(--bc-transition);
}
.bc-announcement-bar__close:hover {
color: #fff;
}
/* ==========================================================================
CATEGORY NAVIGATION PILLS
========================================================================== */
.bc-category-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: var(--bc-space-lg) 0;
margin-bottom: var(--bc-space-lg);
}
.bc-category-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
background: var(--bc-surface-2);
color: var(--bc-text-2);
font-family: var(--bc-font-body);
font-size: 13px;
font-weight: 600;
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-full);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: all var(--bc-transition);
white-space: nowrap;
}
.bc-category-pill:hover {
background: var(--bc-neon-subtle);
color: var(--bc-neon);
border-color: var(--bc-border-neon);
}
.bc-category-pill--active,
.bc-category-pill.current {
background: var(--bc-neon);
color: #050507;
border-color: var(--bc-neon);
font-weight: 700;
}
.bc-category-pill--active:hover,
.bc-category-pill.current:hover {
background: #4dff33;
color: #050507;
}
.bc-category-pill__count {
font-size: 11px;
opacity: 0.6;
}
/* ==========================================================================
PRODUCT GRID — Shop / Archive
========================================================================== */
.woocommerce ul.products,
ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: var(--bc-grid-gap);
padding: 0;
margin: 0;
list-style: none;
}
/* Kill clearfix pseudo-elements — they become ghost grid items and create blank slots */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
display: none !important;
content: none !important;
}
/* Do NOT apply grid to Slick-initialized carousels — Slick manages its own layout */
ul.products.slick-initialized,
.woocommerce ul.products.slick-initialized,
.slick-initialized.products {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
@media (max-width: 1100px) {
.woocommerce ul.products,
ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.woocommerce ul.products,
ul.products {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ==========================================================================
PRODUCT CARD — WooCommerce
========================================================================== */
.woocommerce ul.products li.product,
li.product,
.bc-deal-card {
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color var(--bc-transition), box-shadow var(--bc-transition);
position: relative;
}
.woocommerce ul.products li.product:hover,
li.product:hover,
.bc-deal-card:hover {
border-color: var(--bc-border-hover);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* ── Product Image ── */
.bc-card__image,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
border-bottom: 1px solid var(--bc-border);
transition: transform var(--bc-transition-slow);
}
.woocommerce ul.products li.product:hover img,
.bc-deal-card:hover .bc-card__image {
transform: scale(1.03);
}
.bc-card__image-wrap {
overflow: hidden;
position: relative;
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
}
.bc-card__image-wrap > a {
display: block;
}
/* Badge escapes the overflow clip via the card as positioning parent */
li.product.bc-deal-card {
position: relative;
}
li.product .onsale,
li.product .bc-card__badge {
position: absolute;
z-index: 10;
}
/* ── Product Badges ── */
.bc-card__badge,
.onsale {
position: absolute;
top: 10px;
left: 0;
margin-left: 0;
padding: 5px 14px 5px 16px;
border-radius: 0 var(--bc-radius-full) var(--bc-radius-full) 0;
font-family: var(--bc-font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10;
white-space: nowrap;
}
.bc-card__badge--hot,
.bc-badge-hot {
background: var(--bc-pink);
color: #fff;
box-shadow: 0 2px 10px var(--bc-pink-glow);
}
.bc-card__badge--save,
.bc-badge-save,
.onsale {
background: var(--bc-pink);
color: #fff;
box-shadow: 0 2px 10px var(--bc-pink-glow);
}
/* ── Card Body ── */
.bc-card__body {
padding: var(--bc-space-md);
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
/* ── Store Tag ── */
.bc-card__store {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bc-text-dim);
}
/* ── Product Title ── */
.bc-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
font-family: var(--bc-font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
line-height: 1.35 !important;
margin: 0 !important;
padding: 0 !important;
}
.bc-card__title a {
color: inherit;
text-decoration: none;
}
.bc-card__title a:hover {
color: var(--bc-neon);
}
/* ── Price Block ── */
.bc-card__price-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: auto;
}
.bc-card__price,
.woocommerce ul.products li.product .price,
.price {
font-family: var(--bc-font-display) !important;
font-weight: 600;
font-size: 1.4rem !important;
color: var(--bc-neon) !important;
line-height: 1;
}
.bc-card__price-old,
.bc-card__price del,
.bc-card__price del span,
.bc-card__price del bdi,
.price del {
font-family: var(--bc-font-body);
font-size: 0.85rem;
color: var(--bc-text-dim) !important;
text-decoration: line-through;
font-weight: 400;
}
.bc-card__price ins,
.bc-card__price ins span,
.price ins {
text-decoration: none;
color: var(--bc-neon);
}
.bc-card__savings {
display: inline-block;
padding: 2px 8px;
background: var(--bc-savings-bg);
color: var(--bc-savings);
font-size: 11px;
font-weight: 700;
border-radius: var(--bc-radius-full);
letter-spacing: 0.02em;
}
/* ── Card CTA ── */
.bc-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 12px 16px;
background: var(--bc-neon);
color: #050507;
font-family: var(--bc-font-body);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
border-radius: var(--bc-radius);
text-decoration: none;
cursor: pointer;
transition: all var(--bc-transition);
}
.bc-card__cta:hover {
background: #4dff33;
color: #050507;
box-shadow: 0 4px 20px var(--bc-neon-flare);
}
.bc-card__cta:active {
transform: scale(0.98);
}
/* ── Card CTA Arrow ── */
.bc-card__cta-arrow {
font-size: 16px;
transition: transform var(--bc-transition);
}
.bc-card__cta:hover .bc-card__cta-arrow {
transform: translateX(3px);
}
/* ==========================================================================
SINGLE PRODUCT PAGE
========================================================================== */
.woocommerce div.product {
background: transparent;
}
.woocommerce div.product .product_title,
.product_title {
font-family: var(--bc-font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: #fff;
line-height: 1.2;
}
.woocommerce div.product .price,
.woocommerce div.product p.price {
font-family: var(--bc-font-display);
font-size: 2rem !important;
color: var(--bc-neon) !important;
font-weight: 600;
}
/* Single product external link button */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product form.cart a.button {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body);
font-weight: 800;
font-size: 15px;
padding: 16px 40px;
border-radius: var(--bc-radius);
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
box-shadow: 0 4px 20px var(--bc-neon-glow);
transition: all var(--bc-transition);
}
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart a.button:hover {
background: #4dff33 !important;
box-shadow: var(--bc-shadow-neon);
transform: translateY(-2px);
}
/* Product meta / categories / tags */
.woocommerce div.product .product_meta {
color: var(--bc-text-2);
font-size: 13px;
border-top: 1px solid var(--bc-border);
padding-top: var(--bc-space-md);
margin-top: var(--bc-space-lg);
}
.woocommerce div.product .product_meta a {
color: var(--bc-neon);
}
/* Tabs on single product */
.woocommerce div.product .woocommerce-tabs ul.tabs {
background: transparent;
border-bottom: 1px solid var(--bc-border);
padding: 0;
margin: 0 0 var(--bc-space-lg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--bc-text-2);
font-family: var(--bc-font-body);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 12px 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom-color: var(--bc-neon);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--bc-neon);
}
.woocommerce div.product .woocommerce-tabs .panel {
background: transparent;
color: var(--bc-text);
border: none;
}
/* Related products */
.woocommerce .related.products h2,
.woocommerce .up-sells h2 {
font-family: var(--bc-font-display);
font-size: 1.5rem;
color: #fff;
}
/* ==========================================================================
PRICE COMPARISON TABLE
========================================================================== */
.bc-price-table {
width: 100%;
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-lg);
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
.bc-price-table thead th {
background: var(--bc-surface-2);
color: var(--bc-text-2);
font-family: var(--bc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 14px 18px;
border-bottom: 1px solid var(--bc-border);
text-align: left;
}
.bc-price-table tbody tr {
border-bottom: 1px solid var(--bc-border);
transition: background var(--bc-transition);
}
.bc-price-table tbody tr:last-child {
border-bottom: none;
}
.bc-price-table tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
/* Best price row */
.bc-price-table tbody tr.bc-best-price {
background: var(--bc-neon-subtle);
border-left: 3px solid var(--bc-neon);
}
.bc-price-table tbody tr.bc-best-price:hover {
background: var(--bc-neon-glow);
}
.bc-price-table td {
padding: 14px 18px;
color: var(--bc-text);
font-size: 14px;
vertical-align: middle;
}
.bc-price-table .bc-table-price {
font-family: var(--bc-font-display);
font-weight: 600;
font-size: 1.2rem;
color: var(--bc-neon);
}
.bc-price-table .bc-table-store {
font-weight: 600;
color: #fff;
}
.bc-price-table .bc-table-store img {
max-height: 28px;
opacity: 0.85;
filter: brightness(1.2);
}
.bc-price-table .bc-table-cta {
text-align: right;
}
.bc-price-table .bc-table-cta a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
background: var(--bc-neon);
color: #050507;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--bc-radius);
text-decoration: none;
transition: all var(--bc-transition);
}
.bc-price-table .bc-table-cta a:hover {
background: #4dff33;
box-shadow: 0 4px 16px var(--bc-neon-flare);
}
/* ==========================================================================
SHOP PAGE LAYOUT — Archive overrides
========================================================================== */
.bc-shop-page .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container {
max-width: var(--bc-container);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
color: var(--bc-text-2);
font-family: var(--bc-font-body);
font-size: 13px;
}
.woocommerce .woocommerce-ordering select {
background: var(--bc-surface-2);
color: var(--bc-text);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-sm);
padding: 8px 12px;
font-family: var(--bc-font-body);
font-size: 13px;
}
/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
border: none;
display: flex;
gap: 8px;
justify-content: center;
margin-top: var(--bc-space-xl);
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background: var(--bc-surface-2);
color: var(--bc-text-2);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-sm);
padding: 8px 14px;
font-family: var(--bc-font-body);
font-weight: 600;
font-size: 13px;
min-width: 38px;
text-align: center;
transition: all var(--bc-transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--bc-neon-subtle);
color: var(--bc-neon);
border-color: var(--bc-border-neon);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--bc-neon);
color: #050507;
border-color: var(--bc-neon);
font-weight: 800;
}
/* ==========================================================================
BREADCRUMBS
========================================================================== */
.woocommerce .woocommerce-breadcrumb,
.ast-breadcrumbs,
.trail-items {
font-family: var(--bc-font-body);
font-size: 13px;
color: var(--bc-text-dim);
padding: var(--bc-space-md) 0;
}
.woocommerce .woocommerce-breadcrumb a,
.ast-breadcrumbs a,
.trail-items a {
color: var(--bc-text-2);
transition: color var(--bc-transition);
}
.woocommerce .woocommerce-breadcrumb a:hover,
.ast-breadcrumbs a:hover,
.trail-items a:hover {
color: var(--bc-neon);
}
/* ==========================================================================
SEARCH & FORMS
========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
background: var(--bc-surface-2);
color: var(--bc-text);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-sm);
padding: 10px 14px;
font-family: var(--bc-font-body);
font-size: 14px;
transition: border-color var(--bc-transition);
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--bc-neon);
outline: none;
box-shadow: 0 0 0 3px var(--bc-neon-glow);
}
::placeholder {
color: var(--bc-text-dim);
}
/* Search widget */
.widget_search .search-form,
.woocommerce-product-search {
position: relative;
}
.widget_search .search-field,
.woocommerce-product-search .search-field {
width: 100%;
padding-right: 50px;
}
.widget_search .search-submit,
.woocommerce-product-search button {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;
background: var(--bc-neon);
color: #050507;
border: none;
border-radius: var(--bc-radius-sm);
padding: 0 16px;
font-weight: 700;
cursor: pointer;
}
/* ==========================================================================
BLOG & CONTENT
========================================================================== */
.entry-content,
.ast-article-post,
article.post {
color: var(--bc-text);
}
.entry-title,
.ast-article-post .entry-title {
font-family: var(--bc-font-display);
font-weight: 700;
color: #fff;
}
.entry-title a {
color: #fff;
transition: color var(--bc-transition);
}
.entry-title a:hover {
color: var(--bc-neon);
}
.entry-meta,
.post-date,
.cat-links,
.tags-links {
color: var(--bc-text-2);
font-size: 13px;
}
.entry-meta a {
color: var(--bc-text-2);
}
.entry-meta a:hover {
color: var(--bc-neon);
}
/* Blog post content — comfortable reading */
.single-post .entry-content {
max-width: 720px;
font-size: 16px;
line-height: 1.75;
}
.single-post .entry-content h2,
.single-post .entry-content h3 {
margin-top: var(--bc-space-xl);
color: #fff;
}
.single-post .entry-content blockquote {
border-left: 3px solid var(--bc-neon);
background: var(--bc-surface);
padding: var(--bc-space-md) var(--bc-space-lg);
margin: var(--bc-space-lg) 0;
border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
color: var(--bc-text);
font-style: italic;
}
.single-post .entry-content code {
background: var(--bc-surface-2);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
color: var(--bc-neon);
}
.single-post .entry-content img {
border-radius: var(--bc-radius);
border: 1px solid var(--bc-border);
}
/* ==========================================================================
SINGLE PRODUCT — External CTA & Price Highlight
========================================================================== */
.bc-external-product {
margin: var(--bc-space-lg) 0;
}
.bc-price-highlight {
background: var(--bc-surface);
border: 1px solid var(--bc-border-neon);
border-radius: var(--bc-radius-lg);
padding: var(--bc-space-lg);
margin-bottom: var(--bc-space-lg);
text-align: center;
}
.bc-price-highlight__label {
font-family: var(--bc-font-body);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bc-neon);
margin-bottom: var(--bc-space-sm);
}
.bc-price-highlight__amount {
font-family: var(--bc-font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--bc-neon);
line-height: 1;
margin-bottom: var(--bc-space-sm);
}
.bc-price-highlight__amount .woocommerce-Price-amount {
color: var(--bc-neon);
}
.bc-price-highlight__savings {
font-size: 14px;
color: var(--bc-text-2);
}
.bc-price-highlight__original {
text-decoration: line-through;
color: var(--bc-text-dim);
margin-right: 8px;
}
.bc-external-product__cta {
width: 100%;
font-size: 16px;
padding: 18px 32px;
}
.bc-external-product__note {
color: var(--bc-text-dim);
font-size: 12px;
text-align: center;
margin-top: var(--bc-space-md);
}
/* ==========================================================================
SIDEBAR & WIDGETS
========================================================================== */
.widget,
aside .widget {
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-lg);
padding: var(--bc-space-lg);
margin-bottom: var(--bc-space-lg);
}
.widget-title,
.widget .widget-title {
font-family: var(--bc-font-display);
font-size: 1rem;
font-weight: 600;
color: #fff;
margin-bottom: var(--bc-space-md);
padding-bottom: var(--bc-space-sm);
border-bottom: 1px solid var(--bc-border);
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget ul li {
padding: 8px 0;
border-bottom: 1px solid var(--bc-border);
}
.widget ul li:last-child {
border-bottom: none;
}
.widget ul li a {
color: var(--bc-text);
font-size: 14px;
transition: color var(--bc-transition);
}
.widget ul li a:hover {
color: var(--bc-neon);
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer,
.ast-footer-overlay,
.ast-small-footer,
footer.site-footer {
background: var(--bc-surface) !important;
border-top: 1px solid var(--bc-border);
}
.site-footer,
.site-footer p,
.site-footer .ast-footer-copyright,
.ast-small-footer .ast-footer-html-inner {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body);
font-size: 13px;
}
.site-footer a {
color: var(--bc-neon) !important;
transition: color var(--bc-transition);
}
.site-footer a:hover {
color: #fff !important;
}
/* Footer widgets */
.ast-footer .widget,
footer .widget {
background: transparent;
border: none;
padding: 0;
}
/* Affiliate disclosure */
.bc-affiliate-disclosure {
background: var(--bc-surface-2);
border-top: 1px solid var(--bc-border);
padding: var(--bc-space-lg) var(--bc-space-xl);
text-align: center;
}
.bc-affiliate-disclosure p {
color: var(--bc-text-dim);
font-size: 12px;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* ==========================================================================
WOOCOMMERCE NOTICES & MESSAGES
========================================================================== */
.woocommerce-message,
.woocommerce-info {
background: var(--bc-surface-2) !important;
border-top-color: var(--bc-neon) !important;
color: var(--bc-text) !important;
}
.woocommerce-error {
background: var(--bc-surface-2) !important;
border-top-color: var(--bc-pink) !important;
color: var(--bc-text) !important;
}
.woocommerce-message::before {
color: var(--bc-neon) !important;
}
.woocommerce-error::before {
color: var(--bc-pink) !important;
}
/* ==========================================================================
ELEMENTOR OVERRIDES — Dark mode compatibility
========================================================================== */
.elementor-section,
.elementor-container {
color: var(--bc-text);
}
.elementor-heading-title {
font-family: var(--bc-font-display);
color: #fff;
}
.elementor-widget-text-editor {
color: var(--bc-text);
}
/* Elementor buttons — match our neon system */
.elementor-button {
font-family: var(--bc-font-body) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ==========================================================================
SCROLLBAR — Custom neon-themed
========================================================================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bc-void);
}
::-webkit-scrollbar-thumb {
background: var(--bc-surface-3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--bc-neon-dim);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--bc-surface-3) var(--bc-void);
}
/* ==========================================================================
NUCLEAR OVERRIDES — Force dark theme on EVERYTHING
Targets Elementor inline styles, Astra header, WooCommerce defaults.
Uses highest-specificity selectors + !important to beat inline styles.
========================================================================== */
/* ══════════════════════════════════════════════════════════════════════════
A. GLOBAL BACKGROUND NUKE — every possible container goes transparent
══════════════════════════════════════════════════════════════════════════ */
body {
background-color: var(--bc-void) !important;
background: var(--bc-void) !important;
}
/* Every wrapper, container, section, widget — transparent */
.site,
.site-content,
.ast-container,
#page,
#content,
#primary,
#secondary,
.content-area,
.site-main,
main,
article,
section,
div.product,
.ast-woocommerce-container,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container .site-content > .ast-container,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .ast-woocommerce-container,
.ast-plain-container .site-content .ast-container,
.woocommerce-page .ast-woocommerce-container,
.woocommerce .ast-woocommerce-container,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-cover,
.entry-content > *,
.ast-article-single,
.ast-article-post,
.hentry {
background-color: transparent !important;
background: transparent !important;
}
/* ══════════════════════════════════════════════════════════════════════════
B. ELEMENTOR — Force dark on ALL Elementor elements (beats inline styles)
══════════════════════════════════════════════════════════════════════════ */
/* Elementor sections — the [style] selector boosts specificity to beat inline */
.elementor-section[style],
.elementor-section,
section.elementor-section,
.elementor-section.elementor-section-boxed,
.elementor-section.elementor-section-full_width,
.elementor-section.elementor-section-stretched,
.elementor-top-section,
.elementor-inner-section,
.elementor-section[data-settings],
.elementor-element[style],
.elementor-element {
background-color: var(--bc-void) !important;
background-image: none !important;
background: var(--bc-void) !important;
}
/* Elementor inner wrappers */
.elementor-section > .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section-wrap,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-row,
.elementor-container {
background-color: transparent !important;
background: transparent !important;
}
/* Elementor new containers (Flexbox layout) */
.e-con[style],
.e-con,
.e-con-inner,
.e-con-full,
.e-con-boxed,
.e-child {
background-color: var(--bc-void) !important;
background-image: none !important;
background: var(--bc-void) !important;
}
/* Elementor text and heading colors */
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title {
color: #fff !important;
}
.elementor-widget-text-editor p,
.elementor-widget-text-editor span {
color: var(--bc-text) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
C. ASTRA HEADER — Force dark on ALL header components
══════════════════════════════════════════════════════════════════════════ */
/* Main header wrapper — covers all Astra header builder rows */
.ast-primary-header-bar[style],
.ast-primary-header-bar,
.ast-above-header-bar[style],
.ast-above-header-bar,
.ast-below-header-bar[style],
.ast-below-header-bar,
#ast-desktop-header,
#ast-desktop-header > *,
.ast-main-header-wrap,
.main-header-bar,
.main-header-bar[style],
.site-header,
.site-header[style],
header.site-header,
#masthead,
#masthead[style],
.ast-header-stacked,
.ast-header-sections-navigation,
.ast-above-header,
.ast-above-header[style],
.ast-below-header,
.ast-below-header[style],
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-main-header-bar-alignment {
background-color: rgba(10, 10, 15, 0.95) !important;
background: rgba(10, 10, 15, 0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid var(--bc-border-neon) !important;
}
/* Header inner containers */
.ast-primary-header-bar .ast-builder-grid-row,
.ast-above-header-bar .ast-builder-grid-row,
.ast-below-header-bar .ast-builder-grid-row,
.ast-builder-header-row,
.ast-header-html-inner,
.site-header .ast-container,
.main-header-bar .ast-container,
.ast-primary-header .ast-container {
background: transparent !important;
}
/* Nav menu container — override red/colored backgrounds */
.ast-primary-header-bar .main-header-menu,
.main-header-menu,
.main-header-menu[style],
.ast-nav-menu,
.ast-nav-menu[style],
.ast-header-sections-navigation .main-header-menu,
.navigation-accessibility,
.ast-flex.main-header-container,
.ast-builder-menu,
.ast-builder-menu .main-header-menu,
.ast-builder-menu-1,
.ast-builder-menu-1 .main-header-menu {
background-color: transparent !important;
background: transparent !important;
}
/* All nav links */
.main-header-menu > .menu-item > a,
.ast-header-sections-navigation .menu-item > a,
.ast-nav-menu > .menu-item > a,
.main-header-menu .menu-item > a,
.ast-builder-menu .menu-item > a,
.ast-header-button-1,
.ast-header-button-2,
header a,
.site-header a {
color: var(--bc-text-2) !important;
transition: color 0.15s ease !important;
}
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.ast-nav-menu > .menu-item > a:hover,
.ast-nav-menu > .menu-item.current-menu-item > a,
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.ast-builder-menu .menu-item > a:hover,
.ast-builder-menu .menu-item.current-menu-item > a {
color: var(--bc-neon) !important;
}
/* Site title / branding */
.site-title a,
.ast-site-identity .site-title a,
.ast-site-identity .site-title,
.site-title {
color: #fff !important;
font-family: var(--bc-font-display) !important;
}
/* Header buttons (Subscribe, etc.) */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
header .ast-custom-button,
.ast-header-button-1 a,
.ast-header-button-2 a,
.ast-builder-layout-element .ast-button {
background: var(--bc-neon) !important;
color: #050507 !important;
border: none !important;
font-family: var(--bc-font-body) !important;
font-weight: 700 !important;
}
/* Language switcher links */
.trp-language-switcher a,
.trp-language-switcher,
header .trp-language-switcher a {
color: var(--bc-text-2) !important;
}
/* Social icons in header */
.ast-header-social-wrap a,
.ast-social-element {
color: var(--bc-text-2) !important;
}
.ast-header-social-wrap a:hover {
color: var(--bc-neon) !important;
}
/* Dropdown menus */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu,
.ast-header-sections-navigation .sub-menu {
background: var(--bc-surface-2) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius) !important;
box-shadow: var(--bc-shadow-lg) !important;
}
.main-header-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu .menu-item > a {
color: var(--bc-text) !important;
}
.main-header-menu .sub-menu .menu-item > a:hover,
.ast-nav-menu .sub-menu .menu-item > a:hover {
color: var(--bc-neon) !important;
background: var(--bc-neon-subtle) !important;
}
/* Mobile header */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-content,
.ast-mobile-popup-drawer[style] {
background: var(--bc-surface) !important;
}
/* ── Logo — blend away white background baked into the PNG ── */
.site-logo-img img,
.custom-logo,
.custom-logo-link img,
.ast-site-identity img,
.site-header img,
header img.custom-logo,
.ast-has-custom-logo img,
#masthead img,
.elementor-widget-theme-site-logo img,
.elementor-widget-image img[src*="bargainscave"],
.elementor-widget-image img[src*="logo"],
.elementor-widget-image img[src*="Bargains"],
img.custom-logo {
background: transparent !important;
mix-blend-mode: normal !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Logo wrapper/container — force transparent */
.site-logo-img,
.custom-logo-link,
.ast-site-identity,
.ast-has-custom-logo,
.site-branding,
.ast-site-logo-img,
header .elementor-widget-image,
header .elementor-widget-image .elementor-widget-container,
.elementor-widget-theme-site-logo,
.elementor-widget-theme-site-logo .elementor-widget-container {
background: transparent !important;
}
/* ── Dropdown / Popup menus — dark surface with neon accents, HIGH z-index ── */
.main-header-menu .sub-menu,
.main-header-menu .sub-menu[style],
.ast-nav-menu .sub-menu,
.ast-nav-menu .sub-menu[style],
.ast-header-sections-navigation .sub-menu,
.ast-builder-menu .sub-menu,
.ast-builder-menu-1 .sub-menu,
.ast-desktop-popup-content,
.ast-dropdown-active .sub-menu,
.astra-mega-menu-enabled,
.ast-submenu-expanded > .sub-menu,
.ast-mega-menu,
.ast-full-width-submenu {
background: var(--bc-surface-2) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
padding: 8px 0 !important;
z-index: 99999 !important;
}
/* Ensure nav menu parent items have stacking context above search */
.main-header-menu > .menu-item,
.ast-nav-menu > .menu-item,
.ast-builder-menu .menu-item,
.ast-builder-menu-1 .menu-item {
position: relative !important;
z-index: 99999 !important;
}
/* Header row must be above search bar below it */
.ast-primary-header-bar,
#ast-desktop-header,
.ast-main-header-wrap,
.main-header-bar,
.site-header,
header.site-header {
position: relative !important;
z-index: 9999 !important;
}
/* Dropdown link items — visible light text */
.main-header-menu .sub-menu .menu-item > a,
.main-header-menu .sub-menu li > a,
.ast-nav-menu .sub-menu .menu-item > a,
.ast-nav-menu .sub-menu li > a,
.ast-builder-menu .sub-menu li > a,
.ast-builder-menu-1 .sub-menu li > a,
.ast-header-sections-navigation .sub-menu li > a,
.sub-menu .menu-item > a {
color: var(--bc-text) !important;
font-family: var(--bc-font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 22px !important;
background: transparent !important;
border: none !important;
transition: all 0.15s ease !important;
}
/* Dropdown hover — neon green highlight */
.main-header-menu .sub-menu .menu-item > a:hover,
.main-header-menu .sub-menu li > a:hover,
.ast-nav-menu .sub-menu .menu-item > a:hover,
.ast-nav-menu .sub-menu li > a:hover,
.ast-builder-menu .sub-menu li > a:hover,
.ast-builder-menu-1 .sub-menu li > a:hover,
.sub-menu .menu-item > a:hover,
.sub-menu .menu-item.current-menu-item > a {
color: var(--bc-neon) !important;
background: var(--bc-neon-subtle) !important;
}
/* Dropdown separator lines */
.main-header-menu .sub-menu .menu-item,
.ast-nav-menu .sub-menu .menu-item,
.ast-builder-menu .sub-menu .menu-item {
border-bottom: 1px solid var(--bc-border) !important;
}
.main-header-menu .sub-menu .menu-item:last-child,
.ast-nav-menu .sub-menu .menu-item:last-child,
.ast-builder-menu .sub-menu .menu-item:last-child {
border-bottom: none !important;
}
/* Dropdown arrows/carets */
.main-header-menu .sub-menu .menu-item .dropdown-caret,
.ast-nav-menu .sub-menu .ast-menu-toggle {
color: var(--bc-text-2) !important;
}
/* ── Accessibility / contrast toggle popup (the half-circle icon) ── */
.ast-header-accessibility,
.ast-header-accessibility-widget,
[class*="accessibility"],
.pstarter-accessibility,
.wp-dark-mode-switch,
.wp-dark-mode-switch * {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border-color: var(--bc-border) !important;
}
/* ── Elementor popup/overlay panels ── */
.elementor-popup-modal,
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .dialog-message,
.dialog-widget,
.dialog-widget-content {
background: var(--bc-surface) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
D. SEARCH BAR — Force dark
══════════════════════════════════════════════════════════════════════════ */
.ast-search-box[style],
.ast-search-box,
.ast-header-search,
.search-form,
.ast-search-menu-icon,
.ast-header-search .astra-search-icon,
.ast-search-menu-icon .search-form,
.search-form .search-field,
input.search-field,
.ast-search-box input,
.elementor-search-form,
.elementor-search-form__container,
.elementor-widget-search-form input[type="search"],
.elementor-widget-search-form .elementor-search-form__container {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border-color: var(--bc-border) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
E. PRODUCT CARDS — Aggressive override for WooCommerce + Elementor widgets
══════════════════════════════════════════════════════════════════════════ */
/* Force dark on ALL product cards — every known selector */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
body.woocommerce ul.products li.product,
.ast-woocommerce-container ul.products li.product,
ul.products li.product,
li.product,
.bc-deal-card,
.astra-shop-summary-wrap,
.woocommerce ul.products li.product .astra-shop-summary-wrap,
/* Elementor WooCommerce widget product cards */
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-wc-products ul.products li.product,
.elementor-widget-woocommerce-products .product,
.elementor-wc-products ul.products li.product,
.elementor-widget-loop-grid .product,
.elementor-widget-loop-grid li.product,
.e-loop-item,
.elementor-products ul.products li.product {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: visible !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
/* Card hover effect */
.woocommerce ul.products li.product:hover,
li.product:hover,
.bc-deal-card:hover,
.elementor-widget-woocommerce-products ul.products li.product:hover {
border-color: var(--bc-border-hover) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--bc-neon-glow) !important;
}
/* ── Force proper grid layout — override EVERYTHING (but NOT slick carousels) ── */
.woocommerce ul.products:not(.slick-initialized),
.woocommerce-page ul.products:not(.slick-initialized),
body.woocommerce ul.products:not(.slick-initialized),
.ast-woocommerce-container ul.products:not(.slick-initialized),
ul.products:not(.slick-initialized),
.woocommerce[class*="columns-"] ul.products:not(.slick-initialized),
.woocommerce.columns-3 ul.products:not(.slick-initialized),
.woocommerce.columns-4 ul.products:not(.slick-initialized),
/* Elementor product grid (not carousels) */
.elementor-widget-woocommerce-products ul.products:not(.slick-initialized),
.elementor-widget-wc-products ul.products:not(.slick-initialized),
.elementor-wc-products ul.products:not(.slick-initialized),
.elementor-products ul.products:not(.slick-initialized),
.elementor-widget-loop-grid ul.products:not(.slick-initialized) {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
clear: both !important;
}
@media (min-width: 1100px) {
.woocommerce ul.products:not(.slick-initialized),
.woocommerce-page ul.products:not(.slick-initialized),
body.woocommerce ul.products:not(.slick-initialized),
.ast-woocommerce-container ul.products:not(.slick-initialized),
ul.products:not(.slick-initialized),
.woocommerce[class*="columns-"] ul.products:not(.slick-initialized),
.elementor-widget-woocommerce-products ul.products:not(.slick-initialized),
.elementor-widget-wc-products ul.products:not(.slick-initialized) {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 768px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
body.woocommerce ul.products,
ul.products,
.woocommerce[class*="columns-"] ul.products,
.elementor-widget-woocommerce-products ul.products {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* ── Product image wrappers — clip corners since card is overflow:visible ── */
li.product > a:first-child,
li.product > .woocommerce-LoopProduct-link,
li.product > .astra-shop-thumbnail-wrap,
.bc-deal-card > .bc-card__image-wrap,
.hfe-product-item > a:first-child {
overflow: hidden !important;
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
}
/* ── Product images — fill card width, proper size ── */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .wp-post-image,
ul.products li.product img,
li.product img,
.bc-deal-card img,
.bc-card__image,
.elementor-widget-woocommerce-products li.product img,
.elementor-widget-wc-products li.product img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain !important;
display: block !important;
background: #fff !important;
border-bottom: 1px solid var(--bc-border) !important;
border-radius: 0 !important;
padding: 20px !important;
margin: 0 !important;
}
/* ── Product titles — force readable ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title,
.astra-shop-summary-wrap .woocommerce-loop-product__title,
.elementor-widget-woocommerce-products .woocommerce-loop-product__title {
font-family: var(--bc-font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
line-height: 1.4 !important;
margin: 0 !important;
padding: 14px 16px 6px !important;
background: transparent !important;
}
/* ── Product prices — neon green, Clash Display ── */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins span,
.woocommerce ul.products li.product .price bdi,
ul.products li.product .price,
li.product .price,
.astra-shop-summary-wrap .price,
.elementor-widget-woocommerce-products .price {
font-family: var(--bc-font-display) !important;
font-weight: 600 !important;
font-size: 1.5rem !important;
color: var(--bc-neon) !important;
line-height: 1.2 !important;
padding: 4px 16px !important;
margin: 0 !important;
display: block !important;
background: transparent !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del span,
.woocommerce ul.products li.product .price del bdi,
ul.products li.product .price del,
li.product .price del {
font-family: var(--bc-font-body) !important;
font-size: 0.85rem !important;
color: var(--bc-text-dim) !important;
text-decoration: line-through !important;
font-weight: 400 !important;
opacity: 0.7;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none !important;
}
/* Keep price components inline (prevent $ on separate line from amount) */
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .price bdi,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price bdi {
display: inline !important;
}
/* ── Hide Astra's default summary wrap — our content-product.php already renders title/price/CTA ── */
.astra-shop-summary-wrap,
.woocommerce ul.products li.product .astra-shop-summary-wrap,
li.product .astra-shop-summary-wrap {
display: none !important;
}
/* ── Hide Astra's on-card add-to-cart button (bag icon) — our template has custom CTA ── */
.ast-on-card-button,
.ast-select-options-trigger,
a.ast-on-card-button {
display: none !important;
}
/* ── WooCommerce default "Sale!" badge — HIDDEN everywhere (we use custom .bc-card__badge instead) ── */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
span.onsale,
.onsale,
.woocommerce-page span.onsale,
body.woocommerce span.onsale,
body span.onsale,
[class*="onsale"]:not(.bc-card__badge):not(.bc-card__badge--save) {
display: none !important;
}
/* ── Force dark on ALL card internals — catches Astra wrappers, inline styles ── */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body ul.products li.product,
body li.product.type-product,
body .bc-deal-card {
background-color: var(--bc-surface) !important;
background: var(--bc-surface) !important;
}
body li.product > *:not(.bc-card__image-wrap):not(img):not(.bc-card__badge),
body li.product .bc-card__body,
body li.product .astra-shop-summary-wrap,
body li.product .astra-shop-summary-wrap[style],
body li.product a.woocommerce-LoopProduct-link,
body li.product > a[style],
body li.product > div[style],
body .bc-deal-card > *:not(.bc-card__image-wrap):not(img):not(.bc-card__badge),
body .bc-deal-card .bc-card__body {
background-color: transparent !important;
background: transparent !important;
}
/* Card title text — force white on dark cards */
body li.product .bc-card__title,
body li.product .bc-card__title a,
body li.product .woocommerce-loop-product__title,
body li.product .woocommerce-loop-product__title a,
body li.product h2.woocommerce-loop-product__title,
body li.product h2 a,
body li.product h3 a,
body li.product .bc-card__store {
color: #fff !important;
background: transparent !important;
}
/* Card price — force neon green */
body li.product .bc-card__price,
body li.product .bc-card__price-row .price,
body li.product .price span.woocommerce-Price-amount,
body li.product .price bdi {
color: var(--bc-neon) !important;
background: transparent !important;
}
/* Carve-out: crossed-out original price must stay dimmed, not neon green */
body li.product .bc-card__price del,
body li.product .bc-card__price del span,
body li.product .bc-card__price del bdi {
color: var(--bc-text-dim) !important;
text-decoration: line-through !important;
}
/* Card savings badge */
body li.product .bc-card__savings {
color: var(--bc-savings) !important;
background: var(--bc-savings-bg) !important;
}
/* Card CTA — re-assert green */
body li.product .bc-card__cta,
body .bc-deal-card .bc-card__cta {
background: var(--bc-neon) !important;
color: #050507 !important;
}
/* ── WooCommerce buttons — neon green CTA ── */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_external,
ul.products li.product a.button,
li.product a.button,
li.product .button,
.astra-shop-summary-wrap a.button,
.elementor-widget-woocommerce-products li.product a.button,
.elementor-widget-wc-products li.product a.button {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 14px 20px !important;
margin: auto 16px 16px !important;
text-align: center !important;
display: block !important;
width: calc(100% - 32px) !important;
box-shadow: 0 2px 12px var(--bc-neon-glow) !important;
transition: all 0.15s ease !important;
text-decoration: none !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
ul.products li.product a.button:hover,
li.product a.button:hover {
background: #4dff33 !important;
color: #050507 !important;
box-shadow: 0 4px 24px var(--bc-neon-flare) !important;
transform: translateY(-1px);
}
/* ── Force dark on product link wrappers ── */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
color: #fff !important;
text-decoration: none !important;
}
/* ── Astra shop summary wrapper ── */
.astra-shop-summary-wrap {
background: transparent !important;
padding: 0 !important;
}
/* ── Star ratings ── */
.woocommerce ul.products li.product .star-rating,
.woocommerce .star-rating {
color: #FFB800 !important;
padding: 4px 16px !important;
font-size: 12px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
F. SINGLE PRODUCT PAGE — Full dark override
══════════════════════════════════════════════════════════════════════════ */
/* Body-level override for single product pages */
body.single-product,
body.single-product #page,
body.single-product .site,
body.single-product .site-content,
body.single-product #content,
body.single-product #primary,
body.single-product .content-area,
body.single-product .site-main,
body.single-product main,
body.single-product article,
body.single-product .ast-container,
body.single-product .ast-woocommerce-container,
body.single-product .ast-separate-container .site-content > .ast-container,
body.single-product .ast-separate-container .ast-article-single,
body.single-product .ast-separate-container .ast-woocommerce-container,
body.woocommerce.single-product .ast-container {
background: transparent !important;
background-color: transparent !important;
}
body.single-product {
background: var(--bc-void) !important;
background-color: var(--bc-void) !important;
}
/* Product div and all children */
.woocommerce div.product,
.woocommerce #content div.product,
.woocommerce-page div.product,
.single-product div.product,
body.single-product div.product {
background: transparent !important;
color: var(--bc-text) !important;
}
.woocommerce div.product .summary,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery ol,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
background: transparent !important;
}
/* Product gallery main image */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
background: #fff !important;
border-radius: var(--bc-radius-lg) !important;
border: 1px solid var(--bc-border) !important;
padding: 16px !important;
}
/* Product gallery thumbnails */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img {
background: #fff !important;
border-radius: var(--bc-radius) !important;
border: 1px solid var(--bc-border) !important;
padding: 4px !important;
opacity: 0.6;
transition: opacity 0.15s ease !important;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
opacity: 1;
border-color: var(--bc-neon) !important;
}
/* Product title */
.woocommerce div.product .product_title,
body.single-product .product_title,
body.single-product .entry-title {
font-family: var(--bc-font-display) !important;
font-weight: 700 !important;
color: #fff !important;
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}
/* Product price on single page */
.woocommerce div.product p.price,
.woocommerce div.product .price,
.woocommerce div.product .price span,
.woocommerce div.product .price bdi,
body.single-product .price {
font-family: var(--bc-font-display) !important;
font-size: 2rem !important;
color: var(--bc-neon) !important;
font-weight: 600 !important;
}
.woocommerce div.product .price del,
.woocommerce div.product .price del span,
.woocommerce div.product .price del bdi {
color: var(--bc-text-dim) !important;
font-size: 1rem !important;
}
/* Product short description */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
color: var(--bc-text) !important;
}
/* Product meta */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta span,
.woocommerce div.product .product_meta a {
color: var(--bc-text-2) !important;
}
.woocommerce div.product .product_meta a:hover {
color: var(--bc-neon) !important;
}
/* Breadcrumbs on product page */
body.single-product .woocommerce-breadcrumb,
body.single-product .ast-breadcrumbs-wrapper,
body.single-product .ast-breadcrumbs-wrapper * {
color: var(--bc-text-dim) !important;
background: transparent !important;
}
body.single-product .woocommerce-breadcrumb a,
body.single-product .ast-breadcrumbs-wrapper a {
color: var(--bc-text-2) !important;
}
body.single-product .woocommerce-breadcrumb a:hover {
color: var(--bc-neon) !important;
}
/* Product tabs */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs .panel {
background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid var(--bc-border) !important;
padding: 0 !important;
margin: var(--bc-space-xl) 0 var(--bc-space-lg) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-weight: 600 !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 12px 20px !important;
background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom-color: var(--bc-neon) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--bc-neon) !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
color: #fff !important;
font-family: var(--bc-font-display) !important;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel {
color: var(--bc-text) !important;
}
/* ── Full sweep: force ALL content inside product tabs to dark theme ── */
.woocommerce div.product .woocommerce-tabs .panel *,
.woocommerce div.product .woocommerce-tabs .panel h1,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4,
.woocommerce div.product .woocommerce-tabs .panel h5,
.woocommerce div.product .woocommerce-tabs .panel h6,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol,
.woocommerce div.product .woocommerce-tabs .panel span,
.woocommerce div.product .woocommerce-tabs .panel strong,
.woocommerce div.product .woocommerce-tabs .panel b,
.woocommerce div.product .woocommerce-tabs .panel em,
.woocommerce div.product .woocommerce-tabs .panel mark,
.woocommerce div.product .woocommerce-tabs .panel blockquote,
.woocommerce div.product .woocommerce-tabs .panel div,
.woocommerce div.product .woocommerce-tabs .panel dt,
.woocommerce div.product .woocommerce-tabs .panel dd {
background: transparent !important;
background-color: transparent !important;
color: var(--bc-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel h1,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4 {
color: #fff !important;
font-family: var(--bc-font-display) !important;
}
.woocommerce div.product .woocommerce-tabs .panel a {
color: var(--bc-neon) !important;
background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs .panel a:hover {
color: #fff !important;
}
/* ── Full sweep: product summary / short description ── */
.woocommerce div.product .summary *:not(.bc-card__cta):not(.bc-external-product__cta):not(.bc-card__cta-arrow):not(.bc-price-highlight):not(.bc-price-highlight__amount):not(.bc-price-highlight__label):not(.bc-price-highlight__savings):not(.bc-price-highlight__original):not(.single_add_to_cart_button):not(button):not(input):not(select),
.woocommerce div.product .woocommerce-product-details__short-description *,
.woocommerce div.product .woocommerce-product-details__short-description h1,
.woocommerce div.product .woocommerce-product-details__short-description h2,
.woocommerce div.product .woocommerce-product-details__short-description h3,
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .woocommerce-product-details__short-description li,
.woocommerce div.product .woocommerce-product-details__short-description span,
.woocommerce div.product .woocommerce-product-details__short-description strong,
.woocommerce div.product .woocommerce-product-details__short-description mark {
background: transparent !important;
background-color: transparent !important;
color: var(--bc-text) !important;
}
/* ── Full sweep: blog/post content on dark theme ── */
body.single-post .entry-content *,
body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content span,
body.single-post .entry-content strong,
body.single-post .entry-content mark,
body.single-post .entry-content blockquote {
background: transparent !important;
background-color: transparent !important;
color: var(--bc-text) !important;
}
body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
color: #fff !important;
font-family: var(--bc-font-display) !important;
}
body.single-post .entry-content a {
color: var(--bc-neon) !important;
background: transparent !important;
}
/* ── Global: strip inline highlight backgrounds from editor content ── */
body.bc-neon-underground mark,
body.bc-neon-underground .has-background:not(.bc-card__cta):not(.bc-external-product__cta):not(.bc-price-highlight):not(button):not(a.button),
body.bc-neon-underground .woocommerce-tabs [style*="background-color"],
body.bc-neon-underground .woocommerce-product-details__short-description [style*="background-color"],
body.bc-neon-underground .entry-content [style*="background-color"] {
background: transparent !important;
background-color: transparent !important;
}
/* ── Re-assert CTA button green (wins over content sweep) ── */
.bc-card__cta,
.bc-external-product__cta,
body.single-product .bc-card__cta,
body.single-product .bc-external-product__cta,
.woocommerce div.product .bc-card__cta,
.woocommerce div.product .bc-external-product__cta {
background: var(--bc-neon) !important;
background-color: var(--bc-neon) !important;
color: #050507 !important;
}
.bc-price-highlight,
body.single-product .bc-price-highlight,
.woocommerce div.product .bc-price-highlight {
background: var(--bc-surface) !important;
background-color: var(--bc-surface) !important;
border: 1px solid var(--bc-border-neon) !important;
}
.bc-price-highlight__amount,
.bc-price-highlight__label,
.bc-price-highlight__savings {
color: var(--bc-text) !important;
background: transparent !important;
}
/* Product attributes table (Additional Information tab) */
.woocommerce div.product .woocommerce-tabs table.shop_attributes,
.woocommerce table.shop_attributes {
background: transparent !important;
border: none !important;
border-collapse: collapse !important;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce table.shop_attributes th {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
font-family: var(--bc-font-body) !important;
font-weight: 600 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
padding: 12px 16px !important;
border-bottom: 1px solid var(--bc-border) !important;
width: 200px !important;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes td,
.woocommerce table.shop_attributes td,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td p,
.woocommerce table.shop_attributes td p {
background: transparent !important;
color: var(--bc-text) !important;
font-family: var(--bc-font-body) !important;
font-style: normal !important;
font-size: 14px !important;
padding: 12px 16px !important;
border-bottom: 1px solid var(--bc-border) !important;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) td {
background: var(--bc-surface-2) !important;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) th {
background: var(--bc-surface-3) !important;
}
/* Related products */
.woocommerce .related.products,
.woocommerce .up-sells,
.woocommerce .cross-sells {
background: transparent !important;
}
.woocommerce .related.products h2,
.woocommerce .up-sells h2,
.woocommerce .cross-sells h2 {
font-family: var(--bc-font-display) !important;
font-size: 1.5rem !important;
color: #fff !important;
}
/* Hide upsells & cross-sells — not needed for affiliate model */
.woocommerce .upsells,
.woocommerce .cross-sells,
section.upsells,
section.cross-sells,
.upsells.products,
.cross-sells {
display: none !important;
}
/* Catch-all: any WooCommerce default product cards that leak through plugins/widgets
(forces dark theme + consistent pricing on non-custom product cards) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
color: var(--bc-text) !important;
font-family: var(--bc-font-display) !important;
font-size: 0.95rem !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
color: var(--bc-neon) !important;
font-family: var(--bc-font-body) !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
color: var(--bc-subtext) !important;
opacity: 0.6;
}
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .posted_in {
color: var(--bc-subtext) !important;
font-size: 0.75rem !important;
}
/* Single product external CTA area */
.bc-external-product {
background: transparent !important;
}
.bc-price-highlight {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border-neon) !important;
}
/* Quantity selector */
.woocommerce div.product .quantity .qty,
.woocommerce .quantity .qty {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
F2. CATEGORY NAV — Fix rendering on product pages (prevent giant columns)
══════════════════════════════════════════════════════════════════════════ */
/* On single product pages, category nav should be horizontal pills, not giant blocks */
body.single-product .bc-category-nav,
.woocommerce div.product .bc-category-nav,
.bc-category-nav {
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 10px !important;
padding: var(--bc-space-lg) 0 !important;
margin-bottom: var(--bc-space-lg) !important;
width: 100% !important;
max-width: 100% !important;
}
.bc-category-nav .bc-category-pill,
.bc-category-nav a,
body.single-product .bc-category-nav a {
display: inline-flex !important;
flex: none !important;
width: auto !important;
max-width: none !important;
height: auto !important;
min-height: auto !important;
padding: 8px 20px !important;
font-size: 13px !important;
border-radius: var(--bc-radius-full) !important;
white-space: nowrap !important;
}
/* Old class names from previous theme — prevent them from rendering as blocks */
.bc-category-nav__link,
body.single-product .bc-category-nav__link {
display: inline-flex !important;
flex: none !important;
width: auto !important;
height: auto !important;
padding: 8px 20px !important;
background: var(--bc-surface-2) !important;
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-full) !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
}
.bc-category-nav__link:hover {
background: var(--bc-neon-subtle) !important;
color: var(--bc-neon) !important;
border-color: var(--bc-border-neon) !important;
}
.bc-category-nav__link--active {
background: var(--bc-neon) !important;
color: #050507 !important;
border-color: var(--bc-neon) !important;
font-weight: 700 !important;
}
/* ══════════════════════════════════════════════════════════════════════════
F3. ALL WOOCOMMERCE PAGES — Global dark override
══════════════════════════════════════════════════════════════════════════ */
/* Shop, category, tag, single product, cart — ALL dark */
body.woocommerce,
body.woocommerce-page,
body.single-product,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag {
background: var(--bc-void) !important;
}
body.woocommerce .site,
body.woocommerce-page .site,
body.woocommerce .site-content,
body.woocommerce-page .site-content,
body.woocommerce #content,
body.woocommerce-page #content,
body.woocommerce #primary,
body.woocommerce-page #primary,
body.woocommerce .content-area,
body.woocommerce-page .content-area,
body.woocommerce .site-main,
body.woocommerce-page .site-main,
body.woocommerce main,
body.woocommerce-page main,
body.woocommerce .ast-container,
body.woocommerce-page .ast-container,
body.woocommerce .ast-woocommerce-container,
body.woocommerce-page .ast-woocommerce-container {
background: transparent !important;
background-color: transparent !important;
}
/* ── Force full-width layout on WooCommerce archive/shop pages ──
Astra's ast-two-container + sidebar squeezes products to 680px.
Override to give products the full container width. */
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container,
body.tax-product_tag .ast-container,
body.woocommerce-shop .ast-container,
body.woocommerce.archive .ast-container {
display: block !important;
max-width: 1400px !important;
}
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.tax-product_tag .content-area,
body.woocommerce-shop .content-area,
body.woocommerce.archive .content-area {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* Hide sidebar on WooCommerce product archive pages */
body.post-type-archive-product #secondary,
body.tax-product_cat #secondary,
body.tax-product_tag #secondary,
body.woocommerce-shop #secondary,
body.woocommerce.archive #secondary,
body.post-type-archive-product .widget-area,
body.tax-product_cat .widget-area,
body.tax-product_tag .widget-area,
body.woocommerce-shop .widget-area,
body.woocommerce.archive .widget-area {
display: none !important;
}
/* Remove excessive padding on WooCommerce container */
body.post-type-archive-product .ast-woocommerce-container,
body.tax-product_cat .ast-woocommerce-container,
body.tax-product_tag .ast-woocommerce-container,
body.woocommerce-shop .ast-woocommerce-container,
body.woocommerce.archive .ast-woocommerce-container {
padding: 40px 20px !important;
max-width: 100% !important;
width: 100% !important;
}
/* ── Force full-width on single product (bridge) pages ──
Same treatment as archive pages — no sidebar squeeze */
body.single-product .ast-container,
body.woocommerce.single-product .ast-container {
display: block !important;
max-width: 1400px !important;
}
body.single-product .content-area,
body.single-product #primary {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
body.single-product #secondary,
body.single-product .widget-area {
display: none !important;
}
body.single-product .ast-woocommerce-container {
padding: 40px 20px !important;
max-width: 100% !important;
width: 100% !important;
}
/* All WC page text should be light */
body.woocommerce .site-main *:not(a):not(button):not(input):not(select):not(.bc-card__cta):not(.bc-card__badge):not(.onsale):not([class*="btn"]),
body.woocommerce-page .site-main *:not(a):not(button):not(input):not(select):not(.bc-card__cta):not(.bc-card__badge):not(.onsale):not([class*="btn"]) {
/* Only set color if not already neon/pink/white */
}
/* ══════════════════════════════════════════════════════════════════════════
G. MISC OVERRIDES
══════════════════════════════════════════════════════════════════════════ */
/* WooCommerce ordering/result bars */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
color: var(--bc-text-2) !important;
}
.woocommerce .woocommerce-ordering select {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
}
/* Astra sidebar */
.ast-separate-container #secondary .widget {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
}
/* WooCommerce messages */
.woocommerce-info,
.woocommerce-message {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border-top-color: var(--bc-neon) !important;
}
/* ── Blog / post pages — force dark ── */
body.single-post,
body.blog,
body.archive,
body.page,
body.search {
background: var(--bc-void) !important;
}
body.single-post .site-content,
body.blog .site-content,
body.archive .site-content,
body.page .site-content,
body.search .site-content,
body.single-post .ast-container,
body.blog .ast-container,
body.archive .ast-container,
body.page .ast-container,
body.page .ast-separate-container .ast-article-post,
body.page .ast-separate-container .site-content > .ast-container {
background: transparent !important;
}
/* ══════════════════════════════════════════════════════════════════════════
H. FOOTER — Force dark
══════════════════════════════════════════════════════════════════════════ */
footer,
footer[style],
.site-footer,
.site-footer[style],
.ast-footer-overlay,
.ast-small-footer,
footer.site-footer,
.ast-footer,
.ast-footer[style],
.ast-above-footer,
.ast-above-footer[style],
.ast-below-footer,
.ast-below-footer[style],
.ast-footer-above-section,
.ast-footer-above-section[style],
.ast-footer-primary-section,
.ast-footer-primary-section[style],
.ast-footer-below-section,
.ast-footer-below-section[style],
.ast-builder-footer-grid-row,
footer .ast-builder-grid-row,
footer .elementor-section,
footer .elementor-section[style] {
background: var(--bc-surface) !important;
border-top: 1px solid var(--bc-border) !important;
}
footer *,
.site-footer *,
.ast-footer * {
color: var(--bc-text-2) !important;
}
footer a,
.site-footer a,
.ast-footer a {
color: var(--bc-neon) !important;
}
footer a:hover,
.site-footer a:hover {
color: #fff !important;
}
/* ══════════════════════════════════════════════════════════════════════════
I. CAROUSEL / SLIDER — Fix product card carousel (Elementor, Swiper, Slick)
══════════════════════════════════════════════════════════════════════════ */
/* ── Carousel container — full width ── */
.elementor-widget-woocommerce-products .swiper,
.elementor-widget-woocommerce-products .swiper-container,
.elementor-widget-wc-products .swiper,
.elementor-widget-wc-products .swiper-container,
.elementor-widget-loop-carousel .swiper,
.elementor-widget-loop-carousel .swiper-container,
.woocommerce-product-slider .swiper,
.products-slider .swiper,
.elementor-widget-woocommerce-product-images .swiper,
[class*="product-slider"] .swiper,
[class*="product-carousel"] .swiper {
overflow: visible !important;
padding: 0 10px !important;
}
/* ── Swiper wrapper — spacing between slides ── */
.elementor-widget-woocommerce-products .swiper-wrapper,
.elementor-widget-wc-products .swiper-wrapper,
.elementor-widget-loop-carousel .swiper-wrapper,
.woocommerce-product-slider .swiper-wrapper,
.products-slider .swiper-wrapper,
[class*="product-slider"] .swiper-wrapper,
[class*="product-carousel"] .swiper-wrapper {
display: flex !important;
gap: 0 !important;
}
/* ── Swiper slides — proper card sizing ── */
.elementor-widget-woocommerce-products .swiper-slide,
.elementor-widget-wc-products .swiper-slide,
.elementor-widget-loop-carousel .swiper-slide,
.woocommerce-product-slider .swiper-slide,
.products-slider .swiper-slide,
[class*="product-slider"] .swiper-slide,
[class*="product-carousel"] .swiper-slide {
min-width: 280px !important;
max-width: 320px !important;
width: 280px !important;
flex-shrink: 0 !important;
margin-right: 20px !important;
}
/* ── Slick carousel — UAEL Products widget fix ── */
/* The UAEL widget uses Slick Slider. Our grid CSS was breaking it.
Slick needs display:block on the parent UL, and manages widths via JS.
We let Slick do its thing but enforce proper slide sizing. */
/* Ensure Slick list takes full container width */
.elementor-widget-uael-woo-products .slick-list,
.uael-woo-products-slider .slick-list,
.slick-slider.products .slick-list {
overflow: hidden !important;
width: 100% !important;
padding: 0 !important;
}
/* Slick track — flex row */
.elementor-widget-uael-woo-products .slick-track,
.uael-woo-products-slider .slick-track,
.slick-slider.products .slick-track {
display: flex !important;
gap: 0 !important;
}
/* Individual slides — proper card widths */
.elementor-widget-uael-woo-products .slick-slide,
.uael-woo-products-slider .slick-slide,
.slick-slider.products .slick-slide {
min-width: 280px !important;
max-width: 320px !important;
width: 280px !important;
margin: 0 12px !important;
flex-shrink: 0 !important;
}
/* Inner wrapper columns definition */
.elementor-widget-uael-woo-products .uael-woo-product__column-4 {
width: 100% !important;
}
/* Generic slick slide fallback */
.slick-slider .slick-slide li.product,
.slick-slider .slick-slide .product {
min-width: 260px !important;
margin: 0 10px !important;
}
.slick-slider .slick-list {
overflow: hidden !important;
}
.slick-slider .slick-track {
display: flex !important;
gap: 0 !important;
}
/* ── Owl carousel slides ── */
.owl-carousel .owl-item li.product,
.owl-carousel .owl-item .product {
min-width: 260px !important;
}
/* ── Product cards INSIDE carousels — dark, properly sized ── */
.swiper-slide li.product,
.swiper-slide .product,
.swiper-slide.product,
.slick-slide li.product,
.slick-slide .product,
.slick-slide.product,
.owl-item li.product,
.owl-item .product,
.elementor-widget-loop-carousel li.product,
.elementor-widget-loop-carousel .e-loop-item {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
min-height: 380px !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── UAEL product wrapper — force dark background (this is the actual white element) ── */
.uael-woo-product-wrapper,
.uael-woo-products-summary-wrap,
.uael-woo-products-thumbnail-wrap,
.elementor-widget-uael-woo-products .uael-woo-product-wrapper,
.elementor-widget-uael-woo-products li.product,
.elementor-widget-uael-woo-products li.product .uael-woo-product-wrapper {
background: var(--bc-surface) !important;
background-color: #0a0a0f !important;
color: var(--bc-text) !important;
}
/* UAEL — force transparent on ALL inner wrappers */
.uael-woo-product-wrapper > *,
.uael-woo-products-summary-wrap > *,
.uael-woo-product-wrapper a,
.uael-woo-product-wrapper .astra-shop-summary-wrap {
background: transparent !important;
background-color: transparent !important;
}
/* UAEL product titles */
.uael-woo-product-wrapper .woocommerce-loop-product__title,
.uael-woo-product-wrapper h2,
.uael-loop-product__link,
.uael-loop-product__link h2 {
color: #fff !important;
background: transparent !important;
}
/* UAEL category labels */
.uael-woo-product-category,
.uael-woo-product-wrapper .uael-woo-product-category {
color: var(--bc-text-dim) !important;
background: transparent !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* UAEL product prices */
.uael-woo-product-wrapper .price,
.uael-woo-product-wrapper .price span,
.uael-woo-product-wrapper .price bdi,
.uael-woo-product-wrapper .price ins {
color: var(--bc-neon) !important;
background: transparent !important;
}
.uael-woo-product-wrapper .price del,
.uael-woo-product-wrapper .price del span {
color: var(--bc-text-dim) !important;
}
/* UAEL product buttons */
.uael-woo-product-wrapper .button,
.uael-woo-product-wrapper a.button,
.uael-woo-products-button-align a.button {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 12px 16px !important;
margin: auto 14px 14px !important;
text-align: center !important;
display: block !important;
width: calc(100% - 28px) !important;
text-decoration: none !important;
}
/* UAEL sale flash — hide default "Sale!" everywhere (we use custom badges) */
.uael-onsale,
.uael-sale-flash-wrap .uael-onsale,
.uael-sale-flash-wrap,
.uael-flash-container,
.slick-slide .onsale,
.slick-slide span.onsale,
.swiper-slide .onsale,
.swiper-slide span.onsale,
.owl-item .onsale,
.elementor-widget-loop-carousel .onsale,
.hfe-product-item .onsale {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════
HFE (Header Footer Elementor) WooCommerce Product Grid — Dark theme
Widget type: hfe-woo-product-grid.default
Uses .hfe-product-item instead of li.product
══════════════════════════════════════════════════════════════════════════ */
/* HFE product cards — dark background */
.hfe-product-item,
.elementor-widget-hfe-woo-product-grid .hfe-product-item,
.hfe-woo-products-grid .hfe-product-item {
background: var(--bc-surface) !important;
background-color: #0a0a0f !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: visible !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.hfe-product-item:hover,
.elementor-widget-hfe-woo-product-grid .hfe-product-item:hover {
border-color: var(--bc-border-hover) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--bc-neon-glow) !important;
}
/* HFE product content area */
.hfe-product-content,
.elementor-widget-hfe-woo-product-grid .hfe-product-content {
background: transparent !important;
padding: 16px 20px !important;
}
/* HFE product titles */
.hfe-product-title,
.hfe-product-title a,
.hfe-product-title h2,
.elementor-widget-hfe-woo-product-grid .hfe-product-title,
.elementor-widget-hfe-woo-product-grid .hfe-product-title a {
color: #fff !important;
background: transparent !important;
font-family: var(--bc-font-body) !important;
font-weight: 600 !important;
}
/* HFE category labels */
.hfe-product-category,
.hfe-product-category a,
.elementor-widget-hfe-woo-product-grid .hfe-product-category,
.elementor-widget-hfe-woo-product-grid .hfe-product-category a {
color: var(--bc-text-dim) !important;
background: transparent !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* HFE product prices */
.hfe-product-price,
.hfe-product-price .price,
.hfe-product-price .price span,
.hfe-product-price .price bdi,
.hfe-product-price .price ins,
.hfe-product-price .amount,
.hfe-product-item .price,
.hfe-product-item .price span,
.hfe-product-item .price bdi,
.elementor-widget-hfe-woo-product-grid .price,
.elementor-widget-hfe-woo-product-grid .price span,
.elementor-widget-hfe-woo-product-grid .price bdi {
color: var(--bc-neon) !important;
background: transparent !important;
font-family: var(--bc-font-display) !important;
font-weight: 700 !important;
}
/* HFE strikethrough prices */
.hfe-product-price .price del,
.hfe-product-price .price del span,
.hfe-product-item .price del,
.hfe-product-item .price del span,
.elementor-widget-hfe-woo-product-grid .price del,
.elementor-widget-hfe-woo-product-grid .price del span {
color: var(--bc-text-dim) !important;
}
/* HFE product buttons — neon green (override blue default) */
.hfe-product-item .button,
.hfe-product-item a.button,
.hfe-product-item .add_to_cart_button,
.hfe-product-item a.product_type_external,
.hfe-product-item a.product_type_simple,
.elementor-widget-hfe-woo-product-grid .button,
.elementor-widget-hfe-woo-product-grid a.button,
.elementor-widget-hfe-woo-product-grid a.product_type_external,
.elementor-widget-hfe-woo-product-grid a.product_type_simple,
.hfe-woo-products-grid .button,
.hfe-woo-products-grid a.button {
background: var(--bc-neon) !important;
background-color: #39FF14 !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 12px 16px !important;
text-align: center !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
}
.hfe-product-item .button:hover,
.hfe-product-item a.button:hover,
.elementor-widget-hfe-woo-product-grid .button:hover,
.elementor-widget-hfe-woo-product-grid a.button:hover {
background: #4dff33 !important;
box-shadow: 0 4px 24px var(--bc-neon-flare) !important;
}
/* HFE product images — white bg for product visibility */
.hfe-product-image img,
.hfe-product-item img,
.elementor-widget-hfe-woo-product-grid img {
background: #fff !important;
padding: 12px !important;
}
/* HFE image area — clip zoom but not badge */
.hfe-product-item .hfe-product-image-wrap,
.hfe-product-item .attachment-woocommerce_thumbnail,
.hfe-product-item > a > img,
.hfe-product-item .woocommerce-loop-product__link img {
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
}
/* HFE sale badges — left-edge ribbon */
.hfe-product-item .onsale,
.elementor-widget-hfe-woo-product-grid .onsale {
background: var(--bc-pink) !important;
color: #fff !important;
font-weight: 800 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
position: absolute !important;
top: 10px !important;
left: 0 !important;
right: auto !important;
padding: 5px 14px 5px 12px !important;
border-radius: 0 var(--bc-radius-full) var(--bc-radius-full) 0 !important;
z-index: 10 !important;
box-shadow: 0 2px 10px var(--bc-pink-glow) !important;
white-space: nowrap !important;
min-width: auto !important;
min-height: auto !important;
line-height: normal !important;
}
/* HFE grid — proper spacing */
.hfe-woo-products-grid,
.elementor-widget-hfe-woo-product-grid .hfe-woo-products-grid {
gap: 24px !important;
}
.swiper-slide li.product:hover,
.swiper-slide .product:hover,
.slick-slide li.product:hover,
.slick-slide .product:hover {
border-color: var(--bc-border-hover) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--bc-neon-glow) !important;
}
/* ── Carousel product images — bigger and visible ── */
.swiper-slide li.product img,
.swiper-slide .product img,
.slick-slide li.product img,
.slick-slide .product img,
.owl-item li.product img,
.owl-item .product img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
background: #fff !important;
padding: 16px !important;
border-bottom: 1px solid var(--bc-border) !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* ── Carousel product titles ── */
.swiper-slide li.product .woocommerce-loop-product__title,
.swiper-slide li.product h2,
.swiper-slide .product .woocommerce-loop-product__title,
.slick-slide li.product .woocommerce-loop-product__title,
.slick-slide .product .woocommerce-loop-product__title {
font-family: var(--bc-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #fff !important;
line-height: 1.4 !important;
padding: 12px 14px 6px !important;
margin: 0 !important;
background: transparent !important;
}
/* ── Carousel product prices ── */
.swiper-slide li.product .price,
.swiper-slide .product .price,
.slick-slide li.product .price,
.slick-slide .product .price {
font-family: var(--bc-font-display) !important;
font-weight: 600 !important;
font-size: 1.3rem !important;
color: var(--bc-neon) !important;
padding: 4px 14px !important;
margin: 0 !important;
background: transparent !important;
}
/* ── Carousel product buttons ── */
.swiper-slide li.product a.button,
.swiper-slide .product a.button,
.slick-slide li.product a.button,
.slick-slide .product a.button {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 12px 16px !important;
margin: auto 14px 14px !important;
text-align: center !important;
display: block !important;
width: calc(100% - 28px) !important;
text-decoration: none !important;
}
.swiper-slide li.product a.button:hover,
.swiper-slide .product a.button:hover {
background: #4dff33 !important;
box-shadow: 0 4px 24px var(--bc-neon-flare) !important;
}
/* ── Carousel wrapper overflow — allow arrows to render outside slider bounds ── */
.elementor-widget-uael-woo-products .uael-woo-products-slider,
.elementor-widget-uael-woo-products .uael-woo-products-inner,
.elementor-widget-uael-woo-products .uael-slick-dotted,
.elementor-widget-uael-woo-products .elementor-widget-container,
div.uael-woo-products-slider,
div.uael-woo-products-inner,
div.uael-slick-dotted.uael-woo-products-inner {
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
}
/* ── Carousel navigation arrows — neon styled ── */
.elementor-widget-woocommerce-products .elementor-swiper-button,
.elementor-widget-wc-products .elementor-swiper-button,
.elementor-widget-loop-carousel .elementor-swiper-button,
.swiper-button-next,
.swiper-button-prev,
.slick-prev,
.slick-next,
[class*="product-slider"] .swiper-button-next,
[class*="product-slider"] .swiper-button-prev,
[class*="product-carousel"] .swiper-button-next,
[class*="product-carousel"] .swiper-button-prev {
background: var(--bc-surface-2) !important;
color: var(--bc-neon) !important;
border: 1px solid var(--bc-border-neon) !important;
border-radius: 50% !important;
width: 44px !important;
height: 44px !important;
opacity: 1 !important;
transition: all 0.15s ease !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
text-indent: 0 !important;
}
/* Arrow icons — inject chevrons via ::before (overrides empty FA content) */
.slick-prev::before,
button.slick-prev::before {
content: "\2039" !important;
font-family: var(--bc-font-display), sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--bc-neon) !important;
line-height: 1 !important;
}
.slick-next::before,
button.slick-next::before {
content: "\203A" !important;
font-family: var(--bc-font-display), sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--bc-neon) !important;
line-height: 1 !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover,
.slick-prev:hover,
.slick-next:hover {
background: var(--bc-neon) !important;
color: #050507 !important;
box-shadow: 0 0 20px var(--bc-neon-flare) !important;
}
.slick-prev:hover::before,
.slick-next:hover::before {
color: #050507 !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 16px !important;
color: inherit !important;
}
/* ── Carousel pagination dots ── */
.swiper-pagination-bullet,
.slick-dots li button {
background: var(--bc-text-dim) !important;
opacity: 0.5 !important;
}
.swiper-pagination-bullet-active,
.slick-dots li.slick-active button {
background: var(--bc-neon) !important;
opacity: 1 !important;
box-shadow: 0 0 8px var(--bc-neon-glow) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
J. SEARCH BAR — High visibility between menu and content
══════════════════════════════════════════════════════════════════════════ */
/* Elementor search widget */
.elementor-widget-search-form .elementor-search-form__container,
.elementor-search-form__container,
.elementor-widget-search-form input[type="search"],
.elementor-search-form input[type="search"],
.elementor-widget-search-form .elementor-search-form__input {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border-neon) !important;
border-radius: var(--bc-radius-full) !important;
padding: 12px 20px !important;
font-family: var(--bc-font-body) !important;
font-size: 15px !important;
min-height: 48px !important;
box-shadow: 0 0 12px rgba(57, 255, 20, 0.08) !important;
}
.elementor-widget-search-form .elementor-search-form__container:focus-within,
.elementor-search-form__container:focus-within {
border-color: var(--bc-neon) !important;
box-shadow: 0 0 20px var(--bc-neon-glow), 0 0 0 3px rgba(57, 255, 20, 0.1) !important;
}
/* Search icon button */
.elementor-widget-search-form .elementor-search-form__submit,
.elementor-search-form__submit,
.elementor-widget-search-form button[type="submit"] {
background: var(--bc-neon) !important;
color: #050507 !important;
border: none !important;
border-radius: 50% !important;
min-width: 40px !important;
min-height: 40px !important;
}
.elementor-widget-search-form .elementor-search-form__submit:hover {
background: #4dff33 !important;
box-shadow: 0 0 12px var(--bc-neon-flare) !important;
}
/* Search submit icon — black on green button */
.elementor-search-form__submit i,
.elementor-search-form__submit svg,
.elementor-search-form__submit svg *,
[class*="search-form"] button[type="submit"] svg,
[class*="search-form"] button[type="submit"] svg *,
[class*="search-form"] button[type="submit"] i {
color: #050507 !important;
fill: #050507 !important;
stroke: #050507 !important;
}
/* Search input icons (non-submit) — white for visibility */
.elementor-widget-search-form .elementor-search-form__icon,
.elementor-search-form__icon {
color: #fff !important;
fill: #fff !important;
}
/* Search placeholder — bright white for max visibility */
.elementor-widget-search-form input::placeholder,
.elementor-search-form__input::placeholder,
.elementor-search-form input::placeholder,
input.elementor-search-form__input::placeholder,
[class*="elementor-widget-search"] input::placeholder,
[class*="search-form"] input::placeholder {
color: #fff !important;
opacity: 1 !important;
}
/* Search input text itself — white */
.elementor-widget-search-form input,
.elementor-search-form__input,
[class*="elementor-widget-search"] input {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Astra native search bar */
.ast-search-box,
.ast-search-box[style],
.ast-header-search,
.ast-search-menu-icon .search-form,
.ast-search-menu-icon .search-field,
.ast-header-search input.search-field {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border-neon) !important;
border-radius: var(--bc-radius-full) !important;
min-height: 44px !important;
}
/* Search submit button — black icon on green bg (global) */
button.search-submit,
.search-form .search-submit,
.ast-search-menu-icon .search-submit,
.ast-header-search .search-submit {
background: var(--bc-neon) !important;
color: #050507 !important;
}
button.search-submit svg,
button.search-submit svg *,
button.search-submit i,
.search-submit .ast-icon,
.search-submit .astra-search-icon,
.search-submit .astra-search-icon svg,
.search-submit .astra-search-icon svg * {
color: #050507 !important;
fill: #050507 !important;
stroke: none !important;
background: transparent !important;
}
/* ══════════════════════════════════════════════════════════════════════════
K. LOGO — Remove white border/background (image-level fix)
══════════════════════════════════════════════════════════════════════════ */
/* Force the logo image to have NO white border/background */
.custom-logo,
.site-logo-img img,
.custom-logo-link img,
.ast-site-identity img,
.site-header img,
header img.custom-logo,
.ast-has-custom-logo img,
#masthead img,
.elementor-widget-theme-site-logo img,
.elementor-widget-image img[src*="bargainscave"],
.elementor-widget-image img[src*="logo"],
.elementor-widget-image img[src*="Bargains"],
.elementor-widget-image img[src*="cave"],
img.custom-logo,
header img {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
outline: none !important;
/* Clip any white padding baked into the image */
border-radius: 12px !important;
}
/* Logo wrapper/container — force transparent all the way up */
.site-logo-img,
.custom-logo-link,
.ast-site-identity,
.ast-has-custom-logo,
.site-branding,
.ast-site-logo-img,
header .elementor-widget-image,
header .elementor-widget-image .elementor-widget-container,
.elementor-widget-theme-site-logo,
.elementor-widget-theme-site-logo .elementor-widget-container,
.ast-builder-layout-element[data-section="title_tagline"],
.site-header .ast-builder-grid-row-container,
.site-header .site-logo-img {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════
L. SUBSCRIPTION FORM — Phone number input & form styling
══════════════════════════════════════════════════════════════════════════ */
/* Phone number input (intl-tel-input plugin, WPForms, etc.) */
input[type="tel"],
.iti__tel-input,
.iti input,
.iti input[type="tel"],
.intl-tel-input input,
.intl-tel-input input[type="tel"],
.wpforms-field-phone input,
.elementor-field-type-tel input,
input[name*="phone"],
input[name*="Phone"],
input[name*="tel"],
input[placeholder*="phone"],
input[placeholder*="Phone"],
input[placeholder*="555"] {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-sm) !important;
font-family: var(--bc-font-body) !important;
}
/* Country flag dropdown for phone */
.iti__flag-container,
.iti__selected-flag,
.intl-tel-input .flag-container,
.intl-tel-input .selected-flag {
background: var(--bc-surface-2) !important;
border-right: 1px solid var(--bc-border) !important;
}
.iti__country-list,
.intl-tel-input .country-list {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
}
.iti__country-list .iti__country:hover,
.intl-tel-input .country-list .country:hover {
background: var(--bc-neon-subtle) !important;
}
.iti__country-name,
.iti__dial-code {
color: var(--bc-text) !important;
}
/* Subscribe button — neon */
.elementor-widget-form button[type="submit"],
.elementor-field-type-submit button,
.elementor-field-type-submit input[type="submit"],
.wpforms-submit,
form [type="submit"],
.mc4wp-form input[type="submit"],
.newsletter-submit {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 14px 32px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.elementor-widget-form button[type="submit"]:hover,
.elementor-field-type-submit button:hover,
.wpforms-submit:hover,
form [type="submit"]:hover {
background: #4dff33 !important;
box-shadow: 0 4px 20px var(--bc-neon-flare) !important;
}
/* Form labels */
.elementor-widget-form label,
.elementor-field-label,
.wpforms-field-label,
form label {
color: var(--bc-text) !important;
font-family: var(--bc-font-body) !important;
}
/* All form inputs in newsletter/subscription sections */
.elementor-widget-form input[type="text"],
.elementor-widget-form input[type="email"],
.elementor-widget-form input[type="tel"],
.elementor-widget-form textarea,
.elementor-widget-form select,
.elementor-field-textual,
.elementor-field {
background: var(--bc-surface-2) !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-sm) !important;
font-family: var(--bc-font-body) !important;
font-size: 14px !important;
}
.elementor-widget-form input::placeholder,
.elementor-field::placeholder {
color: var(--bc-text-dim) !important;
}
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
.bc-text-neon { color: var(--bc-neon); }
.bc-text-pink { color: var(--bc-pink); }
.bc-text-muted { color: var(--bc-text-2); }
.bc-text-dim { color: var(--bc-text-dim); }
.bc-bg-surface { background: var(--bc-surface); }
.bc-bg-surface-2 { background: var(--bc-surface-2); }
.bc-border { border: 1px solid var(--bc-border); }
.bc-border-neon { border: 1px solid var(--bc-border-neon); }
.bc-rounded { border-radius: var(--bc-radius); }
.bc-rounded-lg { border-radius: var(--bc-radius-lg); }
.bc-rounded-full { border-radius: var(--bc-radius-full); }
.bc-container {
max-width: var(--bc-container);
margin: 0 auto;
padding: 0 var(--bc-space-lg);
}
.bc-section {
padding: var(--bc-space-2xl) 0;
}
.bc-section-title {
font-family: var(--bc-font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #fff;
margin-bottom: var(--bc-space-xl);
}
/* ── Neon underline accent for headings ── */
.bc-neon-underline {
position: relative;
display: inline-block;
}
.bc-neon-underline::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 60px;
height: 3px;
background: var(--bc-neon);
border-radius: 2px;
box-shadow: 0 0 10px var(--bc-neon-glow);
}
/* ── Glowing card border on hover ── */
.bc-glow-card {
transition: box-shadow var(--bc-transition);
}
.bc-glow-card:hover {
box-shadow: 0 0 30px var(--bc-neon-glow), 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* ══════════════════════════════════════════════════════════════════════════
GLOBAL CATCH-ALL — Any product card in any widget gets dark theme
These selectors use attribute patterns to catch current AND future widgets.
══════════════════════════════════════════════════════════════════════════ */
/* Any element with "product" in its class inside an Elementor widget */
[class*="elementor-widget"] [class*="product-item"],
[class*="elementor-widget"] [class*="product-card"],
[class*="elementor-widget"] [class*="woo-product"],
[class*="product-grid"] [class*="product-item"],
[class*="product-grid"] [class*="product-card"] {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: hidden !important;
}
/* Any button inside a product widget — neon green */
[class*="elementor-widget"][class*="product"] .button,
[class*="elementor-widget"][class*="product"] a.button,
[class*="elementor-widget"][class*="woo"] .button,
[class*="elementor-widget"][class*="woo"] a.button,
[class*="product-grid"] .button,
[class*="product-grid"] a.button {
background: var(--bc-neon) !important;
background-color: #39FF14 !important;
color: #050507 !important;
border: none !important;
border-radius: var(--bc-radius) !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
text-decoration: none !important;
}
[class*="elementor-widget"][class*="product"] .button:hover,
[class*="elementor-widget"][class*="product"] a.button:hover,
[class*="elementor-widget"][class*="woo"] .button:hover,
[class*="elementor-widget"][class*="woo"] a.button:hover {
background: #4dff33 !important;
box-shadow: 0 4px 24px var(--bc-neon-flare) !important;
}
/* Any price element inside product widgets — neon green */
[class*="elementor-widget"][class*="product"] .price,
[class*="elementor-widget"][class*="product"] .price span,
[class*="elementor-widget"][class*="product"] .price bdi,
[class*="elementor-widget"][class*="woo"] .price,
[class*="elementor-widget"][class*="woo"] .price span,
[class*="elementor-widget"][class*="woo"] .price bdi,
[class*="product-grid"] .price,
[class*="product-grid"] .price span {
color: var(--bc-neon) !important;
background: transparent !important;
}
[class*="elementor-widget"][class*="product"] .price del,
[class*="elementor-widget"][class*="product"] .price del span,
[class*="elementor-widget"][class*="woo"] .price del,
[class*="elementor-widget"][class*="woo"] .price del span {
color: var(--bc-text-dim) !important;
}
/* Any product title inside product widgets — white */
[class*="elementor-widget"][class*="product"] .woocommerce-loop-product__title,
[class*="elementor-widget"][class*="product"] h2,
[class*="elementor-widget"][class*="woo"] .woocommerce-loop-product__title,
[class*="elementor-widget"][class*="woo"] h2,
[class*="product-grid"] .woocommerce-loop-product__title,
[class*="product-grid"] h2 {
color: #fff !important;
background: transparent !important;
}
/* ==========================================================================
RESPONSIVE TWEAKS
========================================================================== */
@media (max-width: 768px) {
:root {
--bc-grid-gap: 14px;
--bc-space-lg: 18px;
--bc-space-xl: 28px;
--bc-space-2xl: 44px;
}
body::before {
background-size: 40px 40px;
}
.bc-category-nav {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: var(--bc-space-sm);
-webkit-overflow-scrolling: touch;
}
.bc-card__body {
padding: 12px;
}
.bc-card__price,
.woocommerce ul.products li.product .price {
font-size: 1.25rem !important;
}
.bc-card__cta {
padding: 12px 16px;
font-size: 13px;
}
.bc-price-table td,
.bc-price-table thead th {
padding: 10px 12px;
font-size: 13px;
}
.bc-section-title {
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.bc-card__price-row {
flex-wrap: wrap;
gap: 6px;
}
.woocommerce div.product .price {
font-size: 1.5rem !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
CONTACT PAGE — BargainsCave Neon Underground
══════════════════════════════════════════════════════════════════════════ */
.bc-contact-page {
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px 80px;
}
/* Hero */
.bc-contact-hero {
text-align: center;
margin-bottom: 60px;
}
.bc-contact-hero__title {
font-family: var(--bc-font-display);
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 700;
color: #fff;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.bc-contact-hero__subtitle {
font-family: var(--bc-font-body);
font-size: 1.1rem;
color: var(--bc-text-dim);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* Grid — cards left, FAQ right */
.bc-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Contact Info Cards */
.bc-contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.bc-contact-card {
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: var(--bc-radius-lg);
padding: 28px 24px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bc-contact-card:hover {
border-color: var(--bc-neon-dim);
box-shadow: 0 0 20px rgba(57, 255, 20, 0.06);
}
.bc-contact-card__icon {
font-size: 1.6rem;
margin-bottom: 10px;
}
.bc-contact-card__title {
font-family: var(--bc-font-display);
font-size: 1.15rem;
font-weight: 600;
color: #fff;
margin: 0 0 8px;
}
.bc-contact-card__text {
font-family: var(--bc-font-body);
font-size: 0.95rem;
color: var(--bc-text-dim);
line-height: 1.65;
margin: 0 0 10px;
}
.bc-contact-card__link {
display: inline-block;
font-family: var(--bc-font-body);
font-size: 0.95rem;
font-weight: 700;
color: var(--bc-neon);
text-decoration: none;
transition: color 0.15s ease;
}
.bc-contact-card__link:hover {
color: #4dff33;
text-decoration: underline;
}
/* FAQ Section */
.bc-contact-faq {
display: flex;
flex-direction: column;
gap: 0;
}
.bc-contact-faq__heading {
font-family: var(--bc-font-display);
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin: 0 0 24px;
}
.bc-contact-faq__item {
border-bottom: 1px solid var(--bc-border);
padding: 20px 0;
}
.bc-contact-faq__item:first-of-type {
border-top: 1px solid var(--bc-border);
}
.bc-contact-faq__question {
font-family: var(--bc-font-body);
font-size: 1rem;
font-weight: 600;
color: #fff;
margin: 0 0 8px;
}
.bc-contact-faq__answer {
font-family: var(--bc-font-body);
font-size: 0.92rem;
color: var(--bc-text-dim);
line-height: 1.7;
margin: 0;
}
.bc-contact-faq__answer a {
color: var(--bc-neon);
text-decoration: none;
}
.bc-contact-faq__answer a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
.bc-contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.bc-contact-page {
padding: 40px 16px 60px;
}
.bc-contact-hero {
margin-bottom: 40px;
}
}
/* ==========================================================================
BLOG POST CARDS — Neon Underground
Targets Elementor Posts widget, Astra blog archive, and generic post cards
========================================================================== */
/* ── Card container ── */
.elementor-posts-container .elementor-post,
.elementor-posts-container article,
.elementor-widget-posts .elementor-post,
.elementor-widget-posts article,
.elementor-posts--skin-classic article,
.elementor-posts--skin-cards article,
.elementor-grid .elementor-post,
.ast-article-post,
article.post,
.blog .hentry,
.archive .hentry {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: hidden !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.elementor-posts-container .elementor-post:hover,
.elementor-widget-posts article:hover,
.elementor-grid .elementor-post:hover,
.ast-article-post:hover,
article.post:hover,
.blog .hentry:hover,
.archive .hentry:hover {
border-color: rgba(57, 255, 20, 0.3) !important;
box-shadow: 0 0 20px rgba(57, 255, 20, 0.06) !important;
}
/* ── Card inner wrapper / text area ── */
.elementor-post__card,
.elementor-post__text,
.elementor-posts-container .elementor-post .elementor-post__text,
.elementor-posts--skin-cards .elementor-post__card {
background: var(--bc-surface) !important;
padding: 20px !important;
}
/* ── Post thumbnail / image ── */
.elementor-post__thumbnail,
.elementor-posts-container .elementor-post__thumbnail {
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
overflow: hidden !important;
height: 200px !important;
}
.elementor-post__thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.3s ease !important;
}
.elementor-post:hover .elementor-post__thumbnail img,
.elementor-grid .elementor-post:hover .elementor-post__thumbnail img {
transform: scale(1.04) !important;
}
/* ── Post title ── */
.elementor-post__title,
.elementor-post__title a,
.elementor-posts-container .elementor-post__title,
.elementor-posts-container .elementor-post__title a,
.elementor-widget-posts .elementor-post__title a {
font-family: var(--bc-font-display) !important;
font-weight: 700 !important;
color: #fff !important;
text-decoration: none !important;
line-height: 1.3 !important;
transition: color 0.2s ease !important;
}
.elementor-post__title a:hover,
.elementor-posts-container .elementor-post__title a:hover,
.elementor-widget-posts .elementor-post__title a:hover {
color: var(--bc-neon) !important;
}
/* ── Post excerpt ── */
.elementor-post__excerpt,
.elementor-post__excerpt p,
.elementor-posts-container .elementor-post__excerpt,
.elementor-posts-container .elementor-post__excerpt p {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* ── Post meta (date, author, comments) ── */
.elementor-post__meta-data,
.elementor-post-date,
.elementor-post-author,
.elementor-post__meta-data span,
.elementor-posts-container .elementor-post__meta-data,
.elementor-posts-container .elementor-post-date,
.elementor-posts-container .elementor-post-author {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-size: 12px !important;
opacity: 0.7 !important;
}
.elementor-post__meta-data a,
.elementor-posts-container .elementor-post__meta-data a {
color: var(--bc-text-2) !important;
text-decoration: none !important;
}
/* ── Meta separator dot ── */
.elementor-post__meta-data .elementor-post-meta-separator {
color: var(--bc-text-2) !important;
}
/* ── "Read More" link → styled like product card CTA ── */
.elementor-post__read-more,
.elementor-posts-container .elementor-post__read-more,
.elementor-widget-posts .elementor-post__read-more,
a.elementor-post__read-more {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 10px 20px !important;
border-radius: var(--bc-radius-full) !important;
text-decoration: none !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
margin-top: 8px !important;
}
.elementor-post__read-more:hover,
.elementor-posts-container .elementor-post__read-more:hover,
a.elementor-post__read-more:hover {
background: #4dff33 !important;
color: #050507 !important;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.35) !important;
text-decoration: none !important;
}
/* ── Badge/category tag on post thumbnail ── */
.elementor-post__badge,
.elementor-posts-container .elementor-post__badge {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 4px 12px !important;
border-radius: var(--bc-radius-full) !important;
}
/* ── Skin: Cards — remove card shadow and fix bg ── */
.elementor-posts--skin-cards .elementor-post__card {
box-shadow: none !important;
}
/* ── Grid gap tuning ── */
.elementor-posts-container.elementor-posts--skin-classic,
.elementor-posts-container.elementor-posts--skin-cards {
gap: 24px !important;
}
/* ── No Comments text ── */
.elementor-post__meta-data .elementor-post-avatar,
.elementor-post-info {
color: var(--bc-text-2) !important;
}
/* ── Astra native blog cards (non-Elementor archive) ── */
body.blog .ast-separate-container .ast-article-post,
body.archive .ast-separate-container .ast-article-post {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
padding: 0 !important;
margin-bottom: 24px !important;
overflow: hidden !important;
}
body.blog .ast-separate-container .ast-article-post .entry-header,
body.archive .ast-separate-container .ast-article-post .entry-header {
padding: 20px 24px 0 !important;
}
body.blog .ast-separate-container .ast-article-post .entry-content,
body.archive .ast-separate-container .ast-article-post .entry-content {
padding: 0 24px !important;
}
body.blog .ast-separate-container .ast-article-post .entry-footer,
body.archive .ast-separate-container .ast-article-post .entry-footer {
padding: 0 24px 20px !important;
}
/* ── Astra "Read More" link ── */
.ast-read-more-container a,
.read-more a,
a.ast-button,
a.more-link {
display: inline-flex !important;
align-items: center !important;
background: var(--bc-neon) !important;
color: #fff !important;
font-family: var(--bc-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 10px 20px !important;
border-radius: var(--bc-radius-full) !important;
text-decoration: none !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.ast-read-more-container a:hover,
.read-more a:hover,
a.ast-button:hover,
a.more-link:hover {
background: #4dff33 !important;
color: #fff !important;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.35) !important;
text-decoration: none !important;
}
/* ── Blog cards responsive ── */
@media (max-width: 768px) {
.elementor-posts-container .elementor-post__text,
.elementor-posts--skin-cards .elementor-post__card {
padding: 16px !important;
}
.elementor-post__read-more,
a.elementor-post__read-more {
padding: 8px 16px !important;
font-size: 12px !important;
}
}
/* ==========================================================================
UAEL POSTS WIDGET — Neon Underground
Overrides UAEL "News" skin featured layout to match Elementor Posts classic
grid: uniform 3-col, image on top, content below — same as Top Deals page.
========================================================================== */
/* ── Override UAEL News "featured" structure → uniform grid ── */
.uael-post-grid,
.uael-posts,
.uael-post_structure-featured {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
flex-direction: unset !important;
}
/* Grid-inner wrapper becomes transparent so its children are grid items */
.uael-post-grid__inner {
display: contents !important;
}
/* ── Card container — all cards uniform (featured card is also a .uael-post-wrapper) ── */
.uael-post-wrapper,
.uael-post-wrapper.uael-post-wrapper-featured {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: hidden !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
display: flex !important;
flex-direction: column !important;
width: auto !important;
max-width: 100% !important;
}
.uael-post-wrapper:hover {
border-color: rgba(57, 255, 20, 0.3) !important;
box-shadow: 0 0 20px rgba(57, 255, 20, 0.06) !important;
}
/* ── Force all inner-wraps vertical (image top, content below) ── */
.uael-post__inner-wrap {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* ── Card inner wrappers — force dark bg ── */
.uael-post__bg-wrap,
.uael-post__inner-wrap,
.uael-post__content-wrap,
.uael-post__content-wrap.uael-post__noimage {
background: var(--bc-surface) !important;
background-color: var(--bc-surface) !important;
}
/* ── Post body / outer wrappers — transparent bg ── */
.uael-post__body,
.elementor-widget-uael-posts .elementor-widget-container,
.uael-post__header,
.uael-post__footer {
background: transparent !important;
background-color: transparent !important;
}
/* ── Post thumbnail — image on top, full width ── */
.uael-post__thumbnail,
.elementor-widget-uael-posts .uael-post__thumbnail {
overflow: hidden !important;
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
flex-shrink: 0 !important;
flex-grow: 1 !important;
width: 100% !important;
max-width: 100% !important;
}
.uael-post__thumbnail a {
display: block !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
min-height: 200px !important;
background-size: cover !important;
background-position: center !important;
transition: transform 0.3s ease !important;
}
.uael-post-wrapper:hover .uael-post__thumbnail a {
transform: scale(1.04) !important;
}
/* ── Content area — force full width (overrides UAEL "image-left" 50% width) ── */
.uael-post__content-wrap {
padding: 20px !important;
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── Post title ── */
.uael-post__title,
.uael-post__title a,
.elementor-widget-uael-posts .uael-post__title,
.elementor-widget-uael-posts .uael-post__title a {
font-family: var(--bc-font-display) !important;
font-weight: 700 !important;
color: #fff !important;
text-decoration: none !important;
line-height: 1.3 !important;
transition: color 0.2s ease !important;
}
.uael-post__title a:hover,
.elementor-widget-uael-posts .uael-post__title a:hover {
color: var(--bc-neon) !important;
}
/* ── Post excerpt ── */
.uael-post__excerpt,
.uael-post__excerpt p {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* ── Post meta (date, comments) ── */
.uael-post__meta-data,
.uael-post__date,
.uael-post__comments,
.uael-post__meta-data span,
.uael-post__meta-data i {
color: var(--bc-text-2) !important;
font-family: var(--bc-font-body) !important;
font-size: 12px !important;
opacity: 0.7 !important;
}
.uael-post__meta-data a {
color: var(--bc-text-2) !important;
text-decoration: none !important;
}
/* ── Category terms / tags — remove gray parent bg, clean green pill ── */
.uael-post__terms-wrap {
margin-bottom: 8px !important;
}
/* Kill the gray background on the parent that causes double-tag effect */
.uael-post__terms,
span.uael-post__terms {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
color: transparent !important;
}
/* Green pill tag — override inline color styles from JS enforcement */
.uael-listing__terms-link,
a.uael-listing__terms-link,
a.uael-listing__terms-link[style] {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
padding: 5px 14px !important;
border-radius: var(--bc-radius-full) !important;
text-decoration: none !important;
display: inline-block !important;
line-height: 1.4 !important;
}
.uael-listing__terms-link:hover,
a.uael-listing__terms-link:hover {
background: #4dff33 !important;
color: #050507 !important;
}
/* ── "Read More" button ── */
.uael-post__read-more,
a.uael-post__read-more,
.elementor-widget-uael-posts .uael-post__read-more,
.elementor-widget-uael-posts a.uael-post__read-more {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 10px 20px !important;
border-radius: var(--bc-radius-full) !important;
text-decoration: none !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
margin-top: auto !important;
}
.uael-post__read-more:hover,
a.uael-post__read-more:hover,
.elementor-widget-uael-posts .uael-post__read-more:hover {
background: #4dff33 !important;
color: #050507 !important;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.35) !important;
text-decoration: none !important;
}
/* ── Read More button icon & text ── */
.uael-post__read-more .elementor-button-content-wrapper {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.uael-post__read-more .elementor-button-icon,
.uael-post__read-more .elementor-button-icon i,
.uael-post__read-more .elementor-button-text {
color: #050507 !important;
}
/* ── UAEL Posts responsive — tablet ── */
@media (max-width: 1100px) {
.uael-post-grid,
.uael-posts,
.uael-post_structure-featured {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── UAEL Posts responsive — mobile ── */
@media (max-width: 768px) {
.uael-post-grid,
.uael-posts,
.uael-post_structure-featured {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.uael-post__content-wrap {
padding: 16px !important;
}
.uael-post__read-more,
a.uael-post__read-more {
padding: 8px 16px !important;
font-size: 12px !important;
}
.uael-post__title,
.uael-post__title a {
font-size: 15px !important;
}
.uael-post__thumbnail a {
min-height: 180px !important;
}
}
/* ==========================================================================
GLOBAL RESPONSIVE — Comprehensive Mobile & Tablet Optimization
========================================================================== */
/* ── Tablet (769px–1100px) ── */
@media (max-width: 1100px) and (min-width: 769px) {
/* Tighten container padding */
.ast-container,
.site-content .ast-container {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Product cards — 3 col */
.woocommerce ul.products,
ul.products {
gap: 16px !important;
}
/* Category nav — scroll on tablet too if many cats */
.bc-category-nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.bc-category-nav::-webkit-scrollbar {
display: none;
}
/* Single product — stack gallery + summary earlier */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
}
}
/* ── Mobile (max-width: 768px) — Major fixes ── */
@media (max-width: 768px) {
/* --- Global spacing --- */
.ast-container,
.site-content .ast-container,
.ast-woocommerce-container {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* --- Header / Nav --- */
.site-header,
.ast-primary-header-bar,
.ast-mobile-header-wrap {
padding: 8px 12px !important;
}
/* Search bar — prevent overflow */
.elementor-search-form__container,
.elementor-widget-search-form {
max-width: 100% !important;
}
.elementor-search-form__container input {
min-width: 0 !important;
width: 100% !important;
}
/* --- Product Grid — single column on mobile phones --- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products,
.woocommerce[class*="columns-"] ul.products,
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-products ul.products {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
}
/* --- Product Card — mobile fixes --- */
.woocommerce ul.products li.product,
li.product,
.bc-deal-card {
min-width: 0 !important;
overflow: visible !important;
background: var(--bc-surface) !important;
}
/* Product images — comfortable size in single-col */
.bc-card__image,
.woocommerce ul.products li.product img,
li.product img {
aspect-ratio: 4 / 3 !important;
padding: 16px !important;
}
/* Card body — proper padding */
.bc-card__body,
.astra-shop-summary-wrap {
padding: 14px 16px !important;
background: transparent !important;
}
/* Card title — readable on mobile */
.bc-card__title,
.bc-card__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title,
li.product h2 {
font-size: 15px !important;
line-height: 1.35 !important;
margin-bottom: 6px !important;
color: #fff !important;
}
/* Store name */
.bc-card__store {
font-size: 11px !important;
margin-bottom: 4px !important;
color: var(--bc-text-dim) !important;
}
/* Price row */
.bc-card__price-row {
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
}
.bc-card__price,
.woocommerce ul.products li.product .price,
li.product .price {
font-size: 1.25rem !important;
white-space: nowrap !important;
color: var(--bc-neon) !important;
}
.bc-card__savings {
font-size: 11px !important;
padding: 2px 8px !important;
}
/* CTA button — full width on mobile for easy tapping */
.bc-card__cta {
padding: 12px 16px !important;
font-size: 13px !important;
text-align: center !important;
justify-content: center !important;
min-height: 44px !important;
background: var(--bc-neon) !important;
color: #050507 !important;
}
/* Sale badge — positioned on card */
.bc-card__badge {
font-size: 11px !important;
padding: 4px 12px 4px 14px !important;
top: 8px !important;
}
/* --- Category Nav — horizontal scroll --- */
.bc-category-nav {
gap: 8px !important;
padding: 0 12px 10px !important;
margin: 0 -12px !important;
width: calc(100% + 24px) !important;
}
.bc-category-pill {
font-size: 12px !important;
padding: 6px 14px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* --- Single Product Page --- */
.woocommerce div.product {
padding: 0 !important;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce div.product div.summary {
padding: 16px 0 !important;
}
.woocommerce div.product .product_title {
font-size: 1.3rem !important;
line-height: 1.3 !important;
}
/* Price highlight box — full width */
.bc-price-highlight {
padding: 16px !important;
}
.bc-price-highlight__amount {
font-size: 1.8rem !important;
}
/* External CTA — full width */
.bc-external-product__cta,
.bc-card__cta.bc-external-product__cta {
display: flex !important;
width: 100% !important;
justify-content: center !important;
padding: 14px 20px !important;
font-size: 14px !important;
min-height: 48px !important;
}
/* Product tabs — stack and simplify */
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0 !important;
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: 10px 14px !important;
font-size: 13px !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
padding: 16px 0 !important;
}
/* Related products heading */
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
font-size: 1.2rem !important;
margin-bottom: 16px !important;
}
/* --- Elementor Homepage Sections --- */
.elementor-section .elementor-container {
padding: 0 12px !important;
}
/* Section headings — smaller on mobile */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
font-size: 1.4rem !important;
line-height: 1.3 !important;
}
/* Elementor product carousel — ensure cards don't overflow */
.elementor-widget-woocommerce-products,
.elementor-widget-wc-products,
.elementor-widget-loop-grid {
overflow: hidden !important;
}
/* --- Newsletter / Form sections --- */
.elementor-widget-form .elementor-field-group {
width: 100% !important;
flex-basis: 100% !important;
margin-bottom: 10px !important;
}
.elementor-widget-form input[type="email"],
.elementor-widget-form input[type="text"],
.elementor-widget-form input[type="tel"] {
width: 100% !important;
min-height: 44px !important;
}
.elementor-widget-form button[type="submit"],
.elementor-widget-form .elementor-button {
width: 100% !important;
min-height: 44px !important;
}
/* --- Footer --- */
footer .elementor-container,
.site-footer .elementor-container {
flex-direction: column !important;
gap: 20px !important;
text-align: center !important;
}
footer .elementor-column,
.site-footer .elementor-column {
width: 100% !important;
}
/* Footer nav — stack */
footer nav,
.site-footer nav {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px 16px !important;
}
/* Affiliate disclosure — smaller text */
.bc-affiliate-disclosure {
font-size: 11px !important;
padding: 16px 12px !important;
line-height: 1.5 !important;
}
}
/* ── Small phone (max-width: 480px) — tighter spacing ── */
@media (max-width: 480px) {
/* Tighter gap */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
gap: 12px !important;
}
/* Slightly smaller titles */
.bc-card__title,
.bc-card__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title {
font-size: 14px !important;
}
/* Single product title */
.woocommerce div.product .product_title {
font-size: 1.15rem !important;
}
/* Smaller container padding */
.ast-container,
.site-content .ast-container {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* ── 404 Page — Dark theme fix ── */
.error404 .page-header,
.error404 .page-content,
.error404 .entry-header,
.error404 .entry-content {
background: transparent !important;
color: var(--bc-text) !important;
}
.error404 .page-header h1,
.error404 h1.page-title {
color: #fff !important;
font-family: var(--bc-font-display) !important;
}
.error404 .page-content p,
.error404 .entry-content p {
color: var(--bc-text-2) !important;
}
/* 404 search form */
.error404 .search-form,
.error404 .wp-block-search {
max-width: 500px !important;
margin: 0 auto !important;
}
.error404 .search-form .search-field,
.error404 .wp-block-search__input {
background: var(--bc-surface) !important;
border: 1px solid var(--bc-border) !important;
color: #fff !important;
border-radius: var(--bc-radius) 0 0 var(--bc-radius) !important;
padding: 12px 16px !important;
min-height: 48px !important;
width: 100% !important;
}
.error404 .search-form .search-submit,
.error404 .wp-block-search__button {
background: var(--bc-neon) !important;
color: #fff !important;
border: none !important;
border-radius: 0 var(--bc-radius) var(--bc-radius) 0 !important;
padding: 12px 20px !important;
font-family: var(--bc-font-body) !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
min-height: 48px !important;
white-space: nowrap !important;
}
.error404 .search-form .search-submit:hover,
.error404 .wp-block-search__button:hover {
background: #4dff33 !important;
}
/* ══════════════════════════════════════════════════════════════════════════
MOBILE PRODUCT CARDS — NUCLEAR FIX
Targets ALL product card rendering methods on mobile:
- Standard WooCommerce ul.products grid
- UAEL (Ultimate Addons for Elementor) product widgets
- Elementor WooCommerce Products widget
- HFE (Header Footer Elementor) product grids
- Slick/Swiper carousel slides
Uses ultra-high specificity to beat UAEL/Elementor inline grid rules.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── GRID: Force single column on EVERY product grid ──
Uses ultra-high specificity to beat Astra dynamic CSS + UAEL.
Astra loads dynamic CSS after the stylesheet, so we need
body.woocommerce .ast-woocommerce-container level specificity. ── */
body ul.products,
body ul.products[class],
body ul.products.columns-1,
body ul.products.columns-2,
body ul.products.columns-3,
body ul.products.columns-4,
body ul.products.columns-5,
body ul.products.columns-6,
body .woocommerce ul.products,
body .woocommerce ul.products[class*="columns"],
body .woocommerce-page ul.products,
/* Astra-specific high-specificity selectors */
body.woocommerce .ast-woocommerce-container ul.products,
body.woocommerce .ast-woocommerce-container ul.products[class*="columns"],
body.woocommerce .bc-shop-archive ul.products,
body.woocommerce-page .ast-woocommerce-container ul.products,
body.woocommerce-page .bc-shop-archive ul.products,
body.tax-product_cat .ast-woocommerce-container ul.products,
body.tax-product_cat .bc-shop-archive ul.products,
body.post-type-archive-product .ast-woocommerce-container ul.products,
body.post-type-archive-product .bc-shop-archive ul.products,
body.archive .ast-woocommerce-container ul.products,
body.archive ul.products,
/* Elementor / UAEL selectors */
body .elementor-widget-woocommerce-products ul.products,
body .elementor-widget-wc-products ul.products,
body .elementor-widget-uael-woo-products ul.products,
body .elementor-widget-uael-woo-products ul.products[class],
body .uael-woo-products ul.products,
body .elementor-widget-loop-grid ul.products,
body .elementor-widget-hfe-woo-product-grid ul.products,
body .hfe-woo-products-grid ul.products,
body.woocommerce ul.products,
body.woocommerce ul.products[class*="columns"],
/* Nuclear: repeat class for max specificity */
body.woocommerce.woocommerce ul.products,
.woocommerce.woocommerce ul.products.columns-4,
.woocommerce.woocommerce ul.products.columns-3,
.woocommerce.woocommerce ul.products.columns-6,
.woocommerce .woocommerce ul.products {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── CARDS: Force full width + dark bg on every product card ── */
body ul.products li.product,
body ul.products > li,
body .woocommerce ul.products li.product,
body .elementor-widget-uael-woo-products li.product,
body .elementor-widget-woocommerce-products li.product,
body .elementor-widget-wc-products li.product,
body .elementor-widget-loop-grid li.product,
body .hfe-woo-products-grid li.product,
body li.product.type-product,
body li.product {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
background: var(--bc-surface) !important;
background-color: #0a0a0f !important;
border: 1px solid var(--bc-border) !important;
border-radius: var(--bc-radius-lg) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* ── UAEL wrapper — dark, full width ── */
body .uael-woo-product-wrapper,
body .elementor-widget-uael-woo-products .uael-woo-product-wrapper {
background: var(--bc-surface) !important;
background-color: #0a0a0f !important;
width: 100% !important;
overflow: hidden !important;
border-radius: var(--bc-radius-lg) !important;
}
/* ── UAEL + standard summary wrap — dark bg ── */
body .uael-woo-products-summary-wrap,
body .astra-shop-summary-wrap,
body li.product .uael-woo-products-summary-wrap,
body li.product .astra-shop-summary-wrap {
background: var(--bc-surface) !important;
background-color: #0a0a0f !important;
padding: 14px 16px !important;
width: 100% !important;
}
/* ── UAEL thumbnail wrap ── */
body .uael-woo-products-thumbnail-wrap,
body li.product .uael-woo-products-thumbnail-wrap {
background: transparent !important;
overflow: hidden !important;
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
}
/* ── Images — proper sizing inside cards ── */
body ul.products li.product img,
body li.product .uael-woo-products-thumbnail-wrap img,
body li.product .woocommerce-LoopProduct-link img,
body li.product > a img,
body li.product img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: contain !important;
background: #fff !important;
padding: 16px !important;
display: block !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* ── UAEL Sale badge — HIDE ── */
body .uael-sale-flash-wrap,
body .uael-flash-container,
body .uael-onsale,
body li.product .uael-sale-flash-wrap,
body li.product .uael-flash-container {
display: none !important;
}
/* ── Category label ── */
body .uael-woo-product-category,
body li.product .uael-woo-product-category {
color: var(--bc-text-dim) !important;
background: transparent !important;
font-size: 11px !important;
font-family: var(--bc-font-body) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin-bottom: 4px !important;
display: block !important;
}
/* ── Product title — readable ── */
body li.product .woocommerce-loop-product__title,
body li.product h2.woocommerce-loop-product__title,
body li.product .uael-loop-product__link h2,
body li.product .uael-loop-product__link,
body li.product .bc-card__title,
body li.product .bc-card__title a,
body li.product h2,
body li.product h3 {
font-family: var(--bc-font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
line-height: 1.35 !important;
margin: 0 0 8px !important;
padding: 0 !important;
background: transparent !important;
text-decoration: none !important;
}
/* ── Price — neon green, readable size ── */
body li.product .price,
body li.product .price span,
body li.product .price bdi,
body li.product .price ins,
body li.product .price ins span,
body li.product .bc-card__price {
font-family: var(--bc-font-display) !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--bc-neon) !important;
background: transparent !important;
line-height: 1.3 !important;
padding: 0 !important;
margin: 0 0 8px !important;
display: inline !important;
}
body li.product .price del,
body li.product .price del span,
body li.product .price del bdi,
body li.product .bc-card__price del,
body li.product .bc-card__price del span,
body li.product .bc-card__price del bdi {
font-size: 0.85rem !important;
color: var(--bc-text-dim) !important;
font-weight: 400 !important;
}
/* ── CTA Button — full width, neon green ── */
body li.product a.button,
body li.product .button,
body li.product a.product_type_external,
body li.product a.add_to_cart_button,
body li.product .bc-card__cta,
body .uael-woo-product-wrapper a.button,
body .uael-woo-product-wrapper .button {
background: var(--bc-neon) !important;
color: #050507 !important;
font-family: var(--bc-font-body) !important;
font-weight: 800 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border: none !important;
border-radius: var(--bc-radius) !important;
padding: 12px 16px !important;
margin: 8px 16px 16px !important;
text-align: center !important;
display: block !important;
width: calc(100% - 32px) !important;
min-height: 44px !important;
text-decoration: none !important;
box-sizing: border-box !important;
line-height: 1.3 !important;
}
body li.product a.button:hover,
body .uael-woo-product-wrapper a.button:hover {
background: #4dff33 !important;
color: #050507 !important;
}
/* ── Card body bc-card__* classes — for our custom template ── */
body li.product .bc-card__body {
padding: 14px 16px !important;
background: transparent !important;
}
body li.product .bc-card__store {
font-size: 11px !important;
color: var(--bc-text-dim) !important;
}
body li.product .bc-card__price-row {
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 8px !important;
}
body li.product .bc-card__savings {
font-size: 11px !important;
padding: 2px 8px !important;
color: var(--bc-savings) !important;
background: var(--bc-savings-bg) !important;
}
body li.product .bc-card__badge {
font-size: 11px !important;
padding: 4px 12px 4px 14px !important;
top: 8px !important;
}
/* ── Star ratings ── */
body li.product .star-rating {
font-size: 11px !important;
padding: 0 !important;
margin: 0 0 4px !important;
}
/* ── HFE product cards ── */
body .hfe-product-item {
width: 100% !important;
background: var(--bc-surface) !important;
}
}
/* ── Touch targets — minimum 44px for all interactive elements on mobile ── */
@media (max-width: 768px) {
a, button, input[type="submit"], .bc-card__cta, .bc-category-pill,
.elementor-button, .bc-external-product__cta {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* ==========================================================================
SPONSORED DEAL PAGE — "BargainsCave x Brand" Premium Landing
========================================================================== */
/* ── Animations ── */
@keyframes bc-glow-pulse {
0%, 100% { box-shadow: 0 0 20px var(--bc-neon-flare), 0 0 60px var(--bc-neon-glow); }
50% { box-shadow: 0 0 30px var(--bc-neon-flare), 0 0 80px rgba(57, 255, 20, 0.25); }
}
@keyframes bc-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes bc-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes bc-badge-glow {
0%, 100% { box-shadow: 0 0 12px var(--bc-pink-flare); }
50% { box-shadow: 0 0 24px var(--bc-pink-flare), 0 0 48px rgba(255, 45, 120, 0.2); }
}
@keyframes bc-stat-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Page wrapper — kill all WP chrome ── */
.bc-sponsored {
background: var(--bc-void);
color: var(--bc-text);
font-family: var(--bc-font-body);
overflow-x: hidden;
/* Pull full width past any Astra container */
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
}
/* Hide Astra breadcrumbs, page title, sidebars on this page */
.page-template-page-sponsored-deal .ast-breadcrumbs-wrapper,
.page-template-page-sponsored-deal .entry-header,
.page-template-page-sponsored-deal #secondary,
.page-template-page-sponsored-deal .ast-page-builder-template .entry-header {
display: none !important;
}
.page-template-page-sponsored-deal .site-content > .ast-container {
max-width: 100% !important;
padding: 0 !important;
}
.page-template-page-sponsored-deal #primary {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── Section 1: Sponsored Bar ── */
.bc-sponsored__bar {
background: rgba(10, 10, 15, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--bc-border-neon);
padding: 10px 0;
position: relative;
z-index: 10;
}
.bc-sponsored__bar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bc-sponsored__bar-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bc-neon);
}
.bc-sponsored__bar-badge svg {
flex-shrink: 0;
}
.bc-sponsored__bar-collab {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
}
.bc-sponsored__bar-brand {
color: #fff;
text-transform: uppercase;
}
.bc-sponsored__bar-x {
color: var(--bc-neon);
font-size: 16px;
}
/* ── Section 2: Hero ── */
.bc-sponsored__hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 24px 60px;
overflow: hidden;
}
.bc-sponsored__hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(57, 255, 20, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(57, 255, 20, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.bc-sponsored__hero-glow {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(57, 255, 20, 0.08) 0%, transparent 70%);
pointer-events: none;
filter: blur(60px);
}
.bc-sponsored__hero-inner {
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 40px;
position: relative;
z-index: 1;
}
/* Hero — Product Image Side */
.bc-sponsored__hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bc-sponsored__hero-product {
max-width: 520px;
width: 100%;
height: auto;
filter: drop-shadow(0 20px 60px rgba(57, 255, 20, 0.15));
animation: bc-float 4s ease-in-out infinite;
}
.bc-sponsored__hero-badge {
position: absolute;
top: 8%;
left: 0;
background: var(--bc-pink);
color: #fff;
font-family: var(--bc-font-body);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 8px 20px 8px 16px;
border-radius: 0 var(--bc-radius-full) var(--bc-radius-full) 0;
animation: bc-badge-glow 2s ease-in-out infinite;
z-index: 2;
}
/* Hero — Content Side */
.bc-sponsored__hero-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.bc-sponsored__hero-collab {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.bc-sponsored__collab-tag {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--bc-neon);
background: var(--bc-neon-subtle);
padding: 6px 14px;
border-radius: var(--bc-radius-full);
border: 1px solid rgba(57, 255, 20, 0.2);
}
.bc-sponsored__collab-tag--dewalt {
color: #FEBD17;
background: rgba(254, 189, 23, 0.08);
border-color: rgba(254, 189, 23, 0.2);
}
.bc-sponsored__collab-x {
color: var(--bc-text-dim);
font-size: 18px;
}
.bc-sponsored__hero-title {
font-family: var(--bc-font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.05;
color: #fff;
margin: 0;
}
.bc-sponsored__hero-title sup {
font-size: 0.45em;
vertical-align: super;
color: var(--bc-text-2);
}
.bc-sponsored__hero-title-accent {
background: linear-gradient(135deg, var(--bc-neon), #7fff5e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bc-sponsored__hero-subtitle {
font-size: 17px;
line-height: 1.65;
color: var(--bc-text-2);
max-width: 560px;
margin: 0 auto;
}
/* Hero — Price Block */
.bc-sponsored__hero-price-block {
background: var(--bc-surface);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--bc-radius-lg);
padding: 20px 24px;
}
.bc-sponsored__hero-price-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.bc-sponsored__hero-price {
font-family: var(--bc-font-display);
font-size: 3rem;
font-weight: 700;
color: var(--bc-neon);
line-height: 1;
}
.bc-sponsored__hero-price-was {
font-size: 1.1rem;
color: var(--bc-text-dim);
}
.bc-sponsored__hero-price-was del {
text-decoration: line-through;
}
.bc-sponsored__hero-savings {
font-size: 13px;
font-weight: 800;
color: var(--bc-pink);
background: var(--bc-pink-glow);
padding: 5px 12px;
border-radius: var(--bc-radius-full);
letter-spacing: 0.04em;
}
.bc-sponsored__hero-price-note {
font-size: 13px;
color: var(--bc-text-dim);
margin: 8px 0 0;
}
/* ── CTA Button (reused) ── */
.bc-sponsored__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--bc-neon);
color: #050507;
font-family: var(--bc-font-body);
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 16px 36px;
border-radius: var(--bc-radius);
text-decoration: none;
transition: all var(--bc-transition);
animation: bc-glow-pulse 2.5s ease-in-out infinite;
cursor: pointer;
border: none;
}
.bc-sponsored__cta:hover {
background: #4dff33;
color: #050507;
transform: translateY(-2px);
text-decoration: none;
}
.bc-sponsored__cta--large {
font-size: 17px;
padding: 20px 48px;
border-radius: var(--bc-radius-lg);
}
.bc-sponsored__cta svg {
flex-shrink: 0;
transition: transform var(--bc-transition);
}
.bc-sponsored__cta:hover svg {
transform: translateX(4px);
}
/* ── Section 3: Stats Bar ── */
.bc-sponsored__stats {
background: var(--bc-surface);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 48px 24px;
}
.bc-sponsored__stats-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.bc-sponsored__stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
animation: bc-stat-in 0.6s ease both;
}
.bc-sponsored__stat:nth-child(1) { animation-delay: 0s; }
.bc-sponsored__stat:nth-child(3) { animation-delay: 0.1s; }
.bc-sponsored__stat:nth-child(5) { animation-delay: 0.2s; }
.bc-sponsored__stat:nth-child(7) { animation-delay: 0.3s; }
.bc-sponsored__stat:nth-child(9) { animation-delay: 0.4s; }
.bc-sponsored__stat-number {
font-family: var(--bc-font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 700;
color: var(--bc-neon);
line-height: 1;
text-shadow: 0 0 20px var(--bc-neon-glow);
}
.bc-sponsored__stat-unit {
font-family: var(--bc-font-body);
font-size: 14px;
font-weight: 700;
color: var(--bc-text-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.bc-sponsored__stat-label {
font-size: 12px;
color: var(--bc-text-dim);
margin-top: 4px;
}
.bc-sponsored__stat-divider {
width: 1px;
height: 48px;
background: rgba(255, 255, 255, 0.18);
flex-shrink: 0;
}
/* ── Section 4: Feature Cards ── */
.bc-sponsored__features {
padding: 80px 24px;
background: var(--bc-void);
}
.bc-sponsored__features-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.bc-sponsored__feature-card {
background: var(--bc-surface);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--bc-radius-lg);
padding: 36px 28px;
transition: all var(--bc-transition-slow);
position: relative;
overflow: hidden;
}
.bc-sponsored__feature-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--bc-radius-lg);
border: 1px solid transparent;
transition: border-color var(--bc-transition-slow);
pointer-events: none;
}
.bc-sponsored__feature-card:hover {
border-color: var(--bc-border-neon);
box-shadow: 0 0 30px var(--bc-neon-glow), var(--bc-shadow);
transform: translateY(-4px);
}
.bc-sponsored__feature-icon {
width: 64px;
height: 64px;
border-radius: var(--bc-radius);
background: var(--bc-neon-subtle);
border: 1px solid rgba(57, 255, 20, 0.12);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.bc-sponsored__feature-title {
font-family: var(--bc-font-display);
font-size: 1.15rem;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.bc-sponsored__feature-text {
font-size: 14.5px;
line-height: 1.7;
color: var(--bc-text-2);
margin: 0;
}
/* ── Section 5: Deep Dive ── */
.bc-sponsored__deep-dive {
padding: 80px 24px;
background: var(--bc-surface);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.bc-sponsored__deep-dive-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
}
.bc-sponsored__section-title {
font-family: var(--bc-font-display);
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin: 0 0 24px;
}
/* Specs table */
.bc-sponsored__specs-table {
width: 100%;
border-collapse: collapse;
}
.bc-sponsored__specs-table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bc-sponsored__specs-table td {
padding: 14px 0;
font-size: 14.5px;
vertical-align: middle;
}
.bc-sponsored__spec-label {
color: var(--bc-text-2);
width: 45%;
}
.bc-sponsored__spec-value {
color: var(--bc-text);
font-weight: 500;
}
.bc-sponsored__spec-value--highlight {
color: var(--bc-neon);
font-weight: 700;
}
/* What's in the Box */
.bc-sponsored__inbox-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.bc-sponsored__inbox-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: var(--bc-text);
padding: 14px 18px;
background: var(--bc-surface-2);
border-radius: var(--bc-radius);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.bc-sponsored__inbox-item svg {
flex-shrink: 0;
}
/* Tech blurb */
.bc-sponsored__tech-blurb {
margin-top: 32px;
padding: 24px;
background: var(--bc-neon-subtle);
border: 1px solid rgba(57, 255, 20, 0.12);
border-radius: var(--bc-radius-lg);
}
.bc-sponsored__tech-title {
font-family: var(--bc-font-display);
font-size: 1rem;
font-weight: 700;
color: var(--bc-neon);
margin: 0 0 8px;
}
.bc-sponsored__tech-text {
font-size: 14px;
line-height: 1.7;
color: var(--bc-text-2);
margin: 0;
}
/* ── Section 6: The Closer ── */
.bc-sponsored__closer {
position: relative;
padding: 100px 24px;
background: linear-gradient(180deg, var(--bc-void), rgba(57, 255, 20, 0.03) 80%, var(--bc-void));
text-align: center;
overflow: hidden;
}
.bc-sponsored__closer-glow {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background: radial-gradient(ellipse, rgba(57, 255, 20, 0.06) 0%, transparent 70%);
pointer-events: none;
filter: blur(40px);
}
.bc-sponsored__closer-inner {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.bc-sponsored__closer-eyebrow {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bc-pink);
margin: 0;
background: linear-gradient(90deg, var(--bc-pink), #ff6ea8, var(--bc-pink));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: bc-shimmer 3s linear infinite;
}
.bc-sponsored__closer-title {
font-family: var(--bc-font-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.15;
}
.bc-sponsored__closer-price-block {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.bc-sponsored__closer-price {
font-family: var(--bc-font-display);
font-size: 3.5rem;
font-weight: 700;
color: var(--bc-neon);
line-height: 1;
text-shadow: 0 0 30px var(--bc-neon-glow);
}
.bc-sponsored__closer-was {
font-size: 1.2rem;
color: var(--bc-text-dim);
}
.bc-sponsored__closer-savings {
font-size: 14px;
font-weight: 800;
color: var(--bc-pink);
background: var(--bc-pink-glow);
padding: 6px 14px;
border-radius: var(--bc-radius-full);
letter-spacing: 0.04em;
}
/* Trust badges row */
.bc-sponsored__trust-row {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
margin-top: 16px;
flex-wrap: wrap;
}
.bc-sponsored__trust-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--bc-text-2);
}
.bc-sponsored__trust-badge svg {
flex-shrink: 0;
}
/* ── Section 7: Footer Disclosure ── */
.bc-sponsored__disclosure {
max-width: 800px;
margin: 0 auto;
padding: 40px 24px;
text-align: center;
}
.bc-sponsored__disclosure p {
font-size: 12px;
line-height: 1.7;
color: var(--bc-text-dim);
margin: 0 0 12px;
}
.bc-sponsored__disclosure strong {
color: var(--bc-text-2);
}
.bc-sponsored__disclosure-powered {
font-size: 13px;
color: var(--bc-text-2);
margin-top: 16px;
}
/* ══════════════════════════════════════════════════════════════════════════
SPONSORED DEAL PAGE — RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
/* ── Tablet (max-width: 1100px) ── */
@media (max-width: 1100px) {
.bc-sponsored__hero-product {
max-width: 400px;
}
.bc-sponsored__features-inner {
grid-template-columns: 1fr;
max-width: 480px;
}
.bc-sponsored__deep-dive-inner {
grid-template-columns: 1fr;
}
.bc-sponsored__stats-inner {
flex-wrap: wrap;
justify-content: center;
gap: 20px 32px;
}
.bc-sponsored__stat-divider {
display: none;
}
}
/* ── Mobile (max-width: 768px) ── */
@media (max-width: 768px) {
.bc-sponsored__hero {
min-height: auto;
padding: 40px 16px 48px;
}
.bc-sponsored__hero-title {
font-size: 2rem;
}
.bc-sponsored__hero-product {
max-width: 300px;
}
.bc-sponsored__hero-price {
font-size: 2.2rem;
}
.bc-sponsored__hero-collab {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.bc-sponsored__cta {
width: 100%;
padding: 16px 24px;
font-size: 14px;
}
.bc-sponsored__cta--large {
padding: 18px 24px;
font-size: 15px;
}
.bc-sponsored__stats {
padding: 32px 16px;
}
.bc-sponsored__stats-inner {
gap: 16px 24px;
}
.bc-sponsored__stat-number {
font-size: 1.8rem;
}
.bc-sponsored__features {
padding: 48px 16px;
}
.bc-sponsored__feature-card {
padding: 28px 22px;
}
.bc-sponsored__deep-dive {
padding: 48px 16px;
}
.bc-sponsored__closer {
padding: 60px 16px;
}
.bc-sponsored__closer-price {
font-size: 2.5rem;
}
.bc-sponsored__trust-row {
gap: 16px;
flex-direction: column;
}
.bc-sponsored__bar-inner {
flex-direction: column;
gap: 6px;
text-align: center;
}
}
/* ── Small phone (max-width: 480px) ── */
@media (max-width: 480px) {
.bc-sponsored__hero-title {
font-size: 1.6rem;
}
.bc-sponsored__hero-product {
max-width: 240px;
}
.bc-sponsored__hero-price {
font-size: 1.8rem;
}
.bc-sponsored__hero-price-block {
padding: 16px;
}
.bc-sponsored__stat-number {
font-size: 1.5rem;
}
.bc-sponsored__stats-inner {
gap: 12px 20px;
}
.bc-sponsored__closer-price {
font-size: 2rem;
}
.bc-sponsored__closer-title {
font-size: 1.4rem;
}
.bc-sponsored__specs-table td {
font-size: 13px;
padding: 10px 0;
}
}
/* ── Print safety — hide non-essential elements ── */
@media print {
.bc-announcement-bar,
.bc-category-nav,
.site-header,
.site-footer,
.bc-affiliate-disclosure {
display: none !important;
}
}