/* =========================================================
Orvex Product Widget — namespaced styles
Matches the HTML site product card design exactly
Brand: teal #1FB8B6 · navy #0F2740 · ink #0F2740
========================================================= */
.orvex-pw {
--orvex-pw-teal: #1FB8B6;
--orvex-pw-teal-deep: #0F8F8D;
--orvex-pw-teal-glow: rgba(31, 184, 182, 0.12);
--orvex-pw-navy: #0F2740;
--orvex-pw-navy-deep: #081A2A;
--orvex-pw-ink: #1A2B3D;
--orvex-pw-ink-soft: #5C6F7E;
--orvex-pw-muted: #8A98A6;
--orvex-pw-line: #E7ECEF;
--orvex-pw-line-soft: #F0F4F6;
--orvex-pw-surface: #F7FAFB;
--orvex-pw-radius: 14px;
--orvex-pw-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--orvex-pw-shadow-md: 0 12px 32px -16px rgba(15, 39, 64, 0.18);
--orvex-pw-cols: 3;
--orvex-pw-cols-tablet: 2;
--orvex-pw-cols-mobile: 1;
--orvex-pw-gap: 24px;
color: var(--orvex-pw-ink);
font-family: inherit;
}
.orvex-pw * { box-sizing: border-box; }
/* ===== Toolbar (search + count on the same row) ========== */
.orvex-pw-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.orvex-pw-search {
position: relative;
flex: 1 1 320px;
max-width: 420px;
}
.orvex-pw-search svg {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--orvex-pw-muted);
pointer-events: none;
}
.orvex-pw-search input {
width: 100%;
padding: 13px 18px 13px 46px;
border: 1px solid var(--orvex-pw-line);
border-radius: 999px;
font: inherit;
font-size: 14.5px;
background: #fff;
color: var(--orvex-pw-ink);
transition: border-color var(--orvex-pw-transition), box-shadow var(--orvex-pw-transition);
outline: none;
}
.orvex-pw-search input::placeholder { color: var(--orvex-pw-muted); }
.orvex-pw-search input:focus {
border-color: var(--orvex-pw-teal);
box-shadow: 0 0 0 3px rgba(31, 184, 182, 0.2);
}
.orvex-pw-count {
font-size: 14px;
color: var(--orvex-pw-ink-soft);
margin: 0;
white-space: nowrap;
}
/* ===== Category filter chips ============================= */
.orvex-pw-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--orvex-pw-line);
}
.orvex-pw-chip {
padding: 9px 18px;
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: 999px;
color: var(--orvex-pw-ink);
font: inherit;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: var(--orvex-pw-transition);
white-space: nowrap;
line-height: 1.2;
}
.orvex-pw-chip:hover {
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-pw-chip.active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
/* ===== Grid ============================================== */
.orvex-pw-grid {
display: grid;
grid-template-columns: repeat(var(--orvex-pw-cols), minmax(0, 1fr));
gap: var(--orvex-pw-gap, 24px);
}
@media (max-width: 1024px) {
.orvex-pw-grid { grid-template-columns: repeat(var(--orvex-pw-cols-tablet), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.orvex-pw-grid { grid-template-columns: repeat(var(--orvex-pw-cols-mobile), minmax(0, 1fr)); }
}
/* ===== Card ============================================== */
.orvex-pw-card {
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: var(--orvex-pw-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--orvex-pw-transition), box-shadow var(--orvex-pw-transition), border-color var(--orvex-pw-transition);
height: 100%;
}
.orvex-pw-card:hover {
transform: translateY(-4px);
box-shadow: var(--orvex-pw-shadow-md);
border-color: var(--orvex-pw-teal);
}
/* --- Media area: product image fills edge-to-edge -------- */
.orvex-pw-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: transparent;
}
.orvex-pw-card-media .orvex-pw-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.orvex-pw-card:hover .orvex-pw-card-img { transform: scale(1.04); }
/* --- Category badge: dark navy rounded-square pill,
overlaid on top-left of the image ------------------- */
.orvex-pw-card-category {
position: absolute;
top: 14px;
left: 14px;
background: var(--orvex-pw-navy);
color: #fff;
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
z-index: 2;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
max-width: calc(100% - 28px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Sale badge (top-right) ---------------------------- */
.orvex-pw-card-sale {
position: absolute;
top: 14px;
right: 14px;
background: var(--orvex-pw-teal);
color: #fff;
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
z-index: 2;
line-height: 1.2;
}
/* --- Card body ---------------------------------------- */
.orvex-pw-card-body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Purity line — plain uppercase label, no icon */
.orvex-pw-card-purity {
margin: 0 0 10px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--orvex-pw-ink-soft);
text-transform: uppercase;
line-height: 1.4;
}
/* Title row: product name + inline dose pill */
.orvex-pw-card-title {
margin: 0 0 14px;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: var(--orvex-pw-navy);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.orvex-pw-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--orvex-pw-transition);
}
.orvex-pw-card-title a:hover { color: var(--orvex-pw-teal-deep); }
/* Dose pill — inline next to title */
.orvex-pw-card-dose {
display: inline-flex;
align-items: center;
background: var(--orvex-pw-teal-glow);
color: var(--orvex-pw-teal-deep);
padding: 4px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
white-space: nowrap;
}
/* Short description / excerpt */
.orvex-pw-card-excerpt {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.55;
color: var(--orvex-pw-ink-soft);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Variation size pills on the card (variable products only) */
.orvex-pw-card-variations {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 12px;
}
.orvex-pw-card-size {
padding: 5px 12px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--orvex-pw-ink);
cursor: pointer;
transition: var(--orvex-pw-transition);
white-space: nowrap;
line-height: 1.2;
letter-spacing: 0.01em;
}
.orvex-pw-card-size:hover {
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-pw-card-size.is-active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
/* Static pill: simple-product single mg pill, looks active but not clickable */
.orvex-pw-card-size.is-static {
cursor: default;
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
pointer-events: none;
display: inline-flex;
align-items: center;
}
/* Hide the existing dose chip when the card has size pills
(the active pill IS the dose indicator). */
.orvex-pw-card--variable .orvex-pw-card-dose { display: none; }
/* Smooth swap for price + image when a size is clicked */
.orvex-pw-card-price[data-orvex-card-price] { transition: opacity 0.15s ease; }
.orvex-pw-card-price.is-swapping { opacity: 0.35; }
.orvex-pw-card-img.is-swapping { opacity: 0; }
.orvex-pw-card-img { transition: opacity 0.18s ease; }
/* Footer with subtle divider above */
.orvex-pw-card-footer {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--orvex-pw-line-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.orvex-pw-card-price {
font-size: 22px;
font-weight: 700;
color: var(--orvex-pw-navy);
line-height: 1;
}
.orvex-pw-card-price .woocommerce-Price-currencySymbol {
font-size: 14px;
font-weight: 500;
color: var(--orvex-pw-muted);
margin-right: 2px;
vertical-align: 2px;
}
.orvex-pw-card-price del {
font-size: 14px;
font-weight: 500;
color: var(--orvex-pw-muted);
margin-right: 8px;
}
.orvex-pw-card-price ins {
text-decoration: none;
color: var(--orvex-pw-navy);
}
/* Circular add-to-cart button */
.orvex-pw-cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--orvex-pw-navy);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: var(--orvex-pw-transition);
text-decoration: none;
padding: 0;
}
.orvex-pw-cart-btn:hover {
background: var(--orvex-pw-teal);
transform: scale(1.05);
}
.orvex-pw-cart-btn:disabled,
.orvex-pw-cart-btn.is-loading {
opacity: 0.7;
cursor: wait;
}
.orvex-pw-cart-btn.is-added {
background: var(--orvex-pw-teal-deep);
}
.orvex-pw-cart-btn.is-loading svg { animation: orvex-pw-spin 0.8s linear infinite; }
@keyframes orvex-pw-spin {
to { transform: rotate(360deg); }
}
/* ===== Empty / loading ==================================== */
.orvex-pw-empty {
grid-column: 1 / -1;
padding: 56px 24px;
text-align: center;
color: var(--orvex-pw-ink-soft);
font-size: 15px;
background: var(--orvex-pw-surface);
border-radius: var(--orvex-pw-radius);
}
.orvex-pw.is-loading .orvex-pw-grid,
.orvex-pw.is-loading .orvex-pw-swiper-wrap {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* ===== Pagination ========================================= */
.orvex-pw-pagination-wrap { margin-top: 32px; }
.orvex-pw-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.orvex-pw-page-btn {
min-width: 40px;
height: 40px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: 8px;
color: var(--orvex-pw-ink);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--orvex-pw-transition);
}
.orvex-pw-page-btn:hover:not(:disabled):not(.active) {
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-pw-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.orvex-pw-page-btn.active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
.orvex-pw-page-ellipsis {
display: inline-flex;
align-items: center;
color: var(--orvex-pw-muted);
padding: 0 4px;
}
/* ===== Carousel =========================================== */
.orvex-pw-swiper-wrap {
position: relative;
padding: 4px 0;
}
.orvex-pw-swiper {
overflow: hidden;
padding: 4px 4px;
}
.orvex-pw-swiper .swiper-slide {
height: auto;
display: flex;
}
.orvex-pw-swiper .swiper-slide > .orvex-pw-card { width: 100%; }
.orvex-pw-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--orvex-pw-line);
color: var(--orvex-pw-navy);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
box-shadow: 0 6px 18px -10px rgba(15, 39, 64, 0.3);
transition: var(--orvex-pw-transition);
padding: 0;
}
.orvex-pw-arrow:hover {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
.orvex-pw-arrow-prev { left: -22px; }
.orvex-pw-arrow-next { right: -22px; }
.orvex-pw-arrow.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 768px) {
.orvex-pw-arrow-prev { left: 4px; }
.orvex-pw-arrow-next { right: 4px; }
}
.orvex-pw-swiper .swiper-pagination {
position: static;
margin-top: 20px;
display: flex;
justify-content: center;
}
.orvex-pw-swiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: var(--orvex-pw-line);
opacity: 1;
margin: 0 4px;
transition: var(--orvex-pw-transition);
}
.orvex-pw-swiper .swiper-pagination-bullet-active {
background: var(--orvex-pw-teal);
width: 24px;
border-radius: 4px;
}
/* ===== Toast ============================================== */
.orvex-pw-toast-stack {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.orvex-pw-toast {
background: #fff;
color: var(--orvex-pw-ink);
padding: 14px 20px;
border-radius: 10px;
box-shadow: 0 12px 32px -8px rgba(15, 39, 64, 0.2);
border-left: 4px solid var(--orvex-pw-teal);
font-size: 14px;
font-weight: 500;
min-width: 240px;
max-width: 380px;
pointer-events: auto;
animation: orvex-pw-toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.orvex-pw-toast.error { border-left-color: #d04848; }
@keyframes orvex-pw-toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== Responsive tweaks ================================== */
@media (max-width: 640px) {
.orvex-pw-toolbar {
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-bottom: 18px;
}
.orvex-pw-search {
max-width: 100%;
flex: 1 1 100%;
width: 100%;
display: block;
}
.orvex-pw-search input {
font-size: 15px;
padding: 12px 16px 12px 42px;
height: auto;
line-height: 1.4;
display: block;
box-sizing: border-box;
}
.orvex-pw-search svg {
left: 14px;
width: 16px;
height: 16px;
}
.orvex-pw-count {
text-align: left;
font-size: 13px;
white-space: normal;
}
.orvex-pw-filter {
gap: 8px;
padding-bottom: 20px;
margin-bottom: 20px;
}
.orvex-pw-chip {
padding: 7px 14px;
font-size: 13px;
}
.orvex-pw-card-body { padding: 16px 16px 18px; }
.orvex-pw-card-title { font-size: 18px; }
.orvex-pw-card-price { font-size: 18px; }
}
/* =========================================================
COA Grid Widget — namespaced styles
Matches the HTML site COA card design
========================================================= */
/* Info bar — instructional banner above grid */
.orvex-coa-info-bar {
background: linear-gradient(135deg, rgba(31, 184, 182, 0.12) 0%, #E8F5FA 100%);
border-left: 4px solid var(--orvex-pw-teal);
border-radius: 10px;
padding: 20px 24px;
margin-bottom: 28px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.orvex-coa-info-bar svg {
width: 28px;
height: 28px;
color: var(--orvex-pw-teal-deep);
flex-shrink: 0;
}
.orvex-coa-info-bar p {
font-size: 14.5px;
color: var(--orvex-pw-ink);
line-height: 1.6;
margin: 0;
}
.orvex-coa-info-bar p strong { color: var(--orvex-pw-navy); }
/* COA Card */
.orvex-coa-card {
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: var(--orvex-pw-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--orvex-pw-transition),
box-shadow var(--orvex-pw-transition),
border-color var(--orvex-pw-transition);
height: 100%;
}
.orvex-coa-card:hover {
transform: translateY(-4px);
box-shadow: var(--orvex-pw-shadow-md);
border-color: var(--orvex-pw-teal);
}
/* Media area — lab-staged vial photo with teal/blue gradient bg */
.orvex-coa-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: linear-gradient(135deg, #1FB8B6 0%, #2D6BCF 100%);
text-decoration: none;
}
.orvex-coa-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.orvex-coa-card:hover .orvex-coa-card-media img { transform: scale(1.04); }
/* Fallback placeholder when no image */
.orvex-coa-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
}
.orvex-coa-card-img-placeholder svg {
width: 64px;
height: 64px;
}
/* Category badge — dark navy, top-left of image */
.orvex-coa-card-category {
position: absolute;
top: 14px;
left: 14px;
background: var(--orvex-pw-navy);
color: #fff;
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
z-index: 2;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
max-width: calc(100% - 28px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Body — centered alignment matches the HTML site */
.orvex-coa-card-body {
padding: 26px 22px 22px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 18px;
text-align: center;
}
/* Title — product name + inline dose in lighter weight (NOT a pill).
Example: "BPC-157 5mg" with "5mg" in soft ink-gray. */
.orvex-coa-card-title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--orvex-pw-navy);
letter-spacing: -0.01em;
}
.orvex-coa-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--orvex-pw-transition);
}
.orvex-coa-card-title a:hover { color: var(--orvex-pw-teal-deep); }
.orvex-coa-card-dose {
display: inline;
background: transparent;
color: var(--orvex-pw-ink-soft);
padding: 0;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
font-family: inherit;
margin-left: 4px;
}
/* Batch-number / Download button — full-width navy pill,
monospace text so batch numbers like "BPC-25-A1" read like a lab label. */
.orvex-coa-card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 15px 22px;
background: var(--orvex-pw-navy);
color: #fff;
border: none;
border-radius: 999px;
font: inherit;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: var(--orvex-pw-transition);
margin-top: auto;
}
.orvex-coa-card-btn:hover {
background: var(--orvex-pw-teal);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(31, 184, 182, 0.5);
}
.orvex-coa-card-btn:active { transform: translateY(0); }
.orvex-coa-card-btn svg {
flex-shrink: 0;
opacity: 0.9;
}
.orvex-coa-card-btn-disabled {
background: var(--orvex-pw-line);
color: var(--orvex-pw-muted);
cursor: not-allowed;
}
.orvex-coa-card-btn-disabled:hover {
background: var(--orvex-pw-line);
color: var(--orvex-pw-muted);
transform: none;
box-shadow: none;
}
/* Mobile tweak */
@media (max-width: 640px) {
.orvex-coa-card-title { font-size: 17px; }
.orvex-coa-card-dose { font-size: 15px; }
.orvex-coa-info-bar { padding: 16px 18px; }
.orvex-coa-info-bar svg { width: 22px; height: 22px; }
}
/* =========================================================
Single Product Widget — namespaced styles
Matches the HTML site single-product layout
========================================================= */
.orvex-sp {
color: var(--orvex-pw-ink);
font-family: inherit;
}
.orvex-sp * { box-sizing: border-box; }
/* Breadcrumb */
.orvex-sp__breadcrumb {
font-size: 13px;
color: var(--orvex-pw-ink-soft);
margin-bottom: 24px;
letter-spacing: 0.01em;
}
.orvex-sp__breadcrumb a {
color: var(--orvex-pw-ink-soft);
text-decoration: none;
transition: color var(--orvex-pw-transition);
}
.orvex-sp__breadcrumb a:hover { color: var(--orvex-pw-teal-deep); }
.orvex-sp__breadcrumb-sep {
margin: 0 8px;
color: var(--orvex-pw-muted);
}
/* Two-column grid */
.orvex-sp__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: flex-start;
}
@media (max-width: 1024px) {
.orvex-sp__grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ===== Media (image) ===== */
.orvex-sp__media {
border-radius: 18px;
overflow: hidden;
background: linear-gradient(180deg, #F2F8FA 0%, #E8F3F5 100%);
border: 1px solid var(--orvex-pw-line);
}
.orvex-sp__media--sticky {
position: sticky;
top: 24px;
}
@media (max-width: 1024px) {
.orvex-sp__media--sticky { position: static; }
}
.orvex-sp__media-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.orvex-sp__media--1-1 .orvex-sp__media-inner { aspect-ratio: 1 / 1; }
.orvex-sp__media--4-5 .orvex-sp__media-inner { aspect-ratio: 4 / 5; }
.orvex-sp__media--3-4 .orvex-sp__media-inner { aspect-ratio: 3 / 4; }
.orvex-sp__media--auto .orvex-sp__media-inner { aspect-ratio: auto; }
.orvex-sp__img {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.25s ease;
display: block;
padding: 24px;
}
.orvex-sp__img.is-fading { opacity: 0; }
/* ===== Details ===== */
.orvex-sp__details {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Top line: category badge · batch number */
.orvex-sp__topline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.orvex-sp__category {
background: var(--orvex-pw-navy);
color: #fff;
padding: 6px 12px;
border-radius: 6px;
line-height: 1.2;
white-space: nowrap;
}
.orvex-sp__batch-sep {
color: var(--orvex-pw-muted);
font-weight: 400;
}
.orvex-sp__batch {
color: var(--orvex-pw-ink-soft);
display: inline-flex;
align-items: center;
gap: 6px;
}
.orvex-sp__batch-no {
color: var(--orvex-pw-navy);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.06em;
transition: opacity 0.2s ease;
}
/* Title */
.orvex-sp__title {
font-family: var(--font-display, inherit);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
color: var(--orvex-pw-navy);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
/* Dose · Purity meta line */
.orvex-sp__meta {
margin: 0;
font-size: 16px;
color: var(--orvex-pw-teal-deep);
font-weight: 600;
letter-spacing: 0;
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
transition: opacity 0.2s ease;
}
.orvex-sp__meta-sep {
color: var(--orvex-pw-muted);
font-weight: 400;
}
/* Price */
.orvex-sp__price {
font-size: 32px;
font-weight: 700;
color: var(--orvex-pw-navy);
line-height: 1;
margin: 4px 0 0;
transition: opacity 0.2s ease;
}
.orvex-sp__price .woocommerce-Price-currencySymbol {
font-size: 18px;
font-weight: 500;
color: var(--orvex-pw-muted);
margin-right: 2px;
vertical-align: 4px;
}
.orvex-sp__price del {
font-size: 18px;
color: var(--orvex-pw-muted);
font-weight: 500;
margin-right: 10px;
text-decoration: line-through;
}
.orvex-sp__price ins {
text-decoration: none;
color: var(--orvex-pw-navy);
}
/* Short description */
.orvex-sp__desc {
color: var(--orvex-pw-ink-soft);
font-size: 15.5px;
line-height: 1.65;
}
.orvex-sp__desc p { margin: 0 0 12px; }
.orvex-sp__desc p:last-child { margin-bottom: 0; }
/* Variation pills */
.orvex-sp__variations {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 0;
border-top: 1px solid var(--orvex-pw-line);
border-bottom: 1px solid var(--orvex-pw-line);
}
.orvex-sp__var-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.orvex-sp__var-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--orvex-pw-ink-soft);
}
.orvex-sp__var-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.orvex-sp__var-pill {
padding: 10px 18px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
color: var(--orvex-pw-ink);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--orvex-pw-transition);
white-space: nowrap;
line-height: 1.2;
}
.orvex-sp__var-pill:hover {
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-sp__var-pill.is-active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
/* Buy row: qty + add to cart */
.orvex-sp__buy {
display: flex;
align-items: stretch;
gap: 12px;
}
.orvex-sp__qty {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
overflow: hidden;
background: #fff;
height: 56px;
}
.orvex-sp__qty-btn {
width: 44px;
height: 56px;
background: transparent;
border: 0;
font-size: 20px;
font-weight: 600;
color: var(--orvex-pw-navy);
cursor: pointer;
transition: background var(--orvex-pw-transition);
padding: 0;
}
.orvex-sp__qty-btn:hover {
background: var(--orvex-pw-surface);
}
.orvex-sp__qty-input {
width: 48px;
border: 0;
background: transparent;
font: inherit;
font-size: 16px;
font-weight: 600;
text-align: center;
color: var(--orvex-pw-navy);
-moz-appearance: textfield;
}
.orvex-sp__qty-input::-webkit-outer-spin-button,
.orvex-sp__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.orvex-sp__qty-input:focus { outline: none; }
.orvex-sp__cart-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 0 28px;
background: var(--orvex-pw-navy);
color: #fff;
border: 0;
border-radius: 999px;
font: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: var(--orvex-pw-transition);
}
.orvex-sp__cart-btn:hover {
background: var(--orvex-pw-teal);
transform: translateY(-1px);
box-shadow: 0 12px 24px -10px rgba(31, 184, 182, 0.4);
}
.orvex-sp__cart-btn:disabled,
.orvex-sp__cart-btn.is-loading {
opacity: 0.7;
cursor: wait;
transform: none;
}
.orvex-sp__cart-btn.is-loading svg { animation: orvex-pw-spin 0.8s linear infinite; }
.orvex-sp__cart-btn.is-added {
background: var(--orvex-pw-teal-deep);
}
/* Specs table */
.orvex-sp__specs {
margin-top: 8px;
border-top: 1px solid var(--orvex-pw-line);
padding-top: 24px;
}
.orvex-sp__specs-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.orvex-sp__specs-table tr {
border-bottom: 1px solid var(--orvex-pw-line-soft);
}
.orvex-sp__specs-table tr:last-child {
border-bottom: 0;
}
.orvex-sp__specs-table th,
.orvex-sp__specs-table td {
padding: 12px 0;
text-align: left;
vertical-align: top;
}
.orvex-sp__specs-table th {
width: 45%;
font-weight: 600;
color: var(--orvex-pw-ink-soft);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.orvex-sp__specs-table td {
color: var(--orvex-pw-ink);
font-weight: 500;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13.5px;
}
/* Editor placeholder */
.orvex-sp--placeholder {
padding: 40px;
background: var(--orvex-pw-surface);
border: 1px dashed var(--orvex-pw-line);
border-radius: 12px;
text-align: center;
color: var(--orvex-pw-ink-soft);
}
/* Mobile tweaks */
@media (max-width: 640px) {
.orvex-sp__title { font-size: 26px; }
.orvex-sp__price { font-size: 26px; }
.orvex-sp__buy { flex-direction: row; flex-wrap: wrap; }
.orvex-sp__cart-btn { flex: 1 1 100%; }
.orvex-sp__specs-table th,
.orvex-sp__specs-table td {
font-size: 12.5px;
padding: 10px 0;
}
.orvex-sp__topline { gap: 8px; }
.orvex-sp__batch-sep { display: none; }
}
/* =========================================================
Shop Layout — sidebar + main area
========================================================= */
.orvex-pw--shop-layout .orvex-pw-shop-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 36px;
align-items: start;
}
@media (max-width: 1024px) {
.orvex-pw--shop-layout .orvex-pw-shop-grid {
grid-template-columns: 240px 1fr;
gap: 24px;
}
}
/* ----- Sidebar ----- */
.orvex-pw-sidebar {
position: sticky;
top: 100px;
}
.orvex-pw-sidebar-toggle {
display: none;
width: 100%;
padding: 12px 16px;
background: var(--orvex-pw-navy);
color: #fff;
border: 0;
border-radius: 10px;
font: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
.orvex-pw-sidebar-toggle svg { width: 18px; height: 18px; }
.orvex-pw-sidebar-inner {
display: flex;
flex-direction: column;
gap: 22px;
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: 14px;
padding: 22px;
}
.orvex-pw-sidebar-section { display: block; }
.orvex-pw-sidebar-title {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--orvex-pw-ink-soft);
}
/* Sidebar search (matches the original search field design) */
.orvex-pw-sidebar-search {
position: relative;
}
.orvex-pw-sidebar-search svg {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--orvex-pw-muted);
pointer-events: none;
}
.orvex-pw-sidebar-search input {
width: 100%;
padding: 10px 14px 10px 38px;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
font: inherit;
font-size: 13.5px;
color: var(--orvex-pw-ink);
background: #fff;
outline: none;
transition: var(--orvex-pw-transition);
}
.orvex-pw-sidebar-search input:focus {
border-color: var(--orvex-pw-teal);
box-shadow: 0 0 0 3px rgba(31, 184, 182, 0.12);
}
/* Sidebar list (categories / stock) */
.orvex-pw-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.orvex-pw-sidebar-list li { margin: 0; padding: 0; }
.orvex-pw-sidebar-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 8px;
font: inherit;
font-size: 14px;
color: var(--orvex-pw-ink);
cursor: pointer;
transition: var(--orvex-pw-transition);
text-align: left;
}
.orvex-pw-sidebar-item:hover {
background: var(--orvex-pw-surface);
color: var(--orvex-pw-teal-deep);
}
.orvex-pw-sidebar-item.is-active {
background: var(--orvex-pw-teal-glow);
color: var(--orvex-pw-teal-deep);
font-weight: 700;
}
.orvex-pw-sidebar-count {
font-size: 11.5px;
color: var(--orvex-pw-muted);
background: var(--orvex-pw-line-soft);
padding: 2px 8px;
border-radius: 999px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.orvex-pw-sidebar-item.is-active .orvex-pw-sidebar-count {
background: #fff;
color: var(--orvex-pw-teal-deep);
}
/* Price slider — dual-range with overlay track */
.orvex-pw-price-filter { display: block; }
.orvex-pw-price-track {
position: relative;
height: 28px;
margin-bottom: 12px;
}
.orvex-pw-price-track::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: var(--orvex-pw-line);
border-radius: 2px;
transform: translateY(-50%);
}
.orvex-pw-price-fill {
position: absolute;
top: 50%;
height: 4px;
background: var(--orvex-pw-teal);
border-radius: 2px;
transform: translateY(-50%);
left: 0;
right: 0;
}
.orvex-pw-price-range {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 28px;
margin: 0;
background: transparent;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.orvex-pw-price-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--orvex-pw-navy);
cursor: pointer;
pointer-events: auto;
margin-top: 0;
box-shadow: 0 2px 6px rgba(15, 39, 64, 0.2);
}
.orvex-pw-price-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--orvex-pw-navy);
cursor: pointer;
pointer-events: auto;
box-shadow: 0 2px 6px rgba(15, 39, 64, 0.2);
}
.orvex-pw-price-range::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.orvex-pw-price-range::-moz-range-track { background: transparent; height: 28px; }
.orvex-pw-price-values {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 13px;
color: var(--orvex-pw-ink);
font-weight: 600;
margin-bottom: 12px;
}
.orvex-pw-price-values span:nth-child(2) { color: var(--orvex-pw-muted); }
.orvex-pw-price-apply {
width: 100%;
padding: 9px 16px;
background: var(--orvex-pw-navy);
color: #fff;
border: 0;
border-radius: 999px;
font: inherit;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: var(--orvex-pw-transition);
}
.orvex-pw-price-apply:hover { background: var(--orvex-pw-teal); }
/* ----- Main area ----- */
.orvex-pw-shop-main { min-width: 0; }
.orvex-pw-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.orvex-pw--shop-layout .orvex-pw-count {
margin: 0;
font-size: 13.5px;
color: var(--orvex-pw-ink-soft);
font-weight: 500;
}
.orvex-pw-toolbar-controls {
display: flex;
align-items: center;
gap: 12px;
}
/* Grid / List view toggle */
.orvex-pw-view-toggle {
display: inline-flex;
background: var(--orvex-pw-surface);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.orvex-pw-view-btn {
width: 32px;
height: 32px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--orvex-pw-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--orvex-pw-transition);
padding: 0;
}
.orvex-pw-view-btn svg { width: 16px; height: 16px; }
.orvex-pw-view-btn:hover { color: var(--orvex-pw-ink); }
.orvex-pw-view-btn.is-active {
background: var(--orvex-pw-navy);
color: #fff;
}
/* Sort dropdown */
.orvex-pw-sort-select {
padding: 8px 36px 8px 14px;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
font: inherit;
font-size: 13.5px;
color: var(--orvex-pw-ink);
font-weight: 600;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
transition: var(--orvex-pw-transition);
}
.orvex-pw-sort-select:hover { border-color: var(--orvex-pw-teal); }
.orvex-pw-sort-select:focus {
border-color: var(--orvex-pw-teal);
box-shadow: 0 0 0 3px rgba(31, 184, 182, 0.12);
}
/* Search bar inside shop main (above grid) */
.orvex-pw-search--shop { margin-bottom: 16px; }
/* List view — re-arrange the cards */
.orvex-pw--list .orvex-pw-grid {
grid-template-columns: 1fr !important;
}
.orvex-pw--list .orvex-pw-card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
align-items: stretch;
}
.orvex-pw--list .orvex-pw-card-media {
aspect-ratio: 1 / 1;
height: 100%;
border-radius: 14px 0 0 14px;
}
.orvex-pw--list .orvex-pw-card-body {
padding: 22px 24px;
}
.orvex-pw--list .orvex-pw-card-excerpt {
-webkit-line-clamp: 3;
}
/* ----- Mobile: sidebar collapses ----- */
@media (max-width: 900px) {
.orvex-pw--shop-layout .orvex-pw-shop-grid {
grid-template-columns: 1fr;
gap: 0;
}
.orvex-pw-sidebar {
position: static;
margin-bottom: 20px;
}
.orvex-pw-sidebar-toggle { display: inline-flex !important; }
.orvex-pw-sidebar-inner {
display: none !important;
padding: 18px;
}
.orvex-pw-sidebar.is-open .orvex-pw-sidebar-inner {
display: flex !important;
flex-direction: column !important;
}
.orvex-pw-shop-toolbar { gap: 10px; }
.orvex-pw-toolbar-controls { width: 100%; justify-content: space-between; }
.orvex-pw--list .orvex-pw-card {
grid-template-columns: 110px 1fr;
}
.orvex-pw--list .orvex-pw-card-body { padding: 14px 16px; }
.orvex-pw--list .orvex-pw-card-excerpt { display: none; }
}
@media (max-width: 480px) {
.orvex-pw--shop-layout .orvex-pw-count { font-size: 12.5px; }
.orvex-pw-sort-select { font-size: 12.5px; padding: 7px 32px 7px 12px; }
.orvex-pw-view-btn { width: 28px; height: 28px; }
}
/* =========================================================
Stock status badge — single product page
========================================================= */
.orvex-sp__stock {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
margin: 0 0 16px;
line-height: 1;
}
.orvex-sp__stock svg { width: 16px; height: 16px; flex-shrink: 0; }
.orvex-sp__stock--in {
background: rgba(31, 184, 182, 0.14);
color: var(--orvex-pw-teal-deep);
}
.orvex-sp__stock--in .orvex-sp__stock-dot {
background: var(--orvex-pw-teal);
box-shadow: 0 0 0 4px rgba(31, 184, 182, 0.18);
}
.orvex-sp__stock--out {
background: rgba(208, 72, 72, 0.10);
color: #B83232;
}
.orvex-sp__stock--out .orvex-sp__stock-dot {
background: #D04848;
box-shadow: 0 0 0 4px rgba(208, 72, 72, 0.18);
}
.orvex-sp__stock-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
/* =========================================================
Single Product — Gallery (with arrows + dots)
========================================================= */
.orvex-sp__gallery {
position: relative;
background: var(--orvex-pw-surface);
border-radius: 22px;
padding: 36px;
overflow: hidden;
}
.orvex-sp__gallery-stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
}
.orvex-sp__gallery-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.orvex-sp__gallery-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.orvex-sp__gallery-slide img {
max-width: 80%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 18px 35px rgba(15, 39, 64, 0.18));
}
.orvex-sp__gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
color: var(--orvex-pw-navy);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--orvex-pw-transition);
box-shadow: 0 4px 16px rgba(15, 39, 64, 0.08);
z-index: 2;
padding: 0;
}
.orvex-sp__gallery-arrow svg { width: 18px; height: 18px; }
.orvex-sp__gallery-arrow:hover {
background: var(--orvex-pw-navy);
color: #fff;
border-color: var(--orvex-pw-navy);
}
.orvex-sp__gallery-arrow--prev { left: 16px; }
.orvex-sp__gallery-arrow--next { right: 16px; }
.orvex-sp__gallery-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 22px;
}
.orvex-sp__gallery-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--orvex-pw-line);
border: 0;
padding: 0;
cursor: pointer;
transition: var(--orvex-pw-transition);
}
.orvex-sp__gallery-dot:hover { background: var(--orvex-pw-muted); }
.orvex-sp__gallery-dot.is-active {
background: var(--orvex-pw-navy);
width: 24px;
border-radius: 4px;
}
/* =========================================================
Single Product — Info icons (Free Shipping / Lab Tested etc)
========================================================= */
.orvex-sp__info-icons {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 28px;
padding: 22px 24px;
background: var(--orvex-pw-surface);
border-radius: 16px;
border: 1px solid var(--orvex-pw-line);
}
.orvex-sp__info-item {
display: flex;
align-items: center;
gap: 16px;
}
.orvex-sp__info-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--orvex-pw-teal-glow);
color: var(--orvex-pw-teal-deep);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.orvex-sp__info-icon i,
.orvex-sp__info-icon svg { width: 20px; height: 20px; font-size: 18px; }
.orvex-sp__info-text { display: flex; flex-direction: column; gap: 2px; }
.orvex-sp__info-text strong {
font-size: 14px;
font-weight: 700;
color: var(--orvex-pw-navy);
letter-spacing: -0.005em;
}
.orvex-sp__info-text span {
font-size: 12.5px;
color: var(--orvex-pw-ink-soft);
}
/* =========================================================
Single Product — Long description (full-width below grid)
========================================================= */
.orvex-sp__longdesc {
margin-top: 64px;
padding-top: 48px;
border-top: 1px solid var(--orvex-pw-line);
}
.orvex-sp__longdesc-title {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--orvex-pw-navy);
margin: 0 0 24px;
}
.orvex-sp__longdesc-body {
font-size: 1rem;
line-height: 1.75;
color: var(--orvex-pw-ink-soft);
max-width: 820px;
}
.orvex-sp__longdesc-body p { margin: 0 0 16px; }
.orvex-sp__longdesc-body p:last-child { margin-bottom: 0; }
.orvex-sp__longdesc-body h2,
.orvex-sp__longdesc-body h3 {
color: var(--orvex-pw-navy);
margin-top: 28px;
margin-bottom: 12px;
}
.orvex-sp__longdesc-body ul,
.orvex-sp__longdesc-body ol { padding-left: 22px; margin: 0 0 16px; }
.orvex-sp__longdesc-body li { margin-bottom: 6px; }
@media (max-width: 768px) {
.orvex-sp__gallery { padding: 24px; }
.orvex-sp__gallery-arrow { width: 38px; height: 38px; }
.orvex-sp__gallery-arrow--prev { left: 8px; }
.orvex-sp__gallery-arrow--next { right: 8px; }
.orvex-sp__info-icons { padding: 16px 18px; gap: 10px; }
.orvex-sp__info-icon { width: 38px; height: 38px; }
.orvex-sp__longdesc { margin-top: 40px; padding-top: 32px; }
}
/* =========================================================
Single Product — NEW LAYOUT (matches client mockup)
========================================================= */
/* Override: tighter title row */
.orvex-sp__title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin: 0 0 16px;
flex-wrap: wrap;
}
.orvex-sp__title-row .orvex-sp__title {
font-size: clamp(1.8rem, 3.3vw, 2.6rem);
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
/* Category badge — small uppercase text above title */
.orvex-sp__category-badge {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--orvex-pw-teal-deep);
margin: 0 0 8px;
}
/* Trust pills (Third-Party Tested / COA Available) */
.orvex-sp__trust-pills {
display: flex;
gap: 8px;
margin: 0 0 22px;
flex-wrap: wrap;
}
.orvex-sp__trust-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: var(--orvex-pw-ink);
}
.orvex-sp__trust-pill svg,
.orvex-sp__trust-pill i {
width: 14px;
height: 14px;
font-size: 13px;
color: var(--orvex-pw-teal-deep);
}
.orvex-sp__trust-pill:nth-child(2) { background: #FFF5E6; border-color: #FFD89C; color: #8A5A00; }
.orvex-sp__trust-pill:nth-child(2) svg,
.orvex-sp__trust-pill:nth-child(2) i { color: #D08712; }
.orvex-sp__trust-pill:nth-child(3) { background: #E8F8EE; border-color: #B6E3C7; color: #1FA363; }
.orvex-sp__trust-pill:nth-child(3) svg,
.orvex-sp__trust-pill:nth-child(3) i { color: #1FA363; }
/* Quantity + Price row */
.orvex-sp__qty-price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin: 0 0 22px;
padding: 18px 0;
border-top: 1px solid var(--orvex-pw-line);
border-bottom: 1px solid var(--orvex-pw-line);
flex-wrap: wrap;
}
.orvex-sp__qty-block,
.orvex-sp__price-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.orvex-sp__price-block { align-items: flex-end; }
.orvex-sp__field-label {
font-size: 13px;
font-weight: 600;
color: var(--orvex-pw-ink-soft);
margin: 0;
}
.orvex-sp__qty-price-row .orvex-sp__price {
margin: 0;
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 800;
color: var(--orvex-pw-teal-deep);
font-family: 'Manrope', 'Inter', sans-serif;
line-height: 1;
letter-spacing: -0.03em;
}
/* Size pills with inline prices */
.orvex-sp__size-section { margin: 0 0 22px; }
.orvex-sp__size-section .orvex-sp__field-label {
margin-bottom: 10px;
display: block;
}
.orvex-sp__var-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.orvex-sp__var-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 12px;
font: inherit;
font-size: 13.5px;
color: var(--orvex-pw-ink);
cursor: pointer;
transition: var(--orvex-pw-transition);
font-weight: 600;
}
.orvex-sp__var-pill:hover {
border-color: var(--orvex-pw-teal);
}
.orvex-sp__var-pill.is-active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
.orvex-sp__var-pill.is-active .orvex-sp__var-price { color: #fff; }
.orvex-sp__var-label { font-weight: 700; }
.orvex-sp__var-price {
font-weight: 600;
color: var(--orvex-pw-ink-soft);
font-size: 13px;
}
.orvex-sp__var-pill.is-out {
background: #FFF5F5;
color: #C04444;
cursor: not-allowed;
border-color: #FFD8D8;
}
.orvex-sp__var-pill.is-out .orvex-sp__var-label,
.orvex-sp__var-pill.is-out .orvex-sp__var-price { text-decoration: line-through; opacity: 0.7; }
.orvex-sp__var-oos {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: #C04444;
text-transform: uppercase;
text-decoration: none;
margin-left: 4px;
}
/* Quick Quantity Selection bundles */
.orvex-sp__bundles-section { margin: 0 0 22px; }
.orvex-sp__bundles-section .orvex-sp__field-label {
margin-bottom: 10px;
display: block;
}
.orvex-sp__bundles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.orvex-sp__bundle {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 22px 12px 14px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 14px;
font: inherit;
cursor: pointer;
transition: var(--orvex-pw-transition);
text-align: center;
}
.orvex-sp__bundle:hover {
border-color: var(--orvex-pw-teal);
transform: translateY(-2px);
}
.orvex-sp__bundle.is-selected {
background: var(--orvex-pw-teal-glow);
border-color: var(--orvex-pw-teal);
box-shadow: 0 4px 14px rgba(31, 184, 182, 0.18);
}
.orvex-sp__bundle-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
padding: 3px 10px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
}
.orvex-sp__bundle-badge--blue { background: #1E63E0; }
.orvex-sp__bundle-badge--green { background: #1FA363; }
.orvex-sp__bundle-badge--orange { background: #E08612; }
.orvex-sp__bundle-vials {
display: inline-flex;
gap: 2px;
color: var(--orvex-pw-navy);
margin-bottom: 4px;
}
.orvex-sp__bundle-vials svg { width: 11px; height: 22px; }
.orvex-sp__bundle-label {
font-size: 13px;
font-weight: 700;
color: var(--orvex-pw-ink);
}
.orvex-sp__bundle-discount {
font-size: 11px;
font-weight: 600;
color: var(--orvex-pw-teal-deep);
letter-spacing: 0.01em;
}
/* COA + Cart actions row */
.orvex-sp__actions-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
margin: 0 0 14px;
}
.orvex-sp__coa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 22px;
height: 52px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 12px;
font: inherit;
font-size: 14px;
font-weight: 700;
color: var(--orvex-pw-navy);
text-decoration: none;
transition: var(--orvex-pw-transition);
}
.orvex-sp__coa-btn:hover {
background: var(--orvex-pw-teal-glow);
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-sp__coa-btn svg { width: 18px; height: 18px; }
.orvex-sp__actions-row .orvex-sp__cart-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
padding: 0 30px;
background: var(--orvex-pw-navy);
color: #fff;
border: 0;
border-radius: 12px;
font: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: var(--orvex-pw-transition);
}
.orvex-sp__actions-row .orvex-sp__cart-btn:hover {
background: var(--orvex-pw-teal);
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(31, 184, 182, 0.5);
}
/* Stock under cart row */
.orvex-sp__stock {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
font-size: 13.5px;
font-weight: 600;
margin: 0 0 18px;
line-height: 1.4;
}
.orvex-sp__stock-check {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.orvex-sp__stock--in {
color: #1FA363;
background: transparent;
}
.orvex-sp__stock--out {
color: #C04444;
}
/* hide the legacy dot in the new layout */
.orvex-sp__stock-dot { display: none; }
/* Info icons row — centered for this new layout */
.orvex-sp__info-icons--centered {
display: flex;
justify-content: center;
gap: 18px;
background: transparent;
border: 0;
padding: 14px 0 4px;
flex-wrap: wrap;
}
.orvex-sp__info-icons--centered .orvex-sp__info-item {
flex-direction: row;
align-items: center;
gap: 6px;
}
.orvex-sp__info-icons--centered .orvex-sp__info-item i,
.orvex-sp__info-icons--centered .orvex-sp__info-item svg {
width: 14px;
height: 14px;
font-size: 13px;
color: var(--orvex-pw-muted);
}
.orvex-sp__info-icons--centered .orvex-sp__info-item span {
font-size: 12px;
font-weight: 600;
color: var(--orvex-pw-ink-soft);
letter-spacing: 0.01em;
}
/* =========================================================
COA VAULT (under photo, full-width)
========================================================= */
.orvex-sp__coa-vault {
margin-top: 56px;
padding: 30px 32px;
background: var(--orvex-pw-surface);
border-radius: 18px;
border: 1px solid var(--orvex-pw-line);
}
.orvex-sp__coa-vault-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.orvex-sp__coa-vault-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--orvex-pw-navy);
flex-shrink: 0;
}
.orvex-sp__coa-vault-icon svg { width: 22px; height: 22px; }
.orvex-sp__coa-vault-text h2 {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--orvex-pw-navy);
margin: 0 0 2px;
letter-spacing: -0.02em;
}
.orvex-sp__coa-vault-text p {
margin: 0;
font-size: 13.5px;
color: var(--orvex-pw-ink-soft);
}
.orvex-sp__coa-vault-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.orvex-sp__coa-card {
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.orvex-sp__coa-card-purity {
font-size: 28px;
font-weight: 800;
font-family: 'Manrope', 'Inter', sans-serif;
color: #1FA363;
line-height: 1;
}
.orvex-sp__coa-card-purity span {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--orvex-pw-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
.orvex-sp__coa-card-meta {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
padding-top: 12px;
border-top: 1px solid var(--orvex-pw-line-soft);
}
.orvex-sp__coa-card-meta > div {
display: flex;
justify-content: space-between;
gap: 8px;
}
.orvex-sp__coa-card-meta span { color: var(--orvex-pw-muted); }
.orvex-sp__coa-card-meta strong {
color: var(--orvex-pw-navy);
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
}
.orvex-sp__coa-card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: var(--orvex-pw-navy);
color: #fff;
border-radius: 10px;
font: inherit;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: var(--orvex-pw-transition);
margin-top: auto;
}
.orvex-sp__coa-card-btn:hover { background: var(--orvex-pw-teal); }
.orvex-sp__coa-card-btn svg { width: 14px; height: 14px; }
/* Mobile responsive for new single product layout */
@media (max-width: 768px) {
.orvex-sp__title-row { gap: 12px; }
.orvex-sp__qty-price-row { gap: 16px; padding: 14px 0; }
.orvex-sp__bundles { grid-template-columns: 1fr; gap: 8px; }
.orvex-sp__actions-row { grid-template-columns: 1fr; }
.orvex-sp__coa-btn { width: 100%; }
.orvex-sp__coa-vault { padding: 22px 18px; }
.orvex-sp__info-icons--centered { gap: 12px; }
.orvex-sp__info-icons--centered .orvex-sp__info-item span { font-size: 11px; }
}
@media (max-width: 480px) {
.orvex-sp__trust-pill { font-size: 11.5px; padding: 5px 10px; }
.orvex-sp__var-pill { padding: 8px 12px; font-size: 12.5px; }
}
/* =========================================================
Product Card — fix image size + columns control
========================================================= */
/* Ensure image fills the card media tile properly */
.orvex-pw-card-media {
aspect-ratio: 1 / 1;
background: var(--orvex-pw-bg-tinted, var(--orvex-pw-surface));
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
overflow: hidden;
position: relative;
border-radius: 14px 14px 0 0;
}
.orvex-pw-card-img {
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* List view: image proportions match grid (1:1 with same padding) */
.orvex-pw--list .orvex-pw-card {
grid-template-columns: 320px 1fr;
}
.orvex-pw--list .orvex-pw-card-media {
aspect-ratio: 1 / 1;
border-radius: 14px 0 0 14px;
height: auto;
min-height: 0;
padding: 14px;
}
.orvex-pw--list .orvex-pw-card-img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
@media (max-width: 768px) {
.orvex-pw--list .orvex-pw-card {
grid-template-columns: 140px 1fr;
}
.orvex-pw--list .orvex-pw-card-media {
min-height: 140px;
}
}
/* =========================================================
Frontend Columns Toggle (3 / 5 / 8)
========================================================= */
.orvex-pw-cols-toggle {
display: inline-flex;
background: var(--orvex-pw-surface);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.orvex-pw-cols-btn {
min-width: 34px;
height: 32px;
padding: 0 10px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--orvex-pw-muted);
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--orvex-pw-transition);
}
.orvex-pw-cols-btn:hover { color: var(--orvex-pw-ink); }
.orvex-pw-cols-btn.is-active {
background: var(--orvex-pw-navy);
color: #fff;
}
/* =========================================================
Bundles — REAL PRODUCT IMAGES (fix client complaint)
========================================================= */
/* Reset / override the old vial-SVG styles */
.orvex-sp__bundles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.orvex-sp__bundle {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 24px 14px 16px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 16px;
font: inherit;
cursor: pointer;
transition: var(--orvex-pw-transition);
text-align: center;
min-height: 180px;
}
.orvex-sp__bundle:hover {
border-color: var(--orvex-pw-teal);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 39, 64, 0.08);
}
.orvex-sp__bundle.is-selected {
background: linear-gradient(180deg, #F4FCFC 0%, #FFFFFF 100%);
border-color: var(--orvex-pw-teal);
border-width: 2px;
box-shadow: 0 8px 22px rgba(31, 184, 182, 0.20);
}
.orvex-sp__bundle.is-selected::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
background: var(--orvex-pw-teal);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
}
.orvex-sp__bundle-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
box-shadow: 0 3px 8px rgba(15, 39, 64, 0.18);
}
.orvex-sp__bundle-badge--blue { background: #1E63E0; }
.orvex-sp__bundle-badge--green { background: #1FA363; }
.orvex-sp__bundle-badge--orange { background: #E08612; }
/* The vials row: each child = small product image */
.orvex-sp__bundle-image {
display: flex;
gap: 3px;
align-items: flex-end;
justify-content: center;
height: 72px;
margin-bottom: 6px;
margin-top: 8px;
}
.orvex-sp__bundle-image img {
width: auto;
height: 100%;
max-width: 22px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(15, 39, 64, 0.18));
}
/* For single-vial bundles, allow a larger image */
.orvex-sp__bundle[data-orvex-bundle-qty="1"] .orvex-sp__bundle-image img {
max-width: 40px;
}
.orvex-sp__bundle[data-orvex-bundle-qty="2"] .orvex-sp__bundle-image img {
max-width: 32px;
}
.orvex-sp__bundle-label {
font-size: 14px;
font-weight: 700;
color: var(--orvex-pw-ink);
line-height: 1.2;
}
.orvex-sp__bundle-discount {
font-size: 11.5px;
font-weight: 600;
color: var(--orvex-pw-teal-deep);
letter-spacing: 0.01em;
margin-top: -2px;
}
/* When selected, make discount text more prominent */
.orvex-sp__bundle.is-selected .orvex-sp__bundle-discount {
color: #1FA363;
font-weight: 700;
}
/* =========================================================
COA VAULT — Redesigned cards (client complaint fix)
========================================================= */
.orvex-sp__coa-vault {
margin-top: 56px;
padding: 30px 32px;
background: linear-gradient(135deg, #F0F8F8 0%, #FAFCFC 100%);
border-radius: 20px;
border: 1px solid var(--orvex-pw-line);
}
.orvex-sp__coa-vault-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.orvex-sp__coa-card {
position: relative;
background: #fff;
border: 1px solid var(--orvex-pw-line);
border-radius: 16px;
padding: 22px 20px 18px;
display: flex;
flex-direction: column;
gap: 16px;
transition: var(--orvex-pw-transition);
overflow: hidden;
}
.orvex-sp__coa-card::before {
content: 'LATEST';
position: absolute;
top: 14px;
left: 16px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
color: #fff;
background: var(--orvex-pw-navy);
padding: 3px 10px;
border-radius: 999px;
}
.orvex-sp__coa-card:hover {
border-color: var(--orvex-pw-teal);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15, 39, 64, 0.08);
}
.orvex-sp__coa-card-purity {
font-size: 36px;
font-weight: 800;
font-family: 'Manrope', 'Inter', sans-serif;
color: #1FA363;
line-height: 1;
text-align: center;
margin-top: 24px;
letter-spacing: -0.02em;
}
.orvex-sp__coa-card-purity span {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--orvex-pw-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 6px;
font-family: 'Inter', sans-serif;
}
.orvex-sp__coa-card-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
padding-top: 14px;
border-top: 1px solid var(--orvex-pw-line-soft);
}
.orvex-sp__coa-card-meta > div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.orvex-sp__coa-card-meta > div span {
color: var(--orvex-pw-muted);
font-weight: 500;
font-size: 12.5px;
}
.orvex-sp__coa-card-meta > div strong {
color: var(--orvex-pw-navy);
font-weight: 700;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 12.5px;
letter-spacing: 0.01em;
}
.orvex-sp__coa-card-btn {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
background: var(--orvex-pw-navy);
color: #fff !important;
border-radius: 10px;
font: inherit;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition: var(--orvex-pw-transition);
margin-top: auto;
border: 0;
cursor: pointer;
visibility: visible !important;
opacity: 1 !important;
}
.orvex-sp__coa-card-btn:hover {
background: var(--orvex-pw-teal);
color: #fff !important;
transform: translateY(-1px);
}
.orvex-sp__coa-card-btn svg {
width: 15px;
height: 15px;
stroke: currentColor;
}
/* =========================================================
Right column — reduce spacing (client complaint fix)
========================================================= */
.orvex-sp__details > * { margin-top: 0; }
.orvex-sp__category-badge { margin: 0 0 6px; font-size: 11px; }
.orvex-sp__title-row { margin: 0 0 12px; }
.orvex-sp__title-row .orvex-sp__title { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; }
.orvex-sp__trust-pills { margin: 0 0 16px; gap: 6px; }
.orvex-sp__trust-pill { padding: 5px 11px; font-size: 12px; }
.orvex-sp__qty-price-row { margin: 0 0 16px; padding: 14px 0; gap: 18px; }
.orvex-sp__qty-price-row .orvex-sp__price { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.orvex-sp__size-section { margin: 0 0 16px; }
.orvex-sp__size-section .orvex-sp__field-label { margin-bottom: 8px; font-size: 12.5px; }
.orvex-sp__var-pill { padding: 9px 14px; font-size: 13px; }
.orvex-sp__bundles-section { margin: 0 0 16px; }
.orvex-sp__bundles-section .orvex-sp__field-label { margin-bottom: 8px; font-size: 12.5px; }
.orvex-sp__actions-row { margin: 0 0 10px; }
.orvex-sp__stock { margin: 0 0 14px; font-size: 13px; }
.orvex-sp__stock svg { width: 16px; height: 16px; }
.orvex-sp__info-icons--centered { padding: 10px 0 0; gap: 16px; }
.orvex-sp__field-label { font-size: 12.5px; }
/* Tighter qty stepper */
.orvex-sp__qty { height: 44px; }
.orvex-sp__qty-btn { width: 38px; height: 44px; font-size: 16px; }
.orvex-sp__qty-input { width: 48px; height: 44px; font-size: 15px; }
/* Tighter buttons */
.orvex-sp__coa-btn, .orvex-sp__actions-row .orvex-sp__cart-btn {
height: 48px;
font-size: 14px;
}
.orvex-sp__coa-btn { padding: 0 20px; }
.orvex-sp__actions-row .orvex-sp__cart-btn { padding: 0 24px; }
/* Mobile: bundle stacks 1 column */
@media (max-width: 640px) {
.orvex-sp__bundles { grid-template-columns: 1fr 1fr; gap: 8px; }
.orvex-sp__bundle { min-height: 150px; padding: 22px 10px 14px; }
.orvex-sp__bundle-image img { max-width: 18px; }
.orvex-sp__coa-vault { padding: 22px 16px; }
.orvex-sp__coa-vault-grid { grid-template-columns: 1fr; }
}
/* =========================================================
Bundles — REF IMAGE LAYOUT (thin cards, inline)
Override prior bundle styles
========================================================= */
.orvex-sp__bundles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.orvex-sp__bundle {
position: relative;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 14px 12px !important;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 12px;
font: inherit;
cursor: pointer;
transition: var(--orvex-pw-transition);
text-align: left !important;
min-height: 0 !important;
}
.orvex-sp__bundle:hover {
border-color: var(--orvex-pw-teal);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 39, 64, 0.08);
}
.orvex-sp__bundle.is-selected {
background: rgba(31, 184, 182, 0.04);
border-color: var(--orvex-pw-teal);
border-width: 2px;
padding: 13px 11px !important;
box-shadow: 0 4px 14px rgba(31, 184, 182, 0.18);
}
/* Hide the floating check icon — too busy for this layout */
.orvex-sp__bundle.is-selected::after { display: none; }
/* Badge sits on top edge, narrower */
.orvex-sp__bundle-badge {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
padding: 3px 10px;
border-radius: 999px;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
box-shadow: 0 2px 6px rgba(15, 39, 64, 0.15);
}
/* Vials row — IMAGE LEFT, inline with label */
.orvex-sp__bundle-image {
display: inline-flex !important;
flex-direction: row;
gap: 1px !important;
align-items: center !important;
justify-content: flex-start !important;
height: 34px !important;
margin: 0 !important;
flex-shrink: 0;
background: #FFF8E5;
border-radius: 6px;
padding: 4px 6px;
min-width: 28px;
}
.orvex-sp__bundle-image img {
width: auto !important;
height: 100% !important;
max-width: 16px !important;
object-fit: contain;
filter: none;
}
/* Override per-qty sizing for inline layout */
.orvex-sp__bundle[data-orvex-bundle-qty="1"] .orvex-sp__bundle-image img {
max-width: 20px !important;
}
.orvex-sp__bundle[data-orvex-bundle-qty="2"] .orvex-sp__bundle-image img,
.orvex-sp__bundle[data-orvex-bundle-qty="3"] .orvex-sp__bundle-image img {
max-width: 14px !important;
}
.orvex-sp__bundle[data-orvex-bundle-qty="4"] .orvex-sp__bundle-image img,
.orvex-sp__bundle[data-orvex-bundle-qty="5"] .orvex-sp__bundle-image img {
max-width: 12px !important;
}
/* Label inline */
.orvex-sp__bundle-label {
font-size: 13.5px !important;
font-weight: 700 !important;
color: var(--orvex-pw-navy);
line-height: 1.15;
margin: 0;
}
.orvex-sp__bundle-discount {
display: block;
font-size: 10.5px !important;
font-weight: 600;
color: var(--orvex-pw-teal-deep);
letter-spacing: 0.01em;
margin-top: 2px;
}
.orvex-sp__bundle.is-selected .orvex-sp__bundle-discount {
color: #1FA363;
}
/* The label + discount form a vertical block on the right of the image */
.orvex-sp__bundle-text-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
min-width: 0;
}
@media (max-width: 640px) {
.orvex-sp__bundles { grid-template-columns: 1fr; gap: 8px; }
.orvex-sp__bundle { justify-content: flex-start !important; padding: 12px !important; }
}
/* =========================================================
COA VAULT — Exact ref image design (final override)
========================================================= */
.orvex-sp__coa-vault {
margin-top: 48px !important;
padding: 28px 30px !important;
background: #F7FAFC !important;
border-radius: 16px !important;
border: 1px solid #E2E8F0 !important;
}
.orvex-sp__coa-vault-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.orvex-sp__coa-vault-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: #E8F0F8;
color: #0F2740;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.orvex-sp__coa-vault-icon svg { width: 20px; height: 20px; }
.orvex-sp__coa-vault-text h2 {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 19px;
font-weight: 700;
color: #1A2332;
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.orvex-sp__coa-vault-text p {
margin: 0;
font-size: 13px;
color: #6B7A89;
}
.orvex-sp__coa-vault-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
/* Card: white, soft border, generous padding */
.orvex-sp__coa-card {
position: relative;
background: #fff !important;
border: 1px solid #E2E8F0 !important;
border-radius: 14px !important;
padding: 20px 18px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
overflow: visible !important;
transition: var(--orvex-pw-transition);
}
.orvex-sp__coa-card:hover {
border-color: #1FB8B6 !important;
box-shadow: 0 6px 18px rgba(15, 39, 64, 0.08);
transform: translateY(-2px);
}
/* Kill the broken ::before "LATEST" pseudo from old CSS */
.orvex-sp__coa-card::before {
content: none !important;
display: none !important;
}
/* New "Latest" pill — top-left, blue */
.orvex-sp__coa-card-latest {
display: inline-block;
background: #1E63E0;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 4px 12px;
border-radius: 999px;
width: fit-content;
text-transform: capitalize;
}
/* Big green purity number — centered */
.orvex-sp__coa-card-purity {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 34px !important;
font-weight: 800 !important;
color: #1FA363 !important;
line-height: 1 !important;
text-align: center !important;
margin: 4px 0 0 !important;
letter-spacing: -0.02em !important;
}
.orvex-sp__coa-card-purity span {
display: block !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #6B7A89 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
margin-top: 4px !important;
font-family: 'Inter', sans-serif !important;
}
/* Meta table — label left, value right */
.orvex-sp__coa-card-meta {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 12px 0 0 !important;
border-top: 1px solid #F0F4F8 !important;
font-size: 12.5px !important;
}
.orvex-sp__coa-card-meta > div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 2px 0;
}
.orvex-sp__coa-card-meta > div span {
color: #6B7A89 !important;
font-weight: 500 !important;
font-size: 12.5px !important;
}
.orvex-sp__coa-card-meta > div strong {
color: #1A2332 !important;
font-weight: 600 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
text-align: right;
}
.orvex-sp__coa-card-meta > div strong.orvex-sp__coa-card-actual {
color: #1FA363 !important;
font-weight: 700 !important;
}
/* The View COA button — DARK, full-width, always visible */
.orvex-sp__coa-card-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 11px 14px !important;
background: #1A2332 !important;
color: #fff !important;
border-radius: 10px !important;
font: inherit !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: var(--orvex-pw-transition) !important;
margin-top: auto !important;
border: 0 !important;
cursor: pointer !important;
visibility: visible !important;
opacity: 1 !important;
width: 100%;
box-sizing: border-box;
}
.orvex-sp__coa-card-btn:hover {
background: #0F2740 !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 39, 64, 0.18);
}
.orvex-sp__coa-card-btn svg {
width: 14px !important;
height: 14px !important;
stroke: #fff !important;
stroke-width: 2 !important;
flex-shrink: 0 !important;
}
@media (max-width: 640px) {
.orvex-sp__coa-vault { padding: 22px 16px !important; }
.orvex-sp__coa-vault-grid { grid-template-columns: 1fr; }
}
/* =========================================================
Frontend Columns Toggle — show only one set per breakpoint
========================================================= */
.orvex-pw-cols-toggle--mobile { display: none; }
@media (max-width: 640px) {
.orvex-pw-cols-toggle--desktop { display: none; }
.orvex-pw-cols-toggle--mobile { display: inline-flex; }
}
/* =========================================================
List view — MOBILE: see comprehensive block below
========================================================= */
/* Also prevent ANY horizontal overflow on the whole widget on mobile */
@media (max-width: 640px) {
.orvex-pw, .orvex-pw-shop-main, .orvex-pw-grid, .orvex-pw-card {
max-width: 100% !important;
overflow-x: hidden;
}
}
/* =========================================================
COA Card — mg buttons (matches product card pills)
========================================================= */
.orvex-coa-card-doses {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 14px;
justify-content: center;
}
.orvex-coa-card-doses--single { display: flex; }
.orvex-coa-card-doses--single .orvex-coa-card-dose-btn {
cursor: default;
pointer-events: none;
}
.orvex-coa-card-dose-btn {
padding: 6px 14px;
background: #fff;
border: 1.5px solid var(--orvex-pw-line);
border-radius: 999px;
font: inherit;
font-size: 12.5px;
font-weight: 700;
color: var(--orvex-pw-ink);
cursor: pointer;
transition: var(--orvex-pw-transition);
white-space: nowrap;
line-height: 1.2;
}
.orvex-coa-card-dose-btn:hover {
border-color: var(--orvex-pw-teal);
color: var(--orvex-pw-teal-deep);
}
.orvex-coa-card-dose-btn.is-active {
background: var(--orvex-pw-navy);
border-color: var(--orvex-pw-navy);
color: #fff;
}
/* Smooth image transition when dose changes */
.orvex-coa-card-media [data-orvex-coa-img] {
transition: opacity 0.2s ease;
}
/* Hide existing dose chip on cards that now use the mg-buttons row */
.orvex-coa-card-doses + .orvex-coa-card-btn,
.orvex-coa-card-doses ~ .orvex-coa-card-btn {
margin-top: 4px;
}
/* COA card body: ensure proper vertical spacing */
.orvex-coa-card-body { padding: 16px 16px 18px; }
.orvex-coa-card-title { margin: 0 0 4px; text-align: center; font-size: 15px; }
/* ===== Mobile fixes for COA cards ===== */
@media (max-width: 640px) {
.orvex-pw-coa, .orvex-pw-coa .orvex-pw-grid, .orvex-coa-card {
max-width: 100% !important;
overflow-x: hidden;
}
.orvex-coa-card-media img { object-fit: contain !important; }
}
/* =========================================================
COA — Desktop list view (when grid/list toggle = list)
========================================================= */
.orvex-pw-coa.orvex-pw--list .orvex-pw-grid {
grid-template-columns: 1fr !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card {
display: grid;
grid-template-columns: 320px 1fr;
gap: 0;
align-items: stretch;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-media {
aspect-ratio: 1 / 1;
min-height: 0;
border-radius: 14px 0 0 14px;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-body {
padding: 22px 24px;
text-align: left;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-title { text-align: left; }
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-doses { justify-content: flex-start; }
/* =========================================================
Single Product — Deal note (dynamic discount/free vial)
========================================================= */
.orvex-sp__deal-note {
margin: -6px 0 14px;
font-size: 13px;
font-weight: 700;
color: #1FA363;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.01em;
}
/* =========================================================
MOBILE: comprehensive card redesign per client doc
(replaces all previous partial mobile rules above)
========================================================= */
@media (max-width: 640px) {
/* === SHOP GRID (variable & simple) === */
/* Category badge "PEPTIDES" blocks picture → hide */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-category,
.orvex-pw-coa:not(.orvex-pw--list) .orvex-coa-card-category {
display: none !important;
}
/* Purity "≥ 99% HPLC" — hide on grid (saves a line) */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-purity {
display: none !important;
}
/* Hide description on cards (client request) */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-excerpt {
display: none !important;
}
/* Card body: compact padding */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-body {
padding: 10px 12px 12px !important;
}
/* Title + mg side-by-side row: "GLOW Blend 5mg" */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-title {
font-size: 14.5px !important;
margin: 0 !important;
line-height: 1.2 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-title a {
display: inline !important;
}
/* mg pills compact + tight under name */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-variations {
gap: 4px !important;
margin: 4px 0 8px !important;
flex-wrap: wrap;
}
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-size {
padding: 3px 9px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
/* Footer (price + +button) */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-footer {
padding-top: 8px !important;
gap: 8px !important;
}
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-price {
font-size: 16px !important;
}
.orvex-pw:not(.orvex-pw--list) .orvex-pw-cart-btn {
width: 38px !important;
height: 38px !important;
}
.orvex-pw:not(.orvex-pw--list) .orvex-pw-cart-btn svg {
width: 15px !important;
height: 15px !important;
}
/* Media area: make picture bigger (less internal padding) */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-card-media {
padding: 8px !important;
}
/* Tighter gap between products */
.orvex-pw:not(.orvex-pw--list) .orvex-pw-grid {
gap: 12px !important;
}
/* === SHOP LIST (mobile) === */
/* Client said: "this size is what i want for shop too, prob slightly less tall"
Layout: image-left, content-right, compact */
.orvex-pw--list .orvex-pw-card {
display: grid !important;
grid-template-columns: 130px 1fr !important;
align-items: stretch !important;
}
.orvex-pw--list .orvex-pw-card-media {
width: 130px !important;
min-height: 130px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 14px 0 0 14px !important;
padding: 8px !important;
}
.orvex-pw--list .orvex-pw-card-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* Hide category, purity & description in list mobile */
.orvex-pw--list .orvex-pw-card-category,
.orvex-pw--list .orvex-pw-card-purity,
.orvex-pw--list .orvex-pw-card-excerpt {
display: none !important;
}
.orvex-pw--list .orvex-pw-card-body {
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 6px !important;
}
.orvex-pw--list .orvex-pw-card-title {
font-size: 14.5px !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.orvex-pw--list .orvex-pw-card-variations {
gap: 4px !important;
margin: 0 !important;
flex-wrap: wrap;
}
.orvex-pw--list .orvex-pw-card-size {
padding: 3px 9px !important;
font-size: 11px !important;
}
.orvex-pw--list .orvex-pw-card-footer {
padding-top: 0 !important;
border-top: none !important;
margin-top: 4px !important;
gap: 8px !important;
}
.orvex-pw--list .orvex-pw-card-price {
font-size: 15.5px !important;
}
.orvex-pw--list .orvex-pw-cart-btn {
width: 34px !important;
height: 34px !important;
}
.orvex-pw--list .orvex-pw-cart-btn svg {
width: 14px !important;
height: 14px !important;
}
/* === COA GRID (mobile) === */
.orvex-pw-coa:not(.orvex-pw--list) .orvex-coa-card-body {
padding: 10px 12px 12px !important;
}
.orvex-pw-coa:not(.orvex-pw--list) .orvex-coa-card-title {
font-size: 14.5px !important;
margin: 0 0 6px !important;
text-align: center !important;
}
.orvex-pw-coa:not(.orvex-pw--list) .orvex-coa-card-doses {
gap: 4px !important;
margin: 0 0 10px !important;
justify-content: center !important;
}
.orvex-pw-coa:not(.orvex-pw--list) .orvex-coa-card-dose-btn {
padding: 3px 10px !important;
font-size: 11px !important;
}
/* === COA LIST (mobile) — client wanted this look ===
Image left, content right, compact */
.orvex-pw-coa.orvex-pw--list .orvex-coa-card {
display: grid !important;
grid-template-columns: 130px 1fr !important;
align-items: stretch !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-media {
width: 130px !important;
min-height: 130px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 14px 0 0 14px !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-category {
display: none !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-body {
padding: 10px 12px !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 6px !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-title {
text-align: left !important;
font-size: 14.5px !important;
margin: 0 !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-doses {
justify-content: flex-start !important;
gap: 4px !important;
margin: 0 !important;
}
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-dose-btn {
padding: 3px 9px !important;
font-size: 11px !important;
}
/* Batch button: tighter, no wrap (BPC-25-A1 stays on one line) */
.orvex-coa-card-btn {
white-space: nowrap !important;
font-size: 12.5px !important;
padding: 9px 12px !important;
margin-top: 4px !important;
}
.orvex-coa-card-btn span {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* List view batch button: a bit smaller */
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-btn {
padding: 8px 10px !important;
font-size: 11.5px !important;
}
/* COA grid gap tighter */
.orvex-pw-coa:not(.orvex-pw--list) .orvex-pw-grid {
gap: 12px !important;
}
}
/* Smallest phones: stack even tighter */
@media (max-width: 380px) {
.orvex-pw--list .orvex-pw-card,
.orvex-pw-coa.orvex-pw--list .orvex-coa-card {
grid-template-columns: 110px 1fr !important;
}
.orvex-pw--list .orvex-pw-card-media,
.orvex-pw-coa.orvex-pw--list .orvex-coa-card-media {
width: 110px !important;
min-height: 110px !important;
}
}
/* Old "MOBILE COMPACT CARDS" block is superseded by the above */
/* =========================================================
Fix the "red" dose button (COA) — kill any pink/red leak
Client: "I don't know where that red comes from"
========================================================= */
.orvex-coa-card-dose-btn:focus,
.orvex-coa-card-dose-btn:active,
.orvex-coa-card-dose-btn:focus-visible {
background: var(--orvex-pw-navy) !important;
color: #fff !important;
outline: none !important;
box-shadow: none !important;
}
.orvex-coa-card-dose-btn:not(.is-active):focus,
.orvex-coa-card-dose-btn:not(.is-active):active {
background: #fff !important;
color: var(--orvex-pw-ink) !important;
border-color: var(--orvex-pw-teal) !important;
}
/* Make sure active dose is always navy (never theme pink/red) */
.orvex-coa-card-dose-btn.is-active {
background: var(--orvex-pw-navy) !important;
border-color: var(--orvex-pw-navy) !important;
color: #fff !important;
}
/* =========================================================
Orvex Hero Widget — X-Ray Edition
========================================================= */
.orvex-hero {
position: relative;
width: 100%;
overflow: hidden;
background: linear-gradient(160deg,
var(--orvex-hero-grad-from, #F2F8FA) 0%,
var(--orvex-hero-grad-mid, #DCEAF0) 50%,
var(--orvex-hero-grad-to, #E8F0F4) 100%
);
color: var(--orvex-hero-ink, #0a2030);
font-family: 'Inter', sans-serif;
cursor: crosshair;
}
/* ===== Base image (Image 1) — always fully visible, full cover ===== */
.orvex-hero__bg-base {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
opacity: 0;
animation: orvexHeroBgIn 1s 0.2s forwards ease;
}
@keyframes orvexHeroBgIn {
to { opacity: 1; }
}
/* ===== X-Ray image (Image 2) — sits on top, revealed via mask ===== */
/* Default: mask hides it completely (circle positioned off-screen) */
.orvex-hero__bg-xray {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 2;
/* Smooth mask transition for seamless blend */
transition: -webkit-mask-image 0s, mask-image 0s;
-webkit-mask-image: radial-gradient(circle var(--orvex-xray-radius, 130px) at -9999px -9999px, black 0%, black 55%, transparent 100%);
mask-image: radial-gradient(circle var(--orvex-xray-radius, 130px) at -9999px -9999px, black 0%, black 55%, transparent 100%);
}
/* ===== Dark overlay on base — makes text readable ===== */
.orvex-hero__overlay-dim {
position: absolute;
inset: 0;
z-index: 3;
background: rgba(10, 32, 48, 0.15);
pointer-events: none;
}
/* ===== Cursor ring ===== */
.orvex-hero__cursor-ring {
position: fixed;
width: calc(var(--orvex-xray-radius, 130px) * 2);
height: calc(var(--orvex-xray-radius, 130px) * 2);
border-radius: 50%;
border: 1.5px solid rgba(31, 184, 182, 0.7);
pointer-events: none;
z-index: 200;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.orvex-hero__cursor-ring::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 50%;
border: 0.5px solid rgba(31, 184, 182, 0.3);
}
.orvex-hero__cursor-ring.active {
opacity: 1;
}
/* ===== Hero overlay — ALWAYS VISIBLE ===== */
.orvex-hero__overlay {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
padding: 40px 24px;
}
.orvex-hero__content {
max-width: 880px;
text-align: center;
}
.orvex-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--orvex-hero-accent, #1FB8B6);
margin-bottom: 28px;
}
.orvex-hero__eyebrow::before,
.orvex-hero__eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--orvex-hero-accent, #1FB8B6);
display: inline-block;
}
.orvex-hero__title {
font-family: 'Inter', sans-serif;
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0 0 28px;
text-shadow: 0 2px 20px rgba(10,32,48,0.3);
}
.orvex-hero__title em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
color: var(--orvex-hero-accent, #1FB8B6);
}
.orvex-hero__desc {
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
max-width: 600px;
margin: 0 auto 36px;
font-weight: 400;
text-shadow: 0 1px 8px rgba(10,32,48,0.25);
}
.orvex-hero__buttons {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
pointer-events: auto;
}
.orvex-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 36px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all 0.4s ease;
white-space: nowrap;
}
.orvex-hero__btn--outline {
background: transparent;
}
.orvex-hero__btn:hover {
transform: translateY(-2px);
color: #fff;
}
/* Hero content entry animation */
.orvex-hero__content > * {
opacity: 0;
transform: translateY(20px);
animation: orvexHeroIn 0.9s forwards ease;
}
.orvex-hero__content > *:nth-child(1) { animation-delay: 0.6s; }
.orvex-hero__content > *:nth-child(2) { animation-delay: 0.75s; }
.orvex-hero__content > *:nth-child(3) { animation-delay: 0.9s; }
.orvex-hero__content > *:nth-child(4) { animation-delay: 1.05s; }
@keyframes orvexHeroIn {
to { opacity: 1; transform: translateY(0); }
}
/* ========== MOBILE ========== */
@media (max-width: 760px) {
.orvex-hero { cursor: default; }
.orvex-hero__bg-base,
.orvex-hero__bg-xray {
background-size: cover;
background-position: center center;
}
.orvex-hero__bg-xray {
-webkit-mask-image: none !important;
mask-image: none !important;
display: none;
}
.orvex-hero__cursor-ring { display: none; }
.orvex-hero__overlay { align-items: flex-start; padding-top: 80px; }
.orvex-hero__eyebrow { font-size: 9px; margin-bottom: 18px; }
.orvex-hero__title { font-size: 30px; margin-bottom: 18px; }
.orvex-hero__desc { font-size: 13px; margin-bottom: 26px; }
.orvex-hero__btn { padding: 14px 26px; font-size: 10px; }
}