/* ============================================================
VP ENHANCEMENTS — Dark research-store design system
Reference: vitalpeps.com (gold #C9A84C) rebranded to purple #4a1580.
Neutrals kept from reference; only the primary scheme changes.
============================================================ */
:root {
/* Brand (purple, replacing reference gold) */
--vp-primary: #4a1580;
--vp-primary-deep: #33095c; /* darkened ~20% */
--vp-primary-mid: #5a1f95;
--vp-primary-light: #ce83e8; /* homepage accent lavender — text/links/prices */
--vp-primary-bright: #e2aef5; /* hover / emphasis */
--vp-primary-tint: rgba(74, 21, 128, 0.12);
--vp-primary-glow: rgba(122, 53, 187, 0.22);
--vp-primary-rgb: 122, 53, 187; /* light-purple for glows/rings */
/* Button gradient — matched to the homepage primary button (dark → purple). */
--vp-grad: linear-gradient(160deg, #1a1a24 0%, #2e1860 42%, #4a1580 78%, #5a1f95 100%);
--vp-grad-hover: linear-gradient(160deg, #241f31 0%, #3a2078 42%, #5c1ea1 78%, #6f27b8 100%);
--vp-btn-border: rgba(206, 131, 232, 0.55); /* thin lavender button border (homepage) */
--vp-grad-text: linear-gradient(120deg, #e2aef5 0%, #b76be0 48%, #9a5cd8 100%); /* bright gradient for accent TEXT (hero) */
--vp-grad-badge: linear-gradient(135deg, #8a4fce 0%, #5a1f95 40%, #33095c 65%, #5a1f95 100%);
/* Neutrals (from reference, unchanged) */
--vp-black: #050505;
--vp-dark: #0a0a0a;
--vp-dark-2: #111111;
--vp-gray-900: #161616;
--vp-gray-800: #1c1c1c;
--vp-gray-700: #2a2a2a;
--vp-gray-500: #909090;
--vp-gray-600: #74748c;
--vp-transition: 0.2s ease;
--vp-gray-400: #b8b8b8;
--vp-gray-300: #d8d8d8;
--vp-ink: #f4f2fb; /* near-white heading (cool) */
--vp-body: #c2bfd4; /* body text */
--vp-white: #ffffff;
/* Secondary semantic accent (research-tag pills) — kept from reference */
--vp-blue: #60a5fa;
--vp-blue-pale: rgba(96, 165, 250, 0.15);
--vp-blue-border: rgba(96, 165, 250, 0.42);
--vp-blue-text: #c2d9ff; /* readable research-tag text on dark */
--vp-success: #10b981;
--vp-danger: #ef4444;
--vp-line: rgba(255, 255, 255, 0.09);
--vp-line-2: rgba(255, 255, 255, 0.16);
--vp-bg-soft: rgba(255, 255, 255, 0.03);
/* Flat / sharp corners to match the homepage (predominantly 3px). */
--vp-radius: 3px;
--vp-radius-sm: 3px;
--vp-radius-lg: 4px;
--vp-radius-pill: 999px; /* small research-tag pills only (as on the homepage) */
--vp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--vp-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.75), 0 2px 8px -3px rgba(0, 0, 0, 0.55);
--vp-shadow-md: 0 28px 66px -18px rgba(0, 0, 0, 0.82);
--vp-shadow-glow: 0 0 0 1px rgba(var(--vp-primary-rgb), 0.5), 0 22px 56px -18px rgba(var(--vp-primary-rgb), 0.45);
--vp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Elevated surfaces (glassy dark) */
--vp-surface: rgba(255, 255, 255, 0.035);
--vp-surface-2: rgba(255, 255, 255, 0.06);
--vp-surface-hover: rgba(255, 255, 255, 0.09);
--vp-font-sans: 'Inter', Arial, sans-serif;
--vp-font-display: 'Montserrat', Arial, sans-serif;
}
/* ============================================================
DARK PAGE SHELL (scoped to Woo pages via body.vp-dark)
Out-specify Divi's light backgrounds with #page-container chains.
============================================================ */
body.vp-dark,
body.vp-dark #page-container,
body.vp-dark #main-content,
body.vp-dark #et-boc,
body.vp-dark .et-l--body,
body.vp-dark .container,
body.vp-dark #left-area,
body.vp-dark .woocommerce {
background-color: var(--vp-black);
color: var(--vp-body);
}
body.vp-dark #main-content .container:before { background: none; display: none; }
/* Divi locks #left-area to ~77% with !important on the sidebar template —
force full width and drop the sidebar so our layout owns the row. */
body.vp-dark #content-area { width: 100% !important; }
body.vp-dark #left-area { width: 100% !important; padding: 0 !important; float: none !important; }
body.vp-dark #sidebar { display: none !important; }
body.vp-dark #main-content .container { width: 100%; max-width: 1200px; }
body.vp-dark .et_pb_row, body.vp-dark .et_pb_section { background: transparent; }
/* ===== Theme Builder body shell: force dark + a premium content width =====
Divi's default SECTION background is white and scoped under #et-boc (ID), so it
beat `body.vp-dark .et_pb_section` and showed a white slab behind the shop grid.
Force the store's TB sections/rows/columns transparent so the black page shows
through, and widen Divi's capped inner content to a comfortable 1320px. */
/* Scoped to .et-l--body ONLY — never the header (.et-l--header) or footer, so the
client's Theme Builder header keeps its purple bars on every store page. */
body.vp-dark #et-boc .et-l--body .et_pb_section,
body.vp-dark #et-boc .et-l--body .et_pb_row,
body.vp-dark #et-boc .et-l--body .et_pb_column,
body.vp-dark #et-boc .et-l--body .et_pb_text,
body.vp-dark #et-boc .et-l--body .et_pb_text_inner { background-color: transparent !important; }
body.vp-dark #et-boc .et-l--body .et_builder_inner_content { max-width: 1340px; margin-left: auto; margin-right: auto; }
/* Shop/category grid gets the full widened width; PDP/cart/checkout stay tighter. */
body.vp-dark #et-boc .vp-tb-arch-body > .et_pb_row { max-width: 1320px !important; width: 92% !important; }
body.vp-dark #main-content { font-family: var(--vp-font-sans); }
/* ===== TB-body link colors — beat Divi's global link color =====
Divi paints every inside the Theme Builder body via `.et-db #et-boc .et-l--body a`
(the site's global link colour #5b2397, ID-scoped) — this is what made our
download links and card buttons render as unreadable dark purple. Re-assert
readable colours with matching #et-boc scope (specificity 1,2,2 > Divi's 1,2,1). */
body.vp-dark #et-boc .et-l--body a { color: var(--vp-primary-light); }
body.vp-dark #et-boc .et-l--body a:hover { color: var(--vp-primary-bright); }
/* Research-tag links keep the readable blue. (Button colours are handled by the
unified button system at the end of this file, which uses !important.) */
body.vp-dark #et-boc .et-l--body a.vp-research-tag { color: var(--vp-blue-text); }
body.vp-dark.woocommerce #content,
body.vp-dark .woocommerce-page #content { padding-top: 0; }
/* Kill the default WC page title (we use our hero) */
body.vp-dark .woocommerce-products-header { display: none; }
body.vp-dark h1.woocommerce-products-header__title { display: none; }
/* Hide leftover default blog footer widgets on store pages (footer is a later
phase; the placeholder Archives/Categories widgets shouldn't show here). */
body.vp-dark #footer-widgets { display: none; }
/* ============================================================
SHOP HERO — ported 1:1 from vitalpeps.com/shop.html (recolored).
Full-bleed molecular banner, left-aligned, badge + stats + promo.
============================================================ */
body.vp-dark .vp-shop-hero {
position: relative;
margin: -1px calc(50% - 50vw) 0; /* break out of the Divi content column to full viewport */
width: 100vw;
padding: 7rem 2rem 5rem;
overflow: hidden;
background: var(--vp-black);
border-bottom: 1px solid var(--vp-line);
}
body.vp-dark .vp-shop-hero-dna { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
body.vp-dark .vp-shop-hero-bg {
position: absolute; inset: 0;
background-image: url('img/hero-molecular.jpg');
background-size: cover; background-position: center 40%;
opacity: 0.3; z-index: 0;
}
body.vp-dark .vp-shop-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(5,5,5,0.75) 0%, rgba(5,5,5,0.40) 50%, rgba(5,5,5,0.80) 100%);
z-index: 0;
}
body.vp-dark .vp-shop-hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(var(--vp-primary-rgb),0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--vp-primary-rgb),0.03) 1px, transparent 1px);
background-size: 60px 60px; z-index: 0;
}
body.vp-dark .vp-shop-hero-content {
position: relative; z-index: 3;
max-width: 1200px; margin-left: auto; margin-right: auto;
}
body.vp-dark .vp-hero-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
background: rgba(var(--vp-primary-rgb),0.1); border: 1px solid rgba(var(--vp-primary-rgb),0.35);
color: var(--vp-primary-light); padding: 0.4rem 1.1rem; border-radius: var(--vp-radius-sm);
font-family: var(--vp-font-display); font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.25rem;
}
body.vp-dark .vp-hero-badge-dot { width: 6px; height: 6px; background: var(--vp-grad); border-radius: 50%; animation: vp-hero-pulse 2s infinite; }
@keyframes vp-hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.vp-dark .vp-shop-hero-title {
font-family: var(--vp-font-display); font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800;
color: var(--vp-white); line-height: 1.08; letter-spacing: -0.02em; text-transform: uppercase;
margin-bottom: 1.375rem; text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
body.vp-dark .vp-shop-hero-title .vp-accent {
background: var(--vp-grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; filter: drop-shadow(0 0 14px rgba(var(--vp-primary-rgb),0.45));
}
body.vp-dark .vp-shop-hero-subtitle {
font-family: var(--vp-font-sans); font-size: 0.95rem; color: var(--vp-gray-400); line-height: 1.65;
max-width: 520px; margin-bottom: 2.75rem; font-weight: 400; letter-spacing: -0.01em;
}
body.vp-dark .vp-shop-hero-stats { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
body.vp-dark .vp-shop-hero-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 2rem 0 0; }
body.vp-dark .vp-shop-hero-stat:first-child { padding-left: 0; }
body.vp-dark .vp-shop-hero-stat-value { font-family: var(--vp-font-display); font-size: 1.5rem; font-weight: 700; color: var(--vp-primary-light); letter-spacing: -0.03em; line-height: 1; }
body.vp-dark .vp-shop-hero-stat-value.vp-accent { color: var(--vp-primary-light); }
body.vp-dark .vp-shop-hero-stat-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vp-gray-500); }
body.vp-dark .vp-shop-hero-stat-div { width: 1px; height: 36px; background: rgba(255,255,255,0.1); margin-right: 2rem; flex-shrink: 0; }
body.vp-dark .vp-shop-hero-promo {
display: inline-flex; align-items: center; gap: 0.45rem;
background: rgba(var(--vp-primary-rgb),0.12); border: 1px solid rgba(var(--vp-primary-rgb),0.35);
border-radius: var(--vp-radius); padding: 0.4rem 1rem; font-size: 0.78rem;
font-family: var(--vp-font-display); font-weight: 600; color: var(--vp-primary-light);
letter-spacing: 0.01em; margin-top: 1.25rem;
}
body.vp-dark .vp-shop-hero-promo svg { flex-shrink: 0; color: var(--vp-primary-light); }
@media (max-width: 480px) {
body.vp-dark .vp-shop-hero { padding: 4rem 1.25rem 3rem; }
body.vp-dark .vp-shop-hero-stats { gap: 1.25rem; }
body.vp-dark .vp-shop-hero-stat { padding: 0; }
body.vp-dark .vp-shop-hero-stat-div { display: none; }
}
/* ============================================================
RESEARCH CATEGORIES BAR (.vp-tagbar) — ported from reference
============================================================ */
body.vp-dark .vp-tagbar {
display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;
padding: 0.85rem 1rem; background: rgba(var(--vp-primary-rgb), 0.04);
border: 1px solid rgba(var(--vp-primary-rgb), 0.12); border-radius: var(--vp-radius-lg); margin-bottom: 1.25rem;
}
body.vp-dark .vp-tagbar-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vp-gray-500); white-space: nowrap; padding-top: 0.25rem; flex-shrink: 0; }
body.vp-dark .vp-tagbar-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
body.vp-dark .vp-tagbar-btn {
display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--vp-radius-pill);
border: 1px solid rgba(var(--vp-primary-rgb), 0.28); background: transparent; color: var(--vp-primary-light);
cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap;
}
body.vp-dark .vp-tagbar-btn:hover { background: rgba(var(--vp-primary-rgb), 0.14); border-color: rgba(var(--vp-primary-rgb), 0.45); color: var(--vp-primary-bright); }
body.vp-dark .vp-tagbar-btn.active { background: rgba(var(--vp-primary-rgb), 0.2); border-color: var(--vp-primary-light); color: #fff; box-shadow: 0 0 0 1px rgba(var(--vp-primary-rgb), 0.3); }
@media (max-width: 640px) {
body.vp-dark .vp-tagbar { flex-direction: column; gap: 0.5rem; }
body.vp-dark .vp-tagbar-label { padding-top: 0; }
}
/* ============================================================
SHOP LAYOUT — sticky sidebar + main
============================================================ */
body.vp-dark .vp-shop-layout {
display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem;
align-items: start; max-width: 1180px; margin: 2.25rem auto 4rem; padding: 0 1.25rem;
}
.vp-sidebar {
position: sticky; top: 90px; background: var(--vp-bg-soft);
border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 1.5rem;
}
.vp-filter-group { margin-bottom: 1.75rem; }
.vp-filter-group:last-of-type { margin-bottom: 1.25rem; }
.vp-filter-title {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--vp-gray-400); margin-bottom: 0.85rem;
}
.vp-filter-option {
display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0;
cursor: pointer; font-size: 0.82rem; color: #c4c4e0; transition: color 0.2s ease;
}
.vp-filter-option:hover { color: var(--vp-white); }
.vp-filter-option input { width: 16px; height: 16px; accent-color: var(--vp-primary-light); cursor: pointer; margin: 0; }
.vp-filter-count { margin-left: auto; font-size: 0.75rem; color: var(--vp-gray-500); }
.vp-btn-apply {
display: block; width: 100%; background: var(--vp-grad); color: #fff;
border: 1px solid var(--vp-btn-border); padding: 0.75rem 1rem; border-radius: var(--vp-radius-sm);
font-family: var(--vp-font-display); font-weight: 600; font-size: 0.8rem;
letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
transition: background 0.22s var(--vp-ease), border-color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
.vp-btn-apply:hover { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(var(--vp-primary-rgb), 0.5); }
.vp-btn-reset {
display: block; width: 100%; background: none; border: none; color: var(--vp-gray-400);
padding: 0.6rem; margin-top: 0.35rem; font-size: 0.8rem; cursor: pointer; text-align: center;
}
.vp-btn-reset:hover { color: var(--vp-white); }
.vp-shop-header {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.vp-shop-count { font-size: 0.875rem; color: #c0c0d8; }
.vp-shop-sort { display: flex; align-items: center; gap: 0.5rem; }
.vp-shop-sort label { font-size: 0.85rem; color: var(--vp-gray-500); white-space: nowrap; }
.vp-sort-select {
padding: 0.5rem 0.875rem; border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm);
font-size: 0.8rem; color: #e0e0f4; background: rgba(255,255,255,0.07); outline: none; cursor: pointer;
}
.vp-sort-select:focus { border-color: rgba(var(--vp-primary-rgb), 0.5); }
/* ============================================================
PRODUCT GRID + CARD — beat Divi column widths via DOM chain
============================================================ */
body.vp-dark .woocommerce ul.products.vp-grid,
body.vp-dark .vp-shop-main ul.products {
display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
margin: 0; padding: 0; list-style: none; align-items: stretch; width: 100%;
}
/* Kill Woo's ::before/::after clearfix — as grid items they steal cells
(phantom empty first cell). No .woocommerce ancestor here, so match plainly. */
body.vp-dark ul.products::before,
body.vp-dark ul.products::after,
body.vp-dark ul.products.vp-grid::before,
body.vp-dark ul.products.vp-grid::after { content: none !important; display: none !important; }
/* ===== Theme Builder archive: native Shop module grid parity =====
When the shop/category/tag archive is owned by the Divi Theme Builder layout,
the product grid comes from the native Shop module (.et_pb_shop). Divi scopes
its static responsive CSS under the builder-on-content ID —
`.et-db #et-boc .et-l .et_pb_shop_N_tb_body ul.products.columns-N li.product
{width:48%!important}` (specificity 1,5,2) — which shrinks our cards to ~48% of
the cell below 980px. Match its #et-boc scope so we out-specify (1,6,3) at every
breakpoint and each card fills its grid cell. Harmless on the hook path. */
body.vp-dark #et-boc .et_pb_shop ul.products.vp-grid li.product.vp-card {
width: 100% !important; margin: 0 !important; float: none !important;
}
/* Keep the Shop-module grid identical to the hook grid inside #et-boc. All three
selectors share specificity (1,4,2) so the media overrides win by source order. */
body.vp-dark #et-boc .et_pb_shop ul.products.vp-grid {
display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; margin: 0;
}
@media (max-width: 1024px) {
body.vp-dark #et-boc .et_pb_shop ul.products.vp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
body.vp-dark #et-boc .et_pb_shop ul.products.vp-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
}
body.vp-dark li.product.vp-card {
width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important;
background: linear-gradient(180deg, rgba(31,26,42,0.55) 0%, rgba(17,15,23,0.92) 55%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--vp-radius); overflow: hidden; position: relative;
display: flex; flex-direction: column; height: 100%; cursor: pointer;
box-shadow: var(--vp-shadow-sm);
transition: box-shadow 0.4s var(--vp-ease), transform 0.4s var(--vp-ease), border-color 0.4s ease;
}
body.vp-dark li.product.vp-card:hover {
transform: translateY(-6px);
border-color: rgba(var(--vp-primary-rgb), 0.5);
box-shadow: 0 24px 50px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(var(--vp-primary-rgb), 0.28),
0 0 44px -6px rgba(var(--vp-primary-rgb), 0.28);
}
body.vp-dark li.product.vp-card::before,
body.vp-dark li.product.vp-card::after { display: none !important; content: none !important; }
.vp-card-image {
/* 3:2 matches the approved studio photos (1536x1024) exactly, so the WHOLE
bottle shows with `contain` and no letterbox. The gradient is the studio-grey
fallback shown only for any image whose aspect differs. */
position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
background: radial-gradient(ellipse 130% 105% at 50% 36%, #c6c6c6 0%, #a2a2a2 62%, #838383 100%);
flex-shrink: 0; display: block;
}
.vp-card-image img {
width: 100% !important; height: 100% !important; object-fit: contain; object-position: center;
display: block; margin: 0; transition: transform 0.55s var(--vp-ease); border-radius: 0;
}
li.product:hover .vp-card-image img { transform: scale(1.035); }
.vp-card-image-label { display: none; }
.vp-badge {
position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3;
background: rgba(5,5,5,0.90); color: var(--vp-gray-300); font-size: 0.62rem; font-weight: 700;
padding: 0.2rem 0.625rem; border-radius: 2px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--vp-line);
}
.vp-badge.best-seller {
background: var(--vp-grad-badge); color: #fff; border-color: rgba(var(--vp-primary-rgb), 0.6);
box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 14px rgba(var(--vp-primary-rgb), 0.45);
font-weight: 800; letter-spacing: 0.12em;
}
.vp-card-hover {
position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 1.1rem; opacity: 0; transform: translateY(6px);
background: linear-gradient(to top, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.42) 45%, rgba(5,5,5,0) 100%);
transition: opacity 0.35s var(--vp-ease), transform 0.35s var(--vp-ease); pointer-events: none;
}
li.product:hover .vp-card-hover { opacity: 1; transform: translateY(0); }
.vp-btn-quickview {
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.1rem;
border-radius: var(--vp-radius-sm); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
backdrop-filter: blur(8px);
}
.vp-card-body { padding: 1.25rem 1.25rem 1.125rem; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vp-card-cat {
font-size: 0.62rem; font-weight: 700; color: var(--vp-primary-light); text-transform: uppercase;
letter-spacing: 0.07em; margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-card-name {
font-family: var(--vp-font-display); font-size: 0.95rem; font-weight: 700; color: var(--vp-ink);
margin-bottom: 0.45rem; line-height: 1.3; letter-spacing: -0.01em;
min-height: 2.6em; /* reserve 2 lines so 1- and 2-line names align across the row */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-card-summary {
font-size: 0.76rem; color: var(--vp-body); line-height: 1.55; margin-bottom: 0.85rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.35em; /* reserve 2 lines for consistent card rhythm */
}
.vp-research-tags { margin-bottom: 0.75rem; }
.vp-research-label { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-gray-500); margin-bottom: 0.4rem; }
.vp-research-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vp-research-tag {
font-size: 0.68rem; font-weight: 600; color: var(--vp-blue-text); background: var(--vp-blue-pale);
border: 1px solid var(--vp-blue-border); padding: 0.2rem 0.6rem; border-radius: var(--vp-radius-pill); white-space: nowrap;
}
a.vp-research-tag-link { text-decoration: none; transition: all 0.2s ease; }
a.vp-research-tag-link:hover { background: rgba(96,165,250,0.26); color: #e2edff; border-color: rgba(96,165,250,0.6); }
.vp-spec-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.vp-spec-row span {
display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem;
border: 1px solid rgba(255,255,255,0.11); border-radius: var(--vp-radius-sm);
background: rgba(255,255,255,0.04); color: #b8b8d4; font-size: 0.7rem;
}
.vp-spec-row strong { color: var(--vp-success); font-weight: 700; }
.vp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; }
.vp-price, .vp-price .amount, .vp-price bdi {
font-family: var(--vp-font-display); font-size: 1.15rem; font-weight: 700; color: var(--vp-primary-light); letter-spacing: -0.03em;
}
.vp-price del { font-size: 0.8rem; color: var(--vp-gray-400); font-weight: 400; }
.vp-price del .amount { font-size: 0.8rem; color: var(--vp-gray-400); font-weight: 400; }
.vp-price ins { text-decoration: none; }
body.vp-dark .vp-btn-cart, body.vp-dark .vp-btn-select, body.vp-dark .vp-btn-oos {
padding: 0.6rem 1.15rem; border-radius: var(--vp-radius-sm); font-family: var(--vp-font-display);
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; white-space: nowrap; text-decoration: none; line-height: 1.2; cursor: pointer;
transition: background 0.22s var(--vp-ease), border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
body.vp-dark .vp-btn-cart { background: var(--vp-grad); color: #fff; border: 1px solid var(--vp-btn-border); }
body.vp-dark .vp-btn-cart:hover { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); color: #fff; box-shadow: 0 6px 20px -6px rgba(var(--vp-primary-rgb), 0.55); }
body.vp-dark .vp-btn-cart.loading { opacity: 0.7; }
body.vp-dark .vp-btn-cart.added::after { display: none; }
body.vp-dark .vp-btn-select { background: rgba(255,255,255,0.03); color: var(--vp-primary-light); border: 1px solid var(--vp-btn-border); }
body.vp-dark .vp-btn-select:hover { background: rgba(var(--vp-primary-rgb), 0.18); border-color: var(--vp-primary-light); color: #fff; }
body.vp-dark .vp-btn-oos { background: rgba(255,255,255,0.03); color: var(--vp-gray-500); border: 1px solid var(--vp-line); cursor: not-allowed; }
.vp-coa-link-wrap { margin-top: 0.5rem; }
.vp-coa-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.78rem; color: var(--vp-primary-light); font-weight: 600; text-decoration: none; }
.vp-coa-link:hover { color: var(--vp-primary-bright); }
.vp-card-disclaimer { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.66rem; color: #9898b8; line-height: 1.4; }
/* ============================================================
SINGLE PRODUCT (PDP)
============================================================ */
body.vp-dark.single-product .vp-shop-hero { display: none; }
/* Scope the PDP content wrapper to #main-content so this cap can NEVER hit the
Theme Builder header wrapper. On single-product pages WooCommerce adds the
class "product" to Divi's TB header wrapper (div.et_builder_inner_content),
so an unscoped `div.product` rule was shrinking the PDP header to ~912px
(narrower than shop/cart headers). The Woo PDP div.product lives inside
#main-content; the header (.et-l--header) does not. */
body.vp-dark #main-content div.product { max-width: 1180px; margin: 2.5rem auto; padding: 0 1.25rem; }
/* ===== Theme Builder single product: native summary/gallery in Divi columns =====
[vp_pdp_gallery] and [vp_pdp_summary] render the native gallery/summary inside
two Divi 1/2 columns. The native two-up float (gallery 48% left, summary 48%
right) is meant for the un-columned native PDP; inside Divi columns it shrinks
each to 48% of a half. Neutralise float/width so each fills its own column, and
drop the #main-content div.product page cap (Divi's row already sizes/centres). */
body.vp-dark .vp-tb-gallery,
body.vp-dark .vp-tb-summary {
width: 100% !important; float: none !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.vp-dark .vp-tb-gallery .woocommerce-product-gallery {
width: 100% !important; float: none !important; margin: 0 !important;
}
body.vp-dark div.product .product_title,
body.vp-dark .vp-pdp-category,
body.vp-dark div.product p.price,
body.vp-dark div.product .woocommerce-product-details__short-description { color: var(--vp-ink); }
body.vp-dark .single-product div.product .woocommerce-product-gallery { width: 48%; float: left; margin-bottom: 2rem; }
body.vp-dark .single-product div.product .summary.entry-summary { width: 48%; float: right; }
body.vp-dark .woocommerce-product-gallery__image img,
body.vp-dark .woocommerce-product-gallery__image a img { border-radius: var(--vp-radius); background: #f6f6f6; }
body.vp-dark .flex-control-thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
body.vp-dark .flex-control-thumbs li { width: 72px !important; }
body.vp-dark .flex-control-thumbs img { border-radius: var(--vp-radius-sm); border: 1px solid var(--vp-line); opacity: 0.7; }
body.vp-dark .flex-control-thumbs img.flex-active, body.vp-dark .flex-control-thumbs img:hover { opacity: 1; border-color: var(--vp-primary-light); }
.vp-pdp-category { font-size: 0.7rem; font-weight: 700; color: var(--vp-primary-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
body.vp-dark div.product .product_title.entry-title {
font-family: var(--vp-font-display); font-size: 2rem; font-weight: 800; color: var(--vp-white);
letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.75rem; padding: 0;
}
.vp-research-tags-detail { margin: 0 0 1rem; }
.vp-pdp-purity {
display: inline-flex; align-items: center; gap: 0.4rem; color: var(--vp-success);
font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem;
}
body.vp-dark div.product p.price,
body.vp-dark div.product span.price {
font-family: var(--vp-font-display); color: var(--vp-primary-light) !important;
font-size: 2rem !important; font-weight: 800; margin: 0 0 0.75rem;
}
body.vp-dark div.product p.price del { color: var(--vp-gray-500); font-size: 1.1rem; opacity: 0.8; }
body.vp-dark div.product p.price ins { text-decoration: none; }
.vp-pdp-discount {
display: flex; align-items: center; gap: 0.5rem; background: rgba(var(--vp-primary-rgb), 0.12);
border: 1px solid rgba(var(--vp-primary-rgb), 0.35); color: #cdb6ec; border-radius: var(--vp-radius-sm);
padding: 0.6rem 0.85rem; font-size: 0.82rem; font-weight: 600; margin-bottom: 1.25rem;
}
.vp-pdp-discount svg { color: var(--vp-primary-light); flex-shrink: 0; }
/* Variation form → button style */
body.vp-dark .variations { margin-bottom: 1rem; border: none; }
body.vp-dark .variations td, body.vp-dark .variations th { border: none; padding: 0 0 0.5rem; display: block; text-align: left; }
body.vp-dark .variations th.label label { color: var(--vp-gray-400); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
body.vp-dark .vp-variation-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
body.vp-dark .vp-variation-btn {
padding: 0.5rem 1.1rem; border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm);
background: rgba(255,255,255,0.04); color: var(--vp-gray-300); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
body.vp-dark .vp-variation-btn:hover { border-color: var(--vp-primary-light); color: #fff; }
body.vp-dark .vp-variation-btn.active { background: rgba(var(--vp-primary-rgb), 0.18); border-color: var(--vp-primary-light); color: #fff; }
body.vp-dark .woocommerce-variation-add-to-cart .reset_variations { color: var(--vp-gray-500); font-size: 0.78rem; }
/* Qty + add to cart */
body.vp-dark form.cart { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
body.vp-dark .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; width: 100%; }
body.vp-dark .quantity, body.vp-dark .vp-qty {
display: inline-flex; align-items: stretch; border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm); overflow: hidden; background: rgba(255,255,255,0.04);
}
body.vp-dark .vp-qty-btn {
width: 42px; background: none; border: none; color: var(--vp-gray-300); font-size: 1.1rem; cursor: pointer;
}
body.vp-dark .vp-qty-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
body.vp-dark .quantity input.qty {
width: 54px; background: transparent !important; border: none !important; color: #fff !important; text-align: center; font-size: 0.95rem; font-weight: 600;
-moz-appearance: textfield; box-shadow: none !important;
}
body.vp-dark .quantity input.qty::-webkit-outer-spin-button,
body.vp-dark .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.vp-dark form.cart button.single_add_to_cart_button {
flex: 1; min-width: 220px; background: var(--vp-grad); color: #fff; border: none;
padding: 0.85rem 1.5rem; border-radius: var(--vp-radius-sm); font-family: var(--vp-font-display);
font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
box-shadow: 0 6px 22px rgba(var(--vp-primary-rgb), 0.3); transition: filter 0.2s ease, transform 0.2s ease;
}
body.vp-dark form.cart button.single_add_to_cart_button:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* Bulk pack */
.vp-pack-section { margin-bottom: 1.5rem; }
.vp-pack-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-gray-400); margin-bottom: 0.6rem; }
.vp-pack-card { border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius); background: rgba(255,255,255,0.03); padding: 1.1rem; }
.vp-pack-head { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.vp-pack-badge { background: rgba(var(--vp-primary-rgb), 0.16); color: var(--vp-primary-light); border: 1px solid rgba(var(--vp-primary-rgb), 0.4); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: var(--vp-radius-sm); }
.vp-pack-save { background: rgba(16,185,129,0.14); color: var(--vp-success); border: 1px solid rgba(16,185,129,0.4); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: var(--vp-radius-sm); }
.vp-pack-name { color: var(--vp-gray-300); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.5rem; }
.vp-pack-pricing { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.vp-pack-total, .vp-pack-total .amount { font-family: var(--vp-font-display); font-size: 1.4rem; font-weight: 800; color: var(--vp-primary-light); }
.vp-pack-unit, .vp-pack-unit .amount { font-size: 0.82rem; color: var(--vp-gray-400); }
.vp-pack-savings { color: var(--vp-success); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.9rem; }
.vp-btn-pack {
display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
background: var(--vp-grad); border: 1px solid var(--vp-btn-border);
color: #fff; padding: 0.8rem; border-radius: var(--vp-radius-sm);
font-family: var(--vp-font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
cursor: pointer; transition: background 0.22s var(--vp-ease), border-color 0.22s ease, box-shadow 0.22s ease;
}
.vp-btn-pack:hover { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); color: #fff; box-shadow: 0 6px 20px -6px rgba(var(--vp-primary-rgb), 0.5); }
/* Compliance box (kept cream/tinted like reference disclaimer box) */
.vp-compliance-box {
background: rgba(var(--vp-primary-rgb), 0.06); border-left: 3px solid var(--vp-primary-light);
border-radius: 0 var(--vp-radius) var(--vp-radius) 0; padding: 0.95rem 1.1rem; margin-bottom: 1.5rem;
}
.vp-compliance-box p { margin: 0; font-size: 0.8rem; color: #b6b6cf; line-height: 1.7; }
.vp-compliance-box strong { color: var(--vp-primary-light); }
/* Data table */
.vp-data-table { margin-bottom: 1.25rem; }
.vp-data-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--vp-line); }
.vp-data-key { font-size: 0.82rem; font-weight: 700; color: var(--vp-gray-400); }
.vp-data-val { font-size: 0.85rem; color: var(--vp-gray-300); text-align: right; }
.vp-data-val.vp-data-purity { color: var(--vp-success); font-weight: 600; }
.vp-coa-shipping { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.vp-coa-inline { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.82rem; color: var(--vp-primary-light); font-weight: 600; text-decoration: none; }
.vp-coa-inline:hover { color: var(--vp-primary-bright); }
.vp-coa-shipping .vp-sep { color: var(--vp-gray-500); }
.vp-freeship { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.82rem; color: var(--vp-success); font-weight: 600; }
/* Tabs */
body.vp-dark .woocommerce-tabs,
body.vp-dark #et-boc .woocommerce-tabs {
clear: both; padding: 1.5rem 0 0; margin: 0;
border: none !important; background: transparent !important; box-shadow: none !important;
}
body.vp-dark .woocommerce-tabs ul.tabs {
background: transparent !important; border: none !important; box-shadow: none !important;
padding: 0; margin: 0 0 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
}
body.vp-dark .woocommerce-tabs ul.tabs::before, body.vp-dark .woocommerce-tabs ul.tabs::after { display: none !important; }
body.vp-dark .woocommerce-tabs ul.tabs li {
background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius-pill);
margin: 0; padding: 0; transition: all 0.2s var(--vp-ease);
}
body.vp-dark .woocommerce-tabs ul.tabs li::before, body.vp-dark .woocommerce-tabs ul.tabs li::after { display: none; }
body.vp-dark .woocommerce-tabs ul.tabs li a { color: var(--vp-gray-400); font-weight: 600; font-size: 0.82rem; padding: 0.55rem 1.25rem; text-transform: none; }
body.vp-dark .woocommerce-tabs ul.tabs li:hover { border-color: var(--vp-line-2); }
body.vp-dark .woocommerce-tabs ul.tabs li.active { background: rgba(var(--vp-primary-rgb), 0.18); border-color: rgba(var(--vp-primary-rgb), 0.55); }
body.vp-dark .woocommerce-tabs ul.tabs li.active a { color: #fff; }
body.vp-dark .woocommerce-Tabs-panel {
color: var(--vp-body); font-size: 0.9rem; line-height: 1.75;
background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius);
padding: 1.75rem 2rem;
}
/* PDP tabs render inside the Theme Builder body (#et-boc), where Divi/Woo set a
light #f4f4f4 tab background scoped under the #et-boc ID that out-specifies the
base rule above. Force the pill styling with matching #et-boc scope + !important. */
body.vp-dark #et-boc .woocommerce-tabs ul.tabs li {
background: var(--vp-surface) !important; border: 1px solid var(--vp-line) !important;
border-radius: var(--vp-radius-pill) !important; box-shadow: none !important;
}
body.vp-dark #et-boc .woocommerce-tabs ul.tabs li.active {
background: rgba(var(--vp-primary-rgb), 0.18) !important; border-color: rgba(var(--vp-primary-rgb), 0.55) !important;
}
body.vp-dark #et-boc .woocommerce-tabs ul.tabs li::before,
body.vp-dark #et-boc .woocommerce-tabs ul.tabs li::after { display: none !important; border: none !important; content: none !important; }
body.vp-dark .woocommerce-Tabs-panel h2 { color: var(--vp-white); font-family: var(--vp-font-display); font-size: 1.2rem; }
body.vp-dark .woocommerce-Tabs-panel h4 { color: var(--vp-ink); margin: 1.2rem 0 0.4rem; }
body.vp-dark .vp-desc ul { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
body.vp-dark .vp-desc ul li { position: relative; padding-left: 1.3rem; color: var(--vp-gray-300); }
body.vp-dark .vp-desc ul li::before { content: '—'; position: absolute; left: 0; color: var(--vp-primary-light); font-weight: 700; }
.vp-sequence { margin-top: 1rem; }
.vp-sequence span { font-family: monospace; font-size: 0.85rem; color: var(--vp-primary-light); word-break: break-word; }
/* COA panel (testing tab) */
.vp-coa-panel { background: rgba(255,255,255,0.02); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 1.5rem; }
.vp-coa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.vp-coa-badge { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vp-primary-light); font-weight: 700; font-size: 0.95rem; }
.vp-coa-verified { background: rgba(16,185,129,0.14); color: var(--vp-success); border: 1px solid rgba(16,185,129,0.4); font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; }
.vp-coa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.vp-coa-stat { background: rgba(255,255,255,0.03); border: 1px solid var(--vp-line); border-radius: var(--vp-radius-sm); padding: 0.9rem; text-align: center; }
.vp-coa-stat-val { font-family: var(--vp-font-display); font-size: 1.15rem; font-weight: 800; color: var(--vp-ink); }
.vp-coa-stat-val.vp-small { font-size: 0.82rem; }
.vp-coa-stat-val.vp-green, .vp-green { color: var(--vp-success); }
.vp-coa-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vp-gray-500); margin-top: 0.3rem; }
.vp-coa-bar-wrap { margin-bottom: 1.5rem; }
.vp-coa-bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 0.5rem; color: var(--vp-gray-400); }
.vp-coa-bar-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.vp-coa-bar-fill { height: 100%; background: linear-gradient(90deg, var(--vp-success), #34d399); border-radius: 999px; }
.vp-coa-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.vp-coa-detail { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--vp-line); }
.vp-coa-dkey { font-size: 0.78rem; color: var(--vp-gray-500); }
.vp-coa-dval { font-size: 0.8rem; color: var(--vp-gray-300); text-align: right; }
.vp-coa-dval.vp-mono { font-family: monospace; color: var(--vp-primary-light); }
.vp-coa-note { font-size: 0.82rem; color: #b8b8d4; line-height: 1.75; margin: 1.25rem 0; }
.vp-coa-dl, a.vp-coa-dl {
display: inline-flex; align-items: center; gap: 0.5rem; background: var(--vp-grad); color: #fff;
padding: 0.7rem 1.25rem; border-radius: var(--vp-radius-sm); font-weight: 700; font-size: 0.82rem; text-decoration: none;
}
.vp-coa-dl:hover { filter: brightness(1.12); }
/* Related products */
body.vp-dark .related.products { clear: both; padding-top: 0.5rem; }
body.vp-dark .related.products > h2 { font-family: var(--vp-font-display); color: var(--vp-white); font-size: 1.4rem; margin-bottom: 1.5rem; }
body.vp-dark .related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* ============================================================
CART + CHECKOUT
============================================================ */
body.vp-dark.woocommerce-cart .vp-shop-hero,
body.vp-dark.woocommerce-checkout .vp-shop-hero { display: none; }
body.vp-dark .woocommerce-cart-form,
body.vp-dark .cart-collaterals,
body.vp-dark .woocommerce-checkout { color: var(--vp-body); }
body.vp-dark table.shop_table {
border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: rgba(255,255,255,0.02); border-collapse: separate;
}
body.vp-dark table.shop_table th { color: var(--vp-gray-300); border: none; }
body.vp-dark table.shop_table td { border-top: 1px solid var(--vp-line); color: var(--vp-gray-300); background: transparent; }
body.vp-dark table.shop_table a { color: var(--vp-primary-light); }
body.vp-dark .cart_totals h2, body.vp-dark #order_review_heading, body.vp-dark .woocommerce-billing-fields h3, body.vp-dark #ship-to-different-address label { color: var(--vp-white); font-family: var(--vp-font-display); }
body.vp-dark .woocommerce-info, body.vp-dark .woocommerce-message, body.vp-dark .cart-empty {
background: rgba(var(--vp-primary-rgb), 0.08); border-top: 3px solid var(--vp-primary-light); color: var(--vp-body);
}
body.vp-dark .woocommerce-info::before, body.vp-dark .woocommerce-message::before { color: var(--vp-primary-light); }
body.vp-dark .woocommerce form .form-row input.input-text,
body.vp-dark .woocommerce form .form-row textarea,
body.vp-dark .woocommerce .coupon input.input-text,
body.vp-dark .woocommerce #coupon_code,
body.vp-dark .select2-container--default .select2-selection--single,
body.vp-dark .woocommerce form .form-row .select2-selection {
background: rgba(255,255,255,0.05); border: 1px solid var(--vp-line-2); color: #fff; border-radius: var(--vp-radius-sm);
}
body.vp-dark .woocommerce .coupon input.input-text::placeholder,
body.vp-dark .woocommerce form .form-row input.input-text::placeholder,
body.vp-dark .woocommerce form .form-row textarea::placeholder { color: var(--vp-gray-500); }
body.vp-dark .woocommerce form .form-row label { color: var(--vp-gray-400); }
body.vp-dark #payment, body.vp-dark .woocommerce-checkout #payment { background: rgba(255,255,255,0.03); border-radius: var(--vp-radius); }
body.vp-dark #payment ul.payment_methods { border-bottom: 1px solid var(--vp-line); }
body.vp-dark #payment div.payment_box { background: rgba(var(--vp-primary-rgb),0.08); color: var(--vp-body); }
body.vp-dark #payment div.payment_box::before { border-bottom-color: rgba(var(--vp-primary-rgb),0.08); }
body.vp-dark .woocommerce a.button,
body.vp-dark .woocommerce button.button,
body.vp-dark .woocommerce input.button,
body.vp-dark .woocommerce #respond input#submit,
body.vp-dark .woocommerce a.button.alt,
body.vp-dark .woocommerce button.button.alt,
body.vp-dark #place_order {
background: var(--vp-grad); color: #fff; border: 1px solid var(--vp-btn-border); border-radius: var(--vp-radius-sm);
font-family: var(--vp-font-display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
padding: 0.95rem 1.7rem; box-shadow: none; transition: background 0.22s var(--vp-ease), border-color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
body.vp-dark .woocommerce a.button:hover,
body.vp-dark .woocommerce button.button:hover,
body.vp-dark .woocommerce input.button:hover,
body.vp-dark #place_order:hover { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); transform: translateY(-1px); color: #fff; box-shadow: 0 8px 24px -8px rgba(var(--vp-primary-rgb), 0.55); }
/* Secondary / ghost buttons (Update cart, Continue shopping, Apply coupon). */
body.vp-dark .woocommerce .button.wc-backward,
body.vp-dark td.actions .button,
body.vp-dark .woocommerce-cart td.actions .coupon .button {
background: rgba(255,255,255,0.03) !important; color: var(--vp-primary-light) !important; border: 1px solid var(--vp-btn-border) !important;
}
body.vp-dark .woocommerce .button.wc-backward:hover,
body.vp-dark td.actions .button:hover { background: rgba(var(--vp-primary-rgb),0.18) !important; color: #fff !important; }
body.vp-dark .cart_totals .order-total .amount, body.vp-dark .order-total .amount { color: var(--vp-primary-light); font-weight: 800; }
body.vp-dark .wc-block-components-notice-banner, body.vp-dark .woocommerce-order { color: var(--vp-body); }
body.vp-dark .woocommerce-order h2, body.vp-dark .woocommerce-thankyou-order-received { color: var(--vp-white); }
/* ---- Modern cart/checkout polish ---------------------------------------- */
/* Inputs / selects: taller, softer, on-brand focus. */
body.vp-dark .woocommerce form .form-row input.input-text,
body.vp-dark .woocommerce form .form-row textarea,
body.vp-dark .select2-container--default .select2-selection--single,
body.vp-dark .woocommerce form .form-row .select2-selection,
body.vp-dark .woocommerce-cart td.actions .coupon input.input-text {
min-height: 48px; padding: 0.7rem 0.95rem; border-radius: var(--vp-radius-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.vp-dark .woocommerce form .form-row input.input-text:focus,
body.vp-dark .woocommerce form .form-row textarea:focus {
border-color: rgba(var(--vp-primary-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--vp-primary-rgb), 0.16); outline: none;
}
body.vp-dark .select2-container--default .select2-selection--single { display: flex; align-items: center; }
body.vp-dark .select2-dropdown { background: #14121a; border: 1px solid var(--vp-line-2); }
body.vp-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--vp-primary); }
body.vp-dark .woocommerce form .form-row label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; }
/* Tables: roomier cells, rounded thumbnails, no harsh lines. */
body.vp-dark table.shop_table { overflow: hidden; }
body.vp-dark table.shop_table th { padding: 1rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-gray-500); }
body.vp-dark table.shop_table td { padding: 1rem 1.1rem; vertical-align: middle; }
body.vp-dark .woocommerce-cart-form .cart_item .product-thumbnail img {
width: 62px; height: 62px; object-fit: cover; border-radius: var(--vp-radius-sm); border: 1px solid var(--vp-line);
}
body.vp-dark .woocommerce-cart-form .product-name a { color: var(--vp-ink); font-weight: 600; }
body.vp-dark .woocommerce-cart a.remove {
color: var(--vp-gray-500) !important; border: 1px solid var(--vp-line); width: 26px; height: 26px; line-height: 24px;
border-radius: 50%; font-size: 15px; transition: all 0.2s ease;
}
body.vp-dark .woocommerce-cart a.remove:hover { background: var(--vp-danger) !important; color: #fff !important; border-color: var(--vp-danger); }
body.vp-dark .woocommerce-cart td.actions { padding: 1.1rem; }
body.vp-dark .woocommerce-cart td.actions .coupon { display: flex; gap: 0.6rem; }
/* Cart: two-column (items | sticky totals card). */
@media (min-width: 981px) {
body.vp-dark.woocommerce-cart .woocommerce {
display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start;
}
body.vp-dark.woocommerce-cart .woocommerce > .woocommerce-message,
body.vp-dark.woocommerce-cart .woocommerce > .woocommerce-info,
body.vp-dark.woocommerce-cart .woocommerce > .woocommerce-error,
body.vp-dark.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.vp-dark.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
body.vp-dark.woocommerce-cart .cart-collaterals { grid-column: 2; width: 100% !important; margin: 0; float: none; }
body.vp-dark.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none; position: sticky; top: 96px; }
}
body.vp-dark .cart_totals {
background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 1.5rem 1.5rem 1.75rem;
}
body.vp-dark .cart_totals h2 { margin-top: 0; font-size: 1.15rem; }
body.vp-dark .cart_totals table.shop_table { border: none; background: transparent; }
body.vp-dark .cart_totals table.shop_table td, body.vp-dark .cart_totals table.shop_table th { padding: 0.65rem 0; }
body.vp-dark .cart_totals .order-total td, body.vp-dark .cart_totals .order-total th { border-top: 1px solid var(--vp-line-2); padding-top: 0.9rem; }
body.vp-dark .wc-proceed-to-checkout { padding-top: 1.25rem !important; }
body.vp-dark .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; width: 100%; font-size: 0.9rem; padding: 1rem; }
/* Checkout: two-column (form | sticky order review). */
body.vp-dark .woocommerce-checkout #order_review {
background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 1.5rem;
}
body.vp-dark .woocommerce-checkout #order_review .shop_table { border: none; background: transparent; }
body.vp-dark .woocommerce-checkout #payment { background: transparent; border-radius: var(--vp-radius-sm); margin-top: 1rem; }
body.vp-dark #payment div.payment_box { border-radius: var(--vp-radius-sm); }
@media (min-width: 981px) {
body.vp-dark.woocommerce-checkout form.checkout {
display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2.5rem; align-items: start;
}
body.vp-dark .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
body.vp-dark .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 1rem; }
body.vp-dark .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 96px; }
/* #customer_details IS the .col2-set element; its .col-1/.col-2 are direct
children — stack them so billing fills the column and notes sits below. */
body.vp-dark .woocommerce-checkout #customer_details { display: block !important; }
body.vp-dark .woocommerce-checkout #customer_details .col-1,
body.vp-dark .woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; margin: 0 0 1.5rem !important; max-width: none !important; }
}
/* ============================================================
FLOATING MINI-CART
============================================================ */
.vp-floating-cart {
position: fixed; right: 22px; bottom: 22px; z-index: 9999; width: 58px; height: 58px;
border-radius: 50%; background: var(--vp-grad); color: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 30px rgba(var(--vp-primary-rgb), 0.45); text-decoration: none; transition: transform 0.2s ease;
}
.vp-floating-cart:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.vp-floating-cart .vp-cart-count {
position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
background: #fff; color: var(--vp-primary-deep); border-radius: 999px; font-size: 0.72rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; box-shadow: var(--vp-shadow-sm);
}
.vp-floating-cart .vp-cart-count[data-count="0"] { display: none; }
/* ============================================================
QUICK VIEW MODAL
============================================================ */
html.vp-qv-lock, html.vp-qv-lock body { overflow: hidden; }
.vp-qv-overlay {
position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
background: rgba(3, 2, 8, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; padding: 1.25rem;
}
.vp-qv-overlay.open { opacity: 1; visibility: visible; }
.vp-qv-modal {
position: relative; width: min(880px, 96vw); max-height: 90vh; overflow-y: auto;
background: linear-gradient(165deg, #141018 0%, #0c0a10 55%, #120b1d 100%);
border: 1px solid rgba(var(--vp-primary-rgb), 0.35); border-radius: var(--vp-radius-lg);
box-shadow: 0 30px 90px rgba(0,0,0,0.75), 0 0 60px rgba(var(--vp-primary-rgb), 0.22);
transform: translateY(16px) scale(0.97); transition: transform 0.32s var(--vp-ease);
}
.vp-qv-overlay.open .vp-qv-modal { transform: translateY(0) scale(1); }
.vp-qv-close {
position: absolute; top: 0.85rem; right: 0.85rem; z-index: 3; width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center; border-radius: 50%;
background: rgba(255,255,255,0.08); border: 1px solid var(--vp-line-2); color: var(--vp-gray-300);
cursor: pointer; transition: all 0.2s ease;
}
.vp-qv-close:hover { background: rgba(var(--vp-primary-rgb), 0.25); color: #fff; transform: rotate(90deg); }
.vp-qv-loading { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.vp-qv-spinner {
width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(var(--vp-primary-rgb), 0.25);
border-top-color: var(--vp-primary-light); animation: vp-spin 0.8s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-qv-error { padding: 3rem; text-align: center; color: var(--vp-gray-400); }
.vp-qv-error a { color: var(--vp-primary-light); }
.vp-qv-grid { display: grid; grid-template-columns: 42% 1fr; gap: 0; }
/* Quick View gallery (main image + thumbnail strip) */
.vp-qv-gallery { display: flex; flex-direction: column; background: #f6f6f6; border-radius: var(--vp-radius) 0 0 var(--vp-radius); overflow: hidden; min-height: 380px; }
.vp-qv-main { position: relative; flex: 1; min-height: 300px; }
.vp-qv-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s ease; }
.vp-qv-thumbs { display: flex; gap: 0.5rem; padding: 0.6rem; background: rgba(0,0,0,0.05); overflow-x: auto; }
.vp-qv-thumb { width: 52px; height: 52px; flex-shrink: 0; padding: 0; border: 2px solid transparent; border-radius: var(--vp-radius-sm); overflow: hidden; background: #fff; cursor: pointer; transition: border-color 0.2s ease; }
.vp-qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-qv-thumb.active, .vp-qv-thumb:hover { border-color: var(--vp-primary-light); }
.vp-qv-info { padding: 2rem 2.25rem 1.75rem; }
.vp-qv-cat { font-size: 0.66rem; font-weight: 700; color: var(--vp-primary-light); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.4rem; }
.vp-qv-title { font-family: var(--vp-font-display); font-size: 1.55rem; font-weight: 800; color: var(--vp-white); margin: 0 0 0.55rem; letter-spacing: -0.02em; line-height: 1.15; }
.vp-qv-purity { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--vp-success); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; }
.vp-qv-price, .vp-qv-price .amount { font-family: var(--vp-font-display); font-size: 1.6rem; font-weight: 800; color: var(--vp-primary-light); margin-bottom: 0.6rem; }
.vp-qv-summary { font-size: 0.85rem; color: var(--vp-body); line-height: 1.65; margin: 0 0 0.9rem; }
.vp-qv-info .vp-research-tags { margin-bottom: 0.9rem; }
.vp-qv-info .vp-spec-row { margin-bottom: 1rem; }
.vp-qv-sizes-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-gray-400); margin-bottom: 0.5rem; }
.vp-qv-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.vp-qv-size {
padding: 0.5rem 1.1rem; border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm);
background: rgba(255,255,255,0.04); color: var(--vp-gray-300); font-size: 0.82rem; font-weight: 600;
cursor: pointer; transition: all 0.2s ease;
}
.vp-qv-size:hover { border-color: var(--vp-primary-light); color: #fff; }
.vp-qv-size.active { background: rgba(var(--vp-primary-rgb), 0.2); border-color: var(--vp-primary-light); color: #fff; box-shadow: 0 0 14px rgba(var(--vp-primary-rgb), 0.25); }
.vp-qv-size.oos { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.vp-qv-actions { display: flex; gap: 0.75rem; align-items: stretch; margin-bottom: 0.6rem; }
.vp-qv-qty { flex-shrink: 0; }
.vp-qv-qty input.qty { width: 48px; background: transparent !important; border: none !important; color: #fff !important; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.vp-qv-qty input.qty::-webkit-outer-spin-button, .vp-qv-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vp-qv-atc {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
background: var(--vp-grad); color: #fff; border: 1px solid var(--vp-btn-border); border-radius: var(--vp-radius-sm);
padding: 0.85rem 1.4rem; font-family: var(--vp-font-display); font-weight: 600; font-size: 0.8rem;
letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
transition: background 0.22s var(--vp-ease), border-color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
.vp-qv-atc:hover:not(:disabled) { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(var(--vp-primary-rgb), 0.55); }
.vp-qv-atc:disabled { opacity: 0.55; cursor: not-allowed; }
.vp-qv-atc.loading { opacity: 0.7; pointer-events: none; }
.vp-qv-atc.added { background: linear-gradient(160deg, #10b981, #059669); box-shadow: 0 6px 22px rgba(16,185,129,0.3); }
.vp-qv-msg { min-height: 1.2rem; font-size: 0.8rem; color: var(--vp-success); margin-bottom: 0.5rem; }
.vp-qv-msg a { color: var(--vp-primary-light); font-weight: 600; }
.vp-qv-full {
display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600;
color: var(--vp-primary-light); text-decoration: none; margin-bottom: 0.9rem; transition: gap 0.2s ease;
}
.vp-qv-full:hover { gap: 0.65rem; color: var(--vp-primary-bright); }
.vp-qv-disclaimer { border-top: 1px solid var(--vp-line); padding-top: 0.7rem; font-size: 0.66rem; color: #9898b8; line-height: 1.5; }
@media (max-width: 720px) {
.vp-qv-grid { grid-template-columns: 1fr; }
.vp-qv-gallery { border-radius: var(--vp-radius) var(--vp-radius) 0 0; min-height: 0; }
.vp-qv-main { min-height: 240px; max-height: 300px; }
.vp-qv-info { padding: 1.4rem 1.25rem 1.25rem; }
.vp-qv-modal { max-height: 92vh; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
body.vp-dark .woocommerce ul.products.vp-grid,
body.vp-dark .vp-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
body.vp-dark .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
.vp-coa-stats { grid-template-columns: repeat(2, 1fr); }
.vp-coa-details { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
body.vp-dark .vp-shop-layout { grid-template-columns: 1fr; }
.vp-sidebar { position: static; }
body.vp-dark .single-product div.product .woocommerce-product-gallery,
body.vp-dark .single-product div.product .summary.entry-summary { width: 100%; float: none; }
}
@media (max-width: 640px) {
/* Reference keeps a 2-up grid down to the smallest screens. */
body.vp-dark .woocommerce ul.products.vp-grid,
body.vp-dark .vp-shop-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.vp-shop-hero-title { font-size: 1.9rem; }
.vp-shop-hero-stats { gap: 1rem; }
.vp-card-body { padding: 0.85rem; }
.vp-card-name { font-size: 0.85rem; }
.vp-coa-stats { grid-template-columns: repeat(2, 1fr); }
body.vp-dark form.cart button.single_add_to_cart_button { min-width: 160px; }
/* Card footer stacks price above button on very narrow cards. */
.vp-card-footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
body.vp-dark .vp-btn-cart, body.vp-dark .vp-btn-select { width: 100%; text-align: center; }
}
/* ============================================================
UNIFIED BUTTON SYSTEM — one consistent style across the whole
store, matched to the client homepage hero buttons:
filled = dark→purple gradient + lavender text + thin lavender
border + arrow; ghost = transparent + lavender text + border.
Uppercase Montserrat, flat 3px, one shared hover. !important so
it overrides every scattered rule AND Divi's #et-boc link colour.
============================================================ */
body.vp-dark .vp-btn-cart,
body.vp-dark .vp-btn-select,
body.vp-dark .vp-btn-apply,
body.vp-dark .vp-btn-pack,
body.vp-dark .vp-qv-atc,
body.vp-dark .vp-coa-dl,
body.vp-dark .woocommerce a.button,
body.vp-dark .woocommerce button.button,
body.vp-dark .woocommerce input.button,
body.vp-dark .woocommerce a.button.alt,
body.vp-dark .woocommerce button.button.alt,
body.vp-dark .woocommerce a.checkout-button,
body.vp-dark .woocommerce button.single_add_to_cart_button,
body.vp-dark .single_add_to_cart_button,
body.vp-dark #place_order {
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important;
font-family: var(--vp-font-display) !important; font-weight: 600 !important;
letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important;
border: 1px solid var(--vp-btn-border) !important; border-radius: var(--vp-radius-sm) !important;
line-height: 1.2 !important; box-shadow: none !important; cursor: pointer !important;
transition: background 0.25s var(--vp-ease), border-color 0.25s ease, transform 0.2s var(--vp-ease), box-shadow 0.25s ease, color 0.2s ease !important;
}
/* Filled (primary) */
body.vp-dark .vp-btn-cart,
body.vp-dark .vp-btn-apply,
body.vp-dark .vp-btn-pack,
body.vp-dark .vp-qv-atc,
body.vp-dark .vp-coa-dl,
body.vp-dark .woocommerce a.button.alt,
body.vp-dark .woocommerce button.button.alt,
body.vp-dark .woocommerce a.checkout-button,
body.vp-dark .woocommerce button.single_add_to_cart_button,
body.vp-dark .single_add_to_cart_button,
body.vp-dark #place_order {
background: var(--vp-grad) !important; color: var(--vp-primary-bright) !important;
}
/* Ghost (secondary) */
body.vp-dark .vp-btn-select,
body.vp-dark .woocommerce a.button.wc-backward,
body.vp-dark .woocommerce .button.wc-backward,
body.vp-dark .woocommerce-cart td.actions .button,
body.vp-dark .woocommerce-cart td.actions .coupon .button {
background: rgba(255,255,255,0.03) !important; color: var(--vp-primary-bright) !important;
}
/* Sizes: large primaries vs compact card buttons */
body.vp-dark .single_add_to_cart_button,
body.vp-dark .woocommerce button.single_add_to_cart_button,
body.vp-dark .woocommerce a.checkout-button,
body.vp-dark #place_order,
body.vp-dark .vp-btn-apply,
body.vp-dark .vp-btn-pack,
body.vp-dark .vp-qv-atc { padding: 0.95rem 1.7rem !important; font-size: 0.8rem !important; }
body.vp-dark .vp-btn-cart,
body.vp-dark .vp-btn-select { padding: 0.6rem 1.15rem !important; font-size: 0.72rem !important; }
/* One shared hover for every button */
body.vp-dark .vp-btn-cart:hover,
body.vp-dark .vp-btn-apply:hover,
body.vp-dark .vp-btn-pack:hover,
body.vp-dark .vp-qv-atc:hover:not(:disabled),
body.vp-dark .vp-coa-dl:hover,
body.vp-dark .woocommerce a.button:hover,
body.vp-dark .woocommerce button.button:hover,
body.vp-dark .woocommerce input.button:hover,
body.vp-dark .woocommerce a.checkout-button:hover,
body.vp-dark .single_add_to_cart_button:hover,
body.vp-dark #place_order:hover {
background: var(--vp-grad-hover) !important; border-color: var(--vp-primary-light) !important;
color: #fff !important; transform: translateY(-2px) !important;
box-shadow: 0 12px 28px -10px rgba(var(--vp-primary-rgb), 0.6) !important;
}
body.vp-dark .vp-btn-select:hover,
body.vp-dark .woocommerce .button.wc-backward:hover,
body.vp-dark .woocommerce-cart td.actions .button:hover {
background: rgba(var(--vp-primary-rgb), 0.2) !important; border-color: var(--vp-primary-light) !important;
color: #fff !important; transform: translateY(-2px) !important;
}
body.vp-dark .vp-qv-atc:disabled { opacity: 0.5 !important; transform: none !important; }
/* Arrow (→) on the forward-flow CTAs (homepage style); animates on hover. */
body.vp-dark .woocommerce a.checkout-button::after,
body.vp-dark #place_order::after {
content: "\2192"; font-family: var(--vp-font-sans); font-weight: 600; margin-left: 0.1rem;
display: inline-block; transition: transform 0.22s var(--vp-ease);
}
body.vp-dark .woocommerce a.checkout-button:hover::after,
body.vp-dark #place_order:hover::after { transform: translateX(4px); }
/* ============================================================
SHOP REPLICATION — COA + DISCLAIMER + PAGINATION
Ported 1:1 from vitalpeps.com/shop.html, recolored to purple.
============================================================ */
/* Section: Certificate of Analysis (ported from vitalpeps shop, recolored) */
/* --- Section header primitives (shared) --- */
body.vp-dark .vp-sec-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--vp-font-display);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--vp-primary-light);
margin-bottom: 1rem;
opacity: 1;
}
body.vp-dark .vp-sec-title {
font-family: var(--vp-font-display);
font-size: clamp(1.6rem, 3.2vw, 2.5rem);
font-weight: 800;
color: var(--vp-white);
line-height: 1.1;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
body.vp-dark .vp-sec-subtitle {
font-family: var(--vp-font-sans);
font-size: 0.95rem;
color: #ddddf4;
line-height: 1.65;
max-width: 540px;
font-weight: 400;
letter-spacing: -0.01em;
}
body.vp-dark .vp-sec-header { margin-bottom: 4rem; }
body.vp-dark .vp-sec-header.vp-centered { text-align: center; }
body.vp-dark .vp-sec-header.vp-centered .vp-sec-subtitle { margin: 0 auto; }
/* --- COA / batch section --- */
body.vp-dark .vp-coa-section {
background: var(--vp-black);
border-top: 1px solid var(--vp-line);
position: relative;
overflow: hidden;
}
body.vp-dark .vp-coa-section::before {
/* DNA canvas injected by JS — pseudo removed */
display: none;
}
body.vp-dark .vp-coa-section > * {
position: relative;
z-index: 1;
}
body.vp-dark .vp-coa-section .vp-sec-title { color: var(--vp-white); }
body.vp-dark .vp-coa-section .vp-sec-subtitle { color: var(--vp-gray-400); }
body.vp-dark .vp-coa-section .vp-sec-label { color: var(--vp-primary-light); }
body.vp-dark .vp-batch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
}
body.vp-dark .vp-batch-card {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
border-radius: var(--vp-radius);
padding: 1.5rem;
transition: border-color var(--vp-transition), background var(--vp-transition);
display: flex;
flex-direction: column;
}
body.vp-dark .vp-batch-card:hover {
border-color: rgba(var(--vp-primary-rgb),0.35);
background: rgba(var(--vp-primary-rgb),0.05);
}
body.vp-dark .vp-batch-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
body.vp-dark .vp-batch-id {
font-family: 'Courier New', monospace;
font-size: 0.75rem;
color: var(--vp-primary-light);
font-weight: 600;
letter-spacing: 0.05em;
}
body.vp-dark .vp-batch-status {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--vp-success);
}
body.vp-dark .vp-batch-status-dot {
width: 6px;
height: 6px;
background: var(--vp-success);
border-radius: 50%;
}
body.vp-dark .vp-batch-product {
font-weight: 700;
color: #f0f0ff;
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
body.vp-dark .vp-batch-detail {
font-size: 0.78rem;
color: #b0b0cc;
margin-bottom: 0.125rem;
}
body.vp-dark .vp-batch-purity {
margin-top: 0.875rem;
padding-top: 0.875rem;
border-top: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: space-between;
}
body.vp-dark .vp-batch-purity-value {
font-family: var(--vp-font-display);
font-size: 1.1rem;
font-weight: 800;
color: var(--vp-success);
}
body.vp-dark .vp-batch-purity-label {
font-size: 0.7rem;
color: #8888aa;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* batch-card-body grows to fill available space, pushing button to bottom */
body.vp-dark .vp-batch-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
body.vp-dark .vp-batch-method {
text-align: right;
}
body.vp-dark .vp-batch-method-value {
font-size: 0.75rem;
color: var(--vp-gray-500);
font-weight: 600;
}
body.vp-dark .vp-batch-method-label {
font-size: 0.7rem;
color: var(--vp-gray-600);
}
/* Full-width download button — unified purple button */
body.vp-dark .vp-batch-coa-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
margin-top: 1.25rem;
padding: 0.625rem 1rem;
background: var(--vp-grad);
border: 1px solid var(--vp-btn-border);
border-radius: var(--vp-radius-sm);
color: var(--vp-primary-bright);
font-family: var(--vp-font-display);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--vp-transition), border-color var(--vp-transition), box-shadow var(--vp-transition), color var(--vp-transition);
flex-shrink: 0;
}
body.vp-dark .vp-batch-coa-btn:hover {
background: var(--vp-grad-hover);
border-color: var(--vp-primary-light);
color: #fff;
box-shadow: 0 0 16px rgba(var(--vp-primary-rgb),0.2);
}
/* Divi global-link override for the COA download anchor */
body.vp-dark #et-boc .et-l--body a.vp-batch-coa-btn { color: var(--vp-primary-bright) !important; }
body.vp-dark #et-boc .et-l--body a.vp-batch-coa-btn:hover { color: #fff !important; }
/* --- GLOW card variant --- */
/* (Reference has no dedicated CSS for these classes; they inherit .vp-batch-card
layout. Renamed selectors are declared as no-op anchors to preserve structure
and allow future styling without collisions.) */
body.vp-dark .vp-batch-product-name {
font-weight: 700;
color: #f0f0ff;
font-size: 0.95rem;
}
body.vp-dark .vp-batch-batch-id {
font-family: 'Courier New', monospace;
font-size: 0.75rem;
color: var(--vp-primary-light);
font-weight: 600;
letter-spacing: 0.05em;
}
body.vp-dark .vp-batch-purity-badge {
font-family: var(--vp-font-display);
font-size: 1.1rem;
font-weight: 800;
color: var(--vp-success);
}
body.vp-dark .vp-batch-meta {
margin-top: 0.875rem;
padding-top: 0.875rem;
border-top: 1px solid rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
gap: 0.375rem;
}
body.vp-dark .vp-batch-meta-item {
display: flex;
align-items: center;
justify-content: space-between;
}
body.vp-dark .vp-batch-meta-key {
font-size: 0.7rem;
color: #8888aa;
text-transform: uppercase;
letter-spacing: 0.05em;
}
body.vp-dark .vp-batch-meta-val {
font-size: 0.75rem;
color: var(--vp-gray-500);
font-weight: 600;
}
/* --- Responsive --- */
@media (max-width: 768px) {
/* Batch grid: 2 columns on tablet */
body.vp-dark .vp-batch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
body.vp-dark .vp-batch-grid { grid-template-columns: 1fr; }
body.vp-dark .vp-batch-coa-btn { font-size: 0.75rem; }
}
/* Section: DISCLAIMER (ported from vitalpeps shop, recolored) */
/* --- Compliance footer note (reference used inline styles: bg var(--gray-50)->dark surface, border-top, padding 2rem, centered, 0.8rem gray) --- */
body.vp-dark .vp-shop-disclaimer-note {
background: var(--vp-surface);
border-top: 1px solid var(--vp-line);
padding: 2rem;
}
body.vp-dark .vp-shop-disclaimer-note .vp-container {
text-align: center;
}
body.vp-dark .vp-shop-disclaimer-note p {
font-size: 0.8rem;
color: var(--vp-gray-500);
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
/* --- Footer legal disclaimer box + footer-bottom row --- */
body.vp-dark .vp-shop-disclaimer {
max-width: 1200px;
margin: 0 auto;
padding-top: 2.5rem;
border-top: 1px solid var(--vp-line);
position: relative;
z-index: 1;
}
body.vp-dark .vp-shop-disclaimer-box {
background: rgba(255,255,255,0.02);
border: 1px solid var(--vp-line);
border-radius: var(--vp-radius-sm);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
}
body.vp-dark .vp-shop-disclaimer-box p {
font-size: 0.72rem;
color: #adadcc;
line-height: 1.7;
margin-bottom: 0.5rem;
font-weight: 400;
}
body.vp-dark .vp-shop-disclaimer-box p:last-child { margin-bottom: 0; }
body.vp-dark .vp-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
body.vp-dark .vp-footer-copyright { font-size: 0.78rem; color: #9898b8; }
body.vp-dark .vp-footer-credit {
font-size: 0.78rem;
color: var(--vp-gray-500);
margin-top: 0.35rem;
}
body.vp-dark .vp-footer-credit a {
color: var(--vp-gray-400);
text-decoration: none;
transition: color 0.2s;
}
body.vp-dark .vp-footer-credit a:hover {
color: var(--vp-white);
}
/* Divi forces its global link colour on — override for our footer-credit link */
body.vp-dark #et-boc .et-l--body a.vp-footer-credit-link { color: var(--vp-gray-400) !important; }
body.vp-dark #et-boc .et-l--body a.vp-footer-credit-link:hover { color: var(--vp-white) !important; }
body.vp-dark .vp-footer-policy-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
body.vp-dark .vp-footer-policy-links a {
font-size: 0.78rem;
color: #9898b8;
transition: color var(--vp-transition, 0.2s ease);
}
body.vp-dark .vp-footer-policy-links a:hover { color: var(--vp-white); }
/* Divi forces its global link colour on — override for our policy links */
body.vp-dark #et-boc .et-l--body a.vp-footer-policy-link { color: #9898b8 !important; }
body.vp-dark #et-boc .et-l--body a.vp-footer-policy-link:hover { color: var(--vp-white) !important; }
/* Responsive (from styles.css line 5013) */
@media (max-width: 768px) {
body.vp-dark .vp-footer-bottom { flex-direction: column; text-align: center; }
}
/* Section: PAGINATION + product count (ported from vitalpeps shop, recolored) */
/* --- Product count ("N compounds found") --- */
body.vp-dark .vp-shop-count {
font-size: 0.875rem;
color: #c0c0d8;
}
/* --- Pagination --- */
body.vp-dark .vp-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
}
body.vp-dark .vp-pagination .vp-page-btn {
width: 38px;
height: 38px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--vp-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: #c8c8e4;
transition: all var(--vp-transition, 0.2s ease);
cursor: pointer;
background: transparent;
font-family: var(--vp-font-sans);
padding: 0;
line-height: 1;
}
body.vp-dark .vp-pagination .vp-page-btn:hover {
border-color: var(--vp-primary-light);
color: var(--vp-primary-light);
}
/* active page = our unified button treatment (recolored from gold gradient) */
body.vp-dark .vp-pagination .vp-page-btn.active {
background: var(--vp-grad);
color: var(--vp-primary-bright);
border: 1px solid var(--vp-btn-border);
font-family: var(--vp-font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
body.vp-dark .vp-pagination .vp-page-btn.active:hover {
background: var(--vp-grad-hover);
border-color: var(--vp-primary-light);
color: #fff;
}
body.vp-dark .vp-pagination .vp-page-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Shop-section content containers (COA header/grid + disclaimer note center at page width) */
body.vp-dark .vp-coa-section .vp-container,
body.vp-dark .vp-shop-disclaimer-note .vp-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
/* ===== Button arrow cleanup (PDP add-to-cart etc.) =====
Divi injects its default ETmodules » arrow via ::after on WooCommerce buttons.
Suppress it on every button EXCEPT the checkout-flow CTAs (Proceed to Checkout
/ Place Order) which carry our own clean animated → arrow. Result: a smooth,
arrow-free hover on Add to Cart / Add Pack / etc. */
body.vp-dark .single_add_to_cart_button::after,
body.vp-dark .woocommerce button.single_add_to_cart_button::after,
body.vp-dark .vp-btn-cart::after,
body.vp-dark .vp-btn-select::after,
body.vp-dark .vp-btn-pack::after,
body.vp-dark .vp-btn-apply::after,
body.vp-dark .vp-btn-reset::after,
body.vp-dark .vp-qv-atc::after,
body.vp-dark .vp-coa-dl::after,
body.vp-dark .woocommerce .button.wc-backward::after,
body.vp-dark .woocommerce-cart td.actions .button::after,
body.vp-dark .woocommerce-cart td.actions .coupon .button::after { content: none !important; display: none !important; }
/* ===== PDP tabs — readable active state + cleaner spacing (client feedback) =====
The tab labels are inside the TB body, so Divi's global link colour made the
active tab text dark-on-dark. Force readable colours; give the active tab a clear,
on-brand gradient fill; add breathing room below the panel. */
body.vp-dark #et-boc .et-l--body .woocommerce-tabs ul.tabs li a { color: var(--vp-gray-300) !important; font-weight: 600 !important; }
body.vp-dark #et-boc .et-l--body .woocommerce-tabs ul.tabs li:hover { border-color: rgba(var(--vp-primary-rgb), 0.5) !important; }
body.vp-dark #et-boc .et-l--body .woocommerce-tabs ul.tabs li:hover a { color: #fff !important; }
body.vp-dark #et-boc .et-l--body .woocommerce-tabs ul.tabs li.active { background: var(--vp-grad) !important; border-color: var(--vp-btn-border) !important; box-shadow: 0 4px 14px -6px rgba(var(--vp-primary-rgb), 0.6) !important; }
body.vp-dark #et-boc .et-l--body .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
body.vp-dark .woocommerce-Tabs-panel { margin-bottom: 2rem; }
/* ============================================================
SLIDE-OUT "RESEARCH CART" DRAWER
Unique .vp-sc-* classes, not body.vp-dark-scoped (works site-wide,
over the Divi header). Opens from the right; WooCommerce-AJAX driven.
============================================================ */
html.vp-sc-lock, html.vp-sc-lock body { overflow: hidden; }
.vp-sc-overlay {
position: fixed; inset: 0; z-index: 100001; display: flex; justify-content: flex-end;
background: rgba(3, 2, 8, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s ease;
}
.vp-sc-overlay.open { opacity: 1; visibility: visible; }
.vp-sc-panel {
position: relative; width: min(420px, 100%); height: 100%; display: flex; flex-direction: column;
background: linear-gradient(180deg, #16111f 0%, #0c0a11 100%);
border-left: 1px solid rgba(var(--vp-primary-rgb), 0.28);
box-shadow: -24px 0 60px -12px rgba(0,0,0,0.7);
transform: translateX(100%); transition: transform 0.4s var(--vp-ease); will-change: transform;
font-family: var(--vp-font-sans);
}
.vp-sc-overlay.open .vp-sc-panel { transform: translateX(0); }
.vp-sc-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--vp-line); flex-shrink: 0; }
.vp-sc-title { font-family: var(--vp-font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vp-white); }
.vp-sc-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--vp-line-2); color: var(--vp-gray-300); cursor: pointer; transition: all 0.2s ease; }
.vp-sc-close:hover { background: rgba(var(--vp-primary-rgb), 0.25); color: #fff; transform: rotate(90deg); }
.vp-sc-compliance { padding: 0.6rem 1.4rem; background: rgba(var(--vp-primary-rgb), 0.08); border-bottom: 1px solid var(--vp-line); font-size: 0.72rem; color: var(--vp-gray-400); flex-shrink: 0; }
.vp-sc-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.vp-sc-promo { display: flex; align-items: center; gap: 0.45rem; margin: 1rem 1.4rem 0; padding: 0.55rem 0.85rem; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: var(--vp-radius-sm); color: var(--vp-success); font-size: 0.78rem; }
.vp-sc-promo strong { color: var(--vp-success); }
.vp-sc-items { padding: 1rem 1.4rem 0.5rem; display: flex; flex-direction: column; gap: 1rem; }
.vp-sc-item { display: flex; gap: 0.85rem; transition: opacity 0.2s ease; }
.vp-sc-item.vp-sc-updating { opacity: 0.45; pointer-events: none; }
.vp-sc-thumb { width: 62px; height: 62px; flex-shrink: 0; border-radius: var(--vp-radius-sm); overflow: hidden; background: #f5f5f5; border: 1px solid var(--vp-line); display: block; }
.vp-sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-sc-item-info { flex: 1; min-width: 0; }
.vp-sc-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.vp-sc-item-name { font-family: var(--vp-font-display); font-size: 0.85rem; font-weight: 600; color: var(--vp-ink); line-height: 1.3; text-decoration: none; }
a.vp-sc-item-name:hover { color: var(--vp-primary-light); }
.vp-sc-item-variant { font-size: 0.72rem; color: var(--vp-gray-500); margin-top: 0.15rem; }
.vp-sc-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.55rem; }
.vp-sc-qty { display: inline-flex; align-items: center; border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm); overflow: hidden; }
.vp-sc-qbtn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: none; color: var(--vp-gray-300); cursor: pointer; font-size: 0.9rem; line-height: 1; transition: background 0.15s ease, color 0.15s ease; }
.vp-sc-qbtn:hover { background: rgba(var(--vp-primary-rgb), 0.25); color: #fff; }
.vp-sc-qval { min-width: 30px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--vp-white); }
.vp-sc-item-price { font-family: var(--vp-font-display); font-size: 0.9rem; font-weight: 700; color: var(--vp-primary-light); white-space: nowrap; }
.vp-sc-item-price .amount, .vp-sc-item-price bdi { color: var(--vp-primary-light); }
.vp-sc-remove { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--vp-gray-500); cursor: pointer; border-radius: 4px; transition: all 0.15s ease; }
.vp-sc-remove:hover { color: var(--vp-danger); background: rgba(239,68,68,0.12); }
/* Free-shipping progress */
.vp-sc-ship { margin: 0.75rem 1.4rem; padding: 0.85rem 1rem; background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius-sm); }
.vp-sc-ship-msg { font-size: 0.78rem; color: var(--vp-gray-300); margin-bottom: 0.55rem; }
.vp-sc-ship-msg strong { color: var(--vp-primary-light); }
.vp-sc-ship.unlocked .vp-sc-ship-msg { color: var(--vp-success); }
.vp-sc-ship.unlocked .vp-sc-ship-msg strong { color: var(--vp-success); }
.vp-sc-ship-ico { margin-right: 0.15rem; }
.vp-sc-ship-track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.vp-sc-ship-fill { height: 100%; background: var(--vp-grad-text); border-radius: 999px; transition: width 0.4s var(--vp-ease); }
.vp-sc-ship.unlocked .vp-sc-ship-fill { background: linear-gradient(90deg, var(--vp-success), #34d399); }
.vp-sc-ship-ends { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--vp-gray-500); margin-top: 0.4rem; }
.vp-sc-ship-ends .amount { color: var(--vp-gray-500); }
/* Totals + actions */
.vp-sc-totals { padding: 0.75rem 1.4rem 0; }
.vp-sc-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.35rem 0; font-size: 0.85rem; color: var(--vp-gray-300); }
.vp-sc-total-row .amount { color: var(--vp-gray-300); }
.vp-sc-grand { padding-top: 0.7rem; margin-top: 0.35rem; border-top: 1px solid var(--vp-line-2); font-family: var(--vp-font-display); font-size: 1.05rem; font-weight: 800; color: var(--vp-white); }
.vp-sc-grand-val { color: var(--vp-white); }
.vp-sc-grand-val .amount, .vp-sc-grand-val bdi { color: var(--vp-primary-light); }
.vp-sc-grand-val em { font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--vp-success); }
/* Drawer action buttons — refined: share one height (min-height) so the 1-line
ghost and 2-line gradient CTA align; unified with the site button system
(0.06em tracking, -2px hover lift + matching shadow); flat 3px; focus ring. */
.vp-sc-actions { display: flex; align-items: stretch; gap: 0.55rem; padding: 1rem 1.4rem 0.6rem; }
.vp-sc-viewcart,
.vp-sc-checkout {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: 3rem; padding: 0.8rem 1rem; border: 1px solid var(--vp-btn-border);
border-radius: var(--vp-radius-sm); font-family: var(--vp-font-display); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.06em; line-height: 1.15; text-transform: uppercase;
text-decoration: none; text-align: center; cursor: pointer; box-shadow: none;
transition: background 0.25s var(--vp-ease), border-color 0.25s ease, transform 0.2s var(--vp-ease), box-shadow 0.25s ease, color 0.2s ease;
}
.vp-sc-viewcart { flex: 1 1 34%; background: rgba(var(--vp-primary-rgb), 0.06); color: var(--vp-primary-bright); }
.vp-sc-viewcart:hover { background: rgba(var(--vp-primary-rgb), 0.2); border-color: var(--vp-primary-light); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(var(--vp-primary-rgb), 0.45); }
.vp-sc-checkout { flex: 1 1 66%; background: var(--vp-grad); color: var(--vp-primary-bright); }
.vp-sc-checkout:hover { background: var(--vp-grad-hover); border-color: var(--vp-primary-light); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(var(--vp-primary-rgb), 0.6); }
.vp-sc-checkout svg { flex-shrink: 0; }
.vp-sc-viewcart:focus-visible,
.vp-sc-checkout:focus-visible { outline: none; border-color: var(--vp-primary-light); box-shadow: 0 0 0 3px rgba(var(--vp-primary-rgb), 0.4); }
.vp-sc-viewcart:active,
.vp-sc-checkout:active { transform: translateY(0); }
.vp-sc-fine { padding: 0.25rem 1.4rem 1.4rem; font-size: 0.64rem; color: var(--vp-gray-500); line-height: 1.5; }
/* Empty state */
.vp-sc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 3rem 1.4rem; text-align: center; color: var(--vp-gray-500); }
.vp-sc-empty-title { font-size: 0.9rem; color: var(--vp-gray-300); }
.vp-sc-empty-btn { display: inline-flex; align-items: center; background: var(--vp-grad); color: var(--vp-primary-bright); border: 1px solid var(--vp-btn-border); padding: 0.7rem 1.4rem; border-radius: var(--vp-radius-sm); font-family: var(--vp-font-display); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
.vp-sc-empty-btn:hover { background: var(--vp-grad-hover); color: #fff; }
@media (max-width: 480px) {
.vp-sc-panel { width: 100%; border-left: none; }
}
/* ===== Checkout-flow buttons: lock icon (reference), no arrow =====
The Divi/WooCommerce arrow (::after glyph) is suppressed here; the padlock
itself is an inline SVG injected into the button markup by vp.js
(vpDecorateCheckoutButtons). Injecting real markup — instead of a ::before
pseudo — sidesteps Divi's ID-level pseudo-element cascade entirely and needs
no icon font, so it renders identically on the live server. */
body.vp-dark #et-boc .et-l--body .woocommerce a.checkout-button::after,
body.vp-dark #et-boc .et-l--body #place_order::after,
body.vp-dark .woocommerce a.checkout-button::after,
body.vp-dark #place_order::after { content: none !important; }
.vp-lock-ico { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5rem; vertical-align: -0.12em; flex-shrink: 0; }
body.vp-dark a.checkout-button, body.vp-dark #place_order { align-items: center; }
/* ============================================================
[vp_product_grid] — reusable home / anywhere product grid.
Reuses the shop card + button design system. Only the wrapper,
the column override, and the "View All" button are new here;
card styling comes from the shared body.vp-dark li.product.vp-card
rules above. Scoped to .vp-home-grid so nothing leaks.
============================================================ */
body.vp-dark .vp-home-grid { padding: 4rem 0; }
body.vp-dark .vp-home-grid .vp-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
body.vp-dark .vp-home-grid-header { margin-bottom: 2.5rem; }
/* Column override (respects the shortcode's columns="" via [data-columns]).
Out-specifies the archive's fixed repeat(3,1fr) inside our wrapper. */
body.vp-dark .vp-home-grid .woocommerce ul.products.vp-grid {
display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
margin: 0; padding: 0; list-style: none; align-items: stretch; width: 100%;
}
body.vp-dark .vp-home-grid[data-columns="1"] .woocommerce ul.products.vp-grid { grid-template-columns: 1fr; }
body.vp-dark .vp-home-grid[data-columns="2"] .woocommerce ul.products.vp-grid { grid-template-columns: repeat(2, 1fr); }
body.vp-dark .vp-home-grid[data-columns="4"] .woocommerce ul.products.vp-grid { grid-template-columns: repeat(4, 1fr); }
body.vp-dark .vp-home-grid[data-columns="5"] .woocommerce ul.products.vp-grid { grid-template-columns: repeat(5, 1fr); }
body.vp-dark .vp-home-grid[data-columns="6"] .woocommerce ul.products.vp-grid { grid-template-columns: repeat(6, 1fr); }
/* "View All" button — same gradient/border tokens as .vp-btn-cart / .vp-btn-pack. */
body.vp-dark .vp-home-grid-actions { display: flex; justify-content: center; margin-top: 2.75rem; }
body.vp-dark .vp-view-all {
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 0.95rem 2.4rem;
font-family: var(--vp-font-display); font-size: 0.8rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
color: #fff; background: var(--vp-grad); border: 1px solid var(--vp-btn-border);
border-radius: var(--vp-radius); cursor: pointer;
transition: background 0.3s var(--vp-ease), border-color 0.3s ease, transform 0.3s var(--vp-ease), box-shadow 0.3s ease;
}
body.vp-dark .vp-view-all svg { transition: transform 0.3s var(--vp-ease); }
body.vp-dark .vp-view-all:hover {
background: var(--vp-grad-hover); border-color: var(--vp-primary-light);
color: #fff; transform: translateY(-2px);
box-shadow: 0 10px 26px -8px rgba(var(--vp-primary-rgb), 0.55);
}
body.vp-dark .vp-view-all:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) {
body.vp-dark .vp-home-grid .woocommerce ul.products.vp-grid,
body.vp-dark .vp-home-grid[data-columns="4"] .woocommerce ul.products.vp-grid,
body.vp-dark .vp-home-grid[data-columns="5"] .woocommerce ul.products.vp-grid,
body.vp-dark .vp-home-grid[data-columns="6"] .woocommerce ul.products.vp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
body.vp-dark .vp-home-grid { padding: 2.75rem 0; }
body.vp-dark .vp-home-grid .woocommerce ul.products.vp-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
body.vp-dark .vp-home-grid[data-columns="1"] .woocommerce ul.products.vp-grid { grid-template-columns: 1fr; }
body.vp-dark .vp-view-all { padding: 0.85rem 1.8rem; font-size: 0.75rem; }
}
/* ============================================================
HEADER SAFETY — restore announcement-bar close (x) icon inline
On WooCommerce archive/PDP/cart/checkout pages Divi's archive Theme
Builder body layout (#297) activates the high-specificity CORE rule
`.et-db #et-boc .et-l .et_pb_module { position: relative }` (spec 1-3-0),
which defeats Divi's own `.close_icon { position: absolute }` (0-1-0).
The top-bar close icon then becomes a full-width block and drops to a
second line. This is a Divi cascade quirk (NOT a vp.css leak — it
reproduces with vp.css disabled). We re-assert the icon's OWN intended
absolute pin, scoped STRICTLY to .et-l--header, so the header design/
function is unchanged and no storefront/body styling is touched. Divi's
existing .close_icon{top:0;right:0} still governs placement.
============================================================ */
.et-db #et-boc .et-l--header .et_pb_icon.close_icon {
position: absolute !important;
width: auto !important;
}
/* ============================================================
SHOP: remove the ~8px horizontal overflow from the full-bleed hero.
.vp-shop-hero uses width:100vw to break out of the Divi content column;
100vw includes the vertical scrollbar, so it overshoots the content width
and creates a horizontal scrollbar at the bottom of the page. Clip the
overshoot at the Theme-Builder BODY wrapper only. overflow-x:clip (NOT
hidden) leaves overflow-y visible, so it never becomes a scroll container
and the sticky shop sidebar keeps working. .et-l--body only — never the
header/footer.
============================================================ */
body.vp-dark .et-l--body { overflow-x: clip; }
/* ============================================================
MOBILE PRODUCT GRID + FILTER DROPDOWN (phones only, <=767px)
Desktop and tablet (>=768px) are left EXACTLY as-is. On phones the
cards become compact (image / category / name / price / add-to-cart,
matching the reference) and the shop filter sidebar collapses into a
tap-to-open "Filters" dropdown.
============================================================ */
.vp-filter-toggle { display: none; }
@media (max-width: 767px) {
/* ---- Shop filter as a dropdown ---- */
body.vp-dark .vp-sidebar { padding: 0; background: none; border: none; margin-bottom: 1rem; }
.vp-filter-toggle {
display: flex; align-items: center; gap: 0.55rem; width: 100%;
padding: 0.85rem 1.1rem; background: var(--vp-surface);
border: 1px solid var(--vp-line-2); border-radius: var(--vp-radius-sm);
font-family: var(--vp-font-display); font-weight: 600; font-size: 0.8rem;
letter-spacing: 0.05em; text-transform: uppercase; color: var(--vp-white); cursor: pointer;
}
.vp-filter-toggle > span { flex: 1; text-align: left; }
.vp-filter-toggle-chevron { transition: transform 0.25s ease; }
.vp-sidebar.vp-filters-open .vp-filter-toggle-chevron { transform: rotate(180deg); }
.vp-filter-panel {
display: none; margin-top: 0.55rem; padding: 1rem 1.1rem 1.15rem;
background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: var(--vp-radius-sm);
}
.vp-sidebar.vp-filters-open .vp-filter-panel { display: block; }
/* ---- Compact cards: keep image / category / name / price / add-to-cart ---- */
body.vp-dark li.product.vp-card .vp-card-summary,
body.vp-dark li.product.vp-card .vp-research-tags,
body.vp-dark li.product.vp-card .vp-spec-row,
body.vp-dark li.product.vp-card .vp-coa-link-wrap,
body.vp-dark li.product.vp-card .vp-card-disclaimer,
body.vp-dark li.product.vp-card .vp-card-image-label,
body.vp-dark li.product.vp-card .vp-card-hover { display: none !important; }
body.vp-dark li.product.vp-card .vp-card-body { padding: 0.7rem 0.7rem 0.85rem; }
body.vp-dark li.product.vp-card .vp-card-cat { font-size: 0.58rem; margin-bottom: 0.15rem; }
body.vp-dark li.product.vp-card .vp-card-name { font-size: 0.86rem; line-height: 1.25; margin-bottom: 0.55rem; min-height: 0; }
body.vp-dark li.product.vp-card .vp-card-footer { flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0; }
body.vp-dark li.product.vp-card .vp-card-footer .vp-price { font-size: 1rem; text-align: left; }
body.vp-dark li.product.vp-card .vp-btn-cart,
body.vp-dark li.product.vp-card .vp-btn-select {
width: 100%; justify-content: center; text-align: center; padding: 0.62rem 0.5rem !important; font-size: 0.68rem !important;
}
body.vp-dark li.product.vp-card .vp-btn-oos { width: 100%; text-align: center; }
/* tighter grid gaps on phones */
body.vp-dark .vp-shop-main ul.products.vp-grid,
body.vp-dark .woocommerce ul.products.vp-grid,
body.vp-dark .vp-home-grid .woocommerce ul.products.vp-grid { gap: 0.6rem; }
}
/* ============================================================
PDP POLISH — tab left-crop fix, tab bottom spacing, and mobile
add-to-cart stacking. Scoped to the storefront (body.vp-dark) only.
============================================================ */
/* The first tab pill carried a stray -2px left margin (sat 2px past the
content edge, clipping its rounded corner + active glow). Zero it and give
the pill row a few px of padding so nothing is cropped on the left. */
body.vp-dark #et-boc .woocommerce-tabs ul.tabs,
body.vp-dark .woocommerce-tabs ul.tabs { padding: 5px 5px 0 5px !important; }
body.vp-dark #et-boc .woocommerce-tabs ul.tabs li,
body.vp-dark .woocommerce-tabs ul.tabs li { margin: 0 !important; }
/* A little more breathing room below the whole tabs section. */
body.vp-dark #et-boc .woocommerce-tabs,
body.vp-dark .woocommerce-tabs { margin-bottom: 2rem; }
@media (max-width: 767px) {
/* Single Product (mobile): stack the quantity selector and the Add-to-Research-Cart
button vertically, each full width, so they never sit cramped side-by-side. */
body.vp-dark form.cart,
body.vp-dark .woocommerce-variation-add-to-cart { flex-direction: column; align-items: stretch; }
body.vp-dark form.cart .quantity,
body.vp-dark form.cart .vp-qty { width: 100%; justify-content: center; }
body.vp-dark form.cart button.single_add_to_cart_button { width: 100%; min-width: 0; }
/* Comfortable tab panel padding on phones. */
body.vp-dark .woocommerce-Tabs-panel { padding: 1.25rem 1.1rem; }
}
/* =====================================================================
Wholesale price badge — shown to approved wholesale customers on the
shop archive + single product (retail price struck through). See
includes/wholesale.php :: woocommerce_get_price_html.
===================================================================== */
body.vp-dark .vp-ws-price { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
body.vp-dark .vp-ws-price del { color: var(--vp-gray-500); opacity: 0.8; font-weight: 400; }
body.vp-dark .vp-ws-price ins { text-decoration: none; color: var(--vp-primary-light); font-weight: 700; }
body.vp-dark .vp-ws-price .woocommerce-Price-amount { color: inherit; }
body.vp-dark .vp-ws-tag {
font-family: var(--vp-font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--vp-white);
background: var(--vp-grad-badge); padding: 0.15rem 0.5rem; border-radius: var(--vp-radius-pill);
}
/* =====================================================================
Header search overlay (Ivory Search) — toggled by .vp-search-toggle.
Dark, on-brand dropdown from the top. See includes/header.php + vp.js.
===================================================================== */
.vp-search-toggle { cursor: pointer; }
.vp-search-overlay { position: fixed; inset: 0; z-index: 100000; display: none; }
.vp-search-overlay.is-open { display: block; }
html.vp-search-open { overflow: hidden; }
.vp-search-overlay__backdrop {
position: absolute; inset: 0;
background: rgba(5, 4, 10, 0.74);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: vp-fade 0.18s ease;
}
.vp-search-overlay__panel {
position: absolute; top: 0; left: 0; right: 0;
background: linear-gradient(180deg, #0d0b12 0%, #0a0a0a 100%);
border-bottom: 1px solid rgba(var(--vp-primary-rgb), 0.4);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
padding: clamp(1.25rem, 4vw, 2.5rem) 1.25rem;
animation: vp-search-drop 0.22s var(--vp-ease);
}
@keyframes vp-search-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes vp-fade { from { opacity: 0; } to { opacity: 1; } }
.vp-search-overlay__inner { position: relative; max-width: 720px; margin: 0 auto; }
.vp-search-overlay__label {
display: block; margin-bottom: 0.75rem;
font-family: var(--vp-font-display); font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-primary-light);
}
.vp-search-overlay__close {
position: absolute; top: -0.35rem; right: 0;
background: none; border: none; color: var(--vp-gray-400);
font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
transition: color var(--vp-transition);
}
.vp-search-overlay__close:hover { color: #fff; }
/* Style whatever input Ivory renders, on-brand + big. */
.vp-search-overlay__form input[type="search"],
.vp-search-overlay__form input[type="text"],
.vp-search-overlay__form input.is-search-input {
width: 100% !important;
font-family: var(--vp-font-sans); font-size: 1.05rem; color: var(--vp-ink) !important;
background: rgba(0, 0, 0, 0.4) !important;
border: 1px solid var(--vp-line-2) !important;
border-radius: var(--vp-radius) !important;
padding: 0.9rem 1rem !important; box-shadow: none !important;
}
.vp-search-overlay__form input[type="search"]:focus,
.vp-search-overlay__form input[type="text"]:focus,
.vp-search-overlay__form input.is-search-input:focus {
outline: none; border-color: rgba(var(--vp-primary-rgb), 0.65) !important;
box-shadow: 0 0 0 3px var(--vp-primary-glow) !important;
}
.vp-search-overlay__form form { position: relative; margin: 0; }
/* Ivory's AJAX results panel — keep it readable on our dark bar. */
.vp-search-overlay__form .is-search-results,
.vp-search-overlay__form .is-ajax-results { max-height: 60vh; overflow-y: auto; }
@media (max-width: 767px) {
.vp-search-overlay__panel { padding: 1.5rem 1rem; }
}
/* Ivory AJAX results dropdown — dark-themed to match the overlay. Ivory appends
the results panel to (not inside the overlay) and only while our search
is open, so we scope to html.vp-search-open (the class vp.js toggles). Classes
are Ivory's; if they ever change, results just fall back to Ivory's own
readable styling — nothing breaks. */
html.vp-search-open .is-ajax-search-result,
html.vp-search-open .is-ajax-search-posts,
html.vp-search-open .is-ajax-search-post,
html.vp-search-open .is-ajax-search-details,
html.vp-search-open .is-ajax-search-categories-details,
html.vp-search-open .is-ajax-search-tags-details { background: #0d0b12 !important; }
html.vp-search-open .is-ajax-search-result {
border: 1px solid var(--vp-line-2) !important;
border-radius: var(--vp-radius) !important;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85) !important;
}
html.vp-search-open .is-ajax-search-post { border-bottom: 1px solid var(--vp-line) !important; }
html.vp-search-open .is-ajax-search-post:hover,
html.vp-search-open .is-ajax-search-post.is-active { background: var(--vp-surface) !important; }
html.vp-search-open .is-title,
html.vp-search-open .is-title a { color: var(--vp-ink) !important; }
html.vp-search-open .is-ajax-search-post:hover .is-title a { color: var(--vp-primary-light) !important; }
html.vp-search-open .is-ajax-result-description { color: var(--vp-body) !important; }
html.vp-search-open .is-prices,
html.vp-search-open .is-prices * { color: var(--vp-primary-light) !important; }
html.vp-search-open .is-ajax-term-label,
html.vp-search-open .is-ajax-term-name a,
html.vp-search-open .is-search-sections,
html.vp-search-open .is-search-sections * { color: var(--vp-body) !important; }
html.vp-search-open .is-show-more-results {
background: rgba(var(--vp-primary-rgb), 0.16) !important;
border-top: 1px solid var(--vp-line) !important;
}
html.vp-search-open .is-show-more-results a,
html.vp-search-open .is-show-more-results-text { color: var(--vp-primary-light) !important; }
html.vp-search-open .is-ajax-search-no-result { color: var(--vp-body) !important; background: #0d0b12 !important; }
/* Mobile search icon — align inline with the cart on the header's top-right
(the cart is absolutely positioned in the same column). */
@media (max-width: 767px) {
body .vp-search-mobile {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
position: absolute !important;
top: 0 !important; right: 84px !important; left: auto !important;
margin: 0 !important; z-index: 5;
}
body .vp-search-mobile .et-pb-icon { line-height: 1 !important; margin: 0 !important; }
}
/* =====================================================================
Header — icon alignment + tablet (≤1024) responsiveness.
Supplements the header layout's own custom CSS. See PROJECT-NOTES Phase 27.
===================================================================== */
/* 1. Vertically centre the header icon glyphs (Divi renders them low in the
padded 34px box, so search/cart looked lower than the menu + button).
NOTE: only the right-column icons — must NOT touch .vp-search-mobile's
display here or it un-hides on desktop. */
body .header_rt_col .et_pb_icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body .header_rt_col .et_pb_icon .et-pb-icon { line-height: 1 !important; margin: 0 !important; }
/* 2. Tablet breakpoint — show the hamburger from 1024px down (Divi's own
breakpoint is 980px, which left the desktop menu cramped at ~1024). */
@media (min-width: 981px) and (max-width: 1024px) {
body .c_menu .et_pb_menu__menu { display: none !important; }
body .c_menu .et_mobile_nav_menu { display: block !important; }
}
/* From tablet down, drop the "Shop Peptides" button (Shop is in the menu) so the
search + cart + account controls sit comfortably beside the hamburger. */
@media (max-width: 1024px) {
body .header_rt_col .et_pb_button_module_wrapper { display: none !important; }
}
/* 3. Tablet/phone dropdown menu — solid dark panel + readable items (it was
transparent, inheriting the header's see-through menu background). */
body .c_menu .et_mobile_menu,
body .c_menu .et_mobile_menu.et_mobile_menu {
background-color: #0a0a0a !important;
border-top: 3px solid var(--vp-primary) !important;
border-left: 1px solid var(--vp-line) !important;
border-right: 1px solid var(--vp-line) !important;
box-shadow: 0 26px 54px -18px rgba(0,0,0,0.9) !important;
padding: 4px 0 !important;
}
body .c_menu .et_mobile_menu li a {
color: var(--vp-body) !important;
padding: 13px 22px !important;
border-bottom: 1px solid var(--vp-line) !important;
font-size: 14px !important; opacity: 1 !important;
}
body .c_menu .et_mobile_menu li:last-child a { border-bottom: none !important; }
body .c_menu .et_mobile_menu li a:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
body .c_menu .et_mobile_menu .current-menu-item > a { color: var(--vp-primary-light) !important; }
/* Kill the list bullets leaking beside the mobile/tablet dropdown items. */
body .c_menu .et_mobile_menu,
body .c_menu .et_mobile_menu ul,
body .c_menu .et_mobile_menu li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
body .c_menu .et_mobile_menu li::marker,
body .c_menu .et_mobile_menu li::before { content: none !important; display: none !important; }
/* Tablet only (768–1024): keep the header on ONE row (Divi stacks the 2 columns
≤980px). Logo sits far-left; the menu column fills the width so the hamburger
lands beside the controls (search/cart/account) on the far right. Phones
(≤767) keep their own layout (right column hidden, mobile search + cart). */
@media (min-width: 768px) and (max-width: 1024px) {
body .et_pb_row--with-menu {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
body .et_pb_row--with-menu > .et_pb_column {
float: none !important; margin: 0 !important;
}
body .et_pb_row--with-menu > .et_pb_column_2_3 { flex: 1 1 auto !important; width: auto !important; }
body .et_pb_row--with-menu > .header_rt_col { flex: 0 0 auto !important; width: auto !important; }
/* menu module fills its column and pushes the hamburger to the far right so it
groups with the controls consistently across the whole tablet range. */
body .et_pb_row--with-menu .c_menu,
body .et_pb_row--with-menu .c_menu .et_pb_menu_inner_container { width: 100% !important; }
body .et_pb_row--with-menu .c_menu .et_pb_menu_inner_container { display: flex !important; align-items: center !important; }
body .et_pb_row--with-menu .c_menu .et_mobile_nav_menu { margin-left: auto !important; }
}