/* ============================================================
COSMIC STORE PRO — Premium Full-Width CSS v3.0
Exact palette from NumerologyGenie.com
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');
/* ── VARIABLES ── */
:root {
--pur: #7b2ff7;
--pur-l: #9a5cff;
--pur-m: #9d4edd;
--lav: #c77dff;
--lav-l: #e0b0ff;
--pink: #f107a3;
--gold: #f5a623;
--gold-l: #fbbf24;
--bg: #07011a;
--bg-d: #040010;
--bg-c: rgba(255,255,255,0.04);
--bg-c2: rgba(255,255,255,0.07);
--rim: rgba(123,47,247,0.2);
--rim-g: rgba(245,166,35,0.25);
--t: #fff;
--t2: #c9b8e8;
--t3: #8a7aaa;
--grad: linear-gradient(135deg,#7b2ff7,#f107a3);
--grad-g: linear-gradient(135deg,#f5a623,#fbbf24);
--tr: 0.28s ease;
--r: 16px;
--rr: 24px;
}
/* ── FULL-WIDTH RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* CRITICAL: force dark background on everything */
html,
body,
#page,
#content,
.site,
.site-content,
.site-main,
#main,
.content-area,
#primary,
.woocommerce,
.woocommerce-page,
.wp-site-blocks {
background-color: #07011a !important;
background: #07011a !important;
color: #fff !important;
min-height: 100vh;
}
body {
font-family: 'DM Sans', sans-serif !important;
background-color: #07011a !important;
background:
radial-gradient(ellipse 80% 60% at 15% -10%, rgba(123,47,247,0.22) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 85% 110%, rgba(241,7,163,0.12) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(123,47,247,0.04) 0%, transparent 70%),
#07011a !important;
color: #fff !important;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Remove WordPress content wrappers that add white boxes */
.entry-content,
.page-content,
.post-thumbnail,
div.woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
background: transparent !important;
background-color: transparent !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lav); text-decoration: none; transition: color var(--tr); }
a:hover { color: #fff; }
ul { list-style: none; }
p { line-height: 1.75; color: var(--t2); }
h1,h2,h3,h4,h5,h6 { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.15; color: #fff; }
/* ── LAYOUT ── */
.csp-outer { width: 100%; }
.csp-w { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.csp-ws { max-width: 960px; margin: 0 auto; padding: 0 40px; }
@media(max-width:768px) { .csp-w, .csp-ws { padding: 0 20px; } }
/* ── BUTTONS ── */
.btn, .csp-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 30px; border-radius: 50px; font-size: 0.88rem;
font-weight: 600; font-family: 'DM Sans', sans-serif;
cursor: pointer; border: none; text-decoration: none;
transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
letter-spacing: 0.02em;
}
.btn-p, .csp-btn-p {
background: var(--grad); color: #fff;
box-shadow: 0 0 24px rgba(123,47,247,0.4);
}
.btn-p:hover, .csp-btn-p:hover {
transform: translateY(-2px); color: #fff;
box-shadow: 0 6px 36px rgba(241,7,163,0.55);
}
.btn-g, .csp-btn-g {
background: var(--grad-g); color: #07011a;
box-shadow: 0 0 24px rgba(245,166,35,0.35);
}
.btn-g:hover, .csp-btn-g:hover {
transform: translateY(-2px); color: #07011a;
box-shadow: 0 6px 36px rgba(245,166,35,0.6);
}
.btn-o, .csp-btn-o {
background: transparent; color: var(--lav);
border: 1px solid rgba(123,47,247,0.4);
}
.btn-o:hover, .csp-btn-o:hover {
background: rgba(123,47,247,0.12); color: #fff;
border-color: rgba(123,47,247,0.7);
}
.btn-w, .csp-btn-w {
background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);
}
.btn-w:hover, .csp-btn-w:hover { background: rgba(255,255,255,0.13); color: #fff; }
/* WooCommerce button override */
/* ── WooCommerce buttons — base reset ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(123,47,247,0.15) !important;
color: var(--lav) !important;
border: 1px solid rgba(123,47,247,0.35) !important;
border-radius: 10px !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
padding: 8px 16px !important;
letter-spacing: 0.02em !important;
transition: background 0.22s, color 0.22s, border-color 0.22s !important;
box-shadow: none !important;
text-decoration: none !important;
white-space: nowrap !important;
cursor: pointer !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: rgba(123,47,247,0.3) !important;
color: #fff !important;
border-color: rgba(123,47,247,0.6) !important;
box-shadow: none !important;
transform: none !important;
}
/* ── Loop card ATC — compact inline button ── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
display: inline-flex !important;
align-items: center !important;
background: rgba(123,47,247,0.15) !important;
color: var(--lav) !important;
border: 1px solid rgba(123,47,247,0.35) !important;
border-radius: 10px !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
padding: 8px 14px !important;
white-space: nowrap !important;
box-shadow: none !important;
text-align: center !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
float: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
background: rgba(123,47,247,0.3) !important;
color: #fff !important;
border-color: rgba(123,47,247,0.6) !important;
box-shadow: none !important;
transform: none !important;
}
/* ── Single product ATC button — full styled ── */
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
flex: 1 !important;
background: var(--grad) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 14px 24px !important;
font-size: 1rem !important;
font-weight: 700 !important;
font-family: 'DM Sans', sans-serif !important;
box-shadow: 0 0 24px rgba(123,47,247,0.35) !important;
transition: transform 0.25s, box-shadow 0.25s !important;
white-space: nowrap !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
}
.woocommerce .single_add_to_cart_button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 32px rgba(241,7,163,0.45) !important;
background: var(--grad) !important;
color: #fff !important;
}
/* ── Cart page buttons ── */
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .checkout-button,
.woocommerce #place_order {
background: var(--grad) !important;
color: #fff !important;
border: none !important;
border-radius: 50px !important;
padding: 13px 30px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
box-shadow: 0 0 24px rgba(123,47,247,0.35) !important;
}
.woocommerce .cart .button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 32px rgba(241,7,163,0.45) !important;
background: var(--grad) !important;
color: #fff !important;
}
/* Badges */
.badge {
display: inline-block; font-size: 0.65rem; font-weight: 700;
letter-spacing: 0.8px; text-transform: uppercase;
border-radius: 20px; padding: 3px 10px;
}
.badge-p { background: rgba(123,47,247,0.18); border: 1px solid rgba(123,47,247,0.35); color: var(--lav); }
.badge-g { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3); color: var(--gold); }
.badge-pk { background: rgba(241,7,163,0.12); border: 1px solid rgba(241,7,163,0.3); color: #f472b6; }
.badge-gr { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); color: #4ade80; }
.badge-r { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
/* ============================================================
HEADER
============================================================ */
.csp-hdr {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; height: 72px;
padding: 0 40px; gap: 28px;
background: rgba(7,1,26,0.7);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(123,47,247,0.12);
transition: height var(--tr), background var(--tr), border-color var(--tr);
}
.csp-hdr.scrolled {
height: 60px;
background: rgba(7,1,26,0.95);
border-bottom-color: rgba(123,47,247,0.2);
box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.csp-logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex-shrink: 0;
}
.csp-logo-gem { font-size: 1.9rem; filter: drop-shadow(0 0 12px rgba(123,47,247,0.7)); }
.csp-logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.75rem; font-weight: 600; letter-spacing: -0.3px;
background: linear-gradient(120deg,#fff 20%,var(--lav) 60%,var(--pink));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
line-height: 1;
}
.csp-logo-ext {
font-family: 'DM Sans', sans-serif; font-size: 0.7rem;
font-weight: 600; color: var(--t3); letter-spacing: 1.5px;
margin-left: -4px; padding: 2px 7px;
border: 1px solid rgba(255,255,255,0.12); border-radius: 5px;
text-transform: uppercase;
}
.csp-nav {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px;
}
.csp-nav a {
padding: 7px 14px; border-radius: 8px;
font-size: 1.15rem; font-weight: 500; color: var(--t3);
transition: var(--tr);
}
.csp-nav a:hover, .csp-nav a.active { color: #fff; background: rgba(123,47,247,0.1); }
.csp-hdr-right {
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.csp-search {
position: relative;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px; overflow: hidden;
transition: border-color var(--tr), width var(--tr);
width: 180px; flex-shrink: 0;
}
.csp-search:focus-within { border-color: rgba(123,47,247,0.5); width: 220px; }
.csp-search input[type="search"],
.csp-search input[type="text"] {
background: transparent !important; border: none !important; outline: none !important;
color: #fff !important; font-family: 'DM Sans', sans-serif !important;
font-size: 0.82rem !important; padding: 8px 14px 8px 34px !important;
width: 100% !important; box-shadow: none !important;
border-radius: 0 !important; height: auto !important;
}
.csp-search input::placeholder { color: var(--t3) !important; }
/* Hide the WP default search submit button inside our form */
.csp-search input[type="submit"],
.csp-search button[type="submit"] {
display: none !important;
}
.csp-search-icon {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--t3); font-size: 0.82rem; pointer-events: none;
}
.csp-cart {
position: relative; width: 40px; height: 40px; border-radius: 12px;
background: rgba(123,47,247,0.1); border: 1px solid rgba(123,47,247,0.25);
display: flex; align-items: center; justify-content: center;
color: var(--lav); font-size: 1rem; transition: var(--tr);
text-decoration: none; flex-shrink: 0;
}
.csp-cart:hover { background: rgba(123,47,247,0.22); color: #fff; }
.csp-cart-n {
position: absolute; top: -5px; right: -5px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--pink); color: #fff; font-size: 0.6rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg);
}
.csp-ham {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 10px 6px;
touch-action: manipulation; /* prevents 300ms delay on iOS */
-webkit-tap-highlight-color: transparent;
min-width: 44px; min-height: 44px; /* iOS minimum tap target */
align-items: center; justify-content: center;
}
.csp-ham span {
display: block; width: 22px; height: 2px;
background: #fff; border-radius: 2px; transition: var(--tr);
}
.csp-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.csp-ham.open span:nth-child(2) { opacity: 0; }
.csp-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Drawer */
.csp-drawer {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: linear-gradient(180deg, #0d0020 0%, #04000e 100%);
border-right: 1px solid rgba(123,47,247,0.22);
z-index: 99999;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden; /* drawer itself does NOT scroll */
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
box-shadow: 8px 0 60px rgba(0,0,0,0.8);
will-change: transform;
visibility: hidden;
}
.csp-drawer::-webkit-scrollbar { display: none; }
.csp-drawer.open { transform: translateX(0); visibility: visible; }
/* Drawer header area */
.csp-drawer-head {
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
margin-top: 0;
}
/* Account for WP admin bar when logged in */
.admin-bar .csp-drawer { top: 32px; height: calc(100vh - 32px); }
/* iOS safe area for drawer */
@supports(padding: env(safe-area-inset-bottom)){
.csp-drawer { height: calc(100vh + env(safe-area-inset-bottom)); }
}
@media (max-width: 782px) {
.admin-bar .csp-drawer { top: 46px; height: calc(100vh - 46px); }
}
.csp-drawer-nav {
flex: 1;
padding: 8px 12px;
overflow-y: auto; /* only nav scrolls if many items */
overflow-x: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.csp-drawer-nav::-webkit-scrollbar { display: none; }
/* Ensure space for footer buttons */
.csp-drawer-nav { padding-bottom: 8px !important; }
.csp-drawer-nav a {
display: flex; align-items: center; gap: 10px;
padding: 12px 10px; border-radius: 12px;
color: var(--t2); font-size: 0.88rem; font-weight: 500;
transition: var(--tr);
}
.csp-drawer-nav a:hover, .csp-drawer-nav a.active {
background: rgba(123,47,247,0.14); color: #fff; padding-left: 16px;
}
.csp-drawer-foot {
padding: 12px 14px 20px;
/* Extra bottom padding for iOS home indicator safe area */
padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
border-top: 1px solid rgba(123,47,247,0.18);
flex-shrink: 0;
background: rgba(7,1,26,0.8);
display: flex;
flex-direction: column;
gap: 8px;
}
.csp-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.72); backdrop-filter: blur(5px);
z-index: 99998; /* just below drawer */
}
.csp-overlay.open { display: block; }
/* Promo bar */
.csp-promo {
background: linear-gradient(90deg,rgba(123,47,247,0.15),rgba(241,7,163,0.1),rgba(123,47,247,0.15));
border-bottom: 1px solid rgba(123,47,247,0.18);
padding: 11px 40px; text-align: center; font-size: 0.78rem; color: var(--t2);
display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.csp-promo strong { color: #fff; }
.csp-promo a { color: var(--gold); font-weight: 600; }
.csp-promo a:hover { color: #fff; }
/* ── Page offset for fixed header ── */
body { padding-top: 72px; }
/* ============================================================
HERO — FULL BLEED
============================================================ */
.csp-hero {
position: relative; min-height: calc(100vh - 72px);
display: flex; align-items: center;
overflow: hidden; isolation: isolate;
}
/* Animated background mesh */
.csp-hero::before {
content: '';
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 100% 80% at 70% 30%, rgba(123,47,247,0.28) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 10% 80%, rgba(245,166,35,0.12) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at 30% 10%, rgba(241,7,163,0.1) 0%, transparent 50%);
animation: hero-breathe 8s ease-in-out infinite alternate;
}
@keyframes hero-breathe {
from { opacity: 0.7; transform: scale(1); }
to { opacity: 1; transform: scale(1.04); }
}
/* Star field */
.csp-hero::after {
content: '';
position: absolute; inset: 0; z-index: 0;
background-image:
radial-gradient(1px 1px at 20% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(2px 2px at 65% 40%, rgba(199,125,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 10% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(2px 2px at 90% 80%, rgba(245,166,35,0.4) 0%, transparent 100%);
}
.csp-hero-inner {
position: relative; z-index: 1;
width: 100%; max-width: 1280px; margin: 0 auto;
padding: 80px 40px; display: grid;
grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.csp-hero-left {}
.csp-hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.28);
border-radius: 40px; padding: 6px 16px 6px 8px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.csp-hero-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
box-shadow: 0 0 10px var(--gold);
animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.6} }
.csp-hero-h1 {
font-size: clamp(42px, 5.5vw, 76px); font-weight: 300; color: #fff;
line-height: 1.05; margin-bottom: 20px;
}
.csp-hero-h1 em {
font-style: italic; display: block;
background: linear-gradient(120deg, var(--gold) 0%, var(--lav) 50%, var(--pink) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.csp-hero-sub {
font-size: 1.05rem; color: var(--t2); line-height: 1.7;
max-width: 480px; margin-bottom: 36px;
}
.csp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.csp-hero-trust {
display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.75rem; color: var(--t3);
}
.csp-hero-trust-item { display: flex; align-items: center; gap: 5px; }
.csp-hero-trust-item strong { color: var(--t2); }
/* Hero right — floating cards */
.csp-hero-right {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px; position: relative;
}
.csp-hero-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px; padding: 20px 18px;
backdrop-filter: blur(16px);
transition: transform var(--tr), border-color var(--tr);
cursor: pointer;
}
.csp-hero-card:hover { transform: translateY(-4px); border-color: rgba(123,47,247,0.4); }
.csp-hero-card-icon { font-size: 1.8rem; margin-bottom: 10px; }
.csp-hero-card-name { font-size: 0.82rem; font-weight: 600; color: #fff; margin-bottom: 3px; }
.csp-hero-card-sub { font-size: 0.7rem; color: var(--t3); }
.csp-hero-card-price { font-size: 0.92rem; font-weight: 700; color: var(--gold); margin-top: 8px; }
.csp-hero-card-large {
grid-column: span 2;
background: linear-gradient(135deg,rgba(123,47,247,0.2),rgba(241,7,163,0.1));
border-color: rgba(123,47,247,0.3);
}
/* Floating badge */
.csp-hero-float {
position: absolute; top: -18px; right: -18px;
background: var(--grad-g); color: #07011a;
border-radius: 50%; width: 72px; height: 72px;
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem; font-weight: 800; text-align: center; line-height: 1.3;
box-shadow: 0 0 32px rgba(245,166,35,0.5);
animation: csp-spin-slow 12s linear infinite;
z-index: 2;
}
@keyframes csp-spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* Scroll hint */
.csp-scroll-hint {
position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
font-size: 0.68rem; color: var(--t3); letter-spacing: 2px; text-transform: uppercase;
animation: bounce 2.5s ease-in-out infinite; z-index: 2;
}
.csp-scroll-arrow {
width: 20px; height: 30px; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 10px;
position: relative; overflow: hidden;
}
.csp-scroll-arrow::after {
content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
width: 4px; height: 8px; background: var(--lav); border-radius: 2px;
animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot { 0%{top:4px;opacity:1} 80%{top:16px;opacity:0} 100%{top:4px;opacity:0} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
/* ── TICKER ── */
.csp-ticker {
background: rgba(255,255,255,0.03);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 16px 0; overflow: hidden;
}
.csp-ticker-track {
display: flex; gap: 0; width: max-content;
animation: ticker 35s linear infinite;
}
.csp-ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.csp-ticker-item {
display: flex; align-items: center; gap: 10px;
padding: 0 28px; font-size: 0.78rem; color: var(--t3);
border-right: 1px solid rgba(255,255,255,0.06); white-space: nowrap;
}
.csp-ticker-item-icon { font-size: 0.9rem; }
.csp-ticker-sep { color: var(--gold); opacity: 0.5; font-size: 0.6rem; }
/* ============================================================
SECTIONS
============================================================ */
.csp-sec { padding: 90px 0; }
.csp-sec-sm { padding: 60px 0; }
.csp-sec-alt {
background:
linear-gradient(180deg, rgba(123,47,247,0.04) 0%, transparent 100%);
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.csp-eyebrow {
font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.csp-eyebrow::before, .csp-eyebrow::after {
content: ''; height: 1px; width: 32px; background: rgba(245,166,35,0.35);
}
.csp-h2 {
font-size: clamp(30px, 4vw, 52px); text-align: center;
color: #fff; margin-bottom: 14px; font-weight: 400;
}
.csp-h2 em {
font-style: italic;
background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.csp-lead {
font-size: 0.95rem; color: var(--t2); text-align: center;
max-width: 560px; margin: 0 auto 56px; line-height: 1.75;
}
.csp-sec-cta {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 50px;
}
/* ============================================================
CATEGORY GRID — Full bleed immersive
============================================================ */
.csp-cats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 280px 280px;
gap: 12px;
}
.csp-cat {
position: relative; overflow: hidden; border-radius: 20px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.07);
transition: transform var(--tr), box-shadow var(--tr);
}
.csp-cat:hover { transform: scale(1.015); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.csp-cat-span2 { grid-column: span 2; }
.csp-cat-row2 { grid-row: span 2; }
.csp-cat-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; transition: transform 0.5s ease;
opacity: 0.5;
}
.csp-cat:hover .csp-cat-bg { transform: scale(1.06); }
.csp-cat-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,1,26,0.92) 0%, rgba(7,1,26,0.2) 60%, transparent 100%);
}
.csp-cat-solid {
position: absolute; inset: 0;
}
.csp-cat-body {
position: absolute; inset: 0; padding: 28px;
display: flex; flex-direction: column; justify-content: flex-end;
}
.csp-cat-icon { font-size: 2rem; margin-bottom: 8px; }
.csp-cat-name {
font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
font-weight: 500; color: #fff; margin-bottom: 4px;
}
.csp-cat-count { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.csp-cat-link {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.75rem; font-weight: 600; color: var(--gold);
opacity: 0; transform: translateY(6px);
transition: opacity 0.25s, transform 0.25s;
}
.csp-cat:hover .csp-cat-link { opacity: 1; transform: translateY(0); }
/* ============================================================
PRODUCT CARDS
============================================================ */
.csp-pgrid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.csp-pgrid-3 { grid-template-columns: repeat(3, 1fr); }
.csp-pc {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px; overflow: hidden;
transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
cursor: pointer; position: relative;
}
.csp-pc:hover {
transform: translateY(-6px);
border-color: rgba(123,47,247,0.4);
box-shadow: 0 20px 50px rgba(123,47,247,0.18);
}
.csp-pc::before {
content: ''; position: absolute; inset: 0; border-radius: 20px;
background: linear-gradient(135deg,rgba(123,47,247,0.06),transparent 60%);
opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1;
}
.csp-pc:hover::before { opacity: 1; }
.csp-pc-img {
position: relative; aspect-ratio: 1/1; overflow: hidden;
background: linear-gradient(135deg,rgba(20,8,50,0.95),rgba(10,2,28,0.98));
}
/* Product images — natural colours, no blending */
.woocommerce ul.products li.product a img,
.csp-pc-img img,
.csp-gal-main img {
background: transparent;
}
.csp-pc-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease;
}
.csp-pc:hover .csp-pc-img img { transform: scale(1.07); }
.csp-pc-badges {
position: absolute; top: 10px; left: 10px;
display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.csp-pc-wish {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(7,1,26,0.75); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; cursor: pointer; transition: var(--tr);
}
.csp-pc-wish:hover { background: rgba(241,7,163,0.2); border-color: rgba(241,7,163,0.4); }
.csp-pc-body { padding: 16px 18px 18px; }
.csp-pc-cat {
font-size: 0.67rem; color: var(--lav); font-weight: 600;
letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 5px;
}
.csp-pc-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem; font-weight: 500; color: #fff; line-height: 1.3;
margin-bottom: 6px;
}
.csp-pc-name a { color: inherit; }
.csp-pc-name a:hover { color: var(--lav); }
.csp-pc-stars { color: var(--gold); font-size: 0.72rem; margin-bottom: 10px; }
.csp-pc-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; flex-wrap: nowrap;
}
.csp-pc-price { font-size: 1.05rem; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.csp-pc-price del { font-size: 0.78rem; color: var(--t3); font-weight: 400; margin-right: 4px; }
.csp-pc-atc {
background: rgba(123,47,247,0.15); border: 1px solid rgba(123,47,247,0.3);
color: var(--lav); border-radius: 10px; padding: 7px 12px;
font-size: 0.73rem; font-weight: 600; cursor: pointer;
font-family: 'DM Sans', sans-serif; transition: var(--tr);
white-space: nowrap; flex-shrink: 0;
}
.csp-pc-atc:hover { background: rgba(123,47,247,0.3); color: #fff; border-color: rgba(123,47,247,0.6); }
/* Force WC ATC inside our card footer to behave */
.csp-pc .woocommerce-loop-product__link { display: block; }
.csp-pc form.cart { display: inline; margin: 0 !important; padding: 0 !important; }
.csp-pc .quantity { display: none !important; }
.csp-pc .add_to_cart_button {
display: inline-flex !important;
align-items: center !important;
background: rgba(123,47,247,0.15) !important;
color: var(--lav) !important;
border: 1px solid rgba(123,47,247,0.35) !important;
border-radius: 10px !important;
font-size: 0.73rem !important;
font-weight: 600 !important;
padding: 7px 12px !important;
white-space: nowrap !important;
width: auto !important;
height: auto !important;
float: none !important;
box-shadow: none !important;
line-height: 1.3 !important;
}
.csp-pc .add_to_cart_button:hover {
background: rgba(123,47,247,0.3) !important;
color: #fff !important;
border-color: rgba(123,47,247,0.6) !important;
transform: none !important;
}
/* WooCommerce loop override */
.woocommerce ul.products li.product {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 20px !important; overflow: hidden !important;
transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s !important;
margin: 0 !important;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-6px) !important;
border-color: rgba(123,47,247,0.4) !important;
box-shadow: 0 20px 50px rgba(123,47,247,0.18) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: 'Cormorant Garamond', serif !important;
color: #fff !important; font-size: 1.05rem !important;
}
.woocommerce ul.products li.product .price {
color: var(--gold) !important; font-weight: 700 !important;
}
.woocommerce ul.products li.product a img { border-radius: 0 !important; }
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
gap: 20px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Remove WC default product li padding/margin */
.woocommerce ul.products li.product {
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: auto !important;
clear: none !important;
}
/* WC product loop inner layout */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
display: block !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 0 18px 6px !important;
margin: 0 !important;
}
.woocommerce ul.products li.product .price {
padding: 0 18px !important;
margin-bottom: 10px !important;
display: block !important;
}
/* Fix ATC button area in WC loop */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button {
display: inline-flex !important;
margin: 0 18px 18px !important;
width: calc(100% - 36px) !important;
justify-content: center !important;
}
/* ============================================================
FEATURES / WHY US
============================================================ */
.csp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.csp-feat {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
border-radius: 18px; padding: 28px 22px; text-align: center;
transition: transform var(--tr), border-color var(--tr);
position: relative; overflow: hidden;
}
.csp-feat::before {
content: ''; position: absolute; inset: 0; border-radius: 18px;
background: linear-gradient(135deg,rgba(123,47,247,0.06),transparent);
opacity: 0; transition: opacity 0.3s;
}
.csp-feat:hover { transform: translateY(-4px); border-color: rgba(123,47,247,0.28); }
.csp-feat:hover::before { opacity: 1; }
.csp-feat-icon { font-size: 2rem; margin-bottom: 14px; display: block; position: relative; z-index: 1; }
.csp-feat-title { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 6px; position: relative; z-index: 1; }
.csp-feat-desc { font-size: 0.78rem; color: var(--t3); line-height: 1.6; position: relative; z-index: 1; }
/* ============================================================
TESTIMONIALS
============================================================ */
.csp-testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.csp-testi {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
border-radius: 20px; padding: 28px; position: relative; overflow: hidden;
transition: border-color var(--tr);
}
.csp-testi:hover { border-color: rgba(123,47,247,0.25); }
.csp-testi::before {
content: '\201C'; position: absolute; top: -14px; right: 16px;
font-family: 'Cormorant Garamond',serif; font-size: 120px;
color: rgba(123,47,247,0.1); line-height: 1; pointer-events: none;
}
.csp-testi-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 12px; }
.csp-testi-text {
font-size: 0.86rem; color: var(--t2); line-height: 1.75;
margin-bottom: 18px; font-style: italic; position: relative; z-index: 1;
}
.csp-testi-author { display: flex; align-items: center; gap: 12px; }
.csp-testi-av {
width: 38px; height: 38px; border-radius: 50%; background: var(--grad);
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.csp-testi-name { font-size: 0.84rem; font-weight: 600; color: #fff; }
.csp-testi-loc { font-size: 0.72rem; color: var(--t3); }
/* ============================================================
NUMEROLOGY BANNER — cross-sell
============================================================ */
.csp-xsell {
background: linear-gradient(135deg,rgba(123,47,247,0.16),rgba(241,7,163,0.08));
border: 1px solid rgba(123,47,247,0.25); border-radius: 28px;
padding: 56px 60px; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.csp-xsell::before {
content: '🔮'; position: absolute; right: 50px; top: 50%;
transform: translateY(-50%); font-size: 8rem; opacity: 0.07;
filter: blur(2px); pointer-events: none;
}
.csp-xsell-badge { display: inline-block; margin-bottom: 14px; }
.csp-xsell-h { font-size: clamp(22px,3vw,38px); color: #fff; margin-bottom: 10px; font-weight: 400; }
.csp-xsell-h em { font-style: italic; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.csp-xsell-p { font-size: 0.9rem; color: var(--t2); line-height: 1.7; max-width: 520px; }
.csp-xsell-cta { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
/* ============================================================
SINGLE PRODUCT PAGE
============================================================ */
.csp-product-page { padding: 40px 0 80px; }
.csp-single { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
.csp-gal { position: sticky; top: 90px; }
.csp-gal-main {
aspect-ratio: 1/1; border-radius: 24px; overflow: hidden;
background: linear-gradient(135deg,rgba(123,47,247,0.1),rgba(241,7,163,0.05));
border: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px;
}
.csp-gal-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.csp-gal-main:hover img { transform: scale(1.03); }
.csp-gal-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.csp-gal-thumb {
width: 70px; height: 70px; border-radius: 12px; overflow: hidden; cursor: pointer;
border: 2px solid rgba(255,255,255,0.07); transition: var(--tr); flex-shrink: 0;
}
.csp-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.csp-gal-thumb:hover, .csp-gal-thumb.active { border-color: var(--pur); }
.csp-pinfo {}
.csp-pinfo-cat {
font-size: 0.7rem; color: var(--lav); font-weight: 600;
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}
.csp-ptitle {
font-size: clamp(26px,3.5vw,42px); color: #fff; font-weight: 400;
line-height: 1.1; margin-bottom: 14px;
}
.csp-prating {
display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
font-size: 0.82rem; color: var(--t3);
}
.csp-prating .stars { color: var(--gold); font-size: 0.95rem; }
.csp-pprice {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px;
padding: 16px 20px; background: rgba(245,166,35,0.06);
border: 1px solid rgba(245,166,35,0.15); border-radius: 14px;
}
.csp-pprice-main { font-size: 2rem; font-weight: 700; color: var(--gold); }
.csp-pprice-del { font-size: 1rem; color: var(--t3); text-decoration: line-through; }
.csp-pprice-save {
font-size: 0.75rem; font-weight: 700; color: #4ade80;
background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2);
border-radius: 20px; padding: 3px 10px;
}
.csp-props {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px; margin: 18px 0; overflow: hidden;
}
.csp-prop {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 0.83rem;
}
.csp-prop:last-child { border-bottom: none; }
.csp-prop-icon { width: 22px; text-align: center; flex-shrink: 0; font-size: 0.9rem; }
.csp-prop-k { color: var(--t3); min-width: 110px; flex-shrink: 0; }
.csp-prop-v { color: #fff; font-weight: 500; }
.csp-atc-wrap { display: flex; gap: 10px; margin: 20px 0; align-items: stretch; }
/* WooCommerce single product form layout */
.woocommerce .product form.cart {
display: flex !important;
align-items: stretch !important;
gap: 10px !important;
margin: 20px 0 !important;
flex-wrap: nowrap !important;
}
.woocommerce .product form.cart .quantity {
display: flex !important;
flex-shrink: 0 !important;
}
.woocommerce .product form.cart .quantity input.qty {
width: 60px !important;
height: 50px !important;
text-align: center !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 12px !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
font-family: 'DM Sans',sans-serif !important;
outline: none !important;
-moz-appearance: textfield !important;
}
.woocommerce .product form.cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .product form.cart .quantity input.qty::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
.csp-qty {
display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px; overflow: hidden; flex-shrink: 0;
}
.csp-qty button {
width: 40px; height: 46px; background: rgba(255,255,255,0.05);
border: none; color: #fff; font-size: 1.1rem; cursor: pointer; transition: var(--tr);
}
.csp-qty button:hover { background: rgba(123,47,247,0.2); }
.csp-qty input {
width: 46px; height: 46px; text-align: center;
background: transparent; border: none;
border-left: 1px solid rgba(255,255,255,0.07);
border-right: 1px solid rgba(255,255,255,0.07);
color: #fff; font-size: 0.95rem; font-weight: 600;
font-family: 'DM Sans',sans-serif; outline: none;
}
.csp-atc-btn {
flex: 1; background: var(--grad); color: #fff; border: none; border-radius: 12px;
padding: 13px 24px; font-size: 0.95rem; font-weight: 700;
font-family: 'DM Sans',sans-serif; cursor: pointer; transition: var(--tr);
box-shadow: 0 0 24px rgba(123,47,247,0.35);
}
.csp-atc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(241,7,163,0.45); }
.csp-wish-btn {
width: 46px; height: 46px; border-radius: 12px;
background: rgba(241,7,163,0.08); border: 1px solid rgba(241,7,163,0.2);
color: #f472b6; font-size: 1.1rem; cursor: pointer; transition: var(--tr);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.csp-wish-btn:hover { background: rgba(241,7,163,0.2); }
.csp-guarantees {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.csp-guarantee-pill {
font-size: 0.7rem; color: var(--t3);
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px; padding: 4px 12px;
}
/* Tabs */
.csp-tabs { margin-top: 32px; }
.csp-tab-nav {
display: flex; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.07);
margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.csp-tab-nav::-webkit-scrollbar { display: none; }
.csp-tab-btn {
padding: 10px 18px; font-size: 0.82rem; font-weight: 600; color: var(--t3);
background: none; border: none; border-bottom: 2px solid transparent;
cursor: pointer; font-family: 'DM Sans',sans-serif; transition: var(--tr);
white-space: nowrap;
}
.csp-tab-btn.active, .csp-tab-btn:hover { color: var(--gold); border-bottom-color: var(--gold); }
.csp-tab-pane { display: none; font-size: 0.86rem; color: var(--t2); line-height: 1.8; }
.csp-tab-pane.active { display: block; }
.csp-tab-pane h4 { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 16px 0 6px; }
.csp-tab-pane ul { padding-left: 18px; }
.csp-tab-pane ul li { list-style: disc; margin-bottom: 5px; color: var(--t2); }
/* ============================================================
SHOP / ARCHIVE PAGE
============================================================ */
.csp-shop-page { padding: 30px 0 80px; }
.csp-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: flex-start; }
.csp-sidebar {}
.csp-sidebar-block {
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
border-radius: 18px; padding: 20px; margin-bottom: 14px; overflow: hidden;
}
.csp-sidebar-title {
font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--lav); margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.csp-cat-link-row {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 0.82rem; color: var(--t2); transition: var(--tr); cursor: pointer;
}
.csp-cat-link-row:last-child { border-bottom: none; }
.csp-cat-link-row:hover { color: #fff; padding-left: 4px; }
.csp-cat-link-row span { font-size: 0.72rem; color: var(--t3); }
.csp-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.csp-toolbar-count { font-size: 0.82rem; color: var(--t3); }
.csp-toolbar-right { display: flex; align-items: center; gap: 10px; }
.csp-sort select {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
color: #fff; border-radius: 10px; padding: 8px 14px;
font-family: 'DM Sans',sans-serif; font-size: 0.82rem; outline: none; cursor: pointer;
}
/* ============================================================
BREADCRUMB
============================================================ */
.csp-bc {
padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 0;
}
.csp-bc-inner {
display: flex; align-items: center; gap: 6px;
font-size: 0.76rem; color: var(--t3); flex-wrap: wrap;
}
.csp-bc-inner a { color: var(--t3); transition: color var(--tr); }
.csp-bc-inner a:hover { color: var(--lav); }
.csp-bc-inner .sep { opacity: 0.4; }
.csp-bc-inner .current { color: var(--t2); }
/* ============================================================
FOOTER
============================================================ */
.csp-footer {
background-image: url("https://numerologygenie.store/wp-content/uploads/2026/06/bgimg.png") !important;
border-top: 1px solid rgba(123,47,247,0.12);
padding: 80px 0 400px;
}
.csp-footer-grid {
display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
gap: 50px; margin-bottom: 50px;
}
.csp-footer-brand p { font-size: 0.82rem; color: var(--t); line-height: 1.7; max-width: 250px; margin-top: 14px; }
.csp-socials { display: flex; gap: 8px; margin-top: 18px; }
.csp-social {
width: 36px; height: 36px; border-radius: 10px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; color: var(--t3); transition: var(--tr);
}
.csp-social:hover { background: rgba(123,47,247,0.2); color: var(--lav); border-color: rgba(123,47,247,0.3); }
.csp-footer-col h4 {
font-family: 'DM Sans',sans-serif; font-size: 1.12rem; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--lav);
margin-bottom: 18px;
}
.csp-footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.csp-footer-col ul a { font-size: 0.96rem; color: var(--t); transition: var(--tr); }
.csp-footer-col ul a:hover { color: #fff; padding-left: 5px; }
.csp-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.05); padding: 22px 0;
display: flex; align-items: center; justify-content: space-between;
font-size: 0.90rem; color: var(--t); flex-wrap: wrap; gap: 14px;
}
.csp-footer-bottom a { color: var(--t); transition: color var(--tr); }
.csp-footer-bottom a:hover { color: var(--lav); }
.csp-payments { display: flex; gap: 6px; align-items: center; }
.csp-pay {
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px; padding: 3px 9px; font-size: 0.68rem; color: var(--t3); font-weight: 600;
}
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
.reveal {
opacity: 0; transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1100px) {
.csp-pgrid { grid-template-columns: repeat(3,1fr); }
.csp-feats { grid-template-columns: repeat(2,1fr); }
.csp-footer-grid { grid-template-columns: 1fr 1fr; }
.woocommerce ul.products { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width:900px) {
.csp-hdr { padding: 0 20px; }
.csp-nav { display: none; }
.csp-search { display: none; }
.csp-ham { display: flex; }
.csp-hero-inner { grid-template-columns: 1fr; padding: 60px 20px; }
.csp-hero-right { display: none; }
.csp-hero { min-height: auto; }
.csp-cats { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.csp-cat-span2, .csp-cat-row2 { grid-column: span 1; grid-row: span 1; }
.csp-testis { grid-template-columns: 1fr 1fr; }
.csp-single { grid-template-columns: 1fr; }
.csp-gal { position: static; }
.csp-shop-layout { grid-template-columns: 1fr; }
.csp-sidebar { display: none; }
.csp-xsell { grid-template-columns: 1fr; padding: 36px 28px; }
.csp-xsell::before { display: none; }
.csp-xsell-cta { flex-direction: row; }
}
@media (max-width:640px) {
.csp-w, .csp-ws { padding: 0 16px; }
.csp-pgrid { grid-template-columns: repeat(2,1fr); gap: 12px; }
.csp-pgrid-3 { grid-template-columns: repeat(2,1fr); }
.csp-cats { grid-template-columns: 1fr; }
.csp-feats { grid-template-columns: 1fr 1fr; gap: 10px; }
.csp-testis { grid-template-columns: 1fr; }
.csp-footer-grid { grid-template-columns: 1fr; gap: 30px; }
.csp-sec { padding: 60px 0; }
.csp-hdr-right .btn { display: none; }
.woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
.csp-hero-h1 { font-size: 36px; }
.csp-promo { font-size: 0.72rem; padding: 10px 16px; gap: 10px; }
}
@media (max-width:400px) {
.csp-pgrid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════
WOOCOMMERCE NATIVE ATC — Single product
Wraps WC's own qty+button output
══════════════════════════════════════════════════════════ */
.csp-atc-native {
margin: 20px 0;
}
.csp-atc-native form.cart {
display: flex !important;
align-items: stretch !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
.csp-atc-native .quantity {
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.csp-atc-native .quantity input.qty {
width: 60px !important;
height: 50px !important;
text-align: center !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 12px !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 700 !important;
font-family: 'DM Sans',sans-serif !important;
outline: none !important;
-moz-appearance: textfield !important;
padding: 0 8px !important;
}
.csp-atc-native .quantity input.qty::-webkit-inner-spin-button,
.csp-atc-native .quantity input.qty::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
.csp-atc-native button.single_add_to_cart_button,
.csp-atc-native .single_add_to_cart_button {
flex: 1 !important;
height: 50px !important;
min-width: 0 !important;
background: var(--grad) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
font-size: 1rem !important;
font-weight: 700 !important;
font-family: 'DM Sans',sans-serif !important;
box-shadow: 0 0 24px rgba(123,47,247,0.35) !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
letter-spacing: 0.02em !important;
transition: transform 0.25s, box-shadow 0.25s !important;
white-space: nowrap !important;
}
.csp-atc-native .single_add_to_cart_button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 32px rgba(241,7,163,0.45) !important;
background: var(--grad) !important;
color: #fff !important;
}
/* ── Loop ATC wrapper — fix the button inside our card ── */
.csp-loop-atc {
display: inline-flex;
flex-shrink: 0;
}
.csp-loop-atc a.button,
.csp-loop-atc .button,
.csp-loop-atc a.add_to_cart_button {
display: inline-flex !important;
align-items: center !important;
background: rgba(123,47,247,0.15) !important;
color: var(--lav) !important;
border: 1px solid rgba(123,47,247,0.35) !important;
border-radius: 10px !important;
font-size: 0.73rem !important;
font-weight: 600 !important;
padding: 7px 12px !important;
white-space: nowrap !important;
width: auto !important;
height: auto !important;
float: none !important;
box-shadow: none !important;
line-height: 1.3 !important;
margin: 0 !important;
transition: background 0.22s, color 0.22s !important;
}
.csp-loop-atc a.button:hover,
.csp-loop-atc .button:hover {
background: rgba(123,47,247,0.3) !important;
color: #fff !important;
border-color: rgba(123,47,247,0.6) !important;
transform: none !important;
}
/* Product images */
.woocommerce ul.products li.product img,
.attachment-woocommerce_thumbnail,
.wp-post-image {
background: transparent !important;
}
/* Image containers — subtle dark gradient */
.csp-pc-img {
background: linear-gradient(135deg,rgba(123,47,247,0.12),rgba(241,7,163,0.06)) !important;
}
.csp-gal-main {
background: linear-gradient(135deg,rgba(123,47,247,0.1),rgba(241,7,163,0.05)) !important;
}
/* WooCommerce loop product image wrapper */
.woocommerce ul.products li.product a img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
background: transparent !important;
}
/* ── Responsive fixes ── */
@media (max-width: 640px) {
.woocommerce ul.products {
grid-template-columns: repeat(2,1fr) !important;
}
.csp-atc-native form.cart {
flex-wrap: wrap !important;
}
.csp-atc-native .single_add_to_cart_button {
width: 100% !important;
}
}
/* ══════════════════════════════════════════════════════════
DYNAMIC NAV MENU — Desktop header
══════════════════════════════════════════════════════════ */
.csp-nav ul.csp-nav-list,
.csp-nav .csp-nav-list {
display: flex !important; align-items: center !important;
gap: 2px !important; list-style: none !important;
margin: 0 !important; padding: 0 !important;
}
.csp-nav-list > .menu-item { position: relative; }
.csp-nav-list > .menu-item > a,
.csp-nav-list > .menu-item > .nav-link {
display: block !important; padding: 7px 14px !important;
border-radius: 8px !important; font-size: 1.15rem !important;
font-weight: 500 !important; color: #fff !important;
transition: var(--tr) !important; white-space: nowrap !important;
text-decoration: none !important; font-family: 'DM Sans',sans-serif !important;
background: transparent !important; border: none !important;
}
.csp-nav-list > .menu-item > a:hover,
.csp-nav-list > .menu-item.current-menu-item > a,
.csp-nav-list > .menu-item.current-menu-ancestor > a,
.csp-nav-list > .menu-item.current_page_item > a {
color: #fff !important; background: rgba(123,47,247,0.1) !important;
}
.csp-drop-arrow { font-size:0.65rem; margin-left:3px; vertical-align:middle; opacity:0.6; }
.csp-nav-list .sub-menu {
display: none; position: absolute; top: calc(100% + 6px); left: 0;
min-width: 200px; background: rgba(10,2,28,0.97);
border: 1px solid rgba(123,47,247,0.22); border-radius: 14px;
padding: 8px; z-index: 1100; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
backdrop-filter: blur(16px); list-style: none !important; margin: 0 !important;
}
.csp-nav-list .menu-item-has-children:hover > .sub-menu { display: block; }
.sub-menu .menu-item a {
display: block !important; padding: 9px 14px !important;
border-radius: 8px !important; font-size: 0.82rem !important;
color: var(--t2) !important; transition: var(--tr) !important;
white-space: nowrap !important; text-decoration: none !important;
}
.sub-menu .menu-item a:hover { background: rgba(123,47,247,0.12) !important; color: #fff !important; }
/* Drawer nav */
.csp-drawer-menu { list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:0 !important; }
.csp-drawer-menu .menu-item { border-bottom:1px solid rgba(255,255,255,0.04); }
.csp-drawer-menu .menu-item:last-child { border-bottom:none; }
.csp-drawer-menu .menu-item > a { display:flex !important; align-items:center !important; gap:10px !important; padding:13px 10px !important; border-radius:12px !important; color:var(--t2) !important; font-size:0.88rem !important; font-weight:500 !important; text-decoration:none !important; transition:var(--tr) !important; background:transparent !important; }
.csp-drawer-menu .menu-item > a:hover,.csp-drawer-menu .menu-item.current-menu-item > a { background:rgba(123,47,247,0.12) !important; color:#fff !important; padding-left:18px !important; }
.csp-drawer-menu .sub-menu { list-style:none !important; padding:0 0 4px 20px !important; margin:0 !important; }
.csp-drawer-menu .sub-menu a { font-size:0.82rem !important; color:var(--t3) !important; padding:8px 10px !important; display:block !important; text-decoration:none !important; border-radius:8px !important; transition:var(--tr) !important; }
.csp-drawer-menu .sub-menu a:hover { color:var(--lav) !important; }
/* ══════════════════════════════════════════════════════════
PRODUCT DESCRIPTION & CONTENT TABLES
══════════════════════════════════════════════════════════ */
.csp-tab-pane table,.woocommerce-Tabs-panel table,.entry-content table,.woocommerce div.product .woocommerce-tabs table {
width:100% !important; border-collapse:collapse !important; border-radius:14px !important;
overflow:hidden !important; margin:16px 0 !important;
background:rgba(255,255,255,0.03) !important; border:1px solid rgba(123,47,247,0.2) !important;
font-size:0.86rem !important;
}
.csp-tab-pane table thead th,.woocommerce-Tabs-panel table thead th,.entry-content table thead th {
padding:12px 16px !important; font-size:0.72rem !important; font-weight:700 !important;
letter-spacing:0.8px !important; text-transform:uppercase !important; color:var(--lav) !important;
background:linear-gradient(90deg,rgba(123,47,247,0.2),rgba(241,7,163,0.08)) !important;
border:none !important; text-align:left !important;
}
.csp-tab-pane table td,.woocommerce-Tabs-panel table td,.entry-content table td {
padding:11px 16px !important; border:none !important;
border-bottom:1px solid rgba(255,255,255,0.05) !important;
color:var(--t2) !important; vertical-align:middle !important;
}
.csp-tab-pane table td:first-child,.entry-content table td:first-child { color:var(--t3) !important; font-weight:600 !important; font-size:0.78rem !important; }
.csp-tab-pane table tr:hover td,.entry-content table tr:hover td { background:rgba(123,47,247,0.05) !important; }
.csp-tab-pane table tr:last-child td,.entry-content table tr:last-child td { border-bottom:none !important; }
.woocommerce-product-attributes { width:100% !important; background:rgba(255,255,255,0.03) !important; border:1px solid rgba(123,47,247,0.18) !important; border-radius:14px !important; overflow:hidden !important; border-collapse:collapse !important; }
.woocommerce-product-attributes th { padding:11px 16px !important; color:var(--t3) !important; font-weight:600 !important; font-size:0.78rem !important; width:35% !important; background:rgba(123,47,247,0.06) !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; }
.woocommerce-product-attributes td { padding:11px 16px !important; color:#fff !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; }
.woocommerce table.shop_table { background:rgba(255,255,255,0.03) !important; border:1px solid rgba(123,47,247,0.18) !important; border-radius:16px !important; border-collapse:separate !important; border-spacing:0 !important; overflow:hidden !important; width:100% !important; }
.woocommerce table.shop_table th { background:linear-gradient(90deg,rgba(123,47,247,0.15),rgba(123,47,247,0.05)) !important; color:var(--lav) !important; font-weight:600 !important; font-size:0.72rem !important; letter-spacing:0.8px !important; text-transform:uppercase !important; padding:14px 18px !important; border:none !important; border-bottom:1px solid rgba(123,47,247,0.18) !important; }
.woocommerce table.shop_table td { padding:14px 18px !important; border:none !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; color:var(--t2) !important; vertical-align:middle !important; }
/* ══════════════════════════════════════════════════════════════
MY ACCOUNT — Complete Overhaul v4
Root fix: page.php no longer wraps account in narrow div.
WC DOM: .woocommerce > [nav] + [content]
We flex that directly.
══════════════════════════════════════════════════════════════ */
/* ── Full-width account page ── */
.woocommerce-account .woocommerce {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 28px !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 44px 40px 80px !important;
width: 100% !important;
box-sizing: border-box !important;
}
@media (max-width: 860px) {
.woocommerce-account .woocommerce {
flex-direction: column !important;
padding: 24px 16px 60px !important;
gap: 16px !important;
}
}
/* ── Sidebar ── */
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 220px !important;
min-width: 220px !important;
flex-shrink: 0 !important;
float: none !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(123,47,247,0.18) !important;
border-radius: 18px !important;
padding: 8px !important;
position: sticky !important;
top: 90px !important;
align-self: flex-start !important;
}
@media (max-width: 860px) {
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 100% !important;
min-width: unset !important;
position: static !important;
}
}
/* Nav label */
/* Nav header added via PHP */
/* Nav list */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important; padding: 0 !important;
display: flex !important; flex-direction: column !important; gap: 2px !important;
}
@media (max-width: 860px) {
.woocommerce-account .woocommerce-MyAccount-navigation ul {
flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important;
}
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
list-style: none !important; float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: flex !important; align-items: center !important;
gap: 8px !important; padding: 9px 12px !important;
border-radius: 10px !important; font-size: 0.84rem !important;
font-weight: 500 !important; color: var(--t2) !important;
text-decoration: none !important; transition: var(--tr) !important;
font-family: 'DM Sans',sans-serif !important; white-space: nowrap !important;
border: none !important; background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
background: rgba(123,47,247,0.12) !important; color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-MyAccount-navigation-link--active > a {
background: rgba(123,47,247,0.2) !important;
color: var(--lav) !important; font-weight: 600 !important;
border-left: 3px solid var(--pur) !important;
}
/* Nav icons */
/* Nav icons via data-label attr (set in PHP) — CSS emoji broken in some servers */
.woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid rgba(255,255,255,0.07) !important; margin-top: 6px !important; padding-top: 6px !important; }
.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 8px !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
padding-top: 6px !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: #f87171 !important; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: rgba(248,113,113,0.1) !important; color: #fca5a5 !important;
}
/* ── Content area ── */
.woocommerce-account .woocommerce-MyAccount-content {
flex: 1 !important;
min-width: 0 !important;
float: none !important;
width: auto !important;
}
/* ── Account hero banner ── */
.csp-account-hero {
background: linear-gradient(135deg,rgba(123,47,247,0.15),rgba(241,7,163,0.07));
border: 1px solid rgba(123,47,247,0.24); border-radius: 18px;
padding: 22px 26px; margin-bottom: 24px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.csp-account-avatar {
width: 50px; height: 50px; border-radius: 50%; background: var(--grad);
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem; font-weight: 700; color: #fff; flex-shrink: 0;
box-shadow: 0 0 20px rgba(123,47,247,0.45);
}
.csp-account-info { flex: 1; min-width: 0; }
.csp-account-name {
font-family: 'Cormorant Garamond',serif;
font-size: 1.3rem; color: #fff; margin-bottom: 2px; line-height: 1.2;
}
.csp-account-email { font-size: 0.77rem; color: var(--t3); line-height: 1.4; }
.csp-account-quick { display: flex; gap: 7px; flex-wrap: wrap; }
.csp-account-quick a {
font-size: 0.73rem; font-weight: 600;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px; padding: 5px 12px; color: var(--t2);
transition: var(--tr); text-decoration: none;
}
.csp-account-quick a:hover { background: rgba(123,47,247,0.15); color: var(--lav); }
/* ── Content headings ── */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content h2 {
font-family: 'Cormorant Garamond',serif !important;
font-size: clamp(20px,2.8vw,32px) !important;
font-weight: 400 !important; color: #fff !important;
margin: 0 0 20px !important; padding-bottom: 12px !important;
border-bottom: 1px solid rgba(123,47,247,0.13) !important;
}
/* ── Messages ── */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
background: rgba(96,165,250,0.07) !important;
border: none !important; border-left: 4px solid #60a5fa !important;
border-radius: 0 12px 12px 0 !important;
padding: 14px 18px !important; color: var(--t2) !important;
font-size: 0.86rem !important; list-style: none !important;
margin-bottom: 18px !important;
}
.woocommerce-account .woocommerce-error {
background: rgba(248,113,113,0.07) !important;
border: none !important; border-left: 4px solid #f87171 !important;
border-radius: 0 12px 12px 0 !important;
padding: 14px 18px !important; color: #fca5a5 !important;
font-size: 0.86rem !important; list-style: none !important; margin-bottom: 18px !important;
}
/* ══ FORMS ══════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-content form {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(123,47,247,0.14) !important;
border-radius: 18px !important; padding: 26px !important;
}
@media(max-width:600px) {
.woocommerce-account .woocommerce-MyAccount-content form { padding: 16px !important; }
}
/* Labels */
.woocommerce-account .form-row label,
.woocommerce-account form p label {
display: block !important; font-size: 0.7rem !important;
font-weight: 700 !important; letter-spacing: 0.8px !important;
text-transform: uppercase !important; color: var(--t3) !important;
margin-bottom: 6px !important; font-family: 'DM Sans',sans-serif !important;
}
.woocommerce-account form label .required { color: var(--pink) !important; }
/* Inputs */
.woocommerce-account form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.woocommerce-account form select,
.woocommerce-account form textarea {
width: 100% !important; display: block !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
border-radius: 10px !important; color: #fff !important;
font-family: 'DM Sans',sans-serif !important; font-size: 0.88rem !important;
padding: 11px 14px !important; outline: none !important;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
appearance: none !important; -webkit-appearance: none !important;
box-shadow: none !important;
/* Override browser autofill white background */
-webkit-text-fill-color: #fff !important;
caret-color: #fff !important;
}
.woocommerce-account form input:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
border-color: rgba(123,47,247,0.55) !important;
background: rgba(123,47,247,0.08) !important;
box-shadow: 0 0 0 3px rgba(123,47,247,0.14) !important;
}
.woocommerce-account form input::placeholder { color: rgba(255,255,255,0.22) !important; }
/* Fix browser autofill blue/white bg */
.woocommerce-account form input:-webkit-autofill,
.woocommerce-account form input:-webkit-autofill:hover,
.woocommerce-account form input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px rgba(20,5,50,0.98) inset !important;
-webkit-text-fill-color: #fff !important;
}
.woocommerce-account form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important; padding-right: 34px !important;
}
.woocommerce-account form select option { background: #0d0020 !important; color: #fff !important; }
/* Fieldset */
.woocommerce-account fieldset {
border: 1px solid rgba(123,47,247,0.2) !important;
border-radius: 12px !important; padding: 18px 20px !important;
margin: 16px 0 !important; background: rgba(123,47,247,0.04) !important;
}
.woocommerce-account fieldset legend {
font-size: 0.7rem !important; font-weight: 700 !important;
letter-spacing: 1px !important; text-transform: uppercase !important;
color: var(--lav) !important; padding: 0 8px !important;
font-family: 'DM Sans',sans-serif !important;
}
/* Form row */
.woocommerce-account .form-row {
margin-bottom: 14px !important; padding: 0 !important;
float: none !important; width: 100% !important; clear: none !important;
}
.woocommerce-account form em {
font-size: 0.72rem !important; color: var(--t3) !important;
display: block !important; margin-top: 4px !important;
}
/* Two-col address */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 16px !important;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
grid-column: 1 / -1 !important;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last {
float: none !important; width: 100% !important;
}
@media(max-width:600px) {
.woocommerce-account .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr !important;
}
}
/* Submit */
.woocommerce-account form button[type="submit"],
.woocommerce-account form input[type="submit"] {
background: var(--grad) !important; color: #fff !important;
border: none !important; border-radius: 50px !important;
padding: 11px 28px !important; font-size: 0.88rem !important;
font-weight: 700 !important; font-family: 'DM Sans',sans-serif !important;
cursor: pointer !important; transition: transform 0.25s, box-shadow 0.25s !important;
box-shadow: 0 0 20px rgba(123,47,247,0.35) !important;
display: inline-flex !important; align-items: center !important;
margin-top: 6px !important; letter-spacing: 0.02em !important;
}
.woocommerce-account form button[type="submit"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 24px rgba(241,7,163,0.45) !important; color: #fff !important;
}
/* Checkbox / remember me */
.woocommerce-account .woocommerce-form__label-for-checkbox {
display: flex !important; align-items: center !important; gap: 8px !important;
font-size: 0.83rem !important; color: var(--t2) !important;
text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important;
}
.woocommerce-account .woocommerce-form__label-for-checkbox input[type="checkbox"] {
width: 16px !important; height: 16px !important;
accent-color: var(--pur) !important; flex-shrink: 0 !important;
display: inline-block !important; background: transparent !important;
border: none !important; border-radius: 3px !important; padding: 0 !important;
}
.woocommerce-account .lost_password a { font-size: 0.82rem !important; color: var(--lav) !important; }
/* ══ ORDERS TABLE ════════════════════════════════════════════ */
.woocommerce-account .woocommerce-orders-table {
width: 100% !important; border-collapse: separate !important;
border-spacing: 0 !important; overflow: hidden !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(123,47,247,0.15) !important; border-radius: 16px !important;
}
.woocommerce-account .woocommerce-orders-table th {
background: linear-gradient(90deg,rgba(123,47,247,0.18),rgba(123,47,247,0.06)) !important;
padding: 12px 16px !important; font-size: 0.68rem !important; font-weight: 700 !important;
letter-spacing: 1px !important; text-transform: uppercase !important;
color: var(--lav) !important; border: none !important;
border-bottom: 1px solid rgba(123,47,247,0.15) !important;
}
.woocommerce-account .woocommerce-orders-table td {
padding: 13px 16px !important; border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
color: var(--t2) !important; font-size: 0.84rem !important; vertical-align: middle !important;
}
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: none !important; }
.woocommerce-account .woocommerce-orders-table tr:hover td { background: rgba(123,47,247,0.04) !important; }
.woocommerce-account mark.order-status {
border-radius: 20px !important; padding: 3px 10px !important;
font-size: 0.68rem !important; font-weight: 700 !important;
display: inline-block !important;
}
.woocommerce-account mark.processing { background: rgba(96,165,250,0.12) !important; color: #93c5fd !important; }
.woocommerce-account mark.completed { background: rgba(74,222,128,0.1) !important; color: #4ade80 !important; }
.woocommerce-account mark.pending { background: rgba(245,166,35,0.1) !important; color: var(--gold) !important; }
.woocommerce-account mark.cancelled { background: rgba(248,113,113,0.1) !important; color: #f87171 !important; }
.woocommerce-account mark.on-hold { background: rgba(251,146,60,0.1) !important; color: #fb923c !important; }
.woocommerce-account .woocommerce-orders-table a.button {
background: rgba(123,47,247,0.12) !important; border: 1px solid rgba(123,47,247,0.3) !important;
color: var(--lav) !important; border-radius: 8px !important;
padding: 5px 12px !important; font-size: 0.73rem !important; font-weight: 600 !important;
box-shadow: none !important; text-decoration: none !important;
}
.woocommerce-account .woocommerce-orders-table a.button:hover {
background: rgba(123,47,247,0.24) !important; color: #fff !important; transform: none !important;
}
/* ══ ADDRESSES PAGE ════════════════════════════════════════ */
/*
WC DOM structure:
.woocommerce-MyAccount-content
The following addresses...
Grid must target u-columns (parent), children are u-column1/2.
*/
.woocommerce-account .u-columns.woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
width: 100% !important;
float: none !important;
/* Suppress WC pseudo-element clearfix that adds extra grid cells */
}
.woocommerce-account .u-columns.woocommerce-Addresses::before,
.woocommerce-account .u-columns.woocommerce-Addresses::after {
display: none !important;
content: none !important;
}
@media (max-width: 640px) {
.woocommerce-account .u-columns.woocommerce-Addresses {
grid-template-columns: 1fr !important;
}
}
/* Address card */
.woocommerce-account .u-columns.woocommerce-Addresses .u-column1,
.woocommerce-account .u-columns.woocommerce-Addresses .u-column2 {
float: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(123,47,247,0.16) !important;
border-radius: 18px !important;
overflow: hidden !important;
}
/* Address inner padding */
.woocommerce-account .woocommerce-Address {
padding: 22px !important;
}
.woocommerce-account .woocommerce-Address-title {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 14px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.woocommerce-account .woocommerce-Address-title h3 {
font-family: 'Cormorant Garamond',serif !important;
font-size: 1.2rem !important; color: #fff !important;
margin: 0 !important; padding: 0 !important; border: none !important;
font-weight: 500 !important; line-height: 1.2 !important;
}
.woocommerce-account .woocommerce-Address-title .edit {
flex-shrink: 0 !important; font-size: 0.73rem !important;
font-weight: 600 !important; color: var(--lav) !important;
background: rgba(123,47,247,0.1) !important;
border: 1px solid rgba(123,47,247,0.25) !important;
border-radius: 20px !important; padding: 4px 12px !important;
transition: var(--tr) !important; text-decoration: none !important;
white-space: nowrap !important;
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
background: rgba(123,47,247,0.22) !important; color: #fff !important;
}
.woocommerce-account address {
font-style: normal !important; font-size: 0.85rem !important;
color: var(--t2) !important; line-height: 1.8 !important;
}
.woocommerce-account .woocommerce-Address > p {
font-size: 0.8rem !important; color: var(--t3) !important;
font-style: italic !important; margin: 4px 0 0 !important;
}
/* ══ LOGIN/REGISTER ══════════════════════════════════════════ */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
float: none !important; width: 100% !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(123,47,247,0.16) !important;
border-radius: 18px !important; padding: 26px !important;
}
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
font-family: 'Cormorant Garamond',serif !important;
font-size: 1.6rem !important; color: #fff !important;
margin-bottom: 18px !important; border: none !important; padding: 0 !important;
}
/* Login/register as flex row */
.woocommerce-account .woocommerce-MyAccount-content > .u-column1,
.woocommerce-account .woocommerce-MyAccount-content > .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
display: block !important;
}
/* ── Nav label (injected via JS) ── */
.csp-nav-label {
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: var(--t3) !important;
padding: 11px 14px 9px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
margin-bottom: 5px !important;
font-family: 'DM Sans', sans-serif !important;
}
/* Nav icon span */
.csp-nav-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
flex-shrink: 0 !important;
}
/* ── Fix: search submit button showing as big pill ── */
/* WordPress sometimes adds a .search-submit or input[type=submit] */
.csp-search input[type="submit"],
.csp-search button[type="submit"],
.csp-search .search-submit {
display: none !important;
visibility: hidden !important;
width: 0 !important; height: 0 !important;
padding: 0 !important; margin: 0 !important;
position: absolute !important; left: -9999px !important;
}
/* Also hide any WP default search widget button in header */
.csp-hdr input[type="submit"],
.csp-hdr button[type="submit"]:not(.csp-ham) {
display: none !important;
}
/* ── Nuke the standalone Search submit button in header ── */
.csp-hdr .search-form input[type="submit"],
.csp-hdr .search-form button,
.csp-hdr form[role="search"] input[type="submit"],
.csp-hdr form[role="search"] button[type="submit"],
.widget_search input[type="submit"],
.widget_search .search-submit,
/* WP block search widget submit */
.wp-block-search__button,
.wp-block-search__button-outside,
/* Any stray submit in the header right */
.csp-hdr-right input[type="submit"],
.csp-hdr-right button:not(.csp-ham):not(.csp-cart):not([class*="btn"]):not([class*="account"]) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* ── Addresses: ensure grid side-by-side ── */
.woocommerce-account .woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
width: 100% !important;
}
/* Both address columns equal width */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
width: 100% !important;
min-width: 0 !important;
}
/* Remove WC default float on col-1 col-2 */
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
float: none !important;
width: 100% !important;
}
@media (max-width: 640px) {
.woocommerce-account .woocommerce-Addresses {
grid-template-columns: 1fr !important;
}
}
/* ── Select / Dropdown fix — country, state, all selects ── */
.woocommerce-account select,
.woocommerce-account .select2-container .select2-selection--single,
.woocommerce-account .select2-selection,
.select2-dropdown,
.select2-container--default .select2-selection--single {
background: rgba(255,255,255,0.07) !important;
background-color: rgba(20,5,50,0.95) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
border-radius: 10px !important;
color: #fff !important;
font-family: 'DM Sans',sans-serif !important;
font-size: 0.88rem !important;
outline: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Select2 — WooCommerce uses Select2 for country/state dropdowns */
.select2-container--default .select2-selection--single {
height: 46px !important;
line-height: 46px !important;
padding: 0 36px 0 14px !important;
background: rgba(20,5,50,0.95) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
border-radius: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff !important;
line-height: 46px !important;
padding: 0 !important;
font-size: 0.88rem !important;
font-family: 'DM Sans',sans-serif !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: rgba(255,255,255,0.3) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
right: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: rgba(255,255,255,0.4) transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgba(255,255,255,0.4) !important;
}
/* Select2 focus state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
border-color: rgba(123,47,247,0.55) !important;
background: rgba(123,47,247,0.08) !important;
box-shadow: 0 0 0 3px rgba(123,47,247,0.14) !important;
}
/* Select2 dropdown panel */
.select2-dropdown {
background: rgba(13,2,32,0.98) !important;
background-color: #0d0220 !important;
border: 1px solid rgba(123,47,247,0.3) !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
overflow: hidden !important;
z-index: 99999 !important;
}
.select2-dropdown .select2-search {
padding: 8px !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.select2-dropdown .select2-search input {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
border-radius: 8px !important;
color: #fff !important;
font-family: 'DM Sans',sans-serif !important;
font-size: 0.84rem !important;
padding: 8px 12px !important;
outline: none !important;
width: 100% !important;
}
.select2-dropdown .select2-results__options {
max-height: 260px !important;
overflow-y: auto !important;
padding: 4px !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(123,47,247,0.4) transparent !important;
}
.select2-dropdown .select2-results__option {
color: var(--t2) !important;
font-size: 0.86rem !important;
font-family: 'DM Sans',sans-serif !important;
padding: 9px 14px !important;
border-radius: 8px !important;
transition: background 0.15s !important;
cursor: pointer !important;
}
.select2-dropdown .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted {
background: rgba(123,47,247,0.18) !important;
color: #fff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: rgba(123,47,247,0.18) !important;
color: #fff !important;
}
.select2-dropdown .select2-results__option[aria-selected="true"] {
background: rgba(123,47,247,0.28) !important;
color: var(--lav) !important;
font-weight: 600 !important;
}
/* Native