/* =============================================================
LUMINA AMINOS — Core Stylesheet
Palette: Midnight Rose
All classes prefixed with .vsc- to avoid WP theme conflicts.
============================================================= */
:root {
--white: #FFFFFF;
--ivory: #F5F6F7;
--midnight: #082040;
--blue-secondary: #1E3A6B;
--rose: #0EA5E9;
--rose-hover: #0284C7;
--rose-soft: #E0F2FE;
--text-muted: #6B7A94;
--border: #E5EAF0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.vsc-page {
font-family: 'Inter', sans-serif;
background: var(--white);
color: var(--midnight);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.vsc-page a { color: inherit; text-decoration: none; }
.vsc-page img { max-width: 100%; display: block; }
.vsc-serif { font-family: 'Inter', serif; }
.vsc-italic { font-style: italic; color: var(--rose-hover); }
/* ============ NAV ============ */
.vsc-nav {
position: fixed; top: 0; width: 100%;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
z-index: 100; padding: 18px 0;
}
.vsc-nav-container {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: flex; align-items: center; justify-content: space-between;
}
.vsc-logo {
font-family: 'Inter', serif; font-size: 26px;
font-weight: 600; color: var(--midnight); letter-spacing: 0.5px;
display: flex; align-items: center; gap: 10px;
}
.vsc-logo-mark {
width: 36px; height: 36px;
background-image: url('/wp-content/themes/ventra-sciences-v3/assets/images/ventra-logo.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.vsc-nav-links { display: flex; gap: 40px; list-style: none; }
.vsc-nav-links a {
color: var(--midnight); font-size: 14px; font-weight: 500;
letter-spacing: 0.3px; transition: color 0.2s;
}
.vsc-nav-links a:hover, .vsc-nav-links a.active { color: var(--rose-hover); }
.vsc-page a.vsc-nav-cta {
background: var(--midnight); color: var(--rose);
padding: 11px 24px; border-radius: 100px;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
transition: all 0.3s;
}
.vsc-page a.vsc-nav-cta:hover { background: var(--blue-secondary); color: var(--white); transform: translateY(-1px); }
/* ============ NAV ICONS (account + cart) ============ */
.vsc-nav-icons { display: flex; align-items: center; gap: 4px; }
.vsc-nav-icon {
width: 42px; height: 42px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--midnight); background: transparent; border: none;
cursor: pointer; transition: background 0.2s, color 0.2s;
position: relative; text-decoration: none; padding: 0;
font-family: inherit;
}
.vsc-nav-icon:hover { background: var(--rose-soft); color: var(--rose-hover); }
.vsc-cart-count {
position: absolute; top: 4px; right: 2px;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 50%; background: var(--midnight); color: var(--white);
font-size: 10px; font-weight: 700; letter-spacing: 0;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--white);
}
.vsc-cart-count[data-cart-count="0"] { display: none; }
/* ============ SIDE CART DRAWER ============ */
.vsc-cart-backdrop {
position: fixed; inset: 0;
background: rgba(8, 32, 64, 0.35);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.3s; z-index: 998;
}
.vsc-cart-backdrop.active { opacity: 1; pointer-events: auto; }
.vsc-cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 440px; max-width: 100vw;
background: var(--ivory);
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999; display: flex; flex-direction: column;
box-shadow: -20px 0 60px rgba(8, 32, 64, 0.18);
}
.vsc-cart-drawer.active { transform: translateX(0); }
.vsc-cart-header {
padding: 22px 24px; background: var(--white);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.vsc-cart-header h3 {
font-family: 'Inter', serif;
font-size: 24px; font-weight: 600; color: var(--midnight);
display: flex; align-items: center; gap: 8px;
}
.vsc-cart-header-count { color: var(--text-muted); font-weight: 400; font-size: 16px; }
.vsc-cart-close {
width: 36px; height: 36px; border-radius: 50%;
border: none; background: transparent; cursor: pointer;
color: var(--midnight); display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.vsc-cart-close:hover { background: var(--rose-soft); }
.vsc-cart-body {
flex: 1; overflow-y: auto; padding: 16px;
background: var(--ivory);
}
.vsc-cart-items { display: flex; flex-direction: column; gap: 12px; }
/* Cart item card — matched 1:1 to the aminoclub reference card:
image left, content right; bold title, normal-case gray size line,
then a baseline row of [qty pill] ......... [stacked price].
Price stacks strike-over-now; the discounted "now" value is green
(semantic savings signal, not a brand accent — used nowhere else). */
.vsc-cart-item {
background: var(--white); border: 1px solid var(--border);
border-radius: 18px; padding: 16px;
display: grid; grid-template-columns: 84px 1fr;
gap: 16px; align-items: center;
position: relative;
}
.vsc-cart-item-img {
width: 84px; height: 84px; border-radius: 14px;
background: #F4B4C6; object-fit: contain;
align-self: center;
}
.vsc-cart-item-details {
display: flex; flex-direction: column; gap: 3px;
min-width: 0;
}
.vsc-cart-item-details h4 {
font-size: 17px; font-weight: 700; color: var(--midnight);
line-height: 1.25; padding-right: 24px; /* clear the absolute X */
}
.vsc-cart-item-size {
font-size: 13px; font-weight: 500; letter-spacing: 0;
color: var(--text-muted); text-transform: none;
}
.vsc-cart-item-bottom {
margin-top: 14px; padding-top: 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 10px;
}
/* Price stacks vertically, right-aligned: strike on top, big "now" below */
.vsc-cart-item-price {
display: flex; flex-direction: column; align-items: flex-end;
gap: 1px; text-align: right;
}
.vsc-cart-item-price-strike {
text-decoration: line-through;
color: var(--text-muted);
font-size: 13px; font-weight: 500;
}
.vsc-cart-item-price-now {
font-size: 18px; font-weight: 700; color: var(--midnight);
line-height: 1.1;
}
.vsc-cart-item-price.has-discount .vsc-cart-item-price-now { color: #16A34A; }
.vsc-pdp-cart.has-discount { background: #0284C7; color: var(--white); box-shadow: 0 8px 28px rgba(15, 123, 61, 0.35); }
.vsc-pdp-cart.has-discount:hover { background: #082040; }
.vsc-cart-item-remove {
position: absolute; top: 14px; right: 14px;
background: transparent; border: none;
font-size: 22px; color: #C0C5CE; cursor: pointer;
line-height: 1; padding: 2px;
}
.vsc-cart-item-remove:hover { color: var(--midnight); }
/* Backorder / status badges */
.vsc-cart-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vsc-cart-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 100px;
font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
text-transform: uppercase;
}
.vsc-cart-badge.in-stock { background: #E0F2FE; color: #0284C7; }
.vsc-cart-badge.backorder { background: #FFF4E5; color: #B05A00; }
/* Quantity selector with discount */
.vsc-qty-wrapper { position: relative; display: inline-block; }
.vsc-qty-btn {
background: var(--white); border: 1.5px solid var(--border);
border-radius: 100px; padding: 8px 14px 8px 16px;
font-size: 15px; font-weight: 600; color: var(--midnight);
cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; gap: 8px;
min-width: 68px; justify-content: space-between;
}
.vsc-qty-btn:hover { border-color: var(--rose); }
.vsc-qty-dropdown {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 200px; max-height: 240px; overflow-y: auto;
background: var(--white); border: 1px solid var(--border);
border-radius: 14px; padding: 6px;
box-shadow: 0 12px 40px rgba(8, 32, 64, 0.14);
display: none; z-index: 10;
}
.vsc-qty-dropdown.active { display: block; }
.vsc-qty-option {
width: 100%; padding: 10px 14px;
background: transparent; border: none; border-radius: 10px;
font-size: 14px; font-weight: 500; color: var(--midnight);
cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: space-between;
text-align: left;
}
.vsc-qty-option:hover { background: var(--ivory); }
.vsc-qty-option.active {
background: var(--midnight); color: var(--white);
}
.vsc-qty-discount {
font-size: 11px; font-weight: 600;
padding: 3px 10px; border-radius: 100px;
background: #E0F2FE; color: #0284C7;
}
.vsc-qty-option.active .vsc-qty-discount {
background: rgba(255, 255, 255, 0.2); color: var(--white);
}
/* Shipment Protection row */
.vsc-cart-protection {
margin-top: 14px; padding: 14px 16px;
background: var(--white); border: 1px solid var(--border);
border-radius: 14px;
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--midnight);
}
.vsc-cart-protection-icon { color: #0284C7; flex-shrink: 0; }
.vsc-cart-protection-label { flex: 1; font-weight: 500; }
.vsc-cart-protection-tooltip {
width: 18px; height: 18px; border-radius: 50%;
background: var(--border); color: var(--text-muted);
border: none; font-size: 11px; font-weight: 700; cursor: help;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px;
}
.vsc-cart-protection-free {
font-size: 12px; font-weight: 700; color: #0284C7;
letter-spacing: 0.5px; text-transform: uppercase;
}
/* Upsell card */
.vsc-cart-upsell {
margin: 14px 16px 0;
background: var(--white); border: 1px solid var(--border);
border-radius: 14px; padding: 12px;
display: grid; grid-template-columns: 48px 1fr auto;
gap: 12px; align-items: center;
position: relative;
}
.vsc-cart-upsell-close {
position: absolute; top: 6px; right: 8px;
background: transparent; border: none;
font-size: 14px; color: var(--text-muted); cursor: pointer;
line-height: 1;
}
.vsc-cart-upsell-img {
width: 48px; height: 48px; border-radius: 10px;
background: #F4B4C6; object-fit: contain;
}
.vsc-cart-upsell-text strong {
display: block; font-size: 13px; color: var(--midnight); margin-bottom: 2px;
}
.vsc-cart-upsell-text span { font-size: 11px; color: var(--text-muted); }
.vsc-cart-upsell-add {
background: var(--midnight); color: var(--white);
border: none; border-radius: 100px;
padding: 8px 16px; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.vsc-cart-upsell-add:hover { background: var(--blue-secondary); }
/* Footer (promo + subtotal + checkout) */
.vsc-cart-footer {
background: var(--white);
border-top: 1px solid var(--border);
}
.vsc-cart-promo {
width: 100%;
padding: 16px 24px;
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--midnight); cursor: pointer;
background: transparent; border: none;
border-bottom: 1px solid var(--border);
font-family: inherit; font-weight: 500;
text-align: left;
}
.vsc-cart-promo:hover { background: var(--ivory); }
.vsc-cart-totals { padding: 16px 24px 0; }
.vsc-cart-subtotal {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 10px;
}
.vsc-cart-subtotal-label { font-size: 15px; color: var(--midnight); font-weight: 600; }
.vsc-cart-subtotal-value {
display: inline-flex; align-items: baseline; gap: 8px;
}
.vsc-cart-subtotal-strike {
font-size: 14px; color: var(--text-muted);
text-decoration: line-through; font-weight: 400;
}
.vsc-cart-subtotal-amount {
font-size: 18px; font-weight: 700; color: var(--midnight);
}
.vsc-cart-discount-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px;
font-size: 14px;
}
.vsc-cart-discount-label { color: #0284C7; font-weight: 600; }
.vsc-cart-discount-amount { color: #0284C7; font-weight: 700; font-size: 15px; }
.vsc-cart-shipping-progress {
margin-bottom: 16px;
}
.vsc-cart-shipping-text {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--midnight);
margin-bottom: 8px;
}
.vsc-cart-shipping-text strong { color: #0284C7; }
.vsc-cart-progress-bar {
height: 6px; background: var(--border); border-radius: 100px;
overflow: hidden; position: relative;
}
.vsc-cart-progress-fill {
height: 100%; background: linear-gradient(90deg, #34A853 0%, #0284C7 100%);
border-radius: 100px; transition: width 0.4s;
}
.vsc-cart-footer .vsc-cart-checkout {
margin: 0 24px 20px;
width: calc(100% - 48px);
}
.vsc-cart-checkout,
.vsc-cart-checkout:link,
.vsc-cart-checkout:visited,
.vsc-cart-checkout:active,
.vsc-cart-checkout:focus,
.vsc-cart-checkout:hover {
margin: 0 24px 20px;
width: calc(100% - 48px);
background: var(--midnight);
color: #FFFFFF !important;
padding: 14px 24px; border-radius: 100px; border: none;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase; cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 8px;
line-height: 1.4;
text-decoration: none !important;
transition: background 0.3s;
}
.vsc-cart-checkout:hover { background: var(--blue-secondary); }
.vsc-cart-empty {
padding: 60px 20px; text-align: center; color: var(--text-muted);
}
.vsc-cart-empty h4 {
font-family: 'Inter', serif; font-size: 24px;
color: var(--midnight); margin-bottom: 8px; font-weight: 500;
}
@media (max-width: 480px) {
.vsc-cart-drawer { width: 100vw; }
}
/* ============ BUTTONS ============ */
.vsc-btn-primary {
background: var(--rose); color: var(--midnight);
padding: 17px 36px; border-radius: 100px;
font-weight: 600; font-size: 15px; letter-spacing: 0.3px;
transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px;
box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45); border: none; cursor: pointer;
font-family: inherit;
}
.vsc-btn-primary:hover {
background: var(--rose-hover); transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(217, 138, 160, 0.5);
}
.vsc-btn-primary svg { transition: transform 0.3s; }
.vsc-btn-primary:hover svg { transform: translateX(4px); }
.vsc-btn-secondary {
color: var(--midnight); font-weight: 600; font-size: 15px;
display: inline-flex; align-items: center; gap: 8px;
padding: 17px 12px; border-bottom: 2px solid transparent;
transition: border-color 0.3s; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font-family: inherit;
}
.vsc-btn-secondary:hover { border-bottom-color: var(--midnight); }
.vsc-btn-outline {
display: inline-flex; align-items: center; gap: 10px;
padding: 17px 40px; border-radius: 100px;
border: 1.5px solid var(--midnight); color: var(--midnight);
font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
text-transform: uppercase; transition: all 0.3s; background: transparent; cursor: pointer; font-family: inherit;
}
.vsc-btn-outline:hover { background: var(--midnight); color: var(--white); }
/* ============ GENERIC PAGE HERO ============ */
.vsc-page-hero {
padding: 140px 32px 48px;
background:
radial-gradient(ellipse 800px 600px at 85% 20%, var(--rose-soft) 0%, transparent 60%),
radial-gradient(ellipse 600px 500px at 10% 90%, #F0EDF5 0%, transparent 60%),
var(--ivory);
text-align: center;
}
.vsc-page-hero-container { max-width: 820px; margin: 0 auto; }
.vsc-page-hero .vsc-eyebrow {
display: inline-block; font-size: 12px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--rose-hover); margin-bottom: 16px;
}
.vsc-page-hero h1 {
font-family: 'Inter', serif;
font-size: clamp(44px, 6vw, 76px); font-weight: 500;
line-height: 1.05; color: var(--midnight);
letter-spacing: -1.5px; margin-bottom: 24px;
}
.vsc-page-hero p {
font-size: 19px; color: var(--text-muted);
max-width: 620px; margin: 0 auto; line-height: 1.7;
}
/* ============ SECTIONS ============ */
.vsc-section { padding: 120px 32px; }
.vsc-section-ivory { background: var(--ivory); }
.vsc-section-midnight { background: var(--midnight); color: var(--white); }
.vsc-section-container { max-width: 1280px; margin: 0 auto; }
.vsc-section-header { text-align: center; margin-bottom: 72px; }
.vsc-eyebrow {
display: inline-block; font-size: 12px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--rose-hover); margin-bottom: 16px;
}
.vsc-section-header h2 {
font-family: 'Inter', serif;
font-size: clamp(36px, 4.5vw, 58px); font-weight: 500;
line-height: 1.1; letter-spacing: -1px; color: var(--midnight);
margin-bottom: 20px;
}
.vsc-section-midnight .vsc-section-header h2 { color: var(--white); }
.vsc-section-header p {
font-size: 18px; color: var(--text-muted);
max-width: 620px; margin: 0 auto; line-height: 1.65;
}
.vsc-section-midnight .vsc-section-header p { color: rgba(255,255,255,0.75); }
/* ============ PRODUCT CARD ============ */
.vsc-shop-card {
background: var(--white); border: 1px solid var(--border);
border-radius: 20px; overflow: hidden;
transition: transform 0.4s, box-shadow 0.4s;
display: flex; flex-direction: column;
}
.vsc-shop-card:hover {
transform: translateY(-8px);
box-shadow: 0 32px 64px rgba(8, 32, 64, 0.12);
}
.vsc-shop-image {
height: 300px !important;
max-height: 300px;
background: var(--white);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative; overflow: hidden;
}
/* Category-themed shop card image backgrounds */
.vsc-shop-card[data-category*="Metabolic" i] .vsc-shop-image { background: #6B7A94 !important; }
.vsc-shop-card[data-category*="Cellular" i] .vsc-shop-image { background: #6B7A94 !important; }
.vsc-shop-card[data-category*="Neuro" i] .vsc-shop-image { background: #0EA5E9 !important; }
.vsc-shop-card[data-category*="Regenerative" i] .vsc-shop-image { background: #0EA5E9 !important; }
.vsc-shop-card[data-category*="Specialized" i] .vsc-shop-image { background: #2A3A54 !important; }
.vsc-shop-bottle {
width: 110px; height: 200px;
background: linear-gradient(180deg, var(--midnight) 0%, var(--blue-secondary) 100%);
border-radius: 12px 12px 16px 16px; position: relative;
box-shadow: inset -6px 0 16px rgba(0,0,0,0.2), 0 16px 32px rgba(8,32,64,0.3);
}
.vsc-shop-bottle::before {
content: ''; position: absolute; top: -18px; left: 50%;
transform: translateX(-50%); width: 38px; height: 20px;
background: linear-gradient(180deg, #D4D8E0 0%, #9CA3B4 100%);
border-radius: 5px 5px 2px 2px;
}
.vsc-shop-bottle::after {
content: 'LUMINA'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: 'Inter', serif; font-size: 16px;
font-weight: 600; color: var(--rose); letter-spacing: 2px;
}
.vsc-shop-img {
width: 100%; height: 100%;
object-fit: contain;
transform: scale(0.9);
}
.vsc-shop-tag {
z-index: 1;
}
.vsc-product-img {
width: 100%; max-height: 320px;
object-fit: contain;
}
.vsc-gallery-img {
width: 100%; height: 100%;
object-fit: contain;
background: var(--white);
}
.vsc-shop-tag {
position: absolute; top: 20px; left: 20px;
background: var(--white); color: var(--midnight);
padding: 6px 14px; border-radius: 100px;
font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
text-transform: uppercase;
}
.vsc-shop-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.vsc-shop-category {
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--rose-hover); margin-bottom: 10px;
}
.vsc-shop-name {
font-family: 'Inter', serif;
font-size: 26px; font-weight: 600; color: var(--midnight);
margin-bottom: 10px; line-height: 1.1;
}
.vsc-shop-desc {
font-size: 14px; color: var(--text-muted); line-height: 1.6;
margin-bottom: 24px; flex: 1;
}
.vsc-shop-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 20px; border-top: 1px solid var(--border);
}
.vsc-shop-price { font-size: 22px; font-weight: 600; color: var(--midnight); font-family: 'Inter', serif; }
.vsc-shop-cart,
.vsc-shop-cart:link,
.vsc-shop-cart:visited,
.vsc-shop-cart:active,
.vsc-shop-cart:focus {
background: var(--midnight);
color: #FFFFFF !important;
padding: 11px 22px; border-radius: 100px;
font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
border: none; cursor: pointer; transition: all 0.3s; font-family: inherit;
text-decoration: none !important;
display: inline-block;
}
.vsc-shop-cart:hover { background: var(--rose); color: var(--midnight) !important; }
/* Whole shop card is clickable */
.vsc-shop-card { cursor: pointer; }
/* ============ FOOTER ============ */
.vsc-footer {
background: var(--ivory); padding: 80px 32px 40px;
border-top: 1px solid var(--border);
}
.vsc-footer-container { max-width: 1280px; margin: 0 auto; }
.vsc-footer-grid {
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 64px; margin-bottom: 64px;
}
.vsc-footer-brand .vsc-logo { margin-bottom: 20px; }
.vsc-footer-tagline {
font-size: 14px; color: var(--text-muted);
line-height: 1.7; max-width: 320px;
}
.vsc-footer h4 {
font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--midnight); margin-bottom: 22px;
}
.vsc-footer-links { list-style: none; }
.vsc-footer-links li { margin-bottom: 14px; }
.vsc-footer-links a {
font-size: 14px; color: var(--text-muted); transition: color 0.2s;
}
.vsc-footer-links a:hover { color: var(--rose-hover); }
.vsc-footer-bottom {
padding-top: 36px; border-top: 1px solid var(--border);
display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.vsc-footer-copy { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 720px; }
.vsc-footer-socials { display: flex; gap: 14px; }
.vsc-footer-socials a {
width: 38px; height: 38px; border-radius: 50%;
background: var(--white); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--midnight); transition: all 0.3s;
}
.vsc-footer-socials a:hover { background: var(--midnight); color: var(--white); border-color: var(--midnight); }
/* ============ RESEARCH BANNER ============ */
.vsc-research-banner {
position: fixed; top: 0; left: 0; right: 0;
background: var(--midnight); color: var(--white);
padding: 10px 20px; text-align: center;
font-size: 12px; font-weight: 500; letter-spacing: 0.8px;
text-transform: uppercase; z-index: 101;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vsc-research-banner strong { color: var(--rose); font-weight: 600; }
.vsc-page.has-banner .vsc-nav { top: 38px; }
.vsc-page.has-banner .vsc-hero,
.vsc-page.has-banner .vsc-page-hero { padding-top: 200px; }
/* Custom body templates (checkout, my-account) push their content below the fixed banner */
body.has-banner.vsc-checkout-page-body,
body.has-banner.vsc-myaccount-body { padding-top: 38px; }
@media (max-width: 640px) {
body.has-banner.vsc-checkout-page-body,
body.has-banner.vsc-myaccount-body { padding-top: 32px; }
}
/* ============ AGE GATE MODAL ============ */
.vsc-gate {
position: fixed; inset: 0;
background: rgba(8, 32, 64, 0.92);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
z-index: 9999; display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.vsc-gate.active { display: flex; }
.vsc-gate-card {
background: var(--white); border-radius: 28px;
max-width: 520px; width: 100%; padding: 56px 48px;
text-align: center; box-shadow: 0 40px 120px rgba(0,0,0,0.5);
}
.vsc-gate-mark {
width: 48px; height: 48px; border-radius: 50%;
background: linear-gradient(135deg, var(--midnight) 0%, var(--blue-secondary) 60%, var(--rose) 100%);
margin: 0 auto 24px; position: relative;
}
.vsc-gate-mark::after {
content: ''; position: absolute; inset: 10px;
border-radius: 50%; background: var(--white);
}
.vsc-gate-eyebrow {
display: block; font-size: 11px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--rose-hover); margin-bottom: 12px;
}
.vsc-gate-card h2 {
font-family: 'Inter', serif;
font-size: 42px; font-weight: 500; line-height: 1.05;
color: var(--midnight); letter-spacing: -1px; margin-bottom: 18px;
}
.vsc-gate-card h2 .vsc-italic { color: var(--rose-hover); }
.vsc-gate-card p {
font-size: 14px; color: var(--text-muted);
line-height: 1.7; margin-bottom: 32px;
}
.vsc-gate-card p strong { color: var(--midnight); }
.vsc-gate-checkbox {
display: flex; align-items: flex-start; gap: 14px;
text-align: left; font-size: 13px; color: var(--text-muted);
line-height: 1.6; margin-bottom: 28px; cursor: pointer;
padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--border);
background: var(--ivory); transition: border-color 0.2s;
}
.vsc-gate-checkbox:hover { border-color: var(--rose); }
.vsc-gate-checkbox input { display: none; }
.vsc-gate-checkbox strong { color: var(--midnight); }
.vsc-gate-checkmark {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
border: 2px solid var(--border); background: var(--white);
display: flex; align-items: center; justify-content: center;
transition: all 0.2s; margin-top: 1px;
}
.vsc-gate-checkbox input:checked ~ .vsc-gate-checkmark {
background: var(--midnight); border-color: var(--midnight);
}
.vsc-gate-checkmark::after {
content: ''; display: none; width: 6px; height: 10px;
border: solid var(--white); border-width: 0 2px 2px 0;
transform: rotate(45deg); margin-top: -2px;
}
.vsc-gate-checkbox input:checked ~ .vsc-gate-checkmark::after { display: block; }
.vsc-gate-actions { display: flex; gap: 12px; flex-direction: column; }
.vsc-gate-enter {
width: 100%; background: var(--rose); color: var(--midnight);
padding: 18px 32px; border-radius: 100px; border: none;
font-weight: 600; font-size: 14px; letter-spacing: 1px;
text-transform: uppercase; cursor: pointer;
font-family: inherit; transition: all 0.3s;
box-shadow: 0 8px 28px rgba(14,165,233,0.45);
}
.vsc-gate-enter:hover:not(:disabled) { background: var(--rose-hover); }
.vsc-gate-enter:disabled { opacity: 0.4; cursor: not-allowed; }
.vsc-gate-exit {
background: none; border: none; color: var(--text-muted);
font-size: 12px; cursor: pointer; padding: 14px;
text-decoration: underline; font-family: inherit;
}
.vsc-gate-fine {
font-size: 10px; color: var(--text-muted);
letter-spacing: 0.3px; margin-top: 20px; line-height: 1.5;
}
@media (max-width: 640px) {
.vsc-research-banner { font-size: 10px; padding: 9px 14px; letter-spacing: 0.5px; }
.vsc-gate-card { padding: 40px 28px; }
.vsc-gate-card h2 { font-size: 32px; }
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.vsc-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 768px) {
/* .vsc-nav-links is now a full-screen slide-in overlay — controlled in the 900px breakpoint below */
.vsc-page-hero { padding: 140px 24px 70px; }
.vsc-section { padding: 80px 24px; }
.vsc-footer-grid { grid-template-columns: 1fr; gap: 40px; }
.vsc-footer-bottom { flex-direction: column; }
.vsc-hamburger { display: inline-flex !important; }
}
/* ============ MOBILE HAMBURGER NAV ============ */
.vsc-hamburger {
display: none;
background: none; border: none; padding: 10px; margin-left: 4px;
cursor: pointer; width: 44px; height: 44px;
align-items: center; justify-content: center;
color: var(--midnight);
border-radius: 10px;
transition: background 0.2s;
}
.vsc-hamburger:hover { background: var(--rose-soft); }
.vsc-hamburger svg { width: 24px; height: 24px; }
.vsc-mobile-menu {
display: none;
position: fixed; inset: 0; z-index: 9990;
background: var(--ivory);
padding: 80px 24px 40px;
overflow-y: auto;
}
.vsc-mobile-menu.active { display: block; }
.vsc-mobile-menu-close {
position: absolute; top: 20px; right: 20px;
background: none; border: none; cursor: pointer;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
color: var(--midnight);
}
.vsc-mobile-menu ul {
list-style: none; padding: 0; margin: 24px 0 0;
display: flex; flex-direction: column;
}
.vsc-mobile-menu li a {
display: block; padding: 20px 8px;
border-bottom: 1px solid var(--border);
font-family: 'Inter', serif;
font-size: 24px; font-weight: 500;
color: var(--midnight); text-decoration: none;
letter-spacing: -0.3px;
}
.vsc-mobile-menu li a:hover { color: var(--rose-hover); }
/* ============ MOBILE P0/P1 FIXES ============ */
@media (max-width: 640px) {
/* P0 — prevent iOS input zoom on focus (font-size must be ≥16px) */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
select, textarea {
font-size: 16px !important;
}
/* P0 — auth gate scrollable + tighter padding */
.vsc-gate {
align-items: flex-start;
overflow-y: auto;
padding: 24px 16px;
}
.vsc-gate-card { padding: 28px 22px; }
.vsc-gate-card h2 { font-size: 26px; }
/* P0 — reduce top padding on pages with banner */
.vsc-page.has-banner .vsc-page-hero { padding-top: 150px; }
/* P1 — 44×44 touch targets */
.vsc-cart-close,
.vsc-cart-item-remove,
.vsc-cart-upsell-close,
.vsc-qty-btn,
.vsc-pdp-qty button,
.vsc-footer-socials a {
min-width: 44px; min-height: 44px;
}
.vsc-category-pill { padding: 12px 20px; min-height: 44px; }
.vsc-tab-btn { min-height: 44px; }
/* P1 — homepage hero visual overflow fix */
.vsc-hero-container { grid-template-columns: 1fr !important; gap: 40px !important; }
.vsc-hero-visual { height: auto !important; min-height: 460px; }
.vsc-product-main {
position: relative !important;
width: 100% !important; max-width: 340px !important;
right: auto !important; top: auto !important;
margin: 0 auto !important;
}
.vsc-float-1, .vsc-float-2 { display: none !important; }
/* P1 — PDP purchase row wrap (legacy: only when cart sits alone in .vsc-pdp-purchase) */
.vsc-pdp-purchase { flex-wrap: wrap; gap: 12px; }
.vsc-pdp-purchase .vsc-pdp-cart { flex: 1 1 100%; min-width: 100%; padding: 16px 24px; }
/* v4.9.1: Add button now lives beside the CoA pill in .vsc-pdp-actions — must shrink to fit, not force 100% width */
.vsc-pdp-actions .vsc-pdp-cart { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
/* P1 — shop hero stats tighter */
.vsc-shop-stats { gap: 6px; }
.vsc-shop-stat { padding: 14px 6px; }
.vsc-shop-stat-num { font-size: 28px; }
.vsc-shop-stat-label { font-size: 9px; letter-spacing: 1px; }
/* P1 — side cart drawer item layout (matches aminoclub reference card) */
.vsc-cart-item {
grid-template-columns: 80px 1fr !important;
padding: 16px !important;
gap: 14px;
align-items: center !important;
}
.vsc-cart-item-img { width: 80px !important; height: 80px !important; align-self: center !important; }
/* qty pill + stacked price share one baseline row */
.vsc-cart-item-bottom { flex-wrap: nowrap; gap: 10px; margin-top: 14px; align-items: flex-end; }
/* P1 — qty dropdown stays inside viewport */
.vsc-cart-drawer .vsc-qty-dropdown {
right: 0 !important; left: auto !important;
}
/* P1 — FAQ sidebar collapse */
.vsc-faq-nav { display: none; }
/* P1 — product gallery thumb grid */
.vsc-gallery-thumbs {
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
gap: 10px;
}
/* P2 — category pills horizontal scroll to avoid 4-row stack */
.vsc-category-pills {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
scrollbar-width: none;
}
.vsc-category-pills::-webkit-scrollbar { display: none; }
.vsc-category-pill { flex-shrink: 0; }
}
/* ===== SHOP PAGE STYLES (from shop.html) ===== */
/* ========== Shop hero with stats ========== */
.vsc-shop-hero {
padding: 130px 32px 60px;
background:
radial-gradient(ellipse 900px 600px at 85% 25%, var(--rose-soft) 0%, transparent 60%),
radial-gradient(ellipse 600px 500px at 10% 90%, #F0EDF5 0%, transparent 60%),
var(--ivory);
position: relative; overflow: hidden;
}
.vsc-shop-hero-container {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 60px; align-items: center;
}
.vsc-shop-hero-left { max-width: 580px; }
.vsc-shop-hero .vsc-eyebrow {
display: inline-block; font-size: 12px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--rose-hover); margin-bottom: 16px;
}
.vsc-shop-hero h1 {
font-family: 'Inter', serif;
font-size: clamp(44px, 6vw, 72px); font-weight: 500;
line-height: 1.02; color: var(--midnight);
letter-spacing: -1.5px; margin-bottom: 24px;
}
.vsc-shop-hero p {
font-size: 17px; color: var(--text-muted);
line-height: 1.7; max-width: 540px;
}
.vsc-shop-hero p strong { color: var(--midnight); }
.vsc-shop-hero-desc-mobile { display: none; }
.vsc-shop-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.vsc-shop-stat {
background: rgba(255, 255, 255, 0.75);
border: 1px solid var(--border);
border-radius: 20px;
padding: 26px 18px;
text-align: center;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 8px 28px rgba(8, 32, 64, 0.04);
}
.vsc-shop-stat-num {
font-family: 'Inter', serif;
font-size: 44px; font-weight: 600;
color: var(--midnight);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -1px;
}
.vsc-shop-stat-num .vsc-italic { color: var(--rose-hover); font-style: italic; }
.vsc-shop-stat-label {
font-size: 10px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-muted);
}
/* ========== Filter bar ========== */
.vsc-filter-bar {
max-width: 1280px; margin: 0 auto 40px;
}
.vsc-filter-top {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.vsc-search {
flex: 1; min-width: 240px; max-width: 480px;
display: flex; align-items: center; gap: 12px;
background: var(--white); border: 1px solid var(--border);
padding: 10px 20px; border-radius: 100px;
transition: border-color 0.2s;
}
.vsc-search:focus-within { border-color: var(--rose); }
.vsc-search svg { color: var(--text-muted); flex-shrink: 0; }
.vsc-search input {
flex: 1; border: none; outline: none;
font-size: 14px; color: var(--midnight);
font-family: inherit; background: transparent;
}
.vsc-search input::placeholder { color: var(--text-muted); }
.vsc-shop-sort {
display: flex; align-items: center; gap: 12px;
font-size: 13px; color: var(--text-muted);
}
.vsc-shop-sort select {
background: var(--white); border: 1px solid var(--border);
padding: 10px 18px; border-radius: 100px;
font-size: 13px; color: var(--midnight); font-family: inherit;
cursor: pointer; outline: none;
}
.vsc-category-pills {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 20px;
}
.vsc-category-pill {
padding: 10px 20px; border-radius: 100px;
background: var(--white); border: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--text-muted);
cursor: pointer; transition: all 0.2s;
font-family: inherit;
}
.vsc-category-pill:hover:not(.active) { border-color: var(--rose); color: var(--midnight); }
.vsc-category-pill.active {
background: var(--midnight); color: var(--white);
border-color: var(--midnight);
}
.vsc-category-pill span {
margin-left: 6px; opacity: 0.6; font-size: 11px;
}
.vsc-category-pill.active span { opacity: 0.8; }
.vsc-shop-count {
font-size: 13px; color: var(--text-muted); letter-spacing: 0.3px;
padding-top: 12px; border-top: 1px solid var(--border);
}
.vsc-shop-count strong { color: var(--midnight); }
/* ========== Grid (full width, no sidebar) ========== */
.vsc-shop-grid {
max-width: 1280px; margin: 0 auto;
}
.vsc-shop-results { min-height: 500px; }
.vsc-products-grid-lg {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 1024px) {
.vsc-shop-hero-container { grid-template-columns: 1fr; gap: 40px; }
.vsc-products-grid-lg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
/* Center-align the hero copy on mobile */
.vsc-shop-hero-left { max-width: none; text-align: center; margin: 0 auto; }
.vsc-shop-hero-left .vsc-eyebrow { display: inline-block; }
.vsc-shop-hero-left p { max-width: 460px; margin-left: auto; margin-right: auto; }
/* Swap to short, formatted mobile description */
.vsc-shop-hero-desc-desktop { display: none !important; }
.vsc-shop-hero-desc-mobile { display: block !important; font-size: 13px !important; line-height: 1.55 !important; max-width: 320px !important; }
/* Hide the Sort By dropdown on mobile */
.vsc-shop-sort { display: none !important; }
}
@media (max-width: 640px) {
.vsc-shop-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vsc-shop-stat { padding: 18px 10px; }
.vsc-shop-stat-num { font-size: 32px; }
.vsc-products-grid-lg { grid-template-columns: 1fr; }
}
/* ===== PRODUCT PAGE STYLES (from product.html) ===== */
.vsc-product-detail {
padding: 32px 32px 80px;
background: var(--ivory);
}
.vsc-breadcrumb {
max-width: 1280px; margin: 0 auto 32px;
font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px;
}
.vsc-breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.vsc-breadcrumb a:hover { color: var(--rose-hover); }
.vsc-breadcrumb span { margin: 0 10px; opacity: 0.5; }
.vsc-breadcrumb strong { color: var(--midnight); }
.vsc-product-layout {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 1fr;
gap: 80px; align-items: start;
}
/* Gallery */
.vsc-gallery { position: sticky; top: 100px; }
.vsc-gallery-main {
background: linear-gradient(160deg, var(--rose-soft) 0%, #E8EDF5 100%);
border-radius: 28px; aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.vsc-gallery-main .vsc-shop-bottle {
width: 200px; height: 360px; border-radius: 16px 16px 24px 24px;
}
.vsc-gallery-main .vsc-shop-bottle::before { width: 60px; height: 30px; top: -26px; }
.vsc-gallery-main .vsc-shop-bottle::after { font-size: 26px; }
.vsc-gallery-thumbs {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 14px; margin-top: 18px;
}
.vsc-gallery-thumb {
aspect-ratio: 1 / 1; border-radius: 14px;
background: linear-gradient(160deg, var(--rose-soft) 0%, #E8EDF5 100%);
border: 2px solid transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.2s;
}
.vsc-gallery-thumb.active { border-color: var(--midnight); }
.vsc-gallery-thumb .vsc-shop-bottle {
width: 45px; height: 80px; border-radius: 6px 6px 10px 10px;
}
.vsc-gallery-thumb .vsc-shop-bottle::before, .vsc-gallery-thumb .vsc-shop-bottle::after { display: none; }
/* Info */
.vsc-pdp-info h1 {
font-family: 'Inter', serif;
font-size: clamp(40px, 5vw, 60px); font-weight: 500;
line-height: 1.05; letter-spacing: -1px; color: var(--midnight);
margin-bottom: 14px;
}
.vsc-pdp-category {
font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--rose-hover); margin-bottom: 14px;
}
.vsc-pdp-reviews {
display: flex; align-items: center; gap: 12px;
margin-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.vsc-pdp-reviews .vsc-trust-stars {
color: var(--rose-hover); font-size: 15px; letter-spacing: 2px;
}
.vsc-pdp-reviews span { font-size: 13px; color: var(--text-muted); }
.vsc-pdp-price {
font-family: 'Inter', serif;
font-size: 42px; font-weight: 600; color: var(--midnight);
margin-bottom: 8px;
}
.vsc-pdp-subscribe {
font-size: 13px; color: var(--text-muted); margin-bottom: 28px;
}
.vsc-pdp-subscribe strong { color: var(--rose-hover); }
.vsc-pdp-desc {
font-size: 16px; color: var(--text-muted); line-height: 1.7;
margin-bottom: 32px;
}
.vsc-pdp-options { margin-bottom: 32px; }
.vsc-pdp-option-label {
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
color: var(--midnight); margin-bottom: 12px; display: block;
}
.vsc-pdp-option-label span { color: var(--text-muted); font-weight: 400; }
.vsc-pdp-sizes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 10px; margin-bottom: 24px;
}
.vsc-pdp-size {
padding: 12px 8px; border-radius: 12px;
border: 1.5px solid var(--border); background: var(--white);
cursor: pointer; text-align: center; transition: all 0.2s;
text-decoration: none; min-width: 0;
}
.vsc-pdp-size.active { border-color: var(--midnight); background: var(--ivory); }
.vsc-pdp-size strong { display: block; font-size: 14px; color: var(--midnight); margin-bottom: 2px; }
.vsc-pdp-size span { font-size: 12px; color: var(--text-muted); }
.vsc-pdp-purchase { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.vsc-pdp-qty {
display: flex; align-items: center;
background: var(--white); border: 1px solid var(--border);
border-radius: 100px; padding: 4px;
}
.vsc-pdp-qty button {
width: 38px; height: 38px; border-radius: 50%;
background: transparent; border: none; font-size: 18px;
color: var(--midnight); cursor: pointer;
}
.vsc-pdp-qty input {
width: 40px; border: none; text-align: center;
font-size: 15px; font-weight: 600; color: var(--midnight);
font-family: inherit; outline: none;
}
.vsc-pdp-cart {
flex: 1; background: var(--rose); color: var(--midnight);
padding: 19px 32px; border-radius: 100px;
font-weight: 600; font-size: 15px; letter-spacing: 0.3px;
border: none; cursor: pointer; transition: all 0.3s;
box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
font-family: inherit;
}
.vsc-pdp-cart:hover { background: var(--rose-hover); }
.vsc-pdp-benefits {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 12px; padding-top: 28px; border-top: 1px solid var(--border);
}
.vsc-pdp-benefit {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--text-muted);
}
.vsc-pdp-benefit svg { color: var(--rose-hover); flex-shrink: 0; }
/* Tabs */
.vsc-pdp-tabs {
max-width: 1280px; margin: 100px auto 0;
border-top: 1px solid var(--border);
padding-top: 60px;
}
.vsc-tab-nav {
display: flex; gap: 40px; border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}
.vsc-tab-btn {
background: none; border: none; padding: 16px 0;
font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
color: var(--text-muted); cursor: pointer;
border-bottom: 2px solid transparent; font-family: inherit;
text-transform: uppercase;
}
.vsc-tab-btn.active { color: var(--midnight); border-bottom-color: var(--midnight); }
.vsc-tab-content { display: none; max-width: 820px; }
.vsc-tab-content.active { display: block; }
.vsc-tab-content p {
font-size: 16px; color: var(--text-muted);
line-height: 1.8; margin-bottom: 20px;
}
.vsc-tab-content h4 {
font-family: 'Inter', serif;
font-size: 26px; color: var(--midnight); margin: 28px 0 14px;
}
.vsc-ingredient-list { list-style: none; padding: 0; }
.vsc-ingredient-list li {
padding: 18px 0; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; gap: 24px;
}
.vsc-ingredient-list strong { font-family: 'Inter', serif; font-size: 18px; color: var(--midnight); }
.vsc-ingredient-list span { font-size: 14px; color: var(--text-muted); max-width: 500px; text-align: right; }
.vsc-related { padding: 100px 32px; background: var(--white); }
.vsc-related-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 28px; max-width: 1280px; margin: 0 auto;
}
@media (max-width: 1024px) {
.vsc-product-layout { grid-template-columns: 1fr; gap: 48px; }
.vsc-gallery { position: static; }
.vsc-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.vsc-pdp-benefits { grid-template-columns: 1fr; gap: 8px !important; padding-top: 16px !important; }
.vsc-pdp-benefit { font-size: 12px !important; }
.vsc-tab-nav { gap: 20px; overflow-x: auto; }
.vsc-related-grid { grid-template-columns: 1fr; }
/* Hide secondary thumbnail on mobile */
.vsc-gallery-thumbs { display: none !important; }
/* Tighter product layout */
.vsc-product-layout { gap: 20px !important; }
.vsc-gallery-main { border-radius: 18px !important; }
.vsc-pdp-info h1 { font-size: 30px !important; margin-bottom: 4px !important; line-height: 1.1 !important; }
.vsc-pdp-category { font-size: 11px !important; margin-bottom: 8px !important; letter-spacing: 1.2px !important; }
.vsc-pdp-sku { font-size: 11px !important; margin-bottom: 8px !important; }
.vsc-pdp-reviews { margin-bottom: 14px !important; padding-bottom: 14px !important; gap: 8px !important; }
.vsc-pdp-reviews .vsc-trust-stars { font-size: 12px !important; }
.vsc-pdp-reviews span { font-size: 12px !important; }
.vsc-pdp-qtyrow .vsc-pdp-price { font-size: 26px !important; margin: 0 0 0 auto !important; }
.vsc-pdp-subscribe { font-size: 12px !important; margin-bottom: 14px !important; }
.vsc-pdp-desc { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }
.vsc-pdp-options { margin-bottom: 16px !important; }
.vsc-pdp-option-label { font-size: 14px !important; margin: 0 !important; }
.vsc-pdp-options .vsc-pdp-sizes { gap: 8px !important; margin: 0 !important; }
.vsc-pdp-cart { padding: 14px 24px !important; font-size: 14px !important; }
}
/* ============ COMPOUND INFORMATION ============ */
.vsc-compound-info, .vsc-sources {
max-width: 1280px;
margin: 0 auto;
padding: 60px 0;
}
.vsc-compound-info { border-top: 1px solid var(--border); }
.vsc-sources { border-top: 1px solid var(--border); }
.vsc-compound-header {
display: flex; align-items: center; gap: 16px;
margin-bottom: 32px;
}
.vsc-compound-header-icon {
width: 56px; height: 56px; border-radius: 16px;
background: #E0F2FE; color: #0284C7;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vsc-compound-header-icon.sources { background: var(--rose-soft); color: var(--rose-hover); }
.vsc-compound-header h2 {
font-family: 'Inter', serif;
font-size: 36px; font-weight: 600; color: var(--midnight);
line-height: 1.1; letter-spacing: -0.5px;
margin-bottom: 4px;
}
.vsc-compound-header p {
font-size: 14px; color: var(--text-muted);
margin: 0;
}
.vsc-compound-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px;
}
.vsc-compound-card {
background: var(--white); border: 1px solid var(--border);
border-radius: 20px; padding: 32px;
}
.vsc-compound-card-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--text-muted);
margin-bottom: 12px;
}
.vsc-compound-card h3 {
font-size: 22px; font-weight: 700; color: var(--midnight);
margin-bottom: 18px;
font-family: 'Inter', sans-serif;
}
.vsc-compound-specs {
background: var(--ivory); border-radius: 14px;
padding: 4px 20px; margin-bottom: 16px;
}
.vsc-compound-specs div {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 0; border-bottom: 1px solid var(--border);
font-size: 14px;
}
.vsc-compound-specs div:last-child { border-bottom: none; }
.vsc-compound-specs dt { color: var(--text-muted); font-weight: 400; }
.vsc-compound-specs dd {
color: var(--midnight); font-weight: 700; margin: 0;
font-family: 'Inter', sans-serif;
}
.vsc-compound-specs dd.mono { font-family: 'Courier New', monospace; font-size: 13px; }
.vsc-compound-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: #0284C7; font-weight: 500;
text-decoration: none; margin-top: 8px;
}
.vsc-compound-link:hover { color: #082040; }
.vsc-compound-pills {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 18px;
}
.vsc-compound-pill {
padding: 8px 16px; border-radius: 100px;
background: var(--ivory); border: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--midnight);
}
.vsc-compound-storage {
display: flex; flex-direction: column; gap: 10px;
}
.vsc-compound-storage-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; border-radius: 14px;
background: var(--ivory); border: 1px solid var(--border);
}
.vsc-compound-storage-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vsc-compound-storage-icon.cold { background: #E0F2FE; color: #1E6FBF; }
.vsc-compound-storage-icon.warm { background: #E0F2FE; color: #0284C7; }
.vsc-compound-storage-icon.special { background: var(--rose-soft); color: var(--rose-hover); }
.vsc-compound-storage-text {
font-size: 13px; color: var(--text-muted);
}
.vsc-compound-storage-text strong {
display: block; color: var(--midnight); font-weight: 700;
font-size: 15px;
}
/* ============ SOURCES & REFERENCES ============ */
.vsc-sources-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.vsc-source-card {
background: var(--white); border: 1px solid var(--border);
border-radius: 18px; padding: 22px;
display: flex; flex-direction: column;
}
.vsc-source-journal {
font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: #0284C7;
margin-bottom: 10px; line-height: 1.4;
}
.vsc-source-title {
font-size: 14px; font-weight: 600; color: var(--midnight);
line-height: 1.4; margin-bottom: 14px;
}
.vsc-source-meta {
font-size: 11px; color: var(--text-muted);
margin-bottom: 10px;
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.vsc-source-meta span:not(:last-child)::after {
content: '•'; margin-left: 8px; opacity: 0.5;
}
.vsc-source-authors {
font-size: 12px; color: var(--text-muted);
font-style: italic; margin-bottom: 12px;
line-height: 1.5;
}
.vsc-source-link {
margin-top: auto;
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; color: #0284C7; font-weight: 500;
text-decoration: none;
}
.vsc-source-link:hover { color: #082040; }
.vsc-sources-note {
margin-top: 24px; padding: 14px 18px;
background: var(--ivory); border-radius: 12px;
font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.vsc-sources-empty {
padding: 40px 24px; text-align: center;
background: var(--ivory); border-radius: 16px;
color: var(--text-muted); font-size: 14px;
}
@media (max-width: 1024px) {
.vsc-compound-grid { grid-template-columns: 1fr; }
.vsc-sources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.vsc-sources-grid { grid-template-columns: 1fr; }
.vsc-compound-info, .vsc-sources { padding: 40px 0; }
.vsc-compound-header h2 { font-size: 28px; }
/* Stop long spec values (the amino-acid Sequence + Formula are unbreakable tokens)
from setting the card's min-content width and pushing the whole page wider than
the phone. Let the grid item + flex rows shrink, and let the values wrap/break. */
.vsc-compound-card { min-width: 0 !important; }
.vsc-compound-grid { min-width: 0; }
.vsc-compound-specs div { min-width: 0; gap: 14px; }
.vsc-compound-specs dt { flex-shrink: 0; }
.vsc-compound-specs dd { min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: right; }
.vsc-compound-specs dd.mono { word-break: break-all; }
}
/* =============================================================
Lumina Checkout Page — overrides WC classic checkout styling.
============================================================= */
/* Load Inter for the checkout page (scoped — rest of site keeps Inter/Cormorant) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Checkout palette — pulled from amino club reference for a cleaner, brighter look */
.vsc-checkout-page-body {
--vsc-bg: #F5F6F7;
--vsc-card: #FFFFFF;
--vsc-border: #E8EAED;
--vsc-text: #0A0A0A;
--vsc-muted: #6B7280;
--vsc-green: #0EA5E9;
--vsc-green-bg: #E0F2FE;
--vsc-req: #EF4444;
background: var(--vsc-bg); margin: 0;
color: var(--vsc-text);
font-family: 'Inter', 'Inter', system-ui, -apple-system, sans-serif;
letter-spacing: -0.01em;
}
.vsc-checkout-page-body *,
.vsc-checkout-page-body input,
.vsc-checkout-page-body select,
.vsc-checkout-page-body textarea,
.vsc-checkout-page-body button {
font-family: 'Inter', 'Inter', system-ui, -apple-system, sans-serif;
}
.vsc-checkout-page { background: var(--vsc-bg); min-height: 80vh; padding: 0 0 80px; }
.vsc-checkout-topbar {
max-width: 1280px; margin: 0 auto;
padding: 14px 32px;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
border-bottom: 1px solid var(--vsc-border);
}
.vsc-checkout-topbar .vsc-checkout-back { justify-self: start; }
.vsc-checkout-logo {
justify-self: center;
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Inter', serif;
font-size: 22px; font-weight: 600; color: var(--midnight);
text-decoration: none; letter-spacing: -0.3px;
}
.vsc-checkout-logo .vsc-logo-mark {
width: 26px; height: 26px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--rose-soft), var(--rose) 70%);
box-shadow: 0 4px 12px rgba(14,165,233,0.4);
}
.vsc-checkout-topbar .vsc-checkout-secure { justify-self: end; }
@media (max-width: 640px) {
/* 2-col layout on mobile: Back on left, Secure on right, hide center logo */
.vsc-checkout-topbar {
grid-template-columns: 1fr 1fr !important;
padding: 28px 18px 14px;
gap: 12px;
border-bottom: 1px solid var(--vsc-border);
}
.vsc-checkout-logo { display: none !important; }
.vsc-checkout-back {
font-size: 14px; gap: 8px;
color: var(--vsc-text);
justify-self: start;
}
.vsc-checkout-back svg { width: 18px; height: 18px; }
.vsc-checkout-secure {
padding: 8px 14px;
font-size: 12px;
white-space: nowrap;
gap: 6px;
justify-self: end;
border-radius: 100px;
}
.vsc-checkout-secure svg { width: 13px; height: 13px; }
}
.vsc-checkout-back {
display: inline-flex; align-items: center; gap: 8px;
color: var(--vsc-text); font-weight: 600; font-size: 14px;
text-decoration: none; transition: color 0.2s;
}
.vsc-checkout-back:hover { color: var(--vsc-muted); }
.vsc-checkout-secure {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 100px;
background: var(--vsc-card); border: 1px solid #BAE6FD;
color: var(--vsc-green); font-weight: 600; font-size: 13px;
}
.vsc-checkout-secure svg { color: var(--vsc-green); }
.vsc-checkout-container {
max-width: 1280px; margin: 0 auto;
padding: 0 32px;
}
.vsc-checkout-header { margin-bottom: 20px; padding-top: 24px; }
.vsc-checkout-header h1 {
font-family: inherit;
font-size: clamp(26px, 2.8vw, 32px); font-weight: 800;
color: var(--vsc-text); letter-spacing: -0.5px; margin: 0 0 4px;
}
.vsc-checkout-header p { font-size: 13px; color: var(--vsc-muted); }
@media (max-width: 640px) {
.vsc-checkout-header { margin-bottom: 8px !important; padding-top: 12px !important; }
.vsc-checkout-header h1 { font-size: 20px !important; margin-bottom: 2px !important; }
.vsc-checkout-header p { font-size: 12px !important; }
}
/* ============ MOBILE STICKY BOTTOM BAR + ORDER SUMMARY SHEET ============ */
.vsc-mobile-bar { display: none; }
@media (max-width: 768px) {
.vsc-mobile-bar {
display: block; position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid #E5E5E5;
padding: 8px 20px 14px;
z-index: 998;
box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
cursor: pointer;
}
.vsc-mobile-bar-chevron {
display: flex; justify-content: center; margin-bottom: 4px;
}
.vsc-mobile-bar-chevron svg { color: #0284C7; }
.vsc-mobile-bar-row {
display: flex; align-items: center; justify-content: space-between;
font-size: 14px;
}
.vsc-mobile-bar-pill {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: #082040; color: #fff;
font-weight: 700; font-size: 12px;
margin-right: 8px;
}
.vsc-mobile-bar-count { color: #6B7280; display: inline-flex; align-items: center; }
.vsc-mobile-bar-total { color: #6B7280; }
.vsc-mobile-bar-total strong { font-size: 16px; color: #082040; margin-left: 4px; font-weight: 700; }
.vsc-checkout-page { padding-bottom: 90px !important; }
}
.vsc-mobile-summary-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: 9998; opacity: 0; transition: opacity 0.3s;
}
.vsc-mobile-summary-backdrop.is-open { opacity: 1; }
.vsc-mobile-summary-backdrop[hidden] { display: none; }
.vsc-mobile-summary-sheet {
position: fixed; left: 0; right: 0; bottom: 0;
background: #fff;
border-radius: 20px 20px 0 0;
z-index: 9999;
max-height: 85vh; overflow-y: auto;
padding: 12px 20px 24px;
transform: translateY(100%); transition: transform 0.3s ease;
}
.vsc-mobile-summary-sheet.is-open { transform: translateY(0); }
.vsc-mobile-summary-sheet[hidden] { display: none; }
.vsc-mobile-sheet-handle {
width: 40px; height: 4px; border-radius: 2px;
background: #CBD5E1; margin: 0 auto 12px;
}
.vsc-mobile-sheet-title {
text-align: center; font-size: 17px; font-weight: 700;
color: #082040; margin: 0 0 4px;
}
.vsc-mobile-sheet-meta {
text-align: center; font-size: 13px; color: #6B7280;
margin: 0 0 16px;
}
.vsc-mobile-sheet-items { border-top: 1px solid #E5E5E5; padding-top: 14px; }
.vsc-mobile-sheet-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
}
.vsc-mobile-sheet-item img {
width: 56px; height: 56px; border-radius: 8px;
object-fit: cover; background: #F5F5F5;
}
.vsc-mobile-sheet-item-info { flex: 1; }
.vsc-mobile-sheet-item-name { font-weight: 600; font-size: 14px; color: #082040; }
.vsc-mobile-sheet-item-qty { font-size: 12px; color: #6B7280; margin-top: 2px; }
.vsc-mobile-sheet-item-price { font-weight: 700; color: #082040; font-size: 14px; }
.vsc-mobile-sheet-promo-wrap {
border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;
margin: 8px 0 14px;
padding: 4px 0;
}
.vsc-mobile-sheet-promo {
display: flex; align-items: center; gap: 8px;
padding: 10px 0; font-size: 13px; font-weight: 600; color: #082040;
background: none; border: none; cursor: pointer;
width: 100%; text-align: left;
font-family: inherit;
}
.vsc-mobile-promo-form {
display: flex; gap: 8px; padding: 0 0 12px;
}
.vsc-mobile-promo-form[hidden] { display: none; }
.vsc-mobile-promo-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #E5E5E5;
border-radius: 10px;
font-size: 13px; font-family: inherit;
outline: none;
background: #fff;
}
.vsc-mobile-promo-input:focus { border-color: #082040; }
.vsc-mobile-promo-apply {
background: #082040; color: #fff;
border: none; border-radius: 10px;
padding: 10px 18px; font-weight: 600; font-size: 13px;
cursor: pointer; font-family: inherit;
}
.vsc-mobile-promo-apply:disabled { opacity: 0.6; cursor: wait; }
.vsc-mobile-promo-msg {
font-size: 12px; padding: 4px 0 8px;
color: #0284C7;
}
.vsc-mobile-promo-msg.is-error { color: #C8102E; }
.vsc-mobile-promo-msg[hidden] { display: none; }
.vsc-mobile-sheet-totals {
padding-top: 4px;
}
.vsc-mobile-sheet-row {
display: flex; justify-content: space-between;
font-size: 14px; color: #082040; margin-bottom: 8px;
}
.vsc-mobile-sheet-row .is-free { color: #0284C7; font-weight: 600; }
.vsc-mobile-sheet-row .is-discount { color: #0284C7; }
.vsc-mobile-sheet-total {
display: flex; justify-content: space-between;
font-weight: 700; font-size: 16px; color: #082040;
padding-top: 14px; border-top: 1px solid #E5E5E5;
margin-top: 6px;
}
.vsc-mobile-sheet-done {
width: 100%; padding: 16px;
background: #082040; color: #fff;
border: none; border-radius: 100px;
font-weight: 700; font-size: 14px;
margin-top: 18px; cursor: pointer;
font-family: inherit;
}
/* 2-column layout: main form + sticky order summary sidebar */
.vsc-checkout-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
align-items: start;
}
/* Cards */
.vsc-checkout-card {
background: var(--vsc-card);
border: 1px solid var(--vsc-border);
border-radius: 16px;
margin-bottom: 16px;
overflow: hidden;
padding: 22px 26px;
}
.vsc-checkout-card.is-locked { display: none; }
.vsc-checkout-step-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.vsc-checkout-step-head-left {
display: flex; align-items: center; gap: 14px;
}
.vsc-checkout-step-head h3 {
font-family: inherit;
font-size: 17px; font-weight: 700; color: var(--vsc-text);
margin: 0; letter-spacing: -0.2px;
}
.vsc-checkout-step-num {
width: 26px; height: 26px; border-radius: 50%;
background: var(--vsc-text); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
flex-shrink: 0;
}
.vsc-step-check { display: none; }
.vsc-checkout-card.is-complete .vsc-step-check { display: inline-block; }
.vsc-checkout-card.is-complete .vsc-checkout-step-num { background: var(--midnight); }
.vsc-step-edit {
background: none; border: none; padding: 0;
font-family: inherit; font-size: 14px; font-weight: 600;
color: var(--vsc-text); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
display: none;
}
.vsc-checkout-card.is-complete .vsc-step-edit { display: inline-block; }
.vsc-step-edit:hover { color: var(--rose-hover); }
/* Trust icons row */
.vsc-checkout-trust {
display: flex; flex-wrap: wrap; gap: 16px;
margin: 0 0 14px;
font-size: 11px; font-weight: 500; color: var(--vsc-green);
}
.vsc-checkout-trust svg { stroke: var(--vsc-green); }
.vsc-checkout-trust span {
display: inline-flex; align-items: center; gap: 6px;
}
.vsc-checkout-trust svg { flex-shrink: 0; }
.vsc-checkout-card.is-complete .vsc-checkout-trust { display: none; }
/* Continue button at bottom of step 1 */
.vsc-step-continue {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: auto; min-width: 220px; margin: 24px auto 4px;
padding: 14px 32px;
background: var(--vsc-text); color: #fff;
border: none; border-radius: 100px;
font-family: inherit; font-size: 14px; font-weight: 600;
letter-spacing: 0.3px; cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-step-continue:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,10,10,0.2); }
/* Center the continue button in its column */
.vsc-step-body { display: flex; flex-direction: column; }
.vsc-step-body > .vsc-step-continue { align-self: center; }
/* Collapsed summary view — hidden by default, shown only when card is complete */
.vsc-step-summary {
display: none;
grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.vsc-summary-label {
font-size: 13px; font-weight: 700; color: var(--vsc-text);
margin-bottom: 10px;
}
.vsc-summary-value {
font-size: 14px; color: var(--vsc-text); line-height: 1.6;
}
.vsc-summary-hint {
font-size: 12px; color: var(--vsc-muted);
margin-top: 8px;
}
.vsc-checkout-card.is-complete [data-step-body] { display: none; }
.vsc-checkout-card.is-complete .vsc-step-summary { display: grid; }
/* Mobile: stack summary columns as individual cards */
@media (max-width: 768px) {
.vsc-step-summary {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.vsc-summary-col {
background: #F5F5F5;
border-radius: 12px;
padding: 14px 16px;
}
.vsc-summary-label { margin-bottom: 6px !important; font-size: 13px !important; }
.vsc-summary-value { font-size: 14px !important; color: var(--vsc-muted) !important; }
.vsc-summary-hint { font-size: 11px !important; margin-top: 6px !important; }
}
/* 3-step progress indicator at top of checkout */
.vsc-checkout-progress {
display: flex; align-items: center; justify-content: center;
gap: 12px; max-width: 320px; margin: 0 auto 20px;
padding-top: 16px;
}
.vsc-progress-dot {
width: 12px; height: 12px; border-radius: 50%;
background: #CBD5E1; transition: background 0.3s, transform 0.3s;
}
.vsc-progress-dot.is-active { background: var(--vsc-text, #082040); }
.vsc-progress-dot.is-current { transform: scale(1.4); }
.vsc-progress-line {
flex: 1; height: 1.5px; background: #CBD5E1; max-width: 80px;
}
/* Step sub-headers (used in Delivery Method) */
.vsc-step-sub {
font-size: 15px; font-weight: 600; color: var(--vsc-text, #082040);
margin-bottom: 4px;
}
.vsc-step-sub-help {
font-size: 13px; color: var(--vsc-muted, #6B7280);
margin-bottom: 16px;
}
/* Shipping option cards (custom step 2 picker) */
.vsc-shipping-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vsc-shipping-card {
position: relative;
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: var(--vsc-card, #fff);
border: 1.5px solid var(--vsc-border, #E5E5E5);
border-radius: 12px;
cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.vsc-shipping-card.is-selected,
.vsc-shipping-card:has(input:checked) {
border-color: var(--vsc-text, #082040);
background: var(--vsc-bg, #FAFAFA);
}
.vsc-shipping-card input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.vsc-shipping-card-radio {
width: 18px; height: 18px; border-radius: 50%;
border: 1.8px solid #CBD5E1; flex-shrink: 0;
position: relative;
}
.vsc-shipping-card.is-selected .vsc-shipping-card-radio,
.vsc-shipping-card:has(input:checked) .vsc-shipping-card-radio {
border-color: var(--vsc-text, #082040);
}
.vsc-shipping-card.is-selected .vsc-shipping-card-radio::after,
.vsc-shipping-card:has(input:checked) .vsc-shipping-card-radio::after {
content: ''; position: absolute; inset: 3px;
border-radius: 50%; background: var(--vsc-text, #082040);
}
.vsc-shipping-card-body {
flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.vsc-shipping-card-name {
font-size: 14px; font-weight: 600; color: var(--vsc-text, #082040);
}
.vsc-shipping-card-price {
font-size: 14px; font-weight: 700; color: var(--vsc-text, #082040);
}
.vsc-shipping-card-price.is-free { color: #0284C7; }
/* Shipping methods as selectable cards (WC default radio list) */
.woocommerce-checkout #shipping_method {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex; flex-direction: column; gap: 10px;
}
.woocommerce-checkout #shipping_method li {
position: relative;
border: 1.5px solid var(--vsc-border);
border-radius: 12px;
padding: 14px 16px 14px 44px;
background: var(--vsc-card);
transition: border-color 0.2s, background 0.2s;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.woocommerce-checkout #shipping_method li:has(input:checked) {
border-color: var(--vsc-text);
background: var(--vsc-bg);
}
.woocommerce-checkout #shipping_method li input[type="radio"] {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; accent-color: var(--vsc-text);
margin: 0 !important;
}
.woocommerce-checkout #shipping_method li label {
margin: 0 !important; padding: 0 !important;
font-weight: 600; color: var(--vsc-text); font-size: 14px;
flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.woocommerce-checkout #shipping_method li label .amount {
color: var(--vsc-text); font-weight: 700;
}
.woocommerce-checkout #shipping_method li:has(input[value*="free"]) label .amount,
.woocommerce-checkout #shipping_method li label .amount:has(.free_shipping) { color: var(--vsc-green); }
/* Body padding adjustment since card is now padded directly */
.vsc-checkout-card-body { padding: 0; }
/* Form fields — brand WC's billing/shipping inputs */
/* Hide WC section headings ("Billing details", etc.) — our step head already says "Shipping Address" */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 { display: none; }
/* Hide the "Have a coupon?" link above the form — coupon entry lives in the sidebar */
.vsc-checkout-page .woocommerce-form-coupon-toggle,
.vsc-checkout-page .woocommerce-info.woocommerce-form-coupon-toggle,
.vsc-checkout-page form.checkout_coupon,
.vsc-checkout-page .checkout_coupon,
.vsc-checkout-page .woocommerce-form-login-toggle,
.vsc-checkout-page .woocommerce-form.woocommerce-form-login,
.vsc-checkout-page-body .woocommerce-form-coupon-toggle,
.vsc-checkout-page-body form.checkout_coupon { display: none !important; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
}
/* City + State render side-by-side, like the amino reference (WC defaults them to full-width) */
#billing_city_field, #billing_state_field,
#shipping_city_field, #shipping_state_field { grid-column: auto !important; }
/* Injected section headers ("Your Information" / "Delivery Address") */
.vsc-form-section {
grid-column: 1 / -1;
font-size: 12px; font-weight: 500;
color: var(--vsc-muted);
letter-spacing: 0.2px;
margin: 14px 0 4px;
padding-top: 4px;
}
.vsc-form-section:first-child { margin-top: 0; padding-top: 0; }
.woocommerce form .form-row {
margin: 0 !important;
padding: 0;
display: flex; flex-direction: column;
position: relative;
}
/* Override WC's legacy 47% width + floats on .form-row-first / .form-row-last
so the CSS grid lays them out cleanly with our gap */
.vsc-checkout-form .form-row-first,
.vsc-checkout-form .form-row-last {
width: auto !important;
float: none !important;
margin-right: 0 !important;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes {
grid-column: 1 / -1;
}
/* Floating label inside the field (top-left, small) */
.woocommerce form .form-row label {
position: absolute;
top: 8px; left: 16px;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.2px;
text-transform: none;
color: var(--vsc-muted) !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1;
pointer-events: none;
line-height: 1;
}
.woocommerce form .form-row label .required { color: var(--vsc-req); font-weight: 500; text-decoration: none; margin-left: 1px; }
.woocommerce form .form-row label .optional { font-weight: 400; color: var(--vsc-muted); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-selection,
.woocommerce form .form-row .select2-container--default .select2-selection--single {
width: 100% !important;
padding: 22px 16px 8px !important;
border: 1px solid var(--vsc-border) !important;
border-radius: 12px !important;
background: var(--vsc-card) !important;
font-size: 14px;
font-weight: 500;
color: var(--vsc-text);
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
min-height: 54px;
line-height: 1.4;
}
.woocommerce-checkout .select2-selection--single {
height: 54px !important;
min-height: 54px !important;
position: relative !important;
overflow: hidden !important;
}
.woocommerce-checkout .select2-selection__rendered {
position: absolute !important;
left: 16px !important;
right: 36px !important;
bottom: 10px !important;
top: auto !important;
line-height: 1 !important;
font-size: 14px !important;
color: var(--midnight) !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
height: auto !important;
max-height: 18px !important;
}
.woocommerce-checkout .select2-selection__arrow {
top: 50% !important;
transform: translateY(-50%);
right: 12px;
height: 20px !important;
}
.select2-dropdown { z-index: 10000 !important; }
@media (max-width: 640px) {
/* Keep select2-hidden native select truly hidden (don't restyle it) */
.woocommerce-checkout .select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
border: 0 !important;
min-height: 0 !important;
}
.woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce-checkout .select2-selection--single {
height: 54px !important;
min-height: 54px !important;
width: 100% !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
.woocommerce-checkout .select2-selection__rendered {
position: absolute !important;
left: 16px !important;
right: 36px !important;
bottom: 10px !important;
top: auto !important;
line-height: 1 !important;
font-size: 14px !important;
color: var(--midnight) !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
height: auto !important;
max-height: 18px !important;
}
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2 { width: 100% !important; }
.woocommerce-checkout .select2-selection__arrow { top: 50% !important; right: 14px !important; }
/* Dropdown panel — make sure it floats above other fields */
.select2-dropdown { z-index: 10000 !important; }
.select2-results__options { max-height: 240px !important; }
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
border-color: var(--vsc-text) !important;
box-shadow: 0 0 0 3px rgba(10,10,10,0.08) !important;
outline: none !important;
}
/* Hide WC's native "Ship to a different address?" checkbox — we use our own inverted version */
#ship-to-different-address { display: none !important; }
/* Our bottom-of-step checkboxes — stack each on its own line */
.vsc-checkout-checks {
margin: 18px 0 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.vsc-check {
display: inline-flex; align-items: flex-start; gap: 10px;
cursor: pointer; user-select: none;
font-size: 14px; line-height: 1.45;
margin-bottom: 6px;
}
.vsc-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.vsc-check-box {
flex-shrink: 0;
width: 18px; height: 18px; border-radius: 4px;
border: 1.5px solid #CBD5E1; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s, border-color 0.15s;
margin-top: 1px;
}
.vsc-check-box::after {
content: ''; width: 10px; height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat; background-position: center;
opacity: 0; transition: opacity 0.15s;
}
.vsc-check input:checked + .vsc-check-box::after { opacity: 1; }
.vsc-check-text { color: var(--midnight); }
/* SMS consent — green */
.vsc-check-sms input:checked + .vsc-check-box { background: #0284C7; border-color: #0284C7; }
.vsc-check-sms input:checked ~ .vsc-check-text { color: #0284C7; font-weight: 600; }
/* Billing-same-as-shipping — blue */
.vsc-check-billing input:checked + .vsc-check-box { background: #2B7CD9; border-color: #2B7CD9; }
/* Newsletter (Omnisend) — rose */
.vsc-check-newsletter input:checked + .vsc-check-box { background: #0EA5E9; border-color: #0EA5E9; }
.vsc-check-newsletter input:checked ~ .vsc-check-text { color: #082040; font-weight: 500; }
.vsc-check-fineprint {
margin: 0 0 16px 28px;
font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.vsc-check-fineprint a { color: var(--midnight); text-decoration: underline; }
/* Billing address fields are HIDDEN by default (when "Billing same as shipping" is checked).
Visible only when the form has the .vsc-billing-different class — toggled by JS. */
.vsc-checkout-form .woocommerce-shipping-fields,
.vsc-checkout-form [data-vsc-section="billing-address"] {
display: none !important;
}
.vsc-checkout-form.vsc-billing-different .woocommerce-shipping-fields,
.vsc-checkout-form.vsc-billing-different [data-vsc-section="billing-address"] {
display: block !important;
}
/* When billing is different, relabel the revealed shipping section as "Billing address" */
.woocommerce-shipping-fields {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.woocommerce-shipping-fields > h3 {
display: block !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--midnight) !important;
margin: 0 0 14px !important;
letter-spacing: -0.2px;
}
.woocommerce-shipping-fields > h3 #ship-to-different-address-checkbox { display: none; }
/* Order review table inside Payment card */
.woocommerce-checkout-review-order-table {
width: 100%; border-collapse: collapse; margin-bottom: 16px;
display: none; /* Items are shown in the sidebar, hide duplicate table */
}
.woocommerce-checkout #payment {
background: transparent; border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
padding: 0; border-bottom: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: 14px 16px; border: 1px solid var(--border);
border-radius: 12px; margin-bottom: 10px;
background: #fff; list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
border-color: var(--midnight);
background: #FAFAFB;
}
.woocommerce-checkout #payment ul.payment_methods label {
font-weight: 600; color: var(--midnight);
}
.woocommerce-checkout #payment div.payment_box {
background: #F7F5F1; border-radius: 10px;
margin-top: 10px; padding: 14px; font-size: 13px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; }
.woocommerce-checkout #place_order {
width: 100%;
padding: 16px 24px !important;
background: var(--midnight) !important;
color: #fff !important;
border: none !important;
border-radius: 100px !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 0.3px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
margin-top: 18px;
}
.woocommerce-checkout #place_order:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(8,32,64,0.2);
}
/* Hide the "returning customer?" and "have a coupon?" prompts at top
— users are already logged in, and coupon entry lives elsewhere. */
.woocommerce-info.woocommerce-no-payment-methods-reason,
.woocommerce form.login,
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { display: block; }
.woocommerce-form-login-toggle { display: none !important; }
/* ------- Sidebar summary ------- */
.vsc-checkout-col-side { position: sticky; top: 32px; }
@media (max-width: 768px) {
.vsc-checkout-col-side { display: none !important; }
}
.vsc-checkout-summary {
background: var(--vsc-card);
border: 1px solid var(--vsc-border);
border-radius: 16px;
padding: 0;
overflow: hidden;
}
.vsc-checkout-summary-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 22px 14px;
border-bottom: 1px solid var(--vsc-border);
margin-bottom: 0;
}
.vsc-checkout-summary-head h3 {
font-size: 16px; font-weight: 800;
color: var(--vsc-text); margin: 0;
}
.vsc-checkout-summary-meta {
display: flex; align-items: center; gap: 14px;
font-size: 13px; color: var(--vsc-muted);
}
.vsc-checkout-summary-edit {
font-size: 13px; font-weight: 600;
color: var(--vsc-text); text-decoration: underline;
text-underline-offset: 3px;
background: none; border: none; padding: 0;
cursor: pointer; font-family: inherit;
}
.vsc-checkout-summary-edit:hover { color: var(--vsc-muted); }
.vsc-checkout-promo-toggle {
width: 100%; padding: 16px 22px;
background: none; border: none;
border-bottom: 1px solid var(--vsc-border);
margin: 0;
font-family: inherit; font-size: 14px; font-weight: 700;
color: var(--vsc-text); cursor: pointer;
display: flex; align-items: center; gap: 10px;
text-align: left;
}
.vsc-checkout-promo-toggle:hover { background: var(--vsc-bg); }
.vsc-promo-wrap { margin: 0; }
.vsc-promo-wrap .vsc-checkout-promo-toggle { margin: 0; }
.vsc-promo-form { padding: 0 22px 14px; }
.vsc-promo-msg:not([hidden]) { margin: 10px 22px 14px; }
.vsc-promo-form {
display: flex; gap: 8px; margin-top: 10px;
}
.vsc-promo-input {
flex: 1; padding: 10px 14px;
border: 1px solid var(--vsc-border); border-radius: 10px;
font-size: 13px; font-family: inherit;
background: var(--vsc-card); color: var(--vsc-text);
outline: none; min-height: 40px;
}
.vsc-promo-input:focus {
border-color: var(--vsc-text);
box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.vsc-promo-apply {
padding: 0 18px; min-height: 40px;
background: var(--vsc-text); color: #fff;
border: none; border-radius: 10px;
font-family: inherit; font-size: 13px; font-weight: 600;
cursor: pointer;
}
.vsc-promo-apply:hover { background: #333; }
.vsc-promo-apply:disabled { opacity: 0.6; cursor: wait; }
.vsc-promo-msg {
margin-top: 8px;
font-size: 12px; font-weight: 500;
padding: 8px 12px; border-radius: 8px;
}
.vsc-promo-msg.is-error { background: #FDECEC; color: #B23A3A; border: 1px solid #F3C2C2; }
.vsc-promo-msg.is-success { background: #E7F6EC; color: #1F6A3B; border: 1px solid #B4E0C2; }
.vsc-checkout-row-protection .vsc-protection-free { color: var(--vsc-green); font-weight: 700; }
.vsc-protection-help {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: #E8EAED; color: var(--vsc-muted);
font-size: 10px; font-weight: 700; cursor: help;
border: none; padding: 0;
font-family: inherit; line-height: 1;
transition: background 0.15s;
}
.vsc-protection-help:hover { background: #D6D8DD; color: var(--vsc-text); }
.vsc-checkout-summary-edit:hover { color: var(--rose-hover); }
.vsc-checkout-summary-items {
padding: 14px 22px;
border-bottom: 1px solid var(--vsc-border);
}
.vsc-checkout-summary-item {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 16px; align-items: center;
padding: 10px 0;
}
.vsc-checkout-summary-thumb {
width: 56px; height: 56px; border-radius: 12px;
background: #ECEEF1; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.vsc-checkout-summary-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vsc-checkout-summary-name {
font-size: 14px; font-weight: 700; color: var(--vsc-text);
line-height: 1.3;
}
.vsc-checkout-summary-qty {
font-size: 12px; color: var(--vsc-muted); margin-top: 4px;
}
.vsc-checkout-summary-line {
font-size: 15px; font-weight: 800; color: var(--vsc-text);
letter-spacing: -0.2px;
}
.vsc-checkout-summary-totals {
padding: 14px 22px;
}
.vsc-checkout-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 14px; color: var(--vsc-muted);
padding: 3px 0;
}
.vsc-checkout-row span:last-child { color: var(--vsc-text); font-weight: 600; }
.vsc-checkout-row-protection .vsc-protection-label {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: underline; text-underline-offset: 3px;
color: var(--vsc-muted);
font-weight: 500;
}
.vsc-protection-tip {
position: absolute;
bottom: calc(100% + 10px); left: 0;
width: 260px; max-width: 80vw;
padding: 12px 14px;
background: #0F172A; color: #fff;
border-radius: 10px;
font-size: 12px; line-height: 1.5;
font-weight: 400; text-decoration: none;
letter-spacing: 0;
box-shadow: 0 12px 32px rgba(10,10,10,0.18);
opacity: 0; visibility: hidden;
transform: translateY(4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
z-index: 20;
pointer-events: none;
}
.vsc-protection-tip::after {
content: '';
position: absolute;
top: 100%; left: 22px;
border: 6px solid transparent;
border-top-color: #0F172A;
}
.vsc-protection-tip,
.vsc-protection-tip strong,
.vsc-protection-tip a,
.vsc-protection-tip a:link,
.vsc-protection-tip a:visited,
.vsc-protection-tip a:hover { color: #fff !important; }
.vsc-protection-tip strong { font-weight: 600; }
.vsc-protection-label:hover .vsc-protection-tip,
.vsc-protection-label:focus-within .vsc-protection-tip,
.vsc-protection-label.is-open .vsc-protection-tip {
opacity: 1; visibility: visible; transform: translateY(0);
}
.vsc-checkout-total {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 22px 18px;
border-top: 1px solid var(--vsc-border);
font-family: inherit;
}
.vsc-checkout-total span:first-child { font-size: 16px; font-weight: 800; color: var(--vsc-text); }
.vsc-checkout-total span:last-child {
font-size: 22px; font-weight: 800; color: var(--vsc-text); letter-spacing: -0.3px;
}
.vsc-checkout-total .amount { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.3px; }
.vsc-checkout-summary-trust {
display: flex; align-items: center; gap: 8px;
padding: 0 22px 18px;
font-size: 12px; color: var(--text-muted);
}
/* Standalone Secure Checkout button below the summary card */
.vsc-checkout-secure-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; margin-top: 14px;
padding: 16px 20px;
background: var(--vsc-card); border: 1px solid var(--vsc-border);
border-radius: 100px;
font-family: inherit; font-size: 14px; font-weight: 600;
color: var(--vsc-text); cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.vsc-checkout-secure-btn:hover { background: var(--vsc-bg); box-shadow: 0 4px 16px rgba(10,10,10,0.06); }
.vsc-checkout-secure-btn svg { color: var(--vsc-green); }
/* Responsive */
@media (max-width: 1024px) {
.vsc-checkout-grid { grid-template-columns: 1fr; }
.vsc-checkout-col-side { position: static; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.vsc-checkout-container { padding: 0 20px; }
.vsc-checkout-card-body { padding: 20px; }
.vsc-checkout-step { padding: 18px 20px 14px; }
}
/* =============================================================
Lumina My Account — dashboard, tiles, partner program.
============================================================= */
.vsc-acct-main { background: #F5F6F7; min-height: 70vh; padding: 120px 0 80px; }
.vsc-acct-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* Hero (dark navy) */
.vsc-acct-hero {
background: radial-gradient(ellipse at top right, rgba(14,165,233,0.10) 0%, transparent 55%), #082040;
color: #fff;
border-radius: 0 0 24px 24px;
padding: 48px 44px 40px;
margin: 0 -24px 36px;
position: relative; overflow: hidden;
}
.vsc-acct-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
background-size: 18px 18px;
pointer-events: none;
}
.vsc-acct-hero-grid {
display: flex; align-items: center; gap: 20px; margin-bottom: 14px;
position: relative; z-index: 1;
}
.vsc-acct-avatar {
width: 58px; height: 58px; border-radius: 50%;
background: #fff; color: #082040;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 24px; letter-spacing: -0.5px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.vsc-acct-hero-text h1 {
font-family: inherit;
font-size: 32px; font-weight: 800; color: #fff;
margin: 0 0 4px; letter-spacing: -0.5px;
}
.vsc-acct-email { color: rgba(255,255,255,0.65); font-size: 14px; margin: 0; }
.vsc-acct-hero-sub {
color: rgba(255,255,255,0.75);
font-size: 15px; margin: 0 0 22px;
position: relative; z-index: 1;
}
.vsc-acct-hero-actions {
display: flex; gap: 10px; flex-wrap: wrap;
position: relative; z-index: 1;
}
.vsc-acct-btn-white,
.vsc-acct-btn-white:link,
.vsc-acct-btn-white:visited,
.vsc-acct-btn-white:hover {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: #fff !important; color: #082040 !important;
border-radius: 100px;
font-size: 14px; font-weight: 600;
text-decoration: none !important;
transition: transform 0.15s;
}
.vsc-acct-btn-white:hover { transform: translateY(-1px); }
.vsc-acct-btn-dark,
.vsc-acct-btn-dark:link,
.vsc-acct-btn-dark:visited,
.vsc-acct-btn-dark:hover {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: rgba(255,255,255,0.08); color: #fff !important;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 100px;
font-size: 14px; font-weight: 600;
text-decoration: none !important;
transition: background 0.15s;
}
.vsc-acct-btn-dark:hover { background: rgba(255,255,255,0.14); }
/* Tiles row */
.vsc-acct-tiles {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-bottom: 24px;
}
.vsc-acct-tile {
display: flex; align-items: center; gap: 16px;
padding: 22px 24px;
background: #fff; border: 1px solid #E8EAED;
border-radius: 16px;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-acct-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,10,10,0.06); }
.vsc-acct-tile-icon {
width: 40px; height: 40px; border-radius: 10px;
background: #F4F4F5; color: #082040;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vsc-acct-tile-title { font-weight: 700; font-size: 15px; color: #082040; margin-bottom: 2px; }
.vsc-acct-tile-sub { font-size: 13px; color: #6B7280; }
/* Partner tile — gradient highlight */
.vsc-acct-tile-partner {
background: linear-gradient(135deg, #0EA5E9 0%, #0EA5E9 100%);
border-color: transparent;
color: #fff;
}
.vsc-acct-tile-partner:hover { box-shadow: 0 16px 36px rgba(79,70,229,0.3); }
.vsc-acct-tile-partner .vsc-acct-tile-icon { background: rgba(255,255,255,0.16); color: #fff; }
.vsc-acct-tile-partner .vsc-acct-tile-title { color: #fff; }
.vsc-acct-tile-partner .vsc-acct-tile-sub { color: rgba(255,255,255,0.85); }
/* Orders card */
.vsc-acct-orders {
background: #fff; border: 1px solid #E8EAED; border-radius: 16px;
padding: 22px 26px;
}
.vsc-acct-orders-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 16px; border-bottom: 1px solid #E8EAED; margin-bottom: 16px;
}
.vsc-acct-orders-head-left {
display: flex; align-items: center; gap: 14px;
}
.vsc-acct-orders-icon {
width: 40px; height: 40px; border-radius: 10px;
background: #082040; color: #fff;
display: flex; align-items: center; justify-content: center;
}
.vsc-acct-orders-title { font-weight: 700; font-size: 16px; color: #082040; }
.vsc-acct-orders-sub { font-size: 13px; color: #6B7280; margin-top: 2px; }
.vsc-acct-view-all {
font-size: 13px; font-weight: 600; color: #082040;
text-decoration: underline; text-underline-offset: 3px;
}
.vsc-acct-orders-empty { text-align: center; padding: 40px 20px; color: #6B7280; font-size: 14px; }
.vsc-acct-orders-empty a { color: #082040; font-weight: 600; text-decoration: underline; }
.vsc-acct-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%;
background: #F4F4F5; color: #6B7280;
margin-bottom: 14px;
}
.vsc-acct-orders-list { list-style: none; padding: 0; margin: 0; }
.vsc-acct-orders-list li { border-bottom: 1px solid #E8EAED; }
.vsc-acct-orders-list li:last-child { border-bottom: none; }
.vsc-acct-orders-list li a {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 0; text-decoration: none; color: #082040;
}
.vsc-acct-order-num { font-weight: 700; font-size: 14px; }
.vsc-acct-order-items { font-size: 13px; color: #6B7280; margin-top: 2px; }
.vsc-acct-order-meta { text-align: right; }
.vsc-acct-order-total { font-weight: 700; font-size: 14px; }
.vsc-acct-order-status { font-size: 12px; color: #0EA5E9; font-weight: 600; margin-top: 2px; }
/* Sub-pages (Profile, Addresses, Partner Program when on endpoint pages) */
.vsc-acct-subpage { padding: 20px 0; }
.vsc-acct-backlink {
display: inline-block; margin-bottom: 20px;
font-size: 14px; font-weight: 600; color: #6B7280;
text-decoration: none;
}
.vsc-acct-backlink:hover { color: #082040; }
.vsc-acct-subpage-title {
font-family: inherit;
font-size: 32px; font-weight: 800; color: #082040;
letter-spacing: -0.5px; margin: 0 0 6px;
}
.vsc-acct-subpage-sub { color: #6B7280; font-size: 14px; margin: 0 0 28px; }
/* Partner program page */
/* Prominent referral link hero, shown after the partner account is created */
.vsc-partner-link-hero {
background: linear-gradient(135deg, #0EA5E9 0%, #0EA5E9 100%);
border-radius: 18px; padding: 24px 26px;
margin-bottom: 24px;
color: #fff;
box-shadow: 0 12px 30px rgba(79,70,229,0.25);
}
.vsc-partner-link-hero-label {
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: rgba(255,255,255,0.85);
margin-bottom: 12px;
}
.vsc-partner-link-hero-row {
display: flex; gap: 10px; align-items: stretch;
}
.vsc-partner-link-hero-input {
flex: 1; padding: 14px 16px;
background: rgba(255,255,255,0.15); color: #fff;
border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
font-family: ui-monospace, SFMono-Regular, monospace; font-size: 14px;
outline: none; min-width: 0; cursor: text;
}
.vsc-partner-link-hero-input::selection { background: rgba(255,255,255,0.35); }
.vsc-partner-link-hero-copy {
display: inline-flex; align-items: center; gap: 8px;
padding: 0 20px;
background: #fff; color: #0EA5E9;
border: none; border-radius: 12px;
font-family: inherit; font-size: 14px; font-weight: 700;
cursor: pointer; white-space: nowrap;
transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-partner-link-hero-copy:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.vsc-partner-link-hero-copy.is-copied { background: #0EA5E9; color: #fff; }
.vsc-partner-link-hero-hint {
margin-top: 12px; font-size: 12px; color: rgba(255,255,255,0.8);
}
@media (max-width: 640px) {
.vsc-partner-link-hero-row { flex-direction: column; }
.vsc-partner-link-hero-copy { justify-content: center; padding: 12px; }
}
.vsc-partner-stats {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
margin-bottom: 24px;
}
.vsc-partner-stat {
background: #fff; border: 1px solid #E8EAED;
border-radius: 12px; padding: 16px 18px;
}
.vsc-partner-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #6B7280; margin-bottom: 6px; }
.vsc-partner-stat-value { font-size: 20px; font-weight: 800; color: #082040; letter-spacing: -0.3px; }
.vsc-partner-stat-accent { background: linear-gradient(135deg, #0EA5E9 0%, #0EA5E9 100%); border-color: transparent; }
.vsc-partner-stat-accent .vsc-partner-stat-label { color: rgba(255,255,255,0.8); }
.vsc-partner-stat-accent .vsc-partner-stat-value { color: #fff; }
@media (max-width: 900px) { .vsc-partner-stats { grid-template-columns: repeat(2, 1fr); } }
.vsc-partner-why {
background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(79,70,229,0.08) 100%);
border: 1px solid rgba(124,58,237,0.15);
border-radius: 16px;
padding: 26px 28px;
margin-bottom: 24px;
}
.vsc-partner-why h3 {
font-size: 18px; font-weight: 700; color: #082040;
margin: 0 0 18px;
}
.vsc-partner-why-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px;
}
.vsc-partner-perk {
display: flex; align-items: flex-start; gap: 12px;
}
.vsc-partner-perk-icon {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vsc-partner-perk-icon--rose { background: #E0F2FE; color: #0284C7; }
.vsc-partner-perk-icon--blue { background: #E0F2FE; color: #2563EB; }
.vsc-partner-perk-icon--green { background: #E0F2FE; color: #059669; }
.vsc-partner-perk-icon--amber { background: #FEF3C7; color: #D97706; }
.vsc-partner-perk-title { font-weight: 700; font-size: 14px; color: #082040; margin-bottom: 2px; }
.vsc-partner-perk-sub { font-size: 13px; color: #6B7280; line-height: 1.5; }
.vsc-partner-card {
background: #fff;
border: 1px solid #E8EAED;
border-radius: 16px;
padding: 26px 28px;
}
.vsc-partner-card h3 {
font-size: 18px; font-weight: 700; color: #082040;
margin: 0 0 4px;
}
.vsc-partner-card-sub { font-size: 13px; color: #6B7280; margin: 0 0 20px; }
.vsc-partner-form label {
display: block;
font-size: 12px; font-weight: 600;
color: #082040; margin-bottom: 8px;
letter-spacing: 0.3px;
}
.vsc-partner-form input[type="text"] {
width: 100%; padding: 14px 18px;
border: 1px solid #E8EAED; border-radius: 10px;
font-size: 14px; color: #082040;
font-family: inherit; outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.vsc-partner-form input[type="text"]:focus {
border-color: #082040;
box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.vsc-partner-hint { font-size: 12px; color: #6B7280; margin-top: 6px; }
.vsc-partner-link-box {
background: #F5F6F7; border-radius: 10px;
padding: 14px 18px; margin: 18px 0;
}
.vsc-partner-link-box--preview code { color: #6B7280; }
.vsc-partner-link-label { font-size: 12px; font-weight: 600; color: #082040; margin-bottom: 6px; }
.vsc-partner-link-row { display: flex; align-items: center; gap: 10px; }
.vsc-partner-link-row code {
flex: 1; font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 13px; color: #082040; word-break: break-all;
}
.vsc-partner-copy {
padding: 6px 14px;
background: #fff; border: 1px solid #E8EAED;
border-radius: 8px;
font-family: inherit; font-size: 12px; font-weight: 600;
color: #082040; cursor: pointer;
}
.vsc-partner-copy:hover { background: #F5F6F7; }
.vsc-partner-submit {
width: 100%; padding: 15px 20px;
background: linear-gradient(135deg, #0EA5E9 0%, #0EA5E9 100%);
color: #fff; border: none; border-radius: 100px;
font-family: inherit; font-size: 14px; font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-partner-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,0.3); }
.vsc-partner-agree {
background: #E0F2FE; border: 1px solid #F1B9CB;
border-radius: 12px; padding: 14px 16px;
margin: 16px 0;
}
.vsc-partner-agree-row {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; line-height: 1.55; color: var(--midnight);
cursor: pointer;
}
.vsc-partner-agree-row input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--rose-hover); }
.vsc-partner-agree-row a { color: var(--rose-hover); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.vsc-partner-agree-ver { color: #6B7280; font-weight: 500; font-size: 11px; }
.vsc-partner-agreed {
display: inline-flex; align-items: center; gap: 6px;
background: #E7F6EC; color: #1F6A3B;
border: 1px solid #B4E0C2;
padding: 8px 12px; border-radius: 100px;
font-size: 12px; font-weight: 600;
margin: 14px 0; width: fit-content;
}
.vsc-partner-agreed a { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 2px; }
.vsc-partner-alert {
padding: 12px 16px; border-radius: 10px;
font-size: 13px; font-weight: 500;
margin-bottom: 16px;
}
.vsc-partner-alert.success { background: #E0F2FE; color: #065F46; border: 1px solid #BAE6FD; }
.vsc-partner-alert.error { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
@media (max-width: 768px) {
.vsc-acct-hero { padding: 36px 24px 28px; }
.vsc-acct-tiles { grid-template-columns: 1fr; }
.vsc-partner-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) and (min-width: 769px) {
.vsc-partner-why-grid { grid-template-columns: 1fr 1fr; }
}
/* Old .vsc-account-wrap — no longer used but keep a minimal fallback */
.vsc-account-wrap { max-width: 1080px; margin: 0 auto; }
/* =============================================================
WC My Account SUB-PAGES — orders list, edit-account, addresses
Renders inside .vsc-acct-subpage-wrap from page-my-account.php
============================================================= */
/* Compliance banner — shrink to fit one line on mobile instead of hiding */
@media (max-width: 768px) {
.vsc-research-banner {
font-size: 8.5px !important;
letter-spacing: 0.3px !important;
padding: 6px 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* Desktop: hide mobile-only items (menu head, divider, secondary links, Contact) */
.vsc-mobile-menu-head,
.vsc-nav-divider,
.vsc-nav-secondary,
.vsc-nav-mobile-only { display: none; }
.vsc-nav-links .vsc-nav-chev { display: none; }
/* Mobile hamburger */
.vsc-nav-burger {
display: none;
width: 40px; height: 40px;
background: none; border: none; padding: 0; cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.vsc-nav-burger span {
display: block; width: 22px; height: 2px; border-radius: 2px;
background: var(--midnight);
transition: transform 0.25s, opacity 0.2s;
}
.vsc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vsc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vsc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
.vsc-nav { padding: 12px 0; }
.vsc-nav-container { display: flex; align-items: center; justify-content: flex-start; padding: 0 16px; gap: 10px; }
/* Hamburger: far left */
.vsc-nav-burger { display: flex; order: 1; width: 36px; height: 36px; margin: 0; }
/* Logo: right next to the hamburger */
.vsc-logo { order: 2; font-size: 20px; margin: 0; }
/* Icons container — push to the far right via auto margin */
.vsc-nav-icons { order: 3; margin-left: auto; gap: 4px; display: flex; align-items: center; }
.vsc-nav-icons .vsc-nav-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }
/* Hide the account/person icon on mobile — My Account now lives in the slide-in menu */
.vsc-nav-icons > a[aria-label="Account"] { display: none; }
/* Full-screen slide-in menu */
.vsc-nav-links {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
height: 100vh; height: 100dvh; width: 100vw; width: 100dvw;
background: var(--white);
padding: 0;
flex-direction: column !important; align-items: stretch !important;
gap: 0 !important;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
z-index: 9999;
overflow-y: auto;
list-style: none;
margin: 0;
}
.vsc-nav-links.is-open { transform: translateX(0); }
/* When menu is open, promote the nav stacking context above the research banner,
pin it to top:0 regardless of banner offset, and disable backdrop-filter (which
breaks fixed-position children into the nav's containing block on iOS). */
body.has-mobile-nav-open .vsc-nav {
z-index: 100000 !important;
top: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--white) !important;
}
body.has-mobile-nav-open .vsc-research-banner { z-index: 0 !important; }
.vsc-nav-links > .vsc-mobile-menu-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 16px; border-bottom: 1px solid #F0F0F0;
background: var(--white); list-style: none;
}
.vsc-nav-links > .vsc-mobile-menu-head .vsc-logo {
font-family: 'Inter', serif; font-size: 20px;
font-weight: 600; color: var(--midnight); letter-spacing: 0.3px;
display: flex; align-items: center; gap: 8px; text-decoration: none;
margin: 0; padding: 0;
}
.vsc-nav-links > .vsc-mobile-menu-head .vsc-mobile-menu-close {
width: 32px; height: 32px; border: none; background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 0;
color: var(--midnight);
}
.vsc-nav-links li { list-style: none; margin: 0; padding: 0; }
.vsc-nav-links li a {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 24px;
font-family: 'Inter', Georgia, serif;
font-size: 28px; font-weight: 500;
color: var(--midnight);
text-decoration: none;
letter-spacing: -0.3px;
line-height: 1.1;
transition: color 0.15s, padding-left 0.2s;
}
.vsc-nav-links li:not(.is-current) a:hover { color: var(--rose-hover); }
.vsc-nav-links .vsc-nav-chev { color: #D1D5DB; flex-shrink: 0; display: inline-block; transition: transform 0.2s, color 0.15s; }
.vsc-nav-links li:not(.is-current) a:hover .vsc-nav-chev { transform: translateX(4px); color: var(--rose-hover); }
/* Current / active page — stays rose the whole time */
.vsc-nav-links li.is-current > a,
.vsc-nav-links li.is-current > a .vsc-nav-chev { color: var(--rose-hover); }
.vsc-nav-links li.is-current > a { font-weight: 600; }
/* Kill iOS tap-highlight that keeps the last-tapped link pink after navigating */
.vsc-nav-links li a { -webkit-tap-highlight-color: transparent; }
.vsc-nav-links li a:focus:not(:focus-visible) { outline: none; color: var(--midnight); }
.vsc-nav-links li.vsc-nav-divider { display: block; height: 20px; border: none; border-top: 1px solid #F0F0F0; margin: 8px 24px 0; }
.vsc-nav-links li.vsc-nav-secondary,
.vsc-nav-links li.vsc-nav-mobile-only { display: block; }
.vsc-nav-links li.vsc-nav-secondary a {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px; font-weight: 500;
color: #6B7280; letter-spacing: 0.1px;
padding: 14px 24px;
}
.vsc-nav-links li.vsc-nav-secondary:not(.is-current) a:hover { color: var(--midnight); }
.vsc-nav-links li.vsc-nav-secondary.is-current a { color: var(--rose-hover); font-weight: 600; }
.vsc-nav-links li.vsc-nav-secondary a {
color: #9CA3AF; font-weight: 500;
}
.vsc-nav-links li.vsc-nav-secondary .vsc-nav-chev { color: #CBD5E1; }
body.has-mobile-nav-open { overflow: hidden; }
/* Flush the nav against the banner on mobile (banner is ~24px tall when shrunk) */
.vsc-page.has-banner .vsc-nav { top: 24px; }
}
.vsc-acct-back {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 18px;
color: #6B7280; font-size: 14px; font-weight: 600;
text-decoration: none;
transition: color 0.15s;
}
.vsc-acct-back:hover { color: #082040; }
/* =============================================================
Lumina Auth shell — shared by /login/ AND /my-account/lost-password/
============================================================= */
.vsc-auth-body { margin: 0; }
.vsc-auth-page {
min-height: 100vh;
padding: 24px 20px 60px;
background: radial-gradient(ellipse 800px 600px at 50% 30%, var(--rose-soft) 0%, transparent 60%), var(--ivory);
display: flex; align-items: flex-start; justify-content: center;
}
.vsc-auth-card {
width: 100%; max-width: 460px;
background: var(--white); border-radius: 24px;
padding: 20px 36px 36px;
box-shadow: 0 30px 80px rgba(8, 32, 64, 0.12);
border: 1px solid var(--border);
}
.vsc-auth-logo {
display: flex; align-items: center; justify-content: center;
margin: -16px 0 -28px; text-decoration: none;
}
.vsc-auth-logo img { max-width: 250px; width: 100%; height: auto; display: block; }
.vsc-auth-card h2 {
font-family: 'Inter', serif;
font-size: 36px; font-weight: 500; line-height: 1.1;
color: var(--midnight); text-align: center;
margin: 0 0 14px; letter-spacing: -0.5px;
}
.vsc-auth-card h2 .vsc-italic { color: var(--rose-hover); font-style: italic; }
.vsc-auth-intro {
font-size: 14px; color: var(--text-muted);
text-align: center; line-height: 1.6; margin: 0 0 24px;
}
.vsc-auth-forgot { text-align: center; margin: 16px 0 0; font-size: 13px; }
.vsc-auth-forgot a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.vsc-auth-forgot a:hover { color: var(--rose-hover); }
/* Style the WC lost-password / reset-password form inside the auth card */
.vsc-auth-reset .woocommerce-notices-wrapper { margin-bottom: 16px; }
.vsc-auth-reset form.lost_reset_password,
.vsc-auth-reset form.woocommerce-ResetPassword {
display: flex; flex-direction: column; gap: 14px;
background: none; border: none; padding: 0; margin: 0;
}
.vsc-auth-reset form p.form-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vsc-auth-reset form label {
font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
text-transform: uppercase; color: var(--midnight);
}
.vsc-auth-reset form input.input-text {
font-family: inherit; font-size: 16px;
padding: 14px 16px; border: 1px solid var(--border);
border-radius: 12px; outline: none;
color: var(--midnight); background: var(--white);
transition: border-color 0.2s; width: 100%;
}
.vsc-auth-reset form input.input-text:focus { border-color: var(--rose-hover); }
.vsc-auth-reset form button[type="submit"],
.vsc-auth-reset form .woocommerce-Button {
width: 100%; padding: 16px;
background: var(--midnight) !important; color: var(--white) !important;
border: none !important; border-radius: 100px !important;
font-family: inherit; font-size: 14px; font-weight: 600;
letter-spacing: 0.5px; cursor: pointer; margin-top: 6px;
transition: background 0.2s;
}
.vsc-auth-reset form button[type="submit"]:hover { background: #142955 !important; }
.vsc-auth-reset .woocommerce-error,
.vsc-auth-reset .woocommerce-message,
.vsc-auth-reset .woocommerce-info {
list-style: none; margin: 0 0 14px; padding: 12px 16px;
border-radius: 10px; font-size: 13px; line-height: 1.5;
}
.vsc-auth-reset .woocommerce-error { background: #FDECEC; color: #991B1B; border: 1px solid #F3C2C2; }
.vsc-auth-reset .woocommerce-message { background: #E0F2FE; color: #065F46; border: 1px solid #BAE6FD; }
.vsc-auth-reset .woocommerce-info { background: #E0F2FE; color: #1E40AF; border: 1px solid #BFDBFE; }
.vsc-auth-reset .woocommerce-error::before,
.vsc-auth-reset .woocommerce-message::before,
.vsc-auth-reset .woocommerce-info::before { display: none; }
.vsc-auth-reset .woocommerce-error li { list-style: none; padding: 0; margin: 0; }
/* Subpage wrapper — one full-width card, no sidebar nav (the dashboard tiles above
are the navigation; WC's default nav is hidden). */
.vsc-acct-subpage-wrap { width: 100%; padding: 0; }
.vsc-acct-subpage-wrap .woocommerce,
.vsc-acct-subpage-wrap .woocommerce-notices-wrapper { display: block; }
.vsc-acct-subpage-wrap .woocommerce::before,
.vsc-acct-subpage-wrap .woocommerce::after { display: none !important; content: none !important; }
/* Hide WC's default sidebar nav — tiles above handle navigation */
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation { display: none !important; }
/* Logged-out / password-reset flows (lost-password, reset-password, login, register)
All render inside the subpage wrap. Style each form as a branded card. */
.vsc-acct-subpage-wrap form.lost_reset_password,
.vsc-acct-subpage-wrap form.woocommerce-ResetPassword,
.vsc-acct-subpage-wrap form.woocommerce-form-login,
.vsc-acct-subpage-wrap form.woocommerce-form-register {
width: 100%; max-width: 480px; margin: 0 auto;
background: #fff; border: 1px solid #E8EAED; border-radius: 16px;
padding: 32px 32px 28px;
}
.vsc-acct-subpage-wrap .woocommerce-ResetPassword p,
.vsc-acct-subpage-wrap .lost_reset_password p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.vsc-acct-subpage-wrap form.lost_reset_password label,
.vsc-acct-subpage-wrap form.woocommerce-ResetPassword label,
.vsc-acct-subpage-wrap form.woocommerce-form-login label,
.vsc-acct-subpage-wrap form.woocommerce-form-register label {
display: block; font-size: 12px; font-weight: 700;
letter-spacing: 0.3px; color: #082040; margin-bottom: 6px;
}
.vsc-acct-subpage-wrap form.lost_reset_password input.input-text,
.vsc-acct-subpage-wrap form.woocommerce-ResetPassword input.input-text,
.vsc-acct-subpage-wrap form.woocommerce-form-login input.input-text,
.vsc-acct-subpage-wrap form.woocommerce-form-register input.input-text {
width: 100% !important; padding: 12px 14px;
border: 1px solid #E8EAED !important; border-radius: 10px !important;
background: #fff; color: #082040; font-size: 14px; font-family: inherit;
outline: none; margin-bottom: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.vsc-acct-subpage-wrap form .input-text:focus {
border-color: #082040 !important;
box-shadow: 0 0 0 3px rgba(8,32,64,0.08);
}
.vsc-acct-subpage-wrap form .woocommerce-Button,
.vsc-acct-subpage-wrap form.lost_reset_password button[type="submit"],
.vsc-acct-subpage-wrap form.woocommerce-ResetPassword button[type="submit"],
.vsc-acct-subpage-wrap form.woocommerce-form-login button[type="submit"],
.vsc-acct-subpage-wrap form.woocommerce-form-register button[type="submit"] {
width: 100%;
padding: 14px !important;
background: #082040 !important; color: #fff !important;
border: none !important; border-radius: 100px !important;
font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
cursor: pointer; margin-top: 6px;
}
/* Two-column Login/Register fallback layout */
.vsc-acct-subpage-wrap .u-columns,
.vsc-acct-subpage-wrap .col2-set {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.vsc-acct-subpage-wrap .u-columns h2 {
font-family: inherit; font-size: 20px; font-weight: 800;
color: #082040; margin: 0 0 14px; letter-spacing: -0.3px;
}
/* WC notice banners (errors, success, info) */
.vsc-acct-subpage-wrap .woocommerce-error,
.vsc-acct-subpage-wrap .woocommerce-message,
.vsc-acct-subpage-wrap .woocommerce-info {
list-style: none; margin: 0 0 20px; padding: 14px 18px 14px 46px;
border-radius: 12px; font-size: 13px; font-weight: 500;
position: relative; line-height: 1.55;
}
.vsc-acct-subpage-wrap .woocommerce-error {
background: #FDECEC; color: #991B1B; border: 1px solid #F3C2C2;
}
.vsc-acct-subpage-wrap .woocommerce-message {
background: #E0F2FE; color: #065F46; border: 1px solid #BAE6FD;
}
.vsc-acct-subpage-wrap .woocommerce-info {
background: #E0F2FE; color: #1E40AF; border: 1px solid #BFDBFE;
}
.vsc-acct-subpage-wrap .woocommerce-error li,
.vsc-acct-subpage-wrap .woocommerce-message li { list-style: none; padding: 0; }
.vsc-acct-subpage-wrap .woocommerce-error::before,
.vsc-acct-subpage-wrap .woocommerce-message::before,
.vsc-acct-subpage-wrap .woocommerce-info::before { display: none; }
/* "Lost your password?" link under the login form */
.vsc-acct-subpage-wrap .lost_password a {
color: #6B7280; text-decoration: underline; font-size: 13px;
}
.vsc-acct-subpage-wrap .lost_password a:hover { color: #082040; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation li { margin: 0; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation li a {
display: block; padding: 10px 14px;
color: #6B7280; font-size: 14px; font-weight: 500;
border-radius: 8px; text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation li a:hover { background: #F5F6F7; color: #082040; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation li.is-active a { background: #082040; color: #fff; font-weight: 600; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content {
width: 100%;
background: #fff; border: 1px solid #E8EAED; border-radius: 16px;
padding: 28px 32px;
}
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content * { max-width: 100%; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content > h2,
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content > h3 {
font-family: inherit; font-size: 24px; font-weight: 800;
color: #082040; margin: 0 0 12px; letter-spacing: -0.3px;
}
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content > p {
color: #6B7280; line-height: 1.65; margin: 0 0 18px; font-size: 14px;
}
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content a {
color: var(--rose-hover); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.vsc-acct-subpage-wrap .woocommerce-MyAccount-content a:hover { color: var(--midnight); }
/* Orders table */
.vsc-acct-subpage-wrap table.shop_table,
.vsc-acct-subpage-wrap .woocommerce-orders-table {
width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px;
border: 1px solid #E8EAED; border-radius: 12px; overflow: hidden;
}
.vsc-acct-subpage-wrap table.shop_table th {
text-align: left; padding: 12px 16px; background: #F5F6F7;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
color: #082040; border-bottom: 1px solid #E8EAED;
}
.vsc-acct-subpage-wrap table.shop_table td {
padding: 14px 16px; border-bottom: 1px solid #F3F4F6; color: #082040;
}
.vsc-acct-subpage-wrap table.shop_table tr:last-child td { border-bottom: none; }
/* Buttons */
.vsc-acct-subpage-wrap .button,
.vsc-acct-subpage-wrap button[type="submit"] {
display: inline-flex; align-items: center;
padding: 10px 22px;
background: #082040 !important; color: #fff !important;
border: none; border-radius: 100px;
font-size: 13px; font-weight: 600;
text-decoration: none !important; cursor: pointer;
transition: background 0.15s;
}
.vsc-acct-subpage-wrap .button:hover,
.vsc-acct-subpage-wrap button[type="submit"]:hover { background: #1a2d52 !important; }
/* Addresses */
.vsc-acct-subpage-wrap .woocommerce-Addresses,
.vsc-acct-subpage-wrap .u-columns,
.vsc-acct-subpage-wrap .col2-set {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px;
margin-top: 16px; width: 100%;
}
.vsc-acct-subpage-wrap .woocommerce-Addresses::before,
.vsc-acct-subpage-wrap .woocommerce-Addresses::after,
.vsc-acct-subpage-wrap .u-columns::before,
.vsc-acct-subpage-wrap .u-columns::after { content: none !important; display: none !important; }
.vsc-acct-subpage-wrap .woocommerce-Addresses .u-column1,
.vsc-acct-subpage-wrap .woocommerce-Addresses .u-column2,
.vsc-acct-subpage-wrap .u-columns .u-column1,
.vsc-acct-subpage-wrap .u-columns .u-column2,
.vsc-acct-subpage-wrap .woocommerce-Address {
width: auto !important; float: none !important;
margin: 0 !important; padding: 0 !important;
}
.vsc-acct-subpage-wrap .woocommerce-Address {
background: var(--ivory); border: 1px solid #E8EAED;
border-radius: 14px; padding: 20px 22px !important;
}
.vsc-acct-subpage-wrap .woocommerce-Address-title {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 10px;
}
.vsc-acct-subpage-wrap .woocommerce-Address-title h2,
.vsc-acct-subpage-wrap .woocommerce-Address-title h3 {
font-family: inherit; font-size: 16px; font-weight: 800; color: #082040; margin: 0;
white-space: nowrap;
}
.vsc-acct-subpage-wrap .woocommerce-Address-title .edit {
flex-shrink: 0; white-space: nowrap;
font-size: 13px; font-weight: 600;
}
.vsc-acct-subpage-wrap .woocommerce-Address address {
font-style: normal; color: #6B7280; line-height: 1.65; font-size: 13px;
}
@media (max-width: 640px) {
.vsc-acct-subpage-wrap .woocommerce-Addresses,
.vsc-acct-subpage-wrap .u-columns { grid-template-columns: 1fr; }
}
/* Account details form */
.vsc-acct-subpage-wrap form .form-row {
display: flex; flex-direction: column; margin: 0 0 14px;
}
.vsc-acct-subpage-wrap form .form-row-first,
.vsc-acct-subpage-wrap form .form-row-last {
width: calc(50% - 7px) !important; display: inline-block; vertical-align: top; float: none !important;
}
.vsc-acct-subpage-wrap form .form-row-first { margin-right: 14px; }
.vsc-acct-subpage-wrap form .form-row label {
font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
color: #082040; margin-bottom: 6px;
}
.vsc-acct-subpage-wrap form .form-row input,
.vsc-acct-subpage-wrap form .form-row select,
.vsc-acct-subpage-wrap form .form-row textarea {
width: 100%; padding: 11px 14px;
border: 1px solid #E8EAED; border-radius: 10px;
font-size: 14px; color: #082040; font-family: inherit;
background: #fff; outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.vsc-acct-subpage-wrap form .form-row input:focus,
.vsc-acct-subpage-wrap form .form-row select:focus,
.vsc-acct-subpage-wrap form .form-row textarea:focus {
border-color: #082040; box-shadow: 0 0 0 3px rgba(8,32,64,0.08);
}
.vsc-acct-subpage-wrap fieldset {
border: 1px solid #E8EAED; border-radius: 12px; padding: 18px 22px; margin-top: 18px;
}
.vsc-acct-subpage-wrap fieldset legend {
padding: 0 8px; font-weight: 700; color: #082040; font-size: 14px;
}
@media (max-width: 900px) {
.vsc-acct-subpage-wrap .woocommerce { grid-template-columns: 1fr; }
.vsc-acct-subpage-wrap .woocommerce-MyAccount-navigation { position: static; }
.vsc-acct-subpage-wrap .woocommerce-Addresses { grid-template-columns: 1fr; }
.vsc-acct-subpage-wrap form .form-row-first,
.vsc-acct-subpage-wrap form .form-row-last { width: 100% !important; margin-right: 0 !important; }
}
.vsc-account-wrap .woocommerce-MyAccount-navigation {
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
padding: 20px;
position: sticky; top: 100px;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation ul {
list-style: none; margin: 0; padding: 0;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li {
margin: 0;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li a {
display: flex; align-items: center;
padding: 10px 14px;
color: var(--text-muted);
font-size: 14px; font-weight: 500;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li a:hover {
background: var(--ivory);
color: var(--midnight);
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li.is-active a {
background: var(--midnight);
color: var(--white);
font-weight: 600;
}
.vsc-account-wrap .woocommerce-MyAccount-content {
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
padding: 36px 40px;
}
.vsc-account-wrap .woocommerce-MyAccount-content > h2,
.vsc-account-wrap .woocommerce-MyAccount-content > h3 {
font-family: 'Inter', serif;
font-size: clamp(28px, 3vw, 36px);
font-weight: 500;
color: var(--midnight);
letter-spacing: -0.5px;
margin: 0 0 8px;
line-height: 1.1;
}
.vsc-account-wrap .woocommerce-MyAccount-content > p {
color: var(--text-muted);
line-height: 1.7;
margin: 0 0 20px;
}
.vsc-account-wrap .woocommerce-MyAccount-content a {
color: var(--rose-hover);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.vsc-account-wrap .woocommerce-MyAccount-content a:hover { color: var(--midnight); }
/* Orders table */
.vsc-account-wrap .woocommerce-orders-table,
.vsc-account-wrap table.shop_table {
width: 100%; border-collapse: collapse; margin: 20px 0;
font-size: 14px;
}
.vsc-account-wrap .woocommerce-orders-table th,
.vsc-account-wrap table.shop_table th {
text-align: left;
padding: 14px 16px;
background: var(--ivory);
font-size: 12px; font-weight: 700;
letter-spacing: 0.4px; text-transform: uppercase;
color: var(--midnight);
border-bottom: 1px solid var(--border);
}
.vsc-account-wrap .woocommerce-orders-table td,
.vsc-account-wrap table.shop_table td {
padding: 16px;
border-bottom: 1px solid var(--border);
color: var(--midnight);
}
.vsc-account-wrap .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.vsc-account-wrap table.shop_table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vsc-account-wrap .woocommerce-orders-table__cell-order-actions .button,
.vsc-account-wrap .button {
display: inline-flex; align-items: center;
padding: 8px 18px;
background: var(--midnight);
color: var(--white) !important;
border: none;
border-radius: 100px;
font-size: 13px; font-weight: 600;
text-decoration: none !important;
cursor: pointer;
transition: background 0.2s;
}
.vsc-account-wrap .button:hover { background: #1a2d52; }
/* Addresses grid */
.vsc-account-wrap .woocommerce-Addresses {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
margin-top: 20px;
}
.vsc-account-wrap .woocommerce-Address {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
}
.vsc-account-wrap .woocommerce-Address-title {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.vsc-account-wrap .woocommerce-Address-title h2,
.vsc-account-wrap .woocommerce-Address-title h3 {
font-family: 'Inter', serif;
font-size: 22px; font-weight: 600; color: var(--midnight);
margin: 0;
}
.vsc-account-wrap .woocommerce-Address address {
font-style: normal;
color: var(--text-muted);
line-height: 1.7;
font-size: 14px;
}
/* Account details form */
.vsc-account-wrap form.edit-account,
.vsc-account-wrap form.woocommerce-EditAccountForm,
.vsc-account-wrap form.woocommerce-address-fields,
.vsc-account-wrap form.woocommerce-form-login {
display: grid; gap: 16px;
}
.vsc-account-wrap form .form-row {
display: flex; flex-direction: column; margin: 0;
}
.vsc-account-wrap form .form-row label {
font-size: 12px; font-weight: 600;
color: var(--midnight);
letter-spacing: 0.3px;
margin-bottom: 6px;
}
.vsc-account-wrap form .form-row input,
.vsc-account-wrap form .form-row select,
.vsc-account-wrap form .form-row textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--white);
font-size: 14px;
color: var(--midnight);
font-family: inherit;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.vsc-account-wrap form .form-row input:focus,
.vsc-account-wrap form .form-row select:focus,
.vsc-account-wrap form .form-row textarea:focus {
border-color: var(--rose);
box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
}
.vsc-account-wrap form .form-row-first,
.vsc-account-wrap form .form-row-last {
width: auto !important; float: none !important;
}
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-first,
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-last {
display: inline-block;
width: calc(50% - 8px) !important;
vertical-align: top;
}
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-first { margin-right: 14px; }
.vsc-account-wrap fieldset {
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 24px;
margin-top: 12px;
}
.vsc-account-wrap fieldset legend {
padding: 0 8px;
font-weight: 600; color: var(--midnight);
font-size: 14px;
}
.vsc-account-wrap .woocommerce-MyAccount-content p.form-row button[type="submit"] {
margin-top: 6px;
}
/* "Login / Register" forms on /my-account/ for logged-out users */
.vsc-account-wrap .u-columns {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.vsc-account-wrap .u-column1,
.vsc-account-wrap .u-column2 {
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px;
}
@media (max-width: 900px) {
.vsc-account-wrap .woocommerce {
grid-template-columns: 1fr;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation {
position: static;
}
.vsc-account-wrap .woocommerce-Addresses,
.vsc-account-wrap .u-columns {
grid-template-columns: 1fr;
}
.vsc-account-wrap .woocommerce-MyAccount-content { padding: 24px; }
}
/* =============================================================
Checkout — required field validation + collapsed summary header
============================================================= */
.vsc-step-error {
margin: 16px 0 0;
padding: 12px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
color: #b91c1c;
font-size: 0.9em;
line-height: 1.5;
}
.vsc-step-error strong { color: #991b1b; }
.vsc-checkout-form .form-row.vsc-invalid input,
.vsc-checkout-form .form-row.vsc-invalid select,
.vsc-checkout-form .woocommerce-input-wrapper.vsc-invalid input,
.vsc-checkout-form .woocommerce-input-wrapper.vsc-invalid select,
.vsc-checkout-form input.vsc-invalid,
.vsc-checkout-form select.vsc-invalid {
border-color: #ef4444 !important;
background: #fef2f2;
box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
/* Match radius styling on Select2 dropdowns (state, country) */
.select2-container--open .select2-dropdown {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}
/* ============================================================
V4 PATCH 3 (2026-05-28) — Header layout reset + Lumina-style
Forces clean horizontal header against any conflicting cascade.
Hides mobile-only items on desktop with strong priority.
Constrains logo image size (was rendering at natural size = huge).
============================================================ */
/* Body padding so fixed nav doesn't overlap content */
body.vsc-page { padding-top: 80px !important; }
body.vsc-page.admin-bar { padding-top: 112px !important; }
/* Nav container — force horizontal flex row */
nav.vsc-nav {
position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
border-bottom: 1px solid var(--border, #E5EAF0) !important;
z-index: 1000 !important;
padding: 14px 0 !important;
}
body.admin-bar nav.vsc-nav { top: 32px !important; }
nav.vsc-nav .vsc-nav-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 32px !important;
gap: 24px !important;
}
/* Logo — constrain image to header height */
nav.vsc-nav .vsc-logo {
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
flex-shrink: 0 !important;
}
nav.vsc-nav .vsc-logo img {
height: 44px !important;
width: auto !important;
max-width: 200px !important;
display: block !important;
object-fit: contain !important;
}
nav.vsc-nav .vsc-logo .custom-logo {
height: 44px !important;
width: auto !important;
max-width: 200px !important;
}
/* Nav links — horizontal row on desktop */
nav.vsc-nav .vsc-nav-links {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 32px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto !important;
justify-content: center !important;
}
nav.vsc-nav .vsc-nav-links li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
nav.vsc-nav .vsc-nav-links li > a {
color: var(--midnight, #082040) !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
}
nav.vsc-nav .vsc-nav-links li > a:hover {
color: var(--rose-hover, #0284C7) !important;
}
/* Hide mobile-only items on desktop — STRONG priority */
@media (min-width: 901px) {
nav.vsc-nav .vsc-mobile-menu-head,
nav.vsc-nav .vsc-nav-divider,
nav.vsc-nav .vsc-nav-secondary,
nav.vsc-nav .vsc-nav-mobile-only,
nav.vsc-nav .vsc-nav-burger,
nav.vsc-nav .vsc-mobile-menu-close { display: none !important; }
}
/* Icons (account + cart) — right side */
nav.vsc-nav .vsc-nav-icons {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
nav.vsc-nav .vsc-nav-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important; height: 42px !important;
border-radius: 50% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
color: var(--midnight, #082040) !important;
text-decoration: none !important;
position: relative !important;
transition: background 0.15s, color 0.15s !important;
}
nav.vsc-nav .vsc-nav-icon:hover {
background: var(--rose-soft, #E0F2FE) !important;
color: var(--rose-hover, #0284C7) !important;
}
nav.vsc-nav .vsc-nav-icon svg {
width: 22px !important; height: 22px !important;
display: block !important;
}
/* Cart count badge */
nav.vsc-nav .vsc-cart-toggle .cart-count {
position: absolute !important;
top: 2px !important; right: 2px !important;
min-width: 18px !important; height: 18px !important;
padding: 0 5px !important;
border-radius: 9px !important;
background: #0EA5E9 !important;
color: #FFFFFF !important;
font-size: 10px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 2px solid #FFFFFF !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
/* Hide cart count when 0 */
nav.vsc-nav .vsc-cart-toggle .cart-count:empty,
nav.vsc-nav .vsc-cart-toggle .cart-count[data-vsc-nav-count="0"] { display: none !important; }
/* Shop dropdown — Lumina-style hover dropdown */
nav.vsc-nav .vsc-nav-dropdown {
position: relative !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu {
position: absolute !important;
top: 100% !important; left: 50% !important;
transform: translateX(-50%) translateY(8px) !important;
background: var(--white, #FFFFFF) !important;
border: 1px solid var(--border, #E5EAF0) !important;
border-radius: 12px !important;
padding: 10px 0 !important;
min-width: 220px !important;
box-shadow: 0 12px 32px rgba(8,32,64,0.12) !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.18s, transform 0.18s, visibility 0.18s !important;
z-index: 2000 !important;
margin-top: 4px !important;
}
nav.vsc-nav .vsc-nav-dropdown:hover .dropdown-menu,
nav.vsc-nav .vsc-nav-dropdown:focus-within .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a {
display: block !important;
padding: 9px 18px !important;
color: var(--midnight, #082040) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: background 0.15s, color 0.15s !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a:hover {
background: var(--rose-soft, #E0F2FE) !important;
color: var(--rose-hover, #0284C7) !important;
}
nav.vsc-nav .vsc-nav-dropdown > a .dropdown-arrow {
font-size: 9px !important;
margin-left: 4px !important;
transition: transform 0.2s !important;
}
nav.vsc-nav .vsc-nav-dropdown:hover > a .dropdown-arrow {
transform: rotate(180deg) !important;
}
/* MOBILE BREAKPOINT — burger + slide-in menu */
@media (max-width: 900px) {
nav.vsc-nav .vsc-nav-container {
justify-content: space-between !important;
padding: 0 16px !important;
gap: 10px !important;
}
nav.vsc-nav .vsc-nav-burger {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: 40px !important; height: 40px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
order: 1 !important;
padding: 0 !important;
}
nav.vsc-nav .vsc-nav-burger span {
display: block !important;
width: 22px !important; height: 2px !important;
background: var(--midnight, #082040) !important;
border-radius: 2px !important;
transition: transform 0.25s, opacity 0.2s !important;
}
nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
nav.vsc-nav .vsc-logo { order: 2 !important; }
nav.vsc-nav .vsc-logo img { height: 36px !important; }
nav.vsc-nav .vsc-nav-icons { order: 3 !important; margin-left: auto !important; }
/* Hide desktop nav-links, show only when mobile menu opens */
nav.vsc-nav .vsc-nav-links {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
background: var(--white, #FFFFFF) !important;
transform: translateX(-100%) !important;
transition: transform 0.3s ease !important;
z-index: 9999 !important;
overflow-y: auto !important;
padding: 0 !important;
}
nav.vsc-nav .vsc-nav-links.is-open {
transform: translateX(0) !important;
}
nav.vsc-nav .vsc-mobile-menu-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 18px !important;
border-bottom: 1px solid var(--border, #E5EAF0) !important;
}
nav.vsc-nav .vsc-mobile-menu-close {
width: 36px !important; height: 36px !important;
background: none !important; border: none !important;
cursor: pointer !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
nav.vsc-nav .vsc-nav-links li {
display: block !important;
border-bottom: 1px solid var(--border, #E5EAF0) !important;
}
nav.vsc-nav .vsc-nav-links li > a {
display: block !important;
padding: 16px 20px !important;
font-size: 16px !important;
}
nav.vsc-nav .vsc-nav-divider {
display: block !important;
height: 8px !important;
background: var(--ivory, #F5F6F7) !important;
border: none !important;
}
nav.vsc-nav .vsc-nav-mobile-only,
nav.vsc-nav .vsc-nav-secondary { display: block !important; }
/* Mobile dropdown — expand inline, no positioning trick */
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu {
position: static !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
background: var(--ivory, #F5F6F7) !important;
border-radius: 0 !important;
margin: 0 !important;
min-width: 0 !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a {
padding: 12px 36px !important;
font-size: 14px !important;
}
}
/* ============================================================
V4 PATCH 4 (2026-05-28) — Step 3 (Payment) hard layout fix
Forces the form-row.place-order to be a clean vertical stack:
1. Privacy text
2. Terms checkbox (with clickable label)
3. Place Order button
Each in its own block, with clear gap, no overlap possible.
Also CSS-hides any duplicate free-ship banner (safety net for
browser-cached old JS).
============================================================ */
/* Container that wraps terms + place_order */
.woocommerce-checkout .form-row.place-order {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 20px 0 0 !important;
background: transparent !important;
border: none !important;
}
/* Privacy text — clear standalone paragraph */
.woocommerce-checkout .woocommerce-privacy-policy-text {
display: block !important;
margin: 0 0 20px !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--text-muted, #6B7A94) !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p {
margin: 0 !important;
}
/* Terms wrapper — own block with bottom margin */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
display: block !important;
width: 100% !important;
margin: 0 0 24px !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
clear: both !important;
}
/* The actual terms checkbox row */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row.validate-required,
.woocommerce-checkout p.form-row.terms,
.woocommerce-checkout p.form-row.validate-required:has(input[name="terms"]) {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 16px !important;
background: var(--white, #FFFFFF) !important;
border: 1.5px solid var(--border, #E5EAF0) !important;
border-radius: 12px !important;
position: relative !important;
z-index: 2 !important;
}
/* The label inside the terms row */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label[for="terms"],
.woocommerce-checkout p.form-row.validate-required label {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--midnight, #082040) !important;
font-weight: 500 !important;
}
/* The actual checkbox input — make it big and obviously clickable */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout input#terms {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
appearance: checkbox !important;
width: 20px !important;
height: 20px !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
cursor: pointer !important;
accent-color: var(--rose, #0EA5E9) !important;
opacity: 1 !important;
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
}
/* The label text + asterisk */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
flex: 1 1 auto !important;
color: var(--midnight, #082040) !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-link {
color: var(--rose-hover, #0284C7) !important;
text-decoration: underline !important;
}
.woocommerce-checkout .form-row .required {
color: #EF4444 !important;
text-decoration: none !important;
margin-left: 2px !important;
font-weight: 700 !important;
}
/* Place Order button — its own block, clearly below terms */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 16px 24px !important;
background: var(--midnight, #082040) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 100px !important;
font-family: inherit !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
position: relative !important;
z-index: 1 !important;
clear: both !important;
transition: background 0.15s, transform 0.15s !important;
min-height: 56px !important;
}
.woocommerce-checkout #place_order:hover {
background: #0A2A55 !important;
transform: translateY(-1px) !important;
}
/* CSS safety net — hide any 2nd / 3rd / Nth free-ship banner from JS dupes */
.vs-ship-progress ~ .vs-ship-progress,
.vsc-sidebar-shipbar ~ .vsc-sidebar-shipbar,
[id="vsc-sidebar-shipbar"] ~ [id="vsc-sidebar-shipbar"] { display: none !important; }
/* ============================================================
V4 PATCH 5 (2026-05-28) — Payment method radio visibility
Currently lumina_qbo is the only gateway. WC hides the radio
when only one option is available. When there are multiple
gateways, WC shows the radio automatically. Either way, make
the payment method look like a selected card with visible
selection state.
============================================================ */
.woocommerce-checkout #payment ul.payment_methods {
padding: 0 !important;
margin: 0 0 20px !important;
list-style: none !important;
border: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
list-style: none !important;
padding: 16px 18px !important;
margin: 0 0 10px !important;
border: 1.5px solid var(--border, #E5EAF0) !important;
border-radius: 14px !important;
background: var(--white, #FFFFFF) !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
position: relative !important;
}
.woocommerce-checkout #payment ul.payment_methods li:hover {
border-color: var(--rose, #0EA5E9) !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked),
.woocommerce-checkout #payment ul.payment_methods li.checked {
border-color: var(--midnight, #082040) !important;
background: var(--rose-soft, #E0F2FE) !important;
box-shadow: 0 4px 12px rgba(8,32,64,0.06) !important;
}
/* Show the radio button visibly */
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
appearance: radio !important;
-webkit-appearance: radio !important;
-moz-appearance: radio !important;
width: 18px !important;
height: 18px !important;
margin-right: 10px !important;
accent-color: var(--rose, #0EA5E9) !important;
vertical-align: middle !important;
cursor: pointer !important;
display: inline-block !important;
opacity: 1 !important;
position: relative !important;
}
/* Method title label */
.woocommerce-checkout #payment ul.payment_methods label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-weight: 700 !important;
color: var(--midnight, #082040) !important;
font-size: 15px !important;
margin: 0 !important;
}
/* Payment box (description + extra fields) */
.woocommerce-checkout #payment div.payment_box {
background: var(--ivory, #F5F6F7) !important;
border-radius: 10px !important;
margin-top: 12px !important;
padding: 14px 16px !important;
font-size: 13px !important;
line-height: 1.55 !important;
color: var(--text-muted, #475569) !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment div.payment_box p { margin: 0 !important; }
.woocommerce-checkout #payment div.payment_box strong { color: var(--midnight, #082040) !important; }
/* ============================================================
V4 PATCH 6 (2026-05-28) — Checkout topbar logo image size
Lumina uses a TEXT logo ("Lumina Aminos"), so their original
`.vsc-checkout-logo` rules set font-size only. Ventra uses an
IMAGE logo (ventra-logo-dark.png), so we need an explicit
`img` size constraint or the image renders at natural ~800px.
============================================================ */
.vsc-checkout-topbar .vsc-checkout-logo img {
height: 32px !important;
width: auto !important;
max-width: 180px !important;
display: block !important;
object-fit: contain !important;
}
@media (max-width: 640px) {
.vsc-checkout-topbar .vsc-checkout-logo img {
height: 26px !important;
max-width: 140px !important;
}
}
/* ================================================================
v4.6.2 — MOBILE HEADER (pixel-matched to aminoclub.com)
Header at <=900px:
- 3-column grid: burger 48px | logo 1fr | cart 48px
- White background, subtle bottom border, no big drop shadow
- Logo image capped at 28px tall (was 48px from v3 base)
- Cart icon 22px stroke, badge top-right
- My own .vsv4-mobile-burger (in header.php) is the visible
hamburger; snippet #31's injected .vsv3-hamburger is hidden
so we don't get a duplicate
Drawer (snippet #31 owns the markup):
- Primary items get a right chevron
- Secondary items (Account, Cart added by vsc-cart.js) appear
at the bottom in lighter gray with a top divider
================================================================ */
.vsv4-mobile-burger { display: none; }
@media (max-width: 900px) {
/* Reset main-nav: white, no padding, subtle border, no big shadow */
.main-nav,
.main-nav.main-nav-v5 {
background: #FFFFFF !important;
padding: 0 !important;
border-bottom: 1px solid #F1F5F9 !important;
box-shadow: none !important;
}
/* 3-column grid: burger | logo | cart actions.
Selectors prefixed with `html body` (0,3,2) so they beat snippet #14
(vsv3-nuclear-fix) and snippet #31, both of which redefine
`.main-nav .nav-inner` (0,2,0) inline AFTER this external file loads.
grid-template-rows is a single explicit 60px row; grid-auto-rows:0 +
overflow guards stop any stray child from creating an implicit 2nd row. */
html body .main-nav .nav-inner,
html body .main-nav.main-nav-v5 .nav-inner {
display: grid !important;
grid-template-columns: 48px 1fr 48px !important;
grid-template-rows: 60px !important;
grid-auto-rows: 0 !important;
align-items: center !important;
gap: 0 !important;
padding: 0 16px !important;
max-width: 100% !important;
margin: 0 !important;
}
/* My own burger button — left column */
html body .main-nav .vsv4-mobile-burger,
.vsv4-mobile-burger {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
position: static !important;
z-index: auto !important;
}
.vsv4-mobile-burger span {
display: block !important;
width: 22px !important;
height: 2px !important;
background: #0F2540 !important;
border-radius: 1px !important;
transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.vsv4-mobile-burger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
.vsv4-mobile-burger.is-open span:nth-child(2) { opacity: 0 !important; }
.vsv4-mobile-burger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
/* Logo: centered, height capped 28px. grid-row:1 pins it to the single row. */
html body .main-nav .nav-logo-official,
html body .main-nav.main-nav-v5 .nav-logo-official {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
max-width: 200px !important;
display: inline-flex !important;
align-items: center !important;
}
html body .main-nav .nav-logo-official img,
html body .main-nav.main-nav-v5 .nav-logo-official img {
height: 28px !important;
max-height: 28px !important;
width: auto !important;
max-width: 200px !important;
display: block !important;
}
/* Action icons: cart only on right, hide search + standalone account.
grid-row:1 pins the bag to the same row as burger + logo — without it,
snippet #14's grid redefinition let nav-actions fall into an implicit
second row, dropping the bag below the logo. */
html body .main-nav .nav-actions,
html body .main-nav.main-nav-v5 .nav-actions {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
display: flex !important;
align-items: center !important;
}
.main-nav .nav-actions > .nav-action-btn:not(.vsc-cart-toggle) {
display: none !important;
}
/* v3's mobile-toggle: was the old hamburger, kept hidden by snippet #31 — make sure */
.main-nav .mobile-toggle { display: none !important; }
/* Snippet #31's injected hamburger lives inside .nav-actions and its own
rule (.vsv3-hamburger{display:flex!important}) loads AFTER this file, so
equal specificity would lose on source order. Bump specificity to win:
.main-nav .nav-actions .vsv3-hamburger is 0,3,0 vs the snippet's 0,1,0.
My .vsv4-mobile-burger (top-left) is the real hamburger; this removes the
duplicate snippet #31 keeps re-appending to the right via reorderHeaderIcons. */
.main-nav .nav-actions .vsv3-hamburger,
.main-nav .vsv3-hamburger,
body .vsv3-hamburger { display: none !important; }
/* Lights search overlay element shouldn't bleed into header on mobile */
.vsv3-search-overlay { z-index: 9999; }
/* Cart button compact */
.main-nav .nav-actions .vsc-cart-toggle {
width: 36px !important;
height: 36px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: #0F2540 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.main-nav .nav-actions .vsc-cart-toggle svg {
width: 22px !important;
height: 22px !important;
stroke: currentColor !important;
}
.main-nav .vsc-cart-toggle .cart-count {
position: absolute !important;
top: -2px !important;
right: -4px !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 4px !important;
background: #0EA5E9 !important;
color: #FFFFFF !important;
font-size: 10px !important;
font-weight: 700 !important;
border-radius: 50% !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Hide the badge when cart is empty (count == 0) */
.main-nav .vsc-cart-toggle .cart-count[data-count="0"] { display: none !important; }
/* Drawer: right chevron on every row, Account + Cart at the bottom as secondary */
.vsv3-drawer nav a::after,
.vsv3-drawer nav .vsv3-drawer-secondary::after {
content: '\203A' !important; /* › */
font-size: 24px !important;
color: #94A3B8 !important;
margin-left: auto !important;
line-height: 1 !important;
font-weight: 400 !important;
}
.vsv3-drawer nav .vsv3-drawer-secondary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: #94A3B8 !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #F1F5F9 !important;
font-family: inherit !important;
text-align: left !important;
width: 100% !important;
cursor: pointer !important;
padding: 20px 24px !important;
font-size: 17px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.vsv3-drawer nav .vsv3-drawer-secondary:first-of-type {
margin-top: 24px !important;
border-top: 1px solid #E2E8F0 !important;
}
}
/* ============================================================
Passwordless checkout auth — full-page flow (vsc-auth.js)
Rendered inside the checkout page body when the visitor is not a
signed-in researcher with a complete profile. Reference-matched:
centered logo, soft inputs, segmented code boxes, pill CTAs.
============================================================ */
#vsc-auth-flow{max-width:440px;margin:8px auto 0;background:#fff;border:1px solid #eef2f7;border-radius:20px;padding:36px 30px;box-shadow:0 18px 50px rgba(8,32,64,0.08);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.vsc-authp-intro{text-align:center;font-size:14px;line-height:1.55;color:#475569;margin:0 0 22px;}
.vsc-authp-logo{text-align:center;margin:0 0 18px;}
.vsc-authp-logo img{height:30px;width:auto;display:inline-block;}
#vsc-auth-flow h2{text-align:center;font-size:26px;font-weight:700;color:#082040;margin:0 0 8px;letter-spacing:-0.4px;line-height:1.2;}
.vsc-authp-sub{text-align:center;font-size:15px;line-height:1.55;color:#64748b;margin:0 0 24px;}
.vsc-authp-sub strong{color:#082040;font-weight:700;}
.vsc-authp-label{display:block;font-size:14px;font-weight:600;color:#082040;margin:16px 0 8px;}
.vsc-authp-label span{color:#94a3b8;font-weight:400;}
.vsc-authp-input{width:100%;box-sizing:border-box;padding:16px 18px;border:1.5px solid transparent;border-radius:14px;font-size:16px;font-family:inherit;color:#1f2937;background:#f1f5f9;outline:none;transition:border-color .15s,background .15s;}
.vsc-authp-input::placeholder{color:#94a3b8;}
.vsc-authp-input:focus{border-color:#0EA5E9;background:#fff;}
select.vsc-authp-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23082040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer;}
/* iOS ignores width/box-sizing, centers its value, and
overflows right. Normalise it to match the text fields. */
input[type="date"].vsc-authp-input{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;text-align:left;cursor:pointer;}
input[type="date"].vsc-authp-input::-webkit-date-and-time-value{text-align:left;margin:0;}
input[type="date"].vsc-authp-input::-webkit-calendar-picker-indicator{margin-left:auto;}
.vsc-authp-btn{width:100%;margin-top:20px;padding:17px;border:none;border-radius:100px;background:#082040;color:#fff;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,opacity .2s,transform .1s;}
.vsc-authp-btn:hover{background:#0EA5E9;}
.vsc-authp-btn:active{transform:scale(0.99);}
.vsc-authp-fine{font-size:12.5px;line-height:1.5;color:#94a3b8;margin:18px 0 0;text-align:center;}
.vsc-authp-fine a{color:#0284C7;text-decoration:underline;}
.vsc-authp-hint{text-align:center;font-size:13px;color:#94a3b8;margin:18px 0 0;}
.vsc-authp-resend{text-align:center;font-size:13px;color:#94a3b8;margin:14px 0 0;min-height:18px;}
/* Segmented one-time-code boxes */
.vsc-auth-code-boxes{display:flex;gap:10px;justify-content:center;margin:6px 0 0;}
.vsc-auth-digit{width:48px;height:58px;text-align:center;font-size:24px;font-weight:700;color:#082040;background:#f1f5f9;border:1.5px solid transparent;border-radius:14px;outline:none;font-family:inherit;transition:border-color .15s,background .15s;}
.vsc-auth-digit:focus{border-color:#0EA5E9;background:#fff;}
.vsc-auth-err{color:#B22234;font-size:13.5px;line-height:1.45;text-align:center;margin-top:12px;}
.vsc-auth-err:empty{margin-top:0;}
.vsc-auth-link{background:none;border:none;color:#0284C7;font-family:inherit;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;}
@media (max-width:480px){
#vsc-auth-flow{padding:28px 20px;border-radius:16px;}
#vsc-auth-flow h2{font-size:23px;}
.vsc-auth-digit{width:44px;height:54px;font-size:22px;}
.vsc-auth-code-boxes{gap:8px;}
}
/* =============================================================
PDP REDESIGN v4.9 — RUO banner, badges, bundle, CoA, sticky bar
One accent (cyan --rose), one pill radius (100px), 12/16 card radii.
============================================================= */
/* RUO disclaimer banner — full-bleed navy, flush under header */
.vsc-ruo-banner { background: var(--midnight); border-top: 1px solid rgba(255,255,255,0.08); }
.vsc-ruo-banner-inner {
max-width: 760px; margin: 0 auto; padding: 13px 20px;
display: flex; gap: 10px; align-items: flex-start; justify-content: center; text-align: center;
}
.vsc-ruo-icon { color: var(--rose); flex-shrink: 0; margin-top: 1px; }
.vsc-ruo-banner p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.vsc-ruo-lead { color: var(--rose); font-weight: 700; letter-spacing: 0.3px; }
/* Title badges — neutral data pill + one cyan RUO accent pill */
.vsc-pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vsc-pdp-badge {
display: inline-flex; align-items: center; border-radius: 100px; padding: 6px 14px;
font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
border: 1.5px solid var(--border); color: var(--text-muted); background: var(--white);
}
.vsc-pdp-badge.is-accent { border-color: var(--rose); color: var(--rose-hover); background: var(--rose-soft); }
/* Bundle & save — selectable quantity cards with vial thumbnails (AminoClub-style) */
.vsc-pdp-bundle { margin-bottom: 22px; }
.vsc-bundle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.vsc-bundle-card {
position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center;
text-align: center; padding: 16px 8px 12px; border: 1.5px solid var(--border); border-radius: 16px;
background: #F6FAFF; cursor: pointer; transition: border-color 0.2s, background 0.2s; font-family: inherit;
}
.vsc-bundle-card:hover { border-color: var(--rose); }
.vsc-bundle-card.active { border-color: var(--rose); background: var(--rose-soft); }
/* Pre-composed universal 1/2/3-vial illustration: one image per card, shown whole. */
.vsc-bundle-thumbs { display: flex; align-items: center; justify-content: center; height: 60px; }
.vsc-bundle-thumbs img { width: auto; max-width: 100%; height: 60px; object-fit: contain; display: block; }
.vsc-bundle-qty { font-size: 14px; font-weight: 700; color: var(--midnight); line-height: 1.1; }
/* Savings: green so the discount pops (deliberate exception to the cyan accent). */
.vsc-bundle-save { font-size: 12.5px; font-weight: 700; color: #0E9F6E; min-height: 15px; }
.vsc-bundle-card .vsc-bundle-save:empty { display: none; }
/* "Standard price" on the 1-bottle card is neutral, not green. */
.vsc-bundle-card[data-bundle-qty="1"] .vsc-bundle-save { color: var(--text-muted); font-weight: 500; }
/* Color-coded ribbons (AminoClub-style): popular = teal, value = amber. */
.vsc-bundle-tag {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
color: #fff; font-size: 10px; font-weight: 800;
letter-spacing: 0.5px; text-transform: uppercase; border-radius: 100px;
padding: 4px 11px; white-space: nowrap; box-shadow: 0 3px 8px rgba(8,32,64,0.18);
}
.vsc-bundle-tag--popular { background: #0E9F8E; }
.vsc-bundle-tag--value { background: #E8920C; }
/* Give the ribbon room so it never clips against the card above. */
.vsc-bundle-row { margin-top: 18px; }
/* Compact section labels (override legacy block/margin styling) */
.vsc-pdp-option-label { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--midnight); margin: 0; }
.vsc-pdp-bundle .vsc-pdp-option-label { display: block; }
/* Dosage row — label inline with pills (compact, AminoClub-style) */
.vsc-pdp-options-row,
.vsc-pdp-options { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vsc-pdp-options .vsc-pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.vsc-pdp-options .vsc-pdp-size {
padding: 11px 22px; border-radius: 100px; border: 1.5px solid var(--border);
background: var(--white); color: var(--midnight); font-size: 14px; font-weight: 600;
cursor: pointer; transition: all 0.2s; text-align: center; min-width: 0;
}
.vsc-pdp-options .vsc-pdp-size.active { border-color: var(--midnight); background: var(--midnight); color: #fff; }
/* Quantity row — label + stepper + big price on the right (AminoClub position) */
.vsc-pdp-qtyrow { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.vsc-pdp-qtyrow .vsc-pdp-price { font-family: 'Inter', serif; font-size: 30px; font-weight: 700; color: var(--midnight); margin: 0 0 0 auto; }
/* Trust strip — compact soft card (Ventra wording, AminoClub container feel) */
.vsc-pdp-trust {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
background: var(--ivory); border: 1px solid var(--border); border-radius: 16px;
padding: 16px 18px; margin-top: 4px;
}
.vsc-pdp-trust-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.vsc-pdp-trust-item svg { color: var(--rose-hover); flex-shrink: 0; }
@media (max-width: 600px) {
.vsc-pdp-trust { grid-template-columns: 1fr; gap: 9px; padding: 14px 16px; }
.vsc-pdp-qtyrow .vsc-pdp-price { font-size: 26px; }
}
/* Action row — CoA outline pill + primary Add button */
.vsc-pdp-actions { display: flex; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.vsc-pdp-coa {
display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 20px;
border-radius: 100px; border: 1.5px solid var(--border); background: var(--white);
color: var(--midnight); font-size: 14px; font-weight: 600; text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.vsc-pdp-coa:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-pdp-coa svg { flex-shrink: 0; }
/* Sticky add-to-cart bar — reveals on scroll */
/* Pinned bottom buy bar. Hidden by default; JS toggles .is-visible whenever the
main Add-to-Cart row is off screen (shown on load + once scrolled past the
buy box, hidden while the on-page Add to Cart is visible). */
.vsc-stickybar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
background: var(--white); border-top: 1px solid var(--border);
box-shadow: 0 -6px 24px rgba(8,32,64,0.08);
transform: translateY(110%); opacity: 0; pointer-events: none;
transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease;
padding-bottom: env(safe-area-inset-bottom);
}
.vsc-stickybar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* White filler that bleeds below the bar so any mobile-browser bottom-chrome
gap (Chrome iOS toolbar, etc.) reads as part of the bar — looks attached to
the screen bottom without dragging the bar down. Off-screen, non-interactive. */
.vsc-stickybar::after {
content: ''; position: absolute; left: 0; right: 0; top: 100%;
height: 160px; background: var(--white); pointer-events: none;
}
/* Reserve space so the bar never covers the last content/footer when shown. */
body:has(.vsc-stickybar) { padding-bottom: 76px; }
@media (max-width: 600px) { body:has(.vsc-stickybar) { padding-bottom: 66px; } }
.vsc-stickybar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.vsc-stickybar-info { display: flex; flex-direction: column; min-width: 0; }
.vsc-stickybar-name {
font-size: 14px; font-weight: 600; color: var(--midnight);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.vsc-stickybar-price { font-size: 17px; font-weight: 700; color: var(--midnight); }
.vsc-stickybar-sizes { display: flex; gap: 6px; margin-left: auto; overflow-x: auto; }
.vsc-stickybar-size {
padding: 8px 12px !important; border-radius: 100px !important;
border: 1.5px solid var(--border) !important; background: var(--white); color: var(--midnight);
font-size: 13px !important; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 0;
}
.vsc-stickybar-size.active { background: var(--midnight) !important; color: #fff; border-color: var(--midnight) !important; }
.vsc-stickybar-add {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
background: var(--midnight); color: #fff; border: none; border-radius: 100px;
padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.vsc-stickybar-add:hover { background: var(--blue-secondary); }
/* Disabled Add buttons (multi-variant, no dosage chosen yet) — greyed out. */
.vsc-pdp-cart:disabled, .vsc-pdp-cart[disabled],
.vsc-stickybar-add:disabled, .vsc-stickybar-add[disabled] {
background: #E5EAF0 !important; color: #9AA7BC !important;
box-shadow: none !important; cursor: not-allowed; opacity: 1;
}
/* Stacked variant (single-dosage products, no pills): name+price row on top,
full-width Add button below — matches the AminoClub single-product bar. */
.vsc-stickybar--stacked .vsc-stickybar-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 16px; }
.vsc-stickybar--stacked .vsc-stickybar-info { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
.vsc-stickybar--stacked .vsc-stickybar-name { font-size: 15px; max-width: 65vw; }
.vsc-stickybar--stacked .vsc-stickybar-price { font-size: 19px; }
.vsc-stickybar--stacked .vsc-stickybar-add { width: 100%; justify-content: center; padding: 11px 22px; font-size: 15px; }
/* Multi-variation: dosage pills + Add share the bottom row; pills hug-left,
Add flexes to fill the remaining width (matches the buy-box action row). */
.vsc-stickybar--multi .vsc-stickybar-sizes { flex: 0 0 auto; margin: 0; }
.vsc-stickybar--multi .vsc-stickybar-add { width: auto; flex: 1 1 auto; min-width: 0; }
/* Wrap the pill group + Add together on the second row. */
.vsc-stickybar--multi .vsc-stickybar-row2 { display: flex; align-items: center; gap: 10px; width: 100%; }
@media (max-width: 600px) {
.vsc-ruo-banner-inner { padding: 11px 16px; gap: 8px; }
.vsc-ruo-banner p { font-size: 12px; }
.vsc-pdp-badges { margin-bottom: 12px; }
.vsc-bundle-row { gap: 8px; }
.vsc-bundle-card { padding: 12px 10px; border-radius: 14px; }
.vsc-bundle-qty { font-size: 13px; }
.vsc-bundle-save { font-size: 11px; }
.vsc-bundle-tag { font-size: 8.5px; letter-spacing: 0.3px; padding: 3px 8px; top: -8px; }
.vsc-pdp-actions { gap: 10px; }
.vsc-pdp-actions .vsc-pdp-cart { padding: 14px 16px !important; font-size: 14px !important; min-width: 0 !important; }
.vsc-pdp-coa { padding: 0 14px; font-size: 13px; }
.vsc-stickybar-inner { gap: 10px; padding: 10px 12px; }
.vsc-stickybar-name { display: none; }
.vsc-stickybar-price { font-size: 16px; }
.vsc-stickybar-sizes { margin-left: 0; }
.vsc-stickybar-add { padding: 11px 18px; font-size: 14px; margin-left: auto; }
/* Stacked variant on mobile: keep the name visible + full-width Add, compact. */
.vsc-stickybar--stacked .vsc-stickybar-inner { gap: 6px; padding: 8px 14px; }
.vsc-stickybar--stacked .vsc-stickybar-name { display: block; font-size: 14px; }
.vsc-stickybar--stacked .vsc-stickybar-price { font-size: 18px; }
.vsc-stickybar--stacked .vsc-stickybar-add { width: 100%; margin-left: 0; padding: 11px 22px; font-size: 15px; justify-content: center; }
/* Multi-variation on mobile: pills hug-left, Add fills the rest of row 2. */
.vsc-stickybar--multi .vsc-stickybar-row2 { display: flex; align-items: center; gap: 8px; width: 100%; }
.vsc-stickybar--multi .vsc-stickybar-sizes { flex: 0 0 auto; margin: 0; }
.vsc-stickybar--multi .vsc-stickybar-add { width: auto; flex: 1 1 auto; margin-left: 0; padding: 11px 16px; font-size: 15px; }
}
/* =============================================================
PDP v4.9.3 — Certificate of Analysis slide-up modal (inline PDF)
============================================================= */
.vsc-coa-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.vsc-coa-modal.is-open { display: block; }
.vsc-coa-overlay {
position: absolute; inset: 0; background: rgba(8,32,64,0.55);
opacity: 0; transition: opacity 0.25s ease;
}
.vsc-coa-modal.is-open .vsc-coa-overlay { opacity: 1; }
.vsc-coa-sheet {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--white); border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 40px rgba(8,32,64,0.25);
display: flex; flex-direction: column;
max-height: 80vh; height: 80vh;
transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
padding-bottom: env(safe-area-inset-bottom);
}
.vsc-coa-modal.is-open .vsc-coa-sheet { transform: translateY(0); }
.vsc-coa-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vsc-coa-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vsc-coa-flask {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
background: var(--rose-soft); color: var(--rose-hover);
display: inline-flex; align-items: center; justify-content: center;
}
.vsc-coa-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vsc-coa-eyebrow { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--midnight); }
.vsc-coa-count { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.vsc-coa-product { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-coa-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vsc-coa-dl {
display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
border-radius: 100px; border: 1.5px solid var(--border); background: var(--white);
color: var(--midnight); font-size: 13.5px; font-weight: 600; text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.vsc-coa-dl:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-coa-x {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 100px;
border: 1.5px solid var(--border); background: var(--white); color: var(--midnight);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.vsc-coa-x:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-coa-body { flex: 1 1 auto; min-height: 0; background: var(--ivory); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vsc-coa-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.vsc-coa-page { width: 100%; max-width: 820px; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(8,32,64,0.12); background: var(--white); }
.vsc-coa-loading {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 56px 20px; color: var(--text-muted); font-size: 14px;
}
.vsc-coa-spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border); border-top-color: var(--rose);
animation: vsc-coa-spin 0.7s linear infinite;
}
@keyframes vsc-coa-spin { to { transform: rotate(360deg); } }
.vsc-coa-error { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.vsc-coa-error a { color: var(--rose-hover); text-decoration: underline; font-weight: 600; }
.vsc-coa-note {
flex-shrink: 0; margin: 0; padding: 12px 20px; font-size: 11.5px; line-height: 1.5;
color: var(--text-muted); border-top: 1px solid var(--border); background: var(--white);
}
.vsc-coa-note a { color: var(--rose-hover); text-decoration: underline; }
@media (max-width: 600px) {
.vsc-coa-dl span { display: none; }
.vsc-coa-dl { padding: 9px; }
.vsc-coa-pages { padding: 12px; gap: 12px; }
}
@media (min-width: 768px) {
/* Center as a card on desktop instead of full-width bottom sheet */
.vsc-coa-sheet {
left: 50%; right: auto; bottom: auto; top: 50%;
width: min(880px, 92vw); height: 80vh; max-height: 80vh;
border-radius: 20px; transform: translate(-50%, -45%); opacity: 0;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}
.vsc-coa-modal.is-open .vsc-coa-sheet { transform: translate(-50%, -50%); opacity: 1; }
}
/* =============================================================
SHOP ARCHIVE CARDS v4.13.0 — AminoClub-style (.product-card.vsc-acard)
Overrides the v3 parent .product-card. Layout 1:1 with the reference:
full uncropped vial, title + "From $price" row, italic subtitle, black
"View" pill. (Product photos keep their real studio background.)
============================================================= */
.product-card.vsc-acard {
background: #F8F8F8; border: 1px solid var(--border); border-radius: 20px;
overflow: hidden; display: flex; flex-direction: column; padding: 0;
box-shadow: none; transition: box-shadow .2s, transform .2s; position: relative;
}
.product-card.vsc-acard:hover { box-shadow: 0 18px 40px rgba(8,32,64,0.12); transform: translateY(-4px); }
.vsc-acard .vsc-acard-image {
display: block; aspect-ratio: 1/1; background: var(--ivory); overflow: hidden;
}
.vsc-acard .vsc-acard-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vsc-acard .vsc-acard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vsc-acard .vsc-acard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Title: lighter + smaller than before so it reads like the reference and
doesn't dominate or jam into 3 tight lines. */
.vsc-acard .vsc-acard-title { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: normal; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; margin: 0; }
.vsc-acard .vsc-acard-title a { color: var(--midnight); text-decoration: none; }
.vsc-acard .vsc-acard-price { text-align: right; flex-shrink: 0; line-height: 1.05; }
.vsc-acard .vsc-acard-price-pre { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; }
.vsc-acard .vsc-acard-price-amt { font-size: 18px; font-weight: 800; color: var(--midnight); white-space: nowrap; }
.vsc-acard .vsc-acard-price-amt .woocommerce-Price-amount { font-weight: 800; color: var(--midnight); }
/* Subtitle: plain grey (not italic), ~70% of the title, single line, matching the reference's secondary line. */
.vsc-acard .vsc-acard-sub { font-size: 14.5px; font-style: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.vsc-acard .vsc-acard-cta { margin-top: auto; display: block; text-align: center; background: var(--midnight); color: #fff; padding: 14px; border-radius: 100px; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .2s; }
.vsc-acard .vsc-acard-cta:hover { background: var(--blue-secondary); }
.vsc-acard .sale-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #E8920C; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 100px; }
@media (max-width: 600px) {
.vsc-acard .vsc-acard-body { padding: 14px 12px 16px; gap: 8px; }
/* Title-extend fix: the dark theme pins the price column to min-width:70px, which on
narrow 2-col cards left the title only ~61px so single-word peptide names split
mid-word ("Cagrilinti/de"). Trim the price column so the title extends past the
halfway point and fits on one line — layout stays title-left / price-right.
(Dark-theme price min-width override lives in vsc-dark.css.) */
.vsc-acard .vsc-acard-head { gap: 6px !important; }
.vsc-acard .vsc-acard-title { font-size: 13.5px !important; letter-spacing: -0.5px !important; }
.vsc-acard .vsc-acard-price { min-width: 0 !important; }
.vsc-acard .vsc-acard-price-amt { font-size: 14px !important; white-space: nowrap !important; }
.vsc-acard .vsc-acard-price-pre { font-size: 10.5px !important; }
.vsc-acard .vsc-acard-sub { font-size: 13px; }
.vsc-acard .vsc-acard-sub { font-size: 12.5px; }
.vsc-acard .vsc-acard-cta { padding: 12px; font-size: 14px; }
}
/* =============================================================
SHOP ARCHIVE — top-filter layout v4.14.0 (AminoClub-style)
Header + search/sort + category pills across the top; full-width
responsive grid below (bigger cards on desktop). Replaces the v3
parent left-sidebar layout (.shop-layout etc. no longer emitted).
============================================================= */
.vsc-shop-wrap { max-width: 1640px; margin: 0 auto; padding: 36px 32px 64px; }
/* The search box (border-radius:100px) and pills/cards read ~12px inset from
the wrap edge because of their heavy rounding, so flush heading text looks
too far left beside them. Indent the text-only blocks (heading, subhead,
meta) to line up with the boxes' visible left edge. */
.vsc-shop-head { margin: 0; padding: 0 0 0 12px; }
.vsc-shop-h1 { font-family: 'Inter', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; color: var(--midnight); margin: 0 0 6px; padding: 0; }
.vsc-shop-subhead { font-size: 15px; color: var(--text-muted); margin: 0 0 24px; padding: 0; }
.vsc-shop-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 0; }
.vsc-shop-search { position: relative; flex: 1 1 380px; max-width: 560px; margin: 0; }
.vsc-shop-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.vsc-shop-search input { width: 100%; margin: 0; padding: 14px 18px 14px 46px; border: 1px solid var(--border); background: #F7F9FB; border-radius: 100px; font-family: inherit; font-size: 15px; color: var(--midnight); outline: none; }
.vsc-shop-search input:focus { border-color: var(--rose); background: #fff; }
.vsc-shop-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vsc-shop-pill { background: #F1F4F8; border: 1px solid transparent; color: var(--midnight); font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 100px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.vsc-shop-pill:hover { background: #E3E9F0; }
.vsc-shop-pill.is-active { background: var(--midnight); color: #fff; }
.vsc-shop-pill-count { font-weight: 500; opacity: 0.6; margin-left: 3px; font-size: 12.5px; }
.vsc-shop-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; padding-left: 12px; }
.vsc-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: none; margin: 0; }
.vsc-shop-empty { text-align: center; padding: 64px 24px; color: var(--text-muted); }
.vsc-shop-empty h3 { font-size: 20px; color: var(--midnight); margin: 0 0 8px; }
@media (max-width: 1200px) { .vsc-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px) { .vsc-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) {
.vsc-shop-wrap { padding: 24px 12px 48px; }
.vsc-shop-h1 { font-size: 26px; }
.vsc-shop-controls { gap: 12px; }
.vsc-shop-search { flex: 1 1 100%; max-width: none; }
.vsc-shop-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px 14px; padding: 0 12px 4px; }
.vsc-shop-pill { flex: 0 0 auto; }
.vsc-shop-grid { gap: 12px; }
/* Mobile: trim the heading/meta optical indent (12px reads too wide vs the
search bar here) so the title lines up with the search box + pills. */
.vsc-shop-head { padding-left: 6px; }
.vsc-shop-meta { padding-left: 6px; }
}