/** Shopify CDN: Minification failed
Line 1177:2 All "@import" rules must come first
Line 1178:2 All "@import" rules must come first
**/
/* v60R cache-bust 2026-05-25T14:30:00Z */
:root {
color-scheme: light;
--gold: #F8B60F;
--gold-soft: #FCD15C;
--gold-dark: #C68F00;
--green: #0F2200;
--green-mid: #1A3A12;
--green-soft: #284A1F;
--charcoal: #252527;
--ink: #14151A;
--cream: #FAF7F1;
--cream-2: #F1ECDF;
--bg: #FFFFFF;
--border: #E8E4DA;
--border-strong: #C7BFAC;
--muted: #6B6660;
--shadow: 0 12px 40px -18px rgba(15, 34, 0, 0.35);
--shadow-lg: 0 24px 60px -16px rgba(15, 34, 0, 0.4);
--radius: 4px;
--radius-lg: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--ink);
font-family: "Futura", "Futura Bk BT", "Helvetica Neue", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section { padding: 0; }
.section-tight { padding: 48px 0; }
/* ===== Top utility bar ===== */
.topbar {
background: var(--ink);
color: #DDD7C7;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 9px;
padding-bottom: 9px;
gap: 16px;
flex-wrap: wrap;
}
.topbar .pill {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
}
.topbar .pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 4px rgba(248,182,15,0.16);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(248,182,15,0.16); }
50% { box-shadow: 0 0 0 8px rgba(248,182,15,0.05); }
}
.topbar a { opacity: 0.85; }
.topbar a:hover { color: var(--gold); opacity: 1; }
.topbar .links { display: flex; gap: 22px; }
/* ===== Header / Nav ===== */
header.site {
position: sticky;
top: 0;
z-index: 90;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
gap: 24px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--ink);
}
.logo svg.brandmark { height: 38px; width: auto; display: block; }
.logo .tagline {
padding-left: 14px;
border-left: 1px solid var(--border-strong);
color: var(--muted);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.22em;
font-weight: 700;
line-height: 1.2;
}
/* v21: B2B Portal tagline is now a buyer-login link */
.tagline-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
margin-left: -10px; /* tighten back to the brandmark since .nav has gap:24px */
transition: color 0.2s ease;
}
.tagline-link .tagline {
padding-left: 14px;
border-left: 1px solid var(--border-strong);
color: var(--muted);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.22em;
font-weight: 700;
line-height: 1.2;
transition: color 0.2s ease;
}
.tagline-link:hover .tagline { color: var(--ink); }
footer.site .logo { color: #fff; }
footer.site .logo svg.brandmark { height: 56px; }
nav.menu { display: flex; gap: 28px; align-items: center; }
nav.menu > a,
nav.menu > .has-dropdown,
nav.menu > .has-dropdown > a {
font-weight: 600;
font-size: 14px;
color: var(--ink);
letter-spacing: 0.04em;
position: relative;
display: inline-flex;
align-items: center;
line-height: 1.4;
}
nav.menu > a:hover, nav.menu > .has-dropdown > a:hover { color: var(--gold-dark); }
nav.menu a .caret { font-size: 9px; opacity: 0.6; margin-left: 4px; }
/* ============================================================
Brands dropdown - hover-triggered, links to collection pages
============================================================ */
nav.menu .has-dropdown { position: relative; display: inline-flex; align-items: center; }
nav.menu .has-dropdown > a { display: inline-flex; align-items: center; cursor: pointer; }
nav.menu .has-dropdown .dd-panel {
position: absolute;
top: 100%;
left: -16px;
margin-top: 14px;
min-width: 280px;
background: #ffffff;
border: 1px solid rgba(15, 34, 0, 0.08);
border-radius: 12px;
box-shadow: 0 18px 44px rgba(15, 34, 0, 0.14);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
z-index: 90;
}
nav.menu .has-dropdown:hover .dd-panel,
nav.menu .has-dropdown:focus-within .dd-panel { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
nav.menu .has-dropdown::before {
/* invisible hover bridge so cursor can move from trigger to panel */
content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
nav.menu .dd-panel a.dd-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0;
text-transform: none;
line-height: 1.25;
}
nav.menu .dd-panel a.dd-item:hover { background: rgba(15, 34, 0, 0.04); color: var(--ink); }
nav.menu .dd-panel a.dd-item::after { display: none; }
nav.menu .dd-panel .dd-swatch {
width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85); font-weight: 900; font-size: 12px;
}
nav.menu .dd-panel .dd-meta { display: block; font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-top: 2px; }
nav.menu .dd-panel .dd-divider { height: 1px; background: rgba(15,34,0,0.06); margin: 6px 4px; }
nav.menu .dd-panel .dd-footer {
display: block; padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
color: var(--gold-dark);
}
nav.menu .dd-panel .dd-footer:hover { background: rgba(248, 182, 15, 0.10); }
nav.menu .dd-panel .dd-footer::after { display: none; }
.sw-kingk { background: linear-gradient(135deg, #1A1A1A 0%, #3A2900 100%); }
.sw-gud { background: linear-gradient(135deg, #FF8B5C 0%, #B23A6B 100%); }
.sw-grh { background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%); }
.sw-grass { background: linear-gradient(135deg, #5A4623 0%, #2E230F 100%); }
.sw-lucy { background: linear-gradient(135deg, #B85C97 0%, #5C2A6E 100%); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.login-link { font-size: 13px; font-weight: 600; color: var(--ink); }
.login-link:hover { color: var(--gold-dark); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 2px;
transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease, color 0.15s ease;
cursor: pointer;
border: 0;
}
.btn-primary {
background: var(--gold);
color: var(--ink);
box-shadow: 0 6px 0 -2px var(--gold-dark);
}
.btn-primary:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 8px 0 -2px var(--gold-dark); }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--gold); }
.btn-ghost-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-ghost-light:hover { background: #fff; color: var(--green); border-color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 11px; }
.btn-arrow::after {
content: "→";
font-size: 16px;
line-height: 1;
transform: translateY(-1px);
}
/* ===== Hero ===== */
.hero {
background: var(--cream);
color: var(--ink);
position: relative;
overflow: hidden;
padding: 72px 0 88px;
}
@media (max-width: 640px) {
.hero {
overflow-x: clip;
overflow-y: visible;
}
.hero .container { overflow-x: visible; }
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 500px at 92% 8%, rgba(248,182,15,0.22), transparent 60%),
radial-gradient(700px 460px at -4% 100%, rgba(15,34,0,0.08), transparent 60%);
pointer-events: none;
animation: heroBreath 16s ease-in-out infinite;
}
@keyframes heroBreath {
0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
50% { transform: scale(1.06) translate(-1%, 1%); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-dark);
font-weight: 800;
margin-bottom: 24px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1.5px;
background: var(--gold);
}
.hero h1 {
font-size: clamp(46px, 6.4vw, 92px);
line-height: 0.96;
font-weight: 900;
letter-spacing: -0.025em;
color: var(--ink);
text-transform: uppercase;
margin-bottom: 24px;
}
.hero h1 .accent {
position: relative;
display: inline-block;
font-style: italic;
font-weight: 900;
background: linear-gradient(110deg, #8E6800 0%, #C68F00 25%, #F8B60F 45%, #FCD15C 55%, #F8B60F 65%, #C68F00 80%, #8E6800 100%);
background-size: 280% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding: 0 0.04em;
animation: heroGoldFlow 6s ease-in-out infinite;
}
.hero h1 .accent::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.04em;
height: 0.085em;
background: linear-gradient(90deg, var(--gold), var(--gold-dark) 50%, var(--gold));
background-size: 200% 100%;
border-radius: 6px;
transform: scaleX(0);
transform-origin: left center;
animation: heroUnderline 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards,
heroGoldFlow 6s ease-in-out infinite 2s;
box-shadow: 0 2px 12px -2px rgba(248, 182, 15, 0.5);
}
@keyframes heroGoldFlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes heroUnderline {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero h1 .accent, .hero h1 .accent::after { animation: none; }
.hero h1 .accent::after { transform: scaleX(1); }
}
/* TRUST BADGE, floating credibility chip above eyebrow */
.trust-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(15, 34, 0, 0.08);
border-radius: 100px;
margin-bottom: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink);
box-shadow: 0 6px 20px -8px rgba(15, 34, 0, 0.18), 0 1px 0 rgba(255,255,255,0.9) inset;
text-transform: uppercase;
}
.trust-badge .stars {
color: var(--gold);
font-size: 13px;
letter-spacing: 0.08em;
line-height: 1;
}
.trust-badge strong { font-weight: 900; color: var(--green); }
.trust-badge .dot { color: var(--border-strong); margin: 0 4px; }
/* SPARKLE FIELD, subtle gold dots that fade in/out across the hero */
.sparkles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.sparkle {
position: absolute;
width: 5px;
height: 5px;
background: radial-gradient(circle, #F8B60F 30%, transparent 70%);
border-radius: 50%;
opacity: 0;
box-shadow: 0 0 12px rgba(248, 182, 15, 0.55), 0 0 4px rgba(248, 182, 15, 0.85);
animation: sparkleTwinkle 7s ease-in-out infinite;
will-change: transform, opacity;
}
.sparkle.s1 { top: 14%; left: 9%; animation-delay: 0s; }
.sparkle.s2 { top: 26%; left: 33%; animation-delay: 0.9s; width: 4px; height: 4px; }
.sparkle.s3 { top: 18%; right: 16%; animation-delay: 1.6s; }
.sparkle.s4 { top: 62%; left: 14%; animation-delay: 2.4s; width: 6px; height: 6px; }
.sparkle.s5 { top: 74%; left: 38%; animation-delay: 3.1s; }
.sparkle.s6 { top: 48%; right: 28%; animation-delay: 3.8s; width: 4px; height: 4px; }
.sparkle.s7 { top: 86%; right: 12%; animation-delay: 4.5s; }
.sparkle.s8 { top: 36%; left: 48%; animation-delay: 5.0s; width: 4px; height: 4px; }
.sparkle.s9 { top: 8%; left: 56%; animation-delay: 5.5s; }
.sparkle.s10 { top: 92%; left: 22%; animation-delay: 6s; width: 4px; height: 4px; }
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.4); }
18% { opacity: 1; transform: scale(1.3); }
50% { opacity: 0.55; transform: scale(0.9) translate(8px, -10px); }
82% { opacity: 0.2; transform: scale(0.7) translate(14px, -18px); }
}
/* TOPOGRAPHIC contour lines layered behind the hero */
.hero-topo {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
.hero-topo svg { width: 100%; height: 100%; display: block; }
/* VERTICAL accent text on far right edge of hero */
.hero-vertical {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transform-origin: center;
font-size: 9px;
letter-spacing: 0.42em;
color: var(--muted);
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
z-index: 0;
opacity: 0.55;
pointer-events: none;
}
/* Hide some hero add-ons on mobile to keep it clean */
@media (max-width: 640px) {
.sparkle.s2, .sparkle.s4, .sparkle.s6, .sparkle.s8, .sparkle.s9, .sparkle.s10 { display: none; }
.hero-vertical { display: none; }
.hero-topo { opacity: 0.32; }
.trust-badge { font-size: 9.5px; padding: 6px 12px; gap: 8px; margin-bottom: 14px; }
.trust-badge .stars { font-size: 11px; }
}
.hero p.lede {
font-size: 18px;
line-height: 1.55;
color: var(--muted);
max-width: 540px;
margin-bottom: 36px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
border-top: 1px solid var(--border-strong);
padding-top: 24px;
}
.hero-stats .stat .num {
font-size: 38px;
font-weight: 900;
color: var(--green);
letter-spacing: -0.02em;
line-height: 1;
}
.hero-stats .stat .lbl {
margin-top: 8px;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* hero card stack */
.hero-visual {
position: relative;
height: 520px;
}
.hero-card {
position: absolute;
background: var(--cream);
border: 1px solid rgba(255,255,255,0.18);
color: var(--ink);
border-radius: var(--radius-lg);
padding: 18px 20px;
box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5);
transition: transform 0.4s ease;
}
.hero-card:hover { transform: translate(0, -6px) rotate(0) !important; z-index: 10; }
.hero-card .ribbon {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.16em;
color: #fff;
background: var(--ink);
padding: 4px 9px;
border-radius: 2px;
text-transform: uppercase;
}
.hero-card .ribbon.gold { background: var(--gold); color: var(--ink); }
.hero-card .ribbon.green { background: var(--green-mid); color: var(--gold); }
.hero-card h4 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-top: 10px; min-height: 36px; }
.hero-card .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.hero-card .meta .price { font-weight: 800; color: var(--green); font-size: 15px; }
.hero-card .meta .pack { font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.pviz {
height: 110px;
display: grid;
place-items: center;
margin: 10px 0 6px;
border-radius: 6px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #f5f1e8 100%);
}
.pviz img { max-height: 100%; width: auto; max-width: 90%; object-fit: contain; mix-blend-mode: multiply; }
.pviz .svg-fallback { position: absolute; inset: 0; display: none; place-items: center; }
.pviz img:not([src]), .pviz img[src=""] { display: none; }
.no-photos .pviz img { display: none; }
.no-photos .pviz .svg-fallback { display: grid; }
.hero-card.c1 { top: 0; right: 70px; width: 240px; z-index: 2; }
.hero-card.c2 { top: 180px; right: 0; width: 240px; z-index: 3; }
.hero-card.c3 { top: 320px; right: 110px; width: 240px; z-index: 1; }
/* ===== Trust strip ===== */
.trust {
background: var(--cream);
border-bottom: 1px solid var(--border);
padding: 22px 0;
}
.trust .row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
align-items: center;
}
.trust .item {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--charcoal);
letter-spacing: 0.06em;
}
.trust .item strong { color: var(--ink); font-weight: 800; }
.trust .item .ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); }
/* ===== Section heads ===== */
.sec-head { max-width: 720px; margin-bottom: 40px; }
.sec-head.center { margin: 0 auto 40px; text-align: center; }
.kicker {
display: inline-block;
font-size: 11px;
color: var(--gold-dark);
letter-spacing: 0.28em;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 14px;
}
.kicker::before { content: "✦ "; color: var(--gold); }
h2.title {
font-size: clamp(32px, 3.6vw, 50px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--ink);
text-transform: uppercase;
}
h2.title em { font-style: italic; color: var(--green); font-weight: 800; }
.sub {
font-size: 17px;
color: var(--muted);
margin-top: 18px;
line-height: 1.55;
}
/* ===== Programs ===== */
.programs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.program {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px 26px;
position: relative;
transition: all 0.2s ease;
overflow: hidden;
}
.program:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-3px); }
.program::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.program:hover::before { transform: scaleX(1); }
.program .num {
font-size: 11px;
font-weight: 800;
color: var(--muted);
letter-spacing: 0.2em;
margin-bottom: 22px;
}
.program h3 {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
line-height: 1.05;
margin-bottom: 14px;
}
.program p {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 18px;
}
.program ul { list-style: none; margin-bottom: 22px; }
.program ul li {
font-size: 13px;
color: var(--ink);
padding: 6px 0;
border-bottom: 1px dashed var(--border);
display: flex;
justify-content: space-between;
}
.program ul li:last-child { border-bottom: 0; }
.program ul li span { color: var(--muted); }
.program a.learn {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 2px solid var(--gold);
padding-bottom: 2px;
}
/* ===== How it works (NEW) ===== */
.howitworks { background: var(--ink); color: #ECE7D5; position: relative; overflow: hidden; }
.howitworks::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(800px 500px at 100% 0%, rgba(248,182,15,0.08), transparent 70%);
pointer-events: none;
}
.howitworks h2.title { color: #fff; }
.howitworks .sub { color: #BBB28E; }
.how-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 26px;
position: relative;
z-index: 1;
overflow: visible;
padding-top: 22px;
}
.how-step {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
transition: all 0.2s ease;
}
.how-step:hover { border-color: var(--gold); background: rgba(248,182,15,0.05); }
.how-step .stepnum {
position: absolute;
top: -22px;
left: 28px;
width: 44px;
height: 44px;
background: var(--gold);
color: var(--ink);
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 900;
font-size: 18px;
letter-spacing: -0.01em;
border: 4px solid var(--ink);
}
.how-step h3 {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
color: #fff;
text-transform: uppercase;
margin-top: 22px;
margin-bottom: 10px;
}
.how-step p { font-size: 14px; color: #B6AE92; line-height: 1.6; margin-bottom: 18px; }
.how-step .meta-row {
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #8A8472;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.how-step .meta-row strong { color: var(--gold); font-weight: 800; }
/* ===== Brand portfolio ===== */
.brand-portfolio { background: var(--cream); }
.brands-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.brand-card {
border-radius: var(--radius-lg);
padding: 28px 24px;
color: #fff;
position: relative;
overflow: hidden;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
}
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,34,0,0.18); }
.brand-card .bc-arrow { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; }
.brand-card:hover .bc-arrow { transform: translateX(4px); }
.brand-card .small {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.75;
font-weight: 700;
}
.brand-card .name {
font-size: 30px;
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1;
text-transform: uppercase;
margin: 10px 0 12px;
}
.brand-card .desc {
font-size: 13px;
line-height: 1.5;
opacity: 0.92;
margin-bottom: 18px;
}
.brand-card .pricing {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
background: rgba(0,0,0,0.32);
padding: 6px 10px;
border-radius: 2px;
align-self: flex-start;
}
.brand-card .pricing strong { color: var(--gold); font-weight: 800; }
.b-kingk { background: linear-gradient(135deg, #1A1A1A 0%, #3A2900 100%); grid-column: span 7; }
.b-kingk::after { content: "K"; position: absolute; right: -22px; bottom: -68px; font-size: 280px; font-weight: 900; color: var(--gold); opacity: 0.07; line-height: 1; }
.b-gud { background: linear-gradient(135deg, #FF8B5C 0%, #B23A6B 100%); grid-column: span 5; }
.b-gud::after { content: "Ü"; position: absolute; right: -16px; bottom: -56px; font-size: 240px; font-weight: 900; color: rgba(255,255,255,0.10); line-height: 1; }
.b-grh { background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%); grid-column: span 5; }
.b-grh::after { content: "GRH"; position: absolute; right: -10px; bottom: -28px; font-size: 130px; font-weight: 900; color: var(--gold); opacity: 0.08; line-height: 1; letter-spacing: -0.04em; }
.b-grass { background: linear-gradient(135deg, #5A4623 0%, #2E230F 100%); grid-column: span 4; }
.b-grass::after { content: "🌿"; position: absolute; right: -10px; bottom: -28px; font-size: 200px; opacity: 0.10; line-height: 1; }
.b-lucy { background: linear-gradient(135deg, #B85C97 0%, #5C2A6E 100%); grid-column: span 3; }
.b-lucy::after { content: "♡"; position: absolute; right: -16px; bottom: -28px; font-size: 200px; color: rgba(255,255,255,0.10); line-height: 1; }
.brand-card a { position: relative; z-index: 2; }
/* Real brand logo, corner badge */
.brand-card .brand-logo {
position: absolute;
top: 18px;
right: 18px;
background: rgba(255, 255, 255, 0.96);
padding: 8px 14px;
border-radius: 6px;
height: 50px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-card:hover .brand-logo { transform: rotate(-2deg) scale(1.04); }
.brand-card .brand-logo img {
max-height: 32px;
max-width: 96px;
width: auto;
height: auto;
display: block;
object-fit: contain;
}
.brand-card .brand-logo.empty {
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.18em;
padding: 8px 14px;
text-transform: uppercase;
height: auto;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Mobile: hide brand logo pills entirely, desktop only */
@media (max-width: 640px) {
.brand-card .brand-logo { display: none !important; }
.brand-card .small { line-height: 1.5; }
.brand-card .name { margin-top: 6px; font-size: 26px; }
}
/* ===== Catalog explorer ===== */
.catalog { background: var(--bg); }
.filters-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}
.filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
padding: 9px 16px;
border: 1.5px solid var(--border-strong);
border-radius: 100px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink);
background: var(--bg);
transition: all 0.15s ease;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.chip .count {
background: rgba(0,0,0,0.06);
color: var(--muted);
padding: 2px 8px;
border-radius: 100px;
font-size: 10px;
font-weight: 800;
}
.chip.active .count { background: rgba(248,182,15,0.18); color: var(--gold); }
.result-meta {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.result-meta strong { color: var(--ink); }
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.product {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
cursor: default;
position: relative;
}
.product:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-3px); }
.product .vendor-tag {
display: inline-block;
font-family: "Oswald", "Futura", "Helvetica Neue", "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
padding: 4px 10px;
border-radius: 3px;
line-height: 1.2;
}
.vt-king-k { background: var(--ink); color: var(--gold); }
.vt-grh { background: var(--green-mid); color: var(--gold); }
.vt-gud { background: linear-gradient(90deg, #FF8B5C, #B23A6B); }
.vt-grass { background: #5A4623; }
.vt-lucy { background: #B85C97; }
.product .imagecanvas {
height: 220px;
background:
radial-gradient(circle at 50% 50%, var(--cream) 0%, var(--cream-2) 100%);
display: grid;
place-items: center;
border-bottom: 1px solid var(--border);
position: relative;
padding: 18px;
overflow: hidden;
}
.product .imagecanvas img.photo {
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
transition: transform 0.3s ease;
mix-blend-mode: multiply;
filter: drop-shadow(0 12px 20px rgba(15, 34, 0, 0.18));
}
.product:hover .imagecanvas img.photo { transform: scale(1.04); }
.product .imagecanvas .svg-fallback { display: none; place-items: center; }
.no-photos .product .imagecanvas img.photo { display: none; }
.no-photos .product .imagecanvas .svg-fallback { display: grid; }
.product .product-tagrow {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
padding: 12px 14px 0;
min-height: 28px;
flex-wrap: wrap;
}
.product .product-status-row {
display: flex;
justify-content: flex-start;
padding: 4px 14px 0;
min-height: 22px;
}
.product .product-status-row .vendor-tag {
display: inline-block;
font-family: "Oswald", "Futura", "Helvetica Neue", "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 3px;
color: #fff;
white-space: nowrap;
line-height: 1.2;
}
.product .product-tagrow .tagrow-left { flex: 1; min-width: 0; }
.product .product-tagrow .tagrow-left .vendor-tag {
display: inline-block;
font-family: "Oswald", "Futura", "Helvetica Neue", "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 3px;
color: #fff;
white-space: nowrap;
line-height: 1.2;
}
.product .product-tagrow .pack-badge-top {
background: var(--ink);
color: #fff;
font-family: "Oswald", "Futura", "Helvetica Neue", "Inter", system-ui, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
padding: 4px 9px;
border-radius: 3px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.2;
}
/* Old absolute-positioned badges inside imagecanvas, neutralize */
.product .imagecanvas .badge,
.product .imagecanvas .pack-badge { display: none !important; }
@media (max-width: 640px) {
.product .product-tagrow {
padding: 14px 12px 0;
min-height: 26px;
gap: 6px;
flex-wrap: nowrap;
justify-content: flex-start;
}
.product .product-tagrow .pack-badge-top {
font-size: 9px;
padding: 4px 7px;
letter-spacing: 0.08em;
}
.product .product-status-row {
padding: 4px 12px 0;
min-height: 20px;
justify-content: flex-start;
}
.product .product-status-row .vendor-tag {
font-size: 9px;
padding: 3px 7px;
letter-spacing: 0.08em;
}
}
.product .imagecanvas .badge { position: absolute; top: 12px; left: 12px; }
.product .imagecanvas .pack-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--ink);
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
padding: 4px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.product .imagecanvas .quickadd {
position: absolute;
bottom: 12px;
right: 12px;
width: 36px;
height: 36px;
background: var(--ink);
color: var(--gold);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow: var(--shadow);
transition: all 0.15s ease;
opacity: 0;
transform: translateY(8px);
}
.product:hover .imagecanvas .quickadd { opacity: 1; transform: translateY(0); }
.product .imagecanvas .quickadd:hover { background: var(--gold); color: var(--ink); transform: scale(1.1); }
.product .meta {
padding: 18px 18px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.product h4 {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--ink);
margin: 10px 0 6px;
min-height: 38px;
}
.product .ptype {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 14px;
}
.product .pricing-row {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 12px;
border-top: 1px dashed var(--border-strong);
}
.product .pricing-row .case {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.product .pricing-row .price {
font-size: 19px;
font-weight: 900;
color: var(--green);
letter-spacing: -0.01em;
text-align: right;
}
.product .pricing-row .price small {
display: block;
font-size: 10px;
color: var(--muted);
font-weight: 600;
margin-top: 2px;
letter-spacing: 0.1em;
}
.product-cta {
display: block;
text-align: center;
background: var(--ink);
color: var(--gold);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 12px 0;
transition: background 0.15s ease;
cursor: pointer;
}
.product-cta:hover { background: var(--gold); color: var(--ink); }
.catalog-loading {
text-align: center;
color: var(--muted);
font-size: 13px;
padding: 60px 0;
letter-spacing: 0.1em;
text-transform: uppercase;
grid-column: 1 / -1;
}
/* ===== Why partner (v17, Programs-format + watermark numerals + ink stamp) ===== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");
.why {
background:
radial-gradient(900px 600px at 10% 0%, rgba(15,34,0,0.05), transparent 55%),
linear-gradient(180deg, #F1EBD9 0%, #E9DFC7 100%);
color: var(--ink);
position: relative;
overflow: hidden;
}
.why::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15,34,0,0.04) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
opacity: 0.55;
}
.why h2.title { color: var(--ink); }
.why .sub { color: var(--muted); }
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 40px;
position: relative;
z-index: 1;
}
.why-cell {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px 26px;
position: relative;
transition: all 0.22s ease;
overflow: hidden;
isolation: isolate;
}
.why-cell:hover {
border-color: var(--ink);
box-shadow: var(--shadow);
transform: translateY(-3px);
}
/* Green top stripe on hover (different shade from Programs' gold) */
.why-cell::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: var(--green);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 3;
}
.why-cell:hover::before { transform: scaleX(1); }
/* Italic-serif Roman numeral watermark, the originality cue */
.why-cell::after {
content: attr(data-roman);
position: absolute;
bottom: -28px;
right: -6px;
font-family: "Cormorant Garamond", "Playfair Display", "Didot", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 180px;
line-height: 0.85;
letter-spacing: -0.04em;
color: rgba(15,34,0,0.045);
pointer-events: none;
z-index: 0;
transition: color 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.why-cell:hover::after {
color: rgba(15,34,0,0.10);
transform: translateY(-6px) translateX(-4px) rotate(-2deg);
}
/* Ensure content sits above the watermark */
.why-cell > * { position: relative; z-index: 1; }
/* Ink-stamp in top-right, character + slight authority */
.why-cell .stamp {
position: absolute;
top: 20px;
right: 18px;
width: 70px;
height: 70px;
border: 1.4px solid currentColor;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: var(--green);
opacity: 0.55;
transform: rotate(-8deg);
transition:
transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.45s ease,
color 0.4s ease,
border-color 0.4s ease;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.0), rgba(255,255,255,0.4));
z-index: 2;
pointer-events: none;
}
.why-cell .stamp::before {
content: "";
position: absolute;
inset: 4px;
border: 1px dashed currentColor;
border-radius: 50%;
opacity: 0.55;
}
.why-cell .stamp span {
display: block;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.18;
padding: 0 8px;
color: inherit;
}
.why-cell:hover .stamp {
transform: rotate(4deg) scale(1.08);
opacity: 1;
color: var(--green);
border-color: var(--green);
}
/* Reset num/title/etc styling, keep Programs-format identical */
.why-cell .num {
font-size: 11px;
font-weight: 800;
color: var(--muted);
letter-spacing: 0.2em;
margin-bottom: 22px;
max-width: calc(100% - 80px); /* leave room for stamp */
}
.why-cell h3 {
font-size: 20px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 14px;
color: var(--ink);
max-width: calc(100% - 12px);
}
.why-cell p {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 18px;
}
.why-cell ul {
list-style: none;
margin-bottom: 22px;
padding: 0;
}
.why-cell ul li {
font-size: 13px;
color: var(--ink);
padding: 6px 0;
border-bottom: 1px dashed var(--border);
display: flex;
justify-content: space-between;
gap: 8px;
}
.why-cell ul li:last-child { border-bottom: 0; }
.why-cell ul li span { color: var(--muted); }
.why-cell a.learn {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 2px solid var(--green);
padding-bottom: 2px;
text-decoration: none;
transition: color 0.25s ease, border-color 0.25s ease;
display: inline-block;
}
.why-cell a.learn:hover {
color: var(--green);
border-color: var(--gold);
}
/* Tablet */
@media (max-width: 980px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
.why-cell::after { font-size: 160px; }
}
/* Mobile */
@media (max-width: 640px) {
.why-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.why-cell { padding: 26px 22px 22px; }
.why-cell h3 { font-size: 18px; }
.why-cell .stamp { width: 60px; height: 60px; top: 18px; right: 16px; }
.why-cell .stamp span { font-size: 7px; padding: 0 7px; }
.why-cell::after { font-size: 150px; bottom: -22px; }
.why-cell .num { max-width: calc(100% - 72px); }
}
/* ===== Apply page mode (v19, branded shell + Clay form embed) ===== */
.apply-hero {
background: linear-gradient(180deg, var(--cream) 0%, #FBF8F0 100%);
padding: 100px 0 70px;
text-align: center;
position: relative;
overflow: hidden;
}
.apply-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 500px at 0% 0%, rgba(15,34,0,0.05), transparent 60%),
radial-gradient(800px 600px at 100% 110%, rgba(248,182,15,0.10), transparent 55%),
radial-gradient(rgba(15,34,0,0.04) 1px, transparent 1px);
background-size: auto, auto, 28px 28px;
pointer-events: none;
opacity: 0.7;
}
.apply-hero .container { position: relative; z-index: 1; }
.apply-hero .kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.apply-hero .kicker::before {
content: "★";
color: var(--gold);
font-size: 14px;
}
.apply-hero h1.title {
font-size: clamp(34px, 5vw, 58px);
font-weight: 900;
letter-spacing: -0.015em;
line-height: 1.04;
color: var(--ink);
margin: 0 0 20px;
}
.apply-hero h1.title em {
font-style: italic;
color: var(--green);
font-weight: 900;
}
.apply-hero .sub {
font-size: 16px;
color: var(--muted);
max-width: 640px;
margin: 0 auto 26px;
line-height: 1.62;
}
.apply-hero .trust-mini {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
margin-top: 14px;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
font-weight: 800;
}
.apply-hero .trust-mini span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.apply-hero .trust-mini span::before {
content: "";
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
}
.apply-body {
background: var(--cream);
padding: 70px 0 110px;
position: relative;
}
.apply-body::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15,34,0,0.035) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.6;
pointer-events: none;
}
.apply-grid {
display: grid;
grid-template-columns: 1fr 1.45fr;
gap: 32px;
align-items: start;
position: relative;
z-index: 1;
}
.apply-side {
display: flex;
flex-direction: column;
gap: 22px;
position: sticky;
top: 28px;
}
.apply-process {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px 24px;
}
.apply-process .ttl {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 18px;
}
.apply-process ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: applystep;
display: flex;
flex-direction: column;
gap: 0;
}
.apply-process ol li {
counter-increment: applystep;
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 14px;
align-items: start;
padding: 14px 0 14px 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--ink);
border-bottom: 1px dashed var(--border);
}
.apply-process ol li:last-child { border-bottom: 0; padding-bottom: 4px; }
.apply-process ol li::before {
content: counter(applystep, decimal-leading-zero);
grid-row: 1 / span 2;
grid-column: 1;
font-family: "Oswald", "Futura", system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.10em;
color: var(--gold);
background: var(--green);
width: 36px;
height: 26px;
display: inline-grid;
place-items: center;
border-radius: 5px;
font-variant-numeric: tabular-nums;
box-shadow: 0 2px 4px -1px rgba(15,34,0,0.18);
margin-top: 2px;
}
.apply-process ol li b {
grid-column: 2;
grid-row: 1;
display: block;
font-weight: 900;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.16em;
color: var(--ink);
line-height: 1.2;
margin: 0 0 4px 0;
align-self: center;
}
.apply-process ol li small {
grid-column: 2;
grid-row: 2;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
display: block;
}
@media (max-width: 640px) {
.apply-process ol li {
grid-template-columns: 34px 1fr;
column-gap: 12px;
padding: 12px 0;
}
.apply-process ol li::before {
width: 30px;
height: 22px;
font-size: 11px;
margin-top: 1px;
}
.apply-process ol li b { font-size: 11px; letter-spacing: 0.14em; }
.apply-process ol li small { font-size: 12px; }
}
.apply-form-wrap {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 36px 30px;
position: relative;
box-shadow: 0 1px 0 rgba(15,34,0,0.04), 0 18px 36px -22px rgba(15,34,0,0.18);
overflow: hidden;
}
.apply-form-wrap::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: var(--gold);
}
.apply-form-wrap .form-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
margin: 0 0 10px;
}
.apply-form-wrap h2 {
font-size: clamp(22px, 3vw, 28px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--ink);
margin: 0 0 8px;
line-height: 1.12;
}
.apply-form-wrap .form-sub {
font-size: 13.5px;
color: var(--muted);
margin: 0 0 26px;
line-height: 1.55;
}
.apply-form-wrap .clay-slot {
min-height: 100px;
}
.apply-form-wrap .clay-empty {
background: var(--cream);
border: 1px dashed rgba(15,34,0,0.20);
border-radius: 10px;
padding: 40px 28px;
text-align: center;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.apply-form-wrap .clay-empty strong { color: var(--ink); display: block; margin-bottom: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
/* Wishlist summary panel (inline version on apply page) */
#rxb-wishlist-panel {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px 26px 24px;
color: var(--ink);
position: relative;
box-shadow: 0 1px 0 rgba(15,34,0,0.04), 0 12px 24px -18px rgba(15,34,0,0.14);
}
#rxb-wishlist-panel::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: var(--green);
}
#rxb-wishlist-panel.empty {
background: transparent;
border: 1px dashed var(--border);
text-align: center;
box-shadow: none;
}
#rxb-wishlist-panel.empty::before { display: none; }
#rxb-wishlist-panel .rxb-wl-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
#rxb-wishlist-panel .rxb-wl-title {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
font-weight: 800;
margin: 0;
}
#rxb-wishlist-panel .rxb-wl-meta {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 700;
}
#rxb-wishlist-panel .rxb-wl-list { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid var(--border); }
#rxb-wishlist-panel .rxb-wl-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed var(--border);
align-items: baseline;
}
#rxb-wishlist-panel .rxb-wl-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
#rxb-wishlist-panel .rxb-wl-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
#rxb-wishlist-panel .rxb-wl-qty {
font-size: 12.5px;
font-weight: 800;
color: var(--green);
white-space: nowrap;
font-family: "Oswald", "Futura", system-ui, sans-serif;
letter-spacing: 0.04em;
}
#rxb-wishlist-panel .rxb-wl-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
#rxb-wishlist-panel .rxb-wl-est { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
#rxb-wishlist-panel .rxb-wl-est strong { color: var(--green); font-weight: 800; font-size: 13.5px; letter-spacing: 0; }
#rxb-wishlist-panel .rxb-wl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#rxb-wishlist-panel .rxb-wl-btn {
appearance: none;
font-family: "Oswald", "Futura", system-ui, sans-serif;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
padding: 8px 13px;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: all 0.18s ease;
}
#rxb-wishlist-panel .rxb-wl-btn:hover { background: var(--ink); color: var(--gold); }
#rxb-wishlist-panel .rxb-wl-btn.primary { background: var(--gold); border-color: var(--gold); }
#rxb-wishlist-panel .rxb-wl-btn.primary:hover { background: var(--green); border-color: var(--green); color: var(--gold); }
#rxb-wishlist-panel.copied .rxb-wl-btn.primary { background: var(--green); border-color: var(--green); color: var(--gold); }
#rxb-wishlist-panel .rxb-wl-empty-text { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }
/* Tablet/mobile */
@media (max-width: 980px) {
.apply-grid { grid-template-columns: 1fr; }
.apply-side { position: static; }
.apply-form-wrap { padding: 28px 24px 24px; }
}
@media (max-width: 640px) {
.apply-hero { padding: 56px 16px 44px; }
.apply-hero .kicker {
font-size: 10px; letter-spacing: 0.18em;
margin-bottom: 14px;
gap: 8px;
display: inline-flex;
flex-wrap: nowrap;
justify-content: center;
text-align: center;
}
.apply-hero h1.title { font-size: 38px; line-height: 1.05; margin: 0 0 16px; letter-spacing: -0.02em; }
.apply-hero h1.title em { display: inline; }
.apply-hero .sub { font-size: 14.5px; line-height: 1.55; max-width: 320px; margin: 0 auto 22px; }
.apply-hero .trust-mini {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
max-width: 320px;
margin: 14px auto 0;
font-size: 9.5px;
letter-spacing: 0.16em;
justify-items: start;
}
.apply-hero .trust-mini span { gap: 6px; }
.apply-body { padding: 50px 0 80px; }
.apply-process { padding: 24px 22px 20px; }
.apply-form-wrap { padding: 26px 22px 22px; }
#rxb-wishlist-panel { padding: 22px 20px 20px; }
}
/* ===== Product page (v25 - single product layout w/ branded shell) ===== */
.rx-prod {
background: linear-gradient(180deg, #FBF8F0 0%, var(--cream) 100%);
padding: 60px 0 50px;
position: relative;
overflow: visible;
}
.rx-prod::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15,34,0,0.035) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
opacity: 0.6;
}
.rx-prod > .container { position: relative; z-index: 1; }
.rx-crumb {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 36px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-weight: 700;
}
.rx-crumb a { color: var(--muted); text-decoration: none; }
.rx-crumb a:hover { color: var(--ink); }
.rx-crumb .active { color: var(--ink); }
.rx-crumb span:not(.active) { color: rgba(15,34,0,0.30); }
.rx-prod-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
@media (min-width: 981px) {
.rx-prod-gallery {
position: sticky;
top: 28px;
align-self: start;
}
}
.rx-prod-img-main {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 22px;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
padding: 36px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 0 rgba(15,34,0,0.05), 0 18px 36px -22px rgba(15,34,0,0.16);
}
.rx-prod-img-main img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 22px 32px rgba(15,34,0,0.18));
}
.rx-prod-img-placeholder {
background: linear-gradient(135deg, var(--cream) 0%, #F3EDDD 100%);
color: var(--muted);
font-size: 14px;
text-align: center;
padding: 36px;
}
.rx-prod-badge {
position: absolute;
top: 18px;
left: 18px;
font-family: "Oswald", "Futura", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
color: #fff;
z-index: 2;
box-shadow: 0 6px 14px rgba(15,34,0,0.18);
}
.rx-prod-badge.gold { background: var(--gold); color: var(--ink); }
.rx-prod-badge.red { background: #C81E2E; }
.rx-prod-badge.green { background: var(--green); color: var(--gold); }
.rx-prod-thumbs {
display: flex;
gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
}
.rx-prod-thumb {
appearance: none;
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px;
cursor: pointer;
width: 72px;
height: 72px;
display: grid;
place-items: center;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.rx-prod-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rx-prod-thumb:hover { border-color: var(--ink); transform: translateY(-2px); }
.rx-prod-thumb.active { border-color: var(--gold); border-width: 2px; padding: 5px; }
/* Vertical thumb layout (thumbs on LEFT of main image) */
.rx-prod-gallery-layout {
display: grid;
grid-template-columns: 88px 1fr;
gap: 14px;
align-items: start;
}
.rx-prod-thumbs-vertical {
flex-direction: column;
margin-top: 0;
flex-wrap: nowrap;
gap: 10px;
}
.rx-prod-info { padding: 4px 0; }
.rx-prod-brand {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.rx-prod-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 14px;
}
.rx-prod-tagline {
font-size: 16px;
line-height: 1.55;
color: var(--charcoal);
margin: 0 0 26px;
max-width: 46ch;
}
.rx-prod-pricing {
display: flex;
flex-wrap: wrap;
gap: 28px;
padding: 18px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
}
.rx-prod-msrp, .rx-prod-case {
display: flex;
flex-direction: column;
gap: 4px;
}
.rx-prod-msrp .lbl, .rx-prod-case .lbl {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.rx-prod-msrp .val, .rx-prod-case .val {
font-family: "Oswald", "Futura", sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--ink);
line-height: 1;
letter-spacing: -0.01em;
}
.rx-prod-msrp .val small {
font-size: 13px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0;
}
.rx-prod-case .val { color: var(--green); }
.rx-prod-variants { margin-bottom: 24px; }
.rx-prod-variants-lbl {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 10px;
}
.rx-prod-variant-list { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-prod-variant {
appearance: none;
background: #FFFFFF;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 10px 16px;
font-family: inherit;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
transition: all 0.18s ease;
text-align: left;
}
.rx-prod-variant:hover { border-color: var(--ink); transform: translateY(-2px); }
.rx-prod-variant[aria-pressed="true"] {
border-color: var(--gold);
background: rgba(248,182,15,0.08);
}
.rx-prod-variant .t {
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
}
.rx-prod-variant .p {
font-family: "Oswald", "Futura", sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--green);
letter-spacing: 0.02em;
}
.rx-prod-cta-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.rx-prod-cta-row .btn { flex: 1; min-width: 160px; }
.rx-prod-status {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green);
font-weight: 700;
margin: 0 0 16px;
}
.rx-prod-status.error { color: #C81E2E; }
.rx-prod-trust {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
}
.rx-prod-trust li {
font-size: 12.5px;
color: var(--ink);
display: flex;
align-items: center;
gap: 9px;
line-height: 1.4;
}
.rx-prod-trust .dot {
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
/* Spec / description / quote section */
.rx-prod-spec {
background: var(--cream);
padding: 80px 0 90px;
position: relative;
}
.rx-prod-spec::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15,34,0,0.035) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
opacity: 0.5;
}
.rx-prod-spec > .container { position: relative; z-index: 1; }
.rx-prod-spec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 1180px;
margin: 0 auto;
}
.rx-prod-spec-item {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 22px;
padding: 32px 32px 28px;
position: relative;
overflow: hidden;
}
.rx-prod-spec-item .num {
position: absolute;
top: 20px;
right: 24px;
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 56px;
line-height: 1;
color: rgba(15,34,0,0.08);
}
.rx-prod-spec-item h4 {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
margin: 0 0 18px;
}
.rx-prod-spec-item.rx-prod-quote { background: var(--ink); color: #FAF7F1; }
.rx-prod-spec-item.rx-prod-quote h4 { color: var(--gold); }
.rx-prod-spec-item.rx-prod-quote .num { color: rgba(248,182,15,0.18); }
.rx-prod-spec-item.rx-prod-quote blockquote {
margin: 0;
font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 400;
color: #FAF7F1;
line-height: 1.45;
}
.rx-prod-spec-item.rx-prod-quote blockquote p {
font-size: 19px;
margin: 0 0 16px;
}
.rx-prod-spec-item.rx-prod-quote blockquote cite {
display: block;
font-style: normal;
font-family: inherit;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 800;
}
.rx-prod-desc {
font-size: 15px;
line-height: 1.75;
color: var(--charcoal);
}
.rx-prod-desc p { margin: 0 0 14px; }
.rx-prod-desc p:last-child { margin-bottom: 0; }
.rx-prod-desc strong { color: var(--ink); font-weight: 700; }
.rx-prod-bens {
list-style: none;
padding: 60px 0 0 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
}
.rx-prod-stockit { padding-top: 28px !important; }
.rx-prod-stockit .num,
.rx-prod-lab .num,
.rx-prod-spec-item.rx-prod-quote .num { z-index: 0; }
.rx-prod-stockit > h4,
.rx-prod-lab > h4 { position: relative; z-index: 1; padding-right: 64px; }
.rx-prod-bens li {
font-size: 13px;
line-height: 1.5;
color: var(--charcoal);
padding-left: 14px;
border-left: 2px solid var(--gold);
}
.rx-prod-bens li strong {
display: block;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 4px;
}
.rx-prod-lab p {
font-size: 14px;
line-height: 1.6;
color: var(--charcoal);
margin: 0 0 16px;
}
.rx-prod-coa {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 2px solid var(--gold);
padding-bottom: 2px;
text-decoration: none;
}
.rx-prod-coa:hover { color: var(--green); border-color: var(--green); }
.rx-prod-apply-cta {
background: linear-gradient(180deg, var(--cream) 0%, #F3EDDD 100%);
padding: 60px 0 80px;
}
.rx-prod-apply-card {
background: var(--ink);
color: #FAF7F1;
border-radius: 24px;
padding: 44px 48px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 28px;
align-items: center;
position: relative;
overflow: hidden;
}
.rx-prod-apply-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(600px 400px at 110% 110%, rgba(248,182,15,0.18), transparent 55%);
pointer-events: none;
}
.rx-prod-apply-card > * { position: relative; z-index: 1; }
.rx-prod-apply-card .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
.rx-prod-apply-card h3 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 900;
line-height: 1.1;
color: #FAF7F1;
margin: 0 0 12px;
}
.rx-prod-apply-card .sub {
font-size: 14.5px;
line-height: 1.6;
color: rgba(250,247,241,0.78);
margin: 0;
}
.rx-prod-apply-actions { display: flex; flex-direction: column; gap: 10px; }
.rx-prod-apply-actions .btn-ghost { color: #FAF7F1; border-color: rgba(250,247,241,0.4); }
.rx-prod-apply-actions .btn-ghost:hover { background: rgba(250,247,241,0.10); border-color: #FAF7F1; }
@media (max-width: 980px) {
.rx-prod-hero { grid-template-columns: 1fr; gap: 28px; }
.rx-prod-gallery { position: static; }
.rx-prod-gallery-layout {
grid-template-columns: 1fr;
grid-template-areas: "main" "thumbs";
}
.rx-prod-img-main { grid-area: main; }
.rx-prod-thumbs, .rx-prod-thumbs-vertical {
grid-area: thumbs;
flex-direction: row !important;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
padding: 4px 0;
margin-top: 12px;
}
.rx-prod-thumbs .rx-prod-thumb,
.rx-prod-thumbs-vertical .rx-prod-thumb {
flex: 0 0 80px;
width: 80px;
height: 80px;
}
.rx-prod-spec-grid { grid-template-columns: 1fr; }
.rx-prod-apply-card { grid-template-columns: 1fr; padding: 32px 28px; }
.rx-prod-bens { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.rx-prod { padding: 40px 0 36px; }
.rx-prod-spec { padding: 56px 0 70px; }
.rx-prod-spec-item { padding: 26px 24px 22px; }
.rx-prod-spec-item .num { font-size: 44px; top: 16px; right: 18px; }
.rx-prod-trust { grid-template-columns: 1fr; }
.rx-prod-pricing { gap: 18px; padding: 14px 0; }
.rx-prod-msrp .val, .rx-prod-case .val { font-size: 24px; }
.rx-prod-title { font-size: 28px; }
}
/* ===== Tiers ===== */
.tiers { background: var(--cream); }
.tier-shell {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
margin-top: 32px;
align-items: stretch;
}
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
.tier {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 22px 24px;
position: relative;
transition: all 0.2s ease;
}
.tier.featured { background: var(--ink); color: #ECE7D5; border-color: var(--ink); transform: scale(1.02); box-shadow: var(--shadow); }
.tier.featured h3 { color: #fff; }
.tier.featured .price-line { color: var(--gold); }
.tier.featured ul li { color: #C7BFAC; }
.tier.featured ul li svg { color: var(--gold); }
.tier.featured .terms { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.12); }
.tier .ribbon {
position: absolute; top: -12px; right: 24px;
background: var(--gold); color: var(--ink);
font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
padding: 5px 10px; border-radius: 2px; text-transform: uppercase;
}
.tier h3 {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
margin-bottom: 4px;
}
.tier .lbl { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-bottom: 18px; }
.tier.featured .lbl { color: rgba(255,255,255,0.65); }
.tier .price-line { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: -0.02em; margin-bottom: 4px; }
.tier .price-line small { font-size: 13px; color: var(--muted); font-weight: 600; }
.tier .terms { font-size: 12px; color: var(--muted); margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed var(--border); }
.tier ul { list-style: none; margin-bottom: 22px; }
.tier ul li {
font-size: 13px;
color: var(--ink);
display: flex;
gap: 10px;
align-items: flex-start;
padding: 5px 0;
}
.tier ul li svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.tier .btn { width: 100%; }
.margin-card {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
color: #ECE7D5;
padding: 26px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.margin-card h3 {
font-size: 16px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
margin-bottom: 4px;
}
.margin-card p.scen {
font-size: 12px;
color: #BBB28E;
margin-bottom: 18px;
letter-spacing: 0.04em;
}
.margin-chart-wrap { flex: 1; min-height: 180px; position: relative; }
.margin-figs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.margin-figs .fig {
background: rgba(0,0,0,0.25);
padding: 10px 12px;
border-radius: 6px;
}
.margin-figs .fig .l { font-size: 9px; color: #8A8472; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.margin-figs .fig .v { font-size: 18px; font-weight: 900; color: var(--gold); margin-top: 2px; letter-spacing: -0.01em; }
/* ===== Apply form ===== */
.apply-bg {
background: var(--bg);
background-image: linear-gradient(180deg, var(--bg) 0%, var(--cream) 100%);
}
.apply-shell {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
/* ===== Buyer Login vs Apply two-path panel ===== */
.login-or-apply {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: stretch;
}
.loa-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.loa-card:hover {
border-color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.loa-login {
background: linear-gradient(140deg, var(--ink) 0%, #1F1F22 100%);
color: #fff;
border-color: var(--ink);
}
.loa-login .loa-eyebrow { color: var(--gold); }
.loa-login .loa-title { color: #fff; }
.loa-login .loa-sub { color: #BBB28E; }
.loa-login .loa-meta { color: #8A8472; }
.loa-login .loa-meta a { color: var(--gold); border-bottom: 1px dashed var(--gold); padding-bottom: 1px; }
.loa-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.loa-title {
font-size: 24px;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
margin-top: 2px;
}
.loa-sub {
font-size: 13px;
line-height: 1.55;
color: var(--muted);
margin: 4px 0 14px;
}
.loa-btn { align-self: flex-start; }
.loa-btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }
.loa-btn-outline:hover { background: var(--ink); color: var(--gold); }
.loa-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }
.loa-divider {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0 4px;
}
.loa-divider span {
background: var(--bg);
padding: 8px 0;
z-index: 1;
}
.loa-divider::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 1px;
background: var(--border);
transform: translateX(-50%);
z-index: 0;
}
@media (max-width: 900px) {
.login-or-apply {
grid-template-columns: 1fr;
gap: 12px;
}
.loa-card { padding: 22px 20px; }
.loa-title { font-size: 20px; }
.loa-divider {
padding: 0;
}
.loa-divider span {
padding: 6px 14px;
background: #FDFBF6;
border: 1px solid var(--border);
border-radius: 100px;
}
.loa-divider::before {
top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
transform: none;
}
}
/* ===== Apply CTA / Process panel (replaces inline form) ===== */
.apply-cta {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 32px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 22px;
}
.apply-cta-head .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.apply-cta-head h3 {
font-size: 28px;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
}
.apply-process {
display: flex;
flex-direction: column;
gap: 18px;
}
.apply-process-step {
display: grid;
grid-template-columns: 44px 1fr;
gap: 18px;
align-items: flex-start;
position: relative;
}
.apply-process-step::after {
content: "";
position: absolute;
left: 22px;
top: 44px;
bottom: -18px;
width: 1px;
background: var(--border);
z-index: 0;
}
.apply-process-step:last-child::after { display: none; }
.apply-process-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
display: grid;
place-items: center;
font-size: 16px;
font-weight: 900;
box-shadow: 0 6px 14px -4px rgba(248, 182, 15, 0.5);
position: relative;
z-index: 1;
}
.apply-process-body h4 {
font-size: 14px;
font-weight: 900;
color: var(--ink);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.apply-process-body p {
font-size: 13px;
line-height: 1.55;
color: var(--muted);
}
.apply-cta-btn {
width: 100%;
margin-top: 4px;
padding-top: 16px;
padding-bottom: 16px;
font-size: 14px;
letter-spacing: 0.10em;
}
.apply-cta-fineprint {
font-size: 11px;
color: var(--muted);
text-align: center;
letter-spacing: 0.04em;
margin-top: -8px;
}
@media (max-width: 640px) {
.apply-cta { padding: 26px 22px; gap: 20px; }
.apply-cta-head h3 { font-size: 22px; }
.apply-process-step { grid-template-columns: 36px 1fr; gap: 14px; }
.apply-process-num { width: 36px; height: 36px; font-size: 14px; }
.apply-process-step::after { left: 18px; top: 36px; }
.apply-process-body h4 { font-size: 13px; }
.apply-process-body p { font-size: 12px; }
}
.apply-form {
background: var(--bg);
border: 1px solid var(--border);
padding: 32px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.apply-form .fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.apply-form label {
display: block;
font-size: 10px;
font-weight: 700;
color: #5C5750;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 5px;
}
.apply-form input, .apply-form select, .apply-form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 3px;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
background: #FDFBF6;
color: var(--ink);
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.apply-form input::placeholder, .apply-form textarea::placeholder { color: #B5AE9F; font-weight: 400; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
outline: 0;
border-color: var(--ink);
background: #fff;
box-shadow: 0 0 0 3px rgba(248, 182, 15, 0.18);
}
.apply-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.apply-form .field { margin-bottom: 10px; }
.apply-form .full { grid-column: span 2; }
.apply-form textarea { min-height: 78px; resize: vertical; }
.apply-form input[type=checkbox] {
width: 16px !important;
height: 16px !important;
accent-color: var(--gold);
cursor: pointer;
}
.apply-form .apply-step { display: none; }
.apply-form .apply-step.active { display: block; animation: fadeInStep 0.25s ease-out; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.apply-form .apply-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 22px;
}
.apply-form .apply-nav .btn { flex: 0 0 auto; }
.apply-form .stepper .step.done { background: var(--green-mid); color: var(--gold); border-color: var(--green-mid); cursor: pointer; }
.apply-form .stepper .step.upcoming { opacity: 0.55; }
.apply-form .review-block {
background: var(--cream);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 14px;
}
.apply-form .review-block h4 {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
font-weight: 800;
}
.apply-form .review-block dl {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6px 14px;
font-size: 13px;
margin-bottom: 14px;
}
.apply-form .review-block dt { color: var(--muted); font-weight: 600; }
.apply-form .review-block dd { color: var(--ink); font-weight: 600; }
.apply-form .review-block .review-empty { color: var(--muted); font-style: italic; font-size: 12px; }
@media (max-width: 640px) {
.apply-form .review-block dl { grid-template-columns: 1fr; gap: 2px; }
.apply-form .review-block dt { font-size: 11px; margin-top: 6px; }
}
.apply-form .stepper {
display: flex;
gap: 4px;
margin-bottom: 22px;
position: relative;
}
.apply-form .stepper::before {
content: "";
position: absolute;
top: 50%;
left: 8%;
right: 8%;
height: 1px;
background: var(--border);
z-index: 0;
}
.apply-form .step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
padding: 8px 4px;
background: #FDFBF6;
border-radius: 3px;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
border: 1px solid var(--border);
transition: all 0.2s ease;
}
.apply-form .step.active {
background: var(--ink);
color: var(--gold);
border-color: var(--ink);
box-shadow: 0 4px 14px -6px rgba(15, 34, 0, 0.4);
}
.apply-form .step.done {
background: var(--green-mid);
color: var(--gold);
border-color: var(--green-mid);
cursor: pointer;
}
.apply-form .step.done:hover { background: var(--green); }
.apply-form button[type=submit] { width: 100%; margin-top: 0; }
.apply-info h2 { color: var(--ink); }
.apply-info ul { margin-top: 28px; list-style: none; }
.apply-info ul li {
padding: 14px 0;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
gap: 16px;
}
.apply-info ul li:last-child { border-bottom: 1px solid var(--border); }
.apply-info ul li .k { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.apply-info ul li .v { color: var(--muted); text-align: right; }
/* ===== Testimonials ===== */
.testi { background: var(--cream); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 30px 28px;
position: relative;
}
.testi-card .quote {
font-size: 16px;
line-height: 1.55;
color: var(--ink);
font-weight: 500;
margin-bottom: 22px;
}
.testi-card .quote::before {
content: "“";
font-size: 56px;
color: var(--gold);
line-height: 0;
position: relative;
top: 18px;
margin-right: 4px;
font-family: Georgia, serif;
}
.testi-card .author { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.testi-card .av {
width: 42px; height: 42px;
background: var(--green);
color: var(--gold);
display: grid; place-items: center;
font-weight: 800; font-size: 14px;
border-radius: 50%;
letter-spacing: 0.04em;
}
.testi-card .who { font-size: 13px; }
.testi-card .who strong { display: block; color: var(--ink); font-weight: 700; }
.testi-card .who span { color: var(--muted); }
/* ===== FAQ ===== */
.faq-grid { max-width: 880px; margin: 32px auto 0; }
details.faq { border-bottom: 1px solid var(--border); padding: 22px 0; }
details.faq summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
font-size: 17px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.005em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
content: "+";
color: var(--gold-dark);
font-size: 28px;
font-weight: 400;
transition: transform 0.2s ease;
line-height: 1;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
/* ===== Footer ===== */
footer.site {
background: var(--ink);
color: #C7BFAC;
padding: 64px 0 32px;
}
footer.site .grid {
display: grid;
grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr 0.7fr 1.45fr;
gap: 48px;
margin-bottom: 48px;
}
footer.site .container { max-width: 1480px; }
footer.site h5 {
color: #fff;
font-size: 12px;
letter-spacing: 0.2em;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 18px;
}
footer.site ul { list-style: none; }
footer.site ul li { padding: 5px 0; }
footer.site a { font-size: 14px; color: #C7BFAC; white-space: nowrap; }
footer.site a:hover { color: var(--gold); }
footer.site .brandblock { font-size: 13px; line-height: 1.6; color: #8A8472; }
footer.site .brandblock .logo .word { color: #fff; }
footer.site .brandblock p { margin-top: 14px; }
footer.site .news input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 11px 14px;
background: rgba(255,255,255,0.05);
color: #fff;
border: 1px solid rgba(255,255,255,0.14);
font-family: inherit;
margin-bottom: 10px;
border-radius: 3px;
}
footer.site .legal {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 22px;
display: flex;
justify-content: space-between;
font-size: 11px;
letter-spacing: 0.12em;
color: #6B6660;
text-transform: uppercase;
flex-wrap: wrap;
gap: 12px;
}
.agegate {
background: var(--green-mid);
color: var(--gold);
text-align: center;
padding: 14px 0;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
}
/* ===== Theme rec card ===== */
.theme-rec {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
color: #ECE7D5;
border-radius: var(--radius-lg);
padding: 40px;
margin-top: 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: center;
overflow: hidden;
position: relative;
}
.theme-rec::after {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(248,182,15,0.18), transparent 60%);
pointer-events: none;
}
.theme-rec h3 { color: #fff; font-size: 28px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 12px; }
.theme-rec p { color: #BBB28E; font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.theme-rec ul { list-style: none; padding: 0; }
.theme-rec ul li { font-size: 13px; padding: 4px 0; color: #C7BFAC; }
.theme-rec ul li::before { content: "✓"; color: var(--gold); margin-right: 8px; font-weight: 800; }
.theme-card-mock {
background: var(--bg);
color: var(--ink);
border-radius: 6px;
padding: 22px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
position: relative;
z-index: 1;
}
.theme-card-mock .badge { background: var(--gold); color: var(--ink); padding: 4px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; border-radius: 2px; display: inline-block; margin-bottom: 12px; }
.theme-card-mock h4 { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 4px; }
.theme-card-mock .by { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.theme-card-mock .stars { color: var(--gold); font-size: 14px; margin-bottom: 6px; letter-spacing: 0.06em; }
.theme-card-mock .price { font-size: 24px; font-weight: 900; color: var(--green); }
.theme-card-mock .price small { font-size: 12px; color: var(--muted); font-weight: 500; }
/* ===== VIEW DETAIL BUTTON (top-left of product card image) ===== */
.product .imagecanvas .viewdetail {
position: absolute;
bottom: 12px;
left: 12px;
width: 36px;
height: 36px;
background: rgba(255,255,255,0.94);
color: var(--ink);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 800;
line-height: 1;
box-shadow: var(--shadow);
transition: all 0.15s ease;
opacity: 0;
transform: translateY(8px);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.product:hover .imagecanvas .viewdetail { opacity: 1; transform: translateY(0); }
.product .imagecanvas .viewdetail:hover { background: var(--ink); color: var(--gold); transform: scale(1.08); }
@media (max-width: 640px) {
.product .imagecanvas .viewdetail { opacity: 1; transform: none; width: 28px; height: 28px; font-size: 12px; bottom: 8px; left: 8px; }
}
/* ===== PRODUCT DETAIL MODAL ===== */
.pd-overlay {
position: fixed;
inset: 0;
background: rgba(15, 34, 0, 0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 130;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.pd-overlay.open { opacity: 1; pointer-events: auto; }
.pd-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%) scale(0.96);
width: min(900px, calc(100vw - 32px));
max-height: calc(100vh - 60px);
background: var(--bg);
border-radius: var(--radius-lg);
z-index: 140;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
box-shadow: 0 40px 90px -20px rgba(0,0,0,0.55);
display: grid;
grid-template-columns: 1.1fr 1fr;
}
.pd-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.pd-image {
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
display: grid;
place-items: center;
padding: 40px;
position: relative;
overflow: hidden;
}
.pd-image img { max-width: 100%; max-height: 360px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(15,34,0,0.18)); }
.pd-image .pd-badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.pd-image .pd-badge .vendor-tag {
display: inline-block;
font-family: "Oswald", "Futura", "Helvetica Neue", "Inter", system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
padding: 7px 14px;
border-radius: 4px;
line-height: 1;
box-shadow:
0 6px 16px rgba(15,34,0,0.22),
0 2px 4px rgba(15,34,0,0.12),
inset 0 1px 0 rgba(255,255,255,0.18);
text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.pd-image .pd-vendor {
position: absolute;
bottom: 18px;
left: 18px;
background: rgba(0,0,0,0.16);
color: var(--ink);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: 100px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pd-body {
padding: 32px 32px 26px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.pd-body h3 {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--ink);
margin-bottom: 6px;
}
.pd-body .pd-type {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 18px;
}
.pd-body .pd-desc {
font-size: 14px;
color: var(--charcoal);
line-height: 1.6;
margin-bottom: 18px;
}
.pd-body .pd-attrs {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 18px;
padding: 16px 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
margin-bottom: 18px;
font-size: 13px;
}
.pd-body .pd-attrs dt { color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.pd-body .pd-attrs dd { color: var(--ink); font-weight: 600; }
.pd-body .pd-prices {
background: var(--cream);
border-radius: var(--radius-lg);
padding: 16px 18px;
margin-bottom: 18px;
}
.pd-body .pd-prices .row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
font-size: 13px;
}
.pd-body .pd-prices .row.case { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 6px; }
.pd-body .pd-prices .row.case .v { font-size: 22px; font-weight: 900; color: var(--green); letter-spacing: -0.01em; }
.pd-body .pd-prices .lbl { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.pd-body .pd-prices .v { font-weight: 800; color: var(--ink); }
.pd-body .pd-prices small { color: var(--muted); font-size: 11px; font-weight: 600; margin-left: 6px; }
.pd-body .pd-actions {
display: flex;
gap: 10px;
margin-top: auto;
padding-top: 18px;
}
.pd-body .pd-actions .btn { flex: 1; }
.pd-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--ink);
font-size: 22px;
line-height: 1;
z-index: 5;
display: grid;
place-items: center;
transition: all 0.15s ease;
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18);
}
.pd-close:hover { background: var(--ink); color: var(--gold); transform: rotate(90deg); }
/* Modal mobile */
@media (max-width: 720px) {
.pd-modal { grid-template-columns: 1fr; max-height: 90vh; width: calc(100vw - 16px); }
.pd-image { padding: 28px; }
.pd-image img { max-height: 220px; }
.pd-body { padding: 22px 22px 20px; }
.pd-body h3 { font-size: 22px; }
.pd-close { top: 10px; right: 10px; }
}
/* ===== ORDER BUILDER ===== */
.floatcart {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 80;
background: var(--ink);
color: var(--gold);
border-radius: 100px;
padding: 14px 22px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 18px 40px -12px rgba(15,34,0,0.55);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.floatcart:hover { background: var(--gold); color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.floatcart .badge {
background: var(--gold);
color: var(--ink);
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 900;
line-height: 1;
font-variant-numeric: tabular-nums;
box-sizing: border-box;
}
.floatcart:hover .badge { background: var(--ink); color: var(--gold); }
.floatcart .total { color: inherit; font-weight: 900; font-size: 13px; }
.builder-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(2px);
z-index: 90;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.builder-overlay.open { opacity: 1; pointer-events: auto; }
.builder {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
background: var(--bg);
z-index: 100;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
box-shadow: -24px 0 60px -20px rgba(15,34,0,0.45);
}
.builder.open { transform: translateX(0); }
.builder-head {
padding: 24px 28px 20px;
border-bottom: 1px solid var(--border);
background: var(--ink);
color: #fff;
}
.builder-head .row1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.builder-head h3 {
font-size: 18px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold);
}
.builder-head button.close {
color: #C7BFAC;
font-size: 22px;
line-height: 1;
width: 32px;
height: 32px;
border-radius: 50%;
}
.builder-head button.close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.builder-head .sub { font-size: 11px; color: #8A8472; letter-spacing: 0.18em; text-transform: uppercase; }
.builder-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
}
.builder-empty {
text-align: center;
color: var(--muted);
padding: 60px 20px;
}
.builder-empty .ico { font-size: 48px; opacity: 0.3; margin-bottom: 12px; }
.builder-empty p { font-size: 14px; }
.builder-empty .tip { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.blitem {
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
align-items: center;
}
.blitem .thumb {
width: 50px;
height: 50px;
background: var(--cream);
border-radius: 6px;
overflow: hidden;
display: grid;
place-items: center;
border: 1px solid var(--border);
}
.blitem .thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.blitem .info .name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 4px; }
.blitem .info .pack { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.blitem .info .price { font-size: 12px; font-weight: 700; color: var(--green); }
.blitem .ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.blitem .qty {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.blitem .qty button {
width: 26px;
height: 26px;
background: var(--cream);
color: var(--ink);
font-weight: 800;
font-size: 14px;
}
.blitem .qty button:hover { background: var(--ink); color: var(--gold); }
.blitem .qty .count {
width: 36px;
text-align: center;
font-weight: 800;
font-size: 13px;
color: var(--ink);
}
.blitem .remove {
font-size: 10px;
color: var(--muted);
text-decoration: underline;
letter-spacing: 0.06em;
}
.blitem .remove:hover { color: #C81E2E; }
.builder-foot {
padding: 22px 24px;
border-top: 1px solid var(--border);
background: var(--cream);
}
.builder-foot .tier-toggle {
display: flex;
gap: 4px;
background: var(--bg);
padding: 4px;
border-radius: 4px;
border: 1px solid var(--border);
margin-bottom: 16px;
}
.builder-foot .tier-toggle button {
flex: 1;
padding: 8px 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 3px;
color: var(--muted);
}
.builder-foot .tier-toggle button.active {
background: var(--ink);
color: var(--gold);
}
.totals { font-size: 13px; }
.totals .line {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.totals .line .k { color: var(--muted); }
.totals .line .v { color: var(--ink); font-weight: 700; }
.totals .line.discount .v { color: #1A8845; }
.totals .line.total {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--border-strong);
font-size: 16px;
}
.totals .line.total .v { color: var(--green); font-weight: 900; font-size: 20px; letter-spacing: -0.01em; }
.totals .savings {
margin-top: 8px;
padding: 10px 12px;
background: rgba(26,136,69,0.08);
border-left: 3px solid #1A8845;
color: #166B36;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.builder-foot .submit { width: 100%; margin-top: 16px; }
/* ===================================================
DYNAMIC LAYER · animations · decorations · patterns
=================================================== */
/* dot pattern utility */
.dotbg {
background-image: radial-gradient(circle, rgba(15, 34, 0, 0.08) 1px, transparent 1.4px);
background-size: 22px 22px;
}
.dotbg-light {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
background-size: 24px 24px;
}
/* diagonal stripe pattern */
.stripebg {
background-image: repeating-linear-gradient(
135deg,
rgba(15, 34, 0, 0.025) 0px,
rgba(15, 34, 0, 0.025) 1px,
transparent 1px,
transparent 14px
);
}
/* gradient mesh for cream sections */
.meshbg {
background-image:
radial-gradient(circle at 12% 18%, rgba(248, 182, 15, 0.10) 0%, transparent 28%),
radial-gradient(circle at 88% 80%, rgba(15, 34, 0, 0.07) 0%, transparent 30%),
radial-gradient(circle at 50% 100%, rgba(248, 182, 15, 0.06) 0%, transparent 40%);
}
/* decorative absolute container */
.deco {
position: absolute;
pointer-events: none;
z-index: 0;
}
.deco svg { display: block; }
/* botanical leaf, drifting */
@keyframes drift {
0% { transform: translate(0, 0) rotate(var(--start, 0deg)); }
50% { transform: translate(8px, -14px) rotate(calc(var(--start, 0deg) + 8deg)); }
100% { transform: translate(0, 0) rotate(var(--start, 0deg)); }
}
.leaf-deco { animation: drift 9s ease-in-out infinite; transform-origin: 50% 50%; }
.leaf-deco.slow { animation-duration: 14s; }
.leaf-deco.delay { animation-delay: 3s; }
/* floating hero cards */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.hero-card.c1 { --r: 3deg; animation: float 7s ease-in-out infinite; }
.hero-card.c2 { --r: -2deg; animation: float 7s ease-in-out infinite; animation-delay: -2.4s; }
.hero-card.c3 { --r: 2deg; animation: float 7s ease-in-out infinite; animation-delay: -4.8s; }
.hero-card:hover { animation-play-state: paused; }
/* pulse glow on primary CTA */
@keyframes ctaglow {
0%, 100% { box-shadow: 0 6px 0 -2px var(--gold-dark), 0 0 0 0 rgba(248,182,15, 0.5); }
50% { box-shadow: 0 6px 0 -2px var(--gold-dark), 0 0 0 14px rgba(248,182,15, 0); }
}
.btn-primary.btn-arrow { animation: ctaglow 2.6s ease-out infinite; }
/* nav animated underline */
nav.menu a { padding-bottom: 2px; }
nav.menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1.5px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s ease;
}
nav.menu a:hover::after { transform: scaleX(1); }
/* SCROLL REVEAL */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
/* All children become visible when parent has .in, works for any count */
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
.reveal-stagger.in > *:nth-child(n+7) { transition-delay: 0.52s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
.hero-card, .btn-primary.btn-arrow, .leaf-deco { animation: none !important; }
}
/* MARQUEE TICKER */
.marquee {
background: var(--ink);
color: var(--cream);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
padding: 18px 0;
position: relative;
}
.marquee::before, .marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 90px;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.marquee-track {
display: flex;
gap: 60px;
white-space: nowrap;
animation: marquee 40s linear infinite;
width: max-content;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #C7BFAC;
}
.marquee-item .star { color: var(--gold); font-size: 18px; }
.marquee-item strong { color: #fff; font-weight: 800; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Counter num animated, JS handles suffix in textContent, no ::after */
.num.counter { display: inline-block; }
/* ANIMATED COUNTER STATS, hero-stats cells */
.hero-stats .stat { position: relative; padding-left: 14px; }
.hero-stats .stat::before {
content: "";
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 2px;
background: rgba(248,182,15, 0.4);
}
/* Swipe hint, hidden by default, shown only on mobile via media query */
.swipe-hint { display: none; }
/* TOUCH-DEVICE TAP FEEDBACK, light press effect on cards */
@media (hover: none) and (pointer: coarse) {
.product, .brand-card, .program, .how-step, .tier, .testi-card {
transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease, opacity 0.16s ease;
}
.product:active, .brand-card:active, .program:active,
.how-step:active, .tier:active, .testi-card:active {
transform: scale(0.97) !important;
opacity: 0.92;
}
.chip:active, .btn:active, .product-cta:active, .quickadd:active {
transform: scale(0.94) !important;
}
/* Mobile carousel: highlight the centered/active card */
.carousel-active {
transform: scale(1.02) !important;
box-shadow: 0 16px 40px -16px rgba(15, 34, 0, 0.4) !important;
}
}
/* Mobile: animated underline on swipe hint to draw attention */
@keyframes swipePulse {
0%, 100% { background: rgba(248,182,15,0.12); }
50% { background: rgba(248,182,15,0.22); }
}
@media (max-width: 640px) {
.swipe-hint { animation: swipePulse 2.4s ease-in-out infinite; }
}
/* MADE IN AUSTIN STAMP */
.stamp {
width: 130px;
height: 130px;
border: 2px solid var(--gold);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--gold);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
line-height: 1.25;
transform: rotate(-8deg);
background: rgba(248,182,15, 0.04);
position: relative;
}
.stamp::before {
content: "";
position: absolute;
inset: 8px;
border: 1px dashed rgba(248,182,15, 0.4);
border-radius: 50%;
}
.stamp .star { font-size: 16px; margin: 4px 0 2px; }
/* Section number decoration */
.section-num {
position: absolute;
right: 28px;
top: 56px;
font-size: 200px;
font-weight: 900;
line-height: 1;
color: rgba(15, 34, 0, 0.04);
letter-spacing: -0.04em;
pointer-events: none;
user-select: none;
z-index: 0;
}
.why .section-num,
.howitworks .section-num { color: rgba(248, 182, 15, 0.06); }
/* Decorative section divider */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--gold);
margin: 0 auto 18px;
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
font-weight: 800;
}
.divider::before, .divider::after {
content: "";
width: 56px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Dot bullets between trust items */
.trust .item + .item { position: relative; }
/* Bigger, bolder hero card hover ring */
.hero-card { box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5), 0 0 0 0 rgba(248, 182, 15, 0); }
.hero-card:hover { box-shadow: 0 32px 70px -18px rgba(0,0,0,0.55), 0 0 0 4px rgba(248, 182, 15, 0.18); }
/* Catalog top corner ornament */
.catalog { position: relative; }
/* Programs section deco */
.programs-section { position: relative; overflow: hidden; }
/* Subtle hover scale for brand cards */
.brand-card { transform: translateY(0) scale(1); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; }
.brand-card:hover { transform: translateY(-6px) scale(1.005); box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); }
/* Buyer login pill */
.login-link { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 16px; border: 1px solid var(--border); border-radius: 100px; transition: all 0.15s ease; line-height: 1; white-space: nowrap; }
.login-link:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
/* ===================================================
EXTENDED TEXTURES · DIVIDERS · DYNAMICS · MOBILE
=================================================== */
/* SCROLL PROGRESS BAR */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 200;
pointer-events: none;
}
.scroll-progress .bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
box-shadow: 0 0 12px rgba(248,182,15,0.5);
transition: width 0.05s linear;
}
/* SVG NOISE / GRAIN, paper-like texture */
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.045;
mix-blend-mode: multiply;
pointer-events: none;
z-index: -1;
}
.grain-light::after { opacity: 0.08; mix-blend-mode: overlay; }
/* TOPOGRAPHIC LINES, botanical brand-fit */
.topo {
position: relative;
}
.topo::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 600px 200px at 30% 50%, transparent 0%, transparent 36%, rgba(15,34,0,0.04) 38%, transparent 40%, transparent 50%, rgba(15,34,0,0.04) 52%, transparent 54%, transparent 64%, rgba(15,34,0,0.04) 66%, transparent 68%),
radial-gradient(ellipse 700px 240px at 75% 70%, transparent 0%, transparent 36%, rgba(15,34,0,0.04) 38%, transparent 40%, transparent 50%, rgba(15,34,0,0.04) 52%, transparent 54%, transparent 64%, rgba(15,34,0,0.04) 66%, transparent 68%);
pointer-events: none;
z-index: 0;
}
/* HALFTONE DOTS gradient */
.halftone {
background-image:
radial-gradient(circle at 0% 0%, rgba(248,182,15, 0.3) 1px, transparent 1.6px),
radial-gradient(circle at 50% 50%, rgba(248,182,15, 0.18) 1px, transparent 1.4px);
background-size: 16px 16px, 32px 32px;
background-position: 0 0, 8px 8px;
}
/* DIAGONAL HATCH overlay */
.hatch {
background-image: repeating-linear-gradient(
45deg,
rgba(15, 34, 0, 0.04) 0px,
rgba(15, 34, 0, 0.04) 1px,
transparent 1px,
transparent 8px
);
}
/* WAVE DIVIDER, SVG between sections */
.wave-divider {
display: block;
width: 100%;
height: 60px;
line-height: 0;
margin: 0;
overflow: hidden;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }
/* DIAGONAL section transition */
.skew-top { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.skew-bottom { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }
/* VARIED REVEAL DIRECTIONS */
.reveal-left {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right {
opacity: 0;
transform: translateX(32px);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-scale {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }
/* PARALLAX deco, driven by JS */
.parallax { transition: transform 0.05s linear; }
/* MOBILE NAV HAMBURGER */
.nav-toggle {
display: none;
width: 40px;
height: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
background: transparent;
border: 0;
cursor: pointer;
z-index: 110;
position: relative;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
transition: transform 0.25s ease, opacity 0.2s ease;
border-radius: 2px;
}
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* MOBILE MENU DRAWER, slides in from left to match hamburger position */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--ink);
color: #ECE7D5;
z-index: 100;
transform: translateX(-100%);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
padding: 0 32px 32px;
overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu .mm-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; margin: 4px 0 8px; border-left: 2px solid var(--gold); }
.mobile-menu .mm-sub a { font-size: 14px !important; opacity: 0.85; font-weight: 500 !important; padding: 6px 0 !important; }
.mobile-menu .mm-sub a:hover { opacity: 1; color: var(--gold) !important; }
/* BRANDS standout in mobile menu (has dropdown of 5 brands) */
.mobile-menu .mm-brands-trigger {
color: var(--gold) !important;
border-left: 3px solid var(--gold);
padding-left: 12px !important;
margin-left: -15px;
}
.mobile-menu .mm-brands-trigger::after {
content: "▾" !important;
color: var(--gold) !important;
font-size: 16px !important;
}
.mobile-menu nav a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.04em;
color: #ECE7D5;
text-transform: uppercase;
}
.mobile-menu nav a:hover, .mobile-menu nav a:focus { color: var(--gold); }
.mobile-menu nav a::after {
content: "→";
color: var(--gold);
font-size: 18px;
}
.mobile-menu .mm-cta {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-menu .mm-cta .btn { padding: 16px 22px; font-size: 13px; }
.mobile-menu .mm-foot {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.1);
color: #8A8472;
font-size: 12px;
line-height: 1.6;
}
.mobile-menu .mm-foot a { color: var(--gold); }
/* responsive */
@media (max-width: 1024px) {
.nav-toggle { display: flex; }
.nav {
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
gap: 0;
column-gap: 8px;
}
.nav-toggle { grid-column: 1; margin: 0; justify-self: start; }
.logo {
grid-column: 2;
flex: 0 1 auto;
justify-self: center;
justify-content: center;
gap: 10px;
margin: 0;
}
.logo svg.brandmark { height: 32px; }
.logo .tagline { display: none; }
.tagline-link { display: none; }
.menu { display: none; }
.nav-actions { grid-column: 3; justify-self: end; gap: 0; }
.nav-actions .login-link, .nav-actions .btn { display: none; }
.section-num { font-size: 110px; right: 16px; top: 36px; }
.hero-card.c1, .hero-card.c2, .hero-card.c3 { width: 200px; }
}
@media (max-width: 1024px) {
.hero .container { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { height: 320px; max-width: 480px; margin: 0 auto; }
.hero-card.c1 { right: 20px; top: 0; }
.hero-card.c2 { right: 0; top: 100px; }
.hero-card.c3 { right: 80px; top: 180px; }
.programs-grid { grid-template-columns: repeat(2, 1fr); }
.product-grid { grid-template-columns: repeat(3, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.why-cell:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.08); }
.why-cell:nth-child(2n) { border-right: 0; }
.tier-shell { grid-template-columns: 1fr; }
.testi-grid { grid-template-columns: 1fr; }
.apply-shell { grid-template-columns: 1fr; gap: 40px; }
.b-kingk, .b-gud, .b-grh, .b-grass, .b-lucy { grid-column: span 6; }
footer.site .grid { grid-template-columns: 1fr 1fr; }
.theme-rec { grid-template-columns: 1fr; }
nav.menu, .login-link { display: none; }
.trust .row { grid-template-columns: repeat(2, 1fr); }
.how-steps { grid-template-columns: 1fr; }
.builder { width: 100%; max-width: 420px; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
.section { padding: 0; }
.sec-head { margin-bottom: 28px; }
h2.title { font-size: 30px; }
.sub { font-size: 15px; }
.programs-grid { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.product .imagecanvas { height: 160px; padding: 12px; }
.product h4 { font-size: 13px; min-height: 34px; }
.product .ptype { font-size: 10px; }
.product .pricing-row .price { font-size: 16px; }
/* Hide pack-badge on mobile, pricing row already shows the pack info */
.product .imagecanvas .pack-badge { display: none; }
/* Smaller, tighter top badge so 'Best Seller' fits without truncating */
.product .imagecanvas .badge { top: 8px; left: 8px; right: 8px; }
.product .imagecanvas .badge .vendor-tag {
font-size: 8px;
padding: 3px 6px;
letter-spacing: 0.10em;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
/* Vendor tag in card body smaller too */
.product .meta .vendor-tag { font-size: 8px; padding: 3px 7px; letter-spacing: 0.14em; }
.product .imagecanvas .quickadd { width: 30px; height: 30px; font-size: 18px; bottom: 8px; right: 8px; }
.why-grid { grid-template-columns: 1fr; }
.why-cell { border-right: 0 !important; padding: 26px 22px; }
.b-kingk, .b-gud, .b-grh, .b-grass, .b-lucy { grid-column: span 12; min-height: 220px; }
.brand-card .name { font-size: 26px; }
.apply-form { padding: 22px 18px; }
.apply-form .fieldgrid { grid-template-columns: 1fr; gap: 6px; }
.apply-form .full { grid-column: span 1; }
.apply-form .field { margin-bottom: 8px; }
.apply-form label { font-size: 9px; letter-spacing: 0.06em; margin-bottom: 4px; }
.apply-form input, .apply-form select, .apply-form textarea { padding: 10px 12px; font-size: 14px; }
.apply-form .stepper { gap: 3px; margin-bottom: 18px; }
.apply-form .stepper .step { padding: 7px 2px; font-size: 8px; letter-spacing: 0.04em; }
.apply-form .apply-nav { flex-direction: row-reverse; }
.apply-form .apply-nav .btn { font-size: 11px; padding: 12px 14px; flex: 1; }
footer.site .grid { grid-template-columns: 1fr; gap: 28px; }
footer.site { padding: 40px 0 20px; }
.topbar .links { display: none; }
.topbar .container > div:first-child span:last-child { display: none; }
.agegate { font-size: 10px; letter-spacing: 0.14em; }
.hero { padding: 48px 0 56px; }
.hero h1 { font-size: 36px; }
.hero p.lede { font-size: 16px; }
.hero-cta .btn { padding: 12px 18px; font-size: 12px; flex: 1; min-width: 140px; }
.hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; padding-top: 18px; }
.hero-stats .stat { padding-left: 10px; }
.hero-stats .stat .num { font-size: 24px; }
.hero-stats .stat .lbl { font-size: 9px; letter-spacing: 0.12em; }
/* Hero visual becomes a horizontal swipe carousel on mobile */
.hero-visual {
height: auto !important;
max-width: 100vw !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 12px 20px 24px;
display: flex;
flex-direction: row;
gap: 14px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
position: static;
box-sizing: border-box;
}
.hero-visual::-webkit-scrollbar { display: none; }
.hero-card.c1,
.hero-card.c2,
.hero-card.c3 {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
flex: 0 0 78%;
max-width: 290px;
min-width: 240px;
transform: none !important;
animation: none !important;
scroll-snap-align: start;
scroll-snap-stop: always;
z-index: 1 !important;
}
.hero-card:hover { transform: none !important; }
.hero-card .pviz { height: 130px; }
.hero-card h4 { font-size: 15px; min-height: 0; }
.hero-card .meta .price { font-size: 16px; }
.tier-grid { grid-template-columns: 1fr; }
.tier.featured { transform: none; }
.tier-shell { grid-template-columns: 1fr; gap: 16px; }
.builder { width: 100%; }
.floatcart { bottom: 16px; right: 16px; padding: 11px 18px; font-size: 11px; }
.deco { display: none; }
.deco.deco-mobile { display: block; }
.stamp { width: 100px; height: 100px; font-size: 9px; }
.section-num { font-size: 80px; right: 12px; top: 28px; }
.marquee { padding: 12px 0; }
.marquee-item { font-size: 12px; gap: 10px; }
.marquee-item .star { font-size: 14px; }
.how-step { padding: 26px 22px; }
.how-step h3 { font-size: 18px; }
.filters-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.chip { padding: 7px 12px; font-size: 11px; }
.testi-card { padding: 24px 22px; }
details.faq summary { font-size: 15px; }
.builder-foot .tier-toggle button { font-size: 9px; padding: 8px 4px; letter-spacing: 0.06em; }
/* ======================================================
MOBILE HORIZONTAL CAROUSELS
Long sections become left-to-right swipe with scroll-snap
====================================================== */
/* shared carousel base */
.programs-grid,
.how-steps,
.brands-grid,
.why-grid,
.tier-grid,
.testi-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
scroll-padding-right: 20px;
gap: 14px;
padding: 8px 20px 18px;
margin: 0 -20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.programs-grid::-webkit-scrollbar,
.how-steps::-webkit-scrollbar,
.brands-grid::-webkit-scrollbar,
.why-grid::-webkit-scrollbar,
.tier-grid::-webkit-scrollbar,
.testi-grid::-webkit-scrollbar { display: none; }
/* card sizing inside carousels, consistent across all */
.programs-grid > .program,
.how-steps > .how-step,
.tier-grid > .tier,
.testi-grid > .testi-card,
.why-grid > .why-cell,
.brands-grid > .brand-card {
flex: 0 0 82%;
max-width: 310px;
min-width: 250px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.brands-grid > .brand-card {
grid-column: unset !important;
min-height: 240px;
}
/* why-cell needs its own borders since the grid container's border is gone */
.why-grid > .why-cell {
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg);
background: var(--bg);
padding: 28px 22px;
}
/* featured tier: don't scale on mobile */
.tier.featured { transform: none !important; }
/* Swipe hint under section heads on mobile */
.has-carousel { position: relative; }
.swipe-hint {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 6px 12px;
background: rgba(248, 182, 15, 0.12);
color: var(--gold-dark);
border-radius: 100px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.swipe-hint .arrow {
display: inline-block;
animation: swipe-bob 1.6s ease-in-out infinite;
}
@keyframes swipe-bob {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
/* edge-fade gradient on right side of carousel sections */
.programs-section .container,
.howitworks .container,
.brand-portfolio .container,
.why .container,
.tiers .container,
.testi .container { position: relative; }
.programs-section .container::after,
.howitworks .container::after,
.brand-portfolio .container::after,
.why .container::after,
.tiers .container::after,
.testi .container::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 32px;
pointer-events: none;
z-index: 5;
}
.programs-section .container::after,
.testi .container::after,
.brand-portfolio .container::after,
.why .container::after,
.tiers .container::after {
background: linear-gradient(90deg, transparent, var(--cream));
}
.howitworks .container::after {
background: linear-gradient(90deg, transparent, var(--ink));
}
/* Tier shell becomes single column with chart below */
.tier-shell { grid-template-columns: 1fr; gap: 20px; }
.margin-card { margin-top: 4px; }
/* prevent horizontal scroll in body from carousel margins */
body { overflow-x: hidden; }
}
/* v6 belt-and-suspenders, force builder/overlay positioning */
.builder, #builder {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 100 !important;
}
.builder-overlay, #builder-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 90 !important;
}
.floatcart, #floatcart {
position: fixed !important;
z-index: 80 !important;
}
/* Wholesale tier pricing table (product page) */
.rxc-tier-table { margin: 24px 0; padding: 20px; background: var(--cream); border: 1px solid rgba(15, 34, 0, 0.10); border-radius: 12px; }
.rxc-tier-table-title { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.rxc-tier-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.rxc-tier-grid th { text-align: left; padding: 8px 10px; border-bottom: 2px solid rgba(15, 34, 0, 0.12); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rxc-tier-grid td { padding: 10px; border-bottom: 1px solid rgba(15, 34, 0, 0.06); font-weight: 600; color: var(--ink); }
.rxc-tier-grid td strong { color: var(--green); font-weight: 900; }
.rxc-tier-grid tr:last-child td { border-bottom: 0; }
.rxc-tier-sub { display: block; font-size: 9px; opacity: 0.6; font-weight: 600; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.rxc-tier-note { font-size: 11px; color: var(--muted); margin-top: 10px; font-style: italic; }
@media (max-width: 640px) {
.rxc-tier-grid { font-size: 11px; }
.rxc-tier-grid th, .rxc-tier-grid td { padding: 6px 4px; }
.rxc-tier-sub { display: none; }
}
/* ============================================================
COLLECTION PAGE TEMPLATE (rxc- prefix)
============================================================ */
.rxc-hero {
position: relative;
color: #fff;
padding: 56px 0 28px;
overflow: hidden;
}
.rxc-hero-letter {
position: absolute;
right: -40px;
top: -60px;
font-size: 380px;
font-weight: 900;
line-height: 1;
color: rgba(255,255,255,0.08);
pointer-events: none;
z-index: 1;
}
.rxc-hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
align-items: center;
position: relative;
z-index: 2;
}
.rxc-hero-text .kicker {
color: rgba(255,255,255,0.7);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
}
.rxc-hero-title {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0 0 20px;
}
.rxc-hero-intro {
font-size: 16px;
line-height: 1.65;
opacity: 0.92;
margin-bottom: 22px;
max-width: 540px;
}
.rxc-hero-intro p { margin: 0 0 10px; }
.rxc-hero-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
opacity: 0.85;
margin-bottom: 16px;
}
.rxc-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.rxc-hero-media {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4/3;
background: rgba(0,0,0,0.18);
display: flex;
align-items: center;
justify-content: center;
}
.rxc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxc-hero-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 200px;
font-weight: 900;
color: rgba(255,255,255,0.18);
}
/* Hero decorative SVGs for collection hero */
.rxc-hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.rxc-hero-svg-1 { position: absolute; left: -40px; bottom: -40px; width: 280px; height: 280px; opacity: 0.7; }
.rxc-hero-svg-2 { position: absolute; right: 18%; top: 14%; width: 260px; height: 140px; opacity: 0.6; }
.rxc-hero-svg-3 { position: absolute; left: 42%; top: -30px; width: 80px; height: 80px; opacity: 0.5; }
/* Brand gradient backgrounds for collection hero/footer */
.rxc-brand-kingk { background: linear-gradient(135deg, #1A1A1A 0%, #3A2900 100%); }
.rxc-brand-gud { background: linear-gradient(135deg, #FF8B5C 0%, #B23A6B 100%); }
.rxc-brand-grh { background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%); }
.rxc-brand-grass { background: linear-gradient(135deg, #5A4623 0%, #2E230F 100%); }
.rxc-brand-lucy { background: linear-gradient(135deg, #B85C97 0%, #5C2A6E 100%); }
.rxc-brand-default { background: linear-gradient(135deg, var(--green) 0%, var(--ink) 100%); }
/* Product grid */
.rxc-products { background: var(--cream); padding: 0 0 56px; margin-top: 0; }
.rxc-products .sec-head { margin-bottom: 14px; padding-top: 14px; }
.rxc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.rxc-card {
background: #fff;
border: 1.5px solid rgba(15,34,0,0.18);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
display: flex;
flex-direction: column;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.rxc-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(15,34,0,0.10);
border-color: var(--gold);
}
.rxc-card-media {
aspect-ratio: 1;
background: var(--cream);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rxc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.rxc-card-placeholder {
font-size: 80px;
font-weight: 900;
color: rgba(15,34,0,0.15);
}
.rxc-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rxc-card-vendor {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.rxc-card-title {
font-size: 16px;
font-weight: 800;
line-height: 1.2;
margin: 0;
letter-spacing: -0.01em;
}
.rxc-card-tag {
font-size: 13px;
line-height: 1.45;
color: var(--muted);
margin: 0;
}
.rxc-card-foot {
margin-top: auto;
padding-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(15,34,0,0.06);
}
.rxc-card-price { font-size: 13px; color: var(--muted); }
.rxc-card-price strong { color: var(--ink); font-weight: 800; font-size: 15px; }
.rxc-card-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold-dark);
}
.rxc-card-arrow { display: inline-block; transition: transform 0.2s ease; margin-left: 2px; }
.rxc-card:hover .rxc-card-arrow { transform: translateX(3px); }
.rxc-empty {
background: #fff;
border: 1px dashed rgba(15,34,0,0.18);
border-radius: 12px;
padding: 36px 28px;
text-align: center;
font-size: 14px;
color: var(--muted);
}
.rxc-empty a { color: var(--gold-dark); font-weight: 700; text-decoration: underline; }
/* Collection footer banner (SEO content) */
.rxc-footer-banner {
color: #fff;
padding: 48px 0 60px;
position: relative;
overflow: hidden;
}
.rxc-footer-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 2;
}
.rxc-footer-media {
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4/3;
background: rgba(0,0,0,0.18);
}
.rxc-footer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxc-footer-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 180px; font-weight: 900;
color: rgba(255,255,255,0.20);
}
.rxc-footer-text .kicker {
color: rgba(255,255,255,0.7);
font-size: 11px; letter-spacing: 0.24em;
text-transform: uppercase; font-weight: 700;
margin-bottom: 14px;
}
.rxc-footer-title {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
line-height: 1.06;
margin: 0 0 18px;
letter-spacing: -0.01em;
}
.rxc-footer-body {
font-size: 15px;
line-height: 1.65;
opacity: 0.92;
margin-bottom: 26px;
}
.rxc-footer-body p { margin: 0 0 12px; }
.rxc-footer-body p:last-child { margin: 0; }
.rxc-footer-cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 980px) {
.rxc-hero-grid, .rxc-footer-grid { grid-template-columns: 1fr; }
.rxc-hero-media, .rxc-footer-media { aspect-ratio: 16/9; max-width: 100%; }
.rxc-grid { grid-template-columns: repeat(2, 1fr); }
.rxc-hero-letter { font-size: 260px; right: -20px; top: -30px; }
}
@media (max-width: 540px) {
.rxc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rxc-hero { padding: 20px 0 28px; }
.rxc-hero-letter { font-size: 180px; }
}
/* ============================================================
TIERS V2 - clean, consistent 4-card layout + profit panel
============================================================ */
.section.tiers-v2 { background: var(--cream); padding-top: 72px; padding-bottom: 88px; }
.tiers-v2 .sec-head { margin-bottom: 40px; }
.t2-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.t2-card {
background: #fff;
border: 1px solid rgba(15, 34, 0, 0.08);
border-radius: 16px;
padding: 28px 22px 24px;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.t2-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 34, 0, 0.10);
border-color: rgba(248, 182, 15, 0.4);
}
.t2-card-featured {
background: linear-gradient(180deg, #0F2200 0%, #1a2e10 100%);
border-color: #0F2200;
color: #ECE7D5;
box-shadow: 0 18px 44px rgba(15, 34, 0, 0.20);
transform: translateY(-8px);
}
.t2-card-featured:hover { transform: translateY(-12px); box-shadow: 0 24px 52px rgba(15, 34, 0, 0.28); border-color: #0F2200; }
.t2-card-invite {
background: #ffffff;
border: 1.5px solid var(--gold);
box-shadow: 0 12px 32px rgba(248, 182, 15, 0.16);
}
.t2-card-invite:hover { border-color: var(--gold-dark); box-shadow: 0 18px 40px rgba(248, 182, 15, 0.24); }
.t2-ribbon {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--gold);
color: var(--ink);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 100px;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(248, 182, 15, 0.35);
}
.t2-ribbon-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--ink);
}
.t2-head { margin-bottom: 20px; }
.t2-num {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
margin-bottom: 6px;
}
.t2-card-featured .t2-num { color: rgba(248, 182, 15, 0.85); }
.t2-name {
font-size: 24px;
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1;
color: var(--ink);
text-transform: uppercase;
}
.t2-card-featured .t2-name { color: #fff; }
.t2-qual {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 18px;
border-bottom: 1px dashed rgba(15, 34, 0, 0.12);
margin-bottom: 18px;
}
.t2-card-featured .t2-qual { border-bottom-color: rgba(248, 182, 15, 0.18); }
.t2-qual-prefix, .t2-qual-suffix {
font-size: 12px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.02em;
}
.t2-card-featured .t2-qual-prefix, .t2-card-featured .t2-qual-suffix { color: rgba(255, 255, 255, 0.6); }
.t2-qual-amt {
font-size: 38px;
font-weight: 900;
color: var(--green);
letter-spacing: -0.025em;
line-height: 1;
}
.t2-card-featured .t2-qual-amt { color: var(--gold); }
.t2-card-invite .t2-qual-amt-text {
font-size: 32px;
font-weight: 900;
color: var(--gold-dark);
letter-spacing: -0.02em;
line-height: 1;
font-style: italic;
}
.t2-qual-plus { font-size: 28px; opacity: 0.65; margin-left: 1px; }
.t2-pos {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0 0 18px;
min-height: 60px;
}
.t2-card-featured .t2-pos { color: rgba(255, 255, 255, 0.72); }
.t2-perks {
list-style: none;
padding: 0;
margin: 0 0 24px;
flex: 1;
}
.t2-perks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--ink);
padding: 6px 0;
line-height: 1.4;
}
.t2-perks li svg {
color: var(--green);
flex-shrink: 0;
margin-top: 3px;
}
.t2-card-featured .t2-perks li { color: #ECE7D5; }
.t2-card-featured .t2-perks li svg { color: var(--gold); }
.t2-card-invite .t2-perks li svg { color: var(--gold-dark); }
.t2-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 18px;
border: 1px solid var(--ink);
border-radius: 100px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
transition: all 0.18s ease;
}
.t2-cta:hover { background: var(--ink); color: var(--gold); }
.t2-cta span { transition: transform 0.18s ease; }
.t2-cta:hover span { transform: translateX(4px); }
.t2-cta-primary {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
box-shadow: 0 6px 18px rgba(248, 182, 15, 0.35);
}
.t2-cta-primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.t2-card-invite .t2-cta { border-color: var(--gold-dark); color: var(--gold-dark); }
.t2-card-invite .t2-cta:hover { background: var(--gold-dark); color: #fff; }
/* PROFIT panel below tiers */
.t2-profit {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
border-radius: 20px;
padding: 36px 40px;
color: #ECE7D5;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: center;
box-shadow: 0 20px 50px rgba(15, 34, 0, 0.18);
}
.t2-profit-eyebrow {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
margin-bottom: 10px;
}
.t2-profit-title {
font-size: clamp(24px, 3vw, 34px);
font-weight: 900;
line-height: 1.08;
margin: 0 0 12px;
letter-spacing: -0.01em;
color: #fff;
}
.t2-profit-title em { font-style: italic; color: var(--gold); }
.t2-profit-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.55;
margin: 0 0 22px;
max-width: 480px;
}
.t2-profit-figs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.t2-profit-fig {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px 14px;
}
.t2-profit-fig-accent {
background: rgba(248, 182, 15, 0.10);
border-color: rgba(248, 182, 15, 0.32);
}
.t2-profit-fig-label {
display: block;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 4px;
}
.t2-profit-fig-value {
display: block;
font-size: 26px;
font-weight: 900;
color: #fff;
letter-spacing: -0.01em;
line-height: 1;
}
.t2-profit-fig-accent .t2-profit-fig-value { color: var(--gold); }
.t2-profit-fig-value small {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.55);
margin-left: 2px;
}
.t2-profit-fig-accent .t2-profit-fig-value small { color: rgba(248, 182, 15, 0.7); }
.t2-profit-chart {
background: rgba(0, 0, 0, 0.22);
border-radius: 14px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.t2-profit-chart-head {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 12px;
}
.t2-profit-chart-wrap {
position: relative;
min-height: 220px;
width: 100%;
}
.t2-profit-chart-wrap canvas {
max-width: 100% !important;
height: auto !important;
}
@media (max-width: 1100px) {
.t2-profit-chart-wrap { min-height: 200px; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
.t2-profit-chart { padding: 14px 12px; }
.t2-profit-chart-wrap { min-height: 0; aspect-ratio: 4 / 3; }
.t2-profit-title { font-size: 22px; line-height: 1.15; }
.t2-profit-fig-value { font-size: 26px; }
}
@media (max-width: 1100px) {
.t2-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.t2-card-featured { transform: none; }
.t2-card-featured:hover { transform: translateY(-4px); }
.t2-profit { grid-template-columns: 1fr; padding: 28px 24px; gap: 24px; }
}
@media (max-width: 640px) {
.t2-grid { grid-template-columns: 1fr; gap: 16px; }
.t2-card { padding: 24px 20px 22px; }
.t2-qual-amt { font-size: 32px; }
.t2-profit { padding: 24px 20px; }
.t2-profit-figs { grid-template-columns: 1fr; }
}
/* ============================================================
COLLECTION SEO - view-more / view-less toggle (with localStorage)
============================================================ */
.rxc-seo-wrap { background: var(--cream); padding: 40px 0 56px; position: relative; }
.rxc-seo-wrap .container { max-width: 880px; }
.rxc-seo-inner {
position: relative;
max-height: 380px;
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.rxc-seo-wrap[data-expanded="true"] .rxc-seo-inner {
max-height: 12000px;
}
.rxc-seo-inner::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(180deg, transparent 0%, var(--cream) 90%);
pointer-events: none;
transition: opacity 0.3s ease;
opacity: 1;
}
.rxc-seo-wrap[data-expanded="true"] .rxc-seo-inner::after { opacity: 0; }
.rxc-seo-inner h2 {
font-size: clamp(26px, 3vw, 36px);
font-weight: 900;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 14px;
line-height: 1.1;
}
.rxc-seo-inner h3 {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 900;
color: var(--green);
margin: 36px 0 14px;
letter-spacing: -0.005em;
line-height: 1.15;
}
.rxc-seo-inner h4 {
font-size: 16px;
font-weight: 800;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
margin: 22px 0 6px;
line-height: 1.3;
}
.rxc-seo-inner p {
font-size: 15px;
line-height: 1.65;
color: var(--ink);
margin: 0 0 12px;
opacity: 0.88;
}
.rxc-seo-inner p strong { color: var(--ink); opacity: 1; }
.rxc-seo-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 13px 22px;
background: var(--ink);
color: var(--gold);
border: none;
border-radius: 100px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.18s ease;
}
.rxc-seo-toggle:hover { background: var(--green); color: #fff; }
.rxc-seo-toggle span { transition: transform 0.18s ease; display: inline-block; }
.rxc-seo-wrap[data-expanded="true"] .rxc-seo-toggle span { transform: rotate(180deg); }
/* ============================================================
SEO LANDING PAGES (/pages/wholesale, /pages/private-label)
============================================================ */
.rxc-seo-page-hero {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
color: #ECE7D5;
padding: 80px 0 64px;
position: relative;
overflow: hidden;
}
.rxc-seo-page-hero-inner { max-width: 880px; }
.rxc-seo-page-hero .kicker {
color: var(--gold);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
}
.rxc-seo-page-h1 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 900;
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0;
color: #fff;
text-transform: uppercase;
}
.rxc-seo-page-body { background: var(--cream); padding: 64px 0 88px; }
.rxc-seo-page-content { max-width: 880px; margin: 0 auto; }
.rxc-seo-page-content > p:first-of-type {
font-size: 17px;
line-height: 1.65;
color: var(--ink);
margin: 0 0 32px;
opacity: 0.92;
}
.rxc-seo-page-content h2 {
font-size: clamp(26px, 3vw, 36px);
font-weight: 900;
color: var(--ink);
letter-spacing: -0.01em;
margin: 48px 0 16px;
line-height: 1.1;
}
.rxc-seo-page-content h2:first-child { margin-top: 0; }
.rxc-seo-page-content h3 {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 900;
color: var(--green);
margin: 36px 0 14px;
letter-spacing: -0.005em;
line-height: 1.15;
}
.rxc-seo-page-content h4 {
font-size: 16px;
font-weight: 800;
color: var(--ink);
margin: 22px 0 6px;
line-height: 1.3;
}
.rxc-seo-page-content p {
font-size: 15px;
line-height: 1.65;
color: var(--ink);
margin: 0 0 12px;
opacity: 0.88;
}
.rxc-seo-page-content p strong { color: var(--ink); opacity: 1; }
.rxc-seo-page-content ul, .rxc-seo-page-content ol {
margin: 0 0 18px;
padding-left: 22px;
color: var(--ink);
}
.rxc-seo-page-content li {
font-size: 15px;
line-height: 1.6;
margin-bottom: 8px;
opacity: 0.88;
}
.rxc-seo-page-cta {
max-width: 880px;
margin: 48px auto 0;
padding-top: 32px;
border-top: 1px solid rgba(15, 34, 0, 0.12);
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* v60f: Brand logo display in collection hero - MAXIMIZED */
.rxc-hero-media { display: flex; align-items: center; justify-content: center; }
.rxc-hero-media img {
object-fit: contain !important;
padding: 16px;
background: transparent;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin: auto;
}
/* slightly larger aspect ratio on desktop so logos have more room */
.rxc-hero-media { aspect-ratio: 4/3 !important; min-height: 280px; }
@media (max-width: 720px) {
.rxc-hero-media { aspect-ratio: 5/3 !important; min-height: 180px; }
.rxc-hero-media img { padding: 8px; }
}
.rxc-tier-unit-row td { background: rgba(15, 34, 0, 0.03); font-size: 12px; }
.rxc-tier-unit-row td:first-child { font-style: italic; color: var(--muted); }
/* v42: product page decoration + collection hero animation */
.rx-prod {
position: relative;
}
.rx-prod-deco {
position: absolute;
right: 4%;
top: 6%;
pointer-events: none;
opacity: 0.4;
z-index: 0;
}
.rx-prod-deco-leaf {
width: 90px;
height: 90px;
animation: rxc-leaf-float 18s ease-in-out infinite;
}
@keyframes rxc-leaf-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(8deg); }
}
@keyframes rxc-rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rxc-hero-svg-1 { animation: rxc-rotate-slow 60s linear infinite; transform-origin: 50% 50%; }
.rxc-hero-svg-3 { animation: rxc-leaf-float 20s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.rx-prod-deco-leaf,
.rxc-hero-svg-1,
.rxc-hero-svg-3,
.rxc-hero-svg-2,
.rx-prod-deco-circle { animation: none !important; }
}
/* v45: full-width SEO key-benefits block between hero and spec */
.rx-prod-keybenefits {
position: relative;
background:
radial-gradient(ellipse 600px 200px at 12% 8%, rgba(248,182,15,0.08), transparent 60%),
radial-gradient(ellipse 500px 220px at 88% 92%, rgba(34,86,34,0.06), transparent 60%),
linear-gradient(180deg, var(--cream) 0%, #FBF7EA 100%);
padding: 62px 0 56px;
overflow: hidden;
}
.rx-prod-keybenefits::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(15,34,0,0.05) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
opacity: 0.45;
}
.rx-prod-keybenefits > .container { position: relative; z-index: 1; max-width: 1180px; }
.rx-prod-keybenefits-deco {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.rx-kb-svg-1 {
position: absolute;
top: 10%;
right: -40px;
width: 200px;
height: 200px;
opacity: 0.65;
animation: rxc-rotate-slow 80s linear infinite;
}
.rx-kb-svg-2 {
position: absolute;
bottom: 8%;
left: -20px;
width: 140px;
height: 140px;
opacity: 0.55;
animation: rxc-leaf-float 22s ease-in-out infinite;
}
.rx-prod-keybenefits-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
margin: 0 0 12px;
}
.rx-prod-keybenefits-h {
font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
font-weight: 600;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 16px;
max-width: 900px;
}
.rx-prod-keybenefits-lede {
font-size: 16px;
line-height: 1.7;
color: var(--charcoal);
max-width: 920px;
margin: 0 0 36px;
}
.rx-prod-keybenefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 1100px;
}
.rx-prod-keybenefit {
background: transparent;
border: 0;
border-left: 2px solid var(--gold);
border-radius: 0;
padding: 8px 0 8px 18px;
display: grid;
grid-template-columns: minmax(180px, 240px) 1fr;
gap: 18px 28px;
align-items: start;
transition: border-left-color 0.2s ease;
}
.rx-prod-keybenefit:hover {
transform: none;
background: transparent;
box-shadow: none;
border-left-color: var(--gold-dark);
}
.rx-prod-keybenefit h3 {
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--ink);
margin: 0;
line-height: 1.35;
text-transform: none;
}
.rx-prod-keybenefit p {
font-size: 13.5px;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
}
@media (max-width: 720px) {
.rx-prod-keybenefit {
grid-template-columns: 1fr;
gap: 4px;
padding: 6px 0 6px 14px;
}
}
@media (max-width: 980px) {
.rx-prod-keybenefits-grid { grid-template-columns: repeat(2, 1fr); }
.rx-prod-keybenefits { padding: 52px 0 48px; }
}
@media (max-width: 640px) {
.rx-prod-keybenefits-grid { grid-template-columns: 1fr; }
}
/* v43: second product page deco + pulse animation on collection hero */
.rx-prod-deco-2 {
left: 6%;
bottom: 8%;
right: auto;
top: auto;
opacity: 0.6;
}
.rx-prod-deco-circle {
width: 120px;
height: 120px;
animation: rxc-rotate-slow 90s linear infinite;
}
.rxc-hero-svg-2 { animation: rxc-pulse 8s ease-in-out infinite; }
@keyframes rxc-pulse {
0%, 100% { opacity: 0.6; transform: translateY(0); }
50% { opacity: 0.95; transform: translateY(-4px); }
}
/* v45: richer product page backgrounds + extra deco */
.rx-prod {
background:
radial-gradient(ellipse 700px 280px at 8% 12%, rgba(248,182,15,0.06), transparent 65%),
radial-gradient(ellipse 600px 240px at 92% 88%, rgba(34,86,34,0.05), transparent 65%),
var(--cream);
}
.rx-prod::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(15,34,0,0.045) 1px, transparent 1px),
radial-gradient(rgba(248,182,15,0.05) 1px, transparent 1px);
background-size: 28px 28px, 56px 56px;
background-position: 0 0, 14px 14px;
pointer-events: none;
opacity: 0.55;
z-index: 0;
}
.rx-prod > .container { position: relative; z-index: 1; }
.rx-prod-deco-3 {
top: 38%;
left: 3%;
right: auto;
opacity: 0.55;
z-index: 0;
}
.rx-prod-deco-wave {
width: 220px;
height: 110px;
animation: rxc-pulse 9s ease-in-out infinite;
}
.rx-prod-deco-4 {
top: auto;
right: 12%;
bottom: 22%;
left: auto;
opacity: 0.55;
z-index: 0;
}
.rx-prod-deco-spark {
width: 38px;
height: 38px;
animation: rxc-spark-twinkle 6s ease-in-out infinite;
transform-origin: center;
}
@keyframes rxc-spark-twinkle {
0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
50% { opacity: 0.9; transform: scale(1.05) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
.rx-prod-deco-wave,
.rx-prod-deco-spark,
.rx-kb-svg-1,
.rx-kb-svg-2 { animation: none !important; }
}
/* v45: stock-it + lab spec items - guarantee number doesn't overlap text */
.rx-prod-spec-item.rx-prod-stockit .num,
.rx-prod-spec-item.rx-prod-lab .num {
pointer-events: none;
}
/* v45: per-unit note row inside tier table */
.rxc-tier-unit-note td {
background: rgba(248,182,15,0.05);
text-align: center;
font-size: 11.5px;
color: var(--muted);
padding: 8px 12px !important;
}
/* v46: product card image+title wrapper link goes to /products/ */
.product .product-cardlink {
display: contents;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.product .product-cardlink:hover h4 { color: var(--gold-dark); }
.product .product-cardlink:focus-visible { outline: none; }
.product .imagecanvas { cursor: pointer; }
.product[data-page-url=""] .imagecanvas { cursor: default; }
/* v47: smoother sticky scroll for product gallery image */
html { scroll-behavior: smooth; }
.rx-prod-img-main {
will-change: transform;
transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rx-prod-img-main img {
transition: opacity 0.35s ease;
}
.rx-prod-gallery-layout {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rx-prod-img-main { transition: none; }
}
/* v48: product image zoom lightbox */
.rx-prod-img-main { cursor: zoom-in; }
.rx-prod-img-main.rx-no-zoom { cursor: default; }
.rx-prod-zoom-mini {
position: absolute;
right: 14px;
bottom: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(15, 34, 0, 0.78);
color: var(--gold);
border: 0;
cursor: pointer;
display: inline-grid;
place-items: center;
box-shadow: 0 6px 14px rgba(15, 34, 0, 0.25);
transition: transform 0.18s ease, background 0.18s ease;
z-index: 3;
}
.rx-prod-zoom-mini svg { width: 18px; height: 18px; }
.rx-prod-zoom-mini:hover { transform: scale(1.08); background: var(--ink); }
.rx-zoom-modal {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 34, 0, 0.92);
display: none;
align-items: stretch;
justify-content: stretch;
flex-direction: column;
animation: rxz-fade 0.22s ease;
}
.rx-zoom-modal.open { display: flex; }
@keyframes rxz-fade { from { opacity: 0 } to { opacity: 1 } }
.rx-zoom-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
border: 0;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: inline-grid;
place-items: center;
z-index: 10001;
transition: background 0.18s ease;
}
.rx-zoom-close:hover { background: rgba(255,255,255,0.22); }
.rx-zoom-stage {
flex: 1;
width: 100%;
height: 100%;
overflow: hidden;
display: grid;
place-items: center;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.rx-zoom-img {
max-width: 92vw;
max-height: 80vh;
transform-origin: center center;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
user-select: none;
-webkit-user-drag: none;
pointer-events: auto;
}
.rx-zoom-img.dragging { transition: none; cursor: grabbing; }
.rx-zoom-img.zoomable { cursor: grab; }
.rx-zoom-controls {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
backdrop-filter: blur(8px);
z-index: 10001;
}
.rx-zoom-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
color: #fff;
border: 0;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: inline-grid;
place-items: center;
transition: background 0.18s ease;
}
.rx-zoom-btn:hover { background: rgba(255,255,255,0.26); }
.rx-zoom-btn:active { transform: scale(0.95); }
.rx-zoom-pct {
color: #fff;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
padding: 0 8px;
min-width: 52px;
text-align: center;
}
.rx-zoom-hint {
position: absolute;
top: 16px;
left: 16px;
color: rgba(255,255,255,0.65);
font-size: 11px;
letter-spacing: 0.04em;
margin: 0;
pointer-events: none;
}
@media (max-width: 720px) {
.rx-zoom-hint { display: none; }
.rx-zoom-controls {
padding: 4px 6px;
gap: 4px;
bottom: 12px;
}
.rx-zoom-btn { width: 32px; height: 32px; font-size: 16px; }
.rx-zoom-pct { font-size: 11px; min-width: 44px; padding: 0 6px; }
.rx-prod-zoom-mini { width: 32px; height: 32px; right: 10px; bottom: 10px; }
.rx-prod-zoom-mini svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.rx-zoom-img { transition: none; }
.rx-zoom-modal { animation: none; }
}
/* v49: hero featured-product cards are clickable (open quick-view modal) */
.hero-card {
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-card:hover {
transform: translateY(-3px) rotate(0.5deg);
box-shadow: 0 18px 40px -8px rgba(15, 34, 0, 0.22);
}
.hero-card:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* v51: Larger monitor responsive scaling */
@media (min-width: 1440px) {
.container { max-width: 1320px; padding: 0 32px; }
footer.site .container { max-width: 1520px; }
.rx-prod-keybenefits > .container { max-width: 1240px; }
.hero h1 { font-size: clamp(58px, 5.8vw, 96px); }
}
@media (min-width: 1920px) {
.container { max-width: 1440px; padding: 0 36px; }
footer.site .container { max-width: 1640px; }
.rx-prod-keybenefits > .container { max-width: 1320px; }
.hero h1 { font-size: clamp(72px, 5.4vw, 108px); }
.hero p.lede { font-size: 20px; max-width: 620px; }
.section { padding: 0; }
.programs-grid { gap: 28px; }
.product-grid { gap: 26px; }
}
@media (min-width: 2560px) {
.container { max-width: 1640px; padding: 0 40px; }
footer.site .container { max-width: 1840px; }
body { font-size: 17px; }
.hero h1 { font-size: clamp(84px, 5vw, 124px); }
}
/* v51: ensure mobile menu sits above everything else */
.mobile-menu { z-index: 100 !important; }
body.menu-open .mobile-menu { z-index: 100 !important; }
/* v51: defensive - make sure hamburger is clickable above sticky sections */
.nav-toggle { pointer-events: auto !important; }
header.site .nav-toggle { display: none; }
@media (max-width: 1024px) {
header.site .nav-toggle { display: flex !important; }
}
/* v51: prevent any product/collection hero overlay from covering the header */
.rx-prod, .rxc-hero, .rx-prod-spec, .rx-prod-keybenefits { z-index: 1; }
header.site { z-index: 90 !important; }
/* v55: Mobile menu header bar - matches site header (whitish bg + dark logo) */
.mobile-menu .mm-head {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0 14px;
margin: 0 -32px 18px;
padding-left: 32px;
padding-right: 32px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 14px -8px rgba(15,34,0,0.18);
}
.mobile-menu .mm-logo {
display: inline-flex;
align-items: center;
color: var(--ink);
text-decoration: none;
flex: 0 0 auto;
}
.mobile-menu .mm-logo svg.brandmark {
height: 36px;
width: 150px;
color: var(--ink);
fill: currentColor;
display: block;
}
.mobile-menu .mm-close {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
flex-shrink: 0;
padding: 0;
transition: background 0.2s ease;
}
.mobile-menu .mm-close:hover { background: rgba(15,34,0,0.06); }
.mobile-menu .mm-close span {
position: static !important;
top: auto !important;
left: auto !important;
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 1px;
transform: none !important;
}
.mobile-menu .mm-close {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 0;
cursor: pointer;
display: inline-grid;
place-items: center;
transition: background 0.2s ease;
flex-shrink: 0;
}
.mobile-menu .mm-close:hover { background: rgba(248,182,15,0.18); }
.mobile-menu .mm-close span {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background: var(--gold);
border-radius: 1px;
transform-origin: center;
}
.mobile-menu .mm-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu .mm-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
/* v52: Lock mobile logo dead-center - apply at <=1024px */
@media (max-width: 1024px) {
header.site .nav {
display: grid !important;
grid-template-columns: 44px 1fr 44px !important;
align-items: center !important;
}
header.site .nav-toggle {
grid-column: 1 !important;
justify-self: start !important;
margin: 0 !important;
}
header.site .logo {
grid-column: 2 !important;
flex: 0 1 auto !important;
justify-self: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center;
}
header.site .logo svg.brandmark {
height: 32px;
width: auto;
display: block;
margin: 0 auto;
}
header.site .nav-actions {
grid-column: 3 !important;
justify-self: end !important;
gap: 0 !important;
width: 44px;
}
}
/* v60c: mobile step numbers - protect from clipping with tighter gaps */
@media (max-width: 640px) {
.how-steps {
overflow: visible !important;
padding-top: 24px !important;
margin-top: 22px !important;
}
.how-step {
overflow: visible !important;
margin-top: 16px;
}
.how-step .stepnum {
top: -20px !important;
border-width: 3px;
}
}
/* v60b: product card tagrow back to single row with status LEFT + case pack RIGHT */
.product .product-tagrow {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 14px 4px !important;
min-height: 28px !important;
}
.product .product-tagrow .tagrow-left {
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
.product .product-tagrow .tagrow-right {
flex: 0 0 auto;
display: flex;
align-items: center;
}
/* Hide any stale .product-status-row from cached templates */
.product .product-status-row { display: none !important; }
@media (max-width: 640px) {
.product .product-tagrow {
padding: 10px 10px 2px !important;
gap: 6px !important;
}
.product .product-tagrow .tagrow-left .vendor-tag,
.product .product-tagrow .pack-badge-top {
font-size: 9px !important;
padding: 4px 6px !important;
letter-spacing: 0.08em !important;
}
}
/* v60c: collection page H1 - brand-specific colors */
.rxc-hero-title { color: #FFFFFF !important; } /* default: white on dark hero */
.rxc-brand-kingk .rxc-hero-title { color: var(--gold) !important; } /* King K = gold */
.rxc-brand-grass .rxc-hero-title { color: #E8F0E0 !important; } /* Grassroots Harvest = light green-white */
.rxc-brand-grh .rxc-hero-title { color: #FFFFFF !important; } /* GRH Kratom = white */
.rxc-brand-gud .rxc-hero-title { color: #FFFFFF !important; } /* GUD Tonics = white */
.rxc-brand-lucy .rxc-hero-title { color: #FFFFFF !important; } /* Lucy Jane = white */
/* v60h: badges back to TOP - status left, case pack right (revert v60c order) */
.product {
display: flex;
flex-direction: column;
}
.product .product-tagrow { order: 0; padding: 12px 14px 4px !important; min-height: 28px !important; border-top: 0; margin-top: 0; }
.product .product-cardlink { order: 1; }
.product .imagecanvas { order: 1; }
.product .meta { order: 2; }
.product .product-cta { order: 4; }
@media (max-width: 640px) {
.product .product-tagrow { padding: 10px 12px 4px !important; }
}
/* v60d: shrink the redundant "The Catalog / All X SKUs" sec-head on collection pages
so the hero flows directly into the product grid */
.rxc-products .sec-head .kicker { font-size: 10px; margin-bottom: 4px; }
.rxc-products .sec-head .title { font-size: 18px; margin-bottom: 4px; }
.rxc-products .sec-head .sub { font-size: 13px; margin-bottom: 0; opacity: 0.8; }
.rxc-products > .container { padding-top: 0 !important; }
/* v60d: stronger mobile logo centering - belt and suspenders */
@media (max-width: 1024px) {
header.site .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
header.site .nav {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
align-items: center !important;
column-gap: 8px !important;
width: 100%;
box-sizing: border-box;
}
header.site .nav-toggle {
grid-column: 1 / 2 !important;
grid-row: 1 !important;
justify-self: start !important;
margin: 0 !important;
width: 40px !important;
}
header.site .logo {
grid-column: 2 / 3 !important;
grid-row: 1 !important;
flex: none !important;
display: flex !important;
justify-content: center !important;
justify-self: center !important;
align-items: center !important;
margin: 0 auto !important;
width: 100%;
text-align: center;
}
header.site .logo svg.brandmark {
height: 32px !important;
width: auto !important;
display: block !important;
margin: 0 auto !important;
}
header.site .nav-actions {
grid-column: 3 / 4 !important;
grid-row: 1 !important;
justify-self: end !important;
width: 40px !important;
visibility: hidden;
}
header.site .menu,
header.site .tagline-link { display: none !important; }
}
/* v60d: bottom badge row visual polish (rectangle container with rounded edges) */
.product .product-tagrow {
background: rgba(15, 34, 0, 0.025);
border-top: 1px solid rgba(15, 34, 0, 0.08);
border-bottom: 0;
border-radius: 0;
padding: 10px 14px !important;
}
.product .product-tagrow .pack-badge-top {
margin-left: auto;
}
/* v60f: hero h1 word stacking - responsive groups
PC: 5 lines (FIVE / BRANDS / ONE / WHOLESALE / PARTNER)
Mobile: 3 lines (FIVE BRANDS / ONE WHOLESALE / PARTNER) */
.hero h1 {
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
.hero h1 .hw-grp { display: block; }
@media (min-width: 721px) {
.hero h1 {
font-size: clamp(48px, 5.2vw, 76px);
line-height: 1.04;
}
.hero h1 .hw { display: block; }
.hero h1 .hw-grp { display: contents; }
}
@media (max-width: 720px) {
.hero h1 {
font-size: clamp(34px, 9vw, 52px);
line-height: 1.05;
}
.hero h1 .hw { display: inline; }
.hero h1 .hw-grp { display: block; margin-bottom: 0.05em; }
.hero h1 .hw + .hw { margin-left: 0.18em; }
}
/* Keep the gold underline scoped to ONLY the "One" accent word */
.hero h1 .hw.accent {
position: relative;
display: inline-block;
width: max-content;
max-width: 100%;
}
@media (min-width: 721px) {
.hero h1 .hw.accent {
display: block;
width: max-content;
}
}
/* v60e: What's Trending On Social - collection page widget */
.rxc-trending {
background: var(--cream);
padding: 48px 0 64px;
border-top: 1px solid rgba(15, 34, 0, 0.06);
}
.rxc-trending-head {
text-align: center;
margin-bottom: 28px;
}
.rxc-trending-head .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 8px;
}
.rxc-trending-head .title {
font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(24px, 3vw, 36px);
color: var(--ink);
margin: 0 0 8px;
line-height: 1.15;
}
.rxc-trending-head .title em {
font-style: italic;
color: var(--gold-dark);
}
.rxc-trending-head .sub {
font-size: 14px;
color: var(--muted);
max-width: 540px;
margin: 0 auto;
}
.rxc-trending-grid {
display: flex;
flex-direction: row;
gap: 16px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-left: 12px;
padding: 6px 6px 14px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(15,34,0,0.18) transparent;
}
.rxc-trending-grid::-webkit-scrollbar { height: 8px; }
.rxc-trending-grid::-webkit-scrollbar-track { background: transparent; }
.rxc-trending-grid::-webkit-scrollbar-thumb { background: rgba(15,34,0,0.18); border-radius: 4px; }
.rxc-tcard {
flex: 0 0 240px;
scroll-snap-align: start;
max-width: 240px;
}
.rxc-tcard {
background: #fff;
border: 1px solid rgba(15, 34, 0, 0.08);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rxc-tcard:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(15, 34, 0, 0.08);
border-color: rgba(248, 182, 15, 0.4);
}
.rxc-tcard-creator {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid rgba(15, 34, 0, 0.06);
}
.rxc-tcard-name {
font-size: 12px;
font-weight: 700;
letter-spacing: -0.005em;
}
.rxc-tcard-handle {
font-size: 11px;
color: var(--muted);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rxc-tcard-platform {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 3px 6px;
border-radius: 4px;
color: #fff;
flex-shrink: 0;
}
.rxc-tcard-platform.ig {
background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 80%, #515BD4 100%);
}
.rxc-tcard-platform.tt {
background: #000;
color: #fff;
}
.rxc-tcard-thumb {
position: relative;
display: block;
aspect-ratio: 9 / 16;
overflow: hidden;
background: #f6f3eb;
text-decoration: none;
}
.rxc-tcard-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rxc-tcard:hover .rxc-tcard-thumb img { transform: scale(1.04); }
.rxc-tcard-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 18px;
padding-left: 3px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.rxc-tcard-product {
font-size: 11.5px;
font-weight: 700;
color: var(--ink);
text-decoration: none;
padding: 10px 12px 12px;
border-top: 1px solid rgba(15, 34, 0, 0.06);
text-align: left;
line-height: 1.3;
}
.rxc-tcard-product:hover { color: var(--gold-dark); }
@media (max-width: 720px) {
.rxc-tcard { flex: 0 0 200px; max-width: 200px; }
.rxc-tcard-name { font-size: 11px; }
.rxc-tcard-handle { font-size: 10px; }
.rxc-tcard-product { font-size: 10.5px; padding: 8px 10px 10px; }
.rxc-trending { padding: 36px 0 48px; }
}
/* v60g: kill the empty space between collection hero and product grid */
.rxc-products .sec-head { display: none !important; }
.rxc-products > .container > .rxc-grid { margin-top: 0 !important; padding-top: 14px !important; }
.rxc-products { padding-top: 0 !important; margin-top: 0 !important; }
/* v60h: Related products on product page */
.rx-prod-related {
background: var(--cream);
padding: 48px 0 56px;
border-top: 1px solid rgba(15,34,0,0.06);
}
.rx-prod-related-head {
text-align: center;
margin-bottom: 28px;
}
.rx-prod-related-head .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 8px;
}
.rx-prod-related-head h3 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: clamp(20px, 2.4vw, 28px);
color: var(--ink);
margin: 0;
line-height: 1.2;
}
.rx-prod-related-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.rx-prod-related-card {
background: #fff;
border: 1px solid rgba(15,34,0,0.08);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rx-prod-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(15,34,0,0.08);
border-color: rgba(248,182,15,0.4);
}
.rx-prod-related-img {
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f8f5ed;
}
.rx-prod-related-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rx-prod-related-card:hover .rx-prod-related-img img { transform: scale(1.05); }
.rx-prod-related-meta {
padding: 10px 12px 12px;
}
.rx-prod-related-vendor {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dark);
display: block;
margin-bottom: 4px;
}
.rx-prod-related-card h4 {
font-size: 12px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 6px;
color: var(--ink);
}
.rx-prod-related-price {
font-size: 12px;
font-weight: 800;
margin: 0;
color: var(--ink);
}
@media (max-width: 1024px) {
.rx-prod-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.rx-prod-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rx-prod-related-card h4 { font-size: 11px; }
}
/* v60h: About dropdown panel + mobile About sub */
.dd-panel.dd-about { min-width: 280px; }
.dd-swatch.sw-about {
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
color: var(--gold);
}
.mobile-menu .mm-about-trigger {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu .mm-about-trigger::after {
content: "▾";
color: var(--gold);
font-size: 14px;
margin-left: 8px;
}
.mobile-menu .mm-about-sub {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 18px;
margin: 4px 0 8px;
border-left: 2px solid var(--gold);
}
.mobile-menu .mm-about-sub a {
font-size: 14px !important;
opacity: 0.85;
font-weight: 500 !important;
padding: 6px 0 !important;
}
/* v60i: Branded shell for /pages/about, /blogs/retailers, /blogs/retailers/:article */
.rxp-page-hero {
position: relative;
background-size: cover;
background-position: center;
color: #fff;
padding: 96px 0 84px;
text-align: left;
border-bottom: 1px solid rgba(15,34,0,0.4);
}
.rxp-page-hero .container { position: relative; z-index: 1; max-width: 980px; }
.rxp-page-hero .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 14px;
}
.rxp-page-hero h1 {
font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(34px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
color: #fff;
margin: 0 0 16px;
}
.rxp-page-hero .sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: rgba(255,255,255,0.86);
max-width: 720px;
margin: 0;
}
.rxp-page-body { background: var(--cream); padding: 56px 0 80px; }
.rxp-page-body .container { max-width: 880px; }
/* About page body styles */
.rxp-about-body section { margin-bottom: 36px; }
.rxp-about-body h2,
.rxp-story-standards h2,
.rxp-story-brands h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: clamp(22px, 2.6vw, 30px);
margin: 0 0 14px;
color: var(--ink);
}
.rxp-about-body p,
.rxp-story-standards p,
.rxp-story-brands p {
font-size: 16px;
line-height: 1.7;
color: var(--charcoal);
margin: 0 0 16px;
}
.rxp-story-standards ul {
list-style: none;
padding: 0;
margin: 8px 0 0;
}
.rxp-story-standards ul li {
font-size: 15px;
line-height: 1.65;
color: var(--charcoal);
padding: 12px 0 12px 30px;
border-bottom: 1px dashed rgba(15,34,0,0.1);
position: relative;
}
.rxp-story-standards ul li::before {
content: "★";
position: absolute;
left: 0;
top: 12px;
color: var(--gold-dark);
font-size: 14px;
}
.rxp-story-standards ul li strong { color: var(--ink); }
.rxp-story-brands p { max-width: 760px; }
.rxp-story-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 26px 0 0;
}
/* Embedded YouTube video - full canvas of its section */
.rxp-story-video {
margin: 0 0 32px;
padding: 0;
}
.rxp-story-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 38px rgba(15,34,0,0.18);
}
.rxp-story-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.rxp-story-video-caption {
font-size: 12px;
color: var(--muted);
text-align: center;
letter-spacing: 0.06em;
margin: 10px 0 0;
}
/* Blog listing page */
.rxp-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
.rxp-blog-card {
background: #fff;
border: 1px solid rgba(15,34,0,0.08);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rxp-blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(15,34,0,0.1);
border-color: rgba(248,182,15,0.4);
}
.rxp-blog-card-img {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
overflow: hidden;
display: grid;
place-items: center;
}
.rxp-blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rxp-blog-card:hover .rxp-blog-card-img img { transform: scale(1.05); }
.rxp-blog-card-placeholder {
font-size: 64px;
color: rgba(248,182,15,0.4);
font-weight: 800;
}
.rxp-blog-card-meta { padding: 16px 18px 18px; }
.rxp-blog-card-date {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 8px;
}
.rxp-blog-card-title {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: 18px;
line-height: 1.25;
color: var(--ink);
margin: 0 0 8px;
}
.rxp-blog-card-excerpt {
font-size: 13.5px;
line-height: 1.55;
color: var(--muted);
margin: 0 0 12px;
}
.rxp-blog-card-cta {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-dark);
}
/* Article page */
.rxp-article-crumb {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin: 0 0 16px;
}
.rxp-article-crumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.rxp-article-crumb a:hover { color: var(--gold); }
.rxp-article-crumb span { color: var(--gold); }
.rxp-article-meta {
font-size: 13px;
color: rgba(255,255,255,0.78);
margin: 14px 0 0;
letter-spacing: 0.02em;
}
.rxp-article-feature-img { margin: 0 0 28px; border-radius: 14px; overflow: hidden; }
.rxp-article-feature-img img { width: 100%; height: auto; display: block; }
.rxp-article-content {
font-size: 16px;
line-height: 1.75;
color: var(--charcoal);
}
.rxp-article-content h2,
.rxp-article-content h3 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
color: var(--ink);
margin: 28px 0 12px;
}
.rxp-article-content h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.rxp-article-content h3 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.25; }
.rxp-article-content h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 22px 0 8px; }
.rxp-article-content p { margin: 0 0 16px; }
.rxp-article-content ul, .rxp-article-content ol { margin: 0 0 18px 20px; padding: 0; }
.rxp-article-content li { margin: 0 0 8px; line-height: 1.6; }
.rxp-article-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.rxp-article-content blockquote {
border-left: 3px solid var(--gold);
padding: 6px 0 6px 18px;
margin: 20px 0;
font-family: "Fraunces", Georgia, serif;
font-style: italic;
color: var(--ink);
font-size: 17px;
}
.rxp-article-footer-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin: 40px 0 0;
padding: 24px 0 0;
border-top: 1px solid rgba(15,34,0,0.08);
}
/* Read Our Blogs widget on collection pages */
.rxc-blogs-widget {
background: var(--cream);
padding: 56px 0 64px;
border-top: 1px solid rgba(15,34,0,0.06);
}
.rxc-blogs-head { text-align: center; margin-bottom: 28px; }
.rxc-blogs-head .kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 8px;
}
.rxc-blogs-head h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: clamp(22px, 2.6vw, 30px);
color: var(--ink);
margin: 0 0 8px;
}
.rxc-blogs-head .sub { font-size: 14px; color: var(--muted); margin: 0; }
.rxc-blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0 0 24px;
}
.rxc-blogs-card {
background: #fff;
border: 1px solid rgba(15,34,0,0.08);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rxc-blogs-card:hover {
transform: translateY(-3px);
border-color: rgba(248,182,15,0.4);
box-shadow: 0 10px 22px rgba(15,34,0,0.08);
}
.rxc-blogs-card-img {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
overflow: hidden;
display: grid;
place-items: center;
}
.rxc-blogs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxc-blogs-card-placeholder { font-size: 48px; color: rgba(248,182,15,0.4); font-weight: 800; }
.rxc-blogs-card-meta { padding: 14px 16px 16px; }
.rxc-blogs-card-date {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 6px;
}
.rxc-blogs-card-meta h3 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: var(--ink);
margin: 0 0 10px;
}
.rxc-blogs-card-cta {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-dark);
}
.rxc-blogs-foot { text-align: center; margin-top: 8px; }
@media (max-width: 720px) {
.rxp-page-hero { padding: 64px 0 56px; }
.rxp-page-body { padding: 36px 0 60px; }
.rxp-blog-grid { grid-template-columns: 1fr; gap: 16px; }
.rxc-blogs-grid { grid-template-columns: 1fr; gap: 14px; }
.rxc-blogs-widget { padding: 36px 0 48px; }
.rxp-story-video-frame { border-radius: 10px; }
}
/* v60j: stack product card badges vertically on top-right
Case pack badge first, status badge below it, both right-aligned. */
.product .product-tagrow {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 12px 14px 8px !important;
min-height: 0 !important;
}
.product .product-tagrow .tagrow-left,
.product .product-tagrow .tagrow-right {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
max-width: 100%;
}
.product .product-tagrow .tagrow-right { order: 1; }
.product .product-tagrow .tagrow-left { order: 2; }
@media (max-width: 640px) {
.product .product-tagrow {
padding: 10px 12px 6px !important;
gap: 4px !important;
}
}
/* v60j: mobile menu search input at top */
.mobile-menu .mm-search {
display: flex;
align-items: stretch;
margin: 0 0 12px 0;
padding: 12px 0 0;
border-radius: 8px;
overflow: hidden;
background: rgba(255,255,255,0.06);
}
.mobile-menu .mm-search input[type="search"] {
flex: 1 1 auto;
background: transparent;
color: #FFFFFF;
border: 0;
padding: 12px 14px;
font-size: 14px;
outline: none;
-webkit-appearance: none;
appearance: none;
font-family: inherit;
}
.mobile-menu .mm-search input::placeholder { color: rgba(255,255,255,0.5); }
.mobile-menu .mm-search button {
background: var(--gold);
color: var(--ink);
border: 0;
width: 48px;
cursor: pointer;
display: grid;
place-items: center;
}
.mobile-menu .mm-contact-direct {
margin-top: 8px;
}
/* v60j: Contact page branded layout */
.rxp-contact-body { padding-top: 56px; padding-bottom: 80px; }
.rxp-contact-body > .container { max-width: 1100px; }
.rxp-contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 48px;
align-items: start;
}
.rxp-contact-info h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: clamp(24px, 2.6vw, 32px);
color: var(--ink);
margin: 0 0 14px;
}
.rxp-contact-info > p {
font-size: 15px;
line-height: 1.65;
color: var(--charcoal);
margin: 0 0 24px;
max-width: 520px;
}
.rxp-contact-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
background: rgba(15,34,0,0.04);
border: 1px solid rgba(15,34,0,0.08);
border-radius: 14px;
padding: 18px 22px;
}
.rxp-contact-list li {
padding: 12px 0;
border-bottom: 1px dashed rgba(15,34,0,0.1);
display: flex;
align-items: baseline;
gap: 12px;
font-size: 14.5px;
color: var(--charcoal);
}
.rxp-contact-list li:last-child { border-bottom: 0; }
.rxp-contact-list .label {
flex: 0 0 78px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dark);
}
.rxp-contact-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(15,34,0,0.2); }
.rxp-contact-list a:hover { color: var(--gold-dark); border-bottom-color: var(--gold); }
.rxp-contact-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; }
.rxp-contact-form {
background: #fff;
border: 1px solid rgba(15,34,0,0.08);
border-radius: 14px;
padding: 28px 28px 24px;
box-shadow: 0 16px 38px -22px rgba(15,34,0,0.18);
}
.rxp-contact-form h3 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: 20px;
color: var(--ink);
margin: 0 0 18px;
}
.rxp-contact-shopify-form label {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
}
.rxp-contact-shopify-form input,
.rxp-contact-shopify-form textarea {
font: inherit;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
background: var(--cream);
border: 1px solid rgba(15,34,0,0.12);
border-radius: 8px;
padding: 12px 14px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rxp-contact-shopify-form input:focus,
.rxp-contact-shopify-form textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(248,182,15,0.18);
}
.rxp-contact-shopify-form button {
margin-top: 8px;
width: auto;
padding: 14px 22px;
}
.rxp-contact-success {
background: rgba(34, 86, 34, 0.1);
color: var(--green);
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
}
@media (max-width: 720px) {
.rxp-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* v60j: hamburger reinforcement - pointer events forced + display flex always at mobile */
@media (max-width: 1024px) {
header.site .nav-toggle {
display: inline-flex !important;
pointer-events: auto !important;
z-index: 120 !important;
}
.mobile-menu { z-index: 110 !important; }
}
/* v60k: status badge overlaid on product image top-left */
.product .imagecanvas { position: relative; }
.product .imagecanvas .imgbadge {
position: absolute;
top: 0;
left: 4px;
z-index: 5;
pointer-events: none;
}
.product .imagecanvas .imgbadge .vendor-tag {
display: inline-block;
font-family: "Oswald","Futura","Helvetica Neue","Inter",system-ui,sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
color: #fff;
white-space: nowrap;
line-height: 1.2;
box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
@media (max-width: 640px) {
.product .imagecanvas .imgbadge { top: 0; left: 3px; }
.product .imagecanvas .imgbadge .vendor-tag { font-size: 9px; padding: 4px 7px; }
}
/* v60k: tagrow has only the case-pack badge now (status moved to image overlay) */
.product .product-tagrow {
flex-direction: row !important;
justify-content: flex-end !important;
padding: 12px 14px 4px !important;
}
.product .product-tagrow .tagrow-left { display: none !important; }
/* v60M: Meet Kemal / Founder section on the About page */
.rxp-story-founder { margin: 32px 0 36px; }
.rxp-story-founder-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 36px;
align-items: start;
}
.rxp-story-founder-photo { position: relative; }
.rxp-story-founder-img {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, var(--ink) 0%, var(--green-mid) 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 38px -22px rgba(15,34,0,0.4);
}
.rxp-story-founder-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.rxp-story-founder-fallback { text-align: center; color: rgba(255,255,255,0.85); }
.rxp-founder-initials {
display: block;
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: 96px;
color: var(--gold);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.03em;
}
.rxp-founder-cap {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.rxp-story-founder-stamp {
position: absolute;
top: 14px;
right: 14px;
width: 92px;
height: 92px;
border-radius: 50%;
background: rgba(232, 240, 224, 0.92);
color: var(--ink);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
display: grid;
place-items: center;
text-align: center;
padding: 14px;
line-height: 1.2;
z-index: 2;
}
.rxp-story-founder-text { padding-top: 8px; }
.rxp-story-founder-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 8px;
font-style: normal;
}
.rxp-story-founder-text h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
font-size: clamp(28px, 3.4vw, 40px);
color: var(--ink);
margin: 0 0 18px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.rxp-story-founder-text p {
font-size: 15.5px;
line-height: 1.65;
color: var(--charcoal);
margin: 0 0 14px;
max-width: 640px;
}
.rxp-story-founder-text .rxp-story-cta { margin-top: 18px; }
@media (max-width: 720px) {
.rxp-story-founder-grid { grid-template-columns: 1fr; gap: 22px; }
.rxp-story-founder-img { aspect-ratio: 4 / 4; max-width: 360px; margin: 0 auto; }
.rxp-story-founder-stamp { width: 80px; height: 80px; font-size: 8px; padding: 10px; }
.rxp-founder-initials { font-size: 72px; }
}
/* v60O: Header search button - desktop and mobile */
.nav-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
color: var(--ink);
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
padding: 0;
margin: 0 6px 0 0;
}
.nav-search-btn:hover {
background: rgba(248, 182, 15, 0.12);
color: var(--gold-dark);
}
.nav-search-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* Mobile header grid: [hamburger | logo | search] */
@media (max-width: 1024px) {
header.site .nav {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) 44px !important;
column-gap: 8px !important;
}
header.site .nav-toggle { grid-column: 1 !important; justify-self: start !important; }
header.site .logo { grid-column: 2 !important; justify-self: center !important; }
header.site .nav-search-btn {
grid-column: 3 !important;
justify-self: end !important;
margin: 0 !important;
visibility: visible !important;
}
header.site .nav-actions {
display: none !important;
}
}
/* v60R: Search overlay - higher placement, cleaner card design */
.rxs-search-overlay {
position: fixed;
inset: 0;
z-index: 130;
background: rgba(15, 34, 0, 0.58);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
display: none;
align-items: flex-start;
justify-content: center;
padding: 56px 24px 24px;
flex-direction: column;
animation: rxs-fade 0.18s ease;
}
.rxs-search-overlay.open { display: flex; }
@keyframes rxs-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.rxs-search-close {
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.rxs-search-close:hover { background: rgba(248, 182, 15, 0.28); border-color: var(--gold); transform: rotate(90deg); }
.rxs-search-card {
width: 100%;
max-width: 680px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
padding: 26px 26px 22px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(248, 182, 15, 0.18);
}
.rxs-search-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dark, #a37a06);
margin: 0 0 12px;
}
.rxs-search-label::before {
content: "";
width: 22px;
height: 2px;
background: var(--gold);
border-radius: 2px;
}
.rxs-search-form {
width: 100%;
display: flex;
align-items: stretch;
background: #f6f5ef;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(15, 34, 0, 0.08);
transition: border-color 0.18s ease, background 0.18s ease;
}
.rxs-search-form:focus-within {
border-color: var(--gold);
background: #fff;
box-shadow: 0 0 0 4px rgba(248, 182, 15, 0.18);
}
.rxs-search-form input[type="search"] {
flex: 1 1 auto;
background: transparent;
color: var(--ink);
border: 0;
padding: 18px 20px;
font-size: 17px;
font-weight: 500;
outline: none;
font-family: inherit;
-webkit-appearance: none;
appearance: none;
min-width: 0;
}
.rxs-search-form input::placeholder { color: rgba(15, 34, 0, 0.38); font-weight: 400; }
.rxs-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rxs-search-go {
background: var(--gold);
color: var(--ink);
border: 0;
width: 60px;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.18s ease;
}
.rxs-search-go:hover { background: var(--gold-dark); }
.rxs-search-hint {
width: 100%;
margin: 14px 0 0;
color: rgba(15, 34, 0, 0.55);
font-size: 12.5px;
line-height: 1.5;
text-align: left;
letter-spacing: 0;
font-weight: 400;
}
.rxs-search-hint b { color: var(--ink); font-weight: 600; }
.rxs-search-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.rxs-search-chips a {
display: inline-flex;
align-items: center;
padding: 7px 13px;
background: #f6f5ef;
color: var(--ink);
text-decoration: none;
font-size: 12.5px;
font-weight: 500;
border-radius: 999px;
border: 1px solid rgba(15, 34, 0, 0.08);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.rxs-search-chips a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
@media (max-width: 720px) {
.rxs-search-overlay { padding: 40px 14px 20px; }
.rxs-search-card { padding: 20px 18px 18px; border-radius: 14px; }
.rxs-search-form input[type="search"] { padding: 16px 16px; font-size: 16px; }
.rxs-search-go { width: 54px; }
.rxs-search-hint { font-size: 12px; }
.rxs-search-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 20px; }
}
/* v60T - Search results page (on_search branch in rebel-x-landing.liquid) */
.rxs-search-page-form {
margin: 18px 0 0;
max-width: 720px;
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex;
border: 1px solid rgba(15, 34, 0, 0.1);
}
.rxs-search-page-form input[type="search"] {
flex: 1 1 auto;
background: transparent;
color: var(--ink);
border: 0;
padding: 18px 20px;
font-size: 17px;
font-weight: 500;
outline: none;
font-family: inherit;
}
.rxs-search-page-form input::placeholder { color: rgba(15, 34, 0, 0.4); }
.rxs-search-page-form .rxs-search-go { width: 64px; }
.rxc-empty {
text-align: center;
padding: 80px 20px 100px;
color: var(--ink);
}
.rxc-empty h2 { font-size: 26px; margin: 0 0 10px; font-weight: 700; }
.rxc-empty p { font-size: 15px; color: rgba(15,34,0,0.6); margin: 0 0 18px; }
.rxc-empty .rxs-search-chips { justify-content: center; }
.rxc-card-article .rxc-card-img, .rxc-card-page .rxc-card-body { background: #f6f5ef; }
.rxc-card-kicker { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark, #a37a06); margin: 0 0 6px; font-weight: 700; }
.rxc-pagination { display: flex; justify-content: center; gap: 16px; padding: 36px 0 60px; }
@media (max-width: 720px) {
.rxs-search-page-form input[type="search"] { padding: 14px 14px; font-size: 16px; }
.rxs-search-page-form .rxs-search-go { width: 54px; }
.rxc-empty { padding: 60px 16px 80px; }
.rxc-empty h2 { font-size: 22px; }
}
/* v60X: Collapsible mobile menu triggers (About, Brands) */
.mobile-menu .mm-collapsible-trigger {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
background: transparent !important;
border: 0 !important;
padding: 14px 0 !important;
color: #ECE7D5 !important;
font: inherit !important;
font-size: 18px !important;
font-weight: 700 !important;
cursor: pointer !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.mobile-menu .mm-collapsible-trigger .mm-caret {
display: inline-block;
font-size: 14px;
transition: transform 0.2s ease;
color: var(--gold, #F8B60F);
margin-left: 12px;
}
.mobile-menu .mm-collapsible-trigger[aria-expanded="true"] .mm-caret {
transform: rotate(180deg);
}
.mobile-menu .mm-sub[data-mm-collapsed="true"] {
display: none !important;
}
.mobile-menu .mm-sub[data-mm-collapsed="false"] {
display: flex !important;
}
/* v60X: Search overlay click-outside backdrop */
.rxs-search-overlay {
/* Cleanup: backdrop click area is the dark overlay itself */
cursor: zoom-out;
}
.rxs-search-overlay .rxs-search-card,
.rxs-search-overlay .rxs-search-close,
.rxs-search-overlay .rxs-search-form,
.rxs-search-overlay .rxs-search-chips,
.rxs-search-overlay .rxs-search-hint,
.rxs-search-overlay .rxs-search-label {
cursor: default;
}
.rxs-search-overlay a, .rxs-search-overlay button, .rxs-search-overlay input {
cursor: pointer;
}
.rxs-search-overlay input[type="search"] { cursor: text; }
/* v60X: Mobile fix for "No hand-holding" apply-hero step cards (was overflowing on mobile) */
@media (max-width: 720px) {
.apply-hero { padding: 56px 0 40px !important; }
.apply-hero h1 { font-size: 32px !important; line-height: 1.08 !important; word-break: keep-all !important; overflow-wrap: break-word !important; }
.apply-hero .container { padding-left: 18px !important; padding-right: 18px !important; }
.apply-hero .ap-step,
.apply-hero .step-card,
.apply-hero .ap-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
flex: 0 0 100% !important;
}
.apply-hero .ap-steps,
.apply-hero .ap-grid,
.apply-hero .step-grid {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
overflow: visible !important;
width: 100% !important;
}
.apply-hero .ap-step-num,
.apply-hero .step-num,
.apply-hero .ap-big {
font-size: 64px !important;
line-height: 1 !important;
opacity: 0.18 !important;
position: static !important;
}
}
/* v60Y: 9 fixes pass */
/* Fix 1 - Footer centering: was pushed to left, center the whole grid */
footer.site {
text-align: center !important;
}
footer.site .footer-grid,
footer.site .ft-cols,
footer.site .footer-cols {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 32px !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 32px !important;
justify-items: center !important;
text-align: left !important;
}
footer.site .container {
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 720px) {
footer.site .footer-grid,
footer.site .ft-cols,
footer.site .footer-cols {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
padding: 0 16px !important;
}
}
/* Fix 3 - Mobile menu drawer width constraint (was overflowing right edge) */
@media (max-width: 720px) {
.mobile-menu {
width: min(86vw, 340px) !important;
max-width: 86vw !important;
right: auto !important;
inset: 0 auto 0 0 !important;
padding: 0 22px 22px !important;
box-sizing: border-box !important;
}
.mobile-menu .mm-cta .btn,
.mobile-menu nav a,
.mobile-menu .mm-foot {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: break-word !important;
}
}
/* Fix 5 - Search bar even higher (was 56px desktop / 40px mobile, now 32/20) */
.rxs-search-overlay {
padding: 32px 24px 24px !important;
}
@media (max-width: 720px) {
.rxs-search-overlay { padding: 20px 12px 16px !important; }
}
/* Fix 6 - "No hand-holding" apply-hero step cards horizontal scroll on mobile */
@media (max-width: 720px) {
.apply-hero .ap-steps,
.apply-hero .ap-grid,
.apply-hero .step-grid,
.apply-hero .ap-steps-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 14px !important;
padding: 6px 18px 18px !important;
margin: 0 -18px !important;
scrollbar-width: none !important;
}
.apply-hero .ap-steps::-webkit-scrollbar,
.apply-hero .ap-grid::-webkit-scrollbar,
.apply-hero .step-grid::-webkit-scrollbar,
.apply-hero .ap-steps-grid::-webkit-scrollbar {
display: none !important;
}
.apply-hero .ap-step,
.apply-hero .step-card,
.apply-hero .ap-card {
flex: 0 0 80% !important;
max-width: 80% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
}
}
/* Fix 7 - Add to wishlist font smaller (was too large) */
.rxc-card-add,
.rxc-card-wishlist,
button.rxc-add-wishlist,
a.rxc-add-wishlist,
.product-card .wishlist-btn,
.add-to-wishlist,
.btn-wishlist {
font-size: 11px !important;
padding: 12px 16px !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
@media (max-width: 720px) {
.rxc-card-add,
.rxc-card-wishlist,
button.rxc-add-wishlist,
a.rxc-add-wishlist,
.product-card .wishlist-btn,
.add-to-wishlist,
.btn-wishlist {
font-size: 10.5px !important;
padding: 11px 12px !important;
letter-spacing: 0.04em !important;
}
}
/* Fix 8 - Related blogs strip styles (3 cards, horizontal scroll on mobile) */
.rxp-related-blogs {
padding: 56px 0 64px;
background: #FAF7F1;
border-top: 1px solid #E8E4DA;
}
.rxp-related-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 28px;
gap: 16px;
}
.rxp-related-head .kicker {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dark, #a37a06);
margin: 0 0 6px;
font-weight: 700;
}
.rxp-related-head h2 {
font-size: 28px;
margin: 0;
font-weight: 800;
color: var(--ink, #14151A);
}
.rxp-related-all {
color: var(--ink, #14151A);
text-decoration: none;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
padding: 10px 16px;
border: 1px solid var(--border, #E8E4DA);
border-radius: 4px;
transition: background 0.2s ease;
}
.rxp-related-all:hover { background: var(--gold, #F8B60F); border-color: var(--gold, #F8B60F); }
.rxp-related-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.rxp-related-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border, #E8E4DA);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: var(--ink, #14151A);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.rxp-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px -14px rgba(15,34,0,0.25);
border-color: var(--gold, #F8B60F);
}
.rxp-related-img {
aspect-ratio: 16/10;
overflow: hidden;
background: #f0ecdf;
}
.rxp-related-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rxp-related-card:hover .rxp-related-img img { transform: scale(1.04); }
.rxp-related-body { padding: 18px 18px 22px; }
.rxp-related-meta {
font-size: 11px;
color: var(--muted, #6B6660);
margin: 0 0 8px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.rxp-related-title {
font-size: 17px;
line-height: 1.25;
font-weight: 800;
margin: 0 0 8px;
}
.rxp-related-excerpt {
font-size: 14px;
color: var(--muted, #6B6660);
margin: 0 0 14px;
line-height: 1.5;
}
.rxp-related-cta {
font-size: 13px;
font-weight: 700;
color: var(--gold-dark, #a37a06);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 720px) {
.rxp-related-blogs { padding: 40px 0 48px; }
.rxp-related-head { flex-direction: column; align-items: flex-start; }
.rxp-related-head h2 { font-size: 22px; }
.rxp-related-strip {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 4px 18px 18px;
margin: 0 -18px;
gap: 14px;
scrollbar-width: none;
}
.rxp-related-strip::-webkit-scrollbar { display: none; }
.rxp-related-card {
flex: 0 0 80%;
max-width: 80%;
scroll-snap-align: start;
}
}
/* v60Y mobile search results: cleaner card grid + spacing */
@media (max-width: 720px) {
section.rxc-products .rxc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
section.rxc-hero .rxc-h1 { font-size: 32px !important; line-height: 1.1 !important; }
section.rxc-hero .rxs-search-page-form { max-width: 100% !important; }
.rxs-search-chips { gap: 6px !important; }
.rxs-search-chips a { font-size: 12px !important; padding: 6px 11px !important; }
}
/* === v60Z: 5 fixes pass === */
/* Fix 1 - Search overlay TOP-ALIGNED (was getting pushed to middle/bottom by justify-content:center) */
.rxs-search-overlay {
justify-content: flex-start !important;
align-items: center !important;
padding: 18px 14px 18px !important;
}
@media (max-width: 720px) {
.rxs-search-overlay { padding: 12px 10px 12px !important; }
.rxs-search-overlay .rxs-search-card { margin-top: 0 !important; }
}
/* Fix 2 - "No hand-holding" cards: horizontal scroll on mobile (correct class names: .howitworks .how-steps / .how-step) */
@media (max-width: 720px) {
.section.howitworks .how-steps,
.howitworks .how-steps,
div.how-steps {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 14px !important;
padding: 6px 18px 18px !important;
margin: 0 -18px !important;
scrollbar-width: none !important;
}
.section.howitworks .how-steps::-webkit-scrollbar,
div.how-steps::-webkit-scrollbar {
display: none !important;
}
.section.howitworks .how-steps .how-step,
.howitworks .how-steps .how-step,
div.how-steps .how-step {
flex: 0 0 84% !important;
max-width: 84% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
margin: 0 !important;
}
}
/* Fix 3 - Mobile menu FULL-SCREEN width (was 86vw showing page on right) */
@media (max-width: 720px) {
.mobile-menu {
width: 100vw !important;
max-width: 100vw !important;
inset: 0 !important;
padding: 18px 22px 28px !important;
box-sizing: border-box !important;
}
}
/* Fix 4 - Wishlist button font (real selector .rxc-card .btn.btn-primary.btn-arrow) */
.rxc-card .btn.btn-primary,
.rxc-card a.btn,
.rxc-card .btn-arrow,
article.rxc-card .btn {
font-size: 11px !important;
padding: 11px 14px !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
@media (max-width: 720px) {
.rxc-card .btn.btn-primary,
.rxc-card a.btn,
.rxc-card .btn-arrow,
article.rxc-card .btn {
font-size: 10.5px !important;
padding: 10px 12px !important;
letter-spacing: 0.04em !important;
}
}
/* v60Z grouped search results (Products -> Articles -> Pages) */
.rxs-results-group { margin-bottom: 48px; }
.rxs-results-group:last-child { margin-bottom: 0; }
.rxs-results-h2 {
font-size: 22px;
font-weight: 800;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid var(--gold, #F8B60F);
color: var(--ink, #14151A);
letter-spacing: -0.01em;
}
.rxs-results-count {
font-size: 14px;
color: var(--muted, #6B6660);
font-weight: 500;
margin-left: 6px;
}
@media (max-width: 720px) {
.rxs-results-h2 { font-size: 18px; }
.rxs-results-group { margin-bottom: 32px; }
}
/* === v60AA: 7 polish fixes === */
/* Fix 1 - Search bar BELOW the X close button (was overlapping) */
.rxs-search-overlay {
padding-top: 64px !important;
}
.rxs-search-overlay .rxs-search-card {
margin-top: 0 !important;
}
@media (max-width: 720px) {
.rxs-search-overlay { padding-top: 56px !important; }
.rxs-search-close { z-index: 2 !important; }
}
/* Fix 2 - "NO HAND-HOLDING" heading typography on mobile (don't break weird) */
@media (max-width: 720px) {
.section.howitworks .sec-head .title,
.section.howitworks .title {
word-break: keep-all !important;
hyphens: none !important;
-webkit-hyphens: none !important;
overflow-wrap: normal !important;
font-size: 32px !important;
line-height: 1.08 !important;
text-wrap: balance !important;
}
.section.howitworks .sec-head {
padding-right: 18px !important;
}
/* Make sure the howitworks scroll strip doesn't bleed past viewport horizontally */
.section.howitworks .container {
overflow-x: hidden !important;
}
.section.howitworks .how-steps {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 18px !important;
}
.section.howitworks .how-steps .how-step {
flex: 0 0 78% !important;
max-width: 78% !important;
}
}
/* Fix 3 - Collection page: 2 products per row on mobile (not 1) */
@media (max-width: 720px) {
.rxc-grid,
.rxc-products-grid,
.rxc-grid.rxs-products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.rxc-card { min-width: 0 !important; }
.rxc-card .rxc-card-img img { width: 100%; height: auto; }
.rxc-card .rxc-card-title { font-size: 13.5px !important; line-height: 1.25 !important; }
.rxc-card .rxc-card-tagline { font-size: 11.5px !important; }
.rxc-card .rxc-card-price { font-size: 13.5px !important; }
}
/* Fix 4 - Wishlist (.floatcart) sticky on every page - already in section but ensure visibility */
.floatcart {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 9000 !important;
align-items: center !important;
gap: 12px !important;
background: var(--ink, #14151A) !important;
color: #fff !important;
padding: 14px 22px !important;
border-radius: 999px !important;
border: 0 !important;
cursor: pointer !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-family: inherit !important;
box-shadow: 0 14px 32px -8px rgba(0,0,0,0.4) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.floatcart.is-visible { display: inline-flex !important; }
.floatcart:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(0,0,0,0.5) !important; }
.floatcart .badge {
background: var(--gold, #F8B60F);
color: var(--ink, #14151A);
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
min-width: 24px;
text-align: center;
}
.floatcart .total {
color: var(--gold, #F8B60F);
font-weight: 800;
}
@media (max-width: 720px) {
.floatcart {
bottom: 16px !important;
right: 16px !important;
left: auto !important;
padding: 12px 18px !important;
font-size: 12px !important;
}
}
/* Fix 5 - Remove MADE IN AUSTIN TX hero stamp */
.hero-vertical {
display: none !important;
}
/* Fix 6 - Reviews/testi section mobile: stack cards, no overflow */
@media (max-width: 720px) {
.section.testi .sec-head .title,
.section.testi .title {
font-size: 28px !important;
line-height: 1.1 !important;
word-break: keep-all !important;
hyphens: none !important;
}
.section.testi .container { overflow-x: hidden !important; }
.section.testi .testi-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 14px !important;
padding: 6px 18px 18px !important;
margin: 0 -18px !important;
scrollbar-width: none !important;
}
.section.testi .testi-grid::-webkit-scrollbar { display: none !important; }
.section.testi .testi-card,
.section.testi blockquote,
.section.testi article {
flex: 0 0 84% !important;
max-width: 84% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
}
/* Fix 7 - Featured products on home (catalog section): keep cards inside viewport */
@media (max-width: 720px) {
.section.catalog .sec-head .title,
.section.catalog .title {
font-size: 28px !important;
line-height: 1.1 !important;
word-break: keep-all !important;
hyphens: none !important;
}
.section.catalog .container { overflow-x: hidden !important; }
.section.catalog .product-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 14px !important;
padding: 6px 18px 18px !important;
margin: 0 -18px !important;
scrollbar-width: none !important;
}
.section.catalog .product-grid::-webkit-scrollbar { display: none !important; }
.section.catalog .product-grid > * {
flex: 0 0 84% !important;
max-width: 84% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
}
}
/* Hide page overflow horizontally on mobile globally as safety net (page body) */
@media (max-width: 720px) {
html, body { overflow-x: hidden !important; }
}
/* === v60AB: 5 polish fixes === */
/* Fix 1 - REVERT v60AA horizontal scroll on home featured products. Use Dawn's default 2-col grid */
@media (max-width: 720px) {
.section.catalog .product-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
flex-direction: initial !important;
flex-wrap: initial !important;
overflow-x: initial !important;
overflow-y: initial !important;
scroll-snap-type: none !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 !important;
}
.section.catalog .product-grid > * {
flex: initial !important;
max-width: initial !important;
scroll-snap-align: none !important;
min-width: 0 !important;
}
}
/* Fix 2 - No-hand-holding number badges NOT cut off (.stepnum sits at top:-22px, parent was clipping) */
.section.howitworks .how-steps,
div.how-steps {
overflow-y: visible !important;
}
@media (max-width: 720px) {
.section.howitworks .how-steps,
div.how-steps {
overflow-y: visible !important;
padding-top: 30px !important;
padding-bottom: 24px !important;
}
.section.howitworks .how-step,
div.how-step {
overflow: visible !important;
}
}
/* Fix 3 - From Our Retail Partners (.testi) mobile: ensure padding-top for any badges, snap good widths */
@media (max-width: 720px) {
.section.testi .testi-grid {
overflow-y: visible !important;
padding-top: 18px !important;
}
.section.testi .testi-card,
.section.testi blockquote,
.section.testi article {
flex: 0 0 88% !important;
max-width: 88% !important;
}
.section.testi .container { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Fix 4 - Collection grid: 2 columns on mobile (re-enforce with higher specificity) */
@media (max-width: 720px) {
section .rxc-grid,
section.rxc-products .rxc-grid,
.rxc-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
/* Fix 5 - Collection page footer (rxc-seo About content) LEFT-aligned */
.rxc-seo,
.rxc-seo-inner,
.rxc-seo h2,
.rxc-seo h3,
.rxc-seo h4,
.rxc-seo p,
.rxc-seo ul,
.rxc-seo li {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
.rxc-seo {
margin-left: 0 !important;
margin-right: auto !important;
}
.rxc-seo-inner {
max-width: none !important;
margin-left: 0 !important;
}
.rxc-seo .container {
margin-left: 0 !important;
padding-left: 32px !important;
}
@media (max-width: 720px) {
.rxc-seo .container { padding-left: 16px !important; padding-right: 16px !important; }
}
/* === v60AC FINAL: 4 critical fixes === */
/* Fix 1 - Hide MADE IN AUSTIN circular stamp in howitworks section (was overlaying text on PC/Mac) */
.section.howitworks .deco,
.section.howitworks .stamp {
display: none !important;
}
/* Fix 2a - Mobile menu z-index 9999 (was 100 - header at 90 was creating layering issues) + ensure full coverage */
.mobile-menu {
z-index: 9999 !important;
top: 0 !important;
left: 0 !important;
}
@media (max-width: 720px) {
.mobile-menu {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
inset: 0 !important;
z-index: 9999 !important;
background: #14151A !important;
padding: 18px 22px 32px !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
/* Make sure the close button sits at the top of the drawer cleanly */
.mobile-menu .mm-head {
position: sticky !important;
top: 0 !important;
background: #14151A !important;
z-index: 2 !important;
padding-top: 8px !important;
padding-bottom: 14px !important;
margin-bottom: 6px !important;
}
}
/* Header z-index bumped slightly but stays below drawer */
header.site { z-index: 90 !important; }
/* Fix 2b - sections/header.liquid rendered on every page via header-group: this means duplicate header risk gone */
/* The header-group wrapper might add extra padding/scroll. Defensive: don't let it break */
.shopify-section-group-header-group { position: relative !important; z-index: 80 !important; }
/* Fix 3 - Testi "From Our Retail Partners" MOBILE: clean single column stack (not horizontal scroll) */
@media (max-width: 720px) {
.section.testi { padding: 56px 0 64px !important; }
.section.testi .sec-head { padding: 0 18px 24px !important; text-align: center !important; }
.section.testi .sec-head .eyebrow,
.section.testi .sec-head .kicker { font-size: 11px !important; letter-spacing: 0.14em !important; }
.section.testi .sec-head .title,
.section.testi .title {
font-size: 26px !important;
line-height: 1.15 !important;
text-align: center !important;
word-break: keep-all !important;
hyphens: none !important;
padding: 0 8px !important;
}
.section.testi .container { padding: 0 16px !important; overflow: visible !important; }
.section.testi .testi-grid {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
scroll-snap-type: none !important;
}
.section.testi .testi-card {
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 0 !important;
background: #fff !important;
border: 1px solid #E8E4DA !important;
border-radius: 12px !important;
padding: 22px 20px !important;
margin: 0 !important;
box-shadow: 0 6px 18px -8px rgba(15, 34, 0, 0.12) !important;
box-sizing: border-box !important;
}
.section.testi .testi-card .quote {
font-size: 15.5px !important;
line-height: 1.55 !important;
margin: 0 0 16px !important;
color: #14151A !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.section.testi .testi-card .author {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding-top: 14px !important;
border-top: 1px solid #E8E4DA !important;
}
.section.testi .testi-card .av {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: var(--green, #0F2200) !important;
color: var(--gold, #F8B60F) !important;
display: grid !important;
place-items: center !important;
font-size: 13px !important;
font-weight: 800 !important;
flex-shrink: 0 !important;
}
.section.testi .testi-card .who { line-height: 1.3 !important; min-width: 0 !important; }
.section.testi .testi-card .who strong { font-size: 14px !important; display: block !important; color: #14151A !important; }
.section.testi .testi-card .who span {
font-size: 12px !important;
color: #6B6660 !important;
display: block !important;
word-wrap: break-word !important;
}
/* Hide swipe-through-stories pill on mobile since we're vertical stack now */
.section.testi .swipe-pill,
.section.testi .swipe-cta,
.section.testi [class*="swipe"] {
display: none !important;
}
}
/* === v60AD: testi BACK to horizontal scroll (user wants swipe left-to-right) === */
@media (max-width: 720px) {
.section.testi { padding: 56px 0 64px !important; }
.section.testi .sec-head { padding: 0 18px 18px !important; }
.section.testi .container { padding: 0 !important; overflow: visible !important; }
.section.testi .testi-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 14px !important;
padding: 6px 18px 24px !important;
margin: 0 !important;
scrollbar-width: none !important;
}
.section.testi .testi-grid::-webkit-scrollbar { display: none !important; }
.section.testi .testi-card {
flex: 0 0 86% !important;
max-width: 86% !important;
min-width: 0 !important;
background: #fff !important;
border: 1px solid #E8E4DA !important;
border-radius: 12px !important;
padding: 22px 20px !important;
margin: 0 !important;
scroll-snap-align: start !important;
box-shadow: 0 6px 18px -8px rgba(15, 34, 0, 0.12) !important;
box-sizing: border-box !important;
}
}
/* === v60AE FINAL RELEASE === */
/* Fix 1 - Dawn footer-group-default emptied via JSON (no CSS needed) */
/* Fix 2 - White top of hamburger drawer (.mm-head) - was dark, restore white as before */
@media (max-width: 720px) {
.mobile-menu .mm-head {
background: #ffffff !important;
color: #14151A !important;
border-bottom: 1px solid #E8E4DA !important;
padding: 14px 18px !important;
margin: 0 -22px 18px !important;
position: sticky !important;
top: 0 !important;
z-index: 5 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.mobile-menu .mm-head .mm-logo { color: #14151A !important; }
.mobile-menu .mm-head .mm-logo .brandmark { color: #F8B60F !important; }
.mobile-menu .mm-close {
background: transparent !important;
border: 1px solid #C7BFAC !important;
color: #14151A !important;
}
.mobile-menu .mm-close span { background: #14151A !important; }
}
/* Fix 3 - Scroll-direction-aware header (.site) on mobile: hide on scroll down, reveal on scroll up */
@media (max-width: 720px) {
header.site {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 90 !important;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
transform: translateY(0) !important;
will-change: transform !important;
}
header.site.is-hidden { transform: translateY(-100%) !important; }
/* Push body down so content does not hide behind fixed header */
body { padding-top: 0 !important; }
.shopify-section-group-header-group { padding-top: 0 !important; }
}
/* Fix 4 - Testi "Built on Real Shelves" heading left-aligned + size-fit on mobile, no cut-off */
@media (max-width: 720px) {
.section.testi .sec-head {
text-align: left !important;
padding: 0 18px 18px !important;
}
.section.testi .sec-head .eyebrow,
.section.testi .sec-head .kicker {
text-align: left !important;
margin: 0 !important;
}
.section.testi .sec-head .title,
.section.testi .title {
text-align: left !important;
font-size: 26px !important;
line-height: 1.12 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
padding: 8px 0 0 !important;
max-width: 100% !important;
white-space: normal !important;
}
/* Hide the swipe-pill if any visible (we have horizontal scroll already) */
.section.testi .swipe-pill,
.section.testi .swipe-cta,
.section.testi [class*="swipe"] {
display: none !important;
}
}
/* === v60AF: Hamburger drawer top - matches reference (white edge-to-edge, dark logo, 3 yellow lines close) === */
@media (max-width: 720px) {
/* Drawer itself: remove top padding so .mm-head can sit flush at top */
.mobile-menu {
padding: 0 !important;
padding-bottom: 32px !important;
}
/* Sticky white bar at very top, full width edge-to-edge */
.mobile-menu .mm-head {
background: #ffffff !important;
color: #14151A !important;
border-bottom: 1px solid #E8E4DA !important;
padding: 18px 22px !important;
margin: 0 !important;
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 64px !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* Logo: full color (dark text with gold crown), no recolor */
.mobile-menu .mm-head .mm-logo {
color: inherit !important;
display: inline-flex !important;
align-items: center !important;
}
.mobile-menu .mm-head .mm-logo .brandmark {
height: 34px !important;
width: auto !important;
color: #14151A !important; /* dark for text portion */
display: block !important;
}
/* Close button: 3 yellow horizontal stripes, no border, no circular bg */
.mobile-menu .mm-head .mm-close {
width: 36px !important;
height: 28px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: #F8B60F !important;
cursor: pointer !important;
display: inline-flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: stretch !important;
font: inherit !important;
position: relative !important;
transform: none !important;
}
.mobile-menu .mm-head .mm-close span {
display: block !important;
height: 3px !important;
width: 100% !important;
background: #F8B60F !important;
border-radius: 2px !important;
position: static !important;
transform: none !important;
margin: 0 !important;
transition: transform 0.2s ease !important;
}
/* Drawer body padding (nav + cta + foot) - restore side padding since drawer itself has 0 now */
.mobile-menu nav,
.mobile-menu .mm-cta,
.mobile-menu .mm-foot {
padding-left: 22px !important;
padding-right: 22px !important;
}
.mobile-menu nav {
padding-top: 16px !important;
}
}
/* === v60AH: only open-state has !important - closed state uses base specificity === */
body.menu-open .mobile-menu {
transform: translateX(0) !important;
}
body.menu-open .mobile-menu.is-locked-open {
transform: translateX(0) !important;
}
/* === v60AJ: 3 final polish fixes === */
/* Fix 1 - Programs section heading "FOUR PROGRAMS. ONE WAY TO GROW WITH..." cut on mobile */
@media (max-width: 720px) {
.section.programs-section .sec-head .title,
.section.programs-section .title,
.programs-section .title {
font-size: 26px !important;
line-height: 1.12 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
white-space: normal !important;
padding: 0 !important;
max-width: 100% !important;
}
.section.programs-section .sec-head {
padding: 0 18px 16px !important;
}
.section.programs-section .container {
overflow-x: hidden !important;
}
}
/* Fix 2 - Testi "Built on Real Shelves" CENTERED on mobile (matches the eyebrow alignment) */
@media (max-width: 720px) {
.section.testi .sec-head,
.section.testi .sec-head .eyebrow,
.section.testi .sec-head .kicker,
.section.testi .sec-head .title,
.section.testi .title {
text-align: center !important;
}
.section.testi .sec-head .title,
.section.testi .title {
font-size: 26px !important;
line-height: 1.12 !important;
padding: 6px 8px 0 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
}
}
/* Fix 3 - Wishlist floatcart: ONLY visible when items added (JS controls via display) */
/* Remove the always-visible override so JS can hide it when count is 0 */
.floatcart {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 9000 !important;
align-items: center !important;
gap: 12px !important;
background: var(--ink, #14151A) !important;
color: #fff !important;
padding: 14px 22px !important;
border-radius: 999px !important;
border: 0 !important;
cursor: pointer !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-family: inherit !important;
box-shadow: 0 14px 32px -8px rgba(0,0,0,0.4) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
/* display is controlled by JS: starts as none, set to inline-flex when count > 0 */
}
.floatcart[hidden] { display: none !important; }
/* === v60AK: drawer top polish - logo left, smaller close icon === */
@media (max-width: 720px) {
/* Logo pinned to the left of mm-head */
.mobile-menu .mm-head .mm-logo {
margin-right: auto !important;
margin-left: 0 !important;
padding-left: 0 !important;
justify-self: start !important;
}
.mobile-menu .mm-head .mm-logo .brandmark {
height: 30px !important;
margin-left: 0 !important;
display: block !important;
}
/* Smaller, more refined 3-line close icon */
.mobile-menu .mm-head .mm-close {
width: 28px !important;
height: 20px !important;
flex-shrink: 0 !important;
margin-left: 12px !important;
}
.mobile-menu .mm-head .mm-close span {
height: 2px !important;
background: #F8B60F !important;
border-radius: 1px !important;
}
}
/* === v60AL FINAL last edits === */
/* Fix 1 - Testi mobile recalibrated to match FAQ section pattern (center, no overflow) */
@media (max-width: 720px) {
.section.testi {
padding: 56px 0 56px !important;
}
.section.testi .container {
padding: 0 18px !important;
overflow: visible !important;
}
.section.testi .sec-head,
.section.testi .sec-head.center {
text-align: center !important;
padding: 0 8px 24px !important;
margin: 0 auto !important;
max-width: 100% !important;
}
.section.testi .sec-head .eyebrow,
.section.testi .sec-head .kicker {
text-align: center !important;
margin: 0 auto 10px !important;
display: block !important;
}
.section.testi .sec-head .title,
.section.testi .title {
text-align: center !important;
font-size: 26px !important;
line-height: 1.15 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
white-space: normal !important;
margin: 0 auto !important;
padding: 0 !important;
max-width: 100% !important;
}
}
/* Fix 2 - "Built like a category partner, not a drop-shipper" why section mobile wrap */
@media (max-width: 720px) {
.section.why .sec-head,
.section.why .sec-head.center,
.why .sec-head {
padding: 0 18px 18px !important;
}
.section.why .sec-head .title,
.section.why .title,
.why .title {
font-size: 26px !important;
line-height: 1.12 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
white-space: normal !important;
max-width: 100% !important;
padding: 0 !important;
}
.section.why .container { overflow-x: hidden !important; }
/* If the why section has a horizontal swipe strip of reasons, ensure it doesn't bleed */
.section.why .why-grid,
.section.why [class*="reason"],
.section.why .reasons {
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* Fix 3 - Drawer logo padding: ~10px from left edge */
@media (max-width: 720px) {
.mobile-menu .mm-head {
padding-left: 10px !important;
padding-right: 14px !important;
}
}
/* === v60AM ABSOLUTE FINAL: pricing tiers wrap + why wrap + drawer logo flush left === */
/* Fix 1 - Pricing tiers "Pricing that scales with your shelf" mobile wrap */
@media (max-width: 720px) {
.section.tiers-v2 .sec-head,
.section.tiers-v2 .sec-head.center,
[class*="tiers"] .sec-head {
padding: 0 18px 18px !important;
text-align: center !important;
}
.section.tiers-v2 .sec-head .title,
.section.tiers-v2 .title,
[class*="tiers"] .title {
font-size: 26px !important;
line-height: 1.12 !important;
word-break: keep-all !important;
hyphens: none !important;
overflow-wrap: break-word !important;
white-space: normal !important;
max-width: 100% !important;
padding: 0 !important;
text-align: center !important;
margin: 0 auto !important;
}
.section.tiers-v2 .container,
[class*="tiers"] .container { overflow-x: hidden !important; }
}
/* Fix 2 - "Built like a category partner" mobile MORE aggressive wrap (still cutting per screenshot) */
@media (max-width: 720px) {
.section.why .sec-head .title,
.section.why .title,
.why .title {
font-size: 22px !important;
line-height: 1.15 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
hyphens: manual !important;
white-space: normal !important;
padding: 0 4px !important;
}
.section.why .sec-head {
padding: 0 14px 16px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Fix 3 - Hamburger drawer logo: FLUSH left (0 padding) */
@media (max-width: 720px) {
.mobile-menu .mm-head {
padding-left: 0 !important;
padding-right: 12px !important;
}
.mobile-menu .mm-head .mm-logo {
padding-left: 0 !important;
margin-left: 0 !important;
}
}
/* === v60AN: nuclear mobile audit === */
/* Fix 1 - NUCLEAR catch-all for any section heading on mobile - no overflow ever */
@media (max-width: 720px) {
section .sec-head,
section .sec-head.center {
padding: 0 16px 18px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
section .sec-head .title,
section .sec-head h1,
section .sec-head h2,
section .sec-head h3,
section .sec-head .h1,
section .sec-head .h2,
section .sec-head .h3 {
font-size: clamp(20px, 6vw, 26px) !important;
line-height: 1.15 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
hyphens: manual !important;
white-space: normal !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
section .container {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Prevent any section from forcing horizontal overflow */
section > div.deco,
section > .container {
max-width: 100vw !important;
}
}
/* Fix 2 - Wholesale tiers section: NO internal scroll on mobile (page scroll only) */
@media (max-width: 720px) {
.section.tiers-v2,
.section.tiers-v2 *,
[class*="tiers"] {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
max-height: none !important;
}
.section.tiers-v2 .tier-card,
.section.tiers-v2 .tier,
[class*="tier"][class*="card"] {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Fix 3 - Drawer logo aligned with BRANDS text (~22px padding to match nav menu left position) */
@media (max-width: 720px) {
.mobile-menu .mm-head {
padding-left: 22px !important;
padding-right: 18px !important;
}
.mobile-menu .mm-head .mm-logo {
padding-left: 0 !important;
margin-left: 0 !important;
}
}
/* === v60AO: drawer top bar - balanced symmetric spacing === */
@media (max-width: 720px) {
.mobile-menu .mm-head {
padding: 18px 24px !important;
min-height: 70px !important;
}
.mobile-menu .mm-head .mm-logo {
padding-left: 0 !important;
margin-left: 0 !important;
}
.mobile-menu .mm-head .mm-logo .brandmark {
height: 36px !important;
width: auto !important;
display: block !important;
}
.mobile-menu .mm-head .mm-close {
width: 32px !important;
height: 22px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
margin-left: 12px !important;
margin-right: 0 !important;
flex-shrink: 0 !important;
}
.mobile-menu .mm-head .mm-close span {
height: 3px !important;
width: 100% !important;
background: #F8B60F !important;
border-radius: 2px !important;
}
}
/* ========== v60AQ DEFINITIVE drawer logo flush-left + search-loop fix-paired (CSS-side) ========== */
@media (max-width: 720px){
body.menu-open .mobile-menu .mm-head,
.mobile-menu .mm-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-left: 0 !important;
padding-right: 16px !important;
margin-left: -22px !important;
margin-right: -22px !important;
width: calc(100% + 44px) !important;
}
body.menu-open .mobile-menu .mm-logo,
.mobile-menu .mm-logo {
margin-left: 0 !important;
padding-left: 8px !important;
flex: 0 0 auto !important;
}
body.menu-open .mobile-menu .mm-logo svg.brandmark,
.mobile-menu .mm-logo svg.brandmark {
margin-left: 0 !important;
display: block !important;
}
}
/* ========== v60AQ DEFINITIVE heading font override (Dawn base.css forces Assistant) ========== */
h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5,
.title, .rxh-hero h1, .rxh-hero h2, .hero h1, .hero h2,
.rxc-hero-title, .rxc-card-title, .rx-prod-title, .rxc-footer-title, .rxc-seo-page-h1,
.rxs-search-page-h1, .rxp-blog-hero h1, .rxp-about-hero h1, .rxp-contact-hero h1, .rxp-blog-list h1, .rxp-page-hero h1,
.rx-prod-title, .rxc-tier-table-title, .rxh-hero .title, .section h2 {
font-family: Futura, "Futura Bk BT", "Helvetica Neue", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* ========== v60AR drawer balance + brand-link PC-only ========== */
@media (max-width: 720px) {
body.menu-open aside.mobile-menu#mobile-menu .mm-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 26px 14px 14px !important;
margin: 0 -22px 6px !important;
width: calc(100% + 44px) !important;
box-sizing: border-box !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo,
aside.mobile-menu#mobile-menu .mm-head .mm-logo {
margin-left: 0 !important;
padding-left: 0 !important;
flex: 0 0 auto !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close,
aside.mobile-menu#mobile-menu .mm-head .mm-close {
margin-right: 0 !important;
flex: 0 0 auto !important;
position: relative !important;
right: auto !important;
}
}
/* Brand collection hero logo: clickable on PC, plain image on mobile */
.rxc-brand-link {
cursor: pointer;
text-decoration: none;
color: inherit;
display: inline-block;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.rxc-brand-link:hover {
transform: scale(1.03);
opacity: 0.92;
}
@media (max-width: 720px) {
.rxc-brand-link {
pointer-events: none !important;
cursor: default !important;
}
.rxc-brand-link:hover {
transform: none !important;
opacity: 1 !important;
}
}
.rxc-hero-media-link {
display: block;
width: 100%;
}
/* ========== v60AT drawer alignment: logo aligned with Brand text, 3-lines aligned with nav right-arrows ========== */
/* Nav items use drawer_pad(22px) + nav_pad(22px) = 44px from viewport edges. Match that exact offset for the head bar. */
@media (max-width: 720px) {
body.menu-open aside.mobile-menu#mobile-menu .mm-head,
aside.mobile-menu#mobile-menu .mm-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
padding-left: 44px !important;
padding-right: 44px !important;
margin-left: -22px !important;
margin-right: -22px !important;
margin-top: 0 !important;
margin-bottom: 6px !important;
width: calc(100% + 44px) !important;
box-sizing: border-box !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo,
aside.mobile-menu#mobile-menu .mm-head .mm-logo {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo svg,
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark,
aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark {
margin: 0 !important;
padding: 0 !important;
display: block !important;
height: 36px !important;
width: auto !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close,
aside.mobile-menu#mobile-menu .mm-head .mm-close {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
position: relative !important;
right: auto !important;
width: 32px !important;
height: 32px !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close span,
aside.mobile-menu#mobile-menu .mm-head .mm-close span {
width: 22px !important;
height: 2px !important;
}
}
/* ========== v60AU drawer reset: clean logo on left, original SVG size, no bleed ========== */
@media (max-width: 720px) {
/* Strip the edge-bleed and reset mm-head to drawer content area */
body.menu-open aside.mobile-menu#mobile-menu .mm-head,
body.menu-open .mobile-menu .mm-head,
aside.mobile-menu#mobile-menu .mm-head,
.mobile-menu .mm-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 0 14px 0 !important;
margin: 0 0 12px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
position: sticky !important;
top: 0 !important;
z-index: 5 !important;
}
/* Logo: flush left, original dimensions */
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo,
body.menu-open .mobile-menu .mm-head .mm-logo,
aside.mobile-menu#mobile-menu .mm-head .mm-logo,
.mobile-menu .mm-head .mm-logo {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
color: #FFF !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark,
body.menu-open .mobile-menu .mm-head .mm-logo svg.brandmark,
aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark,
.mobile-menu .mm-head .mm-logo svg.brandmark,
.mobile-menu .mm-head .mm-logo svg {
height: 36px !important;
width: 150px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #FFF !important;
fill: currentColor !important;
}
/* Close button: flush right */
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close,
body.menu-open .mobile-menu .mm-head .mm-close,
aside.mobile-menu#mobile-menu .mm-head .mm-close,
.mobile-menu .mm-head .mm-close {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
width: 36px !important;
height: 36px !important;
position: relative !important;
right: auto !important;
background: transparent !important;
border: 0 !important;
display: inline-flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close span,
.mobile-menu .mm-head .mm-close span {
width: 22px !important;
height: 2px !important;
background: #F8B60F !important;
border-radius: 1px !important;
display: block !important;
transform: none !important;
}
}
/* ========== v60AV drawer colors: white bar + dark logo + yellow lines pulled left ========== */
@media (max-width: 720px) {
body.menu-open aside.mobile-menu#mobile-menu .mm-head,
body.menu-open .mobile-menu .mm-head,
aside.mobile-menu#mobile-menu .mm-head,
.mobile-menu .mm-head {
background: #FFFFFF !important;
color: #14151A !important;
border-bottom: 1px solid #E8E4DA !important;
box-shadow: 0 2px 8px -6px rgba(15, 34, 0, 0.18) !important;
margin-left: -22px !important;
margin-right: -22px !important;
padding: 16px 22px 14px 22px !important;
width: calc(100% + 44px) !important;
box-sizing: border-box !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo,
body.menu-open .mobile-menu .mm-head .mm-logo,
aside.mobile-menu#mobile-menu .mm-head .mm-logo,
.mobile-menu .mm-head .mm-logo {
color: #14151A !important;
}
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark,
body.menu-open .mobile-menu .mm-head .mm-logo svg.brandmark,
aside.mobile-menu#mobile-menu .mm-head .mm-logo svg.brandmark,
.mobile-menu .mm-head .mm-logo svg.brandmark,
.mobile-menu .mm-head .mm-logo svg {
color: #14151A !important;
fill: currentColor !important;
}
/* Move 3-lines a bit left from the right edge */
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close,
body.menu-open .mobile-menu .mm-head .mm-close,
aside.mobile-menu#mobile-menu .mm-head .mm-close,
.mobile-menu .mm-head .mm-close {
margin-right: 16px !important;
}
/* Keep the 3 lines yellow on the white bar */
body.menu-open aside.mobile-menu#mobile-menu .mm-head .mm-close span,
.mobile-menu .mm-head .mm-close span {
background: #F8B60F !important;
}
}
/* v60AZ logo bump for homepage and all pages */
header.site .logo svg.brandmark,
.site .logo svg.brandmark,
.logo svg.brandmark {
height: 56px !important;
width: auto !important;
}
@media (max-width: 720px) {
header.site .logo svg.brandmark,
.site .logo svg.brandmark,
.logo svg.brandmark {
height: 44px !important;
width: auto !important;
}
}
/* ================================================================
v60BA — Filter chip brand colors, sub-chips, apply explainer/tier cards,
founder quote, subtle X watermark on .grain sections
2026-05-26
================================================================ */
/* ---- v60BB harmonized chip palette (replaces v60BA) ---- */
.filters .chip {
background: #FFFFFF !important;
color: #14151A !important;
border: 1.5px solid #E8E4DA !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.filters .chip:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px -6px rgba(15,34,0,0.18);
}
.filters .chip.active {
background: #0F2200 !important;
color: #FFFFFF !important;
border-color: #0F2200 !important;
}
.filters .chip .count {
background: rgba(15,34,0,0.08);
color: inherit;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
opacity: 0.85;
}
/* Brand pills — solid coloured with same intensity across the row */
.filters .chip.chip-brand-kingk {
background: #F8B60F !important;
color: #0F2200 !important;
border-color: #F8B60F !important;
}
.filters .chip.chip-brand-kingk .count { background: rgba(15,34,0,0.15); }
.filters .chip.chip-brand-gud {
background: #5BBF8E !important;
color: #FFFFFF !important;
border-color: #5BBF8E !important;
}
.filters .chip.chip-brand-gud .count { background: rgba(255,255,255,0.22); color: #FFFFFF; }
.filters .chip.chip-brand-grh {
background: #1A3A12 !important;
color: #F8B60F !important;
border-color: #1A3A12 !important;
}
.filters .chip.chip-brand-grh .count { background: rgba(248,182,15,0.2); color: #F8B60F; }
.filters .chip.chip-brand-grass {
background: #C68F00 !important;
color: #FFFFFF !important;
border-color: #C68F00 !important;
}
.filters .chip.chip-brand-grass .count { background: rgba(255,255,255,0.22); color: #FFFFFF; }
/* Sub-chips — desaturated outline version of the parent brand color */
.filters .chip.chip-sub.chip-brand-kingk {
background: #FEF6DE !important;
color: #8B6500 !important;
border-color: #F8B60F !important;
}
.filters .chip.chip-sub.chip-brand-kingk .count { background: rgba(248,182,15,0.18); color: #8B6500; }
.filters .chip.chip-sub.chip-brand-grh {
background: #E8EEE5 !important;
color: #1A3A12 !important;
border-color: #1A3A12 !important;
}
.filters .chip.chip-sub.chip-brand-grh .count { background: rgba(26,58,18,0.12); color: #1A3A12; }
/* Category-only pills — neutral muted tones */
.filters .chip.chip-cat-powders {
background: #F1ECDC !important;
color: #5A4F36 !important;
border-color: #D8CDB0 !important;
}
.filters .chip.chip-cat-capsules {
background: #EBE5D4 !important;
color: #5A4F36 !important;
border-color: #D8CDB0 !important;
}
.filters .chip.chip-cat-extracts {
background: #E8DCC7 !important;
color: #7A5A22 !important;
border-color: #D8C49E !important;
}
.filters .chip.chip-cat-energy {
background: #F0D9C7 !important;
color: #9A4F1E !important;
border-color: #E0BFA0 !important;
}
.filters .chip.chip-cat-kava {
background: #D8E5DC !important;
color: #1A4530 !important;
border-color: #A8C7B5 !important;
}
.filters .chip.chip-cat-thc {
background: #EAE3EE !important;
color: #5A3D6B !important;
border-color: #C9B8D2 !important;
}
.filters .chip.chip-cat-powders .count,
.filters .chip.chip-cat-capsules .count,
.filters .chip.chip-cat-extracts .count,
.filters .chip.chip-cat-energy .count,
.filters .chip.chip-cat-kava .count,
.filters .chip.chip-cat-thc .count { background: rgba(0,0,0,0.08); }
/* Sub-chip sizing override */
.filters .chip.chip-sub {
font-size: 12px !important;
padding: 6px 12px !important;
margin-left: 4px !important;
letter-spacing: 0.04em;
}
/* Chip group spacing */
.filters .chip-group {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
/* ---- Apply page explainer + tier cards ---- */
.apply-explainer {
background: linear-gradient(180deg, #FFFCF2 0%, #FCF8E8 100%);
border: 1px solid rgba(248,182,15,0.36);
border-radius: 14px;
padding: 28px 28px 24px;
margin-bottom: 22px;
position: relative;
box-shadow: 0 4px 14px rgba(15,34,0,0.05);
}
.apply-explainer-kicker {
color: #C68F00;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 800;
margin: 0 0 8px;
}
.apply-explainer h3 {
color: #0F2200;
font-size: 22px;
margin: 0 0 6px;
font-weight: 800;
letter-spacing: -0.01em;
}
.apply-explainer-sub {
color: #4A5040;
font-size: 14px;
margin: 0 0 18px;
line-height: 1.45;
}
.apply-tier-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
.apply-tier-card {
background: #FFFFFF;
border: 1px solid rgba(15,34,0,0.12);
border-radius: 10px;
padding: 16px 14px;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.apply-tier-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(15,34,0,0.10);
border-color: rgba(248,182,15,0.5);
}
.apply-tier-card.apply-tier-mid {
border-color: #F8B60F;
background: linear-gradient(180deg, #FFFEFA 0%, #FFFAEC 100%);
position: relative;
}
.apply-tier-card.apply-tier-mid::before {
content: 'POPULAR';
position: absolute;
top: -8px;
right: 12px;
background: #F8B60F;
color: #0F2200;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.16em;
padding: 3px 8px;
border-radius: 4px;
}
.apply-tier-card.apply-tier-flagship {
border-color: #1A3A12;
background: linear-gradient(180deg, #0F2200 0%, #1A3A12 100%);
color: #FFFFFF;
}
.apply-tier-card.apply-tier-flagship .apply-tier-amount,
.apply-tier-card.apply-tier-flagship .apply-tier-label {
color: #F8B60F !important;
}
.apply-tier-card.apply-tier-flagship ul li {
color: #E8E6D8;
}
.apply-tier-amount {
font-size: 24px;
font-weight: 900;
color: #0F2200;
letter-spacing: -0.02em;
line-height: 1.1;
}
.apply-tier-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8A8472;
margin: 2px 0 10px;
}
.apply-tier-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.apply-tier-card ul li {
font-size: 12.5px;
color: #4A5040;
padding: 4px 0 4px 16px;
position: relative;
line-height: 1.35;
}
.apply-tier-card ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 4px;
color: #C68F00;
font-weight: 900;
font-size: 11px;
}
.apply-tier-card.apply-tier-flagship ul li::before {
color: #F8B60F;
}
.apply-explainer-note {
font-size: 12.5px;
color: #4A5040;
background: rgba(255,255,255,0.6);
border-left: 3px solid #F8B60F;
padding: 10px 12px;
margin: 4px 0 0;
border-radius: 4px;
line-height: 1.5;
}
.apply-explainer-note strong { color: #0F2200; }
@media (max-width: 720px) {
.apply-tier-grid {
grid-template-columns: 1fr;
}
.apply-explainer {
padding: 20px 18px 18px;
}
.apply-explainer h3 { font-size: 18px; }
}
/* ---- Apply founder quote ---- */
.apply-founder-quote {
margin: 0 0 22px;
padding: 0;
}
.apply-founder-quote blockquote {
margin: 0;
padding: 16px 20px;
background: rgba(248,182,15,0.06);
border-left: 4px solid #F8B60F;
border-radius: 0 8px 8px 0;
}
.apply-founder-quote blockquote p {
font-style: italic;
font-size: 15px;
color: #0F2200;
line-height: 1.5;
margin: 0 0 8px;
}
.apply-founder-quote blockquote cite {
font-style: normal;
font-size: 12px;
letter-spacing: 0.06em;
color: #8A6500;
font-weight: 700;
}
/* ---- v60BB Subtle X watermark on .grain sections (opacity cut in half) ---- */
.section.grain {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: repeat !important;
background-position: center top !important;
}
/* v60BB: skip watermark on the "BUILT LIKE A CATEGORY PARTNER" why-section */
.section.why.grain {
background-image: none !important;
}
/* v60BE — WCAG 1.4.3 contrast fixes (audit pass 4) */
.chip.chip-brand-gud { background:#3F9F71 !important; color:#FFF !important; border-color:#3F9F71 !important; }
.chip.chip-brand-gud .count { background:rgba(255,255,255,0.3) !important; color:#FFF !important; }
.chip.chip-brand-grass { background:#A37300 !important; color:#FFF !important; border-color:#A37300 !important; }
.chip.chip-brand-grass .count { background:rgba(255,255,255,0.3) !important; color:#FFF !important; }
.chip.chip-brand-grh .count { background:rgba(248,182,15,0.25) !important; color:#FFE08A !important; }
.chip.chip-cat-energy { background:#E8C0A0 !important; color:#6B3A12 !important; border-color:#D8A878 !important; }
.vendor-tag { color:#5A4F36 !important; font-weight:700 !important; }
.rxc-card-cta { color:#0F2200 !important; font-weight:700 !important; }
.kicker { color:#8B6500 !important; font-weight:700 !important; }
.legal > span { color:#4A4538 !important; }
/* v60BE — A11Y-003: rx-prod-img-main is now a